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,17 +4,38 @@ define([
   , 'css!items'
   ],
   function (App, source) {
-    var response = {};
+    var that = {};
+    var priv = {};
 
-    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) {
+    // 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;
+    };
+
+    // 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",
@@ -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;
+    // 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 {
-                elem = elem.parentNode;
-            }
+        priv.generateItems(spec);
       } 
-        return false;
     };
 
+    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;
   }
 );