fixed loading gadgets via renderjs and requirejs in Chrome/Opera

js/app.js

-define([], function () {
+define([
+    'overrides'
+  , 'jquery'
+  , 'jqm'
+  , 'polyfill'
+  , 'text'
+  , 'json'
+  , 'renderjs'
+  , 'i18next'
+  , 'css!../css/jquery-mobile/jquery-mobile.latest'
+  , 'css!../css/css'
+  , 'css!../css/normalize/normalize'
+], function () {
   "use strict";
 
   var priv = {};
@@ -9,7 +21,7 @@ define([], function () {
    ======================================================================== */
 
   // document
-  priv.doc = $.mobile.document;
+  priv.doc = $.mobile.document || $(document);
 
   /* ========================================================================
                                   FLAGS
@@ -72,7 +84,7 @@ define([], function () {
 
   // ============================ RenderJs related ========================
   //
-  // get elements inside a popup
+  // get elements inside a gadget
   // @method getElements
   // @param  {object} gadget to search for recursive gadgets
   //
@@ -213,30 +225,29 @@ define([], function () {
   // @param {object} gadget to be rendered
   //
   that.renderGadgets = function (gadget) {
-    var spec = {};
-
-    spec.gadget_id = gadget.dom.attr('id');
-    spec.gadget_props = gadget["state"];
-    spec.gadget_cleaned_id = spec.gadget_id.split("__").slice(-1)[0];
-    spec.propsToSet;
-    spec.fwd = [];
-    spec.i;
+    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],
+      propsToSet,
+      fwd = [],
+      i;
 
     // JSON property API
     //  "state": [
     //    {"gadget-id" {"element": ["method", "key/value", "value"] } },
     //    ...
     //  ]
-    if (spec.gadget_props !== undefined) {
-      for (spec.i = 0; spec.i < spec.gadget_props.length; spec.i += 1) {
-        spec.propsToSet = spec.gadget_props[spec.i][spec.gadget_cleaned_id];
+    if (gadget_props !== undefined) {
+      for (i = 0; i < gadget_props.length; i += 1) {
+        propsToSet = gadget_props[i][gadget_cleaned_id];
 
-        if (spec.propsToSet !== undefined) {
+        if (propsToSet !== undefined) {
           // properties for this gadget
-          priv.setAttributesOnGadgetElements(gadget, spec.propsToSet);
+          priv.setAttributesOnGadgetElements(gadget, propsToSet);
         } else {
           // fwd to new data-gadget-property object
-          spec.fwd.push(spec.gadget_props[spec.i]);
+          fwd.push(gadget_props[i]);
         }
       }
       // should we clean up?
@@ -246,32 +257,36 @@ define([], function () {
     priv.getElements(
       gadget, "a[data-rel='popup'], a[data-rel='panel']"
     ).each(function () {
-      spec.href = this.getAttribute('href').replace("#", '');
-      spec.prefixedHref = priv.prefixElement(spec.href, spec.gadget_id);
+      var href = this.getAttribute('href').replace("#", ''),
+        prefixedHref = priv.prefixElement(href, gadget_id);
 
-      this.setAttribute("href", "#" + spec.prefixedHref);
+      this.setAttribute("href", "#" + prefixedHref);
 
       // not nice... prevents panel getting prefix__prefix__gadget_id
       // TODO: find better way
       if (this.getAttribute("data-rel") !== "panel") {
         document
-          .getElementById(spec.href)
-          .setAttribute("id", spec.prefixedHref);
+          .getElementById(href)
+          .setAttribute("id", prefixedHref);
       }
     });
 
-    priv.getElements(gadget, "div[data-gadget]").each(function () {
-      spec.id = this.getAttribute('id');
-      spec.prefixId = priv.prefixElement(spec.id, spec.gadget_id);
-      if (spec.fwd.length > 0) {
+    // beware: need to get children only to prevent selecting gadgets
+    // multiple levels deep
+    priv.getElements(gadget, "> div[data-gadget]").each(function () {
+      if (fwd.length > 0) {
         this.setAttribute(
           'data-gadget-property', JSON.stringify({
-            "state": spec.fwd
+            "state": fwd
           })
         );
       }
-      this.setAttribute('id', spec.prefixId);
     });
+
+    // update this gadgets id with the parent gadget id
+    if (gadget_parent.length > 0) {
+      gadget.dom.attr('id', gadget_parent.attr('id') + "__" + gadget_id);
+    }
   };
 
   // ========================================================================

js/main.js

@@ -65,8 +65,7 @@
       , pagefooter:       '../modules/pagefooter/pagefooter'
     }
     , shim: {
-        'overrides':        { deps: ['jquery'] }
-      , 'jqm':              { deps: ['jquery'], exports: 'mobile' }
+        'jqm':              { deps: ['jquery'], exports: 'mobile' }
       , 'jio':              { deps: ['md5'] }
       , 'complex_queries':  { exports: 'complex_queries' }
       , 'localstorage':     { deps: ['jio', 'complex_queries'] }
@@ -82,52 +81,51 @@
     }
   });
 
-define(
-    [
-        'require'
-      , 'overrides'
-      , 'jquery'
-      , 'jqm'
-      , 'jio'
-      , 'polyfill'
-      , 'text'
-      , 'json'
-      , 'renderjs'
-      , 'i18next'
-      , 'localstorage'
-      , 'complex_queries'
-      , 'md5'
-      , 'css!../css/jquery-mobile/jquery-mobile.latest'
-      , 'css!../css/css'
-      , 'css!../css/normalize/normalize'
-    ],
-  function (require) {
+
   require(['app', 'config'], function(App, Config) {
 
     var setup = new $.Deferred();
     var spec = {};
+    var i;
+    var def;
 
     spec.app = App;
     spec.config = Config;
     spec.setup = setup;
 
+    // fallback for fast browsers...
+    spec.fallbackLoader = {
+      deferreds: [],
+      args: [],
+    };
+
     // expose App once everything is loaded
     spec.setup.done(function(App, Config) {
+
       window.App = App;
 
       // expose configuration - settings
       window.App.settings = Config.settings;
       // expose configuration - storages
       window.App.storage = Config.storage;
+
+      for (i = 0; i < window.fallbackLoader.deferreds.length; i += 1) {
+        window.fallbackLoader.deferreds[i]
+          .resolve(window.fallbackLoader.args[i]);
+      }
+
+      // cleanup
+      delete window.fallbackLoader;
     });
 
     spec.configuration_setter = function (spec) {
       spec.config.set(spec);
     };
 
+    // expose fallback
+    window.fallbackLoader = spec.fallbackLoader;
+
     // initialize
     App.initialize(spec);
   });
-  }
-);
 }());
\ No newline at end of file

js/overrides.js

-(function ($, document) {
+define(['jquery'], function ($) {
   "use strict";
+
+  // we will trigger manually
   $(document).on("mobileinit", function () {
     $.mobile.autoInitializePage = false;
   });
-}(jQuery, document));
+
\ No newline at end of file
+  return undefined;
+});
\ No newline at end of file

modules/config/config.js

 define([
-    "storage"
-  , "async"
+    'storage'
+  , 'async'
   ],
   function (storage) {
     "use strict";

modules/header/header.js

@@ -3,12 +3,33 @@ define([
   , 'css!header'
   ],
   function (source) {
-    var response = {};
+    var response = {}, def;
 
     response.data = source;
     response.callback = function (self) {
+      // TODO: this should be inside renderJs, although its application-specific
+      // but the problem with using async-render-require will be everything
+      // being loaded at the same time, so the user should have the opportunity
+      // to run his callback no matter where. Still not sure where to wait
+      // (app-init or render-init), but it would be nice if a renderjs application
+      // would allow for a first page load deferred on all gadgets until some
+      // flag is set. In rjs2, we will not have to set globals, but we will
+      // have the problem of trying to access methods published by other gadgets
+      // BEFORE they have been published, so it's pretty much the same thing.
+      if (window.App === undefined) {
+        def = new $.Deferred;
+
+        def.done(function(zzz) {
+          // prefix instance-ids, pass JSON
+          window.App.renderGadgets(zzz);
+        });
+
+        window.fallbackLoader.deferreds.push(def);
+        window.fallbackLoader.args.push(self);
+      } else {
         // prefix instance-ids, pass JSON
         window.App.renderGadgets(self);
+      }
     };
 
   // return response object

modules/index/index.html

@@ -26,100 +26,5 @@
           }'>
     </div>
 
-    <!-- content -->
-    <div data-role="content" class="ui-content">
-
-      <!-- teaser -->
-      <div id="teaser" data-gadget="modules/teaser/teaser.html" data-gadget-module="teaser"></div>
-
-      <!-- quicksearch -->
-      <div id="quicksearch"
-        class="searchbar_wrap"
-        data-gadget="modules/searchbar/searchbar.html"
-        data-gadget-module="searchbar"
-        data-gadget-property='{
-          "state": [
-              {
-                "quicksearch": {
-                  "_elements": [
-                    ["ui-filter", "attr", "data-i18n", "[placeholder]quicksearch.browse"],
-                    ["ui-filter", "attr", "data-i18n-target", "input"]
-                  ],
-                  "_config": {
-                    "datasource": {"module": "storage"}
-                  },
-                  "_links": {
-                    "self": {"href": ""},
-                    "datasource": {"href": "modules/storage/storage.html#queryStorage?method=default"},
-                    "show": {"href": "search.html#queryStorage?method=default"}
-                  }
-                }
-              }
-            ]
-          }'>
-      </div>
-
-      <!-- gallery widget -->
-      <div id="gallery" data-gadget="modules/gallery/gallery.html" data-gadget-module="gallery"></div>
-
-      <!-- top sellers -->
-      <div id="topsellers"
-        data-gadget="modules/items/items.html"
-        data-gadget-module="items"
-        data-gadget-property='{
-          "state": [
-              {
-                "topsellers": {
-                  "_elements": [
-                    ["items_title", "attr", "data-i18n", "topsellers.info"],
-                    ["items_show", "attr", "data-i18n", "topsellers.show"],
-                    ["items_show", "attr", "href", "search.html?show=topsellers"]
-                  ],
-                  "_config": {
-                    "datasource": {"module": "storage", "pointer": "topsellers"}
-                  },
-                  "_links": {
-                    "self": {"href": ""},
-                    "datasource": {"href": "modules/storage/storage.html#queryStorage?method=topsellers"},
-                    "show": {"href": "search.html#queryStorage?method=topsellers"}
-                  }
-                }
-              }
-            ]
-          }'>
-      </div>
-
-      <!-- top brands 
-      <div id="topbrands"
-        data-gadget="modules/items/items.html"
-        data-gadget-module="items"
-        data-gadget-property='{
-          "state": [
-              {
-                "topbrands": {
-                  "_elements": [
-                    ["items_title", "attr", "data-i18n", "topbrands.info"],
-                    ["items_show", "attr", "data-i18n", "topbrands.show"],
-                    ["items_show", "attr", "href", "search.html?show=topbrands"]
-                  ],
-                  "_config": {
-                    "datasource": {"module": "storage", "pointer": "topbrands"}
-                  },
-                  "_links": {
-                    "self": {"href": ""},
-                    "datasource": {"href": "modules/storage/storage.html#queryStorage?method=topbrands"},
-                    "show": {"href": "search.html#queryStorage?method=topsellers"}
-                  }
-                }
-              }
-            ]
-          }'
-      ></div>-->
-
-      <!-- seo story -->
-      <div id="seo" data-gadget="modules/seo/seo.html" data-gadget-module="seo"></div>
-    </div>
-    <!-- footer -->
-    <div id="footer" data-role="footer" data-position="fixed" data-gadget="modules/footer/footer.html" data-gadget-module="footer"></div>
     </body>
 </html>
\ No newline at end of file

modules/index/index.js

@@ -3,12 +3,24 @@ define([
   , 'css!index'
   ],
   function (source) {
-    var response = {};
+    var response = {}, def;
 
     response.data = source;
     response.callback = function (self) {
+      if (window.App === undefined) {
+        def = new $.Deferred;
+
+        def.done(function(gadget) {
+          // prefix instance-ids, pass JSON
+          window.App.renderGadgets(gadget);
+        });
+
+        window.fallbackLoader.deferreds.push(def);
+        window.fallbackLoader.args.push(self);
+      } else {
         // prefix instance-ids, pass JSON
         window.App.renderGadgets(self);
+      }
     };
 
   // return response object

modules/translate/translate.js

@@ -10,6 +10,7 @@ define([
 
       var that = {};
       var priv = {};
+      var def;
 
       // ====================================================================
       //                            ATTRIBUTES
@@ -132,6 +133,7 @@ define([
           });
       });
 
+      priv.deferred_setup_translations = function (gadget) {
       // ====================================================================
       //                            PUBLISH METHODS
       // ====================================================================
@@ -139,12 +141,28 @@ define([
         window.App.translate = priv.translate;
 
         // prefix instance-ids, pass JSON, trigger("create")
-      window.App.renderGadgets(priv.gadget);
+        window.App.renderGadgets(gadget);
 
       // ====================================================================
       //                            INITIALIZE
       // ====================================================================
         priv.initialize(window.App.settings.language_current);
+      };
+
+      if (window.App === undefined) {
+        def = new $.Deferred;
+
+        def.done(function(gadget) {
+          // prefix instance-ids, pass JSON
+          priv.deferred_setup_translations(gadget)
+        });
+
+        window.fallbackLoader.deferreds.push(def);
+        window.fallbackLoader.args.push(priv.gadget);
+      } else {
+        // prefix instance-ids, pass JSON
+        priv.deferred_setup_translations(priv.gadget);
+      }
     }
 
   // return response object