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                         {name: "noPrefsDialog", kind: "ModalDialog", caption: "No Preferences", components: [
  17                                 {kind: "Button", content: "Okay", onclick: "closeNoPrefsDialog"}
  18                         ]}
  19                 ]},
  20                 {name: "preferencesView", kind: "HackPreferences", onClose: "savePreferences"}
  21         ],
  22         hacksList: [
  23                 {name: "Nimbus", kind: "Nimbus", dark: false},
  24                 {name: "HexaSpinner", kind: "HexaSpinnerHack", dark: false},
  25                 {name: "Landscape", kind: "Landscape", dark: false},
  26                 {name: "Munch", kind: "Munch", dark: true},
  27                 {name: "Orbit", kind: "Orbit", dark: false},
  28                 {name: "Pixelfade", kind: "Pixelfade", dark: true},
  29                 //{name: "Swarm", kind: "Swarm", dark: false},       // crashy
  30                 //{name: "Spinner.CGA", kind: "XSpinnerCGA", dark: true}, // no webfont support
  31                 {name: "Spinner", kind: "XSpinner", dark: true}
  32         ],
  33         create: function() {
  34                 this.inherited(arguments);
  35                 try {
  36                         this.index = localStorage.getItem('hack.index');
  37                         if (!this.index)
  38                                 this.index = 0;
  39                 } catch(e) {
  40                         enyo.log("Could not load last hack index");
  41                         this.index = 0;
  42                 }
  43                 this.lastScrollPos = 0;
  44                 this.$.hacksCarousel.setCenterView(this.getHack(this.index));
  45         },
  46         ready: function() {
  47                 var displayList = [];
  48                 for (var i = 0; i < this.hacksList.length; i++) {
  49                         displayList.push({
  50                                 caption: this.hacksList[i].name,
  51                                 value: i
  52                         });
  53                 }
  54                 this.$.hacksListSelector.setItems(displayList);
  55                 this.startHack();
  56                 window.addEventListener('resize', this.resizeHack.bind(this), false);
  57                 this.setNotice('Swipe for more...');
  58         },
  59         setNotice: function(notice) {
  60                 this.$.notice.setContent(notice);
  61                 this.infoFade();
  62         },
  63         infoFade: function() {
  64                 this.$.info.setStyle('opacity: 1');
  65
  66                 clearTimeout(this.noticeTimer);
  67                 this.noticeTimer = setTimeout(function() {
  68                         this.$.info.setStyle('opacity: 0');
  69                         setTimeout(function() {
  70                                 this.$.notice.setContent('');
  71                         }.bind(this), 600);
  72                 }.bind(this), 5000);
  73         },
  74         openPreferences: function() {
  75                 var view = this.$.hacksCarousel.fetchView('center');
  76
  77                 var meta = view.getPreferencesMetadata();
  78                 if (meta.length) {
  79                         view.stop();
  80                         var values = view.getPreferences();
  81                         this.$.preferencesView.load(this.hacksList[this.index].name, meta, values);
  82                         this.selectView(this.$.preferencesView);
  83                 } else {
  84                         this.$.noPrefsDialog.openAtCenter();
  85                 }
  86         },
  87         savePreferences: function(inSender, prefs) {
  88                 var view = this.$.hacksCarousel.fetchView('center');
  89                 if (prefs == null) {
  90                         enyo.log("Clearing prefs");
  91                         view.resetPreferences(prefs);
  92                         this.selectHack(this, this.index);
  93                 } else {
  94                         enyo.log("Saving prefs: " + JSON.stringify(prefs));
  95                         view.setPreferences(prefs);
  96                         view.start();
  97                 }
  98                 this.back();
  99         },
 100         windowActivated: function() {
 101                 this.startHack();
 102         },
 103         windowDeactivated: function() {
 104                 this.stopHack();
 105         },
 106         selectHack: function(inSender, inValue) {
 107                 this.stopHack();
 108                 this.index = inValue;
 109                 this.lastScrollPos = 0;
 110                 this.$.hacksCarousel.setCenterView(this.getHack(this.index));
 111                 this.$.info.addRemoveClass('dark', this.hacksList[this.index].dark);
 112                 // For some reason, setCenterView above fires the startScroll
 113                 // event without a subsequent stopScroll event.  To work around
 114                 // this, we defer the start until later.
 115                 setTimeout(function() { this.startHack() }.bind(this), 20);
 116         },
 117         startHack: function(direction) {
 118                 var view = this.$.hacksCarousel.fetchView(direction || 'center');
 119                 //enyo.log('starting view ' + view);
 120                 if (view)
 121                         view.start();
 122                 try {
 123                         localStorage.setItem('hack.index', this.index);
 124                 } catch(e) {
 125                         enyo.log("Could not set hack index");
 126                 }
 127         },
 128         stopHack: function(direction) {
 129                 var view = this.$.hacksCarousel.fetchView(direction || 'center');
 130                 //enyo.log('stopping view ' + view);
 131                 if (view)
 132                         view.stop();
 133         },
 134         resizeHack: function() {
 135                 var view = this.$.hacksCarousel.fetchView('center');
 136                 if (view)
 137                         view.resize(window.innerWidth, window.innerHeight);
 138                 var view = this.$.hacksCarousel.fetchView('left');
 139                 if (view)
 140                         view.resize(window.innerWidth, window.innerHeight);
 141                 var view = this.$.hacksCarousel.fetchView('right');
 142                 if (view)
 143                         view.resize(window.innerWidth, window.innerHeight);
 144         },
 145         hackHidden: function(direction) {
 146                 var view = this.$.hacksCarousel.fetchView(direction);
 147                 //enyo.log('view ' + view + ' hidden');
 148                 if (view)
 149                         view.hidden();
 150         },
 151         getHack: function(index) {
 152                 return {kind: this.hacksList[index].kind};
 153         },
 154         getLeft: function(inSender, inSnap) {
 155                 if (inSnap && this.index > 0) {
 156                         this.index--;
 157                         this.$.hacksListSelector.setValue(this.index);
 158                         this.hackHidden('right');
 159                         this.infoFade();
 160                         this.$.info.addRemoveClass('dark', this.hacksList[this.index].dark);
 161                 }
 162                 if (this.index == 0)
 163                         return null;
 164                 else
 165                         return this.getHack(this.index - 1);
 166         },
 167         getRight: function(inSender, inSnap) {
 168                 if (inSnap && this.index < this.hacksList.length) {
 169                         this.index++;
 170                         this.$.hacksListSelector.setValue(this.index);
 171                         this.hackHidden('left');
 172                         this.infoFade();
 173                         this.$.info.addRemoveClass('dark', this.hacksList[this.index].dark);
 174                 }
 175                 if (this.index == this.hacksList.length - 1)
 176                         return null;
 177                 else
 178                         return this.getHack(this.index + 1);
 179         },
 180         scrolling: function(inSender) {
 181                 if (inSender.scrollLeft == 0 || inSender.scrollLeft == inSender.getBoundaries().right)
 182                         this.startHack();
 183         },
 184         startScroll: function(inSender) {
 185                 this.stopHack();
 186         },
 187         stopScroll: function(inSender) {
 188                 this.lastScrollPos = this.$.hacksCarousel.scrollLeft;
 189                 this.startHack();
 190         },
 191         closeNoPrefsDialog: function() {
 192                 this.$.noPrefsDialog.close();
 193         }
 194 });