refactor items gadgets (not done)

modules/items/items.css

@@ -16,6 +16,7 @@
 .items_listview li {
   float: left;
   width: 25%;
+  list-style: none;
 }
 .items_listview li,
 .items_listview li a {
@@ -61,6 +62,7 @@
   white-space: normal;
   width: 100%;
   padding-bottom: 0;
+  text-decoration: none;
 }
 /* we can safely use nth-child, because IE8- doesn't support corners anyway */
 

modules/items/items.js

@@ -4,42 +4,63 @@ define([
   , 'css!items'
   ],
   function (App, source) {
-    var response = {};
+    var that = {};
+    var priv = {};
+
+    // in the perfect renderjs world, the items gadget should either expose
+    // an API on how to pass ... query string ... or have default config
+    // like pointers or a default fallback. This is what we are doing currently.
+    // Leave it like that!
+
+    // Javascript closest()
+    priv.closest = function (elem, selector) {
+      var matchesSelector = elem.matches ||
+          elem.webkitMatchesSelector ||
+          elem.mozMatchesSelector ||
+          elem.msMatchesSelector;
+
+      while (elem) {
+        if (matchesSelector.bind(elem)(selector)) {
+            return elem;
+        } else {
+            elem = elem.parentNode;
+        }
+      }
+      return false;
+    };
 
-    response.data = source;
-    // TODO: the method to query and display items should be set be
-    // either the searchbar or the storage?
-    response.mockup = function (source, callback_mockup) {
+    // generate items to display
+    priv.generateItems = function (params) {
       var markup, spec,
-        gadget = RenderJs.getSelfGadget(),
-        id = gadget.dom.attr('id').split("__").splice(-1)[0],
-        config = gadget.state[0][id]._config,
+        id = params.gadget.dom.attr('id').split("__").splice(-1)[0],
+        config = params.gadget.state[0][id]._config,
         module = config.datasource.module,
+
         // settable options
         screen = App.settings.screen_format,
         size = screen === "small" ? "small" : "medium",
         shortcut = size.substring(0, 1),
         identifier = App.settings.identifier || "item_id";
 
-      spec = {};
-
-      spec.pointer = config.datasource.pointer;
-      spec.method = spec.pointer ? undefined : config.datasource.method || "allDocs";
-      spec.storage = spec.pointer ? undefined : config.datasource.storage || "items";
-      spec.options = spec.pointer ? undefined : {
-        "limit": config.datasource.limit || [0, 24],
-        "sort_on": config.datasource.sort || [["_id", "descending"]],
-        "select_list": config.datasource.fields || undefined
-      };
-
-      // if we have a search tag being passed, run a search
-      if (location.search !== "") {
-        spec.query = true;
-        spec.query_string = location.search.split("=")[1].replace("+", " ");
-      }
+        spec = {};
+
+        spec.pointer = config.datasource.pointer;
+        spec.method = spec.pointer ? undefined : config.datasource.method || "allDocs";
+        spec.storage = spec.pointer ? undefined : config.datasource.storage || "items";
+        spec.options = spec.pointer ? undefined : {
+          "limit": config.datasource.limit || [0, 24],
+          "sort_on": config.datasource.sort || [["_id", "descending"]],
+          "select_list": config.datasource.fields || undefined
+        };
+
+        // if we have a search tag being passed, run a search
+        if (location.search !== "") {
+          spec.query = true;
+          spec.query_string = location.search.split("=")[1].replace("+", " ");
+        }
 
-      spec.callback = function(err, response) {
-        var item, i, str = "", price;
+        spec.callback = function(err, response) {
+          var item, i, str = "", price;
 
         // cleanup
 
@@ -78,38 +99,51 @@ define([
         }
 
         // add to data
-        markup = source.replace(/<!-- items -->/g, str);
+        // TODO: this should only replace list items and not the whole
+        // gadget content...
+        markup = params.source.replace(/<!-- items -->/g, str);
+
         // this is not response.callback(!!)
-        callback_mockup(markup);
+        params.callback_mockup(markup);
       }
 
       // query for items
       App[module].switchboard(spec);
     };
 
-    response.callback = function (self) {
-      var closest = function (elem, selector) {
-        var matchesSelector = elem.matches ||
-            elem.webkitMatchesSelector ||
-            elem.mozMatchesSelector ||
-            elem.msMatchesSelector;
-
-        while (elem) {
-            if (matchesSelector.bind(elem)(selector)) {
-                return elem;
-            } else {
-                elem = elem.parentNode;
-            }
-        }
-        return false;
-      };
+    // response object
+    that.data = source;
+    that.mockup = function (source, callback_mockup) {
+      var spec = {};
+
+      spec.gadget = RenderJs.getSelfGadget();
+      // TODO: this is for page event bindings. Once JQM content replaces
+      // page, remove this and make the gadget the content section to
+      // be updated.
+      spec.page = priv.closest(spec.gadget.dom[0], "div[data-role='page']");
+      spec.pageId = "#" + spec.page.attr('id');
+      spec.source = source;
+      spec.callback_mockup = callback_mockup;
+
+      // if unbound, bind and run once, if bound, just run
+      if (spec.gadget.sourceSet === undefined) {
+        spec.gadget.sourceSet = true;
+        $(document).on("pagebeforeshow", spec.pageId, function (e) {
+          priv.generateItems(spec);
+        });
+        priv.generateItems(spec);
+      } else {
+        priv.generateItems(spec);
+      } 
+    };
 
+    that.callback = function (self) {
       // set binding for opening a detailed view
       // TODO: this should also be a link-method call
       self.dom.find("ul").on("click", "a", function (e) {
         var key;
         e.preventDefault();
-        key = closest(e.target, "a").getAttribute("href").split("?")[1];
+        key = priv.closest(e.target, "a").getAttribute("href").split("?")[1];
         // show this item
         $.mobile.changePage("details.html", {
           "transition": "slide",
@@ -136,6 +170,6 @@ define([
     };
 
   // return response object
-  return response;
+  return that;
   }
 );