diff --git a/src/Dialog.vue b/src/Dialog.vue index db5b650..a43d275 100644 --- a/src/Dialog.vue +++ b/src/Dialog.vue @@ -40,6 +40,10 @@ buttons () { return this.params.buttons || this.defaultButtons }, + /** + * Returns FLEX style with correct width for arbitrary number of + * buttons. + */ buttonStyle () { return { flex: `1 1 ${100 / this.buttons.length}%` diff --git a/src/Modal.vue b/src/Modal.vue index ec6cb17..9612ac4 100644 --- a/src/Modal.vue +++ b/src/Modal.vue @@ -189,6 +189,9 @@ created () { this.setInitialSize() }, + /** + * Sets global listeners + */ beforeMount () { Modal.event.$on('toggle', (name, state, params) => { if (name === this.name) { @@ -208,14 +211,23 @@ `but height is not "auto" (${this.height})`) } }, + /** + * Removes "resize" window listener + */ beforeDestroy () { window.removeEventListener('resize', this.onWindowResize) }, computed: { + /** + * 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 + */ position () { const { window, modal, shift, pivotX, pivotY, trueModalWidth, trueModalHeight, isAutoHeight } = this @@ -235,7 +247,10 @@ top: inRange(minTop, maxTop, top) } }, - + /** + * Returns pixel width (if set with %) and makes sure that modal size + * fits the window + */ trueModalWidth () { const { window, modal, adaptive, minWidth } = this @@ -247,7 +262,12 @@ ? inRange(minWidth, window.width, value) : value }, - + /** + * Returns pixel height (if set with %) and makes sure that modal size + * fits the window. + * + * Returns 0 if height set as "auto" + */ trueModalHeight () { const { window, modal, isAutoHeight, adaptive } = this @@ -263,18 +283,24 @@ ? inRange(this.minHeight, this.window.height, value) : value }, - + /** + * Returns class list for screen overlay (modal background) + */ overlayClass () { return { 'v--modal-overlay': true, 'scrollable': this.scrollable && this.isAutoHeight } }, - + /** + * Returns class list for modal itself + */ modalClass () { return ['v--modal-box', this.classes] }, - + /** + * CSS styles for position and size of the modal + */ modalStyle () { return { top: this.position.top + 'px', @@ -287,6 +313,11 @@ } }, methods: { + /** + * 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) @@ -303,6 +334,9 @@ this.window.height = window.innerHeight }, + /** + * Generates event object + */ genEventObject (params) { //todo: clean this up (change to ...) var data = { @@ -317,7 +351,9 @@ return Vue.util.extend(data, params || {}); }, - + /** + * Event handler which is triggered on modal resize + */ onModalResize (event) { this.modal.widthType = 'px' this.modal.width = event.size.width @@ -330,7 +366,9 @@ this.$emit('resize', resizeEvent) }, - + /** + * Event handler which is triggered on $modal.show and $modal.hight + */ toggle (state, params) { const { reset, visible } = this @@ -383,7 +421,9 @@ } } }, - + /** + * Event handler that is triggered when background overlay is clicked + */ onBackgroundClick () { if (this.clickToClose) { this.toggle(false) diff --git a/src/index.js b/src/index.js index eb570d8..1ed9163 100644 --- a/src/index.js +++ b/src/index.js @@ -5,13 +5,18 @@ const defaultComponentName = 'modal' const Plugin = { install (Vue, options = {}) { + /** + * Makes sure that plugin can be insstalled only once + */ if (this.installed) { return } this.installed = true this.event = new Vue() - + /** + * Plugin API + */ Vue.prototype.$modal = { show (name, params) { Plugin.event.$emit('toggle', name, true, params) @@ -25,10 +30,14 @@ const Plugin = { Plugin.event.$emit('toggle', name, undefined, params) } } - + /** + * Sets custom component name (if provided) + */ const componentName = options.componentName || defaultComponentName Vue.component(componentName, Modal) - + /** + * Registration of component + */ if (options.dialog) { Vue.component('v-dialog', Dialog) }