Add a background to info pane for better visibility
[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: "Nimbus", kind: "Nimbus"},
24                 {name: "HexaSpinner", kind: "HexaSpinnerHack"},
25                 {name: "Landscape", kind: "Landscape"},
26                 {name: "Munch", kind: "Munch"},
27                 {name: "Orbit", kind: "Orbit"},
28                 {name: "Pixelfade", kind: "Pixelfade"},
29                 //{name: "Swarm", kind: "Swarm"},       // crashy
30                 //{name: "Spinner.CGA", kind: "XSpinnerCGA"}, // no webfont support
31                 {name: "Spinner", kind: "XSpinner"}
32         ],
33         create: function() {
34                 this.inherited(arguments);
35                 try {
36                         this.index = parseInt(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.$.hacksListSelector.setValue(this.index);
56                 this.startHack();
57                 window.addEventListener('resize', this.resizeHack.bind(this), false);
58                 this.setNotice('Swipe for more...');
59         },
60         setNotice: function(notice) {
61                 this.$.notice.setContent(notice);
62                 this.infoFade();
63         },
64         infoFade: function() {
65                 this.$.info.setStyle('opacity: 1');
66
67                 clearTimeout(this.noticeTimer);
68                 this.noticeTimer = setTimeout(function() {
69                         this.$.info.setStyle('opacity: 0');
70                         setTimeout(function() {
71                                 this.$.notice.setContent('');
72                         }.bind(this), 600);
73                 }.bind(this), 5000);
74         },
75         openPreferences: function() {
76                 var view = this.$.hacksCarousel.fetchView('center');
77
78                 var meta = view.getPreferencesMetadata();
79                 if (meta.length) {
80                         view.stop();
81                         var values = view.getPreferences();
82                         this.$.preferencesView.load(this.hacksList[this.index].name, meta, values);
83                         this.selectView(this.$.preferencesView);
84                 } else {
85                         this.$.noPrefsDialog.openAtCenter();
86                 }
87         },
88         savePreferences: function(inSender, prefs) {
89                 var view = this.$.hacksCarousel.fetchView('center');
90                 if (prefs == null) {
91                         enyo.log("Clearing prefs");
92                         view.resetPreferences(prefs);
93                         this.selectHack(this, this.index);
94                 } else {
95                         enyo.log("Saving prefs: " + JSON.stringify(prefs));
96                         view.setPreferences(prefs);
97                         view.start();
98                 }
99                 this.back();
100         },
101         windowActivated: function() {
102                 this.startHack();
103         },
104         windowDeactivated: function() {
105                 this.stopHack();
106         },
107         selectHack: function(inSender, inValue) {
108                 this.stopHack();
109                 this.index = inValue;
110                 this.lastScrollPos = 0;
111                 this.$.hacksCarousel.setCenterView(this.getHack(this.index));
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                 }
161                 if (this.index == 0)
162                         return null;
163                 else
164                         return this.getHack(this.index - 1);
165         },
166         getRight: function(inSender, inSnap) {
167                 if (inSnap && this.index < this.hacksList.length) {
168                         this.index++;
169                         this.$.hacksListSelector.setValue(this.index);
170                         this.hackHidden('left');
171                         this.infoFade();
172                 }
173                 if (this.index == this.hacksList.length - 1)
174                         return null;
175                 else
176                         return this.getHack(this.index + 1);
177         },
178         scrolling: function(inSender) {
179                 if (inSender.scrollLeft == 0 || inSender.scrollLeft == inSender.getBoundaries().right)
180                         this.startHack();
181         },
182         startScroll: function(inSender) {
183                 this.stopHack();
184         },
185         stopScroll: function(inSender) {
186                 this.lastScrollPos = this.$.hacksCarousel.scrollLeft;
187                 this.startHack();
188         },
189         closeNoPrefsDialog: function() {
190                 this.$.noPrefsDialog.close();
191         }
192 });