/Main.js
/* Copyright 2011 The Dominion of Awesome
* See COPYING for licensing information */
enyo.kind({
name: "Main",
kind: "Pane",
components: [
{kind: "ApplicationEvents", onWindowActivated: "windowActivated", onWindowDeactivated: "windowDeactivated"},
{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: "Labyrinth", kind: "Labyrinth"},
{name: "Nimbus", kind: "Nimbus"},
{name: "HexaSpinner", kind: "HexaSpinnerHack"},
{name: "Landscape", kind: "Landscape"},
{name: "Munch", kind: "Munch"},
{name: "Orbit", kind: "Orbit"},
{name: "Pixelfade", kind: "Pixelfade"},
//{name: "Swarm", kind: "Swarm"}, // crashy
//{name: "Spinner.CGA", kind: "XSpinnerCGA"}, // no webfont support
{name: "Spinner", kind: "XSpinner"}
],
create: function() {
this.inherited(arguments);
try {
this.index = parseInt(localStorage.getItem('hack.index'));
if (!this.index)
this.index = 0;
} catch(e) {
enyo.log("Could not load last hack index");
this.index = 0;
}
this.lastScrollPos = 0;
this.$.hacksCarousel.setCenterView(this.getHack(this.index));
},
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.$.hacksListSelector.setValue(this.index);
this.startHack();
window.addEventListener('resize', this.resizeHack.bind(this), false);
this.setNotice('Swipe for more...');
},
setNotice: function(notice) {
this.$.notice.setContent(notice);
this.infoFade();
},
infoFade: function() {
this.$.info.setStyle('opacity: 1');
clearTimeout(this.noticeTimer);
this.noticeTimer = setTimeout(function() {
this.$.info.setStyle('opacity: 0');
setTimeout(function() {
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));
// 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);
if (view)
view.start();
try {
localStorage.setItem('hack.index', this.index);
} catch(e) {
enyo.log("Could not set hack index");
}
},
stopHack: function(direction) {
var view = this.$.hacksCarousel.fetchView(direction || 'center');
//enyo.log('stopping view ' + view);
if (view)
view.stop();
},
resizeHack: function() {
var view = this.$.hacksCarousel.fetchView('center');
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);
},
hackHidden: function(direction) {
var view = this.$.hacksCarousel.fetchView(direction);
//enyo.log('view ' + view + ' hidden');
if (view)
view.hidden();
},
getHack: function(index) {
return {kind: this.hacksList[index].kind};
},
getLeft: function(inSender, inSnap) {
if (inSnap && this.index > 0) {
this.index--;
this.$.hacksListSelector.setValue(this.index);
this.hackHidden('right');
this.infoFade();
}
if (this.index == 0)
return null;
else
return this.getHack(this.index - 1);
},
getRight: function(inSender, inSnap) {
if (inSnap && this.index < this.hacksList.length) {
this.index++;
this.$.hacksListSelector.setValue(this.index);
this.hackHidden('left');
this.infoFade();
}
if (this.index == this.hacksList.length - 1)
return null;
else
return this.getHack(this.index + 1);
},
scrolling: function(inSender) {
if (inSender.scrollLeft == 0 || inSender.scrollLeft == inSender.getBoundaries().right)
this.startHack();
},
startScroll: function(inSender) {
this.stopHack();
},
stopScroll: function(inSender) {
this.lastScrollPos = this.$.hacksCarousel.scrollLeft;
this.startHack();
},
closeNoPrefsDialog: function() {
this.$.noPrefsDialog.close();
}
});