Excise HacksSelectorCanvas
-/* Copyright 2011 The Dominion of Awesome
- * See COPYING for licensing information */
-enyo.kind({
- name: "HacksSelector",
- kind: "Control",
- nodeTag: "canvas",
- className: "hacks-selector",
- style: "opacity: 0",
- width: "748px",
- height: "192px",
- index: 0,
- published: {
- hacksList: null
- },
- hacksThumbs: {},
- rendered: function() {
- this.inherited(arguments);
- var node = this.hasNode();
- node.width = 748;
- node.height = 192;
- this.ctx = node.getContext('2d');
- this.ctx.fillStyle = 'white';
- this.fadeGradient = this.ctx.createLinearGradient(0, 0, 0, 128);
- this.fadeGradient.addColorStop(0.6, 'rgba(0,0,0,0)');
- this.fadeGradient.addColorStop(1.0, 'rgba(255,255,255,0.5)');
- },
- setHacksList: function(newHacksList) {
- this.hacksList = newHacksList;
- for (var i = 0; i < this.hacksList.length; i++) {
- if (this.hacksThumbs[this.hacksList[i]])
- continue;
- var img = new Image();
- img.src = "hacks/" + this.hacksList[i] + "/thumbnail.png";
- img.onload = this.draw.bind(this);
- this.hacksThumbs[this.hacksList[i]] = img;
- }
- },
- show: function() {
- if (this.hideTimer)
- clearTimeout(this.hideTimer);
- this.hideTimer = setTimeout(function() {
- this.setStyle('opacity: 0; -webkit-transition: opacity 0.5s linear');
- }.bind(this), 1500);
- this.setStyle('opacity: 1.0; -webkit-transition: opacity 0.25s linear');
- },
- draw: function() {
- this.ctx.clearRect(0, 0, 750, 256);
- if (!this.hacksList) return;
- for (var i = -2; i <= 3; i++) {
- var frac = this.index - Math.floor(this.index);
- var x = 311 + (i - frac) * 146;
- var j = Math.floor(this.index) + i;
- if (j < 0 || j > this.hacksList.length - 1)
- continue;
- var h = this.hacksList[j];
-
- this.ctx.save();
- this.ctx.translate(x, 0);
- this.ctx.drawImage(this.hacksThumbs[h], 0, 0);
- this.ctx.scale(1, -1);
- this.ctx.translate(0, -256);
- this.ctx.beginPath();
- this.ctx.fillStyle = this.fadeGradient;
- this.ctx.rect(0, 0, 128, 128);
- this.ctx.fill();
- this.ctx.globalCompositeOperation = 'source-in';
- this.ctx.drawImage(this.hacksThumbs[h], 0, 0);
- this.ctx.restore();
-
- this.ctx.save();
- this.ctx.shadowColor = 'white';
- this.ctx.shadowBlur = '3';
- this.ctx.beginPath();
- this.ctx.arc(374, 160, 5, 0, Math.PI * 2);
- this.ctx.fill();
- this.ctx.restore();
- }
- }
-});
components: [
{kind: "ApplicationEvents", onWindowActivated: "windowActivated", onWindowDeactivated: "windowDeactivated"},
{name: "hacksCarousel", kind: "Carousel", flex: 1, onGetLeft: "getLeft", onGetRight: "getRight", onScroll: "scrolling", onScrollStart: "startScroll", onScrollStop: "stopScroll"},
- //{name: "hacksSelector", kind: "HacksSelector"}
{name: "info", kind: "HFlexBox", className: "info", style: "opacity: 0", showing: false, components: [
{name: "title"},
{kind: "Spacer"},
this.index = 0;
this.lastScrollPos = 0;
this.$.hacksCarousel.setCenterView(this.getHack(this.index));
- //this.$.hacksSelector.setHacksList(this.hacksList);
},
ready: function() {
this.startHack();
scrolling: function(inSender) {
if (inSender.scrollLeft == 0 || inSender.scrollLeft == inSender.getBoundaries().right)
this.startHack();
- //this.$.hacksSelector.index = this.index + ((inSender.scrollLeft - this.lastScrollPos) / window.innerWidth);
- //this.$.hacksSelector.draw();
},
startScroll: function(inSender) {
this.stopHack();
enyo.depends(
"Main.js",
"Main.css",
- //"HacksSelector.js",
"hacks/Hack.js",
"hacks/Nimbus/Nimbus.js",
"hacks/HexaSpinner/HexaSpinner.js",