mirror of
https://github.com/KevinMidboe/vue-js-modal.git
synced 2025-10-29 18:00:20 +00:00
Fix linter errors
This commit is contained in:
@@ -55,40 +55,40 @@ export default {
|
|||||||
default: 'fade'
|
default: 'fade'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
data() {
|
data () {
|
||||||
return {
|
return {
|
||||||
params: {},
|
params: {},
|
||||||
defaultButtons: [{ title: 'CLOSE' }]
|
defaultButtons: [{ title: 'CLOSE' }]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
buttons() {
|
buttons () {
|
||||||
return this.params.buttons || this.defaultButtons
|
return this.params.buttons || this.defaultButtons
|
||||||
},
|
},
|
||||||
/**
|
/**
|
||||||
* Returns FLEX style with correct width for arbitrary number of
|
* Returns FLEX style with correct width for arbitrary number of
|
||||||
* buttons.
|
* buttons.
|
||||||
*/
|
*/
|
||||||
buttonStyle() {
|
buttonStyle () {
|
||||||
return {
|
return {
|
||||||
flex: `1 1 ${100 / this.buttons.length}%`
|
flex: `1 1 ${100 / this.buttons.length}%`
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
beforeOpened(event) {
|
beforeOpened (event) {
|
||||||
window.addEventListener('keyup', this.onKeyUp)
|
window.addEventListener('keyup', this.onKeyUp)
|
||||||
|
|
||||||
this.params = event.params || {}
|
this.params = event.params || {}
|
||||||
this.$emit('before-opened', event)
|
this.$emit('before-opened', event)
|
||||||
},
|
},
|
||||||
beforeClosed(event) {
|
beforeClosed (event) {
|
||||||
window.removeEventListener('keyup', this.onKeyUp)
|
window.removeEventListener('keyup', this.onKeyUp)
|
||||||
|
|
||||||
this.params = {}
|
this.params = {}
|
||||||
this.$emit('before-closed', event)
|
this.$emit('before-closed', event)
|
||||||
},
|
},
|
||||||
click(i, event, source = 'click') {
|
click (i, event, source = 'click') {
|
||||||
const button = this.buttons[i]
|
const button = this.buttons[i]
|
||||||
|
|
||||||
if (button && typeof button.handler === 'function') {
|
if (button && typeof button.handler === 'function') {
|
||||||
@@ -97,7 +97,7 @@ export default {
|
|||||||
this.$modal.hide('dialog')
|
this.$modal.hide('dialog')
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
onKeyUp(event) {
|
onKeyUp (event) {
|
||||||
if (event.which === 13 && this.buttons.length > 0) {
|
if (event.which === 13 && this.buttons.length > 0) {
|
||||||
const buttonIndex =
|
const buttonIndex =
|
||||||
this.buttons.length === 1
|
this.buttons.length === 1
|
||||||
|
|||||||
@@ -78,14 +78,14 @@ export default {
|
|||||||
minWidth: {
|
minWidth: {
|
||||||
type: Number,
|
type: Number,
|
||||||
default: 0,
|
default: 0,
|
||||||
validator(value) {
|
validator (value) {
|
||||||
return value >= 0
|
return value >= 0
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
minHeight: {
|
minHeight: {
|
||||||
type: Number,
|
type: Number,
|
||||||
default: 0,
|
default: 0,
|
||||||
validator(value) {
|
validator (value) {
|
||||||
return value >= 0
|
return value >= 0
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@@ -100,7 +100,7 @@ export default {
|
|||||||
width: {
|
width: {
|
||||||
type: [Number, String],
|
type: [Number, String],
|
||||||
default: 600,
|
default: 600,
|
||||||
validator(value) {
|
validator (value) {
|
||||||
if (typeof value === 'string') {
|
if (typeof value === 'string') {
|
||||||
let width = parseNumber(value)
|
let width = parseNumber(value)
|
||||||
return (width.type === '%' || width.type === 'px') && width.value > 0
|
return (width.type === '%' || width.type === 'px') && width.value > 0
|
||||||
@@ -112,7 +112,7 @@ export default {
|
|||||||
height: {
|
height: {
|
||||||
type: [Number, String],
|
type: [Number, String],
|
||||||
default: 300,
|
default: 300,
|
||||||
validator(value) {
|
validator (value) {
|
||||||
if (typeof value === 'string') {
|
if (typeof value === 'string') {
|
||||||
if (value === 'auto') {
|
if (value === 'auto') {
|
||||||
return true
|
return true
|
||||||
@@ -130,14 +130,14 @@ export default {
|
|||||||
pivotX: {
|
pivotX: {
|
||||||
type: Number,
|
type: Number,
|
||||||
default: 0.5,
|
default: 0.5,
|
||||||
validator(value) {
|
validator (value) {
|
||||||
return value >= 0 && value <= 1
|
return value >= 0 && value <= 1
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
pivotY: {
|
pivotY: {
|
||||||
type: Number,
|
type: Number,
|
||||||
default: 0.5,
|
default: 0.5,
|
||||||
validator(value) {
|
validator (value) {
|
||||||
return value >= 0 && value <= 1
|
return value >= 0 && value <= 1
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -145,7 +145,7 @@ export default {
|
|||||||
components: {
|
components: {
|
||||||
Resizer
|
Resizer
|
||||||
},
|
},
|
||||||
data() {
|
data () {
|
||||||
return {
|
return {
|
||||||
visible: false,
|
visible: false,
|
||||||
|
|
||||||
@@ -182,7 +182,7 @@ export default {
|
|||||||
* inside `setTimeout` and `$nextTick`, after the DOM changes.
|
* inside `setTimeout` and `$nextTick`, after the DOM changes.
|
||||||
* This fixes `$refs.modal` `undefined` bug (fixes #15)
|
* This fixes `$refs.modal` `undefined` bug (fixes #15)
|
||||||
*/
|
*/
|
||||||
visible(value) {
|
visible (value) {
|
||||||
if (value) {
|
if (value) {
|
||||||
this.visibility.overlay = true
|
this.visibility.overlay = true
|
||||||
|
|
||||||
@@ -206,13 +206,13 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
created() {
|
created () {
|
||||||
this.setInitialSize()
|
this.setInitialSize()
|
||||||
},
|
},
|
||||||
/**
|
/**
|
||||||
* Sets global listeners
|
* Sets global listeners
|
||||||
*/
|
*/
|
||||||
beforeMount() {
|
beforeMount () {
|
||||||
Modal.event.$on('toggle', (name, state, params) => {
|
Modal.event.$on('toggle', (name, state, params) => {
|
||||||
if (name === this.name) {
|
if (name === this.name) {
|
||||||
if (typeof state === 'undefined') {
|
if (typeof state === 'undefined') {
|
||||||
@@ -247,7 +247,7 @@ export default {
|
|||||||
* simply stay at its initial height (won't crash).
|
* simply stay at its initial height (won't crash).
|
||||||
* (Provide polyfill to support IE < 11)
|
* (Provide polyfill to support IE < 11)
|
||||||
*/
|
*/
|
||||||
const MutationObserver = (function() {
|
const MutationObserver = (function () {
|
||||||
const prefixes = ['', 'WebKit', 'Moz', 'O', 'Ms']
|
const prefixes = ['', 'WebKit', 'Moz', 'O', 'Ms']
|
||||||
|
|
||||||
for (let i = 0; i < prefixes.length; i++) {
|
for (let i = 0; i < prefixes.length; i++) {
|
||||||
@@ -274,7 +274,7 @@ export default {
|
|||||||
/**
|
/**
|
||||||
* Removes "resize" window listener
|
* Removes "resize" window listener
|
||||||
*/
|
*/
|
||||||
beforeDestroy() {
|
beforeDestroy () {
|
||||||
window.removeEventListener('resize', this.onWindowResize)
|
window.removeEventListener('resize', this.onWindowResize)
|
||||||
|
|
||||||
if (this.clickToClose) {
|
if (this.clickToClose) {
|
||||||
@@ -285,14 +285,14 @@ export default {
|
|||||||
/**
|
/**
|
||||||
* Returns true if height is set to "auto"
|
* Returns true if height is set to "auto"
|
||||||
*/
|
*/
|
||||||
isAutoHeight() {
|
isAutoHeight () {
|
||||||
return this.modal.heightType === 'auto'
|
return this.modal.heightType === 'auto'
|
||||||
},
|
},
|
||||||
/**
|
/**
|
||||||
* Calculates and returns modal position based on the
|
* Calculates and returns modal position based on the
|
||||||
* pivots, window size and modal size
|
* pivots, window size and modal size
|
||||||
*/
|
*/
|
||||||
position() {
|
position () {
|
||||||
const {
|
const {
|
||||||
window,
|
window,
|
||||||
shift,
|
shift,
|
||||||
@@ -317,7 +317,7 @@ export default {
|
|||||||
* Returns pixel width (if set with %) and makes sure that modal size
|
* Returns pixel width (if set with %) and makes sure that modal size
|
||||||
* fits the window
|
* fits the window
|
||||||
*/
|
*/
|
||||||
trueModalWidth() {
|
trueModalWidth () {
|
||||||
const { window, modal, adaptive, minWidth, maxWidth } = this
|
const { window, modal, adaptive, minWidth, maxWidth } = this
|
||||||
|
|
||||||
const value =
|
const value =
|
||||||
@@ -333,7 +333,7 @@ export default {
|
|||||||
*
|
*
|
||||||
* Returns modal.renderedHeight if height set as "auto"
|
* Returns modal.renderedHeight if height set as "auto"
|
||||||
*/
|
*/
|
||||||
trueModalHeight() {
|
trueModalHeight () {
|
||||||
const { window, modal, isAutoHeight, adaptive, maxHeight } = this
|
const { window, modal, isAutoHeight, adaptive, maxHeight } = this
|
||||||
|
|
||||||
const value =
|
const value =
|
||||||
@@ -353,7 +353,7 @@ export default {
|
|||||||
/**
|
/**
|
||||||
* Returns class list for screen overlay (modal background)
|
* Returns class list for screen overlay (modal background)
|
||||||
*/
|
*/
|
||||||
overlayClass() {
|
overlayClass () {
|
||||||
return {
|
return {
|
||||||
'v--modal-overlay': true,
|
'v--modal-overlay': true,
|
||||||
scrollable: this.scrollable && this.isAutoHeight
|
scrollable: this.scrollable && this.isAutoHeight
|
||||||
@@ -362,13 +362,13 @@ export default {
|
|||||||
/**
|
/**
|
||||||
* Returns class list for modal itself
|
* Returns class list for modal itself
|
||||||
*/
|
*/
|
||||||
modalClass() {
|
modalClass () {
|
||||||
return ['v--modal-box', this.classes]
|
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() {
|
modalStyle () {
|
||||||
return {
|
return {
|
||||||
top: this.position.top + 'px',
|
top: this.position.top + 'px',
|
||||||
left: this.position.left + 'px',
|
left: this.position.left + 'px',
|
||||||
@@ -383,7 +383,7 @@ export default {
|
|||||||
* if "reset" flag is set to true - this function will be called
|
* if "reset" flag is set to true - this function will be called
|
||||||
* every time "beforeOpen" is triggered
|
* every time "beforeOpen" is triggered
|
||||||
*/
|
*/
|
||||||
setInitialSize() {
|
setInitialSize () {
|
||||||
const { modal } = this
|
const { modal } = this
|
||||||
const width = parseNumber(this.width)
|
const width = parseNumber(this.width)
|
||||||
const height = parseNumber(this.height)
|
const height = parseNumber(this.height)
|
||||||
@@ -394,13 +394,13 @@ export default {
|
|||||||
modal.heightType = height.type
|
modal.heightType = height.type
|
||||||
},
|
},
|
||||||
|
|
||||||
onEscapeKeyUp(event) {
|
onEscapeKeyUp (event) {
|
||||||
if (event.which === 27 && this.visible) {
|
if (event.which === 27 && this.visible) {
|
||||||
this.$modal.hide(this.name)
|
this.$modal.hide(this.name)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
onWindowResize() {
|
onWindowResize () {
|
||||||
this.window.width = window.innerWidth
|
this.window.width = window.innerWidth
|
||||||
this.window.height = window.innerHeight
|
this.window.height = window.innerHeight
|
||||||
},
|
},
|
||||||
@@ -408,7 +408,7 @@ export default {
|
|||||||
/**
|
/**
|
||||||
* Generates event object
|
* Generates event object
|
||||||
*/
|
*/
|
||||||
genEventObject(params) {
|
genEventObject (params) {
|
||||||
const eventData = {
|
const eventData = {
|
||||||
name: this.name,
|
name: this.name,
|
||||||
timestamp: Date.now(),
|
timestamp: Date.now(),
|
||||||
@@ -421,7 +421,7 @@ export default {
|
|||||||
/**
|
/**
|
||||||
* Event handler which is triggered on modal resize
|
* Event handler which is triggered on modal resize
|
||||||
*/
|
*/
|
||||||
onModalResize(event) {
|
onModalResize (event) {
|
||||||
this.modal.widthType = 'px'
|
this.modal.widthType = 'px'
|
||||||
this.modal.width = event.size.width
|
this.modal.width = event.size.width
|
||||||
|
|
||||||
@@ -438,7 +438,7 @@ export default {
|
|||||||
* BeforeEvents: ('before-close' and 'before-open') are `$emit`ed here,
|
* BeforeEvents: ('before-close' and 'before-open') are `$emit`ed here,
|
||||||
* but AfterEvents ('opened' and 'closed') are moved to `watch.visible`.
|
* but AfterEvents ('opened' and 'closed') are moved to `watch.visible`.
|
||||||
*/
|
*/
|
||||||
toggle(state, params) {
|
toggle (state, params) {
|
||||||
const { reset, scrollable, visible } = this
|
const { reset, scrollable, visible } = this
|
||||||
if (visible === state) return
|
if (visible === state) return
|
||||||
const beforeEventName = visible ? 'before-close' : 'before-open'
|
const beforeEventName = visible ? 'before-close' : 'before-open'
|
||||||
@@ -484,7 +484,7 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
getDraggableElement() {
|
getDraggableElement () {
|
||||||
var selector =
|
var selector =
|
||||||
typeof this.draggable !== 'string' ? '.v--modal-box' : this.draggable
|
typeof this.draggable !== 'string' ? '.v--modal-box' : this.draggable
|
||||||
|
|
||||||
@@ -499,13 +499,13 @@ export default {
|
|||||||
/**
|
/**
|
||||||
* Event handler that is triggered when background overlay is clicked
|
* Event handler that is triggered when background overlay is clicked
|
||||||
*/
|
*/
|
||||||
onBackgroundClick() {
|
onBackgroundClick () {
|
||||||
if (this.clickToClose) {
|
if (this.clickToClose) {
|
||||||
this.toggle(false)
|
this.toggle(false)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
addDraggableListeners() {
|
addDraggableListeners () {
|
||||||
if (!this.draggable) {
|
if (!this.draggable) {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
@@ -570,7 +570,7 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
removeDraggableListeners() {
|
removeDraggableListeners () {
|
||||||
// console.log('removing draggable handlers')
|
// console.log('removing draggable handlers')
|
||||||
},
|
},
|
||||||
|
|
||||||
@@ -581,7 +581,7 @@ export default {
|
|||||||
* wrapping afterEvents in `$nextTick` fixes `$refs.modal` undefined bug.
|
* wrapping afterEvents in `$nextTick` fixes `$refs.modal` undefined bug.
|
||||||
* (fixes #15)
|
* (fixes #15)
|
||||||
*/
|
*/
|
||||||
callAfterEvent(state) {
|
callAfterEvent (state) {
|
||||||
if (state) {
|
if (state) {
|
||||||
this.connectObserver()
|
this.connectObserver()
|
||||||
} else {
|
} else {
|
||||||
@@ -600,7 +600,7 @@ export default {
|
|||||||
* 1. modal opened
|
* 1. modal opened
|
||||||
* 2. MutationObserver's observe callback
|
* 2. MutationObserver's observe callback
|
||||||
*/
|
*/
|
||||||
updateRenderedHeight() {
|
updateRenderedHeight () {
|
||||||
if (this.$refs.modal) {
|
if (this.$refs.modal) {
|
||||||
this.modal.renderedHeight = this.$refs.modal.getBoundingClientRect().height
|
this.modal.renderedHeight = this.$refs.modal.getBoundingClientRect().height
|
||||||
}
|
}
|
||||||
@@ -610,7 +610,7 @@ export default {
|
|||||||
* Start observing modal's DOM, if childList or subtree changes,
|
* Start observing modal's DOM, if childList or subtree changes,
|
||||||
* the callback (registered in beforeMount) will be called.
|
* the callback (registered in beforeMount) will be called.
|
||||||
*/
|
*/
|
||||||
connectObserver() {
|
connectObserver () {
|
||||||
if (this.mutationObserver) {
|
if (this.mutationObserver) {
|
||||||
this.mutationObserver.observe(this.$refs.modal, {
|
this.mutationObserver.observe(this.$refs.modal, {
|
||||||
childList: true,
|
childList: true,
|
||||||
@@ -623,7 +623,7 @@ export default {
|
|||||||
/**
|
/**
|
||||||
* Disconnects MutationObserver
|
* Disconnects MutationObserver
|
||||||
*/
|
*/
|
||||||
disconnectObserver() {
|
disconnectObserver () {
|
||||||
if (this.mutationObserver) {
|
if (this.mutationObserver) {
|
||||||
this.mutationObserver.disconnect()
|
this.mutationObserver.disconnect()
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -16,22 +16,22 @@ export default {
|
|||||||
default: 0
|
default: 0
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
data() {
|
data () {
|
||||||
return {
|
return {
|
||||||
clicked: false,
|
clicked: false,
|
||||||
size: {}
|
size: {}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted () {
|
||||||
this.$el.addEventListener('mousedown', this.start, false)
|
this.$el.addEventListener('mousedown', this.start, false)
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
className() {
|
className () {
|
||||||
return { 'vue-modal-resizer': true, clicked: this.clicked }
|
return { 'vue-modal-resizer': true, clicked: this.clicked }
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
start(event) {
|
start (event) {
|
||||||
this.clicked = true
|
this.clicked = true
|
||||||
|
|
||||||
window.addEventListener('mousemove', this.mousemove, false)
|
window.addEventListener('mousemove', this.mousemove, false)
|
||||||
@@ -40,7 +40,7 @@ export default {
|
|||||||
event.stopPropagation()
|
event.stopPropagation()
|
||||||
event.preventDefault()
|
event.preventDefault()
|
||||||
},
|
},
|
||||||
stop() {
|
stop () {
|
||||||
this.clicked = false
|
this.clicked = false
|
||||||
|
|
||||||
window.removeEventListener('mousemove', this.mousemove, false)
|
window.removeEventListener('mousemove', this.mousemove, false)
|
||||||
@@ -51,10 +51,10 @@ export default {
|
|||||||
size: this.size
|
size: this.size
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
mousemove(event) {
|
mousemove (event) {
|
||||||
this.resize(event)
|
this.resize(event)
|
||||||
},
|
},
|
||||||
resize(event) {
|
resize (event) {
|
||||||
var el = this.$el.parentElement
|
var el = this.$el.parentElement
|
||||||
|
|
||||||
if (el) {
|
if (el) {
|
||||||
|
|||||||
@@ -4,7 +4,7 @@ import Dialog from './Dialog.vue'
|
|||||||
const defaultComponentName = 'modal'
|
const defaultComponentName = 'modal'
|
||||||
|
|
||||||
const Plugin = {
|
const Plugin = {
|
||||||
install(Vue, options = {}) {
|
install (Vue, options = {}) {
|
||||||
/**
|
/**
|
||||||
* Makes sure that plugin can be insstalled only once
|
* Makes sure that plugin can be insstalled only once
|
||||||
*/
|
*/
|
||||||
@@ -18,15 +18,15 @@ const Plugin = {
|
|||||||
* Plugin API
|
* Plugin API
|
||||||
*/
|
*/
|
||||||
Vue.prototype.$modal = {
|
Vue.prototype.$modal = {
|
||||||
show(name, params) {
|
show (name, params) {
|
||||||
Plugin.event.$emit('toggle', name, true, params)
|
Plugin.event.$emit('toggle', name, true, params)
|
||||||
},
|
},
|
||||||
|
|
||||||
hide(name, params) {
|
hide (name, params) {
|
||||||
Plugin.event.$emit('toggle', name, false, params)
|
Plugin.event.$emit('toggle', name, false, params)
|
||||||
},
|
},
|
||||||
|
|
||||||
toggle(name, params) {
|
toggle (name, params) {
|
||||||
Plugin.event.$emit('toggle', name, undefined, params)
|
Plugin.event.$emit('toggle', name, undefined, params)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user