* See COPYING for licensing information */
enyo.kind({
name: "Main",
- kind: "VFlexBox",
- style: "background-color: black",
+ kind: "Pane",
components: [
{kind: "ApplicationEvents", onWindowActivated: "windowActivated", onWindowDeactivated: "windowDeactivated"},
- {name: "hacksCarousel", kind: "Carousel", flex: 1, onGetLeft: "getLeft", onGetRight: "getRight", onScroll: "scrolling", onScrollStart: "startScroll", onScrollStop: "stopScroll"},
- //{name: "hacksSelector", kind: "HacksSelector"}
- {name: "info", kind: "HFlexBox", className: "info", style: "opacity: 0", showing: false, components: [
- {name: "title"},
- {kind: "Spacer"},
- {name: "notice", className: "notice"}
- ]}
+ {name: "mainView", kind: "VFlexBox", components: [
+ {name: "hacksCarousel", kind: "Carousel", flex: 1, onGetLeft: "getLeft", onGetRight: "getRight", onScroll: "scrolling", onScrollStart: "startScroll", onScrollStop: "stopScroll"},
+ {name: "info", kind: "HFlexBox", className: "info", align: "center", style: "opacity: 0", onclick: "infoFade", components: [
+ {className: "wrench", onclick: "openPreferences"},
+ {name: "hacksListSelector", kind: "ListSelector", popupAlign: "left", onChange: "selectHack", style: "width: 200px"},
+ {kind: "Spacer"},
+ {name: "notice", className: "notice"}
+ ]},
+ {name: "noPrefsDialog", kind: "ModalDialog", caption: "No Preferences", components: [
+ {kind: "Button", content: "Okay", onclick: "closeNoPrefsDialog"}
+ ]}
+ ]},
+ {name: "preferencesView", kind: "HackPreferences", onClose: "savePreferences"}
],
hacksList: [
{name: "Nimbus", kind: "Nimbus", dark: false},
+ {name: "HexaSpinner", kind: "HexaSpinnerHack", dark: false},
{name: "Landscape", kind: "Landscape", dark: false},
{name: "Munch", kind: "Munch", dark: true},
{name: "Orbit", kind: "Orbit", dark: false},
this.index = 0;
this.lastScrollPos = 0;
this.$.hacksCarousel.setCenterView(this.getHack(this.index));
- //this.$.hacksSelector.setHacksList(this.hacksList);
},
ready: function() {
+ var displayList = [];
+ for (var i = 0; i < this.hacksList.length; i++) {
+ displayList.push({
+ caption: this.hacksList[i].name,
+ value: i
+ });
+ }
+ this.$.hacksListSelector.setItems(displayList);
this.startHack();
window.addEventListener('resize', this.resizeHack.bind(this), false);
this.setNotice('Swipe for more...');
- this.setTitle(this.hacksList[this.index].name);
- },
- setTitle: function(title) {
- this.$.title.setContent(title);
- this.infoFade();
},
setNotice: function(notice) {
this.$.notice.setContent(notice);
},
infoFade: function() {
this.$.info.setStyle('opacity: 1');
- this.$.info.show();
clearTimeout(this.noticeTimer);
this.noticeTimer = setTimeout(function() {
this.$.info.setStyle('opacity: 0');
setTimeout(function() {
- this.$.info.hide();
- this.setNotice('');
- this.setTitle('');
+ this.$.notice.setContent('');
}.bind(this), 600);
}.bind(this), 5000);
},
+ openPreferences: function() {
+ var view = this.$.hacksCarousel.fetchView('center');
+
+ var meta = view.getPreferencesMetadata();
+ if (meta.length) {
+ view.stop();
+ var values = view.getPreferences();
+ this.$.preferencesView.load(this.hacksList[this.index].name, meta, values);
+ this.selectView(this.$.preferencesView);
+ } else {
+ this.$.noPrefsDialog.openAtCenter();
+ }
+ },
+ savePreferences: function(inSender, prefs) {
+ var view = this.$.hacksCarousel.fetchView('center');
+ if (prefs == null) {
+ enyo.log("Clearing prefs");
+ view.resetPreferences(prefs);
+ this.selectHack(this, this.index);
+ } else {
+ enyo.log("Saving prefs: " + JSON.stringify(prefs));
+ view.setPreferences(prefs);
+ view.start();
+ }
+ this.back();
+ },
windowActivated: function() {
this.startHack();
},
windowDeactivated: function() {
this.stopHack();
},
+ selectHack: function(inSender, inValue) {
+ this.stopHack();
+ this.index = inValue;
+ this.lastScrollPos = 0;
+ this.$.hacksCarousel.setCenterView(this.getHack(this.index));
+ this.$.info.addRemoveClass('dark', this.hacksList[this.index].dark);
+ // For some reason, setCenterView above fires the startScroll
+ // event without a subsequent stopScroll event. To work around
+ // this, we defer the start until later.
+ setTimeout(function() { this.startHack() }.bind(this), 20);
+ },
startHack: function(direction) {
var view = this.$.hacksCarousel.fetchView(direction || 'center');
//enyo.log('starting view ' + view);
},
resizeHack: function() {
var view = this.$.hacksCarousel.fetchView('center');
-
- //enyo.log('resizing view ' + view);
+ if (view)
+ view.resize(window.innerWidth, window.innerHeight);
+ var view = this.$.hacksCarousel.fetchView('left');
+ if (view)
+ view.resize(window.innerWidth, window.innerHeight);
+ var view = this.$.hacksCarousel.fetchView('right');
if (view)
view.resize(window.innerWidth, window.innerHeight);
},
getLeft: function(inSender, inSnap) {
if (inSnap && this.index > 0) {
this.index--;
+ this.$.hacksListSelector.setValue(this.index);
this.hackHidden('right');
- this.setTitle(this.hacksList[this.index].name);
+ this.infoFade();
this.$.info.addRemoveClass('dark', this.hacksList[this.index].dark);
}
if (this.index == 0)
getRight: function(inSender, inSnap) {
if (inSnap && this.index < this.hacksList.length) {
this.index++;
+ this.$.hacksListSelector.setValue(this.index);
this.hackHidden('left');
- this.setTitle(this.hacksList[this.index].name);
+ this.infoFade();
this.$.info.addRemoveClass('dark', this.hacksList[this.index].dark);
}
if (this.index == this.hacksList.length - 1)
scrolling: function(inSender) {
if (inSender.scrollLeft == 0 || inSender.scrollLeft == inSender.getBoundaries().right)
this.startHack();
- //this.$.hacksSelector.index = this.index + ((inSender.scrollLeft - this.lastScrollPos) / window.innerWidth);
- //this.$.hacksSelector.draw();
},
startScroll: function(inSender) {
this.stopHack();
stopScroll: function(inSender) {
this.lastScrollPos = this.$.hacksCarousel.scrollLeft;
this.startHack();
+ },
+ closeNoPrefsDialog: function() {
+ this.$.noPrefsDialog.close();
}
});