From f1500752f7d73617625236614b5e46936786d4b1 Mon Sep 17 00:00:00 2001 From: damienix Date: Fri, 25 Nov 2016 04:32:19 +0100 Subject: [PATCH] Add more alignment options (#109) * Create offset options - md-offset-y and md-offset-x * Add option to align the menu to the trigger * Create better examples --- docs/src/pages/components/Menu.vue | 65 ++++++++++++++++++++++ src/components/mdMenu/mdMenu.vue | 89 ++++++++++++++---------------- 2 files changed, 106 insertions(+), 48 deletions(-) diff --git a/docs/src/pages/components/Menu.vue b/docs/src/pages/components/Menu.vue index 7c79dbb..3d069ea 100644 --- a/docs/src/pages/components/Menu.vue +++ b/docs/src/pages/components/Menu.vue @@ -44,6 +44,37 @@ + + + Default + + + My Item 1 + My Item 2 + My Item 3 + + + + + Align trigger + + + My Item 1 + My Item 2 + My Item 3 + + + + Custom offset + + + My Item 1 + My Item 2 + My Item 3 + + + + Default @@ -208,6 +239,40 @@ + + +<md-menu> + <md-button md-menu-trigger>Default</md-button> + + <md-menu-content> + <md-menu-item>My Item 1</md-menu-item> + <md-menu-item>My Item 2</md-menu-item> + <md-menu-item>My Item 3</md-menu-item> + </md-menu-content> +</md-menu> + +<md-menu md-align-trigger> + <md-button md-menu-trigger>Align trigger</md-button> + + <md-menu-content> + <md-menu-item>My Item 1</md-menu-item> + <md-menu-item>My Item 2</md-menu-item> + <md-menu-item>My Item 3</md-menu-item> + </md-menu-content> +</md-menu> + +<md-menu :md-offset-x="154" md-offset-y="12"> + <md-button md-menu-trigger>Custom offset</md-button> + + <md-menu-content> + <md-menu-item>My Item 1</md-menu-item> + <md-menu-item>My Item 2</md-menu-item> + <md-menu-item>My Item 3</md-menu-item> + </md-menu-content> +</md-menu> + + + <md-menu> diff --git a/src/components/mdMenu/mdMenu.vue b/src/components/mdMenu/mdMenu.vue index e3fcb57..1fe3286 100644 --- a/src/components/mdMenu/mdMenu.vue +++ b/src/components/mdMenu/mdMenu.vue @@ -22,6 +22,18 @@ type: String, default: 'bottom right' }, + mdAlignTrigger: { + type: Boolean, + default: false + }, + mdOffsetX: { + type: [Number, String], + default: 0 + }, + mdOffsetY: { + type: [Number, String], + default: 0 + }, mdCloseOnSelect: { type: Boolean, default: true @@ -63,81 +75,62 @@ this.menuContent.classList.remove('md-size-' + size); }, removeLastDirectionMenuContentClass(direction) { - this.menuContent.classList.remove('md-direction-' + direction.replace(' ', '-')); + this.menuContent.classList.remove('md-direction-' + direction.replace(/ /g, '-')); }, addNewSizeMenuContentClass(size) { this.menuContent.classList.add('md-size-' + size); }, addNewDirectionMenuContentClass(direction) { - this.menuContent.classList.add('md-direction-' + direction.replace(' ', '-')); + if (!this.mdAlignTrigger) { + this.menuContent.classList.add('md-direction-' + direction.replace(/ /g, '-')); + } }, - getBottomRightPos() { + getPosition(vertical, horizontal) { let menuTriggerRect = this.menuTrigger.getBoundingClientRect(); - let position = { - top: menuTriggerRect.top, - left: menuTriggerRect.left - }; - position = getInViewPosition(this.menuContent, position); + let top = vertical === 'top' + ? menuTriggerRect.top + menuTriggerRect.height - this.menuContent.offsetHeight + : menuTriggerRect.top; - return position; - }, - getBottomLeftPos() { - let menuTriggerRect = this.menuTrigger.getBoundingClientRect(); - let position = { - top: menuTriggerRect.top, - left: menuTriggerRect.left - this.menuContent.offsetWidth + menuTriggerRect.width - }; + let left = horizontal === 'left' + ? menuTriggerRect.left - this.menuContent.offsetWidth + menuTriggerRect.width + : menuTriggerRect.left; - position = getInViewPosition(this.menuContent, position); + top += parseInt(this.mdOffsetY, 10); + left += parseInt(this.mdOffsetX, 10); - return position; - }, - getTopRightPos() { - let menuTriggerRect = this.menuTrigger.getBoundingClientRect(); - let position = { - top: menuTriggerRect.top + menuTriggerRect.height - this.menuContent.offsetHeight, - left: menuTriggerRect.left - }; + if (this.mdAlignTrigger) { + if (vertical === 'top') { + top -= menuTriggerRect.height; + } else { + top += menuTriggerRect.height; + } + } - position = getInViewPosition(this.menuContent, position); - - return position; - }, - getTopLeftPos() { - let menuTriggerRect = this.menuTrigger.getBoundingClientRect(); - let position = { - top: menuTriggerRect.top + menuTriggerRect.height - this.menuContent.offsetHeight, - left: menuTriggerRect.left - this.menuContent.offsetWidth + menuTriggerRect.width - }; - - position = getInViewPosition(this.menuContent, position); - - return position; + return {top, left}; }, calculateMenuContentPos() { let position; switch (this.mdDirection) { case 'bottom left': - position = this.getBottomLeftPos(); - - break; - - case 'top right': - position = this.getTopRightPos(); - + position = this.getPosition('bottom', 'left'); break; case 'top left': - position = this.getTopLeftPos(); + position = this.getPosition('top', 'left'); + break; + case 'top right': + position = this.getPosition('top', 'right'); break; default: - position = this.getBottomRightPos(); + position = this.getPosition('bottom', 'right'); } + position = getInViewPosition(this.menuContent, position); + this.menuContent.style.top = position.top + 'px'; this.menuContent.style.left = position.left + 'px'; },