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

prevent body from scroll on dialogs and menus #373

Browse source
This commit is contained in:
Marcos Moura 2017-01-23 19:50:13 -02:00
parent 4bbe83b6ad
commit ced5c90153
5 changed files with 24 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
src/components/mdDialog/mdDialog.vue
View file

@ -62,7 +62,7 @@
},
methods: {
removeDialog() {
if (this.rootElement.contains(this.dialogElement)) {
if (document.body.contains(this.dialogElement)) {
this.$el.parentNode.removeChild(this.$el);
}
},
@ -91,7 +91,7 @@
}
},
open() {
this.rootElement.appendChild(this.dialogElement);
document.body.appendChild(this.dialogElement);
this.transitionOff = true;
this.calculateDialogPos(this.mdOpenFrom);
@ -109,7 +109,7 @@
}
},
close() {
if (this.rootElement.contains(this.dialogElement)) {
if (document.body.contains(this.dialogElement)) {
this.$nextTick(() => {
let cleanElement = () => {
let activeRipple = this.dialogElement.querySelector('.md-ripple.md-active');
@ -119,7 +119,7 @@
}
this.dialogInnerElement.removeEventListener(transitionEndEventName, cleanElement);
this.rootElement.removeChild(this.dialogElement);
document.body.removeChild(this.dialogElement);
this.dialogTransform = '';
};
@ -140,7 +140,6 @@
},
mounted() {
this.$nextTick(() => {
this.rootElement = this.$root.$el;
this.dialogElement = this.$el;
this.dialogInnerElement = this.$refs.dialog;
this.removeDialog();

14
src/components/mdMenu/mdMenu.scss
View file

@ -21,9 +21,9 @@ $menu-base-width: 56px;
box-shadow: $material-shadow-2dp;
opacity: 0;
transition: width $swift-ease-out-duration $swift-ease-out-timing-function,
opacity .25s $swift-ease-in-timing-function,
margin .2s $swift-ease-in-timing-function,
transform 0s .25s $swift-ease-in-timing-function;
opacity .3s $swift-ease-in-timing-function,
margin .3s $swift-ease-in-timing-function,
transform 0s .4s $swift-ease-in-timing-function;
will-change: transform, opacity, width;
&.md-direction-bottom-right {
@ -85,18 +85,18 @@ $menu-base-width: 56px;
opacity: 1;
transform: scale(1) translateZ(0);
transition: width $swift-ease-out-duration $swift-ease-out-timing-function,
opacity .35s $swift-ease-out-timing-function,
transform .25s .05s $swift-ease-out-timing-function;
opacity .4s $swift-ease-out-timing-function,
transform .3s $swift-ease-out-timing-function;
.md-list {
opacity: 1;
transition: opacity .2s .15s $swift-ease-out-timing-function;
transition: opacity .3s $swift-ease-out-timing-function;
}
}
.md-list {
opacity: 0;
transition: opacity .2s $swift-ease-out-timing-function;
transition: opacity .3s $swift-ease-out-timing-function;
}
}

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

@ -130,12 +130,12 @@
window.requestAnimationFrame(this.calculateMenuContentPos);
},
open() {
if (this.rootElement.contains(this.menuContent)) {
this.rootElement.removeChild(this.menuContent);
if (document.body.contains(this.menuContent)) {
document.body.removeChild(this.menuContent);
}
this.rootElement.appendChild(this.menuContent);
this.rootElement.appendChild(this.backdropElement);
document.body.appendChild(this.menuContent);
document.body.appendChild(this.backdropElement);
window.addEventListener('resize', this.recalculateOnResize);
this.calculateMenuContentPos();
@ -159,8 +159,8 @@
activeRipple.classList.remove('md-active');
}
this.rootElement.removeChild(this.menuContent);
this.rootElement.removeChild(this.backdropElement);
document.body.removeChild(this.menuContent);
document.body.removeChild(this.backdropElement);
window.removeEventListener('resize', this.recalculateOnResize);
}
};
@ -179,7 +179,6 @@
},
mounted() {
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;
@ -193,9 +192,9 @@
});
},
beforeDestroy() {
if (this.rootElement.contains(this.menuContent)) {
this.rootElement.removeChild(this.menuContent);
this.rootElement.removeChild(this.backdropElement);
if (document.body.contains(this.menuContent)) {
document.body.removeChild(this.menuContent);
document.body.removeChild(this.backdropElement);
}
this.menuTrigger.removeEventListener('click', this.toggle);

7
src/components/mdSnackbar/mdSnackbar.vue
View file

@ -68,14 +68,14 @@
},
methods: {
removeElement() {
if (this.rootElement.contains(this.snackbarElement)) {
if (document.body.contains(this.snackbarElement)) {
const activeRipple = this.snackbarElement.querySelector('.md-ripple.md-active');
if (activeRipple) {
activeRipple.classList.remove('md-active');
}
this.rootElement.removeChild(this.snackbarElement);
document.body.removeChild(this.snackbarElement);
}
},
open() {
@ -84,7 +84,7 @@
}
manager.current = this;
this.rootElement.appendChild(this.snackbarElement);
document.body.appendChild(this.snackbarElement);
window.getComputedStyle(this.$refs.container).backgroundColor;
this.active = true;
this.$emit('open');
@ -108,7 +108,6 @@
},
mounted() {
this.$nextTick(() => {
this.rootElement = this.$root.$el;
this.snackbarElement = this.$el;
this.snackbarElement.parentNode.removeChild(this.snackbarElement);
});

3
src/components/mdTooltip/mdTooltip.vue
View file

@ -115,7 +115,7 @@
this.removeTooltips();
this.$nextTick(() => {
this.rootElement.appendChild(this.tooltipElement);
document.body.appendChild(this.tooltipElement);
getComputedStyle(this.tooltipElement).top;
this.transitionOff = true;
this.generateTooltipClasses();
@ -137,7 +137,6 @@
this.$nextTick(() => {
this.tooltipElement = this.$el;
this.parentElement = this.tooltipElement.parentNode;
this.rootElement = this.$root.$el;
this.$el.parentNode.removeChild(this.$el);