From 548aae524aa7a0598c57fb31a7609af4ef59645e Mon Sep 17 00:00:00 2001 From: Piotr Zalewa Date: Fri, 3 May 2013 14:15:03 +0200 Subject: [PATCH] * settings.js stores settings in localStorage * settings object emits an event when any key changes * hide/showCertified moved from settings.js to ui.js --- kitchensink-app/js/app.js | 5 ++- kitchensink-app/js/lib/settings.js | 38 ++++++++++++++++++++ kitchensink-app/js/settings.js | 50 -------------------------- kitchensink-app/js/ui.js | 58 ++++++++++++++++++++++++++++-- 4 files changed, 96 insertions(+), 55 deletions(-) create mode 100644 kitchensink-app/js/lib/settings.js delete mode 100644 kitchensink-app/js/settings.js diff --git a/kitchensink-app/js/app.js b/kitchensink-app/js/app.js index d9d2067..04bbfb8 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'); @@ -29,7 +28,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..e12a8e6 --- /dev/null +++ b/kitchensink-app/js/lib/settings.js @@ -0,0 +1,38 @@ +define(function(require) { + var prime = require('prime'); + var Emitter = require('prime/emitter'); + + var Settings = prime({ + inherits: Emitter, + + options: { + 'certifiedVisible': false + }, + + constructor: function() { + // update settings from localStorage + var localSettings = JSON.parse(localStorage.settings || '{}'); + for (var key in localSettings) { + this.options[key] = localSettings[key]; + } + this.store(); + }, + + get: function(key) { + return this.options[key]; + }, + + set: function(key, value) { + this.options[key] = value; + this.store(); + this.emit(key); + }, + + store: function() { + localStorage.settings = JSON.stringify(this.options); + } + + }); + + 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..91629ab 100644 --- a/kitchensink-app/js/ui.js +++ b/kitchensink-app/js/ui.js @@ -1,5 +1,7 @@ define(function(require) { + var settings = require('settings'); var $ = require('elements'); + require('elements/events'); require('elements/traversal'); /** @@ -15,9 +17,61 @@ 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(); + } + } + + // TODO: make it a proper setting + $('#header-settings').on('click', toggleCeritified); + + // render certified on change of the setting + settings.on('certifiedVisible', renderCertified); return { - setStripes: setStripes + setStripes: setStripes, + renderCertified: renderCertified }; });