gcg/static-cms
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Caleb 2018-05-15 16:11:44 -06:00 committed by Shawn Erquhart
parent 40494a4e43
commit 9760ee2452
1 changed files with 35 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
website/site/static/widgets.js
View File

@ -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
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]
}
};
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)
if (loadWidgetFromHash()) { // Scroll to widget cloud if URL hash set to a widget.
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) {
history.pushState(null, null, '#' + cloudItem.dataset.widgetTarget);
}
else {
location.hash = '#' + cloudItem.dataset.widgetTarget;
if (!preventHistoryUpdate) {
if (history.pushState) {
history.pushState(null, null, '#' + cloudItem.dataset.widgetTarget);
}
else {
location.hash = '#' + cloudItem.dataset.widgetTarget;
}
}
setTimeout(() => {
@ -63,4 +73,4 @@ function widgetsCloud() {
}
widgetsCloud();
widgetsCloud();