ourworld_web/www_threefold_io
23
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix filter-btn

Browse Source
This commit is contained in:
samaradel
2023-06-11 17:40:52 +03:00
parent f261ef3373
commit 6153c3fb61
1 changed files with 116 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

202
static/js/custom.js
View File

@@ -1,123 +1,151 @@
var displayedMenu = ""; var displayedMenu = "";
var hamburgerShown = false; var hamburgerShown = false;
let width = screen.width; let width = screen.width;
var isMobile = width < 1024; var isMobile = width < 1024;
function readingTime() { function readingTime() {
let articles = document.querySelectorAll(".article"); let articles = document.querySelectorAll(".article");
let times = document.querySelectorAll(".time"); let times = document.querySelectorAll(".time");
const wpm = 225; const wpm = 225;
let words; let words;
for (var i = 0; i < articles.length; i++) { for (var i = 0; i < articles.length; i++) {
words = articles[i].innerText.trim().split(/\s+/).length; words = articles[i].innerText.trim().split(/\s+/).length;
let time = Math.ceil(words / wpm); let time = Math.ceil(words / wpm);
times[i].innerText = `${time} minute read` times[i].innerText = `${time} minute read`;
} }
} }
readingTime() readingTime();
function toggleMenu(button) { function toggleMenu(button) {
if (displayedMenu === button.id.split("-")[0]) { if (displayedMenu === button.id.split("-")[0]) {
button.className = button.className.replace(" text-gray-800 bg-stone-200 sm:bg-transparent", " text-gray-900"); button.className = button.className.replace(
hideMenu(button.id.split("-")[0]); " text-gray-800 bg-stone-200 sm:bg-transparent",
button.lastElementChild.className = button.lastElementChild.className.replace("rotate-0", "-rotate-90") " text-gray-900"
displayedMenu = ""; );
} else { hideMenu(button.id.split("-")[0]);
showMenu(button.id.split("-")[0]); button.lastElementChild.className = button.lastElementChild.className.replace(
button.lastElementChild.className = button.lastElementChild.className.replace("-rotate-90", "rotate-0") "rotate-0",
button.className = button.className.replace(" text-gray-900", " text-gray-800 bg-stone-200 sm:bg-transparent"); "-rotate-90"
displayedMenu = button.id.split("-")[0] );
} displayedMenu = "";
} else {
showMenu(button.id.split("-")[0]);
button.lastElementChild.className = button.lastElementChild.className.replace(
"-rotate-90",
"rotate-0"
);
button.className = button.className.replace(
" text-gray-900",
" text-gray-800 bg-stone-200 sm:bg-transparent"
);
displayedMenu = button.id.split("-")[0];
}
} }
function handleClick(button) { function handleClick(button) {
if (button.id === "hamburger-btn" || button.id === "close-hamburger-btn") { if (button.id === "hamburger-btn" || button.id === "close-hamburger-btn") {
toggleHamburger() toggleHamburger();
} }
if (button.id.indexOf("menu") !== -1) { if (button.id.indexOf("menu") !== -1) {
toggleMenu(button) toggleMenu(button);
} }
} }
function toggleHamburger() { function toggleHamburger() {
if (hamburgerShown) { if (hamburgerShown) {
hideHamburger(); hideHamburger();
hamburgerShown = false; hamburgerShown = false;
} else { } else {
showHamburger(); showHamburger();
hamburgerShown = true; hamburgerShown = true;
} }
} }
function showMenu(menuName) { function showMenu(menuName) {
var menuId = menuName + (isMobile ? '-mobile-menu' : '-menu'); var menuId = menuName + (isMobile ? "-mobile-menu" : "-menu");
var menuBtnId = menuName + (isMobile ? '-mobile-menu' : '-menu'); var menuBtnId = menuName + (isMobile ? "-mobile-menu" : "-menu");
var menuElement = document.getElementById(menuId) var menuElement = document.getElementById(menuId);
menuElement.className = menuElement.className.replace(" hidden", ""); menuElement.className = menuElement.className.replace(" hidden", "");
let children = document.querySelectorAll('.nav_menu') let children = document.querySelectorAll(".nav_menu");
for (let i = 0; i < children.length; i++) { for (let i = 0; i < children.length; i++) {
if (menuElement !== children[i]) { if (menuElement !== children[i]) {
let btnId = `${children[i].id}-btn`; let btnId = `${children[i].id}-btn`;
let btn = document.getElementById(btnId); let btn = document.getElementById(btnId);
if (btn && !children[i].classList.contains('hidden')) { if (btn && !children[i].classList.contains("hidden")) {
children[i].classList.add('hidden') children[i].classList.add("hidden");
btn.lastElementChild.classList.replace("rotate-0", "-rotate-90") btn.lastElementChild.classList.replace("rotate-0", "-rotate-90");
} }
}
} }
setTimeout(function () { }
menuElement.className = menuElement.className.replace("duration-200 ease-in opacity-0 -translate-y-1", "duration-150 ease-out opacity-1 -translate-y-0"); setTimeout(function () {
}, 10); menuElement.className = menuElement.className.replace(
"duration-200 ease-in opacity-0 -translate-y-1",
"duration-150 ease-out opacity-1 -translate-y-0"
);
}, 10);
} }
function hideMenu(menuName) { function hideMenu(menuName) {
var menuId = menuName + (isMobile ? '-mobile-menu' : '-menu'); var menuId = menuName + (isMobile ? "-mobile-menu" : "-menu");
var menuElement = document.getElementById(menuId) var menuElement = document.getElementById(menuId);
menuElement.className = menuElement.className.replace("duration-150 ease-out opacity-1 -translate-y-0", "duration-200 ease-in opacity-0 -translate-y-1"); menuElement.className = menuElement.className.replace(
setTimeout(function () { "duration-150 ease-out opacity-1 -translate-y-0",
menuElement.className = menuElement.className + " hidden" "duration-200 ease-in opacity-0 -translate-y-1"
}, 300); );
setTimeout(function () {
menuElement.className = menuElement.className + " hidden";
}, 300);
} }
function showHamburger() { function showHamburger() {
document.getElementById('header-container').className = "overflow-hidden"; document.getElementById("header-container").className = "overflow-hidden";
document.getElementById('hamburger').className = "fixed mt-16 z-20 top-0 inset-x-0 transition transform origin-top-right"; document.getElementById("hamburger").className =
document.getElementById('hamburger-btn').className = "hidden lg:hidden inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out"; "fixed mt-16 z-20 top-0 inset-x-0 transition transform origin-top-right";
document.getElementById('close-hamburger-btn').className = "inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out"; document.getElementById("hamburger-btn").className =
"hidden lg:hidden inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out";
document.getElementById("close-hamburger-btn").className =
"inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out";
} }
function hideHamburger() { function hideHamburger() {
document.getElementById('header-container').className = ""; document.getElementById("header-container").className = "";
document.getElementById('hamburger').className = "hidden absolute z-20 top-0 inset-x-0 transition transform origin-top-right lg:hidden"; document.getElementById("hamburger").className =
document.getElementById('hamburger-btn').className = "inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out"; "hidden absolute z-20 top-0 inset-x-0 transition transform origin-top-right lg:hidden";
document.getElementById('close-hamburger-btn').className = "hidden lg:hidden inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out"; document.getElementById("hamburger-btn").className =
if (displayedMenu !== "") { "inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out";
hideMenu(displayedMenu); document.getElementById("close-hamburger-btn").className =
} "hidden lg:hidden inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out";
if (displayedMenu !== "") {
hideMenu(displayedMenu);
}
} }
function toggleFilter() { function toggleFilter() {
var filterMenu = document.getElementById("filter-menu") var filterMenu = document.getElementById("filter-menu");
if (filterMenu.className.includes("hidden")) { if (filterMenu.className.includes("hidden")) {
filterMenu.className = filterMenu.className.replace("hidden", " ") filterMenu.className = filterMenu.className.replace("hidden", " ");
} else { } else {
filterMenu.className = filterMenu.className + " hidden" filterMenu.className = filterMenu.className + " hidden";
} }
} }
window.onload = function () { window.onload = function () {
let elements = document.getElementsByTagName("button"); let elements = document.getElementsByTagName("button");
let buttons = [...elements] let buttons = [...elements];
buttons.forEach((button) => { buttons.forEach((button) => {
button.addEventListener('click', function () { button.addEventListener("click", function () {
handleClick(button) handleClick(button);
}); });
}) });
if (document.getElementById("filter-btn")) {
document.getElementById("filter-btn").addEventListener('click', toggleFilter); document
document.getElementById("mobile-learn-btn").addEventListener('click', toggleMenu); .getElementById("filter-btn")
} .addEventListener("click", toggleFilter);
document
.getElementById("mobile-learn-btn")
.addEventListener("click", toggleMenu);
}
};
function openInNewTab(url) { function openInNewTab(url) {
window.open(url, '_blank').focus() window.open(url, "_blank").focus();
} }