hacks/Landscape/Landscape.js

   1 /* Copyright 2011 The Dominion of Awesome
   2  * See COPYING for licensing information */
   3 enyo.kind({
   4         name: "Landscape",
   5         kind: "Hack",
   6         style: "background-color: #2ab40f",
   7         preferences: [
   8                 {name: "direction", label: "Direction of Travel", kind: "ListSelector", items: [
   9                         {caption: "right", value: -1},
  10                         {caption: "left", value: 1}
  11                 ]},
  12                 {name: "speed", label: "Speed", kind: "Slider", minimum: 0.1, maximum: 10, snap: 0.1}
  13         ],
  14         direction: -1,
  15         speed: 1.0,
  16         components: [
  17                 {name: "clouds", style: "height: 200px; background-image: url(hacks/Landscape/clouds.png)"},
  18                 {name: "mountains", style: "height: 200px; background-image: url(hacks/Landscape/mountains.png)"},
  19                 {name: "trees", style: "height: 200px; background-image: url(hacks/Landscape/trees.png)"}
  20         ],
  21         create: function() {
  22                 this.inherited(arguments);
  23                 this.n = 0;
  24         },
  25         start: function() {
  26                 if (!this.timer)
  27                         this.timer = setInterval(this.draw.bind(this), 33);
  28         },
  29         stop: function() {
  30                 clearInterval(this.timer);
  31                 this.timer = null;
  32         },
  33         draw: function() {
  34                 this.n += this.direction * this.speed;
  35                 if (this.n <= -1600)
  36                         this.n += 1600;
  37                 else if (this.n >= 1600)
  38                         this.n -= 1600;
  39
  40                 this.$.clouds.applyStyle("background-position", (this.n * 1.5) + "px top");
  41                 this.$.mountains.applyStyle("background-position", (this.n * 2.5) + "px top");
  42                 this.$.trees.applyStyle("background-position", (this.n * 7.5) + "px top");
  43         }
  44 });