Main.js

   1 /* Copyright 2011 The Dominion of Awesome
   2  * See COPYING for licensing information */
   3 enyo.kind({
   4         name: "Main",
   5         kind: "VFlexBox",
   6         style: "background-color: black",
   7         components: [
   8                 {kind: "ApplicationEvents", onWindowActivated: "windowActivated", onWindowDeactivated: "windowDeactivated"},
   9                 {name: "hacksCarousel", kind: "Carousel", flex: 1, onGetLeft: "getLeft", onGetRight: "getRight", onScroll: "scrolling", onScrollStart: "startScroll", onScrollStop: "stopScroll"},
  10                 //{name: "hacksSelector", kind: "HacksSelector"}
  11                 {name: "info", kind: "HFlexBox", className: "info", style: "opacity: 0", showing: false, components: [
  12                         {name: "title"},
  13                         {kind: "Spacer"},
  14                         {name: "notice", className: "notice"}
  15                 ]}
  16         ],
  17         hacksList: [
  18                 {name: "Nimbus", kind: "Nimbus", dark: false},
  19                 {name: "HexaSpinner", kind: "HexaSpinnerHack", dark: false},
  20                 {name: "Landscape", kind: "Landscape", dark: false},
  21                 {name: "Munch", kind: "Munch", dark: true},
  22                 {name: "Orbit", kind: "Orbit", dark: false},
  23                 {name: "Pixelfade", kind: "Pixelfade", dark: true},
  24                 //{name: "Swarm", kind: "Swarm", dark: false},       // crashy
  25                 //{name: "Spinner.CGA", kind: "XSpinnerCGA", dark: true}, // no webfont support
  26                 {name: "Spinner", kind: "XSpinner", dark: true}
  27         ],
  28         create: function() {
  29                 this.inherited(arguments);
  30                 /*
  31                 this.index = localStorage.getItem('hack.index');
  32                 if (!this.index)
  33                         this.index = 0;
  34                 */
  35                 this.index = 0;
  36                 this.lastScrollPos = 0;
  37                 this.$.hacksCarousel.setCenterView(this.getHack(this.index));
  38                 //this.$.hacksSelector.setHacksList(this.hacksList);
  39         },
  40         ready: function() {
  41                 this.startHack();
  42                 window.addEventListener('resize', this.resizeHack.bind(this), false);
  43                 this.setNotice('Swipe for more...');
  44                 this.setTitle(this.hacksList[this.index].name);
  45         },
  46         setTitle: function(title) {
  47                 this.$.title.setContent(title);
  48                 this.infoFade();
  49         },
  50         setNotice: function(notice) {
  51                 this.$.notice.setContent(notice);
  52                 this.infoFade();
  53         },
  54         infoFade: function() {
  55                 this.$.info.setStyle('opacity: 1');
  56                 this.$.info.show();
  57
  58                 clearTimeout(this.noticeTimer);
  59                 this.noticeTimer = setTimeout(function() {
  60                         this.$.info.setStyle('opacity: 0');
  61                         setTimeout(function() {
  62                                 this.$.info.hide();
  63                                 this.setNotice('');
  64                                 this.setTitle('');
  65                         }.bind(this), 600);
  66                 }.bind(this), 5000);
  67         },
  68         windowActivated: function() {
  69                 this.startHack();
  70         },
  71         windowDeactivated: function() {
  72                 this.stopHack();
  73         },
  74         startHack: function(direction) {
  75                 var view = this.$.hacksCarousel.fetchView(direction || 'center');
  76                 //enyo.log('starting view ' + view);
  77                 if (view)
  78                         view.start();
  79                 //localStorage.setItem('hack.index', this.index);
  80         },
  81         stopHack: function(direction) {
  82                 var view = this.$.hacksCarousel.fetchView(direction || 'center');
  83                 //enyo.log('stopping view ' + view);
  84                 if (view)
  85                         view.stop();
  86         },
  87         resizeHack: function() {
  88                 var view = this.$.hacksCarousel.fetchView('center');
  89                 if (view)
  90                         view.resize(window.innerWidth, window.innerHeight);
  91                 var view = this.$.hacksCarousel.fetchView('left');
  92                 if (view)
  93                         view.resize(window.innerWidth, window.innerHeight);
  94                 var view = this.$.hacksCarousel.fetchView('right');
  95                 if (view)
  96                         view.resize(window.innerWidth, window.innerHeight);
  97         },
  98         hackHidden: function(direction) {
  99                 var view = this.$.hacksCarousel.fetchView(direction);
 100                 //enyo.log('view ' + view + ' hidden');
 101                 if (view)
 102                         view.hidden();
 103         },
 104         getHack: function(index) {
 105                 return {kind: this.hacksList[index].kind};
 106         },
 107         getLeft: function(inSender, inSnap) {
 108                 if (inSnap && this.index > 0) {
 109                         this.index--;
 110                         this.hackHidden('right');
 111                         this.setTitle(this.hacksList[this.index].name);
 112                         this.$.info.addRemoveClass('dark', this.hacksList[this.index].dark);
 113                 }
 114                 if (this.index == 0)
 115                         return null;
 116                 else
 117                         return this.getHack(this.index - 1);
 118         },
 119         getRight: function(inSender, inSnap) {
 120                 if (inSnap && this.index < this.hacksList.length) {
 121                         this.index++;
 122                         this.hackHidden('left');
 123                         this.setTitle(this.hacksList[this.index].name);
 124                         this.$.info.addRemoveClass('dark', this.hacksList[this.index].dark);
 125                 }
 126                 if (this.index == this.hacksList.length - 1)
 127                         return null;
 128                 else
 129                         return this.getHack(this.index + 1);
 130         },
 131         scrolling: function(inSender) {
 132                 if (inSender.scrollLeft == 0 || inSender.scrollLeft == inSender.getBoundaries().right)
 133                         this.startHack();
 134                 //this.$.hacksSelector.index = this.index + ((inSender.scrollLeft - this.lastScrollPos) / window.innerWidth);
 135                 //this.$.hacksSelector.draw();
 136         },
 137         startScroll: function(inSender) {
 138                 this.stopHack();
 139         },
 140         stopScroll: function(inSender) {
 141                 this.lastScrollPos = this.$.hacksCarousel.scrollLeft;
 142                 this.startHack();
 143         }
 144 });