+enyo.kind({
+ name: "HackPreferences",
+ kind: "VFlexBox",
+ events: {
+ "onClose": ""
+ },
+ components: [
+ {kind: "Header", content: "Preferences"},
+ {kind: "Scroller", flex: 1, horizontal: false, components: [
+ {kind: "VFlexBox", align: "center", components: [
+ {kind: "RowGroup", name: "prefsContainer", style: "width: 750px"}
+ ]}
+ ]},
+ {kind: "Toolbar", className: "enyo-toolbar-light", components: [
+ {kind: "Button", content: "Done", onclick: "close", className: "enyo-button-affirmative prefs-done-button"}
+ ]}
+ ],
+ load: function(name, prefs, values) {
+ this.$.prefsContainer.setCaption(name);
+ this.prefs = prefs;
+
+ for (var i = 0; i < this.prefs.length; i++) {
+ var p = this.prefs[i];
+ var c;
+
+ switch(p.kind) {
+ case 'Slider':
+ c = this.$.prefsContainer.createComponent({kind: "HFlexBox", align: "center", components: [{content: p.label, flex: 1}]});
+ var slider = c.createComponent(p, {owner: this.$.prefsContainer});
+ slider.setStyle('width: 400px');
+ slider.setPosition(values[p.name]);
+ break;
+ default:
+ c = this.$.prefsContainer.createComponent(p, {owner: this.$.prefsContainer});
+ c.setValue(values[p.name]);
+ }
+ }
+ this.$.prefsContainer.render();
+ },
+ close: function() {
+ var o = {};
+ for (var i = 0; i < this.prefs.length; i++) {
+ var p = this.prefs[i];
+ var v;
+
+ switch (p.kind) {
+ case 'Slider':
+ v = this.$.prefsContainer.$[p.name].getPosition();
+ break;
+ default:
+ v = this.$.prefsContainer.$[p.name].getValue();
+ }
+ o[p.name] = v;
+ }
+ this.doClose(o);
+
+ var controls = this.$.prefsContainer.getControls();
+ for (var i = 0; i < controls.length; i++) {
+ // We destroy the parent because we want to destroy the
+ // row client, as well. This is probably a bug in
+ // Enyo.
+ controls[i].parent.destroy();
+ controls[i].destroy();
+ }
+ }
+});
.info.dark {
color: #AFAFAf;
}
+
+.info .enyo-menuitem {
+ font-size: 24px;
+}
+
+.wrench {
+ width: 24px;
+ height: 24px;
+ padding: 5px 5px;
+ margin-right: 8px;
+ background-image: url(images/wrench.png);
+ background-repeat: no-repeat;
+ background-position: center center;
+}
+
+.prefs-done-button {
+ width: 300px;
+}
* 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: "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: "preferencesView", kind: "HackPreferences", onClose: "savePreferences"}
],
hacksList: [
{name: "Nimbus", kind: "Nimbus", dark: false},
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.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');
+ view.stop();
+
+ var meta = view.getPreferencesMetadata();
+ if (meta) {
+ var values = view.getPreferences();
+ this.$.preferencesView.load(this.hacksList[this.index].name, meta, values);
+ this.selectView(this.$.preferencesView);
+ } else {
+ alert("No prefs");
+ }
+ },
+ savePreferences: function(inSender, prefs) {
+ enyo.log("Saving prefs: " + JSON.stringify(prefs));
+ this.back();
+ var view = this.$.hacksCarousel.fetchView('center');
+ view.setPreferences(prefs);
+ view.start();
+ },
windowActivated: function() {
this.startHack();
},
windowDeactivated: function() {
this.stopHack();
},
+ selectHack: function(inSender, inValue, inOldValue) {
+ 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);
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)
+Wrench icon by Joseph Wain, used under a Creative Commons by-3.0 license.
+Downloaded from http://glyphish.com/
enyo.depends(
"Main.js",
"Main.css",
+ "HackPreferences.js",
"hacks/Hack.js",
"hacks/Nimbus/Nimbus.js",
"hacks/HexaSpinner/HexaSpinner.js",
enyo.kind({
name: "Hack",
kind: "VFlexBox",
+ preferences: [],
stop: function() {
},
start: function() {
resize: function() {
},
hidden: function() {
+ },
+ getPreferencesMetadata: function() {
+ return this.preferences;
+ },
+ getPreferences: function() {
+ var o = {};
+ for (var i = 0; i < this.preferences.length; i++) {
+ var p = this.preferences[i];
+ o[p.name] = this[p.name];
+ }
+ return o;
+ },
+ setPreferences: function(prefs) {
+ for (var i in prefs) {
+ if (this[i] == undefined)
+ throw new Error('Cannot set nonexistent preference "' + i + '"');
+ this[i] = prefs[i];
+ }
+ this.preferencesChanged();
+ },
+ preferencesChanged: function() {
}
});
drop_c: 0,
drops: [],
perspective: 0.3,
+ preferences: [
+ {name: "intensity", label: "Intensity", kind: "Slider", maximum: 1, minimum: 0, snap: 0.01},
+ {name: "rainColor", label: "Rain Color", kind: "ListSelector", items: ["gray", "black", "blue", "red"]},
+ {name: "backgroundColor", label: "Background Color", kind: "ListSelector", items: [
+ {caption: "white", value: 'rgba(255,255,255,0.7)'},
+ {caption: "black", value: 'rgba(0,0,0,0.7)'}
+ ]}
+ ],
+ intensity: 0.7,
+ rainColor: 'gray',
+ backgroundColor: 'rgba(255,255,255,0.7)',
components: [
{name: "raindrops", nodeTag: "canvas"}
],
this.raindrops.width = this.w = w;
this.raindrops.height = this.h = h;
- this.ctx.fillStyle = 'rgba(255,255,255,0.7)';
- this.ctx.strokeStyle = 'rgb(128,128,128)';
+ this.ctx.fillStyle = this.backgroundColor;
+ this.ctx.strokeStyle = this.rainColor;
this.ctx.lineWidth = '2';
},
+ preferencesChanged: function() {
+ this.ctx.fillStyle = this.backgroundColor;
+ this.ctx.strokeStyle = this.rainColor;
+ },
draw: function() {
- if (Math.random() > 0.3) {
+ if (Math.random() <= this.intensity) {
this.drops[this.drop_c].start(this.w, this.h, this.perspective);
this.drop_c = (this.drop_c + 1) % 100;
}