bugfix: default item search, timing of renaming gadget ids

js/app.js

@@ -148,10 +148,11 @@ define([
     priv.doc.on('pagebeforeshow', 'div.ui-page', function () {
       var page = $(this);
       // need to call this every time a page is shown...
-      RenderJs.init();
+      RenderJs.init(page);
 
       RenderJs.bindReady(function () {
         var gadget = RenderJs.GadgetIndex.getGadgetById(page.attr('id'));
+
         if (gadget.isEnhanced() === false) {
           page.trigger("create");
           gadget.setEnhanced(true);
@@ -227,11 +228,18 @@ define([
   that.renderGadgets = function (gadget) {
     var gadget_id = gadget.dom.attr('id'),
       gadget_parent = gadget.dom.parents("div[data-gadget]"),
-      gadget_props = gadget["state"],
-      gadget_cleaned_id = gadget_id.split("__").slice(-1)[0],
+      gadget_props,
+      gadget_cleaned_id,
       propsToSet,
-      fwd = [],
-      i;
+      new_id,
+      fwd = [], i;
+
+    if (!gadget_parent.is(".ui-page-active")) {
+      return;
+    }
+
+    gadget_props = gadget["state"];
+    gadget_cleaned_id = gadget_id.split("__").slice(-1)[0];
 
     // JSON property API
     //  "state": [
@@ -283,9 +291,16 @@ define([
       }
     });
 
-    // update this gadgets id with the parent gadget id
+    // update this gadgets id with the parent gadget id. Make sure to also
+    // add the new id inside the renderJs GadgetIndex. Previsouly the id
+    // was set only on child gadgets, which worked because gadgets had not
+    // been loaded at the time when the id was modified. Since this only
+    // seems to work in FF with multiple nested gadget levels, we set the
+    // id here, but must also update the id of the gadget in the gadgetIndex
     if (gadget_parent.length > 0) {
-      gadget.dom.attr('id', gadget_parent.attr('id') + "__" + gadget_id);
+      new_id = gadget_parent.attr('id') + "__" + gadget_id;
+      RenderJs.GadgetIndex.getGadgetById(gadget_id).id = new_id;
+      gadget.dom.attr('id', new_id);
     }
   };
 

js/plugins/renderjs/renderjs.js

@@ -37,12 +37,12 @@ var RenderJs = (function () {
 
     return {
 
-        init: function (callback) {
+        init: function (selector) {
           /*
            * Do all initialization
            */
           if (RENDERJS_ENABLE_IMPLICIT_GADGET_RENDERING) {
-              RenderJs.bootstrap( $('body') );
+              RenderJs.bootstrap( selector || $('body') );
           }
           var root_gadget = RenderJs.GadgetIndex.getRootGadget();
           if (RENDERJS_ENABLE_IMPLICIT_INTERACTION_BIND||RENDERJS_ENABLE_IMPLICIT_ROUTE_CREATE) {
@@ -89,7 +89,6 @@ var RenderJs = (function () {
              */
             var gadget_list, gadget, gadget_id, gadget_js;
             gadget_list = root.find("[data-gadget]");
-
             // register all gadget in advance so checkAndTriggerReady
             // can have accurate information for list of all gadgets
             gadget_list.each(function (i, el) {

modules/header/header.js

@@ -19,9 +19,9 @@ define([
       if (window.App === undefined) {
         def = new $.Deferred;
 
-        def.done(function(zzz) {
+        def.done(function(gadget) {
           // prefix instance-ids, pass JSON
-          window.App.renderGadgets(zzz);
+          window.App.renderGadgets(gadget);
         });
 
         window.fallbackLoader.deferreds.push(def);

modules/items/items.js

@@ -20,6 +20,7 @@ define([
 
       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"]],

modules/search/search.html

@@ -23,14 +23,15 @@
                 }
               }
             ]
-          }'
-        ></div>
+          }'>
+    </div>
 
     <!-- panel -->
     <div data-role="panel"
       id="search_panel"
       data-gadget="modules/refine/refine.html"
-      data-gadget-module="refine"></div>
+      data-gadget-module="refine">
+    </div>
 
     <!-- content -->
     <div data-role="content" class="ui-content search_content">
@@ -42,7 +43,8 @@
         data-rel="panel"
         data-role="button"
         data-iconpos="notext"
-        data-icon="grid"></a>
+        data-icon="grid">
+      </a>
 
       <!-- global search -->
       <div id="searchbar"
@@ -55,7 +57,8 @@
       <div id="sorting"
         class="search_element"
         data-gadget="modules/sorting/sorting.html"
-        data-gadget-module="sorting"></div>
+        data-gadget-module="sorting">
+      </div>
 
       <!-- results -->
       <div id="results"
@@ -75,14 +78,18 @@
                 }
               }
             ]
-          }'
-        ></div>
+          }'>
+      </div>
+
     </div>
+
     <!-- footer -->
     <div id="footer"
       data-role="footer"
       data-position="fixed"
       data-gadget="modules/footer/footer.html"
-      data-gadget-module="footer"></div>
+      data-gadget-module="footer">
+    </div>
+
   </body>
 </html>

modules/searchbar/searchbar.js

@@ -6,72 +6,7 @@ define([
     var response = {};
 
     response.data = source;
-    response.mockup = function (source, callback_mockup) {
-      var gadget = RenderJs.getSelfGadget();
 
-      // renderGadget
-      window.App.renderGadgets(gadget);
-        /*
-
-
-        id = gadget.dom.attr('id').split("__").splice(-1)[0],
-        config = gadget.state[0][id]._config,
-        module = config.datasource.module,
-
-        // TODO: no fan of pointers (yet)
-        // pointers keep jio query parameter in storage.js,
-        // => so they don't need to be with JSON
-        pointer = config.datasource.pointer,
-        // regardless of a pointer, we declare defaults
-        method = pointer ? undefined : config.datasource.method || "allDocs",
-        options = pointer ? undefined : {
-          "limit": config.datasource.limit || [0, 24],
-          "sort_on": config.datasource.sort || [["_id", "descending"]],
-          "select_list": config.datasource.fields || undefined
-        },
-        data,
-        markup,
-        screen = window.App.settings.screen_format,
-
-        // this defines the size of the images to be displayed
-        // TODO: this should be customizable
-        size = screen === "small" ? "small" : "medium",
-        shortcut = size.substring(0, 1);
-
-      data =  window.App[module].switchboard(
-        pointer,
-        method,
-        options,
-        function(response) {
-          var item, i, str = "", price;
-
-          for (i = 0; i < response.length; i += 1) {
-            item = response[i];
-
-            if (item.price === item.original_price) {
-              price = item.price + "€";
-            } else {
-              price = "<span class='rebate'>" + item.price + "€</span> (" +
-                item.original_price + "€)";
-            }
-
-            str += "<li data-icon='false'>" +
-              "<a href='details.html?product=" + item._id +
-              "' title='" + item.brand + ", " + item.title + "'>" +
-              "<span class='img_container_items'>" +
-              "<img alt='" + item.title + "' src='" +
-              item.media + item.dimensions[0].vars[0].media.img[0][shortcut] +
-              size + "' /></span><span class='description_items'>" +
-              item.brand + " " + item.title + " " + price + "</span></a></li>";
-          }
-
-          // add to data
-          markup = source.replace(/<!-- items -->/g, str);
-          // this is not response.callback(!!)*/
-          callback_mockup(source);
-        //}
-      //);
-    };
 
     response.callback = function (self) {
       var filter = self.dom.find(".searchbar_filter");

modules/storage/storage.js

@@ -637,7 +637,7 @@ define([
   // pointer, method, options, callback
   that.switchboard = function (param) {
     var query = {};
-    var spec = {};
+    var spec = param || {};
 
     // default object
     spec.default_items = [
@@ -656,11 +656,13 @@ define([
     query.select_list = [];
     query.wildcard_character = '%'
 
-    // if we have a pointer, we can disregard method & options
+    // if we have a pointer, we can disregard method & options,
+    // but we must set on spec directly, because query will only be
+    // assigned in a defined case
     if (param.pointer === undefined) {
-      query.limit = param.options.limit;
-      query.sort_on = param.options.sort_on;
-      query.select_list = param.options.select_list || spec.default_items;
+      spec.options.limit = param.options.limit;
+      spec.options.sort_on = param.options.sort_on;
+      spec.options.select_list = param.options.select_list || spec.default_items;
     }
 
     switch (param.pointer) {
@@ -681,9 +683,9 @@ define([
 
       break;
 
-      // default search with parameters passed!
+      // default
       default:
-
+        that.queryStorage(spec);
       break;
     }
   };

search.html

@@ -8,6 +8,13 @@
     <script data-main="js/main.js" src="js/libs/require/require.js"></script>
   </head>
   <body>
-    <div data-role="page" id="search" data-gadget="modules/search/search.html" data-gadget-module="search"></div>
+
+    <div
+      data-role="page"
+      id="search"
+      data-gadget="modules/search/search.html"
+      data-gadget-module="search">
+    </div>
+
   </body>
 </html>
\ No newline at end of file