switch JQM id navigation to data-url, fixes illegal id, allows to fix navigation

index.html

@@ -43,7 +43,7 @@
 
     <!-- global header -->
 
-    <div id="dashboard" data-role="page" data-theme="slapos-white" data-module="dashboard">
+    <div data-url="dashboard"  data-role="page" data-theme="slapos-white">
       <div class="ui-content">
         <!-- nothing to see here -->
       </div>

js/erp5_loader.js

@@ -427,8 +427,7 @@
             .then(function () {
 
               // TODO: should not get elements like this!
-              gadget_list = document.getElementById(util.getActivePage())
-                .getElementsByTagName("form");
+              gadget_list = util.getPage().getElementsByTagName("form");
 
               for (i = 0; i < gadget_list.length; i += 1) {
                 gadget = gadget_list[i];
@@ -1406,7 +1405,6 @@
       if (page_dict === undefined) {
         util.error("Pageindex: Missing page definition");
       } else {
-
         // NOTE: 3rd parameter "create" needs to be set to undefined,
         // if a page already exists. Setting to true generates a new page
         // setting to false tries to update the content section of an
@@ -1414,7 +1412,7 @@
         return app.setContent(
           page_dict,
           url_dict,
-          document.getElementById(url_dict.id) ? undefined : true
+          util.getPage(url_dict.data_url) ? undefined : true
         ).then(function (response) {
           return response;
         });
@@ -1606,9 +1604,8 @@
       // TODO: will this find a popup if the page is being generated?
       if (pop) {
         if (pop === "local") {
-          active = util.getActivePage();
-          if (document.getElementById(active)
-              .querySelectorAll("div.local_popup") === null) {
+          active = util.getPage();
+          if (active.querySelectorAll("div.local_popup") === null) {
             target.appendChild(factory.popup(undefined, undefined));
           }
         } else {
@@ -2095,14 +2092,15 @@
    * @param {string} id ID of the gadget to update to
    * @param {object} content Content to add
    */
-  // TODO: bad targeting, should be depending on the gadget being updated!
-  // TODO: remove altogether, when figuring out how to store state and target!
-  factory.util.updatePageSection = function (id, content) {
-    var i, target, container = document.getElementById(id);
+  // TODO: refactor! remove when figuring out how to store state and target!
+  factory.util.updatePageSection = function (url, content) {
+    var i, target, container;
 
-    // find a target
+    container = util.getPage(url) || document.getElementById(url);
     target = container.querySelectorAll("[data-update]");
 
+    // ui-content
+
     // ui-content
     if (target.length === 0) {
       target = container.querySelectorAll("div.ui-content");
@@ -2267,7 +2265,7 @@
     } else {
       container = document.createDocumentFragment();
       config = config_dict.property_dict || {};
-      id = config_dict.id || ((url_dict.id || "global") + "-popup");
+      id = config_dict.id || ((url_dict.data_url || "global") + "-popup");
 
       // container
       container.appendChild(factory.element(
@@ -2331,8 +2329,8 @@
       container.appendChild(wrap);
 
       // add to DOM if scoped
-      if (url_dict.id) {
-        document.getElementById(url_dict.id).appendChild(container);
+      if (url_dict.data_url) {
+        util.getPage(url_dict.data_url).appendChild(container);
         // and return the placeholder for JQM
         return placeholder;
       }
@@ -2377,7 +2375,7 @@
       util.error("Generate Header: Missing configuration");
     } else {
       config = config_dict.property_dict || {};
-      id = config_dict.id || ((url_dict.id || "global") + "-header");
+      id = config_dict.id || ((url_dict.data_url || "global") + "-header");
       children = config_dict.children.length;
       position = children === 2 ? 1 : (children === 0 ? 0 : 1);
       state = config_dict.set_state;
@@ -2457,8 +2455,8 @@
       }
 
       // add to DOM if scoped
-      if (url_dict.id) {
-        document.getElementById(url_dict.id).appendChild(header);
+      if (url_dict.data_url) {
+        util.getPage(url_dict.data_url).appendChild(header);
         return undefined;
       }
 
@@ -2496,7 +2494,7 @@
       util.error("Generate Panel: Missing configuration");
     } else {
       config = config_dict.property_dict || {};
-      id = config_dict.id || ((url_dict.id || "global") + "-panel");
+      id = config_dict.id || ((url_dict.data_url || "global") + "-panel");
 
       // panel
       panel = factory.element(
@@ -2557,8 +2555,8 @@
       }
 
       // add to DOM if scoped
-      if (url_dict.id) {
-        document.getElementById(url_dict.id).appendChild(panel);
+      if (url_dict.data_url) {
+        util.getPanel(url_dict.data_url).appendChild(panel);
         return undefined;
       }
       return panel;
@@ -2594,7 +2592,7 @@
       util.error("Generate Footer: Missing config");
     } else {
       config = config_dict.property_dict || {};
-      id = config_dict.id || ((url_dict.id || "global") + "-footer");
+      id = config_dict.id || ((url_dict.data_url || "global") + "-footer");
 
       // footer
       footer = factory.element(
@@ -2637,8 +2635,8 @@
       }
 
       // local
-      if (url_dict.id) {
-        document.getElementById(url_dict.id).appendChild(footer);
+      if (url_dict.data_url) {
+        util.getPage(url_dict.data_url).appendChild(footer);
         return undefined;
       }
       return footer;
@@ -3494,8 +3492,7 @@
     var i, j, last, wrapper, split_url, promises = [], container, target,
       view, render, encoded;
 
-    container = document.getElementById(url_dict.id);
-    target = document.createDocumentFragment();
+    container = util.getPage(url_dict.data_url);
     view = (url_dict && url_dict.mode) ? url_dict.mode : "default";
     render = content_dict.view_dict[view];
 
@@ -3510,8 +3507,9 @@
 
     return RSVP.all(promises)
       .then(function (promises) {
-        // encode the URL so we can also use "/"
-        encoded = window.encodeURIComponent(url_dict.id);
+        // encode the URL so we can also use "/" and remove ? params
+        encoded = window.encodeURIComponent(url_dict.data_url.split("?")[0]);
+        target = document.createDocumentFragment();
 
         for (j = 0; j < promises.length; j += 1) {
           // loading a file with temporary ID
@@ -3527,12 +3525,10 @@
           last = document.body.lastChild;
           wrapper = factory.element("div", {"className": "ui-content"}, {});
           wrapper.setAttribute("data-bound", true);
-          split_url = url_dict.url.split("#");
 
           container = factory.element(
             "div",
             {
-              "id": encoded,
               "className": " ui-page " + ("ui-page-theme-" +
                   content_dict.theme || "") + " " + ((content_dict.fix &&
                       content_dict.fix === false) ? "" :
@@ -3540,9 +3536,7 @@
             },
             {
               "data-role": "page",
-              // NOTE: cheat JQM, until query-params are possible!
-              "data-url": split_url[1] ? split_url[1].split("?")[0] :
-                  split_url[0],
+              "data-url": encoded,
               "data-external-page": true,
               "tabindex": 0,
               "data-enhanced": true
@@ -3566,12 +3560,13 @@
           // trigger new transition to this page
           $.mobile.changePage("#" + encoded);
 
+        // the page exists already, we just check to update page sections
         } else {
           factory.util.updatePageSection(encoded, target);
 
           // we also need to changePage in case we are not on the active
           // page (this will only happen deeplink > home
-          if (encoded !== util.getActivePage()) {
+          if (encoded !== util.getPage().getAttribute("data-url")) {
             $.mobile.changePage("#" + encoded);
           }
         }
@@ -5537,7 +5532,7 @@
 
         query_clean = default_query.query.replace(/'/g, '"');
         query_object = complex_queries.QueryFactory.create(query_clean);
-        obj.query = '('
+        obj.query = '(';
 
         // missing portal type?
         if (default_query.skip_type === undefined) {
@@ -5627,7 +5622,6 @@
         obj.limit = [];
       }
     }
-
     return obj;
   };
 
@@ -5643,12 +5637,10 @@
     path = $.mobile.path.parseUrl(url.replace($.mobile.dialogHashKey, ""));
     clean_hash = path.hash.replace("#", "");
     backup = 0;
-    config = {
-      "url": url
-    };
+    config = {};
 
     if (clean_hash === "") {
-      config.id = config.layout_identifier = util.getActivePage();
+      config.data_url = config.layout_identifier = util.getPage().getAttribute("data-url");
     } else {
       // NOTE: as the hash will be set as page id by JQM, we cannot pass
       // complex structures or query parameters to not produce invalid HTML
@@ -5674,7 +5666,7 @@
       }
 
       config.fragment_list = clean_hash.split("/");
-      config.id = clean_hash;
+      config.data_url = clean_hash;
       config.layout_level = config.fragment_list.length - 1 - backup;
       config.deeplink = true;
       config.layout_identifier = clean_hash.split("/")[0];
@@ -5702,8 +5694,8 @@
       element = e.target || e;
       pop = element.getAttribute("data-rel") === null;
       id = pop ?
-          (element.getAttribute("data-reference") || util.getActivePage()) :
-              (element.href === undefined ? util.getActivePage() :
+          (element.getAttribute("data-reference") || util.getPage().getAttribute("data-url")) :
+              (element.href === undefined ? util.getPage().getAttribute("data-url") :
                   element.href.split("#")[1]);
       gadget = document.getElementById(id);
       break;
@@ -5733,7 +5725,7 @@
       breadcrumb = factory.element(
         "span",
         {"className": "crumbs"},
-        {"data-info": "url", "data-reference": url_dict.id}
+        {"data-info": "url", "data-reference": url_dict.data_url}
       ),
       makeLink = function (path, title, home) {
         // test translation dict if the page title is translateable
@@ -6553,6 +6545,7 @@
     query = parcel.query;
     skip = query && query.limit && query.limit.length === 0 &&  storage.skip_total;
 
+
     // return here, if skipping total query
     if (skip) {
       return {
@@ -6682,7 +6675,7 @@
       // is in DOM, so no new page created, so no title update...)
       // TODO: not bulletproof i18n handling... we expect i18n to be defined
       if (typeof data.toPage === "object") {
-        if ($.mobile.firstPage[0].id === data.toPage[0].id) {
+        if ($.mobile.firstPage[0].getAttribute("data-url") === data.toPage[0].getAttribute("data-url")) {
           app.setPageTitle("global_dict.home");
         }
       }
@@ -6698,24 +6691,24 @@
       raw_url = window.location.href;
     }
 
-    if (typeof raw_url === "string" && data && data.options.reverse) {
-      raw_url = window.decodeURIComponent(raw_url);
-    }
-
     if (typeof raw_url === "string") {
+      // decode
+      if (data && data.options.reverse) {
+        raw_url = window.decodeURIComponent(raw_url);
+      }
       config = app.generateLinkObject(raw_url);
 
       if (e) {
-        page = document.getElementById(raw_url.split("#").pop());
+        page = util.getPage(raw_url.split("#").pop());
         base = page ? page.getAttribute("data-external-page") : null;
-        first = $.mobile.firstPage[0].id === config.id;
+        first = $.mobile.firstPage[0].getAttribute("data-url") === config.data_url;
 
         if (first || (page && base) || raw_url === $.mobile.getDocumentUrl() ||
             data.options.role === "popup") {
           // stop us, JQM can go
           return;
         }
-        if ((document.getElementById(config.id) && base !== null)) {
+        if ((util.getPage(config.data_url) && base !== null)) {
           e.preventDefault();
           // stop us and JQM
           return;
@@ -7074,7 +7067,7 @@
     return (page_header && page_header.length) ? page_header[0] :
         (document.getElementById("global-header") ||
             // WARNING: IE8- children() retrieves comments, too
-            document.getElementById(util.getActivePage()).children[0]);
+            util.getPage().children[0]);
   };
 
   /**
@@ -7206,26 +7199,26 @@
 
   /**
    * Get the active JQM page in JavaScript-only
-   * @method getActivePage
+   * @method getPage
+   * @param {string} url url of the page to fetch
    * @return {string} id of active page
    */
-  util.getActivePage = function () {
+  util.getPage = function (url) {
     var i, kid, kids = document.body.children;
 
     // reverse, because in JQM last page is the active page!
     for (i = kids.length - 1; i >= 0; i -= 1) {
       kid = kids[i];
 
-      if (kid.tagName === "DIV") {
-        if (util.testForString("ui-page", kid.className)) {
-          return kid.id;
+      if (util.testForString("ui-page", kid.className)) {
+        if (url === undefined || kid.getAttribute("data-url") === url) {
+          return kid;
         }
       }
     }
     return undefined;
   };
 
-
   /**
    * Reverse an array
    * @method reverseArray
@@ -7305,7 +7298,7 @@
 
   /**
    * parse to JSON if element is not in JSON
-   * @parse
+   * @method parse
    * @param {object/string} data Data to parse
    * @return {object} object Parsed object
    */