Merge pull request #8 from zalun/toggle_certified

we can now switch on/off certified

kitchensink-app/css/app.css

@@ -32,7 +32,7 @@ ul {
 	margin: 0 0.4em 0.6em;
 }
 
-#apis > :nth-child(4n - 1):not(.hidden) {
+.even {
 	background: #f0f0f0;
 }
 

kitchensink-app/js/apis/models.js

@@ -77,6 +77,8 @@ define(function(require) {
                    + '</dd>';
       elements(itemHTML.format(this)).insert(parentEl);
       this.apiElement = $('#' + this.id);
+      // create a hook to the API object in the DOM element
+      this.apiElement._model = this;
       this.contentElement = this.apiElement.nextSibling();
       var descriptionElement = this.contentElement.find('p');
       if (this.isCertified) {

kitchensink-app/js/app.js

@@ -9,10 +9,11 @@ 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 apis = require('./apis/index');
   var log = require('logger');
 
-  // navigation
   $('#header-reload').on('click', function() { 
     window.location.reload(); 
   });
@@ -28,6 +29,8 @@ define(function(require) {
     api.runTests();
   }
 
+  setStripes();
+
   if ('MozActivity' in window) {
     // change all links to webactivities
     var viewUrl = function(event) {

kitchensink-app/js/settings.js

@@ -0,0 +1,50 @@
+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);
+});

kitchensink-app/js/ui.js

@@ -0,0 +1,23 @@
+define(function(require) {
+  var $ = require('elements');
+  require('elements/traversal');
+
+  /**
+   * resets even class to all dt's without hidden class
+   */
+  function setStripes() {
+    var currentEven = $('.even');
+    if (currentEven) {
+      currentEven.removeClass('even');
+    }
+    $('#apis > dt:not(.hidden)').forEach(function(element, index) {
+      if (index % 2 === 1) {
+        $(element).addClass('even');
+      }
+    });
+  };
+
+  return {
+    setStripes: setStripes
+  };
+});