前回のキマブロ： atom.ioのstyles.lessについて

It's kind of silly to write up an entry on this, but I thought this would be something fun to share.

I've been using atom.io now for about a week and I've wanted to shuffle around my backgrounds. Seeing as how LESS doesn't seem to provide the facilities for doing random select of array elements (without unsafe script handling), I decided to move this into my init script.

Let's get started.

styles.less

Going by what my coworker told me, I decided to make .editor transparent. Doing that, my stylesheet gets very small:

@transparent_pink: rgba(255, 192, 203, .5);
@semitransparent_yellow: rgba(255, 255, 0, .75);
@editor_background: rgba(20, 20, 0, .7); // もっと夏っぽく!!!

.editor {
  background: @editor_background;
}

.comment {
  color: @semitransparent_yellow;
}

.editor {
  .cursor {
    border-color: pink;
    border-width: 2px;
  }

  .selection .region {
    background: @transparent_pink;
  }
}

Yes, I did put that comment "夏っぽく" there because yellow-tinted pictures remind me of the yellow summer sunlight (though I believe the hue of the sunlight has more to do with the temperature, but I'm not sure).

init.coffee

This is where all the heavy lifting gets done. Because I didn't want to deal with multiple files yet (because I haven't consolidated/updated my dotfiles in a while on GitHub), I wanted to keep everything in one file. Unfortunately, that means I have some formatting code and also just raw data in my script.

There's only a few bits relevant to this article, so I'll just show them in slices.

First, we need to set the update interval on our background:

update_interval = 60 * 5

Then, we need a function for setting the background and backgroundSize style properties:

setBackground = (image_url) ->
  pane = document.getElementsByClassName('pane')[0]
  pane.style.background = "url('{image_url}')"
                            .replace('{image_url}', image_url)
  pane.style.backgroundSize = "cover"

Populate a collection of images:

images = []
images.push('https://farm4.staticflickr.com/3675/9164642229_9fd0560b31_o_d.jpg')
images.push('http://media-cache-ec0.pinimg.com/originals/39/8a/ff/398aff8e6dcea2befe58f09480857a4b.jpg')
[...]

A random select function for the image to be set:

randomSelect = () ->
  index = Math.floor(Math.random() * images.length)
  setBackground(images[index])

Finally, the initialization of the first background and the intervals:

randomSelect()

setInterval(randomSelect, (1000 * update_interval))

Conclusion

できました！ Using this method, I was able to get a background image to rotate in my .pane every 5 minutes.

You can view/copy my config here: https://gist.github.com/kimagure/8c57fd492eec7c363abc

Setting rotating backgrounds on Atom.io

styles.less

init.coffee

Conclusion