Tidying up the sidenav JS and styles
Matt Gaunt
parent
026ee7b54e
commit
4f37befa02
|
|
@ -40,6 +40,8 @@
|
|||
|
||||
<iframe src="./styleguide/palette/demo.html" scrolling="no"></iframe>
|
||||
|
||||
<iframe src="./styleguide/sidenav/demo.html" scrolling="no"></iframe>
|
||||
|
||||
<!-- Script to handle sizing the iFrames -->
|
||||
<script>
|
||||
sizeIframes();
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ $sidenav-width: 240px;
|
|||
z-index: 2;
|
||||
}
|
||||
|
||||
.sidenav-nav {
|
||||
.sidenav-container {
|
||||
display: block;
|
||||
width: $sidenav-width;
|
||||
height: 100%;
|
||||
|
|
@ -51,7 +51,7 @@ $sidenav-width: 240px;
|
|||
z-index: 4;
|
||||
}
|
||||
|
||||
.sidenav-nav.visible {
|
||||
.sidenav-container.visible {
|
||||
transform: translateX(0px);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -7,10 +7,9 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Side Nav</title>
|
||||
|
||||
<link rel="stylesheet" href="demo.css">
|
||||
|
||||
<link href='//fonts.googleapis.com/css?family=RobotoDraft:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en' rel='stylesheet' type='text/css'>
|
||||
|
||||
<link rel="stylesheet" href="demo.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
|
@ -18,9 +17,9 @@
|
|||
<button class="sidenav-button">Show navigation</button>
|
||||
</div>
|
||||
|
||||
<div class="sidenav-nav">
|
||||
<div class="log">WSK</div>
|
||||
<nav>
|
||||
<div class="sidenav-container">
|
||||
<h1 class="logo">Web <strong>Starter Kit</strong></h1>
|
||||
<nav class="sidenav-nav">
|
||||
<ul>
|
||||
<li>Hello</li>
|
||||
<li>World.</li>
|
||||
|
|
@ -31,6 +30,8 @@
|
|||
</nav>
|
||||
</div>
|
||||
|
||||
<h1>Side Nav</h1>
|
||||
|
||||
<div class="sidenav-modal-bg"></div>
|
||||
|
||||
<script src="sidenav.js"></script>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,37 @@
|
|||
@import "../styleguide_demo_bp";
|
||||
@import 'sidenav';
|
||||
|
||||
$vertical-padding: 16px;
|
||||
$horizontal-padding: 24px;
|
||||
$sidenav-item-border-color: #e0e0e0;
|
||||
|
||||
body {
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
padding: 73px 16px 0px 16px;
|
||||
}
|
||||
|
||||
.sidenav-container .logo {
|
||||
font-size: 24px;
|
||||
padding: 18px $horizontal-padding 18px $horizontal-padding;
|
||||
|
||||
border-bottom: 1px solid $sidenav-item-border-color;
|
||||
}
|
||||
|
||||
.sidenav-container ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
list-style-type: none;
|
||||
|
||||
li {
|
||||
padding: $vertical-padding $horizontal-padding;
|
||||
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,15 +1,103 @@
|
|||
var menuButton = document.querySelector('button.sidenav-button');
|
||||
var sidenav = document.querySelector('.sidenav-nav');
|
||||
var modalBg = document.querySelector('.sidenav-modal-bg');
|
||||
'use strict';
|
||||
|
||||
menuButton.addEventListener('click', function(evt) {
|
||||
sidenav.classList.add('visible');
|
||||
(function() {
|
||||
/**
|
||||
* SideNav Prototype Start
|
||||
*/
|
||||
function SideNav(sidenavElement) {
|
||||
this.STATE_OPEN = 0;
|
||||
this.STATE_CLOSE = 1;
|
||||
|
||||
modalBg.classList.add('visible');
|
||||
});
|
||||
var isAnimating = false;
|
||||
var currentState = null;
|
||||
|
||||
modalBg.addEventListener('click', function(evt) {
|
||||
sidenav.classList.remove('visible');
|
||||
this.changeState = function(newState) {
|
||||
if (isAnimating) {
|
||||
// If we are animating, wait until the animation is complete
|
||||
return;
|
||||
}
|
||||
|
||||
modalBg.classList.remove('visible');
|
||||
});
|
||||
switch (newState) {
|
||||
case this.STATE_OPEN:
|
||||
sidenavElement.classList.add('visible');
|
||||
this.sendEvent('onSideNavOpen');
|
||||
break;
|
||||
case this.STATE_CLOSE:
|
||||
sidenavElement.classList.remove('visible');
|
||||
this.sendEvent('onSideNavClose');
|
||||
break;
|
||||
}
|
||||
|
||||
currentState = newState;
|
||||
};
|
||||
|
||||
this.isOpen = function() {
|
||||
return currentState === this.STATE_OPEN;
|
||||
};
|
||||
|
||||
this.sendEvent = function(evtName, data) {
|
||||
var evt = document.createEvent('Event');
|
||||
evt.initEvent(evtName, true, true);
|
||||
if (!!data) {
|
||||
evt.data = data;
|
||||
}
|
||||
sidenavElement.dispatchEvent(evt);
|
||||
};
|
||||
|
||||
this.addEventListener = function(eventName, cb) {
|
||||
sidenavElement.addEventListener(eventName, cb);
|
||||
};
|
||||
}
|
||||
|
||||
SideNav.prototype.open = function() {
|
||||
this.changeState(this.STATE_OPEN);
|
||||
};
|
||||
|
||||
SideNav.prototype.close = function() {
|
||||
this.changeState(this.STATE_CLOSE);
|
||||
};
|
||||
|
||||
SideNav.prototype.toggle = function() {
|
||||
if (this.isOpen()) {
|
||||
this.close();
|
||||
} else {
|
||||
this.open();
|
||||
}
|
||||
};
|
||||
/**
|
||||
* SideNav Prototype End
|
||||
*/
|
||||
|
||||
window.addEventListener('load', function() {
|
||||
var modalBg = document.querySelector('.sidenav-modal-bg');
|
||||
var sidenavs = document.querySelectorAll('.sidenav-container');
|
||||
var sidenav = new SideNav(sidenavs[0]);
|
||||
|
||||
sidenav.addEventListener('onSideNavOpen', function() {
|
||||
if (!modalBg) {
|
||||
// No modal dialog - nothing to do
|
||||
return;
|
||||
}
|
||||
|
||||
modalBg.classList.add('visible');
|
||||
});
|
||||
|
||||
sidenav.addEventListener('onSideNavClose', function() {
|
||||
if (!modalBg) {
|
||||
// No modal dialog - nothing to do
|
||||
return;
|
||||
}
|
||||
|
||||
modalBg.classList.remove('visible');
|
||||
});
|
||||
|
||||
modalBg.addEventListener('click', function(evt) {
|
||||
sidenav.close();
|
||||
});
|
||||
|
||||
var menuButton = document.querySelector('button.sidenav-button');
|
||||
menuButton.addEventListener('click', function(evt) {
|
||||
sidenav.toggle();
|
||||
});
|
||||
});
|
||||
})();
|
||||
|
|
|
|||
Loading…
Reference in New Issue