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");
});
});

17
luhn-algorithm/index.html
View File

@@ -48,14 +48,7 @@
<div class="mdc-drawer-scrim"></div>
<div class="mdc-drawer-app-content">
<header class="mdc-top-app-bar app-bar" id="app-bar">
<div class="mdc-top-app-bar__row">
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
<a href="javascript:void(0);" class="demo-mensu material-icons mdc-top-app-bar__navigation-icon">menu</a>
<span class="mdc-top-app-bar__title">Luhn Algorithm</span>
</section>
</div>
</header>
<header class="mdc-top-app-bar app-bar" id="app-bar"></header>
<main class="main-content" id="main-content">
<div class="mdc-top-app-bar--fixed-adjust">
@@ -72,11 +65,11 @@
</div>
<div class="mdc-notched-outline__idle"></div>
</div>
<!-- input field helper text -->
<p class="mdc-text-field-helper-text" aria-hidden="true">
Validate with the Luhn Algorithm
</p>
</div>
<!-- input field helper text -->
<p class="mdc-text-field-helper-text" aria-hidden="true">
Validate with the Luhn Algorithm
</p>
<!-- button to submit & check number with Luhn algorithm -->
<button class="validation_button mdc-button mdc-button--outlined" onclick="checkNumber()" data-mdc-auto-init="MDCRipple">
<i class="material-icons mdc-button__icon">check_circle_outline</i>

2
luhn-algorithm/script.js
View File

@@ -1,5 +1,3 @@
window.activated_drawer_item_link = "/luhn-algorithm";
document.addEventListener("keyup", function(event) {
// stop any code that may normally run when enter key pressed
event.preventDefault();

6
page-inserts/top-app-bar.html Normal file
View File

@@ -0,0 +1,6 @@
<div class="mdc-top-app-bar__row">
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
<a href="javascript:void(0);" class="demo-mensu material-icons mdc-top-app-bar__navigation-icon">menu</a>
<span class="mdc-top-app-bar__title">Luhn Algorithm</span>
</section>
</div>