me/portfolio
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Simplify dynamic navbar styling & include top app bar via jQuery

Browse Source 
Remove the need to specify the current URL in order to style the 
selected item in the navbar
This commit is contained in:
Matthew Grove
2018-11-14 17:17:34 +00:00
parent 28f9ee6f99
commit 8db49a24a3
4 changed files with 37 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
assets/global.js
View File

@@ -4,23 +4,32 @@ $(document).ready(function(){
// initiate MDC drawer
const drawer = new mdc.drawer.MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));
// initiate MDC top app bar
const mdc_top_app_bar = new mdc.topAppBar.MDCTopAppBar.attachTo(document.querySelector('.mdc-top-app-bar'));
mdc_top_app_bar.setScrollTarget(document.getElementById('main-content'));
mdc_top_app_bar.listen('MDCTopAppBar:nav', () => {
drawer.open = !drawer.open;
// include top app bar
$(".mdc-top-app-bar").load("/page-inserts/top-app-bar.html", function(){
// initiate MDC top app bar
const mdc_top_app_bar = new mdc.topAppBar.MDCTopAppBar.attachTo(document.querySelector('.mdc-top-app-bar'));
mdc_top_app_bar.setScrollTarget(document.getElementById('main-content'));
mdc_top_app_bar.listen('MDCTopAppBar:nav', () => {
drawer.open = !drawer.open;
});
// include source code link
$(".source-code-link").load("/page-inserts/source-code-link.html");
// initiate MDC items
mdc.autoInit();
// get current URL with no forward slash at the end and no domain
var drawer_item_link_query_selector = ".mdc-list-item[href='" + window.location.pathname;
if (drawer_item_link_query_selector.substring(drawer_item_link_query_selector.length - 1) == "/") {
drawer_item_link_query_selector = drawer_item_link_query_selector.substring(0,drawer_item_link_query_selector.length - 1);
}
// give 'seleted' styling to correct item on navbar
$(drawer_item_link_query_selector + "']").addClass("mdc-list-item--activated");
$(drawer_item_link_query_selector + "']").attr("aria-selected", "true");
$(drawer_item_link_query_selector + "/']").addClass("mdc-list-item--activated");
$(drawer_item_link_query_selector + "/']").attr("aria-selected", "true");
});
// include source code link
$(".source-code-link").load("/page-inserts/source-code-link.html");
// initiate MDC items
mdc.autoInit();
var drawer_item_link_query_selector = ".mdc-list-item[href='" + window.activated_drawer_item_link;
$(drawer_item_link_query_selector + "']").addClass("mdc-list-item--activated");
$(drawer_item_link_query_selector + "']").attr("aria-selected", "true");
$(drawer_item_link_query_selector + "/']").addClass("mdc-list-item--activated");
$(drawer_item_link_query_selector + "/']").attr("aria-selected", "true");
});
});