updated site

js/docs.js

@@ -0,0 +1,163 @@
+/**
+ * Toggle an specific class to the received DOM element.
+ * @param {string}	elemSelector The query selector specifying the target element.
+ * @param {string}	[activeClass='active'] The class to be applied/removed.
+ */
+function toggleClass(elemSelector, activeClass = "active") {
+  const elem = document.querySelector(elemSelector);
+  if (elem) {
+    elem.classList.toggle(activeClass);
+  }
+}
+
+/**
+ * Toggle specific classes to an array of corresponding DOM elements.
+ * @param {Array<string>}	elemSelectors The query selectors specifying the target elements.
+ * @param {Array<string>}	activeClasses The classes to be applied/removed.
+ */
+function toggleClasses(elemSelectors, activeClasses) {
+  elemSelectors.map((elemSelector, idx) => {
+    toggleClass(elemSelector, activeClasses[idx]);
+  });
+}
+
+/**
+ * Remove active class from siblings DOM elements and apply it to event target.
+ * @param {Element}		element The element receiving the class, and whose siblings will lose it.
+ * @param {string}		[activeClass='active'] The class to be applied.
+ */
+function activate(element, activeClass = "active") {
+  [...element.parentNode.children].map(elem =>
+    elem.classList.remove(activeClass)
+  );
+  element.classList.add(activeClass);
+}
+
+/**
+ * Remove active class from siblings parent DOM elements and apply it to element target parent.
+ * @param {Element}		element The element receiving the class, and whose siblings will lose it.
+ * @param {string}		[activeClass='active'] The class to be applied.
+ */
+function activateParent(element, activeClass = "active") {
+  const elemParent = element.parentNode;
+  activate(elemParent, activeClass);
+}
+
+/**
+ * Remove active class from siblings parent DOM elements and apply it to element target parent.
+ * @param {Element}		element The element receiving the class, and whose siblings will lose it.
+ * @param {string}		[activeClass='active'] The class to be applied.
+ */
+function toggleParent(element, activeClass = "active") {
+  const elemParent = element.parentNode;
+  if (elemParent) {
+    elemParent.classList.toggle(activeClass);
+  }
+}
+
+/**
+ * This will make the specified elements click event to show/hide the menu sidebar.
+ */
+function activateToggle() {
+  const menuToggles = document.querySelectorAll("#menu-toggle, #main-toggle");
+  if (menuToggles) {
+    [...menuToggles].map(elem => {
+      elem.onclick = e => {
+        e.preventDefault();
+        toggleClass("#wrapper", "toggled");
+      };
+    });
+  }
+}
+
+/**
+ * This will make the specified elements click event to behave as a menu
+ * parent entry, or a link, or sometimes both, depending on the context.
+ */
+function activateMenuNesting() {
+  const menuParents = document.querySelectorAll(".drop-nested");
+  if (menuParents) {
+    [...menuParents].map(elem => {
+      elem.onclick = e => {
+        e.preventDefault();
+        toggleParent(elem, "open");
+        const elementType = e.currentTarget.tagName.toLowerCase();
+        if (elementType === "a") {
+          const linkElement = e.currentTarget;
+          const linkElementParent = linkElement.parentNode;
+          const destination = linkElement.href;
+          if (
+            destination !== window.location.href &&
+            !linkElementParent.classList.contains("active")
+          ) {
+            window.location.href = destination;
+          }
+        }
+      };
+    });
+  }
+}
+
+/**
+ * Aux function to retrieve repository stars and watchers count info from
+ * GitHub API and set it on its proper nodes.
+ */
+async function loadGitHubStats() {
+  const content = document.querySelector("#content");
+  const ghOwner = content.dataset.githubOwner;
+  const ghRepo = content.dataset.githubRepo;
+
+  if (ghOwner && ghRepo) {
+    const ghAPI = `https://api.github.com/repos/${ghOwner}/${ghRepo}`;
+    const ghDataResponse = await fetch(ghAPI);
+    const ghData = await ghDataResponse.json();
+    const watchersElement = document.querySelector("#eyes");
+    const starsElement = document.querySelector("#stars");
+    watchersElement.textContent = ghData.subscribers_count;
+    starsElement.textContent = ghData.stargazers_count;
+  }
+}
+
+/**
+ * Function to create an anchor with an specific id
+ * @param {string}    id The corresponding id from which the href will be created.
+ * @returns {Element} The new created anchor.
+ */
+function anchorForId(id) {
+  const anchor = document.createElement("a");
+  anchor.className = "header-link";
+  anchor.href = `#${id}`;
+  anchor.innerHTML = '<i class="fa fa-link"></i>';
+  return anchor;
+}
+
+/**
+ * Aux function to retrieve repository stars and watchers count info from
+ * @param {string}	level The specific level to select header from.
+ * @param {Element}	containingElement The element receiving the anchor.
+ */
+function linkifyAnchors(level, containingElement) {
+  const headers = containingElement.getElementsByTagName(`h${level}`);
+  [...headers].map(header => {
+    if (typeof header.id !== "undefined" && header.id !== "") {
+      header.append(anchorForId(header.id));
+    }
+  });
+}
+
+/**
+ * Function
+ */
+function linkifyAllLevels() {
+  const content = document.querySelector("#content");
+  [...Array(7).keys()].map(level => {
+    linkifyAnchors(level, content);
+  });
+}
+
+window.addEventListener("DOMContentLoaded", () => {
+  activateToggle();
+  activateMenuNesting();
+  loadGitHubStats();
+  linkifyAllLevels();
+});

js/main.js

@@ -0,0 +1,73 @@
+jQuery(document).ready(function() {
+  hljs.initHighlightingOnLoad();
+  activeToggle();
+  loadGitHubStats();
+  linkifyAllLevels(".docs .content-wrapper");
+});
+
+
+function activeToggle() {
+  $("#menu-toggle").click(function(e) {
+    e.preventDefault();
+    $("#wrapper").toggleClass("toggled");
+  });
+}
+
+var anchorForId = function (id) {
+  var anchor = document.createElement("a");
+  anchor.className = "header-link";
+  anchor.href      = "#" + id;
+  anchor.innerHTML = "<i class=\"fa fa-link\"></i>";
+  return anchor;
+};
+
+var linkifyAnchors = function (level, containingElement) {
+  var headers = containingElement.getElementsByTagName("h" + level);
+  for (var h = 0; h < headers.length; h++) {
+    var header = headers[h];
+
+    if (typeof header.id !== "undefined" && header.id !== "") {
+      header.appendChild(anchorForId(header.id));
+    }
+  }
+};
+
+var linkifyAllLevels = function (blockSelector) {
+  var contentBlock = document.querySelector(blockSelector);
+  if (!contentBlock) {
+    return;
+  }
+  for (var level = 1; level <= 6; level++) {
+    linkifyAnchors(level, contentBlock);
+  }
+};
+
+var baseURL = window.location.href;
+
+function shareSiteFacebook(text) {
+  launchPopup('http://www.facebook.com/sharer/sharer.php?u='+baseURL+'&t=' + text);
+}
+
+function shareSiteTwitter(text) {
+  launchPopup('https://twitter.com/home?status=' + text);
+  return false;
+}
+
+function launchPopup(url) {
+  window.open(url, 'Social Share', 'height=320, width=640, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, directories=no, status=no');
+}
+
+function loadGitHubStats() {
+  var content = $("#content");
+  var githubOwner = content.attr("data-github-owner")
+  var githubRepo = content.attr("data-github-repo")
+
+  if(githubOwner && githubRepo) {
+    var gitHubAPI = "https://api.github.com/repos/" + githubOwner + "/" + githubRepo + "?callback=?";
+    $.getJSON(gitHubAPI).done(function(data) {
+      $('#eyes').text(data.data.subscribers_count);
+      $('#stars').text(data.data.stargazers_count);
+    });
+  }
+
+}

js/version-selector.js

@@ -0,0 +1,36 @@
+/* When the user clicks on the navigation Documentation button,
+ * toggle between hiding and showing the dropdown content.
+ */
+function displayToggleVersion(e) {
+  e.preventDefault();
+  e.stopPropagation();
+  // Calling close func. in case we're clicking another dropdown with one opened
+  closeDropdownVersion(e);
+  const parent = e.target.closest("div[id$='version-dropdown']");
+  if (parent) {
+    const dropdown = parent.querySelector("#version-dropdown-content");
+    if (dropdown) {
+      dropdown.classList.toggle("show");
+      if (dropdown.classList.contains("show")) {
+        document.documentElement.addEventListener("click", closeDropdownVersion);
+      }
+      else {
+        document.documentElement.removeEventListener("click", closeDropdownVersion);
+      }
+    }
+  }
+}
+
+// Close the dropdown if the user clicks (only) outside of it
+function closeDropdownVersion(e) {
+  const dropdown = document.querySelector("div[id$='version-dropdown'] > .dropdown-content.show");
+  if (dropdown) {
+    const currentTarget = e.currentTarget || {};
+    const currentTargetParent = currentTarget.closest("div[id$='version-dropdown']");
+    const dropdownParent = dropdown.closest("div[id$='version-dropdown']");
+    if (currentTargetParent !== dropdownParent) {
+      dropdown.classList.remove("show");
+    }
+    document.documentElement.removeEventListener("click", closeDropdownVersion);
+  }
+}