Docs: Link widget cloud to browser URL. (#1212)

website/site/static/widgets.js

@@ -6,25 +6,16 @@ function widgetsCloud() {
     let activeWidgetItem = document.getElementsByClassName("widgets__item_active")[0]; // Active button in the widgets cloud
 
     if (document.getElementsByClassName("widgets")) {
-
+        
-        if (window.location.hash) { // Function to check if the given URL has a hash to make each widget shareable
+        if (loadWidgetFromHash()) { // Scroll to widget cloud if URL hash set to a widget.
-            const targetWidget = document.getElementById(window.location.hash.substr(1)), 
+          setTimeout(() => {
-            openedWidget = document.getElementsByClassName("widget_open")[0];
+              document.getElementsByClassName("widgets")[0].scrollIntoView({
-
+                  behavior: "smooth",
-            let targetWidgetItem = "";
+                  block: "nearest"
-            for (let i = 0; i < widgetItems.length; i++) {
+              }); // Scrolls to the widgets section
-                if (widgetItems[i].dataset.widgetTarget == window.location.hash.substr(1)) {
+          }, 200);
-                    targetWidgetItem = widgetItems[i]
-                }
-            };
-            changeWidgets(openedWidget, targetWidget, targetWidgetItem);  // Runs the function to change which widget is displayed
-            setTimeout(() => {
-                document.getElementsByClassName("widgets")[0].scrollIntoView({
-                    behavior: "smooth",
-                    block: "nearest"
-                }); // Scrolls to the widgets section
-            },200)
         }
+        window.addEventListener('hashchange', loadWidgetFromHash);
 
         for (let i = 0; i < widgetItems.length; i++) {
             widgetItems[i].addEventListener("click", e => { // Add click event for each widget button in the cloud
@@ -35,7 +26,24 @@ function widgetsCloud() {
             })
         }
     }
-    function changeWidgets(active, target, cloudItem) {
+    function loadWidgetFromHash() {
+        if (!window.location.hash) return; // Check if the given URL has a hash to make each widget shareable
+
+        const targetWidget = document.getElementById(window.location.hash.substr(1)), 
+        openedWidget = document.getElementsByClassName("widget_open")[0];
+
+        let targetWidgetItem = "";
+        for (let i = 0; i < widgetItems.length; i++) {
+            if (widgetItems[i].dataset.widgetTarget == window.location.hash.substr(1)) {
+                targetWidgetItem = widgetItems[i]
+            }
+        };
+        if (!targetWidgetItem) return; // Make sure the hash pointed to a widget, not something else.
+
+        changeWidgets(openedWidget, targetWidget, targetWidgetItem, true);  // Runs the function to change which widget is displayed
+        return true;
+    }
+    function changeWidgets(active, target, cloudItem, preventHistoryUpdate) {
     
         target.classList.add("widget_opening"); // Starts the process of opening the next widget
     
@@ -46,11 +54,13 @@ function widgetsCloud() {
         activeWidgetItem = cloudItem; // Sets the new active widget item as the clicked one
         activeWidgetItem.classList.add("widgets__item_active"); // And adds the active CSS class to it
     
-        if (history.pushState) {
+        if (!preventHistoryUpdate) {
-            history.pushState(null, null, '#' + cloudItem.dataset.widgetTarget);
+            if (history.pushState) {
-        }
+                history.pushState(null, null, '#' + cloudItem.dataset.widgetTarget);
-        else {
+            }
-            location.hash = '#' + cloudItem.dataset.widgetTarget;
+            else {
+                location.hash = '#' + cloudItem.dataset.widgetTarget;
+            }
         }
     
         setTimeout(() => {
@@ -63,4 +73,4 @@ function widgetsCloud() {
 }
 
 
-widgetsCloud();
+widgetsCloud();