Refactor sidebar logic + Add Table of Contents in reading page (#33)
* Refactor sidebar logic + fix responsiveness * Add TOC * Add Pagination * Update exampleSite * Update README.md
This commit is contained in:
Md. Emruz Hossain
GitHub
parent
647578e88b
commit
fa4d474974
59 changed files with 1735 additions and 679 deletions
|
|
@ -43,30 +43,6 @@ var projectCards;
|
|||
}
|
||||
}
|
||||
|
||||
// ================= Smooth Scroll ===================
|
||||
// Add smooth scrolling to all links
|
||||
$("a").on('click', function (event) {
|
||||
|
||||
// Make sure this.hash has a value before overriding default behavior
|
||||
if (this.hash !== "") {
|
||||
// Prevent default anchor click behavior
|
||||
event.preventDefault();
|
||||
|
||||
// Store hash
|
||||
var hash = this.hash;
|
||||
|
||||
// Using jQuery's animate() method to add smooth page scroll
|
||||
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
|
||||
$('html, body').animate({
|
||||
scrollTop: $(hash).offset().top
|
||||
}, 800, function () {
|
||||
|
||||
// Add hash (#) to URL when done scrolling (default click behavior)
|
||||
window.location.hash = hash;
|
||||
});
|
||||
} // End if
|
||||
});
|
||||
|
||||
// ============== Fix Timelines Horizontal Lines =========
|
||||
var hLines = document.getElementsByClassName("horizontal-line");
|
||||
for (let i = 0; i < hLines.length; i++) {
|
||||
|
|
@ -263,14 +239,14 @@ var projectCards;
|
|||
}
|
||||
function twoColumnRow(gallery, entries, i) {
|
||||
let entry1 = document.createElement("div");
|
||||
entry1.classList.add("col-lg-6", "col-md-6", "m-0", "p-0");
|
||||
entry1.classList.add("col-6", "m-0", "p-0");
|
||||
entry1.appendChild(entries[i].cloneNode(true));
|
||||
entry1.children[0].classList.add("img-type-1");
|
||||
gallery.appendChild(entry1);
|
||||
i++;
|
||||
|
||||
let entry2 = document.createElement("div");
|
||||
entry2.classList.add("col-lg-6", "col-md-6", "m-0", "p-0");
|
||||
entry2.classList.add("col-6", "m-0", "p-0");
|
||||
entry2.appendChild(entries[i].cloneNode(true));
|
||||
entry2.children[0].classList.add("img-type-1");
|
||||
gallery.appendChild(entry2);
|
||||
|
|
@ -279,7 +255,7 @@ var projectCards;
|
|||
|
||||
function singleColumnRow(gallery, entries, i) {
|
||||
let entry1 = document.createElement("div");
|
||||
entry1.classList.add("col-lg-6", "col-md-6", "m-0", "p-0");
|
||||
entry1.classList.add("col-12", "m-0", "p-0");
|
||||
entry1.appendChild(entries[i].cloneNode(true));
|
||||
entry1.children[0].classList.add("img-type-1");
|
||||
gallery.appendChild(entry1);
|
||||
|
|
|
|||
|
|
@ -1,7 +1,5 @@
|
|||
"use strict";
|
||||
|
||||
var filterizd;
|
||||
|
||||
var isMobile = false, isTablet = false, isLaptop = false;
|
||||
(function ($) {
|
||||
jQuery(document).ready(function () {
|
||||
|
|
@ -25,7 +23,7 @@ var isMobile = false, isTablet = false, isLaptop = false;
|
|||
// ======= Adjust height of the post cards =============
|
||||
function adjustPostCardsHeight() {
|
||||
if (!isMobile) { // no need to adjust height for mobile devices
|
||||
let postCardHolder = document.getElementById("post-cards");
|
||||
let postCardHolder = document.getElementById("post-card-holder");
|
||||
if (postCardHolder == null ){
|
||||
return
|
||||
}
|
||||
|
|
@ -42,69 +40,5 @@ var isMobile = false, isTablet = false, isLaptop = false;
|
|||
}
|
||||
}
|
||||
adjustPostCardsHeight();
|
||||
|
||||
// ============= Sidebar Tree ================
|
||||
function buildSidebarMenu() {
|
||||
var openedClass = "fa-minus-circle";
|
||||
var closedClass = "fa-plus-circle";
|
||||
// initialize top level
|
||||
var tree = $("#tree");
|
||||
// add expand icon to those li who has ul as children
|
||||
tree.find("li").has("ul").each(function () {
|
||||
var branch = $(this);
|
||||
branch.prepend('<i class="fas ' + closedClass + '"></i>');
|
||||
branch.on('click', function (e) {
|
||||
if (this.children[1] == e.target) {
|
||||
// toggle "expand" class and icon
|
||||
branch.toggleClass("expand");
|
||||
var icon = $(this).children('i:first');
|
||||
icon.toggleClass(openedClass + " " + closedClass);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// remove "expnad" class from siblings of the clicked item
|
||||
tree.find("li").on("click", function () {
|
||||
var item = $(this);
|
||||
var shiblings = item.siblings().each(function () {
|
||||
var sibling = $(this);
|
||||
if (sibling.hasClass("expand")) {
|
||||
sibling.removeClass("expand");
|
||||
var icon = sibling.children('i:first');
|
||||
icon.toggleClass(openedClass + " " + closedClass);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// focus the cliked item
|
||||
tree.find("a").on("click", function () {
|
||||
// clear other focused link
|
||||
tree.find("a.focused").each(function () {
|
||||
$(this).removeClass("focused");
|
||||
});
|
||||
// focus cliked link
|
||||
$(this).addClass("focused");
|
||||
});
|
||||
}
|
||||
|
||||
buildSidebarMenu();
|
||||
// initialize filterizr
|
||||
filterizd = $(".filtr-container").filterizr({ layout: 'sameWidth' });
|
||||
});
|
||||
})(jQuery);
|
||||
|
||||
// toggle sidebar on click
|
||||
function toggleSidebar() {
|
||||
document.getElementById("sidebar").classList.toggle("hide");
|
||||
document.getElementById("content").classList.toggle("overley");
|
||||
|
||||
// if it is mobile device. then scroll to top.
|
||||
if (isMobile && $("#sidebar").hasClass("hide")) {
|
||||
document.body.scrollTop = 0;
|
||||
document.documentElement.scrollTop = 0;
|
||||
}
|
||||
|
||||
setTimeout(function () {
|
||||
filterizd.filterizr('sort');
|
||||
}, 300);
|
||||
}
|
||||
|
|
|
|||
122
static/assets/js/main.js
Normal file
122
static/assets/js/main.js
Normal file
|
|
@ -0,0 +1,122 @@
|
|||
"use strict";
|
||||
|
||||
var projectCards;
|
||||
var isMobile = false, isTablet = false, isLaptop = false;
|
||||
(function ($) {
|
||||
jQuery(document).ready(function () {
|
||||
function detectDevice() {
|
||||
if (window.innerWidth <= 425) {
|
||||
isMobile = true;
|
||||
isTablet = false;
|
||||
isLaptop = false;
|
||||
} else if (window.innerWidth <= 768) {
|
||||
isMobile = false;
|
||||
isTablet = true;
|
||||
isLaptop = false;
|
||||
} else {
|
||||
isMobile = false;
|
||||
isTablet = false;
|
||||
isLaptop = true;
|
||||
}
|
||||
}
|
||||
detectDevice();
|
||||
|
||||
// ================= Smooth Scroll ===================
|
||||
function addSmoothScroll() {
|
||||
// Add smooth scrolling to all links
|
||||
$("a").on('click', function (event) {
|
||||
|
||||
// Make sure this.hash has a value before overriding default behavior
|
||||
if (this.hash !== "") {
|
||||
// Prevent default anchor click behavior
|
||||
event.preventDefault();
|
||||
|
||||
// Store hash
|
||||
var hash = this.hash;
|
||||
|
||||
let offset = 60;
|
||||
if (isMobile) {
|
||||
offset = 760;
|
||||
} else if (isTablet) {
|
||||
offset = 60;
|
||||
}
|
||||
// Using jQuery's animate() method to add smooth page scroll
|
||||
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
|
||||
$('html, body').animate({
|
||||
scrollTop: $(hash).offset().top - offset
|
||||
}, 800, function () {
|
||||
|
||||
// Add hash (#) to URL when done scrolling (default click behavior)
|
||||
window.location.hash = hash - offset;
|
||||
});
|
||||
} // End if
|
||||
});
|
||||
}
|
||||
addSmoothScroll();
|
||||
|
||||
// re-render custom functions on window resize
|
||||
window.onresize = function () {
|
||||
detectDevice();
|
||||
addSmoothScroll();
|
||||
};
|
||||
});
|
||||
})(jQuery);
|
||||
|
||||
|
||||
// Toggle sidebar on click. Here, class "hide" open the sidebar
|
||||
function toggleSidebar() {
|
||||
let sidebar = document.getElementById("sidebar-section");
|
||||
if (sidebar == null) {
|
||||
return
|
||||
}
|
||||
if (sidebar.classList.contains("hide")) {
|
||||
sidebar.classList.remove("hide")
|
||||
} else {
|
||||
// if toc-section is open, then close it first
|
||||
let toc = document.getElementById("toc-section");
|
||||
if (toc != null && toc.classList.contains("hide")) {
|
||||
toc.classList.remove("hide");
|
||||
}
|
||||
// add "hide" class
|
||||
sidebar.classList.add("hide")
|
||||
// if it is mobile device. then scroll to top.
|
||||
if (isMobile && sidebar.classList.contains("hide")) {
|
||||
document.body.scrollTop = 0;
|
||||
document.documentElement.scrollTop = 0;
|
||||
if (document.getElementById("hero-area") != null) {
|
||||
document.getElementById("hero-area").classList.toggle("hide");
|
||||
}
|
||||
}
|
||||
}
|
||||
if (document.getElementById("content-section") != null) {
|
||||
document.getElementById("content-section").classList.toggle("hide");
|
||||
}
|
||||
}
|
||||
|
||||
// Toggle Table of Contents on click. Here, class "hide" open the toc
|
||||
function toggleTOC() {
|
||||
let toc = document.getElementById("toc-section");
|
||||
if (toc == null) {
|
||||
return
|
||||
}
|
||||
if (toc.classList.contains("hide")) {
|
||||
toc.classList.remove("hide");
|
||||
} else {
|
||||
// if sidebar-section is open, then close it first
|
||||
let sidebar = document.getElementById("sidebar-section");
|
||||
if (sidebar != null && sidebar.classList.contains("hide")) {
|
||||
sidebar.classList.remove("hide");
|
||||
}
|
||||
// add "hide" class
|
||||
toc.classList.add("hide")
|
||||
// if it is mobile device. then scroll to top.
|
||||
if (isMobile && toc.classList.contains("hide")) {
|
||||
document.body.scrollTop = 0;
|
||||
document.documentElement.scrollTop = 0;
|
||||
}
|
||||
}
|
||||
if (document.getElementById("hero-area") != null) {
|
||||
document.getElementById("hero-area").classList.toggle("hide");
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -36,5 +36,28 @@ var isMobile = false, isTablet = false, isLaptop = false;
|
|||
}
|
||||
}
|
||||
|
||||
// =============== Make TOC Compatible wit Bootstrap Scroll Spy ========
|
||||
// add "navbar" class to the "nav" element
|
||||
let toc = document.getElementById("TableOfContents");
|
||||
toc.classList.add("navbar");
|
||||
// add "nav-pills" class to the "ul" elements
|
||||
let elems = toc.getElementsByTagName("ul");
|
||||
for (let i = 0; i < elems.length; i++) {
|
||||
elems[i].classList.add("nav-pills");
|
||||
}
|
||||
// add "nav-item" class to the "li" elements
|
||||
elems = toc.getElementsByTagName("li");
|
||||
for (let i = 0; i < elems.length; i++) {
|
||||
elems[i].classList.add("nav-item");
|
||||
if (isMobile) {
|
||||
elems[i].setAttribute("onclick", "toggleTOC()");
|
||||
}
|
||||
}
|
||||
// add "nav-link" class to the "a" elements
|
||||
elems = toc.getElementsByTagName("a");
|
||||
for (let i = 0; i < elems.length; i++) {
|
||||
elems[i].classList.add("nav-link");
|
||||
}
|
||||
|
||||
});
|
||||
})(jQuery);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue