MontoyaTech/ignite-html-material
MontoyaTech/ignite-html-material
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Drawer is now responsive and mobile friendly.

Browse Source
This commit is contained in:
Matt Mo 2020-12-08 11:18:51 -08:00
parent fd7d647000
commit 80a8d2a8f8
1 changed files with 115 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

123
drawer.js
View File

@ -1,5 +1,6 @@
import { IgniteElement } from "../ignite-html/ignite-element.js";
import { IgniteTemplate, div, h1, slot, button } from "../ignite-html/ignite-template.js";
import { IgniteProperty } from "../ignite-html/ignite-html.js";
class Drawer extends IgniteElement {
constructor() {
@ -41,21 +42,73 @@ class Drawer extends IgniteElement {
width: 100vw;
}
mt-drawer > div.show {
mt-drawer > div {
display: flex;
flex-direction: column;
}
mt-drawer > div {
mt-drawer > div.mobile {
display: none;
position: absolute;
z-index: 999999;
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}
mt-drawer > .open-btn {
position: absolute;
z-index: 999999;
width: 2.5em;
height: 2.5em;
font-size: 1.2em;
background-color: white;
border: none;
outline: none !important;
left: 1em;
bottom: 1em;
box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
border-radius: 100%;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
mt-drawer > div > .close-btn {
position: absolute;
z-index: 999999;
width: 2.5em;
height: 2.5em;
font-size: 1.2em;
background-color: white;
border: none;
outline: none !important;
right: -3em;
top: 0.5em;
box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
border-radius: 100%;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
`;
}
get properties() {
return {
show: true,
responsiveClasses: "d-none d-md-flex",
show: false,
responsive: new IgniteProperty(true, (oldValue, value) => {
//If responsive is false and mobile is true, set mobile to false.
if (!value && this.mobile) {
this.mobile = false;
}
this.update(); //If responsive is changed we must update.
}),
breakpoint: new IgniteProperty(768, () => {
this.update(); //If responsive is changed we must update.
}),
mobile: false,
position: "left",
width: "20em",
height: null,
@ -64,21 +117,75 @@ class Drawer extends IgniteElement {
};
}
init() {
this.resizeListener = () => this.update();
window.addEventListener("resize", this.resizeListener);
this.pushStateListener = () => this.onRouteChange();
this.popStateListener = () => this.onRouteChange();
window.addEventListener("popstate", this.popStateListener);
window.addEventListener("pushstate", this.pushStateListener);
//Run the first update
this.update();
}
render() {
return this.template
.child(
new button()
.class("open-btn")
.show([this.mobile, this.show], (mobile, show) => mobile && !show)
.onClick(() => this.show = true)
.child("<i class='fas fa-chevron-right'></i>"),
new div()
.class(this.responsiveClasses)
.class(this.show, (value) => { return value ? "show" : null })
.class(this.absolute, (value) => { return value ? "absolute" : null })
.class(this.absolute, value => value ? "absolute" : null)
.class(this.mobile, value => value ? "mobile" : null)
.class(this.position)
.style("width", this.width)
.style("height", this.height)
.style("padding", this.padding)
.child(new button().class("btn btn-none").child("<i class='fas fa-chevron-left'></i>"))
.style("display", this.show, true, value => value ? "flex" : null)
.child(
new button()
.class("close-btn")
.show([this.mobile, this.show], (mobile, show) => mobile && show)
.onClick(() => this.show = false)
.child("<i class='fas fa-chevron-left'></i>")
)
.child(new slot(this))
);
}
ready() {
//Make sure we update in case responsive is changed.
this.update();
}
update() {
if (this.responsive) {
if (window.innerWidth <= this.breakpoint && !this.mobile) {
this.mobile = true;
} else if (window.innerWidth > this.breakpoint && this.mobile) {
this.mobile = false;
}
}
}
onRouteChange() {
//If a route changed and we are mobile and being shown, hide ourself.
if (this.mobile && this.show) {
this.show = false;
}
}
cleanup() {
window.removeEventListener("resize", this.resizeListener);
window.removeEventListener("popstate", this.popStateListener);
window.removeEventListener("pushstate", this.pushStateListener);
}
}
class DrawerTemplate extends IgniteTemplate {