[Summary view] [Print] [Text view]

   1  /**
   2   * @copyright   (C) 2013 Open Source Matters, Inc. <https://www.joomla.org>
   3   * @license     GNU General Public License version 2 or later; see LICENSE.txt
   4   */
   5  
   6  /**
   7   * JavaScript behavior to allow selected tab to be remained after save or page reload
   8   * keeping state in sessionStorage with better handling of multiple tab widgets per page
   9   * and not saving the state if there is no id in the url (like on the CREATE page of content)
  10   */
  11  
  12  jQuery(function ($) {
  13      /**
  14       * Tiny jQuery extension to allow getting of url params
  15       * @use jQuery.urlParam('param') or $.urlParam('myRegex|anotherRegex')
  16       * If no trailing equals sign in name, add one, allows for general reuse
  17       */
  18      $.urlParam = function (name) {
  19          if (!new RegExp("=$").exec(name)) {
  20              name = name + '=';
  21          }
  22          var results = new RegExp("[\\?&](" + name + ")([^&#]*)").exec(window.location.href);
  23          return results ? results[1] : null;
  24      };
  25  
  26      // jQuery extension to get the XPATH of a DOM element
  27      $.getXpath = function (el) {
  28          if (typeof el == "string") {
  29              return document.evaluate(el, document, null, 0, null);
  30          }
  31          if (!el || el.nodeType != 1) {
  32              return "";
  33          }
  34          if (el.id) {
  35              return "//*[@id='" + el.id + "']";
  36          }
  37          var a = [];
  38          var sames = a.filter.call(el.parentNode.children, function (x) {
  39              return x.tagName == el.tagName;
  40          });
  41          var b = [];
  42          return $.getXpath(el.parentNode) + "/" + el.tagName.toLowerCase() + (sames.length > 1 ? "[" + (b.indexOf.call(sames, el) + 1) + "]" : "");
  43      };
  44  
  45      // jQuery extension to get the DOM element from an XPATH
  46      $.findXpath = function (exp, ctxt) {
  47          var item;
  48          var coll = [];
  49          var result = document.evaluate(exp, ctxt || document, null, 5, null);
  50  
  51          while (item = result.iterateNext()) {
  52              coll.push(item);
  53          }
  54  
  55          return $(coll);
  56      };
  57  
  58      var loadTabs = function () {
  59  
  60          /**
  61           * Remove an item from an array
  62           */
  63  		function remove_item(activeTabsHrefs, tabCollection) {
  64              for (var i = 0; i < activeTabsHrefs.length; i++) {
  65                  if (activeTabsHrefs[i].indexOf(tabCollection) > -1) {
  66                      activeTabsHrefs.splice(i, 1);
  67                  }
  68              }
  69  
  70              return activeTabsHrefs;
  71          }
  72  
  73          /**
  74           * Generate the sessionStorage key we will use
  75           * This is the URL minus some cleanup
  76           */
  77  		function getStorageKey() {
  78              return window.location.href.toString().split(window.location.host)[1].replace(/&return=[a-zA-Z0-9%]+/, "").split('#')[0];
  79          }
  80  
  81          /**
  82           * Save this tab to the storage in the form of a pseudo keyed array
  83           */
  84  		function saveActiveTab(event) {
  85  
  86              if (!window.sessionStorage) {
  87                  return;
  88              }
  89              // Get a new storage key, normally the full url we are on with some cleanup
  90              var storageKey = getStorageKey();
  91  
  92              // get this tabs own href
  93              var href = $(event.target).attr("href");
  94  
  95              // find the collection of tabs this tab belongs to, and calculate the unique xpath to it
  96              var tabCollection = $.getXpath($(event.target).closest(".nav-tabs").first().get(0));
  97  
  98              // error handling
  99              if (!tabCollection || typeof href == "undefined") {
 100                  return;
 101              }
 102  
 103              // Create a dummy keyed array as js doesnt allow keyed arrays
 104              var storageValue = tabCollection + "|" + href;
 105  
 106              // Get the current array from the storage
 107              var activeTabsHrefs = JSON.parse(sessionStorage.getItem(storageKey));
 108  
 109              // If none start a new array
 110              if (!activeTabsHrefs) {
 111                  var activeTabsHrefs = [];
 112              } else {
 113                  // Avoid Duplicates in the storage
 114                  remove_item(activeTabsHrefs, tabCollection);
 115              }
 116  
 117              // Save clicked tab, with relationship to tabCollection to the array
 118              activeTabsHrefs.push(storageValue);
 119  
 120              // Store the selected tabs as an array in sessionStorage
 121              sessionStorage.setItem(storageKey, JSON.stringify(activeTabsHrefs));
 122          }
 123  
 124          // Array with active tabs hrefs
 125          var activeTabsHrefs = JSON.parse(sessionStorage.getItem(getStorageKey()));
 126  
 127          // jQuery object with all tabs links
 128          var alltabs = $("a[data-toggle='tab']");
 129  
 130          // When a tab is clicked, save its state!
 131          alltabs.on("click", function (e) {
 132              saveActiveTab(e);
 133          });
 134  
 135          // Clean default tabs
 136          alltabs.parent(".active").removeClass("active");
 137  
 138          // If we cannot find a tab storage for this url, see if we are coming from a save of a new item
 139          if (!activeTabsHrefs) {
 140              var unSavedStateUrl = getStorageKey().replace(/\&id=[0-9]*|[a-z]\&{1}_id=[0-9]*/, '');
 141              activeTabsHrefs = JSON.parse(sessionStorage.getItem(unSavedStateUrl));
 142              sessionStorage.removeItem(unSavedStateUrl);
 143          }
 144  
 145          // we have some tab states to restore, if we see a hash then let that trump the saved state
 146          if (activeTabsHrefs !== null && !window.location.hash) {
 147  
 148              // When moving from tab area to a different view
 149              $.each(activeTabsHrefs, function (index, tabFakexPath) {
 150  
 151                  // Click the tab
 152                  var parts = tabFakexPath.split("|");
 153                  $.findXpath(parts[0]).find("a[data-toggle='tab'][href='" + parts[1] + "']").click();
 154  
 155              });
 156  
 157          } else { // clean slate start
 158  
 159              // a list of tabs to click
 160              var tabsToClick = [];
 161  
 162              // If we are passing a hash then this trumps everything
 163              if (window.location.hash) {
 164  
 165                  // for each set of tabs on the page
 166                  alltabs.parents("ul").each(function (index, ul) {
 167  
 168                      // If no tabs is saved, activate first tab from each tab set and save it
 169                      var tabToClick = $(ul).find("a[href='" + window.location.hash + "']");
 170  
 171                      // If we found some|one
 172                      if (tabToClick.length) {
 173  
 174                          // if we managed to locate its selector directly
 175                          if (tabToClick.selector) {
 176  
 177                              // highlight tab of the tabs if the hash matches
 178                              tabsToClick.push(tabToClick);
 179                          } else {
 180  
 181                              // highlight first tab of the tabs
 182                              tabsToClick.push(tabToClick.first());
 183                          }
 184  
 185                          var parentPane = tabToClick.closest('.tab-pane');
 186  
 187                          // bubble up for nested tabs (like permissions tabs in the permissions pane)
 188                          if (parentPane) {
 189                              var id = parentPane.attr('id');
 190                              if (id) {
 191                                  var parentTabToClick = $(parentPane).find("a[href='#" + id + "']");
 192                                  if (parentTabToClick) {
 193                                      tabsToClick.push(parentTabToClick);
 194                                  }
 195                              }
 196                          }
 197                      }
 198  
 199                      // cleanup for another loop
 200                      parentTabToClick = null;
 201                      tabToClick = null;
 202                      parentPane = null;
 203                      id = null;
 204                  });
 205  
 206                  // run in the right order bubbling up
 207                  tabsToClick.reverse();
 208  
 209                  // for all queued tabs
 210                  for (var i = 0; i < tabsToClick.length; i++) {
 211  
 212                      // click the tabs, thus storing them
 213                      jQuery(tabsToClick[i].selector).click();
 214                  }
 215  
 216                  // Remove the #hash in the url - with support for older browsers with no flicker
 217                  var scrollV, scrollH, loc = window.location;
 218                  if ("pushState" in history)
 219                      history.pushState("", document.title, loc.pathname + loc.search);
 220                  else {
 221                      // Prevent scrolling by storing the page's current scroll offset
 222                      scrollV = document.body.scrollTop;
 223                      scrollH = document.body.scrollLeft;
 224                      loc.hash = "";
 225                      // Restore the scroll offset, should be flicker free
 226                      document.body.scrollTop = scrollV;
 227                      document.body.scrollLeft = scrollH;
 228                  }
 229  
 230              } else {
 231                  alltabs.parents("ul").each(function (index, ul) {
 232                      // If no tabs is saved, activate first tab from each tab set and save it
 233                      $(ul).find("a").first().click();
 234                  });
 235              }
 236          }
 237      };
 238  
 239      setTimeout(loadTabs, 100);
 240  });