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