Hopiu/vue-material
1
0
Fork 0
mirror of https://github.com/Hopiu/vue-material.git synced 2026-05-18 20:21:07 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add backdrop to md-menu

Browse source
This commit is contained in:
Marcos Moura 2016-11-17 00:15:55 -02:00
parent 7ce7f35cbd
commit e065ad65ac
2 changed files with 26 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/components/mdBackdrop/mdBackdrop.scss
View file

@ -17,4 +17,8 @@
opacity: 1;
pointer-events: auto;
}
&.md-transparent {
background: none;
}
}

43
src/components/mdMenu/mdMenu.vue
View file

@ -1,6 +1,8 @@
<template>
<div class="md-menu">
<slot></slot>
<md-backdrop class="md-menu-backdrop md-transparent md-active" ref="backdrop" @close="close"></md-backdrop>
</div>
</template>
@ -68,11 +70,6 @@
addNewDirectionMenuContentClass(direction) {
this.menuContent.classList.add('md-direction-' + direction.replace(' ', '-'));
},
closeOnOffClick(event) {
if (!this.$el.contains(event.target) && !this.menuContent.contains(event.target)) {
this.close();
}
},
isAboveOfViewport(pos) {
return pos.top <= this.browserMargin - parseInt(getComputedStyle(this.menuContent).marginTop, 10);
},
@ -180,12 +177,12 @@
window.requestAnimationFrame(this.calculateMenuContentPos);
},
open() {
if (this.$root.$el.contains(this.menuContent)) {
this.$root.$el.removeChild(this.menuContent);
if (this.rootElement.contains(this.menuContent)) {
this.rootElement.removeChild(this.menuContent);
}
this.$root.$el.appendChild(this.menuContent);
document.addEventListener('click', this.closeOnOffClick);
this.rootElement.appendChild(this.menuContent);
this.rootElement.appendChild(this.backdropElement);
window.addEventListener('resize', this.recalculateOnResize);
this.calculateMenuContentPos();
@ -196,12 +193,11 @@
this.active = true;
},
close() {
let menuContent = this.menuContent;
let close = (event) => {
if (menuContent && event.target === menuContent) {
if (this.menuContent && event.target === this.menuContent) {
let activeRipple = this.menuContent.querySelector('.md-ripple.md-active');
menuContent.removeEventListener(transitionEndEventName, close);
this.menuContent.removeEventListener(transitionEndEventName, close);
this.menuTrigger.focus();
this.active = false;
@ -209,8 +205,8 @@
activeRipple.classList.remove('md-active');
}
this.$root.$el.removeChild(menuContent);
document.removeEventListener('click', this.closeOnOffClick);
this.rootElement.removeChild(this.menuContent);
this.rootElement.removeChild(this.backdropElement);
window.removeEventListener('resize', this.recalculateOnResize);
}
};
@ -227,13 +223,18 @@
}
},
mounted() {
this.menuTrigger = this.$el.querySelector('[md-menu-trigger]');
this.menuContent = this.$el.querySelector('.md-menu-content');
this.validateMenu();
this.addNewSizeMenuContentClass(this.mdSize);
this.addNewDirectionMenuContentClass(this.mdDirection);
this.menuContent.parentNode.removeChild(this.menuContent);
this.menuTrigger.addEventListener('click', this.toggle);
this.$nextTick(() => {
this.rootElement = this.$root.$el;
this.menuTrigger = this.$el.querySelector('[md-menu-trigger]');
this.menuContent = this.$el.querySelector('.md-menu-content');
this.backdropElement = this.$refs.backdrop.$el;
this.validateMenu();
this.addNewSizeMenuContentClass(this.mdSize);
this.addNewDirectionMenuContentClass(this.mdDirection);
this.$el.removeChild(this.$refs.backdrop.$el);
this.menuContent.parentNode.removeChild(this.menuContent);
this.menuTrigger.addEventListener('click', this.toggle);
});
}
};
</script>