diff --git a/kitchensink-app/css/app.css b/kitchensink-app/css/app.css
index c2325a0..c24fc9b 100644
--- a/kitchensink-app/css/app.css
+++ b/kitchensink-app/css/app.css
@@ -152,3 +152,25 @@ x-appbar #header-reload:before {
padding-bottom: 10px;
background:#fff;
}
+
+/* settings section */
+#body-settings {
+ background: #333;
+ color: #fafafa;
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ height: 100%;
+ width: 100%;
+}
+
+#body-settings p {
+ padding: 5px 5%;
+}
+
+#body-settings #settings-done {
+ position: absolute;
+ bottom: 5px;
+ width: 90%;
+ margin-left: 5%;
+}
diff --git a/kitchensink-app/css/buttons.css b/kitchensink-app/css/buttons.css
index c3a2a45..386c9e3 100644
--- a/kitchensink-app/css/buttons.css
+++ b/kitchensink-app/css/buttons.css
@@ -33,6 +33,16 @@ a[role="button"],
outline: none;
}
+.dark button,
+.dark a[role="button"],
+.dark .button {
+ background-image: url(buttons/images/ui/recommend.png);
+ background-color: #00caf2;
+ border-color: #008eab;
+ color: #333;
+}
+
+
/* Press (default & recommend) */
button:active,
a[role="button"]:active,
diff --git a/kitchensink-app/index.html b/kitchensink-app/index.html
index 2763240..e07fccd 100644
--- a/kitchensink-app/index.html
+++ b/kitchensink-app/index.html
@@ -10,13 +10,18 @@
-
-
-
-
-
-
-
+
+
diff --git a/kitchensink-app/js/app.js b/kitchensink-app/js/app.js
index d9d2067..6df27a5 100644
--- a/kitchensink-app/js/app.js
+++ b/kitchensink-app/js/app.js
@@ -9,8 +9,7 @@ define(function(require) {
require('elements/attributes'); // .html() in utils.js
require('elements/insertion'); // .insert() in logger and models.js
require('elements/traversal'); // $ searches elements using Slick
- require('./settings');
- var setStripes = require('./ui').setStripes;
+ var renderCertified = require('./ui').renderCertified;
var apis = require('./apis/index');
var log = require('logger');
@@ -18,6 +17,16 @@ define(function(require) {
window.location.reload();
});
+ // TODO: find out some more fancy way of showing the settings
+ $('#header-settings').on('click', function() {
+ $('#body-content').addClass('hidden');
+ $('#body-settings').removeClass('hidden');
+ });
+ $('#settings-done').on('click', function() {
+ $('#body-content').removeClass('hidden');
+ $('#body-settings').addClass('hidden');
+ });
+
for (var id in apis) {
var api = apis[id];
// render and inside
@@ -29,7 +38,7 @@ define(function(require) {
api.runTests();
}
- setStripes();
+ renderCertified();
if ('MozActivity' in window) {
// change all links to webactivities
diff --git a/kitchensink-app/js/lib/settings.js b/kitchensink-app/js/lib/settings.js
new file mode 100644
index 0000000..93912d9
--- /dev/null
+++ b/kitchensink-app/js/lib/settings.js
@@ -0,0 +1,83 @@
+define(function(require) {
+ var prime = require('prime');
+ var Emitter = require('prime/emitter');
+ var $ = require('elements');
+ require('elements/events');
+ require('elements/attributes');
+ require('elements/traversal');
+
+ var Settings = prime({
+ inherits: Emitter,
+
+ options: {
+ certifiedVisible: {
+ // do not display certified apps by default
+ value: false,
+ // update setting from element
+ updateFrom: 'certifiedVisible',
+ isBoolean: true
+ }
+ },
+
+ constructor: function() {
+ // update settings from localStorage
+ var localSettings = JSON.parse(localStorage.settings || '{}');
+ for (var key in localSettings) {
+ this.options[key].value = localSettings[key];
+ }
+ this.store();
+ this.updateElements();
+ },
+
+ get: function(key) {
+ return this.options[key].value;
+ },
+
+ set: function(key, value) {
+ this.options[key].value = value;
+ this.store();
+ this.emit(key);
+ },
+
+ store: function() {
+ var values = {};
+ for (var key in this.options) {
+ values[key] = this.options[key].value;
+ }
+ localStorage.settings = JSON.stringify(values);
+ },
+
+ /**
+ * update current state of elements
+ */
+ updateElements: function() {
+ var self = this;
+ for (var key in this.options) {
+ var item = this.options[key];
+ if (item.updateFrom) {
+ var element = $('#' + item.updateFrom);
+ if (item.isBoolean) {
+ if (item.value) {
+ element.check();
+ } else {
+ element.uncheck();
+ }
+ // hook to change event
+ element.on('change', function() {
+ self.set(key, this.checked());
+ });
+ } else {
+ element.value = item.value;
+ // hook to change event
+ element.on('change', function() {
+ self.set(key, this.value);
+ });
+ }
+ }
+ }
+ },
+
+ });
+
+ return new Settings();
+});
diff --git a/kitchensink-app/js/settings.js b/kitchensink-app/js/settings.js
deleted file mode 100644
index 41a92c8..0000000
--- a/kitchensink-app/js/settings.js
+++ /dev/null
@@ -1,50 +0,0 @@
-define(function(require) {
- var $ = require('elements');
- require('elements/events');
- require('elements/traversal');
- var setStripes = require('./ui').setStripes;
-
- // TODO: make this a setting
- var certifiedVisible = true;
-
- /**
- * hides all certified dt and closes dd if opened
- */
- function hideCertified() {
- $('dt.certified').forEach(function(element) {
- element = $(element);
- element.addClass('hidden');
- // hide description if opened
- var model = element._model;
- if (model.visible) {
- model.visible = false;
- // XXX this will need to be changed if any animation will be
- // implemented to hide
- model.hide();
- }
- });
- setStripes();
- };
-
- /**
- * show all certified dt
- */
- function showCertified() {
- $('dt.certified').removeClass('hidden');
- setStripes();
- };
-
- /**
- * toggles certified dt's
- */
- function toggleCeritified() {
- if (certifiedVisible) {
- hideCertified();
- } else {
- showCertified();
- }
- certifiedVisible = !certifiedVisible;
- };
-
- $('#header-settings').on('click', toggleCeritified);
-});
diff --git a/kitchensink-app/js/ui.js b/kitchensink-app/js/ui.js
index 91e08f4..8d151b9 100644
--- a/kitchensink-app/js/ui.js
+++ b/kitchensink-app/js/ui.js
@@ -1,5 +1,8 @@
define(function(require) {
+ var settings = require('settings');
var $ = require('elements');
+ require('elements/events');
+ require('elements/attributes');
require('elements/traversal');
/**
@@ -15,9 +18,58 @@ define(function(require) {
$(element).addClass('even');
}
});
- };
+ }
+
+ /**
+ * hides all certified dt and closes dd if opened
+ */
+ function hideCertified() {
+ $('dt.certified').forEach(function(element) {
+ element = $(element);
+ element.addClass('hidden');
+ // hide description if opened
+ var model = element._model;
+ if (model.visible) {
+ model.visible = false;
+ // XXX this will need to be changed if any animation will be
+ // implemented to hide
+ model.hide();
+ }
+ });
+ setStripes();
+ }
+
+ /**
+ * show all certified dt
+ */
+ function showCertified() {
+ $('dt.certified').removeClass('hidden');
+ setStripes();
+ }
+
+ /**
+ * toggles certified dt's
+ */
+ function toggleCeritified() {
+ settings.set('certifiedVisible', !settings.get('certifiedVisible'));
+ }
+
+ /**
+ * show hide certified regarding the setting
+ */
+ function renderCertified() {
+ if (settings.get('certifiedVisible')) {
+ showCertified();
+ } else {
+ hideCertified();
+ }
+ }
+
+ // render certified on change of the setting
+ settings.on('certifiedVisible', renderCertified);
return {
- setStripes: setStripes
+ setStripes: setStripes,
+ renderCertified: renderCertified
};
});