From 428577ceff3d9d0228cf2c69bd0944a9536f93f0 Mon Sep 17 00:00:00 2001
From: Jacek Lebioda <jacek.lebioda@uni.lu>
Date: Wed, 9 Dec 2020 15:41:46 +0100
Subject: [PATCH] feat: added box hider to index page (to be used after landing
page)
---
_includes/scripts.html | 8 +++-
assets/js/box_hider.js | 89 ++++++++++++++++++++++++++++++++++++++++++
index.md | 2 +-
3 files changed, 97 insertions(+), 2 deletions(-)
create mode 100644 assets/js/box_hider.js
diff --git a/_includes/scripts.html b/_includes/scripts.html
index 3f2ef451..00ab2a82 100644
--- a/_includes/scripts.html
+++ b/_includes/scripts.html
@@ -1,2 +1,8 @@
<script type="text/javascript" src="https://analytics.lcsb.uni.lu/lap/static/js/jquery.min.js"></script>
-<script type="text/javascript" src="{{ "assets/js/router.js" | relative_url }}"></script>
\ No newline at end of file
+<script type="text/javascript" src="{{ "assets/js/router.js" | relative_url }}"></script>
+<script type="text/javascript" src="{{ "assets/js/box_hider.js" | relative_url }}"></script>
+<script>
+window.addEventListener('load', function() {
+ window.boxHider.Trigger();
+})
+</script>
diff --git a/assets/js/box_hider.js b/assets/js/box_hider.js
new file mode 100644
index 00000000..968f12fb
--- /dev/null
+++ b/assets/js/box_hider.js
@@ -0,0 +1,89 @@
+/**
+ * This is used to hide the sections of the index page
+ * based on the URL fragment (a.k.a. "hash")
+ */
+window.boxHider = (function() {
+ function GetSelectedId() {
+ var boxId = window.location.hash;
+ if (boxId.length > 0) {
+ return boxId.substring(1);
+ }
+ return "";
+ }
+
+ function GetAllBoxElements() {
+ return document.getElementsByClassName('index-box');
+ }
+
+ function GetAllBoxElementsArray() {
+ var allBoxes = GetAllBoxElements();
+ var allBoxesArray = Array.prototype.slice.call(allBoxes);
+ return allBoxesArray;
+ }
+
+ function GetSelectedBoxElement(id) {
+ var allBoxesArray = GetAllBoxElementsArray();
+ var element = document.getElementById(id);
+
+ if (allBoxesArray.includes(element)) {
+ return element;
+ }
+
+ return false;
+ }
+
+ function HideElement(element) {
+ if (element instanceof HTMLElement) {
+ element.style['display'] = 'none';
+ }
+ }
+
+ function UnhideElement(element) {
+ if (element instanceof HTMLElement) {
+ element.style['display'] = 'block';
+ }
+ }
+
+ function HideAllCategories() {
+ var allCategoriesElement = document.getElementById('all-categories');
+ HideElement(allCategoriesElement);
+ }
+
+ function ShowAllBoxes() {
+ var allBoxes = GetAllBoxElementsArray();
+ allBoxes.map(function(box) {
+ UnhideElement(box);
+ });
+ }
+
+ function Trigger() {
+ // First, try to get the hash from the URL (https://example.com/uri?param#hash)
+ var boxId = GetSelectedId();
+ if (boxId.length == 0) {
+ // If there is no hash in the URL, just show all the boxes
+ ShowAllBoxes();
+ return;
+ }
+ // Otherwise, proceed to getting the corresponding div element
+ var selectedBox = GetSelectedBoxElement(boxId);
+ if (selectedBox == false) {
+ // If the user selection is not a `div.index-box`, then just show all the boxes
+ ShowAllBoxes();
+ return;
+ }
+ // Hide the "All Categories" element
+ HideAllCategories();
+ // Finally, hide all boxes except of the selected one
+ var allBoxes = GetAllBoxElementsArray();
+ allBoxes.map(function(box) {
+ if (box != selectedBox) {
+ HideElement(box);
+ }
+ });
+ }
+
+ return {
+ 'Trigger': Trigger,
+ 'ShowAllBoxes': ShowAllBoxes
+ }
+})();
diff --git a/index.md b/index.md
index b6dff3f7..a83961b4 100644
--- a/index.md
+++ b/index.md
@@ -65,4 +65,4 @@ The How-to cards are intended to provide practical guidance in implementing Data
</ul>
</div>
-</div>
\ No newline at end of file
+</div>
--
GitLab