Commit 94944824 authored by Jacek Lebioda's avatar Jacek Lebioda
Browse files

Merge branch 'box-hider' into 'develop'

feat: added box hider to index page

See merge request !194
parents 7acfe9fe a55eff57
Pipeline #35341 passed with stages
in 2 minutes and 31 seconds
<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>
/**
* 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
}
})();
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment