HacksSelectorCanvas.js

   1 /* Copyright 2011 The Dominion of Awesome
   2  * See COPYING for licensing information */
   3 enyo.kind({
   4         name: "HacksSelector",
   5         kind: "Control",
   6         nodeTag: "canvas",
   7         className: "hacks-selector",
   8         style: "opacity: 0",
   9         width: "748px",
  10         height: "192px",
  11         index: 0,
  12         published: {
  13                 hacksList: null
  14         },
  15         hacksThumbs: {},
  16         rendered: function() {
  17                 this.inherited(arguments);
  18                 var node = this.hasNode();
  19                 node.width = 748;
  20                 node.height = 192;
  21                 this.ctx = node.getContext('2d');
  22                 this.ctx.fillStyle = 'white';
  23                 this.fadeGradient = this.ctx.createLinearGradient(0, 0, 0, 128);
  24                 this.fadeGradient.addColorStop(0.6, 'rgba(0,0,0,0)');
  25                 this.fadeGradient.addColorStop(1.0, 'rgba(255,255,255,0.5)');
  26         },
  27         setHacksList: function(newHacksList) {
  28                 this.hacksList = newHacksList;
  29                 for (var i = 0; i < this.hacksList.length; i++) {
  30                         if (this.hacksThumbs[this.hacksList[i]])
  31                                 continue;
  32                         var img = new Image();
  33                         img.src = "hacks/" + this.hacksList[i] + "/thumbnail.png";
  34                         img.onload = this.draw.bind(this);
  35                         this.hacksThumbs[this.hacksList[i]] = img;
  36                 }
  37         },
  38         show: function() {
  39                 if (this.hideTimer)
  40                         clearTimeout(this.hideTimer);
  41                 this.hideTimer = setTimeout(function() {
  42                         this.setStyle('opacity: 0; -webkit-transition: opacity 0.5s linear');
  43                 }.bind(this), 1500);
  44                 this.setStyle('opacity: 1.0; -webkit-transition: opacity 0.25s linear');
  45         },
  46         draw: function() {
  47                 this.ctx.clearRect(0, 0, 750, 256);
  48                 if (!this.hacksList) return;
  49                 for (var i = -2; i <= 3; i++) {
  50                         var frac = this.index - Math.floor(this.index);
  51                         var x = 311 + (i - frac) * 146;
  52                         var j = Math.floor(this.index) + i;
  53                         if (j < 0 || j > this.hacksList.length - 1)
  54                                continue;
  55                         var h = this.hacksList[j];
  56
  57                         this.ctx.save();
  58                         this.ctx.translate(x, 0);
  59                         this.ctx.drawImage(this.hacksThumbs[h], 0, 0);
  60                         this.ctx.scale(1, -1);
  61                         this.ctx.translate(0, -256);
  62                         this.ctx.beginPath();
  63                         this.ctx.fillStyle = this.fadeGradient;
  64                         this.ctx.rect(0, 0, 128, 128);
  65                         this.ctx.fill();
  66                         this.ctx.globalCompositeOperation = 'source-in';
  67                         this.ctx.drawImage(this.hacksThumbs[h], 0, 0);
  68                         this.ctx.restore();
  69
  70                         this.ctx.save();
  71                         this.ctx.shadowColor = 'white';
  72                         this.ctx.shadowBlur = '3';
  73                         this.ctx.beginPath();
  74                         this.ctx.arc(374, 160, 5, 0, Math.PI * 2);
  75                         this.ctx.fill();
  76                         this.ctx.restore();
  77                 }
  78         }
  79 });