|
|
|
|
@@ -1,73 +1,85 @@
|
|
|
|
|
import {MDCRipple} from '@material/ripple';
|
|
|
|
|
import {MDCDrawer} from "@material/drawer";
|
|
|
|
|
import {MDCTopAppBar} from "@material/top-app-bar";
|
|
|
|
|
import {MDCTextField} from '@material/textfield';
|
|
|
|
|
import {MDCList} from '@material/list';
|
|
|
|
|
import {MDCMenu} from '@material/menu';
|
|
|
|
|
import autoInit from '@material/auto-init';
|
|
|
|
|
import { MDCRipple } from "@material/ripple";
|
|
|
|
|
import { MDCDrawer } from "@material/drawer";
|
|
|
|
|
import { MDCTopAppBar } from "@material/top-app-bar";
|
|
|
|
|
import { MDCTextField } from "@material/textfield";
|
|
|
|
|
import { MDCList } from "@material/list";
|
|
|
|
|
import { MDCMenu } from "@material/menu";
|
|
|
|
|
import autoInit from "@material/auto-init";
|
|
|
|
|
|
|
|
|
|
const App = {
|
|
|
|
|
appBar:null,
|
|
|
|
|
drawer:null,
|
|
|
|
|
init: function(){
|
|
|
|
|
autoInit();
|
|
|
|
|
document.querySelectorAll('.mdc-list-item').forEach(function(item){
|
|
|
|
|
new MDCRipple(item);
|
|
|
|
|
});
|
|
|
|
|
document.querySelectorAll('.mdc-button').forEach(function(item){
|
|
|
|
|
new MDCRipple(item);
|
|
|
|
|
});
|
|
|
|
|
document.querySelectorAll('.mdc-list').forEach(function(item){
|
|
|
|
|
new MDCList(item);
|
|
|
|
|
});
|
|
|
|
|
document.querySelectorAll('.mdc-text-field').forEach(function(item){
|
|
|
|
|
new MDCTextField(item);
|
|
|
|
|
});
|
|
|
|
|
appBar: null,
|
|
|
|
|
drawer: null,
|
|
|
|
|
|
|
|
|
|
this.initDrawer();
|
|
|
|
|
init: function () {
|
|
|
|
|
autoInit();
|
|
|
|
|
document.querySelectorAll(".mdc-list-item").forEach(function (item) {
|
|
|
|
|
new MDCRipple(item);
|
|
|
|
|
});
|
|
|
|
|
document.querySelectorAll(".mdc-button").forEach(function (item) {
|
|
|
|
|
new MDCRipple(item);
|
|
|
|
|
});
|
|
|
|
|
document.querySelectorAll(".mdc-list").forEach(function (item) {
|
|
|
|
|
new MDCList(item);
|
|
|
|
|
});
|
|
|
|
|
document.querySelectorAll(".mdc-text-field").forEach(function (item) {
|
|
|
|
|
new MDCTextField(item);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
this.appBar = MDCTopAppBar.attachTo(document.querySelector('#layout-content > header'));
|
|
|
|
|
this.appBar.setScrollTarget(document.querySelector('#layout-content > #layout-main'));
|
|
|
|
|
this.appBar.listen('MDCTopAppBar:nav', () => {
|
|
|
|
|
this.drawer.open = !this.drawer.open;
|
|
|
|
|
});
|
|
|
|
|
//document.querySelectorAll('.mdc-top-app-bar--fixed-adjust').forEach(function(item){
|
|
|
|
|
// item.style.marginTop = this.appBar.;
|
|
|
|
|
//});
|
|
|
|
|
this.initDrawer();
|
|
|
|
|
|
|
|
|
|
const menu = new MDCMenu(document.querySelector('.mdc-menu'));
|
|
|
|
|
document.querySelector('#btn-overflow').addEventListener('click', function(){
|
|
|
|
|
menu.open = true;
|
|
|
|
|
});
|
|
|
|
|
this.appBar = MDCTopAppBar.attachTo(
|
|
|
|
|
document.querySelector("#layout-content > header")
|
|
|
|
|
);
|
|
|
|
|
this.appBar.setScrollTarget(
|
|
|
|
|
document.querySelector("#layout-content > #layout-main")
|
|
|
|
|
);
|
|
|
|
|
this.appBar.listen("MDCTopAppBar:nav", () => {
|
|
|
|
|
this.drawer.open = !this.drawer.open;
|
|
|
|
|
});
|
|
|
|
|
//document.querySelectorAll('.mdc-top-app-bar--fixed-adjust').forEach(function(item){
|
|
|
|
|
// item.style.marginTop = this.appBar.;
|
|
|
|
|
//});
|
|
|
|
|
|
|
|
|
|
console.log('hello world.');
|
|
|
|
|
window.addEventListener('resize', this.initDrawer);
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
initDrawer: function(){
|
|
|
|
|
const drawerElement = document.querySelector('#layout-drawer');
|
|
|
|
|
if (document.body.offsetWidth>600){
|
|
|
|
|
drawerElement.classList.remove('mdc-drawer--modal');
|
|
|
|
|
drawerElement.classList.add('mdc-drawer--dismissible');
|
|
|
|
|
try {
|
|
|
|
|
document.removeChild(document.querySelector('mdc-drawer-scrim'));
|
|
|
|
|
} catch (ex){ }
|
|
|
|
|
const menu = new MDCMenu(document.querySelector(".mdc-menu"));
|
|
|
|
|
document
|
|
|
|
|
.querySelector("#btn-overflow")
|
|
|
|
|
.addEventListener("click", function () {
|
|
|
|
|
menu.open = true;
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
drawerElement.classList.add('mdc-drawer--modal');
|
|
|
|
|
drawerElement.classList.remove('mdc-drawer--dismissible');
|
|
|
|
|
const scrimElement = document.createElement('div');
|
|
|
|
|
scrimElement.classList.add('mdc-drawer-scrim');
|
|
|
|
|
drawerElement.parentNode.insertBefore(scrimElement, drawerElement.nextSibling);
|
|
|
|
|
}
|
|
|
|
|
//this.initEditor();
|
|
|
|
|
//this.initHighlightJs();
|
|
|
|
|
|
|
|
|
|
this.drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));
|
|
|
|
|
if (document.body.offsetWidth>600) {
|
|
|
|
|
this.drawer.open = true;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
console.log("hello world.");
|
|
|
|
|
window.addEventListener("resize", this.initDrawer);
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
initDrawer: function () {
|
|
|
|
|
const drawerElement = document.querySelector("#layout-drawer");
|
|
|
|
|
if (document.body.offsetWidth > 600) {
|
|
|
|
|
drawerElement.classList.remove("mdc-drawer--modal");
|
|
|
|
|
drawerElement.classList.add("mdc-drawer--dismissible");
|
|
|
|
|
try {
|
|
|
|
|
document.removeChild(document.querySelector("mdc-drawer-scrim"));
|
|
|
|
|
} catch (ex) {}
|
|
|
|
|
} else {
|
|
|
|
|
drawerElement.classList.add("mdc-drawer--modal");
|
|
|
|
|
drawerElement.classList.remove("mdc-drawer--dismissible");
|
|
|
|
|
const scrimElement = document.createElement("div");
|
|
|
|
|
scrimElement.classList.add("mdc-drawer-scrim");
|
|
|
|
|
drawerElement.parentNode.insertBefore(
|
|
|
|
|
scrimElement,
|
|
|
|
|
drawerElement.nextSibling
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
this.drawer = MDCDrawer.attachTo(document.querySelector(".mdc-drawer"));
|
|
|
|
|
if (document.body.offsetWidth > 600) {
|
|
|
|
|
this.drawer.open = true;
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
window.addEventListener('DOMContentLoaded', (event) => {
|
|
|
|
|
App.init();
|
|
|
|
|
});
|
|
|
|
|
window.addEventListener("DOMContentLoaded", (event) => {
|
|
|
|
|
App.init();
|
|
|
|
|
});
|
|
|
|
|
|