var htmx = (function() {
'use strict'
// Public API
//* * @type {import("./htmx").HtmxApi} */
const htmx = {
/* Event processing */
onLoad: onLoadHelper,
process: processNode,
on: addEventListenerImpl,
off: removeEventListenerImpl,
trigger: triggerEvent,
ajax: ajaxHelper,
/* DOM querying helpers */
find,
findAll,
closest,
values: function(elt, type) {
const inputValues = getInputValues(elt, type || 'post')
return inputValues.values
},
/* DOM manipulation helpers */
remove: removeElement,
addClass: addClassToElement,
removeClass: removeClassFromElement,
toggleClass: toggleClassOnElement,
takeClass: takeClassForElement,
swap,
/* Extension entrypoints */
defineExtension,
removeExtension,
/* Debugging */
logAll,
logNone,
logger: null,
config: {
historyEnabled: true,
historyCacheSize: 10,
refreshOnHistoryMiss: false,
defaultSwapStyle: 'innerHTML',
defaultSwapDelay: 0,
defaultSettleDelay: 20,
includeIndicatorStyles: true,
indicatorClass: 'htmx-indicator',
requestClass: 'htmx-request',
addedClass: 'htmx-added',
settlingClass: 'htmx-settling',
swappingClass: 'htmx-swapping',
allowEval: true,
allowScriptTags: true,
inlineScriptNonce: '',
attributesToSettle: ['class', 'style', 'width', 'height'],
withCredentials: false,
timeout: 0,
wsReconnectDelay: 'full-jitter',
wsBinaryType: 'blob',
disableSelector: '[hx-disable], [data-hx-disable]',
scrollBehavior: 'instant',
defaultFocusScroll: false,
getCacheBusterParam: false,
globalViewTransitions: false,
methodsThatUseUrlParams: ['get', 'delete'],
selfRequestsOnly: true,
ignoreTitle: false,
scrollIntoViewOnBoost: true,
triggerSpecsCache: null,
disableInheritance: false,
head: {
boost: 'merge',
other: 'none'
},
responseHandling: [
{ code: '204', swap: false },
{ code: '[23]..', swap: true },
{ code: '[45]..', swap: false, error: true }
]
},
parseInterval,
_: internalEval,
version: '2.0a'
}
/** @type {import("./htmx").HtmxInternalApi} */
const internalAPI = {
addTriggerHandler,
bodyContains,
canAccessLocalStorage,
findThisElement,
filterValues,
swap,
hasAttribute,
getAttributeValue,
getClosestAttributeValue,
getClosestMatch,
getExpressionVars,
getHeaders,
getInputValues,
getInternalData,
getSwapSpecification,
getTriggerSpecs,
getTarget,
makeFragment,
mergeObjects,
makeSettleInfo,
oobSwap,
querySelectorExt,
settleImmediately,
shouldCancel,
triggerEvent,
triggerErrorEvent,
withExtensions
}
const VERBS = ['get', 'post', 'put', 'delete', 'patch']
const VERB_SELECTOR = VERBS.map(function(verb) {
return '[hx-' + verb + '], [data-hx-' + verb + ']'
}).join(', ')
const HEAD_TAG_REGEX = makeTagRegEx('head')
//= ===================================================================
// Utilities
//= ===================================================================
/**
* @param {string} tag
* @param {boolean} global
* @returns {RegExp}
*/
function makeTagRegEx(tag, global = false) {
return new RegExp(`<${tag}(\\s[^>]*>|>)([\\s\\S]*?)<\\/${tag}>`,
global ? 'gim' : 'im')
}
function parseInterval(str) {
if (str == undefined) {
return undefined
}
let interval = NaN
if (str.slice(-2) == 'ms') {
interval = parseFloat(str.slice(0, -2))
} else if (str.slice(-1) == 's') {
interval = parseFloat(str.slice(0, -1)) * 1000
} else if (str.slice(-1) == 'm') {
interval = parseFloat(str.slice(0, -1)) * 1000 * 60
} else {
interval = parseFloat(str)
}
return isNaN(interval) ? undefined : interval
}
/**
* @param {Element} elt
* @param {string} name
* @returns {(string | null)}
*/
function getRawAttribute(elt, name) {
return elt.getAttribute && elt.getAttribute(name)
}
// resolve with both hx and data-hx prefixes
function hasAttribute(elt, qualifiedName) {
return elt.hasAttribute && (elt.hasAttribute(qualifiedName) ||
elt.hasAttribute('data-' + qualifiedName))
}
/**
*
* @param {HTMLElement} elt
* @param {string} qualifiedName
* @returns {(string | null)}
*/
function getAttributeValue(elt, qualifiedName) {
return getRawAttribute(elt, qualifiedName) || getRawAttribute(elt, 'data-' + qualifiedName)
}
/**
* @param {HTMLElement} elt
* @returns {HTMLElement | ShadowRoot | null}
*/
function parentElt(elt) {
const parent = elt.parentElement
if (!parent && elt.parentNode instanceof ShadowRoot) return elt.parentNode
return parent
}
/**
* @returns {Document}
*/
function getDocument() {
return document
}
/**
* @returns {Document | ShadowRoot}
*/
function getRootNode(elt, global) {
return elt.getRootNode ? elt.getRootNode({ composed: global }) : getDocument()
}
/**
* @param {HTMLElement} elt
* @param {(e:HTMLElement) => boolean} condition
* @returns {HTMLElement | null}
*/
function getClosestMatch(elt, condition) {
while (elt && !condition(elt)) {
elt = parentElt(elt)
}
return elt || null
}
function getAttributeValueWithDisinheritance(initialElement, ancestor, attributeName) {
const attributeValue = getAttributeValue(ancestor, attributeName)
const disinherit = getAttributeValue(ancestor, 'hx-disinherit')
var inherit = getAttributeValue(ancestor, 'hx-inherit')
if (initialElement !== ancestor) {
if (htmx.config.disableInheritance) {
if (inherit && (inherit === '*' || inherit.split(' ').indexOf(attributeName) >= 0)) {
return attributeValue
} else {
return null
}
}
if (disinherit && (disinherit === '*' || disinherit.split(' ').indexOf(attributeName) >= 0)) {
return 'unset'
}
}
return attributeValue
}
/**
* @param {HTMLElement} elt
* @param {string} attributeName
* @returns {string | null}
*/
function getClosestAttributeValue(elt, attributeName) {
let closestAttr = null
getClosestMatch(elt, function(e) {
return closestAttr = getAttributeValueWithDisinheritance(elt, e, attributeName)
})
if (closestAttr !== 'unset') {
return closestAttr
}
}
/**
* @param {HTMLElement} elt
* @param {string} selector
* @returns {boolean}
*/
function matches(elt, selector) {
// @ts-ignore: non-standard properties for browser compatibility
// noinspection JSUnresolvedVariable
const matchesFunction = elt.matches || elt.matchesSelector || elt.msMatchesSelector || elt.mozMatchesSelector || elt.webkitMatchesSelector || elt.oMatchesSelector
return matchesFunction && matchesFunction.call(elt, selector)
}
/**
* @param {string} str
* @returns {string}
*/
function getStartTag(str) {
const tagMatcher = /<([a-z][^\/\0>\x20\t\r\n\f]*)/i
const match = tagMatcher.exec(str)
if (match) {
return match[1].toLowerCase()
} else {
return ''
}
}
/**
*
* @param {string} resp
* @param {number} depth
* @returns {Document}
*/
function parseHTML(resp) {
const parser = new DOMParser()
return parser.parseFromString(resp, 'text/html')
}
function takeChildrenFor(fragment, elt) {
while (elt.childNodes.length > 0) {
fragment.append(elt.childNodes[0])
}
}
/**
* @param {string} response HTML
* @returns {DocumentFragment & {title: string, head:Element}} a document fragment representing the response HTML, including
* a `head` property for any head content found
*/
function makeFragment(response) {
// strip head tag to determine shape of response we are dealing with
const head = (HEAD_TAG_REGEX.exec(response) || [''])[0]
const responseWithNoHead = response.replace(HEAD_TAG_REGEX, '')
const startTag = getStartTag(responseWithNoHead)
let fragment = null
if (startTag === 'html') {
// if it is a full document, parse it and return the body
fragment = new DocumentFragment()
const doc = parseHTML(response)
takeChildrenFor(fragment, doc.body)
fragment.head = doc.head
fragment.title = doc.title
} else if (startTag === 'body') {
// body w/ a potential head, parse head & body w/o wrapping in template
fragment = new DocumentFragment()
const doc = parseHTML(head + responseWithNoHead)
takeChildrenFor(fragment, doc.body)
fragment.head = doc.head
fragment.title = doc.title
} else {
// otherwise we have non-body content, so wrap it in a template and insert the head before the content
const doc = parseHTML(head + '' + responseWithNoHead + '')
fragment = doc.querySelector('template').content
// extract head into fragment for later processing
fragment.head = doc.head
fragment.title = doc.title
// for legacy reasons we support a title tag at the root level of non-body responses, so we need to handle it
var rootTitleElt = fragment.querySelector(':scope title')
if (rootTitleElt) {
rootTitleElt.remove()
fragment.title = rootTitleElt.innerText
}
}
if (fragment) {
if (htmx.config.allowScriptTags) {
// if there is a nonce set up, set it on the new script tags
if (htmx.config.inlineScriptNonce) {
fragment.querySelectorAll('script').forEach((script) => script.nonce = htmx.config.inlineScriptNonce)
}
} else {
// remove all script tags if scripts are disabled
fragment.querySelectorAll('script').forEach((script) => script.remove())
}
}
return fragment
}
/**
* @param {Function} func
*/
function maybeCall(func) {
if (func) {
func()
}
}
/**
* @param {any} o
* @param {string} type
* @returns
*/
function isType(o, type) {
return Object.prototype.toString.call(o) === '[object ' + type + ']'
}
/**
* @param {*} o
* @returns {o is Function}
*/
function isFunction(o) {
return isType(o, 'Function')
}
/**
* @param {*} o
* @returns {o is Object}
*/
function isRawObject(o) {
return isType(o, 'Object')
}
/**
* getInternalData retrieves "private" data stored by htmx within an element
* @param {HTMLElement} elt
* @returns {*}
*/
function getInternalData(elt) {
const dataProp = 'htmx-internal-data'
let data = elt[dataProp]
if (!data) {
data = elt[dataProp] = {}
}
return data
}
/**
* toArray converts an ArrayLike object into a real array.
* @param {ArrayLike} arr
* @returns {any[]}
*/
function toArray(arr) {
const returnArr = []
if (arr) {
for (let i = 0; i < arr.length; i++) {
returnArr.push(arr[i])
}
}
return returnArr
}
/**
* @template T
* @callback forEachCallback
* @param {T} value
*/
/**
* @template T
* @param {{[index: number]: T, length: number}} arr
* @param {forEachCallback} func
*/
function forEach(arr, func) {
if (arr) {
for (let i = 0; i < arr.length; i++) {
func(arr[i])
}
}
}
function isScrolledIntoView(el) {
const rect = el.getBoundingClientRect()
const elemTop = rect.top
const elemBottom = rect.bottom
return elemTop < window.innerHeight && elemBottom >= 0
}
function bodyContains(elt) {
// IE Fix
if (elt.getRootNode && elt.getRootNode() instanceof window.ShadowRoot) {
return getDocument().body.contains(elt.getRootNode().host)
} else {
return getDocument().body.contains(elt)
}
}
function splitOnWhitespace(trigger) {
return trigger.trim().split(/\s+/)
}
/**
* mergeObjects takes all of the keys from
* obj2 and duplicates them into obj1
* @param {Object} obj1
* @param {Object} obj2
* @returns {Object}
*/
function mergeObjects(obj1, obj2) {
for (const key in obj2) {
if (obj2.hasOwnProperty(key)) {
obj1[key] = obj2[key]
}
}
return obj1
}
function parseJSON(jString) {
try {
return JSON.parse(jString)
} catch (error) {
logError(error)
return null
}
}
function canAccessLocalStorage() {
const test = 'htmx:localStorageTest'
try {
localStorage.setItem(test, test)
localStorage.removeItem(test)
return true
} catch (e) {
return false
}
}
function normalizePath(path) {
try {
const url = new URL(path)
if (url) {
path = url.pathname + url.search
}
// remove trailing slash, unless index page
if (!(/^\/$/.test(path))) {
path = path.replace(/\/+$/, '')
}
return path
} catch (e) {
// be kind to IE11, which doesn't support URL()
return path
}
}
//= =========================================================================================
// public API
//= =========================================================================================
function internalEval(str) {
return maybeEval(getDocument().body, function() {
return eval(str)
})
}
function onLoadHelper(callback) {
const value = htmx.on('htmx:load', function(evt) {
callback(evt.detail.elt)
})
return value
}
function logAll() {
htmx.logger = function(elt, event, data) {
if (console) {
console.log(event, elt, data)
}
}
}
function logNone() {
htmx.logger = null
}
function find(eltOrSelector, selector) {
if (selector) {
return eltOrSelector.querySelector(selector)
} else {
return find(getDocument(), eltOrSelector)
}
}
function findAll(eltOrSelector, selector) {
if (selector) {
return eltOrSelector.querySelectorAll(selector)
} else {
return findAll(getDocument(), eltOrSelector)
}
}
function removeElement(elt, delay) {
elt = resolveTarget(elt)
if (delay) {
setTimeout(function() {
removeElement(elt)
elt = null
}, delay)
} else {
parentElt(elt).removeChild(elt)
}
}
function addClassToElement(elt, clazz, delay) {
elt = resolveTarget(elt)
if (delay) {
setTimeout(function() {
addClassToElement(elt, clazz)
elt = null
}, delay)
} else {
elt.classList && elt.classList.add(clazz)
}
}
function removeClassFromElement(elt, clazz, delay) {
elt = resolveTarget(elt)
if (delay) {
setTimeout(function() {
removeClassFromElement(elt, clazz)
elt = null
}, delay)
} else {
if (elt.classList) {
elt.classList.remove(clazz)
// if there are no classes left, remove the class attribute
if (elt.classList.length === 0) {
elt.removeAttribute('class')
}
}
}
}
function toggleClassOnElement(elt, clazz) {
elt = resolveTarget(elt)
elt.classList.toggle(clazz)
}
function takeClassForElement(elt, clazz) {
elt = resolveTarget(elt)
forEach(elt.parentElement.children, function(child) {
removeClassFromElement(child, clazz)
})
addClassToElement(elt, clazz)
}
function closest(elt, selector) {
elt = resolveTarget(elt)
if (elt.closest) {
return elt.closest(selector)
} else {
// TODO remove when IE goes away
do {
if (elt == null || matches(elt, selector)) {
return elt
}
}
while (elt = elt && parentElt(elt))
return null
}
}
function startsWith(str, prefix) {
return str.substring(0, prefix.length) === prefix
}
function endsWith(str, suffix) {
return str.substring(str.length - suffix.length) === suffix
}
function normalizeSelector(selector) {
const trimmedSelector = selector.trim()
if (startsWith(trimmedSelector, '<') && endsWith(trimmedSelector, '/>')) {
return trimmedSelector.substring(1, trimmedSelector.length - 2)
} else {
return trimmedSelector
}
}
function querySelectorAllExt(elt, selector, global) {
if (selector.indexOf('closest ') === 0) {
return [closest(elt, normalizeSelector(selector.substr(8)))]
} else if (selector.indexOf('find ') === 0) {
return [find(elt, normalizeSelector(selector.substr(5)))]
} else if (selector === 'next') {
return [elt.nextElementSibling]
} else if (selector.indexOf('next ') === 0) {
return [scanForwardQuery(elt, normalizeSelector(selector.substr(5)), !!global)]
} else if (selector === 'previous') {
return [elt.previousElementSibling]
} else if (selector.indexOf('previous ') === 0) {
return [scanBackwardsQuery(elt, normalizeSelector(selector.substr(9)), !!global)]
} else if (selector === 'document') {
return [document]
} else if (selector === 'window') {
return [window]
} else if (selector === 'body') {
return [document.body]
} else if (selector === 'root') {
return [getRootNode(elt, !!global)]
} else if (selector.indexOf('global ') === 0) {
return querySelectorAllExt(elt, selector.slice(7), true)
} else {
return getRootNode(elt, !!global).querySelectorAll(normalizeSelector(selector))
}
}
var scanForwardQuery = function(start, match, global) {
const results = getRootNode(start, global).querySelectorAll(match)
for (let i = 0; i < results.length; i++) {
const elt = results[i]
if (elt.compareDocumentPosition(start) === Node.DOCUMENT_POSITION_PRECEDING) {
return elt
}
}
}
var scanBackwardsQuery = function(start, match, global) {
const results = getRootNode(start, global).querySelectorAll(match)
for (let i = results.length - 1; i >= 0; i--) {
const elt = results[i]
if (elt.compareDocumentPosition(start) === Node.DOCUMENT_POSITION_FOLLOWING) {
return elt
}
}
}
function querySelectorExt(eltOrSelector, selector) {
if (selector) {
return querySelectorAllExt(eltOrSelector, selector)[0]
} else {
return querySelectorAllExt(getDocument().body, eltOrSelector)[0]
}
}
/**
*
* @param {string|Element} arg2
* @param {Element} [context]
* @returns {Element}
*/
function resolveTarget(arg2, context) {
if (isType(arg2, 'String')) {
return find(context || document, arg2)
} else {
// @ts-ignore
return arg2
}
}
function processEventArgs(arg1, arg2, arg3) {
if (isFunction(arg2)) {
return {
target: getDocument().body,
event: arg1,
listener: arg2
}
} else {
return {
target: resolveTarget(arg1),
event: arg2,
listener: arg3
}
}
}
function addEventListenerImpl(arg1, arg2, arg3) {
ready(function() {
const eventArgs = processEventArgs(arg1, arg2, arg3)
eventArgs.target.addEventListener(eventArgs.event, eventArgs.listener)
})
const b = isFunction(arg2)
return b ? arg2 : arg3
}
function removeEventListenerImpl(arg1, arg2, arg3) {
ready(function() {
const eventArgs = processEventArgs(arg1, arg2, arg3)
eventArgs.target.removeEventListener(eventArgs.event, eventArgs.listener)
})
return isFunction(arg2) ? arg2 : arg3
}
//= ===================================================================
// Node processing
//= ===================================================================
const DUMMY_ELT = getDocument().createElement('output') // dummy element for bad selectors
function findAttributeTargets(elt, attrName) {
const attrTarget = getClosestAttributeValue(elt, attrName)
if (attrTarget) {
if (attrTarget === 'this') {
return [findThisElement(elt, attrName)]
} else {
const result = querySelectorAllExt(elt, attrTarget)
if (result.length === 0) {
logError('The selector "' + attrTarget + '" on ' + attrName + ' returned no matches!')
return [DUMMY_ELT]
} else {
return result
}
}
}
}
function findThisElement(elt, attribute) {
return getClosestMatch(elt, function(elt) {
return getAttributeValue(elt, attribute) != null
})
}
function getTarget(elt) {
const targetStr = getClosestAttributeValue(elt, 'hx-target')
if (targetStr) {
if (targetStr === 'this') {
return findThisElement(elt, 'hx-target')
} else {
return querySelectorExt(elt, targetStr)
}
} else {
const data = getInternalData(elt)
if (data.boosted) {
return getDocument().body
} else {
return elt
}
}
}
function shouldSettleAttribute(name) {
const attributesToSettle = htmx.config.attributesToSettle
for (let i = 0; i < attributesToSettle.length; i++) {
if (name === attributesToSettle[i]) {
return true
}
}
return false
}
function cloneAttributes(mergeTo, mergeFrom) {
forEach(mergeTo.attributes, function(attr) {
if (!mergeFrom.hasAttribute(attr.name) && shouldSettleAttribute(attr.name)) {
mergeTo.removeAttribute(attr.name)
}
})
forEach(mergeFrom.attributes, function(attr) {
if (shouldSettleAttribute(attr.name)) {
mergeTo.setAttribute(attr.name, attr.value)
}
})
}
function isInlineSwap(swapStyle, target) {
const extensions = getExtensions(target)
for (let i = 0; i < extensions.length; i++) {
const extension = extensions[i]
try {
if (extension.isInlineSwap(swapStyle)) {
return true
}
} catch (e) {
logError(e)
}
}
return swapStyle === 'outerHTML'
}
/**
*
* @param {string} oobValue
* @param {Element} oobElement
* @param {*} settleInfo
* @returns
*/
function oobSwap(oobValue, oobElement, settleInfo) {
let selector = '#' + getRawAttribute(oobElement, 'id')
let swapStyle = 'outerHTML'
if (oobValue === 'true') {
// do nothing
} else if (oobValue.indexOf(':') > 0) {
swapStyle = oobValue.substr(0, oobValue.indexOf(':'))
selector = oobValue.substr(oobValue.indexOf(':') + 1, oobValue.length)
} else {
swapStyle = oobValue
}
const targets = getDocument().querySelectorAll(selector)
if (targets) {
forEach(
targets,
function(target) {
let fragment
const oobElementClone = oobElement.cloneNode(true)
fragment = getDocument().createDocumentFragment()
fragment.appendChild(oobElementClone)
if (!isInlineSwap(swapStyle, target)) {
fragment = oobElementClone // if this is not an inline swap, we use the content of the node, not the node itself
}
const beforeSwapDetails = { shouldSwap: true, target, fragment }
if (!triggerEvent(target, 'htmx:oobBeforeSwap', beforeSwapDetails)) return
target = beforeSwapDetails.target // allow re-targeting
if (beforeSwapDetails.shouldSwap) {
swapWithStyle(swapStyle, target, target, fragment, settleInfo)
}
forEach(settleInfo.elts, function(elt) {
triggerEvent(elt, 'htmx:oobAfterSwap', beforeSwapDetails)
})
}
)
oobElement.parentNode.removeChild(oobElement)
} else {
oobElement.parentNode.removeChild(oobElement)
triggerErrorEvent(getDocument().body, 'htmx:oobErrorNoTarget', { content: oobElement })
}
return oobValue
}
function handlePreservedElements(fragment) {
forEach(findAll(fragment, '[hx-preserve], [data-hx-preserve]'), function(preservedElt) {
const id = getAttributeValue(preservedElt, 'id')
const oldElt = getDocument().getElementById(id)
if (oldElt != null) {
preservedElt.parentNode.replaceChild(oldElt, preservedElt)
}
})
}
function handleAttributes(parentNode, fragment, settleInfo) {
forEach(fragment.querySelectorAll('[id]'), function(newNode) {
const id = getRawAttribute(newNode, 'id')
if (id && id.length > 0) {
const normalizedId = id.replace("'", "\\'")
const normalizedTag = newNode.tagName.replace(':', '\\:')
const oldNode = parentNode.querySelector(normalizedTag + "[id='" + normalizedId + "']")
if (oldNode && oldNode !== parentNode) {
const newAttributes = newNode.cloneNode()
cloneAttributes(newNode, oldNode)
settleInfo.tasks.push(function() {
cloneAttributes(newNode, newAttributes)
})
}
}
})
}
function makeAjaxLoadTask(child) {
return function() {
removeClassFromElement(child, htmx.config.addedClass)
processNode(child)
processFocus(child)
triggerEvent(child, 'htmx:load')
}
}
function processFocus(child) {
const autofocus = '[autofocus]'
const autoFocusedElt = matches(child, autofocus) ? child : child.querySelector(autofocus)
if (autoFocusedElt != null) {
autoFocusedElt.focus()
}
}
function insertNodesBefore(parentNode, insertBefore, fragment, settleInfo) {
handleAttributes(parentNode, fragment, settleInfo)
while (fragment.childNodes.length > 0) {
const child = fragment.firstChild
addClassToElement(child, htmx.config.addedClass)
parentNode.insertBefore(child, insertBefore)
if (child.nodeType !== Node.TEXT_NODE && child.nodeType !== Node.COMMENT_NODE) {
settleInfo.tasks.push(makeAjaxLoadTask(child))
}
}
}
// based on https://gist.github.com/hyamamoto/fd435505d29ebfa3d9716fd2be8d42f0,
// derived from Java's string hashcode implementation
function stringHash(string, hash) {
let char = 0
while (char < string.length) {
hash = (hash << 5) - hash + string.charCodeAt(char++) | 0 // bitwise or ensures we have a 32-bit int
}
return hash
}
function attributeHash(elt) {
let hash = 0
// IE fix
if (elt.attributes) {
for (let i = 0; i < elt.attributes.length; i++) {
const attribute = elt.attributes[i]
if (attribute.value) { // only include attributes w/ actual values (empty is same as non-existent)
hash = stringHash(attribute.name, hash)
hash = stringHash(attribute.value, hash)
}
}
}
return hash
}
function deInitOnHandlers(elt) {
const internalData = getInternalData(elt)
if (internalData.onHandlers) {
for (let i = 0; i < internalData.onHandlers.length; i++) {
const handlerInfo = internalData.onHandlers[i]
elt.removeEventListener(handlerInfo.event, handlerInfo.listener)
}
delete internalData.onHandlers
}
}
function deInitNode(element) {
const internalData = getInternalData(element)
if (internalData.timeout) {
clearTimeout(internalData.timeout)
}
if (internalData.listenerInfos) {
forEach(internalData.listenerInfos, function(info) {
if (info.on) {
info.on.removeEventListener(info.trigger, info.listener)
}
})
}
deInitOnHandlers(element)
forEach(Object.keys(internalData), function(key) { delete internalData[key] })
}
function cleanUpElement(element) {
triggerEvent(element, 'htmx:beforeCleanupElement')
deInitNode(element)
if (element.children) { // IE
forEach(element.children, function(child) { cleanUpElement(child) })
}
}
function swapOuterHTML(target, fragment, settleInfo) {
// @type {HTMLElement}
let newElt
const eltBeforeNewContent = target.previousSibling
insertNodesBefore(parentElt(target), target, fragment, settleInfo)
if (eltBeforeNewContent == null) {
newElt = parentElt(target).firstChild
} else {
newElt = eltBeforeNewContent.nextSibling
}
settleInfo.elts = settleInfo.elts.filter(function(e) { return e !== target })
while (newElt && newElt !== target) {
if (newElt.nodeType === Node.ELEMENT_NODE) {
settleInfo.elts.push(newElt)
}
newElt = newElt.nextElementSibling
}
cleanUpElement(target)
target.remove()
}
function swapAfterBegin(target, fragment, settleInfo) {
return insertNodesBefore(target, target.firstChild, fragment, settleInfo)
}
function swapBeforeBegin(target, fragment, settleInfo) {
return insertNodesBefore(parentElt(target), target, fragment, settleInfo)
}
function swapBeforeEnd(target, fragment, settleInfo) {
return insertNodesBefore(target, null, fragment, settleInfo)
}
function swapAfterEnd(target, fragment, settleInfo) {
return insertNodesBefore(parentElt(target), target.nextSibling, fragment, settleInfo)
}
function swapDelete(target, fragment, settleInfo) {
cleanUpElement(target)
return parentElt(target).removeChild(target)
}
function swapInnerHTML(target, fragment, settleInfo) {
const firstChild = target.firstChild
insertNodesBefore(target, firstChild, fragment, settleInfo)
if (firstChild) {
while (firstChild.nextSibling) {
cleanUpElement(firstChild.nextSibling)
target.removeChild(firstChild.nextSibling)
}
cleanUpElement(firstChild)
target.removeChild(firstChild)
}
}
/**
* @param {string} swapStyle
* @param {HTMLElement} elt
* @param {HTMLElement} target
* @param {Node} fragment
* @param {{ tasks: (() => void)[]; }} settleInfo
*/
function swapWithStyle(swapStyle, elt, target, fragment, settleInfo) {
switch (swapStyle) {
case 'none':
return
case 'outerHTML':
swapOuterHTML(target, fragment, settleInfo)
return
case 'afterbegin':
swapAfterBegin(target, fragment, settleInfo)
return
case 'beforebegin':
swapBeforeBegin(target, fragment, settleInfo)
return
case 'beforeend':
swapBeforeEnd(target, fragment, settleInfo)
return
case 'afterend':
swapAfterEnd(target, fragment, settleInfo)
return
case 'delete':
swapDelete(target, fragment, settleInfo)
return
default:
var extensions = getExtensions(elt)
for (let i = 0; i < extensions.length; i++) {
const ext = extensions[i]
try {
const newElements = ext.handleSwap(swapStyle, target, fragment, settleInfo)
if (newElements) {
if (typeof newElements.length !== 'undefined') {
// if handleSwap returns an array (like) of elements, we handle them
for (let j = 0; j < newElements.length; j++) {
const child = newElements[j]
if (child.nodeType !== Node.TEXT_NODE && child.nodeType !== Node.COMMENT_NODE) {
settleInfo.tasks.push(makeAjaxLoadTask(child))
}
}
}
return
}
} catch (e) {
logError(e)
}
}
if (swapStyle === 'innerHTML') {
swapInnerHTML(target, fragment, settleInfo)
} else {
swapWithStyle(htmx.config.defaultSwapStyle, elt, target, fragment, settleInfo)
}
}
}
/**
* @param fragment {DocumentFragment}
* @returns String
*/
function findTitle(fragment) {
if (fragment.title) {
return fragment.title.innerText
} else if (fragment.head) {
var title = fragment.head.querySelector('title')
if (title) {
return title.innerText
}
}
}
function findAndSwapOobElements(fragment, settleInfo) {
forEach(findAll(fragment, '[hx-swap-oob], [data-hx-swap-oob]'), function(oobElement) {
const oobValue = getAttributeValue(oobElement, 'hx-swap-oob')
if (oobValue != null) {
oobSwap(oobValue, oobElement, settleInfo)
}
})
}
/**
* @callback swapCallback
*/
/**
* @typedef {Object} SwapOptions
* @property {?string} select
* @property {?string} selectOOB
* @property {?*} eventInfo
* @property {?*} anchor
* @property {?HTMLElement} contextElement
* @property {?swapCallback} afterSwapCallback
* @property {?swapCallback} afterSettleCallback
*/
/**
* Implements complete swapping pipeline, including: focus and selection preservation,
* title updates, head merging, scroll, OOB swapping, normal swapping and settling
* @param {string|Element} target
* @param {string} content
* @param {import("./htmx").HtmxSwapSpecification} swapSpec
* @param {SwapOptions} swapOptions
*/
function swap(target, content, swapSpec, swapOptions) {
if (!swapOptions) {
swapOptions = {}
}
target = resolveTarget(target)
// preserve focus and selection
const activeElt = document.activeElement
let selectionInfo = {}
try {
selectionInfo = {
elt: activeElt,
// @ts-ignore
start: activeElt ? activeElt.selectionStart : null,
// @ts-ignore
end: activeElt ? activeElt.selectionEnd : null
}
} catch (e) {
// safari issue - see https://github.com/microsoft/playwright/issues/5894
}
const settleInfo = makeSettleInfo(target)
let fragment = makeFragment(content)
settleInfo.title = fragment.title
settleInfo.head = fragment.head
// select-oob swaps
if (swapOptions.selectOOB) {
const oobSelectValues = swapOptions.selectOOB.split(',')
for (let i = 0; i < oobSelectValues.length; i++) {
const oobSelectValue = oobSelectValues[i].split(':', 2)
let id = oobSelectValue[0].trim()
if (id.indexOf('#') === 0) {
id = id.substring(1)
}
const oobValue = oobSelectValue[1] || 'true'
const oobElement = fragment.querySelector('#' + id)
if (oobElement) {
oobSwap(oobValue, oobElement, settleInfo)
}
}
}
// oob swaps
findAndSwapOobElements(fragment, settleInfo)
forEach(findAll(fragment, 'template'), function(template) {
findAndSwapOobElements(template.content, settleInfo)
if (template.content.childElementCount === 0) {
// Avoid polluting the DOM with empty templates that were only used to encapsulate oob swap
template.remove()
}
})
// normal swap
if (swapOptions.select) {
const newFragment = getDocument().createDocumentFragment()
forEach(fragment.querySelectorAll(swapOptions.select), function(node) {
newFragment.appendChild(node)
})
fragment = newFragment
}
handlePreservedElements(fragment)
swapWithStyle(swapSpec.swapStyle, swapOptions.contextElement, target, fragment, settleInfo)
// apply saved focus and selection information to swapped content
if (selectionInfo.elt &&
!bodyContains(selectionInfo.elt) &&
getRawAttribute(selectionInfo.elt, 'id')) {
const newActiveElt = document.getElementById(getRawAttribute(selectionInfo.elt, 'id'))
const focusOptions = { preventScroll: swapSpec.focusScroll !== undefined ? !swapSpec.focusScroll : !htmx.config.defaultFocusScroll }
if (newActiveElt) {
// @ts-ignore
if (selectionInfo.start && newActiveElt.setSelectionRange) {
try {
// @ts-ignore
newActiveElt.setSelectionRange(selectionInfo.start, selectionInfo.end)
} catch (e) {
// the setSelectionRange method is present on fields that don't support it, so just let this fail
}
}
newActiveElt.focus(focusOptions)
}
}
target.classList.remove(htmx.config.swappingClass)
forEach(settleInfo.elts, function(elt) {
if (elt.classList) {
elt.classList.add(htmx.config.settlingClass)
}
triggerEvent(elt, 'htmx:afterSwap', swapOptions.eventInfo)
})
if (swapOptions.afterSwapCallback) {
swapOptions.afterSwapCallback()
}
// merge in new head after swap but before settle
if (!swapSpec.ignoreTitle) {
handleTitle(settleInfo.title)
}
if (triggerEvent(document.body, 'htmx:beforeHeadMerge', { head: settleInfo.head })) {
handleHeadTag(settleInfo.head, swapSpec.head)
}
// settle
const doSettle = function() {
forEach(settleInfo.tasks, function(task) {
task.call()
})
forEach(settleInfo.elts, function(elt) {
if (elt.classList) {
elt.classList.remove(htmx.config.settlingClass)
}
triggerEvent(elt, 'htmx:afterSettle', swapOptions.eventInfo)
})
if (swapOptions.anchor) {
const anchorTarget = resolveTarget(swapOptions.anchor)
if (anchorTarget) {
anchorTarget.scrollIntoView({ block: 'start', behavior: 'auto' })
}
}
updateScrollState(settleInfo.elts, swapSpec)
if (swapOptions.afterSettleCallback) {
swapOptions.afterSettleCallback()
}
}
if (swapSpec.settleDelay > 0) {
setTimeout(doSettle, swapSpec.settleDelay)
} else {
doSettle()
}
}
function handleHeadTag(head, strategy) {
if (head && (strategy === 'merge' || strategy === 'append')) {
// allow new head to override merge strategy
const elementMergeStrategy = getAttributeValue(head, 'hx-head') || strategy
if (elementMergeStrategy === 'merge' || elementMergeStrategy === 'append') {
const removed = []
const appended = []
const currentHead = document.head
const newHeadElements = Array.from(head.children)
const srcToNewHeadNodes = newHeadElements.reduce((m, elt) => m.set(elt.outerHTML, elt), new Map())
for (const currentHeadElt of currentHead.children) {
var inNewContent = srcToNewHeadNodes.has(currentHeadElt.outerHTML)
var isReEvaluated = getAttributeValue(currentHeadElt, 'hx-head') === 're-eval'
var isPreserved = getAttributeValue(currentHeadElt, 'hx-preserve') === 'true'
// If the current head element is in the map or is preserved
if (isPreserved) {
// remove from new content if it exists
srcToNewHeadNodes.delete(currentHeadElt.outerHTML)
if (isReEvaluated) {
// remove the current version and let the new version replace it and re-execute
appended.push(currentHeadElt)
}
} else if (inNewContent) {
if (isReEvaluated) {
// remove the current version and let the new version replace it and re-execute
removed.push(currentHeadElt)
} else {
// this element already exists and should not be re-appended, so remove it from
// the new content map, preserving it in the DOM
srcToNewHeadNodes.delete(currentHeadElt.outerHTML)
}
} else {
// the current existing head element is not in the new head
if (elementMergeStrategy === 'append') {
// we are appending and this existing element is not new content
// so if and only if it is marked for re-append do we do anything
if (isReEvaluated) {
appended.push(currentHeadElt)
}
} else {
// if this is a merge, we remove this content since it is not in the new head
if (triggerEvent(document.body, 'htmx:removingHeadElement', { headElement: currentHeadElt }) !== false) {
removed.push(currentHeadElt)
}
}
}
}
// Push the remaining new head elements in the Map into the
// nodes to append to the head tag
appended.push(...srcToNewHeadNodes.values())
for (const node of appended) {
if (triggerEvent(document.body, 'htmx:addingHeadElement', { headElement: node }) !== false) {
currentHead.appendChild(node)
}
}
// remove all removed elements, after we have appended the new elements to avoid
// additional network requests for things like style sheets
for (const removedElement of removed) {
if (triggerEvent(document.body, 'htmx:removingHeadElement', { headElement: removedElement }) !== false) {
currentHead.removeChild(removedElement)
}
}
triggerEvent(document.body, 'htmx:afterHeadMerge', { appended, removed })
}
}
}
function handleTriggerHeader(xhr, header, elt) {
const triggerBody = xhr.getResponseHeader(header)
if (triggerBody.indexOf('{') === 0) {
const triggers = parseJSON(triggerBody)
for (const eventName in triggers) {
if (triggers.hasOwnProperty(eventName)) {
let detail = triggers[eventName]
if (!isRawObject(detail)) {
detail = { value: detail }
}
triggerEvent(elt, eventName, detail)
}
}
} else {
const eventNames = triggerBody.split(',')
for (let i = 0; i < eventNames.length; i++) {
triggerEvent(elt, eventNames[i].trim(), [])
}
}
}
const WHITESPACE = /\s/
const WHITESPACE_OR_COMMA = /[\s,]/
const SYMBOL_START = /[_$a-zA-Z]/
const SYMBOL_CONT = /[_$a-zA-Z0-9]/
const STRINGISH_START = ['"', "'", '/']
const NOT_WHITESPACE = /[^\s]/
const COMBINED_SELECTOR_START = /[{(]/
const COMBINED_SELECTOR_END = /[})]/
function tokenizeString(str) {
const tokens = []
let position = 0
while (position < str.length) {
if (SYMBOL_START.exec(str.charAt(position))) {
var startPosition = position
while (SYMBOL_CONT.exec(str.charAt(position + 1))) {
position++
}
tokens.push(str.substr(startPosition, position - startPosition + 1))
} else if (STRINGISH_START.indexOf(str.charAt(position)) !== -1) {
const startChar = str.charAt(position)
var startPosition = position
position++
while (position < str.length && str.charAt(position) !== startChar) {
if (str.charAt(position) === '\\') {
position++
}
position++
}
tokens.push(str.substr(startPosition, position - startPosition + 1))
} else {
const symbol = str.charAt(position)
tokens.push(symbol)
}
position++
}
return tokens
}
function isPossibleRelativeReference(token, last, paramName) {
return SYMBOL_START.exec(token.charAt(0)) &&
token !== 'true' &&
token !== 'false' &&
token !== 'this' &&
token !== paramName &&
last !== '.'
}
function maybeGenerateConditional(elt, tokens, paramName) {
if (tokens[0] === '[') {
tokens.shift()
let bracketCount = 1
let conditionalSource = ' return (function(' + paramName + '){ return ('
let last = null
while (tokens.length > 0) {
const token = tokens[0]
if (token === ']') {
bracketCount--
if (bracketCount === 0) {
if (last === null) {
conditionalSource = conditionalSource + 'true'
}
tokens.shift()
conditionalSource += ')})'
try {
const conditionFunction = maybeEval(elt, function() {
return Function(conditionalSource)()
},
function() { return true })
conditionFunction.source = conditionalSource
return conditionFunction
} catch (e) {
triggerErrorEvent(getDocument().body, 'htmx:syntax:error', { error: e, source: conditionalSource })
return null
}
}
} else if (token === '[') {
bracketCount++
}
if (isPossibleRelativeReference(token, last, paramName)) {
conditionalSource += '((' + paramName + '.' + token + ') ? (' + paramName + '.' + token + ') : (window.' + token + '))'
} else {
conditionalSource = conditionalSource + token
}
last = tokens.shift()
}
}
}
function consumeUntil(tokens, match) {
let result = ''
while (tokens.length > 0 && !match.test(tokens[0])) {
result += tokens.shift()
}
return result
}
function consumeCSSSelector(tokens) {
let result
if (tokens.length > 0 && COMBINED_SELECTOR_START.test(tokens[0])) {
tokens.shift()
result = consumeUntil(tokens, COMBINED_SELECTOR_END).trim()
tokens.shift()
} else {
result = consumeUntil(tokens, WHITESPACE_OR_COMMA)
}
return result
}
const INPUT_SELECTOR = 'input, textarea, select'
/**
* @param {HTMLElement} elt
* @param {string} explicitTrigger
* @param {cache} cache for trigger specs
* @returns {import("./htmx").HtmxTriggerSpecification[]}
*/
function parseAndCacheTrigger(elt, explicitTrigger, cache) {
const triggerSpecs = []
const tokens = tokenizeString(explicitTrigger)
do {
consumeUntil(tokens, NOT_WHITESPACE)
const initialLength = tokens.length
const trigger = consumeUntil(tokens, /[,\[\s]/)
if (trigger !== '') {
if (trigger === 'every') {
const every = { trigger: 'every' }
consumeUntil(tokens, NOT_WHITESPACE)
every.pollInterval = parseInterval(consumeUntil(tokens, /[,\[\s]/))
consumeUntil(tokens, NOT_WHITESPACE)
var eventFilter = maybeGenerateConditional(elt, tokens, 'event')
if (eventFilter) {
every.eventFilter = eventFilter
}
triggerSpecs.push(every)
} else {
const triggerSpec = { trigger }
var eventFilter = maybeGenerateConditional(elt, tokens, 'event')
if (eventFilter) {
triggerSpec.eventFilter = eventFilter
}
while (tokens.length > 0 && tokens[0] !== ',') {
consumeUntil(tokens, NOT_WHITESPACE)
const token = tokens.shift()
if (token === 'changed') {
triggerSpec.changed = true
} else if (token === 'once') {
triggerSpec.once = true
} else if (token === 'consume') {
triggerSpec.consume = true
} else if (token === 'delay' && tokens[0] === ':') {
tokens.shift()
triggerSpec.delay = parseInterval(consumeUntil(tokens, WHITESPACE_OR_COMMA))
} else if (token === 'from' && tokens[0] === ':') {
tokens.shift()
if (COMBINED_SELECTOR_START.test(tokens[0])) {
var from_arg = consumeCSSSelector(tokens)
} else {
var from_arg = consumeUntil(tokens, WHITESPACE_OR_COMMA)
if (from_arg === 'closest' || from_arg === 'find' || from_arg === 'next' || from_arg === 'previous') {
tokens.shift()
const selector = consumeCSSSelector(tokens)
// `next` and `previous` allow a selector-less syntax
if (selector.length > 0) {
from_arg += ' ' + selector
}
}
}
triggerSpec.from = from_arg
} else if (token === 'target' && tokens[0] === ':') {
tokens.shift()
triggerSpec.target = consumeCSSSelector(tokens)
} else if (token === 'throttle' && tokens[0] === ':') {
tokens.shift()
triggerSpec.throttle = parseInterval(consumeUntil(tokens, WHITESPACE_OR_COMMA))
} else if (token === 'queue' && tokens[0] === ':') {
tokens.shift()
triggerSpec.queue = consumeUntil(tokens, WHITESPACE_OR_COMMA)
} else if (token === 'root' && tokens[0] === ':') {
tokens.shift()
triggerSpec[token] = consumeCSSSelector(tokens)
} else if (token === 'threshold' && tokens[0] === ':') {
tokens.shift()
triggerSpec[token] = consumeUntil(tokens, WHITESPACE_OR_COMMA)
} else {
triggerErrorEvent(elt, 'htmx:syntax:error', { token: tokens.shift() })
}
}
triggerSpecs.push(triggerSpec)
}
}
if (tokens.length === initialLength) {
triggerErrorEvent(elt, 'htmx:syntax:error', { token: tokens.shift() })
}
consumeUntil(tokens, NOT_WHITESPACE)
} while (tokens[0] === ',' && tokens.shift())
if (cache) {
cache[explicitTrigger] = triggerSpecs
}
return triggerSpecs
}
/**
* @param {HTMLElement} elt
* @returns {import("./htmx").HtmxTriggerSpecification[]}
*/
function getTriggerSpecs(elt) {
const explicitTrigger = getAttributeValue(elt, 'hx-trigger')
let triggerSpecs = []
if (explicitTrigger) {
const cache = htmx.config.triggerSpecsCache
triggerSpecs = (cache && cache[explicitTrigger]) || parseAndCacheTrigger(elt, explicitTrigger, cache)
}
if (triggerSpecs.length > 0) {
return triggerSpecs
} else if (matches(elt, 'form')) {
return [{ trigger: 'submit' }]
} else if (matches(elt, 'input[type="button"], input[type="submit"]')) {
return [{ trigger: 'click' }]
} else if (matches(elt, INPUT_SELECTOR)) {
return [{ trigger: 'change' }]
} else {
return [{ trigger: 'click' }]
}
}
function cancelPolling(elt) {
getInternalData(elt).cancelled = true
}
function processPolling(elt, handler, spec) {
const nodeData = getInternalData(elt)
nodeData.timeout = setTimeout(function() {
if (bodyContains(elt) && nodeData.cancelled !== true) {
if (!maybeFilterEvent(spec, elt, makeEvent('hx:poll:trigger', {
triggerSpec: spec,
target: elt
}))) {
handler(elt)
}
processPolling(elt, handler, spec)
}
}, spec.pollInterval)
}
function isLocalLink(elt) {
return location.hostname === elt.hostname &&
getRawAttribute(elt, 'href') &&
getRawAttribute(elt, 'href').indexOf('#') !== 0
}
function boostElement(elt, nodeData, triggerSpecs) {
if ((elt.tagName === 'A' && isLocalLink(elt) && (elt.target === '' || elt.target === '_self')) || elt.tagName === 'FORM') {
nodeData.boosted = true
let verb, path
if (elt.tagName === 'A') {
verb = 'get'
path = getRawAttribute(elt, 'href')
} else {
const rawAttribute = getRawAttribute(elt, 'method')
verb = rawAttribute ? rawAttribute.toLowerCase() : 'get'
if (verb === 'get') {
}
path = getRawAttribute(elt, 'action')
}
triggerSpecs.forEach(function(triggerSpec) {
addEventListener(elt, function(elt, evt) {
if (closest(elt, htmx.config.disableSelector)) {
cleanUpElement(elt)
return
}
issueAjaxRequest(verb, path, elt, evt)
}, nodeData, triggerSpec, true)
})
}
}
/**
*
* @param {Event} evt
* @param {HTMLElement} elt
* @returns
*/
function shouldCancel(evt, elt) {
if (evt.type === 'submit' || evt.type === 'click') {
if (elt.tagName === 'FORM') {
return true
}
if (matches(elt, 'input[type="submit"], button') && closest(elt, 'form') !== null) {
return true
}
if (elt.tagName === 'A' && elt.href &&
(elt.getAttribute('href') === '#' || elt.getAttribute('href').indexOf('#') !== 0)) {
return true
}
}
return false
}
function ignoreBoostedAnchorCtrlClick(elt, evt) {
return getInternalData(elt).boosted && elt.tagName === 'A' && evt.type === 'click' && (evt.ctrlKey || evt.metaKey)
}
function maybeFilterEvent(triggerSpec, elt, evt) {
const eventFilter = triggerSpec.eventFilter
if (eventFilter) {
try {
return eventFilter.call(elt, evt) !== true
} catch (e) {
triggerErrorEvent(getDocument().body, 'htmx:eventFilter:error', { error: e, source: eventFilter.source })
return true
}
}
return false
}
function addEventListener(elt, handler, nodeData, triggerSpec, explicitCancel) {
const elementData = getInternalData(elt)
let eltsToListenOn
if (triggerSpec.from) {
eltsToListenOn = querySelectorAllExt(elt, triggerSpec.from)
} else {
eltsToListenOn = [elt]
}
// store the initial values of the elements, so we can tell if they change
if (triggerSpec.changed) {
eltsToListenOn.forEach(function(eltToListenOn) {
const eltToListenOnData = getInternalData(eltToListenOn)
eltToListenOnData.lastValue = eltToListenOn.value
})
}
forEach(eltsToListenOn, function(eltToListenOn) {
const eventListener = function(evt) {
if (!bodyContains(elt)) {
eltToListenOn.removeEventListener(triggerSpec.trigger, eventListener)
return
}
if (ignoreBoostedAnchorCtrlClick(elt, evt)) {
return
}
if (explicitCancel || shouldCancel(evt, elt)) {
evt.preventDefault()
}
if (maybeFilterEvent(triggerSpec, elt, evt)) {
return
}
const eventData = getInternalData(evt)
eventData.triggerSpec = triggerSpec
if (eventData.handledFor == null) {
eventData.handledFor = []
}
if (eventData.handledFor.indexOf(elt) < 0) {
eventData.handledFor.push(elt)
if (triggerSpec.consume) {
evt.stopPropagation()
}
if (triggerSpec.target && evt.target) {
if (!matches(evt.target, triggerSpec.target)) {
return
}
}
if (triggerSpec.once) {
if (elementData.triggeredOnce) {
return
} else {
elementData.triggeredOnce = true
}
}
if (triggerSpec.changed) {
const eltToListenOnData = getInternalData(eltToListenOn)
if (eltToListenOnData.lastValue === eltToListenOn.value) {
return
}
eltToListenOnData.lastValue = eltToListenOn.value
}
if (elementData.delayed) {
clearTimeout(elementData.delayed)
}
if (elementData.throttle) {
return
}
if (triggerSpec.throttle > 0) {
if (!elementData.throttle) {
handler(elt, evt)
elementData.throttle = setTimeout(function() {
elementData.throttle = null
}, triggerSpec.throttle)
}
} else if (triggerSpec.delay > 0) {
elementData.delayed = setTimeout(function() { handler(elt, evt) }, triggerSpec.delay)
} else {
triggerEvent(elt, 'htmx:trigger')
handler(elt, evt)
}
}
}
if (nodeData.listenerInfos == null) {
nodeData.listenerInfos = []
}
nodeData.listenerInfos.push({
trigger: triggerSpec.trigger,
listener: eventListener,
on: eltToListenOn
})
eltToListenOn.addEventListener(triggerSpec.trigger, eventListener)
})
}
let windowIsScrolling = false // used by initScrollHandler
let scrollHandler = null
function initScrollHandler() {
if (!scrollHandler) {
scrollHandler = function() {
windowIsScrolling = true
}
window.addEventListener('scroll', scrollHandler)
setInterval(function() {
if (windowIsScrolling) {
windowIsScrolling = false
forEach(getDocument().querySelectorAll("[hx-trigger*='revealed'],[data-hx-trigger*='revealed']"), function(elt) {
maybeReveal(elt)
})
}
}, 200)
}
}
function maybeReveal(elt) {
if (!hasAttribute(elt, 'data-hx-revealed') && isScrolledIntoView(elt)) {
elt.setAttribute('data-hx-revealed', 'true')
const nodeData = getInternalData(elt)
if (nodeData.initHash) {
triggerEvent(elt, 'revealed')
} else {
// if the node isn't initialized, wait for it before triggering the request
elt.addEventListener('htmx:afterProcessNode', function(evt) { triggerEvent(elt, 'revealed') }, { once: true })
}
}
}
//= ===================================================================
function loadImmediately(elt, handler, nodeData, delay) {
const load = function() {
if (!nodeData.loaded) {
nodeData.loaded = true
handler(elt)
}
}
if (delay > 0) {
setTimeout(load, delay)
} else {
load()
}
}
function processVerbs(elt, nodeData, triggerSpecs) {
let explicitAction = false
forEach(VERBS, function(verb) {
if (hasAttribute(elt, 'hx-' + verb)) {
const path = getAttributeValue(elt, 'hx-' + verb)
explicitAction = true
nodeData.path = path
nodeData.verb = verb
triggerSpecs.forEach(function(triggerSpec) {
addTriggerHandler(elt, triggerSpec, nodeData, function(elt, evt) {
if (closest(elt, htmx.config.disableSelector)) {
cleanUpElement(elt)
return
}
issueAjaxRequest(verb, path, elt, evt)
})
})
}
})
return explicitAction
}
function addTriggerHandler(elt, triggerSpec, nodeData, handler) {
if (triggerSpec.trigger === 'revealed') {
initScrollHandler()
addEventListener(elt, handler, nodeData, triggerSpec)
maybeReveal(elt)
} else if (triggerSpec.trigger === 'intersect') {
const observerOptions = {}
if (triggerSpec.root) {
observerOptions.root = querySelectorExt(elt, triggerSpec.root)
}
if (triggerSpec.threshold) {
observerOptions.threshold = parseFloat(triggerSpec.threshold)
}
const observer = new IntersectionObserver(function(entries) {
for (let i = 0; i < entries.length; i++) {
const entry = entries[i]
if (entry.isIntersecting) {
triggerEvent(elt, 'intersect')
break
}
}
}, observerOptions)
observer.observe(elt)
addEventListener(elt, handler, nodeData, triggerSpec)
} else if (triggerSpec.trigger === 'load') {
if (!maybeFilterEvent(triggerSpec, elt, makeEvent('load', { elt }))) {
loadImmediately(elt, handler, nodeData, triggerSpec.delay)
}
} else if (triggerSpec.pollInterval > 0) {
nodeData.polling = true
processPolling(elt, handler, triggerSpec)
} else {
addEventListener(elt, handler, nodeData, triggerSpec)
}
}
function shouldProcessHxOn(elt) {
const attributes = elt.attributes
for (let j = 0; j < attributes.length; j++) {
const attrName = attributes[j].name
if (startsWith(attrName, 'hx-on:') || startsWith(attrName, 'data-hx-on:') ||
startsWith(attrName, 'hx-on-') || startsWith(attrName, 'data-hx-on-')) {
return true
}
}
return false
}
function findHxOnWildcardElements(elt) {
let node = null
const elements = []
if (!(elt instanceof ShadowRoot)) {
if (shouldProcessHxOn(elt)) {
elements.push(elt)
}
const iter = document.evaluate('.//*[@*[ starts-with(name(), "hx-on:") or starts-with(name(), "data-hx-on:") or' +
' starts-with(name(), "hx-on-") or starts-with(name(), "data-hx-on-") ]]', elt)
while (node = iter.iterateNext()) elements.push(node)
}
return elements
}
function findElementsToProcess(elt) {
if (elt.querySelectorAll) {
const boostedSelector = ', [hx-boost] a, [data-hx-boost] a, a[hx-boost], a[data-hx-boost]'
const results = elt.querySelectorAll(VERB_SELECTOR + boostedSelector + ", form, [type='submit']," +
' [hx-ext], [data-hx-ext], [hx-trigger], [data-hx-trigger]')
return results
} else {
return []
}
}
// Handle submit buttons/inputs that have the form attribute set
// see https://developer.mozilla.org/docs/Web/HTML/Element/button
function maybeSetLastButtonClicked(evt) {
const elt = closest(evt.target, "button, input[type='submit']")
const internalData = getRelatedFormData(evt)
if (internalData) {
internalData.lastButtonClicked = elt
}
};
function maybeUnsetLastButtonClicked(evt) {
const internalData = getRelatedFormData(evt)
if (internalData) {
internalData.lastButtonClicked = null
}
}
function getRelatedFormData(evt) {
const elt = closest(evt.target, "button, input[type='submit']")
if (!elt) {
return
}
const form = resolveTarget('#' + getRawAttribute(elt, 'form'), elt.getRootNode()) || closest(elt, 'form')
if (!form) {
return
}
return getInternalData(form)
}
function initButtonTracking(elt) {
// need to handle both click and focus in:
// focusin - in case someone tabs in to a button and hits the space bar
// click - on OSX buttons do not focus on click see https://bugs.webkit.org/show_bug.cgi?id=13724
elt.addEventListener('click', maybeSetLastButtonClicked)
elt.addEventListener('focusin', maybeSetLastButtonClicked)
elt.addEventListener('focusout', maybeUnsetLastButtonClicked)
}
function countCurlies(line) {
const tokens = tokenizeString(line)
let netCurlies = 0
for (let i = 0; i < tokens.length; i++) {
const token = tokens[i]
if (token === '{') {
netCurlies++
} else if (token === '}') {
netCurlies--
}
}
return netCurlies
}
function addHxOnEventHandler(elt, eventName, code) {
const nodeData = getInternalData(elt)
if (!Array.isArray(nodeData.onHandlers)) {
nodeData.onHandlers = []
}
let func
const listener = function(e) {
return maybeEval(elt, function() {
if (!func) {
func = new Function('event', code)
}
func.call(elt, e)
})
}
elt.addEventListener(eventName, listener)
nodeData.onHandlers.push({ event: eventName, listener })
}
function processHxOnWildcard(elt) {
// wipe any previous on handlers so that this function takes precedence
deInitOnHandlers(elt)
for (let i = 0; i < elt.attributes.length; i++) {
const name = elt.attributes[i].name
const value = elt.attributes[i].value
if (startsWith(name, 'hx-on') || startsWith(name, 'data-hx-on')) {
const afterOnPosition = name.indexOf('-on') + 3
const nextChar = name.slice(afterOnPosition, afterOnPosition + 1)
if (nextChar === '-' || nextChar === ':') {
let eventName = name.slice(afterOnPosition + 1)
// if the eventName starts with a colon or dash, prepend "htmx" for shorthand support
if (startsWith(eventName, ':')) {
eventName = 'htmx' + eventName
} else if (startsWith(eventName, '-')) {
eventName = 'htmx:' + eventName.slice(1)
} else if (startsWith(eventName, 'htmx-')) {
eventName = 'htmx:' + eventName.slice(5)
}
addHxOnEventHandler(elt, eventName, value)
}
}
}
}
function initNode(elt) {
if (closest(elt, htmx.config.disableSelector)) {
cleanUpElement(elt)
return
}
const nodeData = getInternalData(elt)
if (nodeData.initHash !== attributeHash(elt)) {
// clean up any previously processed info
deInitNode(elt)
nodeData.initHash = attributeHash(elt)
triggerEvent(elt, 'htmx:beforeProcessNode')
if (elt.value) {
nodeData.lastValue = elt.value
}
const triggerSpecs = getTriggerSpecs(elt)
const hasExplicitHttpAction = processVerbs(elt, nodeData, triggerSpecs)
if (!hasExplicitHttpAction) {
if (getClosestAttributeValue(elt, 'hx-boost') === 'true') {
boostElement(elt, nodeData, triggerSpecs)
} else if (hasAttribute(elt, 'hx-trigger')) {
triggerSpecs.forEach(function(triggerSpec) {
// For "naked" triggers, don't do anything at all
addTriggerHandler(elt, triggerSpec, nodeData, function() {
})
})
}
}
// Handle submit buttons/inputs that have the form attribute set
// see https://developer.mozilla.org/docs/Web/HTML/Element/button
if (elt.tagName === 'FORM' || (getRawAttribute(elt, 'type') === 'submit' && hasAttribute(elt, 'form'))) {
initButtonTracking(elt)
}
triggerEvent(elt, 'htmx:afterProcessNode')
}
}
function processNode(elt) {
elt = resolveTarget(elt)
if (closest(elt, htmx.config.disableSelector)) {
cleanUpElement(elt)
return
}
initNode(elt)
forEach(findElementsToProcess(elt), function(child) { initNode(child) })
forEach(findHxOnWildcardElements(elt), processHxOnWildcard)
}
//= ===================================================================
// Event/Log Support
//= ===================================================================
function kebabEventName(str) {
return str.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase()
}
function makeEvent(eventName, detail) {
let evt
if (window.CustomEvent && typeof window.CustomEvent === 'function') {
// TODO: `composed: true` here is a hack to make global event handlers work with events in shadow DOM
// This breaks expected encapsulation but needs to be here until decided otherwise by core devs
evt = new CustomEvent(eventName, { bubbles: true, cancelable: true, composed: true, detail })
} else {
evt = getDocument().createEvent('CustomEvent')
evt.initCustomEvent(eventName, true, true, detail)
}
return evt
}
function triggerErrorEvent(elt, eventName, detail) {
triggerEvent(elt, eventName, mergeObjects({ error: eventName }, detail))
}
function ignoreEventForLogging(eventName) {
return eventName === 'htmx:afterProcessNode'
}
/**
* `withExtensions` locates all active extensions for a provided element, then
* executes the provided function using each of the active extensions. It should
* be called internally at every extendable execution point in htmx.
*
* @param {HTMLElement} elt
* @param {(extension:import("./htmx").HtmxExtension) => void} toDo
* @returns void
*/
function withExtensions(elt, toDo) {
forEach(getExtensions(elt), function(extension) {
try {
toDo(extension)
} catch (e) {
logError(e)
}
})
}
function logError(msg) {
if (console.error) {
console.error(msg)
} else if (console.log) {
console.log('ERROR: ', msg)
}
}
function triggerEvent(elt, eventName, detail) {
elt = resolveTarget(elt)
if (detail == null) {
detail = {}
}
detail.elt = elt
const event = makeEvent(eventName, detail)
if (htmx.logger && !ignoreEventForLogging(eventName)) {
htmx.logger(elt, eventName, detail)
}
if (detail.error) {
logError(detail.error)
triggerEvent(elt, 'htmx:error', { errorInfo: detail })
}
let eventResult = elt.dispatchEvent(event)
const kebabName = kebabEventName(eventName)
if (eventResult && kebabName !== eventName) {
const kebabedEvent = makeEvent(kebabName, event.detail)
eventResult = eventResult && elt.dispatchEvent(kebabedEvent)
}
withExtensions(elt, function(extension) {
eventResult = eventResult && (extension.onEvent(eventName, event) !== false && !event.defaultPrevented)
})
return eventResult
}
//= ===================================================================
// History Support
//= ===================================================================
let currentPathForHistory = location.pathname + location.search
function getHistoryElement() {
const historyElt = getDocument().querySelector('[hx-history-elt],[data-hx-history-elt]')
return historyElt || getDocument().body
}
function saveToHistoryCache(url, rootElt) {
if (!canAccessLocalStorage()) {
return
}
// get state to save
const innerHTML = cleanInnerHtmlForHistory(rootElt)
const head = getDocument().head.outerHTML
const title = getDocument().title
const scroll = window.scrollY
if (htmx.config.historyCacheSize <= 0) {
// make sure that an eventually already existing cache is purged
localStorage.removeItem('htmx-history-cache')
return
}
url = normalizePath(url)
const historyCache = parseJSON(localStorage.getItem('htmx-history-cache')) || []
for (let i = 0; i < historyCache.length; i++) {
if (historyCache[i].url === url) {
historyCache.splice(i, 1)
break
}
}
// final content will be the head tag + the inner HTML of the current history element
const content = head + innerHTML
const newHistoryItem = { url, content, title, scroll }
triggerEvent(getDocument().body, 'htmx:historyItemCreated', { item: newHistoryItem, cache: historyCache })
historyCache.push(newHistoryItem)
while (historyCache.length > htmx.config.historyCacheSize) {
historyCache.shift()
}
// keep trying to save the cache until it succeeds or is empty
while (historyCache.length > 0) {
try {
localStorage.setItem('htmx-history-cache', JSON.stringify(historyCache))
break
} catch (e) {
triggerErrorEvent(getDocument().body, 'htmx:historyCacheError', { cause: e, cache: historyCache })
historyCache.shift() // shrink the cache and retry
}
}
}
function getCachedHistory(url) {
if (!canAccessLocalStorage()) {
return null
}
url = normalizePath(url)
const historyCache = parseJSON(localStorage.getItem('htmx-history-cache')) || []
for (let i = 0; i < historyCache.length; i++) {
if (historyCache[i].url === url) {
return historyCache[i]
}
}
return null
}
function cleanInnerHtmlForHistory(elt) {
const className = htmx.config.requestClass
const clone = elt.cloneNode(true)
forEach(findAll(clone, '.' + className), function(child) {
removeClassFromElement(child, className)
})
return clone.innerHTML
}
function saveCurrentPageToHistory() {
const elt = getHistoryElement()
const path = currentPathForHistory || location.pathname + location.search
// Allow history snapshot feature to be disabled where hx-history="false"
// is present *anywhere* in the current document we're about to save,
// so we can prevent privileged data entering the cache.
// The page will still be reachable as a history entry, but htmx will fetch it
// live from the server onpopstate rather than look in the localStorage cache
let disableHistoryCache
try {
disableHistoryCache = getDocument().querySelector('[hx-history="false" i],[data-hx-history="false" i]')
} catch (e) {
// IE11: insensitive modifier not supported so fallback to case sensitive selector
disableHistoryCache = getDocument().querySelector('[hx-history="false"],[data-hx-history="false"]')
}
if (!disableHistoryCache) {
triggerEvent(getDocument().body, 'htmx:beforeHistorySave', { path, historyElt: elt })
saveToHistoryCache(path, elt)
}
if (htmx.config.historyEnabled) history.replaceState({ htmx: true }, getDocument().title, window.location.href)
}
function pushUrlIntoHistory(path) {
// remove the cache buster parameter, if any
if (htmx.config.getCacheBusterParam) {
path = path.replace(/org\.htmx\.cache-buster=[^&]*&?/, '')
if (endsWith(path, '&') || endsWith(path, '?')) {
path = path.slice(0, -1)
}
}
if (htmx.config.historyEnabled) {
history.pushState({ htmx: true }, '', path)
}
currentPathForHistory = path
}
function replaceUrlInHistory(path) {
if (htmx.config.historyEnabled) history.replaceState({ htmx: true }, '', path)
currentPathForHistory = path
}
function settleImmediately(tasks) {
forEach(tasks, function(task) {
task.call()
})
}
function loadHistoryFromServer(path) {
const request = new XMLHttpRequest()
const details = { path, xhr: request }
triggerEvent(getDocument().body, 'htmx:historyCacheMiss', details)
request.open('GET', path, true)
request.setRequestHeader('HX-Request', 'true')
request.setRequestHeader('HX-History-Restore-Request', 'true')
request.setRequestHeader('HX-Current-URL', getDocument().location.href)
request.onload = function() {
if (this.status >= 200 && this.status < 400) {
triggerEvent(getDocument().body, 'htmx:historyCacheMissLoad', details)
const fragment = makeFragment(this.response)
// @ts-ignore
const content = fragment.querySelector('[hx-history-elt],[data-hx-history-elt]') || fragment
const historyElement = getHistoryElement()
const settleInfo = makeSettleInfo(historyElement)
handleTitle(fragment.title)
handleHeadTag(fragment.head, htmx.config.head.boost)
// @ts-ignore
swapInnerHTML(historyElement, content, settleInfo)
settleImmediately(settleInfo.tasks)
currentPathForHistory = path
triggerEvent(getDocument().body, 'htmx:historyRestore', { path, cacheMiss: true, serverResponse: this.response })
} else {
triggerErrorEvent(getDocument().body, 'htmx:historyCacheMissLoadError', details)
}
}
request.send()
}
function restoreHistory(path) {
saveCurrentPageToHistory()
path = path || location.pathname + location.search
const cached = getCachedHistory(path)
if (cached) {
const fragment = makeFragment(cached.content)
const historyElement = getHistoryElement()
const settleInfo = makeSettleInfo(historyElement)
handleTitle(fragment.title)
handleHeadTag(fragment.head, htmx.config.head.boost)
swapInnerHTML(historyElement, fragment, settleInfo)
settleImmediately(settleInfo.tasks)
setTimeout(function() {
window.scrollTo(0, cached.scroll)
}, 0) // next 'tick', so browser has time to render layout
currentPathForHistory = path
triggerEvent(getDocument().body, 'htmx:historyRestore', { path, item: cached })
} else {
if (htmx.config.refreshOnHistoryMiss) {
// @ts-ignore: optional parameter in reload() function throws error
window.location.reload(true)
} else {
loadHistoryFromServer(path)
}
}
}
function addRequestIndicatorClasses(elt) {
let indicators = findAttributeTargets(elt, 'hx-indicator')
if (indicators == null) {
indicators = [elt]
}
forEach(indicators, function(ic) {
const internalData = getInternalData(ic)
internalData.requestCount = (internalData.requestCount || 0) + 1
ic.classList.add.call(ic.classList, htmx.config.requestClass)
})
return indicators
}
function disableElements(elt) {
let disabledElts = findAttributeTargets(elt, 'hx-disabled-elt')
if (disabledElts == null) {
disabledElts = []
}
forEach(disabledElts, function(disabledElement) {
const internalData = getInternalData(disabledElement)
internalData.requestCount = (internalData.requestCount || 0) + 1
disabledElement.setAttribute('disabled', '')
})
return disabledElts
}
function removeRequestIndicators(indicators, disabled) {
forEach(indicators, function(ic) {
const internalData = getInternalData(ic)
internalData.requestCount = (internalData.requestCount || 0) - 1
if (internalData.requestCount === 0) {
ic.classList.remove.call(ic.classList, htmx.config.requestClass)
}
})
forEach(disabled, function(disabledElement) {
const internalData = getInternalData(disabledElement)
internalData.requestCount = (internalData.requestCount || 0) - 1
if (internalData.requestCount === 0) {
disabledElement.removeAttribute('disabled')
}
})
}
//= ===================================================================
// Input Value Processing
//= ===================================================================
/**
* @param {HTMLElement[]} processed
* @param {HTMLElement} elt
* @returns {boolean}
*/
function haveSeenNode(processed, elt) {
for (let i = 0; i < processed.length; i++) {
const node = processed[i]
if (node.isSameNode(elt)) {
return true
}
}
return false
}
function shouldInclude(elt) {
if (elt.name === '' || elt.name == null || elt.disabled || closest(elt, 'fieldset[disabled]')) {
return false
}
// ignore "submitter" types (see jQuery src/serialize.js)
if (elt.type === 'button' || elt.type === 'submit' || elt.tagName === 'image' || elt.tagName === 'reset' || elt.tagName === 'file') {
return false
}
if (elt.type === 'checkbox' || elt.type === 'radio') {
return elt.checked
}
return true
}
/** @param {string} name
* @param {string|Array} value
* @param {FormData} formData */
function addValueToFormData(name, value, formData) {
if (name != null && value != null) {
if (Array.isArray(value)) {
value.forEach(function(v) { formData.append(name, v) })
} else {
formData.append(name, value)
}
}
}
/** @param {string} name
* @param {string|Array} value
* @param {FormData} formData */
function removeValueFromFormData(name, value, formData) {
if (name != null && value != null) {
let values = formData.getAll(name)
if (Array.isArray(value)) {
values = values.filter(v => value.indexOf(v) < 0)
} else {
values = values.filter(v => v !== value)
}
formData.delete(name)
forEach(values, v => formData.append(name, v))
}
}
/**
* @param {HTMLElement[]} processed
* @param {FormData} formData
* @param {HtmxElementValidationError[]} errors
* @param {HTMLElement|HTMLInputElement|HTMLFormElement} elt
* @param {boolean} validate
*/
function processInputValue(processed, formData, errors, elt, validate) {
if (elt == null || haveSeenNode(processed, elt)) {
return
} else {
processed.push(elt)
}
if (shouldInclude(elt)) {
const name = getRawAttribute(elt, 'name')
let value = elt.value
if (elt.multiple && elt.tagName === 'SELECT') {
value = toArray(elt.querySelectorAll('option:checked')).map(function(e) { return e.value })
}
// include file inputs
if (elt.files) {
value = toArray(elt.files)
}
addValueToFormData(name, value, formData)
if (validate) {
validateElement(elt, errors)
}
}
if (matches(elt, 'form')) {
forEach(elt.elements, function(input) {
if (processed.indexOf(input) >= 0) {
// The input has already been processed and added to the values, but the FormData that will be
// constructed right after on the form, will include it once again. So remove that input's value
// now to avoid duplicates
removeValueFromFormData(input.name, input.value, formData)
} else {
processed.push(input)
}
if (validate) {
validateElement(input, errors)
}
})
new FormData(elt).forEach(function(value, name) {
addValueToFormData(name, value, formData)
})
}
}
/**
* @typedef {{elt: HTMLElement, message: string, validity: ValidityState}} HtmxElementValidationError
*/
/**
*
* @param {HTMLElement|HTMLObjectElement} element
* @param {HtmxElementValidationError[]} errors
*/
function validateElement(element, errors) {
if (element.willValidate) {
triggerEvent(element, 'htmx:validation:validate')
if (!element.checkValidity()) {
errors.push({ elt: element, message: element.validationMessage, validity: element.validity })
triggerEvent(element, 'htmx:validation:failed', { message: element.validationMessage, validity: element.validity })
}
}
}
/**
* Override values in the one FormData with those from another.
* @param {FormData} receiver the formdata that will be mutated
* @param {FormData} donor the formdata that will provide the overriding values
* @returns {FormData} the {@linkcode receiver}
*/
function overrideFormData(receiver, donor) {
for (const key of donor.keys()) {
receiver.delete(key)
donor.getAll(key).forEach(function(value) {
receiver.append(key, value)
})
}
return receiver
}
/**
* @param {HTMLElement|HTMLFormElement} elt
* @param {string} verb
* @returns {{errors: HtmxElementValidationError[], formData: FormData, values: Object}}
*/
function getInputValues(elt, verb) {
/** @type HTMLElement[] */
const processed = []
const formData = new FormData()
const priorityFormData = new FormData()
/** @type HtmxElementValidationError[] */
const errors = []
const internalData = getInternalData(elt)
if (internalData.lastButtonClicked && !bodyContains(internalData.lastButtonClicked)) {
internalData.lastButtonClicked = null
}
// only validate when form is directly submitted and novalidate or formnovalidate are not set
// or if the element has an explicit hx-validate="true" on it
let validate = (matches(elt, 'form') && elt.noValidate !== true) || getAttributeValue(elt, 'hx-validate') === 'true'
if (internalData.lastButtonClicked) {
validate = validate && internalData.lastButtonClicked.formNoValidate !== true
}
// for a non-GET include the closest form
if (verb !== 'get') {
processInputValue(processed, priorityFormData, errors, closest(elt, 'form'), validate)
}
// include the element itself
processInputValue(processed, formData, errors, elt, validate)
// if a button or submit was clicked last, include its value
if (internalData.lastButtonClicked || elt.tagName === 'BUTTON' ||
(elt.tagName === 'INPUT' && getRawAttribute(elt, 'type') === 'submit')) {
const button = internalData.lastButtonClicked || elt
const name = getRawAttribute(button, 'name')
addValueToFormData(name, button.value, priorityFormData)
}
// include any explicit includes
const includes = findAttributeTargets(elt, 'hx-include')
forEach(includes, function(node) {
processInputValue(processed, formData, errors, node, validate)
// if a non-form is included, include any input values within it
if (!matches(node, 'form')) {
forEach(node.querySelectorAll(INPUT_SELECTOR), function(descendant) {
processInputValue(processed, formData, errors, descendant, validate)
})
}
})
// values from a