import { kebabCase, debounce, wireDirectives } from '@/util'
import ModelAction from '@/action/model'
import DeferredModelAction from '@/action/deferred-model'
import MethodAction from '@/action/method'
import store from '@/Store'
import DOM from './dom/dom'
export default {
initialize(el, component) {
if (store.initialRenderIsFinished && el.tagName.toLowerCase() === 'script') {
eval(el.innerHTML)
return false
}
wireDirectives(el).all().forEach(directive => {
switch (directive.type) {
case 'init':
this.fireActionRightAway(el, directive, component)
break
case 'model':
if (! directive.value) {
console.warn('Livewire: [wire:model] is missing a value.', el)
break
}
DOM.setInputValueFromModel(el, component)
this.attachModelListener(el, directive, component)
break
default:
if (store.directives.has(directive.type)) {
store.directives.call(
directive.type,
el,
directive,
component
)
}
this.attachDomListener(el, directive, component)
break
}
})
store.callHook('element.initialized', el, component)
},
fireActionRightAway(el, directive, component) {
const method = directive.value ? directive.method : '$refresh'
component.addAction(new MethodAction(method, directive.params, el))
},
attachModelListener(el, directive, component) {
// This is used by morphdom: morphdom.js:391
el.isLivewireModel = true
const isLazy = directive.modifiers.includes('lazy')
const debounceIf = (condition, callback, time) => {
return condition
? component.modelSyncDebounce(callback, time)
: callback
}
const hasDebounceModifier = directive.modifiers.includes('debounce')
store.callHook('interceptWireModelAttachListener', directive, el, component)
// File uploads are handled by UploadFiles.js.
if (el.tagName.toLowerCase() === 'input' && el.type === 'file') return
const event = el.tagName.toLowerCase() === 'select'
|| ['checkbox', 'radio'].includes(el.type)
|| directive.modifiers.includes('lazy') ? 'change' : 'input'
// If it's a text input and not .lazy, debounce, otherwise fire immediately.
let handler = debounceIf(hasDebounceModifier || (DOM.isTextInput(el) && !isLazy), e => {
let model = directive.value
let el = e.target
let value = e instanceof CustomEvent
// We have to check for typeof e.detail here for IE 11.
&& typeof e.detail != 'undefined'
&& typeof window.document.documentMode == 'undefined'
// With autofill in Safari, Safari triggers a custom event and assigns
// the value to e.target.value, so we need to check for that value as well.
? e.detail ?? e.target.value
: DOM.valueFromInput(el, component)
if (directive.modifiers.includes('defer')) {
component.addAction(new DeferredModelAction(model, value, el))
} else {
component.addAction(new ModelAction(model, value, el))
}
}, directive.durationOr(150))
el.addEventListener(event, handler)
component.addListenerForTeardown(() => {
el.removeEventListener(event, handler)
})
// Taken from: https://stackoverflow.com/questions/9847580/how-to-detect-safari-chrome-ie-firefox-and-opera-browser
let isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent)
// Safari is weird and doesn't properly fire input events when
// a user "autofills" a wire:model(.lazy) field. So we are
// firing them manually for assurance.
isSafari && el.addEventListener('animationstart', e => {
if (e.animationName !== 'livewireautofill') return
e.target.dispatchEvent(new Event('change', { bubbles: true }))
e.target.dispatchEvent(new Event('input', { bubbles: true }))
})
},
attachDomListener(el, directive, component) {
switch (directive.type) {
case 'keydown':
case 'keyup':
this.attachListener(el, directive, component, e => {
// Detect system modifier key combinations if specified.
const systemKeyModifiers = [
'ctrl',
'shift',
'alt',
'meta',
'cmd',
'super',
]
const selectedSystemKeyModifiers = systemKeyModifiers.filter(
key => directive.modifiers.includes(key)
)
if (selectedSystemKeyModifiers.length > 0) {
const selectedButNotPressedKeyModifiers = selectedSystemKeyModifiers.filter(
key => {
// Alias "cmd" and "super" to "meta"
if (key === 'cmd' || key === 'super')
key = 'meta'
return !e[`${key}Key`]
}
)
if (selectedButNotPressedKeyModifiers.length > 0)
return false
}
// Handle spacebar
if (e.keyCode === 32 || (e.key === ' ' || e.key === 'Spacebar')) {
return directive.modifiers.includes('space')
}
// Strip 'debounce' modifier and time modifiers from modifiers list
let modifiers = directive.modifiers.filter(modifier => {
return (
!modifier.match(/^debounce$/) &&
!modifier.match(/^[0-9]+m?s$/)
)
})
// Only handle listener if no, or matching key modifiers are passed.
// It's important to check that e.key exists - OnePassword's extension does weird things.
return Boolean(modifiers.length === 0 || (e.key && modifiers.includes(kebabCase(e.key))))
})
break
case 'click':
this.attachListener(el, directive, component, e => {
// We only care about elements that have the .self modifier on them.
if (!directive.modifiers.includes('self')) return
// This ensures a listener is only run if the event originated
// on the elemenet that registered it (not children).
// This is useful for things like modal back-drop listeners.
return el.isSameNode(e.target)
})
break
default:
this.attachListener(el, directive, component)
break
}
},
attachListener(el, directive, component, callback) {
if (directive.modifiers.includes('prefetch')) {
el.addEventListener('mouseenter', () => {
component.addPrefetchAction(
new MethodAction(directive.method, directive.params, el)
)
})
}
const event = directive.type
const handler = e => {
if (callback && callback(e) === false) {
return
}
component.callAfterModelDebounce(() => {
const el = e.target
directive.setEventContext(e)
// This is outside the conditional below so "wire:click.prevent" without
// a value still prevents default.
this.preventAndStop(e, directive.modifiers)
const method = directive.method
let params = directive.params
if (
params.length === 0 &&
e instanceof CustomEvent &&
e.detail
) {
params.push(e.detail)
}
// Check for global event emission.
if (method === '$emit') {
component.scopedListeners.call(...params)
store.emit(...params)
return
}
if (method === '$emitUp') {
store.emitUp(el, ...params)
return
}
if (method === '$emitSelf') {
store.emitSelf(component.id, ...params)
return
}
if (method === '$emitTo') {
store.emitTo(...params)
return
}
if (directive.value) {
component.addAction(new MethodAction(method, params, el))
}
})
}
const debounceIf = (condition, callback, time) => {
return condition ? debounce(callback, time) : callback
}
const hasDebounceModifier = directive.modifiers.includes('debounce')
const debouncedHandler = debounceIf(
hasDebounceModifier,
handler,
directive.durationOr(150)
)
el.addEventListener(event, debouncedHandler)
component.addListenerForTeardown(() => {
el.removeEventListener(event, debouncedHandler)
})
},
preventAndStop(event, modifiers) {
modifiers.includes('prevent') && event.preventDefault()
modifiers.includes('stop') && event.stopPropagation()
},
}