KevinMidboe/vue-js-modal
1
0
Fork 0
mirror of https://github.com/KevinMidboe/vue-js-modal.git synced 2025-10-29 18:00:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added maxWidth minWidth

Browse Source
This commit is contained in:
yev
2018-01-28 10:10:03 +00:00
parent 665cd667f5
commit a8ecb750d1
7 changed files with 159 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

180
src/Modal.vue
View File

@@ -89,6 +89,14 @@ export default {
return value >= 0
}
},
maxWidth: {
type: Number,
default: Infinity
},
maxHeight: {
type: Number,
default: Infinity
},
width: {
type: [Number, String],
default: 600,
@@ -169,11 +177,11 @@ export default {
},
watch: {
/**
* Sets the visibility of overlay and modal.
* Events 'opened' and 'closed' is called here
* inside `setTimeout` and `$nextTick`, after the DOM changes.
* This fixes `$refs.modal` `undefined` bug (fixes #15)
*/
* Sets the visibility of overlay and modal.
* Events 'opened' and 'closed' is called here
* inside `setTimeout` and `$nextTick`, after the DOM changes.
* This fixes `$refs.modal` `undefined` bug (fixes #15)
*/
visible(value) {
if (value) {
this.visibility.overlay = true
@@ -202,8 +210,8 @@ export default {
this.setInitialSize()
},
/**
* Sets global listeners
*/
* Sets global listeners
*/
beforeMount() {
Modal.event.$on('toggle', (name, state, params) => {
if (name === this.name) {
@@ -218,8 +226,8 @@ export default {
window.addEventListener('resize', this.onWindowResize)
this.onWindowResize()
/**
* Making sure that autoHeight is enabled when using "scrollable"
*/
* Making sure that autoHeight is enabled when using "scrollable"
*/
if (this.scrollable && !this.isAutoHeight) {
console.warn(
`Modal "${this.name}" has scrollable flag set to true ` +
@@ -227,18 +235,18 @@ export default {
)
}
/**
* Only observe when using height: 'auto'
* The callback will be called when modal DOM changes,
* this is for updating the `top` attribute for height 'auto' modals.
*/
* Only observe when using height: 'auto'
* The callback will be called when modal DOM changes,
* this is for updating the `top` attribute for height 'auto' modals.
*/
if (this.isAutoHeight) {
/**
* MutationObserver feature detection:
* Detects if MutationObserver is available, return false if not.
* No polyfill is provided here, so height 'auto' recalculation will
* simply stay at its initial height (won't crash).
* (Provide polyfill to support IE < 11)
*/
* MutationObserver feature detection:
* Detects if MutationObserver is available, return false if not.
* No polyfill is provided here, so height 'auto' recalculation will
* simply stay at its initial height (won't crash).
* (Provide polyfill to support IE < 11)
*/
const MutationObserver = (function() {
const prefixes = ['', 'WebKit', 'Moz', 'O', 'Ms']
@@ -264,8 +272,8 @@ export default {
}
},
/**
* Removes "resize" window listener
*/
* Removes "resize" window listener
*/
beforeDestroy() {
window.removeEventListener('resize', this.onWindowResize)
@@ -275,15 +283,15 @@ export default {
},
computed: {
/**
* Returns true if height is set to "auto"
*/
* Returns true if height is set to "auto"
*/
isAutoHeight() {
return this.modal.heightType === 'auto'
},
/**
* Calculates and returns modal position based on the
* pivots, window size and modal size
*/
* Calculates and returns modal position based on the
* pivots, window size and modal size
*/
position() {
const {
window,
@@ -306,25 +314,27 @@ export default {
}
},
/**
* Returns pixel width (if set with %) and makes sure that modal size
* fits the window
*/
* Returns pixel width (if set with %) and makes sure that modal size
* fits the window
*/
trueModalWidth() {
const { window, modal, adaptive, minWidth } = this
const { window, modal, adaptive, minWidth, maxWidth } = this
const value =
modal.widthType === '%' ? window.width / 100 * modal.width : modal.width
return adaptive ? inRange(minWidth, window.width, value) : value
const max = Math.min(window.width, maxWidth)
return adaptive ? inRange(minWidth, max, value) : value
},
/**
* Returns pixel height (if set with %) and makes sure that modal size
* fits the window.
*
* Returns modal.renderedHeight if height set as "auto"
*/
* Returns pixel height (if set with %) and makes sure that modal size
* fits the window.
*
* Returns modal.renderedHeight if height set as "auto"
*/
trueModalHeight() {
const { window, modal, isAutoHeight, adaptive } = this
const { window, modal, isAutoHeight, adaptive, maxHeight } = this
const value =
modal.heightType === '%'
@@ -336,13 +346,13 @@ export default {
return this.modal.renderedHeight
}
return adaptive
? inRange(this.minHeight, this.window.height, value)
: value
const max = Math.min(window.height, maxHeight)
return adaptive ? inRange(this.minHeight, max, value) : value
},
/**
* Returns class list for screen overlay (modal background)
*/
* Returns class list for screen overlay (modal background)
*/
overlayClass() {
return {
'v--modal-overlay': true,
@@ -350,14 +360,14 @@ export default {
}
},
/**
* Returns class list for modal itself
*/
* Returns class list for modal itself
*/
modalClass() {
return ['v--modal-box', this.classes]
},
/**
* CSS styles for position and size of the modal
*/
* CSS styles for position and size of the modal
*/
modalStyle() {
return {
top: this.position.top + 'px',
@@ -369,14 +379,14 @@ export default {
},
methods: {
/**
* Initializes modal's size & position,
* if "reset" flag is set to true - this function will be called
* every time "beforeOpen" is triggered
*/
* Initializes modal's size & position,
* if "reset" flag is set to true - this function will be called
* every time "beforeOpen" is triggered
*/
setInitialSize() {
let { modal } = this
let width = parseNumber(this.width)
let height = parseNumber(this.height)
const { modal } = this
const width = parseNumber(this.width)
const height = parseNumber(this.height)
modal.width = width.value
modal.widthType = width.type
@@ -396,10 +406,10 @@ export default {
},
/**
* Generates event object
*/
* Generates event object
*/
genEventObject(params) {
var eventData = {
const eventData = {
name: this.name,
timestamp: Date.now(),
canceled: false,
@@ -409,8 +419,8 @@ export default {
return Object.assign(eventData, params || {})
},
/**
* Event handler which is triggered on modal resize
*/
* Event handler which is triggered on modal resize
*/
onModalResize(event) {
this.modal.widthType = 'px'
this.modal.width = event.size.width
@@ -424,20 +434,19 @@ export default {
this.$emit('resize', resizeEvent)
},
/**
* Event handler which is triggered on $modal.show and $modal.hight
* BeforeEvents: ('before-close' and 'before-open') are `$emit`ed here,
* but AfterEvents ('opened' and 'closed') are moved to `watch.visible`.
*/
* Event handler which is triggered on $modal.show and $modal.hight
* BeforeEvents: ('before-close' and 'before-open') are `$emit`ed here,
* but AfterEvents ('opened' and 'closed') are moved to `watch.visible`.
*/
toggle(state, params) {
const { reset, scrollable, visible } = this
const beforeEventName = visible ? 'before-close' : 'before-open'
if (beforeEventName === 'before-open') {
/**
* Need to unfocus previously focused element, otherwise
* all keypress events (ESC press, for example) will trigger on that element.
*/
* Need to unfocus previously focused element, otherwise
* all keypress events (ESC press, for example) will trigger on that element.
*/
if (document.activeElement) {
document.activeElement.blur()
}
@@ -479,15 +488,16 @@ export default {
typeof this.draggable !== 'string' ? '.v--modal-box' : this.draggable
if (selector) {
var handler = this.$refs.overlay.querySelector(selector)
const handler = this.$refs.overlay.querySelector(selector)
if (handler) {
return handler
}
}
},
/**
* Event handler that is triggered when background overlay is clicked
*/
* Event handler that is triggered when background overlay is clicked
*/
onBackgroundClick() {
if (this.clickToClose) {
this.toggle(false)
@@ -564,12 +574,12 @@ export default {
},
/**
* 'opened' and 'closed' events are `$emit`ed here.
* This is called in watch.visible.
* Because modal DOM updates are async,
* wrapping afterEvents in `$nextTick` fixes `$refs.modal` undefined bug.
* (fixes #15)
*/
* 'opened' and 'closed' events are `$emit`ed here.
* This is called in watch.visible.
* Because modal DOM updates are async,
* wrapping afterEvents in `$nextTick` fixes `$refs.modal` undefined bug.
* (fixes #15)
*/
callAfterEvent(state) {
if (state) {
this.connectObserver()
@@ -584,11 +594,11 @@ export default {
},
/**
* Update $data.modal.renderedHeight using getBoundingClientRect.
* This method is called when:
* 1. modal opened
* 2. MutationObserver's observe callback
*/
* Update $data.modal.renderedHeight using getBoundingClientRect.
* This method is called when:
* 1. modal opened
* 2. MutationObserver's observe callback
*/
updateRenderedHeight() {
if (this.$refs.modal) {
this.modal.renderedHeight = this.$refs.modal.getBoundingClientRect().height
@@ -596,9 +606,9 @@ export default {
},
/**
* Start observing modal's DOM, if childList or subtree changes,
* the callback (registered in beforeMount) will be called.
*/
* Start observing modal's DOM, if childList or subtree changes,
* the callback (registered in beforeMount) will be called.
*/
connectObserver() {
if (this.mutationObserver) {
this.mutationObserver.observe(this.$refs.modal, {
@@ -610,8 +620,8 @@ export default {
},
/**
* Disconnects MutationObserver
*/
* Disconnects MutationObserver
*/
disconnectObserver() {
if (this.mutationObserver) {
this.mutationObserver.disconnect()