mozilla · zalun · May 8, 2013 · May 3, 2013 · May 3, 2013
diff --git 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
@@ -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
@@ -10,13 +10,18 @@
   <script type="text/javascript" src="js/lib/appbar.js"></script>
 </head>
 <body>
-  <x-appbar>
-    <div id="header-settings">=</div>
-    <header>KitchenSink</header>
-    <div id="header-reload">r</div>
-  </x-appbar>
-
-  <dl id="apis"></dl>
+  <section id="body-settings" class="hidden dark">
+    <p>Show certified <input type="checkbox" id="certifiedVisible"/></p>
+    <button id="settings-done">Done</button>
+  </section>
+  <section id="body-content">
+    <x-appbar>
+      <div id="header-settings">=</div>
+      <header>KitchenSink</header>
+      <div id="header-reload">r</div>
+    </x-appbar>
+    <dl id="apis"></dl>
+  </section>
 
   <script type="text/javascript" data-main="js/init.js" src="js/lib/require.js"></script>
 </body>

diff --git a/kitchensink-app/js/app.js b/kitchensink-app/js/app.js
@@ -9,15 +9,24 @@ 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');
 
   $('#header-reload').on('click', function() { 
     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 <dt> and <dd> inside <dl id="apis">
@@ -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
@@ -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
diff --git 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
   };
 });