Main.js

   1 /* Copyright 2011 The Dominion of Awesome
   2  * See COPYING for licensing information */
   3 enyo.kind({
   4         name: "Main",
   5         kind: "Pane",
   6         components: [
   7                 {kind: "ApplicationEvents", onWindowActivated: "windowActivated", onWindowDeactivated: "windowDeactivated"},
   8                 {name: "mainView", kind: "VFlexBox", components: [
   9                         {name: "hacksCarousel", kind: "Carousel", flex: 1, onGetLeft: "getLeft", onGetRight: "getRight", onScroll: "scrolling", onScrollStart: "startScroll", onScrollStop: "stopScroll"},
  10                         {name: "info", kind: "HFlexBox", className: "info", align: "center", style: "opacity: 0", onclick: "infoFade", components: [
  11                                 {className: "wrench", onclick: "openPreferences"},
  12                                 {name: "hacksListSelector", kind: "ListSelector", popupAlign: "left", onChange: "selectHack", style: "width: 200px"},
  13                                 {kind: "Spacer"},
  14                                 {name: "notice", className: "notice"}
  15                         ]}
  16                 ]},
  17                 {name: "preferencesView", kind: "HackPreferences", onClose: "savePreferences"}
  18         ],
  19         hacksList: [
  20                 {name: "Nimbus", kind: "Nimbus", dark: false},
  21                 {name: "HexaSpinner", kind: "HexaSpinnerHack", dark: false},
  22                 {name: "Landscape", kind: "Landscape", dark: false},
  23                 {name: "Munch", kind: "Munch", dark: true},
  24                 {name: "Orbit", kind: "Orbit", dark: false},
  25                 {name: "Pixelfade", kind: "Pixelfade", dark: true},
  26                 //{name: "Swarm", kind: "Swarm", dark: false},       // crashy
  27                 //{name: "Spinner.CGA", kind: "XSpinnerCGA", dark: true}, // no webfont support
  28                 {name: "Spinner", kind: "XSpinner", dark: true}
  29         ],
  30         create: function() {
  31                 this.inherited(arguments);
  32                 /*
  33                 this.index = localStorage.getItem('hack.index');
  34                 if (!this.index)
  35                         this.index = 0;
  36                 */
  37                 this.index = 0;
  38                 this.lastScrollPos = 0;
  39                 this.$.hacksCarousel.setCenterView(this.getHack(this.index));
  40         },
  41         ready: function() {
  42                 var displayList = [];
  43                 for (var i = 0; i < this.hacksList.length; i++) {
  44                         displayList.push({
  45                                 caption: this.hacksList[i].name,
  46                                 value: i
  47                         });
  48                 }
  49                 this.$.hacksListSelector.setItems(displayList);
  50                 this.startHack();
  51                 window.addEventListener('resize', this.resizeHack.bind(this), false);
  52                 this.setNotice('Swipe for more...');
  53         },
  54         setNotice: function(notice) {
  55                 this.$.notice.setContent(notice);
  56                 this.infoFade();
  57         },
  58         infoFade: function() {
  59                 this.$.info.setStyle('opacity: 1');
  60
  61                 clearTimeout(this.noticeTimer);
  62                 this.noticeTimer = setTimeout(function() {
  63                         this.$.info.setStyle('opacity: 0');
  64                         setTimeout(function() {
  65                                 this.$.notice.setContent('');
  66                         }.bind(this), 600);
  67                 }.bind(this), 5000);
  68         },
  69         openPreferences: function() {
  70                 var view = this.$.hacksCarousel.fetchView('center');
  71                 view.stop();
  72
  73                 var meta = view.getPreferencesMetadata();
  74                 if (meta) {
  75                         var values = view.getPreferences();
  76                         this.$.preferencesView.load(this.hacksList[this.index].name, meta, values);
  77                         this.selectView(this.$.preferencesView);
  78                 } else {
  79                         alert("No prefs");
  80                 }
  81         },
  82         savePreferences: function(inSender, prefs) {
  83                 enyo.log("Saving prefs: " + JSON.stringify(prefs));
  84                 this.back();
  85                 var view = this.$.hacksCarousel.fetchView('center');
  86                 view.setPreferences(prefs);
  87                 view.start();
  88         },
  89         windowActivated: function() {
  90                 this.startHack();
  91         },
  92         windowDeactivated: function() {
  93                 this.stopHack();
  94         },
  95         selectHack: function(inSender, inValue, inOldValue) {
  96                 this.stopHack();
  97                 this.index = inValue;
  98                 this.lastScrollPos = 0;
  99                 this.$.hacksCarousel.setCenterView(this.getHack(this.index));
 100                 this.$.info.addRemoveClass('dark', this.hacksList[this.index].dark);
 101                 // For some reason, setCenterView above fires the startScroll
 102                 // event without a subsequent stopScroll event.  To work around
 103                 // this, we defer the start until later.
 104                 setTimeout(function() { this.startHack() }.bind(this), 20);
 105         },
 106         startHack: function(direction) {
 107                 var view = this.$.hacksCarousel.fetchView(direction || 'center');
 108                 //enyo.log('starting view ' + view);
 109                 if (view)
 110                         view.start();
 111                 //localStorage.setItem('hack.index', this.index);
 112         },
 113         stopHack: function(direction) {
 114                 var view = this.$.hacksCarousel.fetchView(direction || 'center');
 115                 //enyo.log('stopping view ' + view);
 116                 if (view)
 117                         view.stop();
 118         },
 119         resizeHack: function() {
 120                 var view = this.$.hacksCarousel.fetchView('center');
 121                 if (view)
 122                         view.resize(window.innerWidth, window.innerHeight);
 123                 var view = this.$.hacksCarousel.fetchView('left');
 124                 if (view)
 125                         view.resize(window.innerWidth, window.innerHeight);
 126                 var view = this.$.hacksCarousel.fetchView('right');
 127                 if (view)
 128                         view.resize(window.innerWidth, window.innerHeight);
 129         },
 130         hackHidden: function(direction) {
 131                 var view = this.$.hacksCarousel.fetchView(direction);
 132                 //enyo.log('view ' + view + ' hidden');
 133                 if (view)
 134                         view.hidden();
 135         },
 136         getHack: function(index) {
 137                 return {kind: this.hacksList[index].kind};
 138         },
 139         getLeft: function(inSender, inSnap) {
 140                 if (inSnap && this.index > 0) {
 141                         this.index--;
 142                         this.$.hacksListSelector.setValue(this.index);
 143                         this.hackHidden('right');
 144                         this.infoFade();
 145                         this.$.info.addRemoveClass('dark', this.hacksList[this.index].dark);
 146                 }
 147                 if (this.index == 0)
 148                         return null;
 149                 else
 150                         return this.getHack(this.index - 1);
 151         },
 152         getRight: function(inSender, inSnap) {
 153                 if (inSnap && this.index < this.hacksList.length) {
 154                         this.index++;
 155                         this.$.hacksListSelector.setValue(this.index);
 156                         this.hackHidden('left');
 157                         this.infoFade();
 158                         this.$.info.addRemoveClass('dark', this.hacksList[this.index].dark);
 159                 }
 160                 if (this.index == this.hacksList.length - 1)
 161                         return null;
 162                 else
 163                         return this.getHack(this.index + 1);
 164         },
 165         scrolling: function(inSender) {
 166                 if (inSender.scrollLeft == 0 || inSender.scrollLeft == inSender.getBoundaries().right)
 167                         this.startHack();
 168         },
 169         startScroll: function(inSender) {
 170                 this.stopHack();
 171         },
 172         stopScroll: function(inSender) {
 173                 this.lastScrollPos = this.$.hacksCarousel.scrollLeft;
 174                 this.startHack();
 175         }
 176 });