diff --git a/dist/htmx.amd.js b/dist/htmx.amd.js index 88c777c4f..74d7f7b18 100644 --- a/dist/htmx.amd.js +++ b/dist/htmx.amd.js @@ -165,6 +165,18 @@ var htmx = (function() { * @default '' */ inlineScriptNonce: '', + /** + * If set, the nonce will be added to inline styles. + * @type string + * @default '' + */ + inlineStyleNonce: '', + /** + * The attributes to settle during the settling phase. + * @type string[] + * @default ['class', 'style', 'width', 'height'] + */ + attributesToSettle: ['class', 'style', 'width', 'height'], /** * Allow cross-site Access-Control requests using credentials such as cookies, authorization headers or TLS client certificates. * @type boolean @@ -234,6 +246,12 @@ var htmx = (function() { * @default false */ ignoreTitle: false, + /** + * Whether the target of a boosted element is scrolled into the viewport. + * @type boolean + * @default true + */ + scrollIntoViewOnBoost: true, /** * The cache to store evaluated trigger specifications into. * You may define a simple object to use a never-clearing cache, or implement your own system using a [proxy object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Proxy) @@ -243,58 +261,24 @@ var htmx = (function() { triggerSpecsCache: null, /** @type boolean */ disableInheritance: false, + /** @type HtmxResponseHandlingConfig[] */ + responseHandling: [ + { code: '204', swap: false }, + { code: '[23]..', swap: true }, + { code: '[45]..', swap: false, error: true } + ], /** * Whether to process OOB swaps on elements that are nested within the main response element. * @type boolean * @default true */ - allowNestedOobSwaps: true, - /** - * @type HtmxSwapStyle - * default "none" - */ - defaultErrorSwapStyle: 'none', - /** - * @type string - * default "mirror" - */ - defaultErrorTarget: 'mirror', - /** - * If empty, all errors would be swapped (depending on error swap strategy). If it contains at least 1 value, - * acts as a wildcard, thus all error codes that are not in the array won't be swapped - * @type number[] - * default [] - */ - httpErrorCodesToSwap: [], - /** - * @type boolean - * @default true - */ - layoutQueuesEnabled: true, - /** - * @type boolean - * @default false - */ - cleanUpThrottlingEnabled: false, - /** - * @type Object - * @default {} - */ - disabledEvents: {} + allowNestedOobSwaps: true }, /** @type {typeof parseInterval} */ parseInterval: null, /** @type {typeof internalEval} */ _: null, - /** @type {typeof readLayout} */ - readLayout: null, - /** @type {typeof writeLayout} */ - writeLayout: null, - /** @type {typeof querySelectorAllExt} */ - querySelectorAllExt: null, - /** @type {typeof querySelectorExt} */ - querySelectorExt: null, - version: '2.0.0-beta3' + version: '2.0.0-beta4' } // Tsc madness part 2 htmx.onLoad = onLoadHelper @@ -318,10 +302,6 @@ var htmx = (function() { htmx.logNone = logNone htmx.parseInterval = parseInterval htmx._ = internalEval - htmx.readLayout = readLayout - htmx.writeLayout = writeLayout - htmx.querySelectorAllExt = querySelectorAllExt - htmx.querySelectorExt = querySelectorExt const internalAPI = { addTriggerHandler, @@ -708,6 +688,7 @@ var htmx = (function() { * @typedef {Object} HtmxNodeInternalData * Element data * @property {number} [initHash] + * @property {boolean} [boosted] * @property {OnHandler[]} [onHandlers] * @property {number} [timeout] * @property {ListenerInfo[]} [listenerInfos] @@ -1165,11 +1146,11 @@ var htmx = (function() { return [closest(asElement(elt), normalizeSelector(selector.substr(8)))] } else if (selector.indexOf('find ') === 0) { return [find(asParentNode(elt), normalizeSelector(selector.substr(5)))] - } else if (selector === 'next' || selector === 'nextElementSibling') { + } else if (selector === 'next') { return [asElement(elt).nextElementSibling] } else if (selector.indexOf('next ') === 0) { return [scanForwardQuery(elt, normalizeSelector(selector.substr(5)), !!global)] - } else if (selector === 'previous' || selector === 'previousElementSibling') { + } else if (selector === 'previous') { return [asElement(elt).previousElementSibling] } else if (selector.indexOf('previous ') === 0) { return [scanBackwardsQuery(elt, normalizeSelector(selector.substr(9)), !!global)] @@ -1317,75 +1298,6 @@ var htmx = (function() { return isFunction(arg2) ? arg2 : arg3 } - //= =================================================================== - // Layout read/write queues & utilities - //= =================================================================== - - /** @type Array */ - let layoutReadsQueue = []; let layoutWritesQueue = [] - let layoutQueuesRunning = false - - // Wrap in a function so that all usages can be well minified instead of direct un-minifiable property access - function areLayoutQueuesEnabled() { - return htmx.config.layoutQueuesEnabled - } - - function readLayout(callback) { - if (areLayoutQueuesEnabled()) { - layoutReadsQueue.push(callback) - if (!layoutQueuesRunning) { - initializeLayoutQueues() - } - if (document.hidden) { - processLayoutQueues() - } - } else { - callback() - } - } - - function writeLayout(callback) { - if (areLayoutQueuesEnabled()) { - layoutWritesQueue.push(callback) - if (!layoutQueuesRunning) { - initializeLayoutQueues() - } - if (document.hidden) { - processLayoutQueues() - } - } else { - callback() - } - } - - function processLayoutQueues() { - const readsQueue = layoutReadsQueue - layoutReadsQueue = [] - for (let i = 0; i < readsQueue.length; i++) { - readsQueue[i]() - } - readsQueue.length = 0 - const writesQueue = layoutWritesQueue - layoutWritesQueue = [] - for (let i = 0; i < writesQueue.length; i++) { - writesQueue[i]() - } - writesQueue.length = 0 - } - - function processLayoutQueuesRecursive() { - if (!areLayoutQueuesEnabled()) { - return - } - processLayoutQueues() - requestAnimationFrame(processLayoutQueuesRecursive) - } - - function initializeLayoutQueues() { - layoutQueuesRunning = true - requestAnimationFrame(processLayoutQueuesRecursive) - } - //= =================================================================== // Node processing //= =================================================================== @@ -1402,31 +1314,10 @@ var htmx = (function() { if (attrTarget === 'this') { return [findThisElement(elt, attrName)] } else { - let result = querySelectorAllExt(elt, attrTarget) - // find `inherit` in string, make sure it's surrounded by commas or is at the start/end of string - var shouldInherit = /(^|,)(\s*)inherit(\s*)($|,)/.test(attrTarget) - if (shouldInherit) { - var eltToInheritFrom = asElement(getClosestMatch(elt, function(parent) { - return parent !== elt && hasAttribute(asElement(parent), attrName) - })) - if (eltToInheritFrom) { - var targetsToInherit = findAttributeTargets(eltToInheritFrom, attrName) - if (targetsToInherit) { - // Can't push to a NodeList (returned by document.querySelectorAll), and Array.from is IE11 incompatible - var newResult = []; var i - for (i = 0; i < result.length; i++) { - newResult.push(result[i]) - } - for (i = 0; i < targetsToInherit.length; i++) { - newResult.push(targetsToInherit[i]) - } - result = newResult - } - } - } + const result = querySelectorAllExt(elt, attrTarget) if (result.length === 0) { - logWarning('The selector "' + attrTarget + '" on ' + attrName + ' returned no matches!') - return [] + logError('The selector "' + attrTarget + '" on ' + attrName + ' returned no matches!') + return [DUMMY_ELT] } else { return result } @@ -1458,47 +1349,44 @@ var htmx = (function() { return querySelectorExt(elt, targetStr) } } else { - return elt + const data = getInternalData(elt) + if (data.boosted) { + return getDocument().body + } else { + return elt + } } } /** - * @param {Element} elt - * @param {Element} initialTarget - * @param swapOverride - * @returns {{shouldSwap: boolean, target: (Element|null), targetStr: string}} - */ - function getErrorTargetSpec(elt, initialTarget, swapOverride) { - const targetStr = getClosestAttributeValue(elt, 'hx-error-target') || htmx.config.defaultErrorTarget - const swapStr = swapOverride || getClosestAttributeValue(elt, 'hx-error-swap') || htmx.config.defaultErrorSwapStyle - if (!swapStr || swapStr === 'none') { - return { - shouldSwap: false, - target: null, - targetStr: '' + * @param {string} name + * @returns {boolean} + */ + function shouldSettleAttribute(name) { + const attributesToSettle = htmx.config.attributesToSettle + for (let i = 0; i < attributesToSettle.length; i++) { + if (name === attributesToSettle[i]) { + return true } } - if (targetStr) { - let target - if (targetStr === 'mirror') { - target = initialTarget - } else if (targetStr === 'this') { - target = findThisElement(elt, 'hx-error-target') || elt - } else { - target = asElement(querySelectorExt(elt, targetStr)) + return false + } + + /** + * @param {Element} mergeTo + * @param {Element} mergeFrom + */ + function cloneAttributes(mergeTo, mergeFrom) { + forEach(mergeTo.attributes, function(attr) { + if (!mergeFrom.hasAttribute(attr.name) && shouldSettleAttribute(attr.name)) { + mergeTo.removeAttribute(attr.name) } - return { - shouldSwap: true, - target, - targetStr + }) + forEach(mergeFrom.attributes, function(attr) { + if (shouldSettleAttribute(attr.name)) { + mergeTo.setAttribute(attr.name, attr.value) } - } - // fallback to normal hx-target if no error target was specified - return { - shouldSwap: true, - target: initialTarget, - targetStr: '' - } + }) } /** @@ -1586,6 +1474,30 @@ var htmx = (function() { }) } + /** + * @param {Node} parentNode + * @param {ParentNode} fragment + * @param {HtmxSettleInfo} settleInfo + */ + 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 parentElt = asParentNode(parentNode) + const oldNode = parentElt && parentElt.querySelector(normalizedTag + "[id='" + normalizedId + "']") + if (oldNode && oldNode !== parentElt) { + const newAttributes = newNode.cloneNode() + cloneAttributes(newNode, oldNode) + settleInfo.tasks.push(function() { + cloneAttributes(newNode, newAttributes) + }) + } + } + }) + } + /** * @param {Node} child * @returns {HtmxSettleTask} @@ -1617,6 +1529,7 @@ var htmx = (function() { * @param {HtmxSettleInfo} settleInfo */ function insertNodesBefore(parentNode, insertBefore, fragment, settleInfo) { + handleAttributes(parentNode, fragment, settleInfo) while (fragment.childNodes.length > 0) { const child = fragment.firstChild addClassToElement(asElement(child), htmx.config.addedClass) @@ -1698,38 +1611,13 @@ var htmx = (function() { * @param {Node} element */ function cleanUpElement(element) { - cleanUpThrottle([element]) - } - - function cleanUpThrottle(candidates) { - function doCleanup(elt) { - triggerEvent(elt, 'htmx:beforeCleanupElement') - deInitNode(elt) - if (elt.children) { // IE - forEach(elt.children, function(child) { - candidates.push(child) - }) - } - } - - if (htmx.config.cleanUpThrottlingEnabled) { - const start = Date.now() - while (candidates.length > 0) { - const elt = candidates[0] - doCleanup(elt) - candidates.splice(0, 1) - - if (Date.now() - start > 4) { - requestAnimationFrame(function() { - cleanUpThrottle(candidates) - }) - return - } - } - } else { - for (let i = 0; i < candidates.length; i++) { - doCleanup(candidates[i]) - } + triggerEvent(element, 'htmx:beforeCleanupElement') + deInitNode(element) + // @ts-ignore IE11 code + // noinspection JSUnresolvedReference + if (element.children) { // IE + // @ts-ignore + forEach(element.children, function(child) { cleanUpElement(child) }) } } @@ -1739,9 +1627,6 @@ var htmx = (function() { * @param {HtmxSettleInfo} settleInfo */ function swapOuterHTML(target, fragment, settleInfo) { - if (!target.parentNode) { - return - } /** @type {Node} */ let newElt const eltBeforeNewContent = target.previousSibling @@ -1760,9 +1645,7 @@ var htmx = (function() { newElt = null } } - writeLayout(function() { - cleanUpElement(target) - }) + cleanUpElement(target) if (target instanceof Element) { target.remove() } else { @@ -1824,15 +1707,10 @@ var htmx = (function() { insertNodesBefore(target, firstChild, fragment, settleInfo) if (firstChild) { while (firstChild.nextSibling) { - const nextSibling = /** @type Node */ firstChild.nextSibling - writeLayout(function() { - cleanUpElement(nextSibling) - }) - target.removeChild(nextSibling) + cleanUpElement(firstChild.nextSibling) + target.removeChild(firstChild.nextSibling) } - writeLayout(function() { - cleanUpElement(firstChild) - }) + cleanUpElement(firstChild) target.removeChild(firstChild) } } @@ -1843,9 +1721,8 @@ var htmx = (function() { * @param {Node} target * @param {ParentNode} fragment * @param {HtmxSettleInfo} settleInfo - * @param {HtmxSwapStyle} [defaultSwapStyle] */ - function swapWithStyle(swapStyle, elt, target, fragment, settleInfo, defaultSwapStyle) { + function swapWithStyle(swapStyle, elt, target, fragment, settleInfo) { switch (swapStyle) { case 'none': return @@ -1892,7 +1769,7 @@ var htmx = (function() { if (swapStyle === 'innerHTML') { swapInnerHTML(target, fragment, settleInfo) } else { - swapWithStyle(defaultSwapStyle || htmx.config.defaultSwapStyle, elt, target, fragment, settleInfo, defaultSwapStyle) + swapWithStyle(htmx.config.defaultSwapStyle, elt, target, fragment, settleInfo) } } } @@ -1951,10 +1828,26 @@ var htmx = (function() { target.textContent = content // Otherwise, make the fragment and process it } else { - const fragment = makeFragment(content) + let fragment = makeFragment(content) settleInfo.title = fragment.title + // 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'), /** @param {HTMLTemplateElement} template */function(template) { @@ -1965,8 +1858,16 @@ var htmx = (function() { } }) + // 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, swapSpec.defaultSwapStyle) + swapWithStyle(swapSpec.swapStyle, swapOptions.contextElement, target, fragment, settleInfo) } // apply saved focus and selection information to swapped content @@ -1989,9 +1890,7 @@ var htmx = (function() { } } - if (target) { - target.classList.remove(htmx.config.swappingClass) - } + target.classList.remove(htmx.config.swappingClass) forEach(settleInfo.elts, function(elt) { if (elt.classList) { elt.classList.add(htmx.config.settlingClass) @@ -2035,7 +1934,7 @@ var htmx = (function() { if (swapSpec.settleDelay > 0) { getWindow().setTimeout(doSettle, swapSpec.settleDelay) } else { - writeLayout(doSettle) + doSettle() } } @@ -2349,6 +2248,55 @@ var htmx = (function() { }, spec.pollInterval) } + /** + * @param {HTMLAnchorElement} elt + * @returns {boolean} + */ + function isLocalLink(elt) { + return location.hostname === elt.hostname && + getRawAttribute(elt, 'href') && + getRawAttribute(elt, 'href').indexOf('#') !== 0 + } + + /** + * @param {Element} elt + */ + function eltIsDisabled(elt) { + return closest(elt, htmx.config.disableSelector) + } + + /** + * @param {Element} elt + * @param {HtmxNodeInternalData} nodeData + * @param {HtmxTriggerSpecification[]} triggerSpecs + */ + function boostElement(elt, nodeData, triggerSpecs) { + if ((elt instanceof HTMLAnchorElement && 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(node, evt) { + const elt = asElement(node) + if (eltIsDisabled(elt)) { + cleanUpElement(elt) + return + } + issueAjaxRequest(verb, path, elt, evt) + }, nodeData, triggerSpec, true) + }) + } + } + /** * @param {Event} evt * @param {Node} node @@ -2374,6 +2322,17 @@ var htmx = (function() { return false } + /** + * @param {Node} elt + * @param {Event|MouseEvent|KeyboardEvent|TouchEvent} evt + * @returns {boolean} + */ + function ignoreBoostedAnchorCtrlClick(elt, evt) { + return getInternalData(elt).boosted && elt instanceof HTMLAnchorElement && evt.type === 'click' && + // @ts-ignore this will resolve to undefined for events that don't define those properties, which is fine + (evt.ctrlKey || evt.metaKey) + } + /** * @param {HtmxTriggerSpecification} triggerSpec * @param {Node} elt @@ -2425,6 +2384,9 @@ var htmx = (function() { eltToListenOn.removeEventListener(triggerSpec.trigger, eventListener) return } + if (ignoreBoostedAnchorCtrlClick(elt, evt)) { + return + } if (explicitCancel || shouldCancel(evt, elt)) { evt.preventDefault() } @@ -2630,12 +2592,64 @@ var htmx = (function() { } } + /** + * @param {Node} node + * @returns {boolean} + */ + function shouldProcessHxOn(node) { + const elt = asElement(node) + if (!elt) { + return false + } + 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 + } + + /** + * @param {Node} elt + * @returns {Element[]} + */ + const HX_ON_QUERY = new XPathEvaluator() + .createExpression('.//*[@*[ 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-") ]]') + + function processHXOnRoot(elt, elements) { + if (shouldProcessHxOn(elt)) { + elements.push(asElement(elt)) + } + const iter = HX_ON_QUERY.evaluate(elt) + let node = null + while (node = iter.iterateNext()) elements.push(asElement(node)) + } + + function findHxOnWildcardElements(elt) { + /** @type {Element[]} */ + const elements = [] + if (elt instanceof DocumentFragment) { + for (const child of elt.childNodes) { + processHXOnRoot(child, elements) + } + } else { + processHXOnRoot(elt, elements) + } + return elements + } + /** * @param {Element} elt * @returns {NodeListOf|[]} */ function findElementsToProcess(elt) { if (elt.querySelectorAll) { + const boostedSelector = ', [hx-boost] a, [data-hx-boost] a, a[hx-boost], a[data-hx-boost]' + const extensionSelectors = [] for (const e in extensions) { const extension = extensions[e] @@ -2647,7 +2661,7 @@ var htmx = (function() { } } - const results = elt.querySelectorAll(VERB_SELECTOR + ", form, [type='submit']," + + const results = elt.querySelectorAll(VERB_SELECTOR + boostedSelector + ", form, [type='submit']," + ' [hx-ext], [data-hx-ext], [hx-trigger], [data-hx-trigger]' + extensionSelectors.flat().map(s => ', ' + s).join('')) return results @@ -2707,6 +2721,63 @@ var htmx = (function() { elt.addEventListener('focusout', maybeUnsetLastButtonClicked) } + /** + * @param {Element} elt + * @param {string} eventName + * @param {string} code + */ + function addHxOnEventHandler(elt, eventName, code) { + const nodeData = getInternalData(elt) + if (!Array.isArray(nodeData.onHandlers)) { + nodeData.onHandlers = [] + } + let func + /** @type EventListener */ + const listener = function(e) { + maybeEval(elt, function() { + if (eltIsDisabled(elt)) { + return + } + if (!func) { + func = new Function('event', code) + } + func.call(elt, e) + }) + } + elt.addEventListener(eventName, listener) + nodeData.onHandlers.push({ event: eventName, listener }) + } + + /** + * @param {Element} elt + */ + 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) + } + } + } + } + /** * @param {Element|HTMLInputElement} elt */ @@ -2734,7 +2805,9 @@ var htmx = (function() { const hasExplicitHttpAction = processVerbs(elt, nodeData, triggerSpecs) if (!hasExplicitHttpAction) { - if (hasAttribute(elt, 'hx-trigger')) { + 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() { @@ -2768,6 +2841,7 @@ var htmx = (function() { } initNode(elt) forEach(findElementsToProcess(elt), function(child) { initNode(child) }) + forEach(findHxOnWildcardElements(elt), processHxOnWildcard) } //= =================================================================== @@ -2836,19 +2910,11 @@ var htmx = (function() { }) } - function logError(...data) { + function logError(msg) { if (console.error) { - console.error(...data) - } else if (console.log) { - console.log('ERROR: ', ...data) - } - } - - function logWarning(...data) { - if (console.warn) { - console.warn(...data) + console.error(msg) } else if (console.log) { - console.log('WARNING: ', ...data) + console.log('ERROR: ', msg) } } @@ -2863,9 +2929,6 @@ var htmx = (function() { * @returns {boolean} */ function triggerEvent(elt, eventName, detail) { - if (htmx.config.disabledEvents[eventName]) { - return true - } elt = resolveTarget(elt) if (detail == null) { detail = {} @@ -2876,7 +2939,7 @@ var htmx = (function() { htmx.logger(elt, eventName, detail) } if (detail.error) { - logError(detail.error, detail) + logError(detail.error) triggerEvent(elt, 'htmx:error', { errorInfo: detail }) } let eventResult = elt.dispatchEvent(event) @@ -2919,7 +2982,7 @@ var htmx = (function() { const scroll = window.scrollY if (htmx.config.historyCacheSize <= 0) { - // make sure that any already existing cache is purged + // make sure that an eventually already existing cache is purged localStorage.removeItem('htmx-history-cache') return } @@ -3013,11 +3076,6 @@ var htmx = (function() { // IE11: insensitive modifier not supported so fallback to case sensitive selector disableHistoryCache = getDocument().querySelector('[hx-history="false"],[data-hx-history="false"]') } - if (!disableHistoryCache && htmx.config.historyCacheSize <= 0) { - // make sure that any already existing cache is purged - localStorage.removeItem('htmx-history-cache') - disableHistoryCache = true - } if (!disableHistoryCache) { triggerEvent(getDocument().body, 'htmx:beforeHistorySave', { path, historyElt: elt }) saveToHistoryCache(path, elt) @@ -3210,13 +3268,7 @@ var htmx = (function() { if (elt.type === 'button' || elt.type === 'submit' || elt.tagName === 'image' || elt.tagName === 'reset' || elt.tagName === 'file') { return false } - if (elt.type === 'radio') { - return elt.checked - } - if (elt.type === 'checkbox') { - if (typeof elt.getAttribute('value') !== 'string') { - return true - } + if (elt.type === 'checkbox' || elt.type === 'radio') { return elt.checked } return true @@ -3251,14 +3303,6 @@ var htmx = (function() { } } - /** - * @param {Element} elt - * @returns {boolean} - */ - function isBooleanCheckbox(elt) { - return elt instanceof HTMLInputElement && elt.getAttribute('type') === 'checkbox' && typeof elt.getAttribute('value') !== 'string' - } - /** * @param {Element[]} processed * @param {FormData} formData @@ -3283,49 +3327,27 @@ var htmx = (function() { if (elt instanceof HTMLInputElement && elt.files) { value = toArray(elt.files) } - if (isBooleanCheckbox(elt)) { - value = (/** @type HTMLInputElement */ (elt)).checked - } addValueToFormData(name, value, formData) if (validate) { validateElement(elt, errors) } } if (elt instanceof HTMLFormElement) { - const namesWithBooleanCheckboxes = {} 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 - if (!isBooleanCheckbox(input)) { - removeValueFromFormData(input.name, input.value, formData) - } else { - removeValueFromFormData(input.name, input.checked.toString(), formData) - } + removeValueFromFormData(input.name, input.value, formData) } else { processed.push(input) } if (validate) { validateElement(input, errors) } - if (isBooleanCheckbox(input)) { - namesWithBooleanCheckboxes[input.name] = true - } }) new FormData(elt).forEach(function(value, name) { - if (!namesWithBooleanCheckboxes[name]) { - addValueToFormData(name, value, formData) - } - }) - forEach(elt.elements, function(input) { - if (namesWithBooleanCheckboxes[input.name]) { - if (isBooleanCheckbox(input)) { - addValueToFormData(input.name, input.checked.toString(), formData) - } else if (input.type !== 'checkbox' || input.checked) { - addValueToFormData(input.name, input.value, formData) - } - } + addValueToFormData(name, value, formData) }) } } @@ -3467,13 +3489,16 @@ var htmx = (function() { 'HX-Request': 'true', 'HX-Trigger': getRawAttribute(elt, 'id'), 'HX-Trigger-Name': getRawAttribute(elt, 'name'), - 'HX-Target': target ? getAttributeValue(target, 'id') : null, + 'HX-Target': getAttributeValue(target, 'id'), 'HX-Current-URL': getDocument().location.href } getValuesForElement(elt, 'hx-headers', false, headers) if (prompt !== undefined) { headers['HX-Prompt'] = prompt } + if (getInternalData(elt).boosted) { + headers['HX-Boosted'] = 'true' + } return headers } @@ -3514,37 +3539,29 @@ var htmx = (function() { } /** - * formDataContainsAnyFile returns true if any of the values is a File input value - * @param {FormData} formData - * @returns {boolean} + * @param {Element} elt + * @return {boolean} */ - function formDataContainsAnyFile(formData) { - for (const key of formData.keys()) { - const values = formData.getAll(key) - for (const value of values) { - if (value instanceof File) { - return true - } - } - } - return false + function isAnchorLink(elt) { + return !!getRawAttribute(elt, 'href') && getRawAttribute(elt, 'href').indexOf('#') >= 0 } /** * @param {Element} elt * @param {HtmxSwapStyle} [swapInfoOverride] - * @param {HtmxSwapStyle} [defaultSwapStyle] * @returns {HtmxSwapSpecification} */ - function getSwapSpecification(elt, swapInfoOverride, defaultSwapStyle) { + function getSwapSpecification(elt, swapInfoOverride) { const swapInfo = swapInfoOverride || getClosestAttributeValue(elt, 'hx-swap') /** @type HtmxSwapSpecification */ const swapSpec = { - swapStyle: defaultSwapStyle || htmx.config.defaultSwapStyle, - defaultSwapStyle: defaultSwapStyle || htmx.config.defaultSwapStyle, + swapStyle: getInternalData(elt).boosted ? 'innerHTML' : htmx.config.defaultSwapStyle, swapDelay: htmx.config.defaultSwapDelay, settleDelay: htmx.config.defaultSettleDelay } + if (htmx.config.scrollIntoViewOnBoost && getInternalData(elt).boosted && !isAnchorLink(elt)) { + swapSpec.show = 'top' + } if (swapInfo) { const split = splitOnWhitespace(swapInfo) if (split.length > 0) { @@ -3589,13 +3606,11 @@ var htmx = (function() { /** * @param {Element} elt - * @param {FormData} filteredParameters * @return {boolean} */ - function usesFormData(elt, filteredParameters) { + function usesFormData(elt) { return getClosestAttributeValue(elt, 'hx-encoding') === 'multipart/form-data' || - (matches(elt, 'form') && getRawAttribute(elt, 'enctype') === 'multipart/form-data') || - formDataContainsAnyFile(filteredParameters) + (matches(elt, 'form') && getRawAttribute(elt, 'enctype') === 'multipart/form-data') } /** @@ -3614,7 +3629,7 @@ var htmx = (function() { if (encodedParameters != null) { return encodedParameters } else { - if (usesFormData(elt, filteredParameters)) { + if (usesFormData(elt)) { // Force conversion to an actual FormData object in case filteredParameters is a formDataProxy // See https://github.com/bigskysoftware/htmx/issues/2317 return overrideFormData(new FormData(), formDataFromObject(filteredParameters)) @@ -3630,7 +3645,7 @@ var htmx = (function() { * @returns {HtmxSettleInfo} */ function makeSettleInfo(target) { - return { tasks: [], elts: target ? [target] : [] } + return { tasks: [], elts: [target] } } /** @@ -3833,8 +3848,7 @@ var htmx = (function() { values: context.values, targetOverride: resolveTarget(context.target), swapOverride: context.swap, - errorTargetOverride: resolveTarget(context.errorTarget), - errorSwapOverride: context.errorSwap, + select: context.select, returnPromise: true }) } @@ -4033,6 +4047,7 @@ var htmx = (function() { elt = getDocument().body } const responseHandler = etc.handler || handleAjaxResponse + const select = etc.select || null if (!bodyContains(elt)) { // do not issue requests for elements removed from the DOM @@ -4040,10 +4055,7 @@ var htmx = (function() { return promise } const target = etc.targetOverride || asElement(getTarget(elt)) - const swapStyle = etc.swapOverride || getClosestAttributeValue(elt, 'hx-swap') - // Don't use hx-target in the hierarchy as a fallback if targetOverride was specified but the element wasn't found (i.e. null instead of undefined) - // Also don't fire targetError if hx-target is not set, but hx-swap is set to "none" - if (etc.targetOverride === null || ((target == null || target == DUMMY_ELT) && swapStyle !== 'none')) { + if (target == null || target == DUMMY_ELT) { triggerErrorEvent(elt, 'htmx:targetError', { target: getAttributeValue(elt, 'hx-target') }) maybeCall(reject) return promise @@ -4182,6 +4194,15 @@ var htmx = (function() { } } + let headers = getHeaders(elt, target, promptResponse) + + if (verb !== 'get' && !usesFormData(elt)) { + headers['Content-Type'] = 'application/x-www-form-urlencoded' + } + + if (etc.headers) { + headers = mergeObjects(headers, etc.headers) + } const results = getInputValues(elt, verb) let errors = results.errors const rawFormData = results.formData @@ -4192,16 +4213,6 @@ var htmx = (function() { const allFormData = overrideFormData(rawFormData, expressionVars) let filteredFormData = filterValues(allFormData, elt) - let headers = getHeaders(elt, target, promptResponse) - - if (verb !== 'get' && !usesFormData(elt, filteredFormData)) { - headers['Content-Type'] = 'application/x-www-form-urlencoded' - } - - if (etc.headers) { - headers = mergeObjects(headers, etc.headers) - } - if (htmx.config.getCacheBusterParam && verb === 'get') { filteredFormData.set('org.htmx.cache-buster', getRawAttribute(target, 'id') || 'true') } @@ -4219,10 +4230,13 @@ var htmx = (function() { */ const requestAttrValues = getValuesForElement(elt, 'hx-request') + const eltIsBoosted = getInternalData(elt).boosted + let useUrlParams = htmx.config.methodsThatUseUrlParams.indexOf(verb) >= 0 /** @type HtmxRequestConfig */ const requestConfig = { + boosted: eltIsBoosted, useUrlParams, formData: filteredFormData, parameters: formDataProxy(filteredFormData), @@ -4309,13 +4323,14 @@ var htmx = (function() { target, requestConfig, etc, + boosted: eltIsBoosted, + select, pathInfo: { requestPath: path, finalRequestPath: finalPath, responsePath: null, anchor - }, - defaultHandler: handleAjaxResponse + } } xhr.onload = function() { @@ -4323,9 +4338,7 @@ var htmx = (function() { const hierarchy = hierarchyForElt(elt) responseInfo.pathInfo.responsePath = getPathFromResponse(xhr) responseHandler(elt, responseInfo) - if (!hasHeader(xhr, /HX-Redirect:/i)) { - removeRequestIndicators(indicators, disableElts) - } + removeRequestIndicators(indicators, disableElts) triggerEvent(elt, 'htmx:afterRequest', responseInfo) triggerEvent(elt, 'htmx:afterOnLoad', responseInfo) // if the body no longer contains the element, trigger the event on the closest parent @@ -4446,6 +4459,7 @@ var htmx = (function() { const pushUrl = getClosestAttributeValue(elt, 'hx-push-url') const replaceUrl = getClosestAttributeValue(elt, 'hx-replace-url') + const elementIsBoosted = getInternalData(elt).boosted let saveType = null let path = null @@ -4456,6 +4470,9 @@ var htmx = (function() { } else if (replaceUrl) { saveType = 'replace' path = replaceUrl + } else if (elementIsBoosted) { + saveType = 'push' + path = responsePath || requestPath // if there is no response path, go with the original request path } if (path) { @@ -4483,6 +4500,34 @@ var htmx = (function() { } } + /** + * @param {HtmxResponseHandlingConfig} responseHandlingConfig + * @param {number} status + * @return {boolean} + */ + function codeMatches(responseHandlingConfig, status) { + var regExp = new RegExp(responseHandlingConfig.code) + return regExp.test(status.toString(10)) + } + + /** + * @param {XMLHttpRequest} xhr + * @return {HtmxResponseHandlingConfig} + */ + function resolveResponseHandling(xhr) { + for (var i = 0; i < htmx.config.responseHandling.length; i++) { + /** @type HtmxResponseHandlingConfig */ + var responseHandlingElement = htmx.config.responseHandling[i] + if (codeMatches(responseHandlingElement, xhr.status)) { + return responseHandlingElement + } + } + // no matches, return no swap + return { + swap: false + } + } + /** * @param {string} title */ @@ -4505,11 +4550,12 @@ var htmx = (function() { const xhr = responseInfo.xhr let target = responseInfo.target const etc = responseInfo.etc + const responseInfoSelect = responseInfo.select if (!triggerEvent(elt, 'htmx:beforeOnLoad', responseInfo)) return if (hasHeader(xhr, /HX-Trigger:/i)) { - handleTriggerHeader(xhr, 'HX-Trigger', bodyContains(elt) ? elt : getDocument().body) + handleTriggerHeader(xhr, 'HX-Trigger', elt) } if (hasHeader(xhr, /HX-Location:/i)) { @@ -4551,39 +4597,18 @@ var htmx = (function() { } const historyUpdate = determineHistoryUpdates(elt, responseInfo) - let ignoreTitle = htmx.config.ignoreTitle - - let isError = xhr.status >= 400 - // by default htmx only swaps on 200 return codes and does not swap - // on 204 'No Content' - // this can be overridden by responding to the htmx:beforeSwap event and - // overriding the detail.shouldSwap property - let shouldSwap = xhr.status >= 200 && xhr.status < 400 && xhr.status !== 204 - - let swapOverride = isError ? etc.errorSwapOverride : etc.swapOverride - // User could force shouldSwap to true from a htmx:beforeSwap listener, in which case we don't want to - // interfere with hx-error-target & hx-error-swap logic by relying solely on isError - let isStandardErrorSwap = false - const errorCodesToSwap = htmx.config.httpErrorCodesToSwap - if (isError && (errorCodesToSwap.length === 0 || errorCodesToSwap.indexOf(xhr.status) >= 0)) { - if (etc.errorTargetOverride) { - responseInfo.target = etc.errorTargetOverride - } - // Error swap override set to "mirror" should replicate standard swap override if defined - // Otherwise, fallback to attributes then default strategy - if (swapOverride === 'mirror' && etc.swapOverride) { - swapOverride = etc.swapOverride - } - const errorSwapSpec = getErrorTargetSpec(elt, responseInfo.target, swapOverride) - if (errorSwapSpec.shouldSwap) { - shouldSwap = true - isStandardErrorSwap = true - responseInfo.target = errorSwapSpec.target - if (responseInfo.target == null || responseInfo.target == DUMMY_ELT) { - triggerErrorEvent(elt, 'htmx:targetError', { target: errorSwapSpec.targetStr }) - return - } - } + + const responseHandling = resolveResponseHandling(xhr) + const shouldSwap = responseHandling.swap + let isError = !!responseHandling.error + let ignoreTitle = htmx.config.ignoreTitle || responseHandling.ignoreTitle + let selectOverride = responseHandling.select + if (responseHandling.target) { + responseInfo.target = asElement(querySelectorExt(elt, responseHandling.target)) + } + var swapOverride = etc.swapOverride + if (swapOverride == null && responseHandling.swapOverride) { + swapOverride = responseHandling.swapOverride } // response headers override response handling config @@ -4604,15 +4629,19 @@ var htmx = (function() { shouldSwap, serverResponse, isError, - ignoreTitle + ignoreTitle, + selectOverride }, responseInfo) - if (target && !triggerEvent(target, 'htmx:beforeSwap', beforeSwapDetails)) return + if (responseHandling.event && !triggerEvent(target, responseHandling.event, beforeSwapDetails)) return + + if (!triggerEvent(target, 'htmx:beforeSwap', beforeSwapDetails)) return target = beforeSwapDetails.target // allow re-targeting serverResponse = beforeSwapDetails.serverResponse // allow updating content isError = beforeSwapDetails.isError // allow updating error ignoreTitle = beforeSwapDetails.ignoreTitle // allow updating ignoring title + selectOverride = beforeSwapDetails.selectOverride // allow updating select override responseInfo.target = target // Make updated target available to response events responseInfo.failed = isError // Make failed property available to response events @@ -4635,30 +4664,29 @@ var htmx = (function() { if (hasHeader(xhr, /HX-Reswap:/i)) { swapOverride = xhr.getResponseHeader('HX-Reswap') } - let defaultSwapStyle = htmx.config.defaultSwapStyle - if (!swapOverride && isStandardErrorSwap) { - if (htmx.config.defaultErrorSwapStyle !== 'mirror') { - defaultSwapStyle = htmx.config.defaultErrorSwapStyle - } - swapOverride = getClosestAttributeValue(elt, 'hx-error-swap') - if ((swapOverride && swapOverride === 'mirror') || (!swapOverride && htmx.config.defaultErrorSwapStyle === 'mirror')) { - swapOverride = getClosestAttributeValue(elt, 'hx-swap') || htmx.config.defaultSwapStyle - } - } - var swapSpec = getSwapSpecification(elt, swapOverride, defaultSwapStyle) + var swapSpec = getSwapSpecification(elt, swapOverride) if (!swapSpec.hasOwnProperty('ignoreTitle')) { swapSpec.ignoreTitle = ignoreTitle } - if (target) { - target.classList.add(htmx.config.swappingClass) - } + target.classList.add(htmx.config.swappingClass) // optional transition API promise callbacks let settleResolve = null let settleReject = null + if (responseInfoSelect) { + selectOverride = responseInfoSelect + } + + if (hasHeader(xhr, /HX-Reselect:/i)) { + selectOverride = xhr.getResponseHeader('HX-Reselect') + } + + const selectOOB = getClosestAttributeValue(elt, 'hx-select-oob') + const select = getClosestAttributeValue(elt, 'hx-select') + let doSwap = function() { try { // if we need to save history, do so, before swapping so that relative resources have the correct base URL @@ -4674,6 +4702,8 @@ var htmx = (function() { } swap(target, serverResponse, swapSpec, { + select: selectOverride || select, + selectOOB, eventInfo: responseInfo, anchor: responseInfo.pathInfo.anchor, contextElement: elt, @@ -4853,8 +4883,9 @@ var htmx = (function() { function insertIndicatorStyles() { if (htmx.config.includeIndicatorStyles !== false) { + const nonceAttribute = htmx.config.inlineStyleNonce ? ` nonce="${htmx.config.inlineStyleNonce}"` : '' getDocument().head.insertAdjacentHTML('beforeend', - '")}}function _n(){const e=te().querySelector('meta[name="htmx-config"]');if(e){return b(e.content)}else{return null}}function zn(){const e=_n();if(e){W.config=le(W.config,e)}}jn(function(){zn();Vn();let e=te().body;Pt(e);const t=te().querySelectorAll("[hx-trigger='restored'],[data-hx-trigger='restored']");e.addEventListener("htmx:abort",function(e){const t=e.target;const n=oe(t);if(n&&n.xhr){n.xhr.abort()}});const n=window.onpopstate?window.onpopstate.bind(window):null;window.onpopstate=function(e){if(e.state&&e.state.htmx){Kt();ie(t,function(e){ce(e,"htmx:restored",{document:te(),triggerEvent:ce})})}else{if(n){n(e)}}};if(Re()){He()}v().setTimeout(function(){ce(e,"htmx:load",{});e=null},0)});return W}(); \ No newline at end of file +var htmx=function(){"use strict";const Q={onLoad:null,process:null,on:null,off:null,trigger:null,ajax:null,find:null,findAll:null,closest:null,values:function(e,t){const n=cn(e,t||"post");return n.values},remove:null,addClass:null,removeClass:null,toggleClass:null,takeClass:null,swap:null,defineExtension:null,removeExtension:null,logAll:null,logNone:null,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:"",inlineStyleNonce:"",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,responseHandling:[{code:"204",swap:false},{code:"[23]..",swap:true},{code:"[45]..",swap:false,error:true}],allowNestedOobSwaps:true},parseInterval:null,_:null,version:"2.0.0-beta4"};Q.onLoad=$;Q.process=Dt;Q.on=be;Q.off=we;Q.trigger=he;Q.ajax=Hn;Q.find=r;Q.findAll=p;Q.closest=g;Q.remove=K;Q.addClass=W;Q.removeClass=o;Q.toggleClass=Y;Q.takeClass=ge;Q.swap=ze;Q.defineExtension=Un;Q.removeExtension=Bn;Q.logAll=z;Q.logNone=J;Q.parseInterval=d;Q._=_;const n={addTriggerHandler:Et,bodyContains:le,canAccessLocalStorage:j,findThisElement:Ee,filterValues:dn,swap:ze,hasAttribute:s,getAttributeValue:te,getClosestAttributeValue:re,getClosestMatch:T,getExpressionVars:Cn,getHeaders:hn,getInputValues:cn,getInternalData:ie,getSwapSpecification:pn,getTriggerSpecs:lt,getTarget:Ce,makeFragment:D,mergeObjects:ue,makeSettleInfo:xn,oobSwap:Te,querySelectorExt:fe,settleImmediately:Gt,shouldCancel:dt,triggerEvent:he,triggerErrorEvent:ae,withExtensions:Ut};const v=["get","post","put","delete","patch"];const R=v.map(function(e){return"[hx-"+e+"], [data-hx-"+e+"]"}).join(", ");const O=e("head");function e(e,t=false){return new RegExp(`<${e}(\\s[^>]*>|>)([\\s\\S]*?)<\\/${e}>`,t?"gim":"im")}function d(e){if(e==undefined){return undefined}let t=NaN;if(e.slice(-2)=="ms"){t=parseFloat(e.slice(0,-2))}else if(e.slice(-1)=="s"){t=parseFloat(e.slice(0,-1))*1e3}else if(e.slice(-1)=="m"){t=parseFloat(e.slice(0,-1))*1e3*60}else{t=parseFloat(e)}return isNaN(t)?undefined:t}function ee(e,t){return e instanceof Element&&e.getAttribute(t)}function s(e,t){return!!e.hasAttribute&&(e.hasAttribute(t)||e.hasAttribute("data-"+t))}function te(e,t){return ee(e,t)||ee(e,"data-"+t)}function u(e){const t=e.parentElement;if(!t&&e.parentNode instanceof ShadowRoot)return e.parentNode;return t}function ne(){return document}function H(e,t){return e.getRootNode?e.getRootNode({composed:t}):ne()}function T(e,t){while(e&&!t(e)){e=u(e)}return e||null}function q(e,t,n){const r=te(t,n);const o=te(t,"hx-disinherit");var i=te(t,"hx-inherit");if(e!==t){if(Q.config.disableInheritance){if(i&&(i==="*"||i.split(" ").indexOf(n)>=0)){return r}else{return null}}if(o&&(o==="*"||o.split(" ").indexOf(n)>=0)){return"unset"}}return r}function re(t,n){let r=null;T(t,function(e){return!!(r=q(t,ce(e),n))});if(r!=="unset"){return r}}function a(e,t){const n=e instanceof Element&&(e.matches||e.matchesSelector||e.msMatchesSelector||e.mozMatchesSelector||e.webkitMatchesSelector||e.oMatchesSelector);return!!n&&n.call(e,t)}function L(e){const t=/<([a-z][^\/\0>\x20\t\r\n\f]*)/i;const n=t.exec(e);if(n){return n[1].toLowerCase()}else{return""}}function N(e){const t=new DOMParser;return t.parseFromString(e,"text/html")}function A(e,t){while(t.childNodes.length>0){e.append(t.childNodes[0])}}function I(e){const t=ne().createElement("script");se(e.attributes,function(e){t.setAttribute(e.name,e.value)});t.textContent=e.textContent;t.async=false;if(Q.config.inlineScriptNonce){t.nonce=Q.config.inlineScriptNonce}return t}function P(e){return e.matches("script")&&(e.type==="text/javascript"||e.type==="module"||e.type==="")}function k(e){Array.from(e.querySelectorAll("script")).forEach(e=>{if(P(e)){const t=I(e);const n=e.parentNode;try{n.insertBefore(t,e)}catch(e){w(e)}finally{e.remove()}}})}function D(e){const t=e.replace(O,"");const n=L(t);let r;if(n==="html"){r=new DocumentFragment;const i=N(e);A(r,i.body);r.title=i.title}else if(n==="body"){r=new DocumentFragment;const i=N(t);A(r,i.body);r.title=i.title}else{const i=N('");r=i.querySelector("template").content;r.title=i.title;var o=r.querySelector("title");if(o&&o.parentNode===r){o.remove();r.title=o.innerText}}if(r){if(Q.config.allowScriptTags){k(r)}else{r.querySelectorAll("script").forEach(e=>e.remove())}}return r}function oe(e){if(e){e()}}function t(e,t){return Object.prototype.toString.call(e)==="[object "+t+"]"}function M(e){return typeof e==="function"}function X(e){return t(e,"Object")}function ie(e){const t="htmx-internal-data";let n=e[t];if(!n){n=e[t]={}}return n}function F(t){const n=[];if(t){for(let e=0;e=0}function le(e){const t=e.getRootNode&&e.getRootNode();if(t&&t instanceof window.ShadowRoot){return ne().body.contains(t.host)}else{return ne().body.contains(e)}}function B(e){return e.trim().split(/\s+/)}function ue(e,t){for(const n in t){if(t.hasOwnProperty(n)){e[n]=t[n]}}return e}function S(e){try{return JSON.parse(e)}catch(e){w(e);return null}}function j(){const e="htmx:localStorageTest";try{localStorage.setItem(e,e);localStorage.removeItem(e);return true}catch(e){return false}}function V(t){try{const e=new URL(t);if(e){t=e.pathname+e.search}if(!/^\/$/.test(t)){t=t.replace(/\/+$/,"")}return t}catch(e){return t}}function _(e){return vn(ne().body,function(){return eval(e)})}function $(t){const e=Q.on("htmx:load",function(e){t(e.detail.elt)});return e}function z(){Q.logger=function(e,t,n){if(console){console.log(t,e,n)}}}function J(){Q.logger=null}function r(e,t){if(typeof e!=="string"){return e.querySelector(t)}else{return r(ne(),e)}}function p(e,t){if(typeof e!=="string"){return e.querySelectorAll(t)}else{return p(ne(),e)}}function E(){return window}function K(e,t){e=y(e);if(t){E().setTimeout(function(){K(e);e=null},t)}else{u(e).removeChild(e)}}function ce(e){return e instanceof Element?e:null}function G(e){return e instanceof HTMLElement?e:null}function Z(e){return typeof e==="string"?e:null}function h(e){return e instanceof Element||e instanceof Document||e instanceof DocumentFragment?e:null}function W(e,t,n){e=ce(y(e));if(!e){return}if(n){E().setTimeout(function(){W(e,t);e=null},n)}else{e.classList&&e.classList.add(t)}}function o(e,t,n){let r=ce(y(e));if(!r){return}if(n){E().setTimeout(function(){o(r,t);r=null},n)}else{if(r.classList){r.classList.remove(t);if(r.classList.length===0){r.removeAttribute("class")}}}}function Y(e,t){e=y(e);e.classList.toggle(t)}function ge(e,t){e=y(e);se(e.parentElement.children,function(e){o(e,t)});W(ce(e),t)}function g(e,t){e=ce(y(e));if(e&&e.closest){return e.closest(t)}else{do{if(e==null||a(e,t)){return e}}while(e=e&&ce(u(e)));return null}}function l(e,t){return e.substring(0,t.length)===t}function pe(e,t){return e.substring(e.length-t.length)===t}function i(e){const t=e.trim();if(l(t,"<")&&pe(t,"/>")){return t.substring(1,t.length-2)}else{return t}}function m(e,t,n){e=y(e);if(t.indexOf("closest ")===0){return[g(ce(e),i(t.substr(8)))]}else if(t.indexOf("find ")===0){return[r(h(e),i(t.substr(5)))]}else if(t==="next"){return[ce(e).nextElementSibling]}else if(t.indexOf("next ")===0){return[me(e,i(t.substr(5)),!!n)]}else if(t==="previous"){return[ce(e).previousElementSibling]}else if(t.indexOf("previous ")===0){return[ye(e,i(t.substr(9)),!!n)]}else if(t==="document"){return[document]}else if(t==="window"){return[window]}else if(t==="body"){return[document.body]}else if(t==="root"){return[H(e,!!n)]}else if(t.indexOf("global ")===0){return m(e,t.slice(7),true)}else{return F(h(H(e,!!n)).querySelectorAll(i(t)))}}var me=function(t,e,n){const r=h(H(t,n)).querySelectorAll(e);for(let e=0;e=0;e--){const o=r[e];if(o.compareDocumentPosition(t)===Node.DOCUMENT_POSITION_FOLLOWING){return o}}};function fe(e,t){if(typeof e!=="string"){return m(e,t)[0]}else{return m(ne().body,e)[0]}}function y(e,t){if(typeof e==="string"){return r(h(t)||document,e)}else{return e}}function xe(e,t,n){if(M(t)){return{target:ne().body,event:Z(e),listener:t}}else{return{target:y(e),event:Z(t),listener:n}}}function be(t,n,r){_n(function(){const e=xe(t,n,r);e.target.addEventListener(e.event,e.listener)});const e=M(n);return e?n:r}function we(t,n,r){_n(function(){const e=xe(t,n,r);e.target.removeEventListener(e.event,e.listener)});return M(n)?n:r}const ve=ne().createElement("output");function Se(e,t){const n=re(e,t);if(n){if(n==="this"){return[Ee(e,t)]}else{const r=m(e,n);if(r.length===0){w('The selector "'+n+'" on '+t+" returned no matches!");return[ve]}else{return r}}}}function Ee(e,t){return ce(T(e,function(e){return te(ce(e),t)!=null}))}function Ce(e){const t=re(e,"hx-target");if(t){if(t==="this"){return Ee(e,"hx-target")}else{return fe(e,t)}}else{const n=ie(e);if(n.boosted){return ne().body}else{return e}}}function Re(t){const n=Q.config.attributesToSettle;for(let e=0;e0){s=e.substr(0,e.indexOf(":"));t=e.substr(e.indexOf(":")+1,e.length)}else{s=e}const n=ne().querySelectorAll(t);if(n){se(n,function(e){let t;const n=o.cloneNode(true);t=ne().createDocumentFragment();t.appendChild(n);if(!He(s,e)){t=h(n)}const r={shouldSwap:true,target:e,fragment:t};if(!he(e,"htmx:oobBeforeSwap",r))return;e=r.target;if(r.shouldSwap){_e(s,e,e,t,i)}se(i.elts,function(e){he(e,"htmx:oobAfterSwap",r)})});o.parentNode.removeChild(o)}else{o.parentNode.removeChild(o);ae(ne().body,"htmx:oobErrorNoTarget",{content:o})}return e}function qe(e){se(p(e,"[hx-preserve], [data-hx-preserve]"),function(e){const t=te(e,"id");const n=ne().getElementById(t);if(n!=null){e.parentNode.replaceChild(n,e)}})}function Le(l,e,u){se(e.querySelectorAll("[id]"),function(t){const n=ee(t,"id");if(n&&n.length>0){const r=n.replace("'","\\'");const o=t.tagName.replace(":","\\:");const e=h(l);const i=e&&e.querySelector(o+"[id='"+r+"']");if(i&&i!==e){const s=t.cloneNode();Oe(t,i);u.tasks.push(function(){Oe(t,s)})}}})}function Ne(e){return function(){o(e,Q.config.addedClass);Dt(ce(e));Ae(h(e));he(e,"htmx:load")}}function Ae(e){const t="[autofocus]";const n=G(a(e,t)?e:e.querySelector(t));if(n!=null){n.focus()}}function c(e,t,n,r){Le(e,n,r);while(n.childNodes.length>0){const o=n.firstChild;W(ce(o),Q.config.addedClass);e.insertBefore(o,t);if(o.nodeType!==Node.TEXT_NODE&&o.nodeType!==Node.COMMENT_NODE){r.tasks.push(Ne(o))}}}function Ie(e,t){let n=0;while(n0){E().setTimeout(l,r.settleDelay)}else{l()}}function Je(e,t,n){const r=e.getResponseHeader(t);if(r.indexOf("{")===0){const o=S(r);for(const i in o){if(o.hasOwnProperty(i)){let e=o[i];if(!X(e)){e={value:e}}he(n,i,e)}}}else{const s=r.split(",");for(let e=0;e0){const s=o[0];if(s==="]"){e--;if(e===0){if(n===null){t=t+"true"}o.shift();t+=")})";try{const l=vn(r,function(){return Function(t)()},function(){return true});l.source=t;return l}catch(e){ae(ne().body,"htmx:syntax:error",{error:e,source:t});return null}}}else if(s==="["){e++}if(nt(s,n,i)){t+="(("+i+"."+s+") ? ("+i+"."+s+") : (window."+s+"))"}else{t=t+s}n=o.shift()}}}function b(e,t){let n="";while(e.length>0&&!t.test(e[0])){n+=e.shift()}return n}function ot(e){let t;if(e.length>0&&Qe.test(e[0])){e.shift();t=b(e,et).trim();e.shift()}else{t=b(e,x)}return t}const it="input, textarea, select";function st(e,t,n){const r=[];const o=tt(t);do{b(o,Ye);const l=o.length;const u=b(o,/[,\[\s]/);if(u!==""){if(u==="every"){const c={trigger:"every"};b(o,Ye);c.pollInterval=d(b(o,/[,\[\s]/));b(o,Ye);var i=rt(e,o,"event");if(i){c.eventFilter=i}r.push(c)}else{const f={trigger:u};var i=rt(e,o,"event");if(i){f.eventFilter=i}while(o.length>0&&o[0]!==","){b(o,Ye);const a=o.shift();if(a==="changed"){f.changed=true}else if(a==="once"){f.once=true}else if(a==="consume"){f.consume=true}else if(a==="delay"&&o[0]===":"){o.shift();f.delay=d(b(o,x))}else if(a==="from"&&o[0]===":"){o.shift();if(Qe.test(o[0])){var s=ot(o)}else{var s=b(o,x);if(s==="closest"||s==="find"||s==="next"||s==="previous"){o.shift();const h=ot(o);if(h.length>0){s+=" "+h}}}f.from=s}else if(a==="target"&&o[0]===":"){o.shift();f.target=ot(o)}else if(a==="throttle"&&o[0]===":"){o.shift();f.throttle=d(b(o,x))}else if(a==="queue"&&o[0]===":"){o.shift();f.queue=b(o,x)}else if(a==="root"&&o[0]===":"){o.shift();f[a]=ot(o)}else if(a==="threshold"&&o[0]===":"){o.shift();f[a]=b(o,x)}else{ae(e,"htmx:syntax:error",{token:o.shift()})}}r.push(f)}}if(o.length===l){ae(e,"htmx:syntax:error",{token:o.shift()})}b(o,Ye)}while(o[0]===","&&o.shift());if(n){n[t]=r}return r}function lt(e){const t=te(e,"hx-trigger");let n=[];if(t){const r=Q.config.triggerSpecsCache;n=r&&r[t]||st(e,t,r)}if(n.length>0){return n}else if(a(e,"form")){return[{trigger:"submit"}]}else if(a(e,'input[type="button"], input[type="submit"]')){return[{trigger:"click"}]}else if(a(e,it)){return[{trigger:"change"}]}else{return[{trigger:"click"}]}}function ut(e){ie(e).cancelled=true}function ct(e,t,n){const r=ie(e);r.timeout=E().setTimeout(function(){if(le(e)&&r.cancelled!==true){if(!pt(n,e,Xt("hx:poll:trigger",{triggerSpec:n,target:e}))){t(e)}ct(e,t,n)}},n.pollInterval)}function ft(e){return location.hostname===e.hostname&&ee(e,"href")&&ee(e,"href").indexOf("#")!==0}function at(e){return g(e,Q.config.disableSelector)}function ht(t,n,e){if(t instanceof HTMLAnchorElement&&ft(t)&&(t.target===""||t.target==="_self")||t.tagName==="FORM"){n.boosted=true;let r,o;if(t.tagName==="A"){r="get";o=ee(t,"href")}else{const i=ee(t,"method");r=i?i.toLowerCase():"get";if(r==="get"){}o=ee(t,"action")}e.forEach(function(e){mt(t,function(e,t){const n=ce(e);if(at(n)){f(n);return}de(r,o,n,t)},n,e,true)})}}function dt(e,t){const n=ce(t);if(!n){return false}if(e.type==="submit"||e.type==="click"){if(n.tagName==="FORM"){return true}if(a(n,'input[type="submit"], button')&&g(n,"form")!==null){return true}if(n instanceof HTMLAnchorElement&&n.href&&(n.getAttribute("href")==="#"||n.getAttribute("href").indexOf("#")!==0)){return true}}return false}function gt(e,t){return ie(e).boosted&&e instanceof HTMLAnchorElement&&t.type==="click"&&(t.ctrlKey||t.metaKey)}function pt(e,t,n){const r=e.eventFilter;if(r){try{return r.call(t,n)!==true}catch(e){const o=r.source;ae(ne().body,"htmx:eventFilter:error",{error:e,source:o});return true}}return false}function mt(s,l,e,u,c){const f=ie(s);let t;if(u.from){t=m(s,u.from)}else{t=[s]}if(u.changed){t.forEach(function(e){const t=ie(e);t.lastValue=e.value})}se(t,function(o){const i=function(e){if(!le(s)){o.removeEventListener(u.trigger,i);return}if(gt(s,e)){return}if(c||dt(e,s)){e.preventDefault()}if(pt(u,s,e)){return}const t=ie(e);t.triggerSpec=u;if(t.handledFor==null){t.handledFor=[]}if(t.handledFor.indexOf(s)<0){t.handledFor.push(s);if(u.consume){e.stopPropagation()}if(u.target&&e.target){if(!a(ce(e.target),u.target)){return}}if(u.once){if(f.triggeredOnce){return}else{f.triggeredOnce=true}}if(u.changed){const n=ie(o);const r=o.value;if(n.lastValue===r){return}n.lastValue=r}if(f.delayed){clearTimeout(f.delayed)}if(f.throttle){return}if(u.throttle>0){if(!f.throttle){l(s,e);f.throttle=E().setTimeout(function(){f.throttle=null},u.throttle)}}else if(u.delay>0){f.delayed=E().setTimeout(function(){l(s,e)},u.delay)}else{he(s,"htmx:trigger");l(s,e)}}};if(e.listenerInfos==null){e.listenerInfos=[]}e.listenerInfos.push({trigger:u.trigger,listener:i,on:o});o.addEventListener(u.trigger,i)})}let yt=false;let xt=null;function bt(){if(!xt){xt=function(){yt=true};window.addEventListener("scroll",xt);setInterval(function(){if(yt){yt=false;se(ne().querySelectorAll("[hx-trigger*='revealed'],[data-hx-trigger*='revealed']"),function(e){wt(e)})}},200)}}function wt(e){if(!s(e,"data-hx-revealed")&&U(e)){e.setAttribute("data-hx-revealed","true");const t=ie(e);if(t.initHash){he(e,"revealed")}else{e.addEventListener("htmx:afterProcessNode",function(){he(e,"revealed")},{once:true})}}}function vt(e,t,n,r){const o=function(){if(!n.loaded){n.loaded=true;t(e)}};if(r>0){E().setTimeout(o,r)}else{o()}}function St(t,n,e){let i=false;se(v,function(r){if(s(t,"hx-"+r)){const o=te(t,"hx-"+r);i=true;n.path=o;n.verb=r;e.forEach(function(e){Et(t,e,n,function(e,t){const n=ce(e);if(g(n,Q.config.disableSelector)){f(n);return}de(r,o,n,t)})})}});return i}function Et(r,e,t,n){if(e.trigger==="revealed"){bt();mt(r,n,t,e);wt(ce(r))}else if(e.trigger==="intersect"){const o={};if(e.root){o.root=fe(r,e.root)}if(e.threshold){o.threshold=parseFloat(e.threshold)}const i=new IntersectionObserver(function(t){for(let e=0;e0){t.polling=true;ct(ce(r),n,e)}else{mt(r,n,t,e)}}function Ct(e){const t=ce(e);if(!t){return false}const n=t.attributes;for(let e=0;e", "+e).join(""));return o}else{return[]}}function qt(e){const t=g(ce(e.target),"button, input[type='submit']");const n=Nt(e);if(n){n.lastButtonClicked=t}}function Lt(e){const t=Nt(e);if(t){t.lastButtonClicked=null}}function Nt(e){const t=g(ce(e.target),"button, input[type='submit']");if(!t){return}const n=y("#"+ee(t,"form"),t.getRootNode())||g(t,"form");if(!n){return}return ie(n)}function At(e){e.addEventListener("click",qt);e.addEventListener("focusin",qt);e.addEventListener("focusout",Lt)}function It(t,e,n){const r=ie(t);if(!Array.isArray(r.onHandlers)){r.onHandlers=[]}let o;const i=function(e){vn(t,function(){if(at(t)){return}if(!o){o=new Function("event",n)}o.call(t,e)})};t.addEventListener(e,i);r.onHandlers.push({event:e,listener:i})}function Pt(t){ke(t);for(let e=0;eQ.config.historyCacheSize){i.shift()}while(i.length>0){try{localStorage.setItem("htmx-history-cache",JSON.stringify(i));break}catch(e){ae(ne().body,"htmx:historyCacheError",{cause:e,cache:i});i.shift()}}}function _t(t){if(!j()){return null}t=V(t);const n=S(localStorage.getItem("htmx-history-cache"))||[];for(let e=0;e=200&&this.status<400){he(ne().body,"htmx:historyCacheMissLoad",i);const e=D(this.response);const t=e.querySelector("[hx-history-elt],[data-hx-history-elt]")||e;const n=jt();const r=xn(n);Dn(e.title);Ve(n,t,r);Gt(r.tasks);Bt=o;he(ne().body,"htmx:historyRestore",{path:o,cacheMiss:true,serverResponse:this.response})}else{ae(ne().body,"htmx:historyCacheMissLoadError",i)}};e.send()}function Wt(e){zt();e=e||location.pathname+location.search;const t=_t(e);if(t){const n=D(t.content);const r=jt();const o=xn(r);Dn(n.title);Ve(r,n,o);Gt(o.tasks);E().setTimeout(function(){window.scrollTo(0,t.scroll)},0);Bt=e;he(ne().body,"htmx:historyRestore",{path:e,item:t})}else{if(Q.config.refreshOnHistoryMiss){window.location.reload(true)}else{Zt(e)}}}function Yt(e){let t=Se(e,"hx-indicator");if(t==null){t=[e]}se(t,function(e){const t=ie(e);t.requestCount=(t.requestCount||0)+1;e.classList.add.call(e.classList,Q.config.requestClass)});return t}function Qt(e){let t=Se(e,"hx-disabled-elt");if(t==null){t=[]}se(t,function(e){const t=ie(e);t.requestCount=(t.requestCount||0)+1;e.setAttribute("disabled","")});return t}function en(e,t){se(e,function(e){const t=ie(e);t.requestCount=(t.requestCount||0)-1;if(t.requestCount===0){e.classList.remove.call(e.classList,Q.config.requestClass)}});se(t,function(e){const t=ie(e);t.requestCount=(t.requestCount||0)-1;if(t.requestCount===0){e.removeAttribute("disabled")}})}function tn(t,n){for(let e=0;en.indexOf(e)<0)}else{e=e.filter(e=>e!==n)}r.delete(t);se(e,e=>r.append(t,e))}}function sn(t,n,r,o,i){if(o==null||tn(t,o)){return}else{t.push(o)}if(nn(o)){const s=ee(o,"name");let e=o.value;if(o instanceof HTMLSelectElement&&o.multiple){e=F(o.querySelectorAll("option:checked")).map(function(e){return e.value})}if(o instanceof HTMLInputElement&&o.files){e=F(o.files)}rn(s,e,n);if(i){ln(o,r)}}if(o instanceof HTMLFormElement){se(o.elements,function(e){if(t.indexOf(e)>=0){on(e.name,e.value,n)}else{t.push(e)}if(i){ln(e,r)}});new FormData(o).forEach(function(e,t){rn(t,e,n)})}}function ln(e,t){const n=e;if(n.willValidate){he(n,"htmx:validation:validate");if(!n.checkValidity()){t.push({elt:n,message:n.validationMessage,validity:n.validity});he(n,"htmx:validation:failed",{message:n.validationMessage,validity:n.validity})}}}function un(t,e){for(const n of e.keys()){t.delete(n);e.getAll(n).forEach(function(e){t.append(n,e)})}return t}function cn(e,t){const n=[];const r=new FormData;const o=new FormData;const i=[];const s=ie(e);if(s.lastButtonClicked&&!le(s.lastButtonClicked)){s.lastButtonClicked=null}let l=e instanceof HTMLFormElement&&e.noValidate!==true||te(e,"hx-validate")==="true";if(s.lastButtonClicked){l=l&&s.lastButtonClicked.formNoValidate!==true}if(t!=="get"){sn(n,o,i,g(e,"form"),l)}sn(n,r,i,e,l);if(s.lastButtonClicked||e.tagName==="BUTTON"||e.tagName==="INPUT"&&ee(e,"type")==="submit"){const c=s.lastButtonClicked||e;const f=ee(c,"name");rn(f,c.value,o)}const u=Se(e,"hx-include");se(u,function(e){sn(n,r,i,ce(e),l);if(!a(e,"form")){se(h(e).querySelectorAll(it),function(e){sn(n,r,i,e,l)})}});un(r,o);return{errors:i,formData:r,values:An(r)}}function fn(e,t,n){if(e!==""){e+="&"}if(String(n)==="[object Object]"){n=JSON.stringify(n)}const r=encodeURIComponent(n);e+=encodeURIComponent(t)+"="+r;return e}function an(e){e=Ln(e);let n="";e.forEach(function(e,t){n=fn(n,t,e)});return n}function hn(e,t,n){const r={"HX-Request":"true","HX-Trigger":ee(e,"id"),"HX-Trigger-Name":ee(e,"name"),"HX-Target":te(t,"id"),"HX-Current-URL":ne().location.href};wn(e,"hx-headers",false,r);if(n!==undefined){r["HX-Prompt"]=n}if(ie(e).boosted){r["HX-Boosted"]="true"}return r}function dn(n,e){const t=re(e,"hx-params");if(t){if(t==="none"){return new FormData}else if(t==="*"){return n}else if(t.indexOf("not ")===0){se(t.substr(4).split(","),function(e){e=e.trim();n.delete(e)});return n}else{const r=new FormData;se(t.split(","),function(t){t=t.trim();if(n.has(t)){n.getAll(t).forEach(function(e){r.append(t,e)})}});return r}}else{return n}}function gn(e){return!!ee(e,"href")&&ee(e,"href").indexOf("#")>=0}function pn(e,t){const n=t||re(e,"hx-swap");const r={swapStyle:ie(e).boosted?"innerHTML":Q.config.defaultSwapStyle,swapDelay:Q.config.defaultSwapDelay,settleDelay:Q.config.defaultSettleDelay};if(Q.config.scrollIntoViewOnBoost&&ie(e).boosted&&!gn(e)){r.show="top"}if(n){const s=B(n);if(s.length>0){for(let e=0;e0?o.join(":"):null;r.scroll=c;r.scrollTarget=i}else if(l.indexOf("show:")===0){const f=l.substr(5);var o=f.split(":");const a=o.pop();var i=o.length>0?o.join(":"):null;r.show=a;r.showTarget=i}else if(l.indexOf("focus-scroll:")===0){const h=l.substr("focus-scroll:".length);r.focusScroll=h=="true"}else if(e==0){r.swapStyle=l}else{w("Unknown modifier in hx-swap: "+l)}}}}return r}function mn(e){return re(e,"hx-encoding")==="multipart/form-data"||a(e,"form")&&ee(e,"enctype")==="multipart/form-data"}function yn(t,n,r){let o=null;Ut(n,function(e){if(o==null){o=e.encodeParameters(t,r,n)}});if(o!=null){return o}else{if(mn(n)){return un(new FormData,Ln(r))}else{return an(r)}}}function xn(e){return{tasks:[],elts:[e]}}function bn(e,t){const n=e[0];const r=e[e.length-1];if(t.scroll){var o=null;if(t.scrollTarget){o=ce(fe(n,t.scrollTarget))}if(t.scroll==="top"&&(n||o)){o=o||n;o.scrollTop=0}if(t.scroll==="bottom"&&(r||o)){o=o||r;o.scrollTop=o.scrollHeight}}if(t.show){var o=null;if(t.showTarget){let e=t.showTarget;if(t.showTarget==="window"){e="body"}o=ce(fe(n,e))}if(t.show==="top"&&(n||o)){o=o||n;o.scrollIntoView({block:"start",behavior:Q.config.scrollBehavior})}if(t.show==="bottom"&&(r||o)){o=o||r;o.scrollIntoView({block:"end",behavior:Q.config.scrollBehavior})}}}function wn(r,e,o,i){if(i==null){i={}}if(r==null){return i}const s=te(r,e);if(s){let e=s.trim();let t=o;if(e==="unset"){return null}if(e.indexOf("javascript:")===0){e=e.substr(11);t=true}else if(e.indexOf("js:")===0){e=e.substr(3);t=true}if(e.indexOf("{")!==0){e="{"+e+"}"}let n;if(t){n=vn(r,function(){return Function("return ("+e+")")()},{})}else{n=S(e)}for(const l in n){if(n.hasOwnProperty(l)){if(i[l]==null){i[l]=n[l]}}}}return wn(ce(u(r)),e,o,i)}function vn(e,t,n){if(Q.config.allowEval){return t()}else{ae(e,"htmx:evalDisallowedError");return n}}function Sn(e,t){return wn(e,"hx-vars",true,t)}function En(e,t){return wn(e,"hx-vals",false,t)}function Cn(e){return ue(Sn(e),En(e))}function Rn(t,n,r){if(r!==null){try{t.setRequestHeader(n,r)}catch(e){t.setRequestHeader(n,encodeURIComponent(r));t.setRequestHeader(n+"-URI-AutoEncoded","true")}}}function On(t){if(t.responseURL&&typeof URL!=="undefined"){try{const e=new URL(t.responseURL);return e.pathname+e.search}catch(e){ae(ne().body,"htmx:badResponseUrl",{url:t.responseURL})}}}function C(e,t){return t.test(e.getAllResponseHeaders())}function Hn(e,t,n){e=e.toLowerCase();if(n){if(n instanceof Element||typeof n==="string"){return de(e,t,null,null,{targetOverride:y(n),returnPromise:true})}else{return de(e,t,y(n.source),n.event,{handler:n.handler,headers:n.headers,values:n.values,targetOverride:y(n.target),swapOverride:n.swap,select:n.select,returnPromise:true})}}else{return de(e,t,null,null,{returnPromise:true})}}function Tn(e){const t=[];while(e){t.push(e);e=e.parentElement}return t}function qn(e,t,n){let r;let o;if(typeof URL==="function"){o=new URL(t,document.location.href);const i=document.location.origin;r=i===o.origin}else{o=t;r=l(t,document.location.origin)}if(Q.config.selfRequestsOnly){if(!r){return false}}return he(e,"htmx:validateUrl",ue({url:o,sameHost:r},n))}function Ln(e){if(e instanceof FormData)return e;const t=new FormData;for(const n in e){if(e.hasOwnProperty(n)){if(typeof e[n].forEach==="function"){e[n].forEach(function(e){t.append(n,e)})}else if(typeof e[n]==="object"){t.append(n,JSON.stringify(e[n]))}else{t.append(n,e[n])}}}return t}function Nn(r,o,e){return new Proxy(e,{get:function(t,e){if(typeof e==="number")return t[e];if(e==="length")return t.length;if(e==="push"){return function(e){t.push(e);r.append(o,e)}}if(typeof t[e]==="function"){return function(){t[e].apply(t,arguments);r.delete(o);t.forEach(function(e){r.append(o,e)})}}if(t[e]&&t[e].length===1){return t[e][0]}else{return t[e]}},set:function(e,t,n){e[t]=n;r.delete(o);e.forEach(function(e){r.append(o,e)});return true}})}function An(r){return new Proxy(r,{get:function(e,t){if(typeof t==="symbol"){return Reflect.get(e,t)}if(t==="toJSON"){return()=>Object.fromEntries(r)}if(t in e){if(typeof e[t]==="function"){return function(){return r[t].apply(r,arguments)}}else{return e[t]}}const n=r.getAll(t);if(n.length===0){return undefined}else if(n.length===1){return n[0]}else{return Nn(e,t,n)}},set:function(t,n,e){if(typeof n!=="string"){return false}t.delete(n);if(typeof e.forEach==="function"){e.forEach(function(e){t.append(n,e)})}else{t.append(n,e)}return true},deleteProperty:function(e,t){if(typeof t==="string"){e.delete(t)}return true},ownKeys:function(e){return Reflect.ownKeys(Object.fromEntries(e))},getOwnPropertyDescriptor:function(e,t){return Reflect.getOwnPropertyDescriptor(Object.fromEntries(e),t)}})}function de(t,n,r,o,i,D){let s=null;let l=null;i=i!=null?i:{};if(i.returnPromise&&typeof Promise!=="undefined"){var e=new Promise(function(e,t){s=e;l=t})}if(r==null){r=ne().body}const M=i.handler||Mn;const X=i.select||null;if(!le(r)){oe(s);return e}const u=i.targetOverride||ce(Ce(r));if(u==null||u==ve){ae(r,"htmx:targetError",{target:te(r,"hx-target")});oe(l);return e}let c=ie(r);const f=c.lastButtonClicked;if(f){const L=ee(f,"formaction");if(L!=null){n=L}const N=ee(f,"formmethod");if(N!=null){if(N.toLowerCase()!=="dialog"){t=N}}}const a=re(r,"hx-confirm");if(D===undefined){const K=function(e){return de(t,n,r,o,i,!!e)};const G={target:u,elt:r,path:n,verb:t,triggeringEvent:o,etc:i,issueRequest:K,question:a};if(he(r,"htmx:confirm",G)===false){oe(s);return e}}let h=r;let d=re(r,"hx-sync");let g=null;let F=false;if(d){const A=d.split(":");const I=A[0].trim();if(I==="this"){h=Ee(r,"hx-sync")}else{h=ce(fe(r,I))}d=(A[1]||"drop").trim();c=ie(h);if(d==="drop"&&c.xhr&&c.abortable!==true){oe(s);return e}else if(d==="abort"){if(c.xhr){oe(s);return e}else{F=true}}else if(d==="replace"){he(h,"htmx:abort")}else if(d.indexOf("queue")===0){const Z=d.split(" ");g=(Z[1]||"last").trim()}}if(c.xhr){if(c.abortable){he(h,"htmx:abort")}else{if(g==null){if(o){const P=ie(o);if(P&&P.triggerSpec&&P.triggerSpec.queue){g=P.triggerSpec.queue}}if(g==null){g="last"}}if(c.queuedRequests==null){c.queuedRequests=[]}if(g==="first"&&c.queuedRequests.length===0){c.queuedRequests.push(function(){de(t,n,r,o,i)})}else if(g==="all"){c.queuedRequests.push(function(){de(t,n,r,o,i)})}else if(g==="last"){c.queuedRequests=[];c.queuedRequests.push(function(){de(t,n,r,o,i)})}oe(s);return e}}const p=new XMLHttpRequest;c.xhr=p;c.abortable=F;const m=function(){c.xhr=null;c.abortable=false;if(c.queuedRequests!=null&&c.queuedRequests.length>0){const e=c.queuedRequests.shift();e()}};const U=re(r,"hx-prompt");if(U){var y=prompt(U);if(y===null||!he(r,"htmx:prompt",{prompt:y,target:u})){oe(s);m();return e}}if(a&&!D){if(!confirm(a)){oe(s);m();return e}}let x=hn(r,u,y);if(t!=="get"&&!mn(r)){x["Content-Type"]="application/x-www-form-urlencoded"}if(i.headers){x=ue(x,i.headers)}const B=cn(r,t);let b=B.errors;const j=B.formData;if(i.values){un(j,Ln(i.values))}const V=Ln(Cn(r));const w=un(j,V);let v=dn(w,r);if(Q.config.getCacheBusterParam&&t==="get"){v.set("org.htmx.cache-buster",ee(u,"id")||"true")}if(n==null||n===""){n=ne().location.href}const S=wn(r,"hx-request");const _=ie(r).boosted;let E=Q.config.methodsThatUseUrlParams.indexOf(t)>=0;const C={boosted:_,useUrlParams:E,formData:v,parameters:An(v),unfilteredFormData:w,unfilteredParameters:An(w),headers:x,target:u,verb:t,errors:b,withCredentials:i.credentials||S.credentials||Q.config.withCredentials,timeout:i.timeout||S.timeout||Q.config.timeout,path:n,triggeringEvent:o};if(!he(r,"htmx:configRequest",C)){oe(s);m();return e}n=C.path;t=C.verb;x=C.headers;v=Ln(C.parameters);b=C.errors;E=C.useUrlParams;if(b&&b.length>0){he(r,"htmx:validation:halted",C);oe(s);m();return e}const $=n.split("#");const z=$[0];const R=$[1];let O=n;if(E){O=z;const W=!v.keys().next().done;if(W){if(O.indexOf("?")<0){O+="?"}else{O+="&"}O+=an(v);if(R){O+="#"+R}}}if(!qn(r,O,C)){ae(r,"htmx:invalidPath",C);oe(l);return e}p.open(t.toUpperCase(),O,true);p.overrideMimeType("text/html");p.withCredentials=C.withCredentials;p.timeout=C.timeout;if(S.noHeaders){}else{for(const k in x){if(x.hasOwnProperty(k)){const Y=x[k];Rn(p,k,Y)}}}const H={xhr:p,target:u,requestConfig:C,etc:i,boosted:_,select:X,pathInfo:{requestPath:n,finalRequestPath:O,responsePath:null,anchor:R}};p.onload=function(){try{const t=Tn(r);H.pathInfo.responsePath=On(p);M(r,H);en(T,q);he(r,"htmx:afterRequest",H);he(r,"htmx:afterOnLoad",H);if(!le(r)){let e=null;while(t.length>0&&e==null){const n=t.shift();if(le(n)){e=n}}if(e){he(e,"htmx:afterRequest",H);he(e,"htmx:afterOnLoad",H)}}oe(s);m()}catch(e){ae(r,"htmx:onLoadError",ue({error:e},H));throw e}};p.onerror=function(){en(T,q);ae(r,"htmx:afterRequest",H);ae(r,"htmx:sendError",H);oe(l);m()};p.onabort=function(){en(T,q);ae(r,"htmx:afterRequest",H);ae(r,"htmx:sendAbort",H);oe(l);m()};p.ontimeout=function(){en(T,q);ae(r,"htmx:afterRequest",H);ae(r,"htmx:timeout",H);oe(l);m()};if(!he(r,"htmx:beforeRequest",H)){oe(s);m();return e}var T=Yt(r);var q=Qt(r);se(["loadstart","loadend","progress","abort"],function(t){se([p,p.upload],function(e){e.addEventListener(t,function(e){he(r,"htmx:xhr:"+t,{lengthComputable:e.lengthComputable,loaded:e.loaded,total:e.total})})})});he(r,"htmx:beforeSend",H);const J=E?null:yn(p,r,v);p.send(J);return e}function In(e,t){const n=t.xhr;let r=null;let o=null;if(C(n,/HX-Push:/i)){r=n.getResponseHeader("HX-Push");o="push"}else if(C(n,/HX-Push-Url:/i)){r=n.getResponseHeader("HX-Push-Url");o="push"}else if(C(n,/HX-Replace-Url:/i)){r=n.getResponseHeader("HX-Replace-Url");o="replace"}if(r){if(r==="false"){return{}}else{return{type:o,path:r}}}const i=t.pathInfo.finalRequestPath;const s=t.pathInfo.responsePath;const l=re(e,"hx-push-url");const u=re(e,"hx-replace-url");const c=ie(e).boosted;let f=null;let a=null;if(l){f="push";a=l}else if(u){f="replace";a=u}else if(c){f="push";a=s||i}if(a){if(a==="false"){return{}}if(a==="true"){a=s||i}if(t.pathInfo.anchor&&a.indexOf("#")===-1){a=a+"#"+t.pathInfo.anchor}return{type:f,path:a}}else{return{}}}function Pn(e,t){var n=new RegExp(e.code);return n.test(t.toString(10))}function kn(e){for(var t=0;t0){E().setTimeout(e,y.swapDelay)}else{e()}}if(a){ae(o,"htmx:responseError",ue({error:"Response Status Error Code "+s.status+" from "+i.pathInfo.requestPath},i))}}const Xn={};function Fn(){return{init:function(e){return null},getSelectors:function(){return null},onEvent:function(e,t){return true},transformResponse:function(e,t,n){return e},isInlineSwap:function(e){return false},handleSwap:function(e,t,n,r){return false},encodeParameters:function(e,t,n){return null}}}function Un(e,t){if(t.init){t.init(n)}Xn[e]=ue(Fn(),t)}function Bn(e){delete Xn[e]}function jn(e,n,r){if(n==undefined){n=[]}if(e==undefined){return n}if(r==undefined){r=[]}const t=te(e,"hx-ext");if(t){se(t.split(","),function(e){e=e.replace(/ /g,"");if(e.slice(0,7)=="ignore:"){r.push(e.slice(7));return}if(r.indexOf(e)<0){const t=Xn[e];if(t&&n.indexOf(t)<0){n.push(t)}}})}return jn(ce(u(e)),n,r)}var Vn=false;ne().addEventListener("DOMContentLoaded",function(){Vn=true});function _n(e){if(Vn||ne().readyState==="complete"){e()}else{ne().addEventListener("DOMContentLoaded",e)}}function $n(){if(Q.config.includeIndicatorStyles!==false){const e=Q.config.inlineStyleNonce?` nonce="${Q.config.inlineStyleNonce}"`:"";ne().head.insertAdjacentHTML("beforeend"," ."+Q.config.indicatorClass+"{opacity:0} ."+Q.config.requestClass+" ."+Q.config.indicatorClass+"{opacity:1; transition: opacity 200ms ease-in;} ."+Q.config.requestClass+"."+Q.config.indicatorClass+"{opacity:1; transition: opacity 200ms ease-in;} ")}}function zn(){const e=ne().querySelector('meta[name="htmx-config"]');if(e){return S(e.content)}else{return null}}function Jn(){const e=zn();if(e){Q.config=ue(Q.config,e)}}_n(function(){Jn();$n();let e=ne().body;Dt(e);const t=ne().querySelectorAll("[hx-trigger='restored'],[data-hx-trigger='restored']");e.addEventListener("htmx:abort",function(e){const t=e.target;const n=ie(t);if(n&&n.xhr){n.xhr.abort()}});const n=window.onpopstate?window.onpopstate.bind(window):null;window.onpopstate=function(e){if(e.state&&e.state.htmx){Wt();se(t,function(e){he(e,"htmx:restored",{document:ne(),triggerEvent:he})})}else{if(n){n(e)}}};E().setTimeout(function(){he(e,"htmx:load",{});e=null},0)});return Q}(); \ No newline at end of file diff --git a/dist/htmx.min.js.gz b/dist/htmx.min.js.gz index b4f93161b..8271842a3 100644 Binary files a/dist/htmx.min.js.gz and b/dist/htmx.min.js.gz differ diff --git a/src/htmx.d.ts b/src/htmx.d.ts index ee753bbe1..3775459f4 100644 --- a/src/htmx.d.ts +++ b/src/htmx.d.ts @@ -36,6 +36,8 @@ declare namespace htmx { const allowEval: boolean; const allowScriptTags: boolean; const inlineScriptNonce: string; + const inlineStyleNonce: string; + const attributesToSettle: string[]; const withCredentials: boolean; const timeout: number; const wsReconnectDelay: "full-jitter" | ((retryCount: number) => number); @@ -48,26 +50,19 @@ declare namespace htmx { const methodsThatUseUrlParams: (HttpVerb)[]; const selfRequestsOnly: boolean; const ignoreTitle: boolean; + const scrollIntoViewOnBoost: boolean; const triggerSpecsCache: any | null; const disableInheritance: boolean; + const responseHandling: HtmxResponseHandlingConfig[]; const allowNestedOobSwaps: boolean; - const defaultErrorSwapStyle: HtmxSwapStyle; - const defaultErrorTarget: string; - const httpErrorCodesToSwap: number[]; - const layoutQueuesEnabled: boolean; - const cleanUpThrottlingEnabled: boolean; - const disabledEvents: any; } const parseInterval: (str: string) => number; const _: (str: string) => any; - const readLayout: (callback: any) => void; - const writeLayout: (callback: any) => void; - const querySelectorAllExt: (elt: string | Element | Node | Document, selector: string, global?: boolean) => (Node | Window)[]; - const querySelectorExt: (eltOrSelector: string | Node, selector?: string) => Node | Window; const version: string; } type HttpVerb = 'get' | 'head' | 'post' | 'put' | 'delete' | 'connect' | 'options' | 'trace' | 'patch'; type SwapOptions = { + select?: string; selectOOB?: string; eventInfo?: any; anchor?: string; @@ -76,10 +71,9 @@ type SwapOptions = { afterSettleCallback?: swapCallback; }; type swapCallback = () => any; -type HtmxSwapStyle = 'innerHTML' | 'outerHTML' | 'beforebegin' | 'afterbegin' | 'beforeend' | 'afterend' | 'delete' | 'none' | 'mirror' | string; +type HtmxSwapStyle = 'innerHTML' | 'outerHTML' | 'beforebegin' | 'afterbegin' | 'beforeend' | 'afterend' | 'delete' | 'none' | string; type HtmxSwapSpecification = { swapStyle: HtmxSwapStyle; - defaultSwapStyle?: HtmxSwapStyle; swapDelay: number; settleDelay: number; transition?: boolean; @@ -121,12 +115,12 @@ type HtmxAjaxHelperContext = { handler?: HtmxAjaxHandler; target: Element | string; swap?: HtmxSwapStyle; - errorTarget?: Element | string; - errorSwap?: HtmxSwapStyle; values?: any | FormData; headers?: Record; + select?: string; }; type HtmxRequestConfig = { + boosted: boolean; useUrlParams: boolean; formData: FormData; /** @@ -152,6 +146,8 @@ type HtmxResponseInfo = { target: Element; requestConfig: HtmxRequestConfig; etc: HtmxAjaxEtc; + boosted: boolean; + select: string; pathInfo: { requestPath: string; finalRequestPath: string; @@ -160,25 +156,34 @@ type HtmxResponseInfo = { }; failed?: boolean; successful?: boolean; - defaultHandler: (elt: Element, responseInfo: HtmxResponseInfo) => void; }; type HtmxAjaxEtc = { returnPromise?: boolean; handler?: HtmxAjaxHandler; + select?: string; targetOverride?: Element; swapOverride?: HtmxSwapStyle; - errorTargetOverride?: Element; - errorSwapOverride?: HtmxSwapStyle; headers?: Record; values?: any | FormData; credentials?: boolean; timeout?: number; }; +type HtmxResponseHandlingConfig = { + code?: string; + swap: boolean; + error?: boolean; + ignoreTitle?: boolean; + select?: string; + target?: string; + swapOverride?: string; + event?: string; +}; type HtmxBeforeSwapDetails = HtmxResponseInfo & { shouldSwap: boolean; serverResponse: any; isError: boolean; ignoreTitle: boolean; + selectOverride: string; }; type HtmxAjaxHandler = (elt: Element, responseInfo: HtmxResponseInfo) => any; type HtmxSettleTask = (() => void); diff --git a/src/htmx.js b/src/htmx.js index ca21adb9a..e788ec3ec 100644 --- a/src/htmx.js +++ b/src/htmx.js @@ -164,6 +164,12 @@ var htmx = (function() { * @default '' */ inlineScriptNonce: '', + /** + * If set, the nonce will be added to inline styles. + * @type string + * @default '' + */ + inlineStyleNonce: '', /** * Allow cross-site Access-Control requests using credentials such as cookies, authorization headers or TLS client certificates. * @type boolean @@ -293,7 +299,7 @@ var htmx = (function() { querySelectorAllExt: null, /** @type {typeof querySelectorExt} */ querySelectorExt: null, - version: '2.0.0-beta3' + version: '2.0.0-beta4' } // Tsc madness part 2 htmx.onLoad = onLoadHelper @@ -4852,8 +4858,9 @@ var htmx = (function() { function insertIndicatorStyles() { if (htmx.config.includeIndicatorStyles !== false) { + const nonceAttribute = htmx.config.inlineStyleNonce ? ` nonce="${htmx.config.inlineStyleNonce}"` : '' getDocument().head.insertAdjacentHTML('beforeend', - ' + +
- - high power tools for HTML +
+ + high power tools for HTML +
+
+ +
@@ -37,7 +60,7 @@ By removing these constraints, htmx completes HTML as a [hypertext](https://en.w

quick start

```html - +
diff --git a/www/content/api.md b/www/content/api.md index a38ad20c6..2db27926a 100644 --- a/www/content/api.md +++ b/www/content/api.md @@ -120,6 +120,7 @@ Note that using a [meta tag](@/docs.md#config) is the preferred mechanism for se * `allowEval:true` - boolean: allows the use of eval-like functionality in htmx, to enable `hx-vars`, trigger conditions & script tag evaluation. Can be set to `false` for CSP compatibility. * `allowScriptTags:true` - boolean: allows script tags to be evaluated in new content * `inlineScriptNonce:''` - string: the [nonce](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/nonce) to add to inline scripts +* `inlineStyleNonce:''` - string: the [nonce](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/nonce) to add to inline styles * `withCredentials:false` - boolean: allow cross-site Access-Control requests using credentials such as cookies, authorization headers or TLS client certificates * `timeout:0` - int: the number of milliseconds a request can take before automatically being terminated * `wsReconnectDelay:'full-jitter'` - string/function: the default implementation of `getWebSocketReconnectDelay` for reconnecting after unexpected connection loss by the event code `Abnormal Closure`, `Service Restart` or `Try Again Later` diff --git a/www/content/docs.md b/www/content/docs.md index c7f74cac1..299d41801 100644 --- a/www/content/docs.md +++ b/www/content/docs.md @@ -119,13 +119,13 @@ The fastest way to get going with htmx is to load it via a CDN. You can simply a and get going: ```html - + ``` Unminified version is also available ```html - + ``` While the CDN approach is extremely simple, you may want to consider [not using CDNs in production](https://blog.wesleyac.com/posts/why-not-javascript-cdn). @@ -1095,7 +1095,7 @@ Here is an example of an input that uses the [`hx-on`](/attributes/hx-on) attrib onkeyup="this.setCustomValidity('') // reset the validation on keyup" hx-on:htmx:validation:validate="if(this.value != 'foo') { this.setCustomValidity('Please enter the value foo') // set the validation error - htmx.find('#foo-form').reportValidity() // report the issue + htmx.find('#example-form').reportValidity() // report the issue }"> ``` @@ -1643,13 +1643,19 @@ listed below: | `htmx.config.allowEval` | defaults to `true`, can be used to disable htmx's use of eval for certain features (e.g. trigger filters) | | `htmx.config.allowScriptTags` | defaults to `true`, determines if htmx will process script tags found in new content | | `htmx.config.inlineScriptNonce` | defaults to `''`, meaning that no nonce will be added to inline scripts | +| `htmx.config.attributesToSettle` | defaults to `["class", "style", "width", "height"]`, the attributes to settle during the settling phase | +| `htmx.config.inlineStyleNonce` | defaults to `''`, meaning that no nonce will be added to inline styles | +| `htmx.config.useTemplateFragments` | defaults to `false`, HTML template tags for parsing content from the server (not IE11 compatible!) | | `htmx.config.wsReconnectDelay` | defaults to `full-jitter` | -| `htmx.config.disableSelector` | defaults to `[disable-htmx], [data-disable-htmx]`, htmx will not process elements with this attribute on it or a parent | -| `htmx.config.timeout` | defaults to 0 in milliseconds | +| `htmx.config.wsBinaryType` | defaults to `blob`, the [the type of binary data](https://developer.mozilla.org/docs/Web/API/WebSocket/binaryType) being received over the WebSocket connection | +| `htmx.config.disableSelector` | defaults to `[hx-disable], [data-hx-disable]`, htmx will not process elements with this attribute on it or a parent | +| `htmx.config.withCredentials` | defaults to `false`, allow cross-site Access-Control requests using credentials such as cookies, authorization headers or TLS client certificates | +| `htmx.config.timeout` | defaults to 0, the number of milliseconds a request can take before automatically being terminated | +| `htmx.config.scrollBehavior` | defaults to 'smooth', the behavior for a boosted link on page transitions. The allowed values are `auto` and `smooth`. Smooth will smoothscroll to the top of the page while auto will behave like a vanilla link. | | `htmx.config.defaultFocusScroll` | if the focused element should be scrolled into view, defaults to false and can be overridden using the [focus-scroll](@/attributes/hx-swap.md#focus-scroll) swap modifier. | -| `htmx.config.getCacheBusterParam` | defaults to false, if set to true htmx will include a cache-busting parameter in `GET` requests to avoid caching partial responses by the browser | +| `htmx.config.getCacheBusterParam` | defaults to false, if set to true htmx will append the target element to the `GET` request in the format `org.htmx.cache-buster=targetElementId` | | `htmx.config.globalViewTransitions` | if set to `true`, htmx will use the [View Transition](https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API) API when swapping in new content. | -| `htmx.config.methodsThatUseUrlParams` | defaults to `["get"]`, htmx will format requests with this method by encoding their parameters in the URL, not the request body | +| `htmx.config.methodsThatUseUrlParams` | defaults to `["get"]`, htmx will format requests with these methods by encoding their parameters in the URL, not the request body | | `htmx.config.selfRequestsOnly` | defaults to `false`, if set to `true` will only allow AJAX requests to the same domain as the current document | | `htmx.config.ignoreTitle` | defaults to `false`, if set to `true` htmx will not update the title of the document when a `title` tag is found in new content | | `htmx.config.disableInheritance` | disables attribute inheritance in htmx, which can then be overridden by the [`hx-inherit`](@/attributes/hx-inherit.md) attribute | diff --git a/www/content/examples/active-search.md b/www/content/examples/active-search.md index 242a4c21e..25dd22917 100644 --- a/www/content/examples/active-search.md +++ b/www/content/examples/active-search.md @@ -113,7 +113,7 @@ Search Contacts { "FirstName": "William", "LastName": "Hale", "Email": "eu.dolor@risusodio.edu", "City": "Te Awamutu" }, { "FirstName": "TaShya", "LastName": "Cash", "Email": "tincidunt.orci.quis@nuncnullavulputate.co.uk", "City": "Titagarh" }, { "FirstName": "Kevyn", "LastName": "Hoover", "Email": "tristique.pellentesque.tellus@Cumsociis.co.uk", "City": "Cuenca" }, - { "FirstName": "Jakeem", "LastName": "Walker", "Email": "Morbi.vehicula.Pellentesque@faucibusorci.org", "City": "St. Andrä" }, + { "FirstName": "Jakeem", "LastName": "Walker", "Email": "Morbi.vehicula.Pellentesque@faucibusorci.org", "City": "St. Andrä" }, { "FirstName": "Malcolm", "LastName": "Trujillo", "Email": "sagittis@velit.edu", "City": "Fort Resolution" }, { "FirstName": "Wynne", "LastName": "Rice", "Email": "augue.id@felisorciadipiscing.edu", "City": "Kinross" }, { "FirstName": "Evangeline", "LastName": "Klein", "Email": "adipiscing.lobortis@sem.org", "City": "San Giovanni in Galdo" }, @@ -133,9 +133,9 @@ Search Contacts { "FirstName": "Paloma", "LastName": "Alston", "Email": "cursus@metus.org", "City": "Cache Creek" }, { "FirstName": "Freya", "LastName": "Dunn", "Email": "Vestibulum.accumsan@metus.co.uk", "City": "Heist-aan-Zee" }, { "FirstName": "Griffin", "LastName": "Rice", "Email": "justo@tortordictumeu.net", "City": "Montpelier" }, - { "FirstName": "Catherine", "LastName": "West", "Email": "malesuada.augue@elementum.com", "City": "Tarnów" }, + { "FirstName": "Catherine", "LastName": "West", "Email": "malesuada.augue@elementum.com", "City": "Tarnów" }, { "FirstName": "Jena", "LastName": "Chambers", "Email": "erat.Etiam.vestibulum@quamelementumat.net", "City": "Konya" }, - { "FirstName": "Neil", "LastName": "Rodriguez", "Email": "enim@facilisis.com", "City": "Kraków" }, + { "FirstName": "Neil", "LastName": "Rodriguez", "Email": "enim@facilisis.com", "City": "Kraków" }, { "FirstName": "Freya", "LastName": "Charles", "Email": "metus@nec.net", "City": "Arzano" }, { "FirstName": "Anastasia", "LastName": "Strong", "Email": "sit@vitae.edu", "City": "Polpenazze del Garda" }, { "FirstName": "Bell", "LastName": "Simon", "Email": "mollis.nec.cursus@disparturientmontes.ca", "City": "Caxias do Sul" }, @@ -143,7 +143,7 @@ Search Contacts { "FirstName": "Yoko", "LastName": "Dawson", "Email": "neque.sed@semper.net", "City": "Saint-Remy-Geest" }, { "FirstName": "Nadine", "LastName": "Justice", "Email": "netus@et.edu", "City": "Calgary" }, { "FirstName": "Hoyt", "LastName": "Rosa", "Email": "Nullam.ut.nisi@Aliquam.co.uk", "City": "Mold" }, - { "FirstName": "Shafira", "LastName": "Noel", "Email": "tincidunt.nunc@non.edu", "City": "Kitzbühel" }, + { "FirstName": "Shafira", "LastName": "Noel", "Email": "tincidunt.nunc@non.edu", "City": "Kitzbühel" }, { "FirstName": "Jin", "LastName": "Nunez", "Email": "porttitor.tellus.non@venenatisamagna.net", "City": "Dreieich" }, { "FirstName": "Barbara", "LastName": "Gay", "Email": "est.congue.a@elit.com", "City": "Overland Park" }, { "FirstName": "Riley", "LastName": "Hammond", "Email": "tempor.diam@sodalesnisi.net", "City": "Smoky Lake" }, @@ -164,7 +164,7 @@ Search Contacts { "FirstName": "Giacomo", "LastName": "Cole", "Email": "aliquet.libero@urnaUttincidunt.ca", "City": "Donnas" }, { "FirstName": "Mason", "LastName": "Hinton", "Email": "est@Nunc.co.uk", "City": "St. Asaph" }, { "FirstName": "Katelyn", "LastName": "Koch", "Email": "velit.Aliquam@Suspendisse.edu", "City": "Cleveland" }, - { "FirstName": "Olga", "LastName": "Spencer", "Email": "faucibus@Praesenteudui.net", "City": "Karapınar" }, + { "FirstName": "Olga", "LastName": "Spencer", "Email": "faucibus@Praesenteudui.net", "City": "Karapınar" }, { "FirstName": "Erasmus", "LastName": "Strong", "Email": "dignissim.lacus@euarcu.net", "City": "Passau" }, { "FirstName": "Regan", "LastName": "Cline", "Email": "vitae.erat.vel@lacusEtiambibendum.co.uk", "City": "Pergola" }, { "FirstName": "Stone", "LastName": "Holt", "Email": "eget.mollis.lectus@Aeneanegestas.ca", "City": "Houston" }, @@ -172,11 +172,11 @@ Search Contacts { "FirstName": "Rana", "LastName": "Green", "Email": "metus@conguea.edu", "City": "Onze-Lieve-Vrouw-Lombeek" }, { "FirstName": "Caryn", "LastName": "Henson", "Email": "Donec.sollicitudin.adipiscing@sed.net", "City": "Kington" }, { "FirstName": "Clarke", "LastName": "Stein", "Email": "nec@mollis.co.uk", "City": "Tenali" }, - { "FirstName": "Kelsie", "LastName": "Porter", "Email": "Cum@gravidaAliquam.com", "City": "Ä°skenderun" }, + { "FirstName": "Kelsie", "LastName": "Porter", "Email": "Cum@gravidaAliquam.com", "City": "İskenderun" }, { "FirstName": "Cooper", "LastName": "Pugh", "Email": "Quisque.ornare.tortor@dictum.co.uk", "City": "Delhi" }, { "FirstName": "Paul", "LastName": "Spencer", "Email": "ac@InfaucibusMorbi.com", "City": "Biez" }, { "FirstName": "Cassady", "LastName": "Farrell", "Email": "Suspendisse.non@venenatisa.net", "City": "New Maryland" }, - { "FirstName": "Sydnee", "LastName": "Velazquez", "Email": "mollis@loremfringillaornare.com", "City": "Str�e" }, + { "FirstName": "Sydnee", "LastName": "Velazquez", "Email": "mollis@loremfringillaornare.com", "City": "Strée" }, { "FirstName": "Felix", "LastName": "Boyle", "Email": "id.libero.Donec@aauctor.org", "City": "Edinburgh" }, { "FirstName": "Ryder", "LastName": "House", "Email": "molestie@natoquepenatibus.org", "City": "Copertino" }, { "FirstName": "Hadley", "LastName": "Holcomb", "Email": "penatibus@nisi.ca", "City": "Avadi" }, @@ -192,10 +192,10 @@ Search Contacts { "FirstName": "Claudia", "LastName": "Spence", "Email": "Nunc.lectus.pede@aceleifend.co.uk", "City": "Augusta" }, { "FirstName": "Genevieve", "LastName": "Parker", "Email": "ultrices@inaliquetlobortis.net", "City": "Forbach" }, { "FirstName": "Marshall", "LastName": "Allison", "Email": "erat.semper.rutrum@odio.org", "City": "Landau" }, - { "FirstName": "Reuben", "LastName": "Davis", "Email": "Donec@auctorodio.edu", "City": "Sch�nebeck" }, + { "FirstName": "Reuben", "LastName": "Davis", "Email": "Donec@auctorodio.edu", "City": "Schönebeck" }, { "FirstName": "Ralph", "LastName": "Doyle", "Email": "pede.Suspendisse.dui@Curabitur.org", "City": "Linkebeek" }, { "FirstName": "Constance", "LastName": "Gilliam", "Email": "mollis@Nulla.edu", "City": "Enterprise" }, - { "FirstName": "Serina", "LastName": "Jacobson", "Email": "dictum.augue@ipsum.net", "City": "Hérouville-Saint-Clair" }, + { "FirstName": "Serina", "LastName": "Jacobson", "Email": "dictum.augue@ipsum.net", "City": "Hérouville-Saint-Clair" }, { "FirstName": "Charity", "LastName": "Byrd", "Email": "convallis.ante.lectus@scelerisquemollisPhasellus.co.uk", "City": "Brussegem" }, { "FirstName": "Hyatt", "LastName": "Bird", "Email": "enim.Nunc.ut@nonmagnaNam.com", "City": "Gdynia" }, { "FirstName": "Brent", "LastName": "Dunn", "Email": "ac.sem@nuncid.com", "City": "Hay-on-Wye" }, diff --git a/www/content/reference.md b/www/content/reference.md index dafb7990d..ca2173bf7 100644 --- a/www/content/reference.md +++ b/www/content/reference.md @@ -233,6 +233,7 @@ listed below: | `htmx.config.allowEval` | defaults to `true`, can be used to disable htmx's use of eval for certain features (e.g. trigger filters) | | `htmx.config.allowScriptTags` | defaults to `true`, determines if htmx will process script tags found in new content | | `htmx.config.inlineScriptNonce` | defaults to `''`, meaning that no nonce will be added to inline scripts | +| `htmx.config.inlineSlyeNonce` | defaults to `''`, meaning that no nonce will be added to inline styles | | `htmx.config.attributesToSettle` | defaults to `["class", "style", "width", "height"]`, the attributes to settle during the settling phase | | `htmx.config.wsReconnectDelay` | defaults to `full-jitter` | | `htmx.config.wsBinaryType` | defaults to `blob`, the [the type of binary data](https://developer.mozilla.org/docs/Web/API/WebSocket/binaryType) being received over the WebSocket connection | diff --git a/www/content/talk/index.md b/www/content/talk/index.md index c0300c42b..c37881997 100644 --- a/www/content/talk/index.md +++ b/www/content/talk/index.md @@ -28,7 +28,7 @@ Email: [htmx@bigsky.software](mailto:htmx@bigsky.software) ## GitHub Stars -View a graph of github stars [here](https://star-history.com/embed?#bigskysoftware/htmx&bigskysoftware/_hyperscript&Date) +View a graph of github stars [here](https://star-history.com/#bigskysoftware/htmx&Date) ## Webring diff --git a/www/static/img/ablogcms_logo.svg b/www/static/img/ablogcms_logo.svg new file mode 100644 index 000000000..9a0cad097 --- /dev/null +++ b/www/static/img/ablogcms_logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/www/static/img/das-filter.png b/www/static/img/das-filter.png index 0df14f63d..bcba5a0d1 100644 Binary files a/www/static/img/das-filter.png and b/www/static/img/das-filter.png differ diff --git a/www/static/img/wuw.png b/www/static/img/wuw.png new file mode 100644 index 000000000..49bbe7814 Binary files /dev/null and b/www/static/img/wuw.png differ diff --git a/www/static/src/htmx.d.ts b/www/static/src/htmx.d.ts index 13bc4809b..3775459f4 100644 --- a/www/static/src/htmx.d.ts +++ b/www/static/src/htmx.d.ts @@ -36,6 +36,7 @@ declare namespace htmx { const allowEval: boolean; const allowScriptTags: boolean; const inlineScriptNonce: string; + const inlineStyleNonce: string; const attributesToSettle: string[]; const withCredentials: boolean; const timeout: number; @@ -53,6 +54,7 @@ declare namespace htmx { const triggerSpecsCache: any | null; const disableInheritance: boolean; const responseHandling: HtmxResponseHandlingConfig[]; + const allowNestedOobSwaps: boolean; } const parseInterval: (str: string) => number; const _: (str: string) => any; diff --git a/www/static/src/htmx.js b/www/static/src/htmx.js index 82f742a80..9f55ad416 100644 --- a/www/static/src/htmx.js +++ b/www/static/src/htmx.js @@ -164,6 +164,12 @@ var htmx = (function() { * @default '' */ inlineScriptNonce: '', + /** + * If set, the nonce will be added to inline styles. + * @type string + * @default '' + */ + inlineStyleNonce: '', /** * The attributes to settle during the settling phase. * @type string[] @@ -271,7 +277,7 @@ var htmx = (function() { parseInterval: null, /** @type {typeof internalEval} */ _: null, - version: '2.0.0-beta3' + version: '2.0.0-beta4' } // Tsc madness part 2 htmx.onLoad = onLoadHelper @@ -2251,6 +2257,13 @@ var htmx = (function() { getRawAttribute(elt, 'href').indexOf('#') !== 0 } + /** + * @param {Element} elt + */ + function eltIsDisabled(elt) { + return closest(elt, htmx.config.disableSelector) + } + /** * @param {Element} elt * @param {HtmxNodeInternalData} nodeData @@ -2273,7 +2286,7 @@ var htmx = (function() { triggerSpecs.forEach(function(triggerSpec) { addEventListener(elt, function(node, evt) { const elt = asElement(node) - if (closest(elt, htmx.config.disableSelector)) { + if (eltIsDisabled(elt)) { cleanUpElement(elt) return } @@ -2635,8 +2648,21 @@ var htmx = (function() { function findElementsToProcess(elt) { if (elt.querySelectorAll) { const boostedSelector = ', [hx-boost] a, [data-hx-boost] a, a[hx-boost], a[data-hx-boost]' + + const extensionSelectors = [] + for (const e in extensions) { + const extension = extensions[e] + if (extension.getSelectors) { + var selectors = extension.getSelectors() + if (selectors) { + extensionSelectors.push(selectors) + } + } + } + const results = elt.querySelectorAll(VERB_SELECTOR + boostedSelector + ", form, [type='submit']," + - ' [hx-ext], [data-hx-ext], [hx-trigger], [data-hx-trigger]') + ' [hx-ext], [data-hx-ext], [hx-trigger], [data-hx-trigger]' + extensionSelectors.flat().map(s => ', ' + s).join('')) + return results } else { return [] @@ -2695,7 +2721,7 @@ var htmx = (function() { } /** - * @param {EventTarget} elt + * @param {Element} elt * @param {string} eventName * @param {string} code */ @@ -2708,6 +2734,9 @@ var htmx = (function() { /** @type EventListener */ const listener = function(e) { maybeEval(elt, function() { + if (eltIsDisabled(elt)) { + return + } if (!func) { func = new Function('event', code) } @@ -4754,6 +4783,7 @@ var htmx = (function() { function extensionBase() { return { init: function(api) { return null }, + getSelectors: function() { return null }, onEvent: function(name, evt) { return true }, transformResponse: function(text, xhr, elt) { return text }, isInlineSwap: function(swapStyle) { return false }, @@ -4852,8 +4882,9 @@ var htmx = (function() { function insertIndicatorStyles() { if (htmx.config.includeIndicatorStyles !== false) { + const nonceAttribute = htmx.config.inlineStyleNonce ? ` nonce="${htmx.config.inlineStyleNonce}"` : '' getDocument().head.insertAdjacentHTML('beforeend', - '