htmx-1.8.0.js 131 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915191619171918191919201921192219231924192519261927192819291930193119321933193419351936193719381939194019411942194319441945194619471948194919501951195219531954195519561957195819591960196119621963196419651966196719681969197019711972197319741975197619771978197919801981198219831984198519861987198819891990199119921993199419951996199719981999200020012002200320042005200620072008200920102011201220132014201520162017201820192020202120222023202420252026202720282029203020312032203320342035203620372038203920402041204220432044204520462047204820492050205120522053205420552056205720582059206020612062206320642065206620672068206920702071207220732074207520762077207820792080208120822083208420852086208720882089209020912092209320942095209620972098209921002101210221032104210521062107210821092110211121122113211421152116211721182119212021212122212321242125212621272128212921302131213221332134213521362137213821392140214121422143214421452146214721482149215021512152215321542155215621572158215921602161216221632164216521662167216821692170217121722173217421752176217721782179218021812182218321842185218621872188218921902191219221932194219521962197219821992200220122022203220422052206220722082209221022112212221322142215221622172218221922202221222222232224222522262227222822292230223122322233223422352236223722382239224022412242224322442245224622472248224922502251225222532254225522562257225822592260226122622263226422652266226722682269227022712272227322742275227622772278227922802281228222832284228522862287228822892290229122922293229422952296229722982299230023012302230323042305230623072308230923102311231223132314231523162317231823192320232123222323232423252326232723282329233023312332233323342335233623372338233923402341234223432344234523462347234823492350235123522353235423552356235723582359236023612362236323642365236623672368236923702371237223732374237523762377237823792380238123822383238423852386238723882389239023912392239323942395239623972398239924002401240224032404240524062407240824092410241124122413241424152416241724182419242024212422242324242425242624272428242924302431243224332434243524362437243824392440244124422443244424452446244724482449245024512452245324542455245624572458245924602461246224632464246524662467246824692470247124722473247424752476247724782479248024812482248324842485248624872488248924902491249224932494249524962497249824992500250125022503250425052506250725082509251025112512251325142515251625172518251925202521252225232524252525262527252825292530253125322533253425352536253725382539254025412542254325442545254625472548254925502551255225532554255525562557255825592560256125622563256425652566256725682569257025712572257325742575257625772578257925802581258225832584258525862587258825892590259125922593259425952596259725982599260026012602260326042605260626072608260926102611261226132614261526162617261826192620262126222623262426252626262726282629263026312632263326342635263626372638263926402641264226432644264526462647264826492650265126522653265426552656265726582659266026612662266326642665266626672668266926702671267226732674267526762677267826792680268126822683268426852686268726882689269026912692269326942695269626972698269927002701270227032704270527062707270827092710271127122713271427152716271727182719272027212722272327242725272627272728272927302731273227332734273527362737273827392740274127422743274427452746274727482749275027512752275327542755275627572758275927602761276227632764276527662767276827692770277127722773277427752776277727782779278027812782278327842785278627872788278927902791279227932794279527962797279827992800280128022803280428052806280728082809281028112812281328142815281628172818281928202821282228232824282528262827282828292830283128322833283428352836283728382839284028412842284328442845284628472848284928502851285228532854285528562857285828592860286128622863286428652866286728682869287028712872287328742875287628772878287928802881288228832884288528862887288828892890289128922893289428952896289728982899290029012902290329042905290629072908290929102911291229132914291529162917291829192920292129222923292429252926292729282929293029312932293329342935293629372938293929402941294229432944294529462947294829492950295129522953295429552956295729582959296029612962296329642965296629672968296929702971297229732974297529762977297829792980298129822983298429852986298729882989299029912992299329942995299629972998299930003001300230033004300530063007300830093010301130123013301430153016301730183019302030213022302330243025302630273028302930303031303230333034303530363037303830393040304130423043304430453046304730483049305030513052305330543055305630573058305930603061306230633064306530663067306830693070307130723073307430753076307730783079308030813082308330843085308630873088308930903091309230933094309530963097309830993100310131023103310431053106310731083109311031113112311331143115311631173118311931203121312231233124312531263127312831293130313131323133313431353136313731383139314031413142314331443145314631473148314931503151315231533154315531563157315831593160316131623163316431653166316731683169317031713172317331743175317631773178317931803181318231833184318531863187318831893190319131923193319431953196319731983199320032013202320332043205320632073208320932103211321232133214321532163217321832193220322132223223322432253226322732283229323032313232323332343235323632373238323932403241324232433244324532463247324832493250325132523253325432553256325732583259326032613262326332643265326632673268326932703271327232733274327532763277327832793280328132823283328432853286328732883289329032913292329332943295
  1. //AMD insanity
  2. (function (root, factory) {
  3. //@ts-ignore
  4. if (typeof define === 'function' && define.amd) {
  5. // AMD. Register as an anonymous module.
  6. //@ts-ignore
  7. define([], factory);
  8. } else {
  9. // Browser globals
  10. root.htmx = root.htmx || factory();
  11. }
  12. }(typeof self !== 'undefined' ? self : this, function () {
  13. return (function () {
  14. 'use strict';
  15. // Public API
  16. //** @type {import("./htmx").HtmxApi} */
  17. // TODO: list all methods in public API
  18. var htmx = {
  19. onLoad: onLoadHelper,
  20. process: processNode,
  21. on: addEventListenerImpl,
  22. off: removeEventListenerImpl,
  23. trigger : triggerEvent,
  24. ajax : ajaxHelper,
  25. find : find,
  26. findAll : findAll,
  27. closest : closest,
  28. values : function(elt, type){
  29. var inputValues = getInputValues(elt, type || "post");
  30. return inputValues.values;
  31. },
  32. remove : removeElement,
  33. addClass : addClassToElement,
  34. removeClass : removeClassFromElement,
  35. toggleClass : toggleClassOnElement,
  36. takeClass : takeClassForElement,
  37. defineExtension : defineExtension,
  38. removeExtension : removeExtension,
  39. logAll : logAll,
  40. logger : null,
  41. config : {
  42. historyEnabled:true,
  43. historyCacheSize:10,
  44. refreshOnHistoryMiss:false,
  45. defaultSwapStyle:'innerHTML',
  46. defaultSwapDelay:0,
  47. defaultSettleDelay:20,
  48. includeIndicatorStyles:true,
  49. indicatorClass:'htmx-indicator',
  50. requestClass:'htmx-request',
  51. addedClass:'htmx-added',
  52. settlingClass:'htmx-settling',
  53. swappingClass:'htmx-swapping',
  54. allowEval:true,
  55. inlineScriptNonce:'',
  56. attributesToSettle:["class", "style", "width", "height"],
  57. withCredentials:false,
  58. timeout:0,
  59. wsReconnectDelay: 'full-jitter',
  60. disableSelector: "[hx-disable], [data-hx-disable]",
  61. useTemplateFragments: false,
  62. scrollBehavior: 'smooth',
  63. defaultFocusScroll: false,
  64. },
  65. parseInterval:parseInterval,
  66. _:internalEval,
  67. createEventSource: function(url){
  68. return new EventSource(url, {withCredentials:true})
  69. },
  70. createWebSocket: function(url){
  71. return new WebSocket(url, []);
  72. },
  73. version: "1.8.0"
  74. };
  75. /** @type {import("./htmx").HtmxInternalApi} */
  76. var internalAPI = {
  77. addTriggerHandler: addTriggerHandler,
  78. bodyContains: bodyContains,
  79. canAccessLocalStorage: canAccessLocalStorage,
  80. filterValues: filterValues,
  81. hasAttribute: hasAttribute,
  82. getAttributeValue: getAttributeValue,
  83. getClosestMatch: getClosestMatch,
  84. getExpressionVars: getExpressionVars,
  85. getHeaders: getHeaders,
  86. getInputValues: getInputValues,
  87. getInternalData: getInternalData,
  88. getSwapSpecification: getSwapSpecification,
  89. getTriggerSpecs: getTriggerSpecs,
  90. getTarget: getTarget,
  91. makeFragment: makeFragment,
  92. mergeObjects: mergeObjects,
  93. makeSettleInfo: makeSettleInfo,
  94. oobSwap: oobSwap,
  95. selectAndSwap: selectAndSwap,
  96. settleImmediately: settleImmediately,
  97. shouldCancel: shouldCancel,
  98. triggerEvent: triggerEvent,
  99. triggerErrorEvent: triggerErrorEvent,
  100. withExtensions: withExtensions,
  101. }
  102. var VERBS = ['get', 'post', 'put', 'delete', 'patch'];
  103. var VERB_SELECTOR = VERBS.map(function(verb){
  104. return "[hx-" + verb + "], [data-hx-" + verb + "]"
  105. }).join(", ");
  106. //====================================================================
  107. // Utilities
  108. //====================================================================
  109. function parseInterval(str) {
  110. if (str == undefined) {
  111. return undefined
  112. }
  113. if (str.slice(-2) == "ms") {
  114. return parseFloat(str.slice(0,-2)) || undefined
  115. }
  116. if (str.slice(-1) == "s") {
  117. return (parseFloat(str.slice(0,-1)) * 1000) || undefined
  118. }
  119. if (str.slice(-1) == "m") {
  120. return (parseFloat(str.slice(0,-1)) * 1000 * 60) || undefined
  121. }
  122. return parseFloat(str) || undefined
  123. }
  124. /**
  125. * @param {HTMLElement} elt
  126. * @param {string} name
  127. * @returns {(string | null)}
  128. */
  129. function getRawAttribute(elt, name) {
  130. return elt.getAttribute && elt.getAttribute(name);
  131. }
  132. // resolve with both hx and data-hx prefixes
  133. function hasAttribute(elt, qualifiedName) {
  134. return elt.hasAttribute && (elt.hasAttribute(qualifiedName) ||
  135. elt.hasAttribute("data-" + qualifiedName));
  136. }
  137. /**
  138. *
  139. * @param {HTMLElement} elt
  140. * @param {string} qualifiedName
  141. * @returns {(string | null)}
  142. */
  143. function getAttributeValue(elt, qualifiedName) {
  144. return getRawAttribute(elt, qualifiedName) || getRawAttribute(elt, "data-" + qualifiedName);
  145. }
  146. /**
  147. * @param {HTMLElement} elt
  148. * @returns {HTMLElement | null}
  149. */
  150. function parentElt(elt) {
  151. return elt.parentElement;
  152. }
  153. /**
  154. * @returns {Document}
  155. */
  156. function getDocument() {
  157. return document;
  158. }
  159. /**
  160. * @param {HTMLElement} elt
  161. * @param {(e:HTMLElement) => boolean} condition
  162. * @returns {HTMLElement | null}
  163. */
  164. function getClosestMatch(elt, condition) {
  165. while (elt && !condition(elt)) {
  166. elt = parentElt(elt);
  167. }
  168. return elt ? elt : null;
  169. }
  170. function getAttributeValueWithDisinheritance(initialElement, ancestor, attributeName){
  171. var attributeValue = getAttributeValue(ancestor, attributeName);
  172. var disinherit = getAttributeValue(ancestor, "hx-disinherit");
  173. if (initialElement !== ancestor && disinherit && (disinherit === "*" || disinherit.split(" ").indexOf(attributeName) >= 0)) {
  174. return "unset";
  175. } else {
  176. return attributeValue
  177. }
  178. }
  179. /**
  180. * @param {HTMLElement} elt
  181. * @param {string} attributeName
  182. * @returns {string | null}
  183. */
  184. function getClosestAttributeValue(elt, attributeName) {
  185. var closestAttr = null;
  186. getClosestMatch(elt, function (e) {
  187. return closestAttr = getAttributeValueWithDisinheritance(elt, e, attributeName);
  188. });
  189. if (closestAttr !== "unset") {
  190. return closestAttr;
  191. }
  192. }
  193. /**
  194. * @param {HTMLElement} elt
  195. * @param {string} selector
  196. * @returns {boolean}
  197. */
  198. function matches(elt, selector) {
  199. // @ts-ignore: non-standard properties for browser compatability
  200. // noinspection JSUnresolvedVariable
  201. var matchesFunction = elt.matches || elt.matchesSelector || elt.msMatchesSelector || elt.mozMatchesSelector || elt.webkitMatchesSelector || elt.oMatchesSelector;
  202. return matchesFunction && matchesFunction.call(elt, selector);
  203. }
  204. /**
  205. * @param {string} str
  206. * @returns {string}
  207. */
  208. function getStartTag(str) {
  209. var tagMatcher = /<([a-z][^\/\0>\x20\t\r\n\f]*)/i
  210. var match = tagMatcher.exec( str );
  211. if (match) {
  212. return match[1].toLowerCase();
  213. } else {
  214. return "";
  215. }
  216. }
  217. /**
  218. *
  219. * @param {string} resp
  220. * @param {number} depth
  221. * @returns {Element}
  222. */
  223. function parseHTML(resp, depth) {
  224. var parser = new DOMParser();
  225. var responseDoc = parser.parseFromString(resp, "text/html");
  226. /** @type {Element} */
  227. var responseNode = responseDoc.body;
  228. while (depth > 0) {
  229. depth--;
  230. // @ts-ignore
  231. responseNode = responseNode.firstChild;
  232. }
  233. if (responseNode == null) {
  234. // @ts-ignore
  235. responseNode = getDocument().createDocumentFragment();
  236. }
  237. return responseNode;
  238. }
  239. /**
  240. *
  241. * @param {string} resp
  242. * @returns {Element}
  243. */
  244. function makeFragment(resp) {
  245. if (htmx.config.useTemplateFragments) {
  246. var documentFragment = parseHTML("<body><template>" + resp + "</template></body>", 0);
  247. // @ts-ignore type mismatch between DocumentFragment and Element.
  248. // TODO: Are these close enough for htmx to use interchangably?
  249. return documentFragment.querySelector('template').content;
  250. } else {
  251. var startTag = getStartTag(resp);
  252. switch (startTag) {
  253. case "thead":
  254. case "tbody":
  255. case "tfoot":
  256. case "colgroup":
  257. case "caption":
  258. return parseHTML("<table>" + resp + "</table>", 1);
  259. case "col":
  260. return parseHTML("<table><colgroup>" + resp + "</colgroup></table>", 2);
  261. case "tr":
  262. return parseHTML("<table><tbody>" + resp + "</tbody></table>", 2);
  263. case "td":
  264. case "th":
  265. return parseHTML("<table><tbody><tr>" + resp + "</tr></tbody></table>", 3);
  266. case "script":
  267. return parseHTML("<div>" + resp + "</div>", 1);
  268. default:
  269. return parseHTML(resp, 0);
  270. }
  271. }
  272. }
  273. /**
  274. * @param {Function} func
  275. */
  276. function maybeCall(func){
  277. if(func) {
  278. func();
  279. }
  280. }
  281. /**
  282. * @param {any} o
  283. * @param {string} type
  284. * @returns
  285. */
  286. function isType(o, type) {
  287. return Object.prototype.toString.call(o) === "[object " + type + "]";
  288. }
  289. /**
  290. * @param {*} o
  291. * @returns {o is Function}
  292. */
  293. function isFunction(o) {
  294. return isType(o, "Function");
  295. }
  296. /**
  297. * @param {*} o
  298. * @returns {o is Object}
  299. */
  300. function isRawObject(o) {
  301. return isType(o, "Object");
  302. }
  303. /**
  304. * getInternalData retrieves "private" data stored by htmx within an element
  305. * @param {HTMLElement} elt
  306. * @returns {*}
  307. */
  308. function getInternalData(elt) {
  309. var dataProp = 'htmx-internal-data';
  310. var data = elt[dataProp];
  311. if (!data) {
  312. data = elt[dataProp] = {};
  313. }
  314. return data;
  315. }
  316. /**
  317. * toArray converts an ArrayLike object into a real array.
  318. * @param {ArrayLike} arr
  319. * @returns {any[]}
  320. */
  321. function toArray(arr) {
  322. var returnArr = [];
  323. if (arr) {
  324. for (var i = 0; i < arr.length; i++) {
  325. returnArr.push(arr[i]);
  326. }
  327. }
  328. return returnArr
  329. }
  330. function forEach(arr, func) {
  331. if (arr) {
  332. for (var i = 0; i < arr.length; i++) {
  333. func(arr[i]);
  334. }
  335. }
  336. }
  337. function isScrolledIntoView(el) {
  338. var rect = el.getBoundingClientRect();
  339. var elemTop = rect.top;
  340. var elemBottom = rect.bottom;
  341. return elemTop < window.innerHeight && elemBottom >= 0;
  342. }
  343. function bodyContains(elt) {
  344. if (elt.getRootNode() instanceof ShadowRoot) {
  345. return getDocument().body.contains(elt.getRootNode().host);
  346. } else {
  347. return getDocument().body.contains(elt);
  348. }
  349. }
  350. function splitOnWhitespace(trigger) {
  351. return trigger.trim().split(/\s+/);
  352. }
  353. /**
  354. * mergeObjects takes all of the keys from
  355. * obj2 and duplicates them into obj1
  356. * @param {Object} obj1
  357. * @param {Object} obj2
  358. * @returns {Object}
  359. */
  360. function mergeObjects(obj1, obj2) {
  361. for (var key in obj2) {
  362. if (obj2.hasOwnProperty(key)) {
  363. obj1[key] = obj2[key];
  364. }
  365. }
  366. return obj1;
  367. }
  368. function parseJSON(jString) {
  369. try {
  370. return JSON.parse(jString);
  371. } catch(error) {
  372. logError(error);
  373. return null;
  374. }
  375. }
  376. function canAccessLocalStorage() {
  377. var test = 'htmx:localStorageTest';
  378. try {
  379. localStorage.setItem(test, test);
  380. localStorage.removeItem(test);
  381. return true;
  382. } catch(e) {
  383. return false;
  384. }
  385. }
  386. //==========================================================================================
  387. // public API
  388. //==========================================================================================
  389. function internalEval(str){
  390. return maybeEval(getDocument().body, function () {
  391. return eval(str);
  392. });
  393. }
  394. function onLoadHelper(callback) {
  395. var value = htmx.on("htmx:load", function(evt) {
  396. callback(evt.detail.elt);
  397. });
  398. return value;
  399. }
  400. function logAll(){
  401. htmx.logger = function(elt, event, data) {
  402. if(console) {
  403. console.log(event, elt, data);
  404. }
  405. }
  406. }
  407. function find(eltOrSelector, selector) {
  408. if (selector) {
  409. return eltOrSelector.querySelector(selector);
  410. } else {
  411. return find(getDocument(), eltOrSelector);
  412. }
  413. }
  414. function findAll(eltOrSelector, selector) {
  415. if (selector) {
  416. return eltOrSelector.querySelectorAll(selector);
  417. } else {
  418. return findAll(getDocument(), eltOrSelector);
  419. }
  420. }
  421. function removeElement(elt, delay) {
  422. elt = resolveTarget(elt);
  423. if (delay) {
  424. setTimeout(function(){removeElement(elt);}, delay)
  425. } else {
  426. elt.parentElement.removeChild(elt);
  427. }
  428. }
  429. function addClassToElement(elt, clazz, delay) {
  430. elt = resolveTarget(elt);
  431. if (delay) {
  432. setTimeout(function(){addClassToElement(elt, clazz);}, delay)
  433. } else {
  434. elt.classList && elt.classList.add(clazz);
  435. }
  436. }
  437. function removeClassFromElement(elt, clazz, delay) {
  438. elt = resolveTarget(elt);
  439. if (delay) {
  440. setTimeout(function(){removeClassFromElement(elt, clazz);}, delay)
  441. } else {
  442. if (elt.classList) {
  443. elt.classList.remove(clazz);
  444. // if there are no classes left, remove the class attribute
  445. if (elt.classList.length === 0) {
  446. elt.removeAttribute("class");
  447. }
  448. }
  449. }
  450. }
  451. function toggleClassOnElement(elt, clazz) {
  452. elt = resolveTarget(elt);
  453. elt.classList.toggle(clazz);
  454. }
  455. function takeClassForElement(elt, clazz) {
  456. elt = resolveTarget(elt);
  457. forEach(elt.parentElement.children, function(child){
  458. removeClassFromElement(child, clazz);
  459. })
  460. addClassToElement(elt, clazz);
  461. }
  462. function closest(elt, selector) {
  463. elt = resolveTarget(elt);
  464. if (elt.closest) {
  465. return elt.closest(selector);
  466. } else {
  467. do{
  468. if (elt == null || matches(elt, selector)){
  469. return elt;
  470. }
  471. }
  472. while (elt = elt && parentElt(elt));
  473. }
  474. }
  475. function querySelectorAllExt(elt, selector) {
  476. if (selector.indexOf("closest ") === 0) {
  477. return [closest(elt, selector.substr(8))];
  478. } else if (selector.indexOf("find ") === 0) {
  479. return [find(elt, selector.substr(5))];
  480. } else if (selector.indexOf("next ") === 0) {
  481. return [scanForwardQuery(elt, selector.substr(5))];
  482. } else if (selector.indexOf("previous ") === 0) {
  483. return [scanBackwardsQuery(elt, selector.substr(9))];
  484. } else if (selector === 'document') {
  485. return [document];
  486. } else if (selector === 'window') {
  487. return [window];
  488. } else {
  489. return getDocument().querySelectorAll(selector);
  490. }
  491. }
  492. var scanForwardQuery = function(start, match) {
  493. var results = getDocument().querySelectorAll(match);
  494. for (var i = 0; i < results.length; i++) {
  495. var elt = results[i];
  496. if (elt.compareDocumentPosition(start) === Node.DOCUMENT_POSITION_PRECEDING) {
  497. return elt;
  498. }
  499. }
  500. }
  501. var scanBackwardsQuery = function(start, match) {
  502. var results = getDocument().querySelectorAll(match);
  503. for (var i = results.length - 1; i >= 0; i--) {
  504. var elt = results[i];
  505. if (elt.compareDocumentPosition(start) === Node.DOCUMENT_POSITION_FOLLOWING) {
  506. return elt;
  507. }
  508. }
  509. }
  510. function querySelectorExt(eltOrSelector, selector) {
  511. if (selector) {
  512. return querySelectorAllExt(eltOrSelector, selector)[0];
  513. } else {
  514. return querySelectorAllExt(getDocument().body, eltOrSelector)[0];
  515. }
  516. }
  517. function resolveTarget(arg2) {
  518. if (isType(arg2, 'String')) {
  519. return find(arg2);
  520. } else {
  521. return arg2;
  522. }
  523. }
  524. function processEventArgs(arg1, arg2, arg3) {
  525. if (isFunction(arg2)) {
  526. return {
  527. target: getDocument().body,
  528. event: arg1,
  529. listener: arg2
  530. }
  531. } else {
  532. return {
  533. target: resolveTarget(arg1),
  534. event: arg2,
  535. listener: arg3
  536. }
  537. }
  538. }
  539. function addEventListenerImpl(arg1, arg2, arg3) {
  540. ready(function(){
  541. var eventArgs = processEventArgs(arg1, arg2, arg3);
  542. eventArgs.target.addEventListener(eventArgs.event, eventArgs.listener);
  543. })
  544. var b = isFunction(arg2);
  545. return b ? arg2 : arg3;
  546. }
  547. function removeEventListenerImpl(arg1, arg2, arg3) {
  548. ready(function(){
  549. var eventArgs = processEventArgs(arg1, arg2, arg3);
  550. eventArgs.target.removeEventListener(eventArgs.event, eventArgs.listener);
  551. })
  552. return isFunction(arg2) ? arg2 : arg3;
  553. }
  554. //====================================================================
  555. // Node processing
  556. //====================================================================
  557. var DUMMY_ELT = getDocument().createElement("output"); // dummy element for bad selectors
  558. function findAttributeTargets(elt, attrName) {
  559. var attrTarget = getClosestAttributeValue(elt, attrName);
  560. if (attrTarget) {
  561. if (attrTarget === "this") {
  562. return [findThisElement(elt, attrName)];
  563. } else {
  564. var result = querySelectorAllExt(elt, attrTarget);
  565. if (result.length === 0) {
  566. logError('The selector "' + attrTarget + '" on ' + attrName + " returned no matches!");
  567. return [DUMMY_ELT]
  568. } else {
  569. return result;
  570. }
  571. }
  572. }
  573. }
  574. function findThisElement(elt, attribute){
  575. return getClosestMatch(elt, function (elt) {
  576. return getAttributeValue(elt, attribute) != null;
  577. })
  578. }
  579. function getTarget(elt) {
  580. var targetStr = getClosestAttributeValue(elt, "hx-target");
  581. if (targetStr) {
  582. if (targetStr === "this") {
  583. return findThisElement(elt,'hx-target');
  584. } else {
  585. return querySelectorExt(elt, targetStr)
  586. }
  587. } else {
  588. var data = getInternalData(elt);
  589. if (data.boosted) {
  590. return getDocument().body;
  591. } else {
  592. return elt;
  593. }
  594. }
  595. }
  596. function shouldSettleAttribute(name) {
  597. var attributesToSettle = htmx.config.attributesToSettle;
  598. for (var i = 0; i < attributesToSettle.length; i++) {
  599. if (name === attributesToSettle[i]) {
  600. return true;
  601. }
  602. }
  603. return false;
  604. }
  605. function cloneAttributes(mergeTo, mergeFrom) {
  606. forEach(mergeTo.attributes, function (attr) {
  607. if (!mergeFrom.hasAttribute(attr.name) && shouldSettleAttribute(attr.name)) {
  608. mergeTo.removeAttribute(attr.name)
  609. }
  610. });
  611. forEach(mergeFrom.attributes, function (attr) {
  612. if (shouldSettleAttribute(attr.name)) {
  613. mergeTo.setAttribute(attr.name, attr.value);
  614. }
  615. });
  616. }
  617. function isInlineSwap(swapStyle, target) {
  618. var extensions = getExtensions(target);
  619. for (var i = 0; i < extensions.length; i++) {
  620. var extension = extensions[i];
  621. try {
  622. if (extension.isInlineSwap(swapStyle)) {
  623. return true;
  624. }
  625. } catch(e) {
  626. logError(e);
  627. }
  628. }
  629. return swapStyle === "outerHTML";
  630. }
  631. /**
  632. *
  633. * @param {string} oobValue
  634. * @param {HTMLElement} oobElement
  635. * @param {*} settleInfo
  636. * @returns
  637. */
  638. function oobSwap(oobValue, oobElement, settleInfo) {
  639. var selector = "#" + oobElement.id;
  640. var swapStyle = "outerHTML";
  641. if (oobValue === "true") {
  642. // do nothing
  643. } else if (oobValue.indexOf(":") > 0) {
  644. swapStyle = oobValue.substr(0, oobValue.indexOf(":"));
  645. selector = oobValue.substr(oobValue.indexOf(":") + 1, oobValue.length);
  646. } else {
  647. swapStyle = oobValue;
  648. }
  649. var targets = getDocument().querySelectorAll(selector);
  650. if (targets) {
  651. forEach(
  652. targets,
  653. function (target) {
  654. var fragment;
  655. var oobElementClone = oobElement.cloneNode(true);
  656. fragment = getDocument().createDocumentFragment();
  657. fragment.appendChild(oobElementClone);
  658. if (!isInlineSwap(swapStyle, target)) {
  659. fragment = oobElementClone; // if this is not an inline swap, we use the content of the node, not the node itself
  660. }
  661. var beforeSwapDetails = {shouldSwap: true, target: target, fragment:fragment };
  662. if (!triggerEvent(target, 'htmx:oobBeforeSwap', beforeSwapDetails)) return;
  663. target = beforeSwapDetails.target; // allow re-targeting
  664. if (beforeSwapDetails['shouldSwap']){
  665. swap(swapStyle, target, target, fragment, settleInfo);
  666. }
  667. forEach(settleInfo.elts, function (elt) {
  668. triggerEvent(elt, 'htmx:oobAfterSwap', beforeSwapDetails);
  669. });
  670. }
  671. );
  672. oobElement.parentNode.removeChild(oobElement);
  673. } else {
  674. oobElement.parentNode.removeChild(oobElement);
  675. triggerErrorEvent(getDocument().body, "htmx:oobErrorNoTarget", {content: oobElement});
  676. }
  677. return oobValue;
  678. }
  679. function handleOutOfBandSwaps(elt, fragment, settleInfo) {
  680. var oobSelects = getClosestAttributeValue(elt, "hx-select-oob");
  681. if (oobSelects) {
  682. var oobSelectValues = oobSelects.split(",");
  683. for (let i = 0; i < oobSelectValues.length; i++) {
  684. var oobSelectValue = oobSelectValues[i].split(":", 2);
  685. var id = oobSelectValue[0];
  686. if (id.indexOf("#") === 0) {
  687. id = id.substring(1);
  688. }
  689. var oobValue = oobSelectValue[1] || "true";
  690. var oobElement = fragment.querySelector("#" + id);
  691. if (oobElement) {
  692. oobSwap(oobValue, oobElement, settleInfo);
  693. }
  694. }
  695. }
  696. forEach(findAll(fragment, '[hx-swap-oob], [data-hx-swap-oob]'), function (oobElement) {
  697. var oobValue = getAttributeValue(oobElement, "hx-swap-oob");
  698. if (oobValue != null) {
  699. oobSwap(oobValue, oobElement, settleInfo);
  700. }
  701. });
  702. }
  703. function handlePreservedElements(fragment) {
  704. forEach(findAll(fragment, '[hx-preserve], [data-hx-preserve]'), function (preservedElt) {
  705. var id = getAttributeValue(preservedElt, "id");
  706. var oldElt = getDocument().getElementById(id);
  707. if (oldElt != null) {
  708. preservedElt.parentNode.replaceChild(oldElt, preservedElt);
  709. }
  710. });
  711. }
  712. function handleAttributes(parentNode, fragment, settleInfo) {
  713. forEach(fragment.querySelectorAll("[id]"), function (newNode) {
  714. if (newNode.id && newNode.id.length > 0) {
  715. var oldNode = parentNode.querySelector(newNode.tagName + "[id='" + newNode.id + "']");
  716. if (oldNode && oldNode !== parentNode) {
  717. var newAttributes = newNode.cloneNode();
  718. cloneAttributes(newNode, oldNode);
  719. settleInfo.tasks.push(function () {
  720. cloneAttributes(newNode, newAttributes);
  721. });
  722. }
  723. }
  724. });
  725. }
  726. function makeAjaxLoadTask(child) {
  727. return function () {
  728. removeClassFromElement(child, htmx.config.addedClass);
  729. processNode(child);
  730. processScripts(child);
  731. processFocus(child)
  732. triggerEvent(child, 'htmx:load');
  733. };
  734. }
  735. function processFocus(child) {
  736. var autofocus = "[autofocus]";
  737. var autoFocusedElt = matches(child, autofocus) ? child : child.querySelector(autofocus)
  738. if (autoFocusedElt != null) {
  739. autoFocusedElt.focus();
  740. }
  741. }
  742. function insertNodesBefore(parentNode, insertBefore, fragment, settleInfo) {
  743. handleAttributes(parentNode, fragment, settleInfo);
  744. while(fragment.childNodes.length > 0){
  745. var child = fragment.firstChild;
  746. addClassToElement(child, htmx.config.addedClass);
  747. parentNode.insertBefore(child, insertBefore);
  748. if (child.nodeType !== Node.TEXT_NODE && child.nodeType !== Node.COMMENT_NODE) {
  749. settleInfo.tasks.push(makeAjaxLoadTask(child));
  750. }
  751. }
  752. }
  753. function cleanUpElement(element) {
  754. var internalData = getInternalData(element);
  755. if (internalData.webSocket) {
  756. internalData.webSocket.close();
  757. }
  758. if (internalData.sseEventSource) {
  759. internalData.sseEventSource.close();
  760. }
  761. triggerEvent(element, "htmx:beforeCleanupElement")
  762. if (internalData.listenerInfos) {
  763. forEach(internalData.listenerInfos, function(info) {
  764. if (element !== info.on) {
  765. info.on.removeEventListener(info.trigger, info.listener);
  766. }
  767. });
  768. }
  769. if (element.children) { // IE
  770. forEach(element.children, function(child) { cleanUpElement(child) });
  771. }
  772. }
  773. function swapOuterHTML(target, fragment, settleInfo) {
  774. if (target.tagName === "BODY") {
  775. return swapInnerHTML(target, fragment, settleInfo);
  776. } else {
  777. // @type {HTMLElement}
  778. var newElt
  779. var eltBeforeNewContent = target.previousSibling;
  780. insertNodesBefore(parentElt(target), target, fragment, settleInfo);
  781. if (eltBeforeNewContent == null) {
  782. newElt = parentElt(target).firstChild;
  783. } else {
  784. newElt = eltBeforeNewContent.nextSibling;
  785. }
  786. getInternalData(target).replacedWith = newElt; // tuck away so we can fire events on it later
  787. settleInfo.elts = [] // clear existing elements
  788. while(newElt && newElt !== target) {
  789. if (newElt.nodeType === Node.ELEMENT_NODE) {
  790. settleInfo.elts.push(newElt);
  791. }
  792. newElt = newElt.nextElementSibling;
  793. }
  794. cleanUpElement(target);
  795. parentElt(target).removeChild(target);
  796. }
  797. }
  798. function swapAfterBegin(target, fragment, settleInfo) {
  799. return insertNodesBefore(target, target.firstChild, fragment, settleInfo);
  800. }
  801. function swapBeforeBegin(target, fragment, settleInfo) {
  802. return insertNodesBefore(parentElt(target), target, fragment, settleInfo);
  803. }
  804. function swapBeforeEnd(target, fragment, settleInfo) {
  805. return insertNodesBefore(target, null, fragment, settleInfo);
  806. }
  807. function swapAfterEnd(target, fragment, settleInfo) {
  808. return insertNodesBefore(parentElt(target), target.nextSibling, fragment, settleInfo);
  809. }
  810. function swapDelete(target, fragment, settleInfo) {
  811. cleanUpElement(target);
  812. return parentElt(target).removeChild(target);
  813. }
  814. function swapInnerHTML(target, fragment, settleInfo) {
  815. var firstChild = target.firstChild;
  816. insertNodesBefore(target, firstChild, fragment, settleInfo);
  817. if (firstChild) {
  818. while (firstChild.nextSibling) {
  819. cleanUpElement(firstChild.nextSibling)
  820. target.removeChild(firstChild.nextSibling);
  821. }
  822. cleanUpElement(firstChild)
  823. target.removeChild(firstChild);
  824. }
  825. }
  826. function maybeSelectFromResponse(elt, fragment) {
  827. var selector = getClosestAttributeValue(elt, "hx-select");
  828. if (selector) {
  829. var newFragment = getDocument().createDocumentFragment();
  830. forEach(fragment.querySelectorAll(selector), function (node) {
  831. newFragment.appendChild(node);
  832. });
  833. fragment = newFragment;
  834. }
  835. return fragment;
  836. }
  837. function swap(swapStyle, elt, target, fragment, settleInfo) {
  838. switch (swapStyle) {
  839. case "none":
  840. return;
  841. case "outerHTML":
  842. swapOuterHTML(target, fragment, settleInfo);
  843. return;
  844. case "afterbegin":
  845. swapAfterBegin(target, fragment, settleInfo);
  846. return;
  847. case "beforebegin":
  848. swapBeforeBegin(target, fragment, settleInfo);
  849. return;
  850. case "beforeend":
  851. swapBeforeEnd(target, fragment, settleInfo);
  852. return;
  853. case "afterend":
  854. swapAfterEnd(target, fragment, settleInfo);
  855. return;
  856. case "delete":
  857. swapDelete(target, fragment, settleInfo);
  858. return;
  859. default:
  860. var extensions = getExtensions(elt);
  861. for (var i = 0; i < extensions.length; i++) {
  862. var ext = extensions[i];
  863. try {
  864. var newElements = ext.handleSwap(swapStyle, target, fragment, settleInfo);
  865. if (newElements) {
  866. if (typeof newElements.length !== 'undefined') {
  867. // if handleSwap returns an array (like) of elements, we handle them
  868. for (var j = 0; j < newElements.length; j++) {
  869. var child = newElements[j];
  870. if (child.nodeType !== Node.TEXT_NODE && child.nodeType !== Node.COMMENT_NODE) {
  871. settleInfo.tasks.push(makeAjaxLoadTask(child));
  872. }
  873. }
  874. }
  875. return;
  876. }
  877. } catch (e) {
  878. logError(e);
  879. }
  880. }
  881. if (swapStyle === "innerHTML") {
  882. swapInnerHTML(target, fragment, settleInfo);
  883. } else {
  884. swap(htmx.config.defaultSwapStyle, elt, target, fragment, settleInfo);
  885. }
  886. }
  887. }
  888. function findTitle(content) {
  889. if (content.indexOf('<title') > -1) {
  890. var contentWithSvgsRemoved = content.replace(/<svg(\s[^>]*>|>)([\s\S]*?)<\/svg>/gim, '');
  891. var result = contentWithSvgsRemoved.match(/<title(\s[^>]*>|>)([\s\S]*?)<\/title>/im);
  892. if (result) {
  893. return result[2];
  894. }
  895. }
  896. }
  897. function selectAndSwap(swapStyle, target, elt, responseText, settleInfo) {
  898. settleInfo.title = findTitle(responseText);
  899. var fragment = makeFragment(responseText);
  900. if (fragment) {
  901. handleOutOfBandSwaps(elt, fragment, settleInfo);
  902. fragment = maybeSelectFromResponse(elt, fragment);
  903. handlePreservedElements(fragment);
  904. return swap(swapStyle, elt, target, fragment, settleInfo);
  905. }
  906. }
  907. function handleTrigger(xhr, header, elt) {
  908. var triggerBody = xhr.getResponseHeader(header);
  909. if (triggerBody.indexOf("{") === 0) {
  910. var triggers = parseJSON(triggerBody);
  911. for (var eventName in triggers) {
  912. if (triggers.hasOwnProperty(eventName)) {
  913. var detail = triggers[eventName];
  914. if (!isRawObject(detail)) {
  915. detail = {"value": detail}
  916. }
  917. triggerEvent(elt, eventName, detail);
  918. }
  919. }
  920. } else {
  921. triggerEvent(elt, triggerBody, []);
  922. }
  923. }
  924. var WHITESPACE = /\s/;
  925. var WHITESPACE_OR_COMMA = /[\s,]/;
  926. var SYMBOL_START = /[_$a-zA-Z]/;
  927. var SYMBOL_CONT = /[_$a-zA-Z0-9]/;
  928. var STRINGISH_START = ['"', "'", "/"];
  929. var NOT_WHITESPACE = /[^\s]/;
  930. function tokenizeString(str) {
  931. var tokens = [];
  932. var position = 0;
  933. while (position < str.length) {
  934. if(SYMBOL_START.exec(str.charAt(position))) {
  935. var startPosition = position;
  936. while (SYMBOL_CONT.exec(str.charAt(position + 1))) {
  937. position++;
  938. }
  939. tokens.push(str.substr(startPosition, position - startPosition + 1));
  940. } else if (STRINGISH_START.indexOf(str.charAt(position)) !== -1) {
  941. var startChar = str.charAt(position);
  942. var startPosition = position;
  943. position++;
  944. while (position < str.length && str.charAt(position) !== startChar ) {
  945. if (str.charAt(position) === "\\") {
  946. position++;
  947. }
  948. position++;
  949. }
  950. tokens.push(str.substr(startPosition, position - startPosition + 1));
  951. } else {
  952. var symbol = str.charAt(position);
  953. tokens.push(symbol);
  954. }
  955. position++;
  956. }
  957. return tokens;
  958. }
  959. function isPossibleRelativeReference(token, last, paramName) {
  960. return SYMBOL_START.exec(token.charAt(0)) &&
  961. token !== "true" &&
  962. token !== "false" &&
  963. token !== "this" &&
  964. token !== paramName &&
  965. last !== ".";
  966. }
  967. function maybeGenerateConditional(elt, tokens, paramName) {
  968. if (tokens[0] === '[') {
  969. tokens.shift();
  970. var bracketCount = 1;
  971. var conditionalSource = " return (function(" + paramName + "){ return (";
  972. var last = null;
  973. while (tokens.length > 0) {
  974. var token = tokens[0];
  975. if (token === "]") {
  976. bracketCount--;
  977. if (bracketCount === 0) {
  978. if (last === null) {
  979. conditionalSource = conditionalSource + "true";
  980. }
  981. tokens.shift();
  982. conditionalSource += ")})";
  983. try {
  984. var conditionFunction = maybeEval(elt,function () {
  985. return Function(conditionalSource)();
  986. },
  987. function(){return true})
  988. conditionFunction.source = conditionalSource;
  989. return conditionFunction;
  990. } catch (e) {
  991. triggerErrorEvent(getDocument().body, "htmx:syntax:error", {error:e, source:conditionalSource})
  992. return null;
  993. }
  994. }
  995. } else if (token === "[") {
  996. bracketCount++;
  997. }
  998. if (isPossibleRelativeReference(token, last, paramName)) {
  999. conditionalSource += "((" + paramName + "." + token + ") ? (" + paramName + "." + token + ") : (window." + token + "))";
  1000. } else {
  1001. conditionalSource = conditionalSource + token;
  1002. }
  1003. last = tokens.shift();
  1004. }
  1005. }
  1006. }
  1007. function consumeUntil(tokens, match) {
  1008. var result = "";
  1009. while (tokens.length > 0 && !tokens[0].match(match)) {
  1010. result += tokens.shift();
  1011. }
  1012. return result;
  1013. }
  1014. var INPUT_SELECTOR = 'input, textarea, select';
  1015. /**
  1016. * @param {HTMLElement} elt
  1017. * @returns {import("./htmx").HtmxTriggerSpecification[]}
  1018. */
  1019. function getTriggerSpecs(elt) {
  1020. var explicitTrigger = getAttributeValue(elt, 'hx-trigger');
  1021. var triggerSpecs = [];
  1022. if (explicitTrigger) {
  1023. var tokens = tokenizeString(explicitTrigger);
  1024. do {
  1025. consumeUntil(tokens, NOT_WHITESPACE);
  1026. var initialLength = tokens.length;
  1027. var trigger = consumeUntil(tokens, /[,\[\s]/);
  1028. if (trigger !== "") {
  1029. if (trigger === "every") {
  1030. var every = {trigger: 'every'};
  1031. consumeUntil(tokens, NOT_WHITESPACE);
  1032. every.pollInterval = parseInterval(consumeUntil(tokens, /[,\[\s]/));
  1033. consumeUntil(tokens, NOT_WHITESPACE);
  1034. var eventFilter = maybeGenerateConditional(elt, tokens, "event");
  1035. if (eventFilter) {
  1036. every.eventFilter = eventFilter;
  1037. }
  1038. triggerSpecs.push(every);
  1039. } else if (trigger.indexOf("sse:") === 0) {
  1040. triggerSpecs.push({trigger: 'sse', sseEvent: trigger.substr(4)});
  1041. } else {
  1042. var triggerSpec = {trigger: trigger};
  1043. var eventFilter = maybeGenerateConditional(elt, tokens, "event");
  1044. if (eventFilter) {
  1045. triggerSpec.eventFilter = eventFilter;
  1046. }
  1047. while (tokens.length > 0 && tokens[0] !== ",") {
  1048. consumeUntil(tokens, NOT_WHITESPACE)
  1049. var token = tokens.shift();
  1050. if (token === "changed") {
  1051. triggerSpec.changed = true;
  1052. } else if (token === "once") {
  1053. triggerSpec.once = true;
  1054. } else if (token === "consume") {
  1055. triggerSpec.consume = true;
  1056. } else if (token === "delay" && tokens[0] === ":") {
  1057. tokens.shift();
  1058. triggerSpec.delay = parseInterval(consumeUntil(tokens, WHITESPACE_OR_COMMA));
  1059. } else if (token === "from" && tokens[0] === ":") {
  1060. tokens.shift();
  1061. var from_arg = consumeUntil(tokens, WHITESPACE_OR_COMMA);
  1062. if (from_arg === "closest" || from_arg === "find" || from_arg === "next" || from_arg === "previous") {
  1063. tokens.shift();
  1064. from_arg +=
  1065. " " +
  1066. consumeUntil(
  1067. tokens,
  1068. WHITESPACE_OR_COMMA
  1069. );
  1070. }
  1071. triggerSpec.from = from_arg;
  1072. } else if (token === "target" && tokens[0] === ":") {
  1073. tokens.shift();
  1074. triggerSpec.target = consumeUntil(tokens, WHITESPACE_OR_COMMA);
  1075. } else if (token === "throttle" && tokens[0] === ":") {
  1076. tokens.shift();
  1077. triggerSpec.throttle = parseInterval(consumeUntil(tokens, WHITESPACE_OR_COMMA));
  1078. } else if (token === "queue" && tokens[0] === ":") {
  1079. tokens.shift();
  1080. triggerSpec.queue = consumeUntil(tokens, WHITESPACE_OR_COMMA);
  1081. } else if ((token === "root" || token === "threshold") && tokens[0] === ":") {
  1082. tokens.shift();
  1083. triggerSpec[token] = consumeUntil(tokens, WHITESPACE_OR_COMMA);
  1084. } else {
  1085. triggerErrorEvent(elt, "htmx:syntax:error", {token:tokens.shift()});
  1086. }
  1087. }
  1088. triggerSpecs.push(triggerSpec);
  1089. }
  1090. }
  1091. if (tokens.length === initialLength) {
  1092. triggerErrorEvent(elt, "htmx:syntax:error", {token:tokens.shift()});
  1093. }
  1094. consumeUntil(tokens, NOT_WHITESPACE);
  1095. } while (tokens[0] === "," && tokens.shift())
  1096. }
  1097. if (triggerSpecs.length > 0) {
  1098. return triggerSpecs;
  1099. } else if (matches(elt, 'form')) {
  1100. return [{trigger: 'submit'}];
  1101. } else if (matches(elt, 'input[type="button"]')){
  1102. return [{trigger: 'click'}];
  1103. } else if (matches(elt, INPUT_SELECTOR)) {
  1104. return [{trigger: 'change'}];
  1105. } else {
  1106. return [{trigger: 'click'}];
  1107. }
  1108. }
  1109. function cancelPolling(elt) {
  1110. getInternalData(elt).cancelled = true;
  1111. }
  1112. function processPolling(elt, handler, spec) {
  1113. var nodeData = getInternalData(elt);
  1114. nodeData.timeout = setTimeout(function () {
  1115. if (bodyContains(elt) && nodeData.cancelled !== true) {
  1116. if (!maybeFilterEvent(spec, makeEvent('hx:poll:trigger', {triggerSpec:spec, target:elt}))) {
  1117. handler(elt);
  1118. }
  1119. processPolling(elt, handler, spec);
  1120. }
  1121. }, spec.pollInterval);
  1122. }
  1123. function isLocalLink(elt) {
  1124. return location.hostname === elt.hostname &&
  1125. getRawAttribute(elt,'href') &&
  1126. getRawAttribute(elt,'href').indexOf("#") !== 0;
  1127. }
  1128. function boostElement(elt, nodeData, triggerSpecs) {
  1129. if ((elt.tagName === "A" && isLocalLink(elt) && (elt.target === "" || elt.target === "_self")) || elt.tagName === "FORM") {
  1130. nodeData.boosted = true;
  1131. var verb, path;
  1132. if (elt.tagName === "A") {
  1133. verb = "get";
  1134. path = getRawAttribute(elt, 'href');
  1135. } else {
  1136. var rawAttribute = getRawAttribute(elt, "method");
  1137. verb = rawAttribute ? rawAttribute.toLowerCase() : "get";
  1138. if (verb === "get") {
  1139. }
  1140. path = getRawAttribute(elt, 'action');
  1141. }
  1142. triggerSpecs.forEach(function(triggerSpec) {
  1143. addEventListener(elt, function(evt) {
  1144. issueAjaxRequest(verb, path, elt, evt)
  1145. }, nodeData, triggerSpec, true);
  1146. });
  1147. }
  1148. }
  1149. /**
  1150. *
  1151. * @param {Event} evt
  1152. * @param {HTMLElement} elt
  1153. * @returns
  1154. */
  1155. function shouldCancel(evt, elt) {
  1156. if (evt.type === "submit" || evt.type === "click") {
  1157. if (elt.tagName === "FORM") {
  1158. return true;
  1159. }
  1160. if (matches(elt, 'input[type="submit"], button') && closest(elt, 'form') !== null) {
  1161. return true;
  1162. }
  1163. if (elt.tagName === "A" && elt.href &&
  1164. (elt.getAttribute('href') === '#' || elt.getAttribute('href').indexOf("#") !== 0)) {
  1165. return true;
  1166. }
  1167. }
  1168. return false;
  1169. }
  1170. function ignoreBoostedAnchorCtrlClick(elt, evt) {
  1171. return getInternalData(elt).boosted && elt.tagName === "A" && evt.type === "click" && (evt.ctrlKey || evt.metaKey);
  1172. }
  1173. function maybeFilterEvent(triggerSpec, evt) {
  1174. var eventFilter = triggerSpec.eventFilter;
  1175. if(eventFilter){
  1176. try {
  1177. return eventFilter(evt) !== true;
  1178. } catch(e) {
  1179. triggerErrorEvent(getDocument().body, "htmx:eventFilter:error", {error: e, source:eventFilter.source});
  1180. return true;
  1181. }
  1182. }
  1183. return false;
  1184. }
  1185. function addEventListener(elt, handler, nodeData, triggerSpec, explicitCancel) {
  1186. var eltsToListenOn;
  1187. if (triggerSpec.from) {
  1188. eltsToListenOn = querySelectorAllExt(elt, triggerSpec.from);
  1189. } else {
  1190. eltsToListenOn = [elt];
  1191. }
  1192. forEach(eltsToListenOn, function (eltToListenOn) {
  1193. var eventListener = function (evt) {
  1194. if (!bodyContains(elt)) {
  1195. eltToListenOn.removeEventListener(triggerSpec.trigger, eventListener);
  1196. return;
  1197. }
  1198. if (ignoreBoostedAnchorCtrlClick(elt, evt)) {
  1199. return;
  1200. }
  1201. if (explicitCancel || shouldCancel(evt, elt)) {
  1202. evt.preventDefault();
  1203. }
  1204. if (maybeFilterEvent(triggerSpec, evt)) {
  1205. return;
  1206. }
  1207. var eventData = getInternalData(evt);
  1208. eventData.triggerSpec = triggerSpec;
  1209. if (eventData.handledFor == null) {
  1210. eventData.handledFor = [];
  1211. }
  1212. var elementData = getInternalData(elt);
  1213. if (eventData.handledFor.indexOf(elt) < 0) {
  1214. eventData.handledFor.push(elt);
  1215. if (triggerSpec.consume) {
  1216. evt.stopPropagation();
  1217. }
  1218. if (triggerSpec.target && evt.target) {
  1219. if (!matches(evt.target, triggerSpec.target)) {
  1220. return;
  1221. }
  1222. }
  1223. if (triggerSpec.once) {
  1224. if (elementData.triggeredOnce) {
  1225. return;
  1226. } else {
  1227. elementData.triggeredOnce = true;
  1228. }
  1229. }
  1230. if (triggerSpec.changed) {
  1231. if (elementData.lastValue === elt.value) {
  1232. return;
  1233. } else {
  1234. elementData.lastValue = elt.value;
  1235. }
  1236. }
  1237. if (elementData.delayed) {
  1238. clearTimeout(elementData.delayed);
  1239. }
  1240. if (elementData.throttle) {
  1241. return;
  1242. }
  1243. if (triggerSpec.throttle) {
  1244. if (!elementData.throttle) {
  1245. handler(elt, evt);
  1246. elementData.throttle = setTimeout(function () {
  1247. elementData.throttle = null;
  1248. }, triggerSpec.throttle);
  1249. }
  1250. } else if (triggerSpec.delay) {
  1251. elementData.delayed = setTimeout(function() { handler(elt, evt) }, triggerSpec.delay);
  1252. } else {
  1253. handler(elt, evt);
  1254. }
  1255. }
  1256. };
  1257. if (nodeData.listenerInfos == null) {
  1258. nodeData.listenerInfos = [];
  1259. }
  1260. nodeData.listenerInfos.push({
  1261. trigger: triggerSpec.trigger,
  1262. listener: eventListener,
  1263. on: eltToListenOn
  1264. })
  1265. eltToListenOn.addEventListener(triggerSpec.trigger, eventListener);
  1266. })
  1267. }
  1268. var windowIsScrolling = false // used by initScrollHandler
  1269. var scrollHandler = null;
  1270. function initScrollHandler() {
  1271. if (!scrollHandler) {
  1272. scrollHandler = function() {
  1273. windowIsScrolling = true
  1274. };
  1275. window.addEventListener("scroll", scrollHandler)
  1276. setInterval(function() {
  1277. if (windowIsScrolling) {
  1278. windowIsScrolling = false;
  1279. forEach(getDocument().querySelectorAll("[hx-trigger='revealed'],[data-hx-trigger='revealed']"), function (elt) {
  1280. maybeReveal(elt);
  1281. })
  1282. }
  1283. }, 200);
  1284. }
  1285. }
  1286. function maybeReveal(elt) {
  1287. if (!hasAttribute(elt,'data-hx-revealed') && isScrolledIntoView(elt)) {
  1288. elt.setAttribute('data-hx-revealed', 'true');
  1289. var nodeData = getInternalData(elt);
  1290. if (nodeData.initialized) {
  1291. triggerEvent(elt, 'revealed');
  1292. } else {
  1293. // if the node isn't initialized, wait for it before triggering the request
  1294. elt.addEventListener("htmx:afterProcessNode", function(evt) { triggerEvent(elt, 'revealed') }, {once: true});
  1295. }
  1296. }
  1297. }
  1298. //====================================================================
  1299. // Web Sockets
  1300. //====================================================================
  1301. function processWebSocketInfo(elt, nodeData, info) {
  1302. var values = splitOnWhitespace(info);
  1303. for (var i = 0; i < values.length; i++) {
  1304. var value = values[i].split(/:(.+)/);
  1305. if (value[0] === "connect") {
  1306. ensureWebSocket(elt, value[1], 0);
  1307. }
  1308. if (value[0] === "send") {
  1309. processWebSocketSend(elt);
  1310. }
  1311. }
  1312. }
  1313. function ensureWebSocket(elt, wssSource, retryCount) {
  1314. if (!bodyContains(elt)) {
  1315. return; // stop ensuring websocket connection when socket bearing element ceases to exist
  1316. }
  1317. if (wssSource.indexOf("/") == 0) { // complete absolute paths only
  1318. var base_part = location.hostname + (location.port ? ':'+location.port: '');
  1319. if (location.protocol == 'https:') {
  1320. wssSource = "wss://" + base_part + wssSource;
  1321. } else if (location.protocol == 'http:') {
  1322. wssSource = "ws://" + base_part + wssSource;
  1323. }
  1324. }
  1325. var socket = htmx.createWebSocket(wssSource);
  1326. socket.onerror = function (e) {
  1327. triggerErrorEvent(elt, "htmx:wsError", {error:e, socket:socket});
  1328. maybeCloseWebSocketSource(elt);
  1329. };
  1330. socket.onclose = function (e) {
  1331. if ([1006, 1012, 1013].indexOf(e.code) >= 0) { // Abnormal Closure/Service Restart/Try Again Later
  1332. var delay = getWebSocketReconnectDelay(retryCount);
  1333. setTimeout(function() {
  1334. ensureWebSocket(elt, wssSource, retryCount+1); // creates a websocket with a new timeout
  1335. }, delay);
  1336. }
  1337. };
  1338. socket.onopen = function (e) {
  1339. retryCount = 0;
  1340. }
  1341. getInternalData(elt).webSocket = socket;
  1342. socket.addEventListener('message', function (event) {
  1343. if (maybeCloseWebSocketSource(elt)) {
  1344. return;
  1345. }
  1346. var response = event.data;
  1347. withExtensions(elt, function(extension){
  1348. response = extension.transformResponse(response, null, elt);
  1349. });
  1350. var settleInfo = makeSettleInfo(elt);
  1351. var fragment = makeFragment(response);
  1352. var children = toArray(fragment.children);
  1353. for (var i = 0; i < children.length; i++) {
  1354. var child = children[i];
  1355. oobSwap(getAttributeValue(child, "hx-swap-oob") || "true", child, settleInfo);
  1356. }
  1357. settleImmediately(settleInfo.tasks);
  1358. });
  1359. }
  1360. function maybeCloseWebSocketSource(elt) {
  1361. if (!bodyContains(elt)) {
  1362. getInternalData(elt).webSocket.close();
  1363. return true;
  1364. }
  1365. }
  1366. function processWebSocketSend(elt) {
  1367. var webSocketSourceElt = getClosestMatch(elt, function (parent) {
  1368. return getInternalData(parent).webSocket != null;
  1369. });
  1370. if (webSocketSourceElt) {
  1371. elt.addEventListener(getTriggerSpecs(elt)[0].trigger, function (evt) {
  1372. var webSocket = getInternalData(webSocketSourceElt).webSocket;
  1373. var headers = getHeaders(elt, webSocketSourceElt);
  1374. var results = getInputValues(elt, 'post');
  1375. var errors = results.errors;
  1376. var rawParameters = results.values;
  1377. var expressionVars = getExpressionVars(elt);
  1378. var allParameters = mergeObjects(rawParameters, expressionVars);
  1379. var filteredParameters = filterValues(allParameters, elt);
  1380. filteredParameters['HEADERS'] = headers;
  1381. if (errors && errors.length > 0) {
  1382. triggerEvent(elt, 'htmx:validation:halted', errors);
  1383. return;
  1384. }
  1385. webSocket.send(JSON.stringify(filteredParameters));
  1386. if(shouldCancel(evt, elt)){
  1387. evt.preventDefault();
  1388. }
  1389. });
  1390. } else {
  1391. triggerErrorEvent(elt, "htmx:noWebSocketSourceError");
  1392. }
  1393. }
  1394. function getWebSocketReconnectDelay(retryCount) {
  1395. var delay = htmx.config.wsReconnectDelay;
  1396. if (typeof delay === 'function') {
  1397. // @ts-ignore
  1398. return delay(retryCount);
  1399. }
  1400. if (delay === 'full-jitter') {
  1401. var exp = Math.min(retryCount, 6);
  1402. var maxDelay = 1000 * Math.pow(2, exp);
  1403. return maxDelay * Math.random();
  1404. }
  1405. logError('htmx.config.wsReconnectDelay must either be a function or the string "full-jitter"');
  1406. }
  1407. //====================================================================
  1408. // Server Sent Events
  1409. //====================================================================
  1410. function processSSEInfo(elt, nodeData, info) {
  1411. var values = splitOnWhitespace(info);
  1412. for (var i = 0; i < values.length; i++) {
  1413. var value = values[i].split(/:(.+)/);
  1414. if (value[0] === "connect") {
  1415. processSSESource(elt, value[1]);
  1416. }
  1417. if ((value[0] === "swap")) {
  1418. processSSESwap(elt, value[1])
  1419. }
  1420. }
  1421. }
  1422. function processSSESource(elt, sseSrc) {
  1423. var source = htmx.createEventSource(sseSrc);
  1424. source.onerror = function (e) {
  1425. triggerErrorEvent(elt, "htmx:sseError", {error:e, source:source});
  1426. maybeCloseSSESource(elt);
  1427. };
  1428. getInternalData(elt).sseEventSource = source;
  1429. }
  1430. function processSSESwap(elt, sseEventName) {
  1431. var sseSourceElt = getClosestMatch(elt, hasEventSource);
  1432. if (sseSourceElt) {
  1433. var sseEventSource = getInternalData(sseSourceElt).sseEventSource;
  1434. var sseListener = function (event) {
  1435. if (maybeCloseSSESource(sseSourceElt)) {
  1436. sseEventSource.removeEventListener(sseEventName, sseListener);
  1437. return;
  1438. }
  1439. ///////////////////////////
  1440. // TODO: merge this code with AJAX and WebSockets code in the future.
  1441. var response = event.data;
  1442. withExtensions(elt, function(extension){
  1443. response = extension.transformResponse(response, null, elt);
  1444. });
  1445. var swapSpec = getSwapSpecification(elt)
  1446. var target = getTarget(elt)
  1447. var settleInfo = makeSettleInfo(elt);
  1448. selectAndSwap(swapSpec.swapStyle, elt, target, response, settleInfo)
  1449. settleImmediately(settleInfo.tasks)
  1450. triggerEvent(elt, "htmx:sseMessage", event)
  1451. };
  1452. getInternalData(elt).sseListener = sseListener;
  1453. sseEventSource.addEventListener(sseEventName, sseListener);
  1454. } else {
  1455. triggerErrorEvent(elt, "htmx:noSSESourceError");
  1456. }
  1457. }
  1458. function processSSETrigger(elt, handler, sseEventName) {
  1459. var sseSourceElt = getClosestMatch(elt, hasEventSource);
  1460. if (sseSourceElt) {
  1461. var sseEventSource = getInternalData(sseSourceElt).sseEventSource;
  1462. var sseListener = function () {
  1463. if (!maybeCloseSSESource(sseSourceElt)) {
  1464. if (bodyContains(elt)) {
  1465. handler(elt);
  1466. } else {
  1467. sseEventSource.removeEventListener(sseEventName, sseListener);
  1468. }
  1469. }
  1470. };
  1471. getInternalData(elt).sseListener = sseListener;
  1472. sseEventSource.addEventListener(sseEventName, sseListener);
  1473. } else {
  1474. triggerErrorEvent(elt, "htmx:noSSESourceError");
  1475. }
  1476. }
  1477. function maybeCloseSSESource(elt) {
  1478. if (!bodyContains(elt)) {
  1479. getInternalData(elt).sseEventSource.close();
  1480. return true;
  1481. }
  1482. }
  1483. function hasEventSource(node) {
  1484. return getInternalData(node).sseEventSource != null;
  1485. }
  1486. //====================================================================
  1487. function loadImmediately(elt, handler, nodeData, delay) {
  1488. var load = function(){
  1489. if (!nodeData.loaded) {
  1490. nodeData.loaded = true;
  1491. handler(elt);
  1492. }
  1493. }
  1494. if (delay) {
  1495. setTimeout(load, delay);
  1496. } else {
  1497. load();
  1498. }
  1499. }
  1500. function processVerbs(elt, nodeData, triggerSpecs) {
  1501. var explicitAction = false;
  1502. forEach(VERBS, function (verb) {
  1503. if (hasAttribute(elt,'hx-' + verb)) {
  1504. var path = getAttributeValue(elt, 'hx-' + verb);
  1505. explicitAction = true;
  1506. nodeData.path = path;
  1507. nodeData.verb = verb;
  1508. triggerSpecs.forEach(function(triggerSpec) {
  1509. addTriggerHandler(elt, triggerSpec, nodeData, function (elt, evt) {
  1510. issueAjaxRequest(verb, path, elt, evt)
  1511. })
  1512. });
  1513. }
  1514. });
  1515. return explicitAction;
  1516. }
  1517. function addTriggerHandler(elt, triggerSpec, nodeData, handler) {
  1518. if (triggerSpec.sseEvent) {
  1519. processSSETrigger(elt, handler, triggerSpec.sseEvent);
  1520. } else if (triggerSpec.trigger === "revealed") {
  1521. initScrollHandler();
  1522. addEventListener(elt, handler, nodeData, triggerSpec);
  1523. maybeReveal(elt);
  1524. } else if (triggerSpec.trigger === "intersect") {
  1525. var observerOptions = {};
  1526. if (triggerSpec.root) {
  1527. observerOptions.root = querySelectorExt(elt, triggerSpec.root)
  1528. }
  1529. if (triggerSpec.threshold) {
  1530. observerOptions.threshold = parseFloat(triggerSpec.threshold);
  1531. }
  1532. var observer = new IntersectionObserver(function (entries) {
  1533. for (var i = 0; i < entries.length; i++) {
  1534. var entry = entries[i];
  1535. if (entry.isIntersecting) {
  1536. triggerEvent(elt, "intersect");
  1537. break;
  1538. }
  1539. }
  1540. }, observerOptions);
  1541. observer.observe(elt);
  1542. addEventListener(elt, handler, nodeData, triggerSpec);
  1543. } else if (triggerSpec.trigger === "load") {
  1544. if (!maybeFilterEvent(triggerSpec, makeEvent("load", {elt:elt}))) {
  1545. loadImmediately(elt, handler, nodeData, triggerSpec.delay);
  1546. }
  1547. } else if (triggerSpec.pollInterval) {
  1548. nodeData.polling = true;
  1549. processPolling(elt, handler, triggerSpec);
  1550. } else {
  1551. addEventListener(elt, handler, nodeData, triggerSpec);
  1552. }
  1553. }
  1554. function evalScript(script) {
  1555. if (script.type === "text/javascript" || script.type === "module" || script.type === "") {
  1556. var newScript = getDocument().createElement("script");
  1557. forEach(script.attributes, function (attr) {
  1558. newScript.setAttribute(attr.name, attr.value);
  1559. });
  1560. newScript.textContent = script.textContent;
  1561. newScript.async = false;
  1562. if (htmx.config.inlineScriptNonce) {
  1563. newScript.nonce = htmx.config.inlineScriptNonce;
  1564. }
  1565. var parent = script.parentElement;
  1566. try {
  1567. parent.insertBefore(newScript, script);
  1568. } catch (e) {
  1569. logError(e);
  1570. } finally {
  1571. parent.removeChild(script);
  1572. }
  1573. }
  1574. }
  1575. function processScripts(elt) {
  1576. if (matches(elt, "script")) {
  1577. evalScript(elt);
  1578. }
  1579. forEach(findAll(elt, "script"), function (script) {
  1580. evalScript(script);
  1581. });
  1582. }
  1583. function hasChanceOfBeingBoosted() {
  1584. return document.querySelector("[hx-boost], [data-hx-boost]");
  1585. }
  1586. function findElementsToProcess(elt) {
  1587. if (elt.querySelectorAll) {
  1588. var boostedElts = hasChanceOfBeingBoosted() ? ", a, form" : "";
  1589. var results = elt.querySelectorAll(VERB_SELECTOR + boostedElts + ", [hx-sse], [data-hx-sse], [hx-ws]," +
  1590. " [data-hx-ws], [hx-ext], [hx-data-ext]");
  1591. return results;
  1592. } else {
  1593. return [];
  1594. }
  1595. }
  1596. function initButtonTracking(form){
  1597. var maybeSetLastButtonClicked = function(evt){
  1598. if (matches(evt.target, "button, input[type='submit']")) {
  1599. var internalData = getInternalData(form);
  1600. internalData.lastButtonClicked = evt.target;
  1601. }
  1602. };
  1603. // need to handle both click and focus in:
  1604. // focusin - in case someone tabs in to a button and hits the space bar
  1605. // click - on OSX buttons do not focus on click see https://bugs.webkit.org/show_bug.cgi?id=13724
  1606. form.addEventListener('click', maybeSetLastButtonClicked)
  1607. form.addEventListener('focusin', maybeSetLastButtonClicked)
  1608. form.addEventListener('focusout', function(evt){
  1609. var internalData = getInternalData(form);
  1610. internalData.lastButtonClicked = null;
  1611. })
  1612. }
  1613. function initNode(elt) {
  1614. if (elt.closest && elt.closest(htmx.config.disableSelector)) {
  1615. return;
  1616. }
  1617. var nodeData = getInternalData(elt);
  1618. if (!nodeData.initialized) {
  1619. nodeData.initialized = true;
  1620. triggerEvent(elt, "htmx:beforeProcessNode")
  1621. if (elt.value) {
  1622. nodeData.lastValue = elt.value;
  1623. }
  1624. var triggerSpecs = getTriggerSpecs(elt);
  1625. var explicitAction = processVerbs(elt, nodeData, triggerSpecs);
  1626. if (!explicitAction && getClosestAttributeValue(elt, "hx-boost") === "true") {
  1627. boostElement(elt, nodeData, triggerSpecs);
  1628. }
  1629. if (elt.tagName === "FORM") {
  1630. initButtonTracking(elt);
  1631. }
  1632. var sseInfo = getAttributeValue(elt, 'hx-sse');
  1633. if (sseInfo) {
  1634. processSSEInfo(elt, nodeData, sseInfo);
  1635. }
  1636. var wsInfo = getAttributeValue(elt, 'hx-ws');
  1637. if (wsInfo) {
  1638. processWebSocketInfo(elt, nodeData, wsInfo);
  1639. }
  1640. triggerEvent(elt, "htmx:afterProcessNode");
  1641. }
  1642. }
  1643. function processNode(elt) {
  1644. elt = resolveTarget(elt);
  1645. initNode(elt);
  1646. forEach(findElementsToProcess(elt), function(child) { initNode(child) });
  1647. }
  1648. //====================================================================
  1649. // Event/Log Support
  1650. //====================================================================
  1651. function kebabEventName(str) {
  1652. return str.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
  1653. }
  1654. function makeEvent(eventName, detail) {
  1655. var evt;
  1656. if (window.CustomEvent && typeof window.CustomEvent === 'function') {
  1657. evt = new CustomEvent(eventName, {bubbles: true, cancelable: true, detail: detail});
  1658. } else {
  1659. evt = getDocument().createEvent('CustomEvent');
  1660. evt.initCustomEvent(eventName, true, true, detail);
  1661. }
  1662. return evt;
  1663. }
  1664. function triggerErrorEvent(elt, eventName, detail) {
  1665. triggerEvent(elt, eventName, mergeObjects({error:eventName}, detail));
  1666. }
  1667. function ignoreEventForLogging(eventName) {
  1668. return eventName === "htmx:afterProcessNode"
  1669. }
  1670. /**
  1671. * `withExtensions` locates all active extensions for a provided element, then
  1672. * executes the provided function using each of the active extensions. It should
  1673. * be called internally at every extendable execution point in htmx.
  1674. *
  1675. * @param {HTMLElement} elt
  1676. * @param {(extension:import("./htmx").HtmxExtension) => void} toDo
  1677. * @returns void
  1678. */
  1679. function withExtensions(elt, toDo) {
  1680. forEach(getExtensions(elt), function(extension){
  1681. try {
  1682. toDo(extension);
  1683. } catch (e) {
  1684. logError(e);
  1685. }
  1686. });
  1687. }
  1688. function logError(msg) {
  1689. if(console.error) {
  1690. console.error(msg);
  1691. } else if (console.log) {
  1692. console.log("ERROR: ", msg);
  1693. }
  1694. }
  1695. function triggerEvent(elt, eventName, detail) {
  1696. elt = resolveTarget(elt);
  1697. if (detail == null) {
  1698. detail = {};
  1699. }
  1700. detail["elt"] = elt;
  1701. var event = makeEvent(eventName, detail);
  1702. if (htmx.logger && !ignoreEventForLogging(eventName)) {
  1703. htmx.logger(elt, eventName, detail);
  1704. }
  1705. if (detail.error) {
  1706. logError(detail.error);
  1707. triggerEvent(elt, "htmx:error", {errorInfo:detail})
  1708. }
  1709. var eventResult = elt.dispatchEvent(event);
  1710. var kebabName = kebabEventName(eventName);
  1711. if (eventResult && kebabName !== eventName) {
  1712. var kebabedEvent = makeEvent(kebabName, event.detail);
  1713. eventResult = eventResult && elt.dispatchEvent(kebabedEvent)
  1714. }
  1715. withExtensions(elt, function (extension) {
  1716. eventResult = eventResult && (extension.onEvent(eventName, event) !== false)
  1717. });
  1718. return eventResult;
  1719. }
  1720. //====================================================================
  1721. // History Support
  1722. //====================================================================
  1723. var currentPathForHistory = location.pathname+location.search;
  1724. function getHistoryElement() {
  1725. var historyElt = getDocument().querySelector('[hx-history-elt],[data-hx-history-elt]');
  1726. return historyElt || getDocument().body;
  1727. }
  1728. function saveToHistoryCache(url, content, title, scroll) {
  1729. if (!canAccessLocalStorage()) {
  1730. return;
  1731. }
  1732. var historyCache = parseJSON(localStorage.getItem("htmx-history-cache")) || [];
  1733. for (var i = 0; i < historyCache.length; i++) {
  1734. if (historyCache[i].url === url) {
  1735. historyCache.splice(i, 1);
  1736. break;
  1737. }
  1738. }
  1739. historyCache.push({url:url, content: content, title:title, scroll:scroll})
  1740. while (historyCache.length > htmx.config.historyCacheSize) {
  1741. historyCache.shift();
  1742. }
  1743. while(historyCache.length > 0){
  1744. try {
  1745. localStorage.setItem("htmx-history-cache", JSON.stringify(historyCache));
  1746. break;
  1747. } catch (e) {
  1748. triggerErrorEvent(getDocument().body, "htmx:historyCacheError", {cause:e, cache: historyCache})
  1749. historyCache.shift(); // shrink the cache and retry
  1750. }
  1751. }
  1752. }
  1753. function getCachedHistory(url) {
  1754. if (!canAccessLocalStorage()) {
  1755. return null;
  1756. }
  1757. var historyCache = parseJSON(localStorage.getItem("htmx-history-cache")) || [];
  1758. for (var i = 0; i < historyCache.length; i++) {
  1759. if (historyCache[i].url === url) {
  1760. return historyCache[i];
  1761. }
  1762. }
  1763. return null;
  1764. }
  1765. function cleanInnerHtmlForHistory(elt) {
  1766. var className = htmx.config.requestClass;
  1767. var clone = elt.cloneNode(true);
  1768. forEach(findAll(clone, "." + className), function(child){
  1769. removeClassFromElement(child, className);
  1770. });
  1771. return clone.innerHTML;
  1772. }
  1773. function saveCurrentPageToHistory() {
  1774. var elt = getHistoryElement();
  1775. var path = currentPathForHistory || location.pathname+location.search;
  1776. triggerEvent(getDocument().body, "htmx:beforeHistorySave", {path:path, historyElt:elt});
  1777. if(htmx.config.historyEnabled) history.replaceState({htmx:true}, getDocument().title, window.location.href);
  1778. saveToHistoryCache(path, cleanInnerHtmlForHistory(elt), getDocument().title, window.scrollY);
  1779. }
  1780. function pushUrlIntoHistory(path) {
  1781. if(htmx.config.historyEnabled) history.pushState({htmx:true}, "", path);
  1782. currentPathForHistory = path;
  1783. }
  1784. function replaceUrlInHistory(path) {
  1785. if(htmx.config.historyEnabled) history.replaceState({htmx:true}, "", path);
  1786. currentPathForHistory = path;
  1787. }
  1788. function settleImmediately(tasks) {
  1789. forEach(tasks, function (task) {
  1790. task.call();
  1791. });
  1792. }
  1793. function loadHistoryFromServer(path) {
  1794. var request = new XMLHttpRequest();
  1795. var details = {path: path, xhr:request};
  1796. triggerEvent(getDocument().body, "htmx:historyCacheMiss", details);
  1797. request.open('GET', path, true);
  1798. request.setRequestHeader("HX-History-Restore-Request", "true");
  1799. request.onload = function () {
  1800. if (this.status >= 200 && this.status < 400) {
  1801. triggerEvent(getDocument().body, "htmx:historyCacheMissLoad", details);
  1802. var fragment = makeFragment(this.response);
  1803. // @ts-ignore
  1804. fragment = fragment.querySelector('[hx-history-elt],[data-hx-history-elt]') || fragment;
  1805. var historyElement = getHistoryElement();
  1806. var settleInfo = makeSettleInfo(historyElement);
  1807. // @ts-ignore
  1808. swapInnerHTML(historyElement, fragment, settleInfo)
  1809. settleImmediately(settleInfo.tasks);
  1810. currentPathForHistory = path;
  1811. triggerEvent(getDocument().body, "htmx:historyRestore", {path:path});
  1812. } else {
  1813. triggerErrorEvent(getDocument().body, "htmx:historyCacheMissLoadError", details);
  1814. }
  1815. };
  1816. request.send();
  1817. }
  1818. function restoreHistory(path) {
  1819. saveCurrentPageToHistory();
  1820. path = path || location.pathname+location.search;
  1821. var cached = getCachedHistory(path);
  1822. if (cached) {
  1823. var fragment = makeFragment(cached.content);
  1824. var historyElement = getHistoryElement();
  1825. var settleInfo = makeSettleInfo(historyElement);
  1826. swapInnerHTML(historyElement, fragment, settleInfo)
  1827. settleImmediately(settleInfo.tasks);
  1828. document.title = cached.title;
  1829. window.scrollTo(0, cached.scroll);
  1830. currentPathForHistory = path;
  1831. triggerEvent(getDocument().body, "htmx:historyRestore", {path:path});
  1832. } else {
  1833. if (htmx.config.refreshOnHistoryMiss) {
  1834. // @ts-ignore: optional parameter in reload() function throws error
  1835. window.location.reload(true);
  1836. } else {
  1837. loadHistoryFromServer(path);
  1838. }
  1839. }
  1840. }
  1841. function addRequestIndicatorClasses(elt) {
  1842. var indicators = findAttributeTargets(elt, 'hx-indicator');
  1843. if (indicators == null) {
  1844. indicators = [elt];
  1845. }
  1846. forEach(indicators, function (ic) {
  1847. ic.classList["add"].call(ic.classList, htmx.config.requestClass);
  1848. });
  1849. return indicators;
  1850. }
  1851. function removeRequestIndicatorClasses(indicators) {
  1852. forEach(indicators, function (ic) {
  1853. ic.classList["remove"].call(ic.classList, htmx.config.requestClass);
  1854. });
  1855. }
  1856. //====================================================================
  1857. // Input Value Processing
  1858. //====================================================================
  1859. function haveSeenNode(processed, elt) {
  1860. for (var i = 0; i < processed.length; i++) {
  1861. var node = processed[i];
  1862. if (node.isSameNode(elt)) {
  1863. return true;
  1864. }
  1865. }
  1866. return false;
  1867. }
  1868. function shouldInclude(elt) {
  1869. if(elt.name === "" || elt.name == null || elt.disabled) {
  1870. return false;
  1871. }
  1872. // ignore "submitter" types (see jQuery src/serialize.js)
  1873. if (elt.type === "button" || elt.type === "submit" || elt.tagName === "image" || elt.tagName === "reset" || elt.tagName === "file" ) {
  1874. return false;
  1875. }
  1876. if (elt.type === "checkbox" || elt.type === "radio" ) {
  1877. return elt.checked;
  1878. }
  1879. return true;
  1880. }
  1881. function processInputValue(processed, values, errors, elt, validate) {
  1882. if (elt == null || haveSeenNode(processed, elt)) {
  1883. return;
  1884. } else {
  1885. processed.push(elt);
  1886. }
  1887. if (shouldInclude(elt)) {
  1888. var name = getRawAttribute(elt,"name");
  1889. var value = elt.value;
  1890. if (elt.multiple) {
  1891. value = toArray(elt.querySelectorAll("option:checked")).map(function (e) { return e.value });
  1892. }
  1893. // include file inputs
  1894. if (elt.files) {
  1895. value = toArray(elt.files);
  1896. }
  1897. // This is a little ugly because both the current value of the named value in the form
  1898. // and the new value could be arrays, so we have to handle all four cases :/
  1899. if (name != null && value != null) {
  1900. var current = values[name];
  1901. if(current) {
  1902. if (Array.isArray(current)) {
  1903. if (Array.isArray(value)) {
  1904. values[name] = current.concat(value);
  1905. } else {
  1906. current.push(value);
  1907. }
  1908. } else {
  1909. if (Array.isArray(value)) {
  1910. values[name] = [current].concat(value);
  1911. } else {
  1912. values[name] = [current, value];
  1913. }
  1914. }
  1915. } else {
  1916. values[name] = value;
  1917. }
  1918. }
  1919. if (validate) {
  1920. validateElement(elt, errors);
  1921. }
  1922. }
  1923. if (matches(elt, 'form')) {
  1924. var inputs = elt.elements;
  1925. forEach(inputs, function(input) {
  1926. processInputValue(processed, values, errors, input, validate);
  1927. });
  1928. }
  1929. }
  1930. function validateElement(element, errors) {
  1931. if (element.willValidate) {
  1932. triggerEvent(element, "htmx:validation:validate")
  1933. if (!element.checkValidity()) {
  1934. errors.push({elt: element, message:element.validationMessage, validity:element.validity});
  1935. triggerEvent(element, "htmx:validation:failed", {message:element.validationMessage, validity:element.validity})
  1936. }
  1937. }
  1938. }
  1939. /**
  1940. * @param {HTMLElement} elt
  1941. * @param {string} verb
  1942. */
  1943. function getInputValues(elt, verb) {
  1944. var processed = [];
  1945. var values = {};
  1946. var formValues = {};
  1947. var errors = [];
  1948. var internalData = getInternalData(elt);
  1949. // only validate when form is directly submitted and novalidate or formnovalidate are not set
  1950. var validate = matches(elt, 'form') && elt.noValidate !== true;
  1951. if (internalData.lastButtonClicked) {
  1952. validate = validate && internalData.lastButtonClicked.formNoValidate !== true;
  1953. }
  1954. // for a non-GET include the closest form
  1955. if (verb !== 'get') {
  1956. processInputValue(processed, formValues, errors, closest(elt, 'form'), validate);
  1957. }
  1958. // include the element itself
  1959. processInputValue(processed, values, errors, elt, validate);
  1960. // if a button or submit was clicked last, include its value
  1961. if (internalData.lastButtonClicked) {
  1962. var name = getRawAttribute(internalData.lastButtonClicked,"name");
  1963. if (name) {
  1964. values[name] = internalData.lastButtonClicked.value;
  1965. }
  1966. }
  1967. // include any explicit includes
  1968. var includes = findAttributeTargets(elt, "hx-include");
  1969. forEach(includes, function(node) {
  1970. processInputValue(processed, values, errors, node, validate);
  1971. // if a non-form is included, include any input values within it
  1972. if (!matches(node, 'form')) {
  1973. forEach(node.querySelectorAll(INPUT_SELECTOR), function (descendant) {
  1974. processInputValue(processed, values, errors, descendant, validate);
  1975. })
  1976. }
  1977. });
  1978. // form values take precedence, overriding the regular values
  1979. values = mergeObjects(values, formValues);
  1980. return {errors:errors, values:values};
  1981. }
  1982. function appendParam(returnStr, name, realValue) {
  1983. if (returnStr !== "") {
  1984. returnStr += "&";
  1985. }
  1986. if (String(realValue) === "[object Object]") {
  1987. realValue = JSON.stringify(realValue);
  1988. }
  1989. var s = encodeURIComponent(realValue);
  1990. returnStr += encodeURIComponent(name) + "=" + s;
  1991. return returnStr;
  1992. }
  1993. function urlEncode(values) {
  1994. var returnStr = "";
  1995. for (var name in values) {
  1996. if (values.hasOwnProperty(name)) {
  1997. var value = values[name];
  1998. if (Array.isArray(value)) {
  1999. forEach(value, function(v) {
  2000. returnStr = appendParam(returnStr, name, v);
  2001. });
  2002. } else {
  2003. returnStr = appendParam(returnStr, name, value);
  2004. }
  2005. }
  2006. }
  2007. return returnStr;
  2008. }
  2009. function makeFormData(values) {
  2010. var formData = new FormData();
  2011. for (var name in values) {
  2012. if (values.hasOwnProperty(name)) {
  2013. var value = values[name];
  2014. if (Array.isArray(value)) {
  2015. forEach(value, function(v) {
  2016. formData.append(name, v);
  2017. });
  2018. } else {
  2019. formData.append(name, value);
  2020. }
  2021. }
  2022. }
  2023. return formData;
  2024. }
  2025. //====================================================================
  2026. // Ajax
  2027. //====================================================================
  2028. /**
  2029. * @param {HTMLElement} elt
  2030. * @param {HTMLElement} target
  2031. * @param {string} prompt
  2032. * @returns {Object} // TODO: Define/Improve HtmxHeaderSpecification
  2033. */
  2034. function getHeaders(elt, target, prompt) {
  2035. var headers = {
  2036. "HX-Request" : "true",
  2037. "HX-Trigger" : getRawAttribute(elt, "id"),
  2038. "HX-Trigger-Name" : getRawAttribute(elt, "name"),
  2039. "HX-Target" : getAttributeValue(target, "id"),
  2040. "HX-Current-URL" : getDocument().location.href,
  2041. }
  2042. getValuesForElement(elt, "hx-headers", false, headers)
  2043. if (prompt !== undefined) {
  2044. headers["HX-Prompt"] = prompt;
  2045. }
  2046. if (getInternalData(elt).boosted) {
  2047. headers["HX-Boosted"] = "true";
  2048. }
  2049. return headers;
  2050. }
  2051. /**
  2052. * filterValues takes an object containing form input values
  2053. * and returns a new object that only contains keys that are
  2054. * specified by the closest "hx-params" attribute
  2055. * @param {Object} inputValues
  2056. * @param {HTMLElement} elt
  2057. * @returns {Object}
  2058. */
  2059. function filterValues(inputValues, elt) {
  2060. var paramsValue = getClosestAttributeValue(elt, "hx-params");
  2061. if (paramsValue) {
  2062. if (paramsValue === "none") {
  2063. return {};
  2064. } else if (paramsValue === "*") {
  2065. return inputValues;
  2066. } else if(paramsValue.indexOf("not ") === 0) {
  2067. forEach(paramsValue.substr(4).split(","), function (name) {
  2068. name = name.trim();
  2069. delete inputValues[name];
  2070. });
  2071. return inputValues;
  2072. } else {
  2073. var newValues = {}
  2074. forEach(paramsValue.split(","), function (name) {
  2075. name = name.trim();
  2076. newValues[name] = inputValues[name];
  2077. });
  2078. return newValues;
  2079. }
  2080. } else {
  2081. return inputValues;
  2082. }
  2083. }
  2084. function isAnchorLink(elt) {
  2085. return getRawAttribute(elt, 'href') && getRawAttribute(elt, 'href').indexOf("#") >=0
  2086. }
  2087. /**
  2088. *
  2089. * @param {HTMLElement} elt
  2090. * @param {string} swapInfoOverride
  2091. * @returns {import("./htmx").HtmxSwapSpecification}
  2092. */
  2093. function getSwapSpecification(elt, swapInfoOverride) {
  2094. var swapInfo = swapInfoOverride ? swapInfoOverride : getClosestAttributeValue(elt, "hx-swap");
  2095. var swapSpec = {
  2096. "swapStyle" : getInternalData(elt).boosted ? 'innerHTML' : htmx.config.defaultSwapStyle,
  2097. "swapDelay" : htmx.config.defaultSwapDelay,
  2098. "settleDelay" : htmx.config.defaultSettleDelay
  2099. }
  2100. if (getInternalData(elt).boosted && !isAnchorLink(elt)) {
  2101. swapSpec["show"] = "top"
  2102. }
  2103. if (swapInfo) {
  2104. var split = splitOnWhitespace(swapInfo);
  2105. if (split.length > 0) {
  2106. swapSpec["swapStyle"] = split[0];
  2107. for (var i = 1; i < split.length; i++) {
  2108. var modifier = split[i];
  2109. if (modifier.indexOf("swap:") === 0) {
  2110. swapSpec["swapDelay"] = parseInterval(modifier.substr(5));
  2111. }
  2112. if (modifier.indexOf("settle:") === 0) {
  2113. swapSpec["settleDelay"] = parseInterval(modifier.substr(7));
  2114. }
  2115. if (modifier.indexOf("scroll:") === 0) {
  2116. var scrollSpec = modifier.substr(7);
  2117. var splitSpec = scrollSpec.split(":");
  2118. var scrollVal = splitSpec.pop();
  2119. var selectorVal = splitSpec.length > 0 ? splitSpec.join(":") : null;
  2120. swapSpec["scroll"] = scrollVal;
  2121. swapSpec["scrollTarget"] = selectorVal;
  2122. }
  2123. if (modifier.indexOf("show:") === 0) {
  2124. var showSpec = modifier.substr(5);
  2125. var splitSpec = showSpec.split(":");
  2126. var showVal = splitSpec.pop();
  2127. var selectorVal = splitSpec.length > 0 ? splitSpec.join(":") : null;
  2128. swapSpec["show"] = showVal;
  2129. swapSpec["showTarget"] = selectorVal;
  2130. }
  2131. if (modifier.indexOf("focus-scroll:") === 0) {
  2132. var focusScrollVal = modifier.substr("focus-scroll:".length);
  2133. swapSpec["focusScroll"] = focusScrollVal == "true";
  2134. }
  2135. }
  2136. }
  2137. }
  2138. return swapSpec;
  2139. }
  2140. function usesFormData(elt) {
  2141. return getClosestAttributeValue(elt, "hx-encoding") === "multipart/form-data" ||
  2142. (matches(elt, "form") && getRawAttribute(elt, 'enctype') === "multipart/form-data");
  2143. }
  2144. function encodeParamsForBody(xhr, elt, filteredParameters) {
  2145. var encodedParameters = null;
  2146. withExtensions(elt, function (extension) {
  2147. if (encodedParameters == null) {
  2148. encodedParameters = extension.encodeParameters(xhr, filteredParameters, elt);
  2149. }
  2150. });
  2151. if (encodedParameters != null) {
  2152. return encodedParameters;
  2153. } else {
  2154. if (usesFormData(elt)) {
  2155. return makeFormData(filteredParameters);
  2156. } else {
  2157. return urlEncode(filteredParameters);
  2158. }
  2159. }
  2160. }
  2161. /**
  2162. *
  2163. * @param {Element} target
  2164. * @returns {import("./htmx").HtmxSettleInfo}
  2165. */
  2166. function makeSettleInfo(target) {
  2167. return {tasks: [], elts: [target]};
  2168. }
  2169. function updateScrollState(content, swapSpec) {
  2170. var first = content[0];
  2171. var last = content[content.length - 1];
  2172. if (swapSpec.scroll) {
  2173. var target = null;
  2174. if (swapSpec.scrollTarget) {
  2175. target = querySelectorExt(first, swapSpec.scrollTarget);
  2176. }
  2177. if (swapSpec.scroll === "top" && (first || target)) {
  2178. target = target || first;
  2179. target.scrollTop = 0;
  2180. }
  2181. if (swapSpec.scroll === "bottom" && (last || target)) {
  2182. target = target || last;
  2183. target.scrollTop = target.scrollHeight;
  2184. }
  2185. }
  2186. if (swapSpec.show) {
  2187. var target = null;
  2188. if (swapSpec.showTarget) {
  2189. var targetStr = swapSpec.showTarget;
  2190. if (swapSpec.showTarget === "window") {
  2191. targetStr = "body";
  2192. }
  2193. target = querySelectorExt(first, targetStr);
  2194. }
  2195. if (swapSpec.show === "top" && (first || target)) {
  2196. target = target || first;
  2197. target.scrollIntoView({block:'start', behavior: htmx.config.scrollBehavior});
  2198. }
  2199. if (swapSpec.show === "bottom" && (last || target)) {
  2200. target = target || last;
  2201. target.scrollIntoView({block:'end', behavior: htmx.config.scrollBehavior});
  2202. }
  2203. }
  2204. }
  2205. /**
  2206. * @param {HTMLElement} elt
  2207. * @param {string} attr
  2208. * @param {boolean=} evalAsDefault
  2209. * @param {Object=} values
  2210. * @returns {Object}
  2211. */
  2212. function getValuesForElement(elt, attr, evalAsDefault, values) {
  2213. if (values == null) {
  2214. values = {};
  2215. }
  2216. if (elt == null) {
  2217. return values;
  2218. }
  2219. var attributeValue = getAttributeValue(elt, attr);
  2220. if (attributeValue) {
  2221. var str = attributeValue.trim();
  2222. var evaluateValue = evalAsDefault;
  2223. if (str.indexOf("javascript:") === 0) {
  2224. str = str.substr(11);
  2225. evaluateValue = true;
  2226. } else if (str.indexOf("js:") === 0) {
  2227. str = str.substr(3);
  2228. evaluateValue = true;
  2229. }
  2230. if (str.indexOf('{') !== 0) {
  2231. str = "{" + str + "}";
  2232. }
  2233. var varsValues;
  2234. if (evaluateValue) {
  2235. varsValues = maybeEval(elt,function () {return Function("return (" + str + ")")();}, {});
  2236. } else {
  2237. varsValues = parseJSON(str);
  2238. }
  2239. for (var key in varsValues) {
  2240. if (varsValues.hasOwnProperty(key)) {
  2241. if (values[key] == null) {
  2242. values[key] = varsValues[key];
  2243. }
  2244. }
  2245. }
  2246. }
  2247. return getValuesForElement(parentElt(elt), attr, evalAsDefault, values);
  2248. }
  2249. function maybeEval(elt, toEval, defaultVal) {
  2250. if (htmx.config.allowEval) {
  2251. return toEval();
  2252. } else {
  2253. triggerErrorEvent(elt, 'htmx:evalDisallowedError');
  2254. return defaultVal;
  2255. }
  2256. }
  2257. /**
  2258. * @param {HTMLElement} elt
  2259. * @param {*} expressionVars
  2260. * @returns
  2261. */
  2262. function getHXVarsForElement(elt, expressionVars) {
  2263. return getValuesForElement(elt, "hx-vars", true, expressionVars);
  2264. }
  2265. /**
  2266. * @param {HTMLElement} elt
  2267. * @param {*} expressionVars
  2268. * @returns
  2269. */
  2270. function getHXValsForElement(elt, expressionVars) {
  2271. return getValuesForElement(elt, "hx-vals", false, expressionVars);
  2272. }
  2273. /**
  2274. * @param {HTMLElement} elt
  2275. * @returns {Object}
  2276. */
  2277. function getExpressionVars(elt) {
  2278. return mergeObjects(getHXVarsForElement(elt), getHXValsForElement(elt));
  2279. }
  2280. function safelySetHeaderValue(xhr, header, headerValue) {
  2281. if (headerValue !== null) {
  2282. try {
  2283. xhr.setRequestHeader(header, headerValue);
  2284. } catch (e) {
  2285. // On an exception, try to set the header URI encoded instead
  2286. xhr.setRequestHeader(header, encodeURIComponent(headerValue));
  2287. xhr.setRequestHeader(header + "-URI-AutoEncoded", "true");
  2288. }
  2289. }
  2290. }
  2291. function getPathFromResponse(xhr) {
  2292. // NB: IE11 does not support this stuff
  2293. if (xhr.responseURL && typeof(URL) !== "undefined") {
  2294. try {
  2295. var url = new URL(xhr.responseURL);
  2296. return url.pathname + url.search;
  2297. } catch (e) {
  2298. triggerErrorEvent(getDocument().body, "htmx:badResponseUrl", {url: xhr.responseURL});
  2299. }
  2300. }
  2301. }
  2302. function hasHeader(xhr, regexp) {
  2303. return xhr.getAllResponseHeaders().match(regexp);
  2304. }
  2305. function ajaxHelper(verb, path, context) {
  2306. verb = verb.toLowerCase();
  2307. if (context) {
  2308. if (context instanceof Element || isType(context, 'String')) {
  2309. return issueAjaxRequest(verb, path, null, null, {
  2310. targetOverride: resolveTarget(context),
  2311. returnPromise: true
  2312. });
  2313. } else {
  2314. return issueAjaxRequest(verb, path, resolveTarget(context.source), context.event,
  2315. {
  2316. handler : context.handler,
  2317. headers : context.headers,
  2318. values : context.values,
  2319. targetOverride: resolveTarget(context.target),
  2320. swapOverride: context.swap,
  2321. returnPromise: true
  2322. });
  2323. }
  2324. } else {
  2325. return issueAjaxRequest(verb, path, null, null, {
  2326. returnPromise: true
  2327. });
  2328. }
  2329. }
  2330. function hierarchyForElt(elt) {
  2331. var arr = [];
  2332. while (elt) {
  2333. arr.push(elt);
  2334. elt = elt.parentElement;
  2335. }
  2336. return arr;
  2337. }
  2338. function issueAjaxRequest(verb, path, elt, event, etc) {
  2339. var resolve = null;
  2340. var reject = null;
  2341. etc = etc != null ? etc : {};
  2342. if(etc.returnPromise && typeof Promise !== "undefined"){
  2343. var promise = new Promise(function (_resolve, _reject) {
  2344. resolve = _resolve;
  2345. reject = _reject;
  2346. });
  2347. }
  2348. if(elt == null) {
  2349. elt = getDocument().body;
  2350. }
  2351. var responseHandler = etc.handler || handleAjaxResponse;
  2352. if (!bodyContains(elt)) {
  2353. return; // do not issue requests for elements removed from the DOM
  2354. }
  2355. var target = etc.targetOverride || getTarget(elt);
  2356. if (target == null || target == DUMMY_ELT) {
  2357. triggerErrorEvent(elt, 'htmx:targetError', {target: getAttributeValue(elt, "hx-target")});
  2358. return;
  2359. }
  2360. var syncElt = elt;
  2361. var eltData = getInternalData(elt);
  2362. var syncStrategy = getClosestAttributeValue(elt, "hx-sync");
  2363. var queueStrategy = null;
  2364. var abortable = false;
  2365. if (syncStrategy) {
  2366. var syncStrings = syncStrategy.split(":");
  2367. var selector = syncStrings[0].trim();
  2368. if (selector === "this") {
  2369. syncElt = findThisElement(elt, 'hx-sync');
  2370. } else {
  2371. syncElt = querySelectorExt(elt, selector);
  2372. }
  2373. // default to the drop strategy
  2374. syncStrategy = (syncStrings[1] || 'drop').trim();
  2375. eltData = getInternalData(syncElt);
  2376. if (syncStrategy === "drop" && eltData.xhr && eltData.abortable !== true) {
  2377. return;
  2378. } else if (syncStrategy === "abort") {
  2379. if (eltData.xhr) {
  2380. return;
  2381. } else {
  2382. abortable = true;
  2383. }
  2384. } else if (syncStrategy === "replace") {
  2385. triggerEvent(syncElt, 'htmx:abort'); // abort the current request and continue
  2386. } else if (syncStrategy.indexOf("queue") === 0) {
  2387. var queueStrArray = syncStrategy.split(" ");
  2388. queueStrategy = (queueStrArray[1] || "last").trim();
  2389. }
  2390. }
  2391. if (eltData.xhr) {
  2392. if (eltData.abortable) {
  2393. triggerEvent(syncElt, 'htmx:abort'); // abort the current request and continue
  2394. } else {
  2395. if(queueStrategy == null){
  2396. if (event) {
  2397. var eventData = getInternalData(event);
  2398. if (eventData && eventData.triggerSpec && eventData.triggerSpec.queue) {
  2399. queueStrategy = eventData.triggerSpec.queue;
  2400. }
  2401. }
  2402. if (queueStrategy == null) {
  2403. queueStrategy = "last";
  2404. }
  2405. }
  2406. if (eltData.queuedRequests == null) {
  2407. eltData.queuedRequests = [];
  2408. }
  2409. if (queueStrategy === "first" && eltData.queuedRequests.length === 0) {
  2410. eltData.queuedRequests.push(function () {
  2411. issueAjaxRequest(verb, path, elt, event, etc)
  2412. });
  2413. } else if (queueStrategy === "all") {
  2414. eltData.queuedRequests.push(function () {
  2415. issueAjaxRequest(verb, path, elt, event, etc)
  2416. });
  2417. } else if (queueStrategy === "last") {
  2418. eltData.queuedRequests = []; // dump existing queue
  2419. eltData.queuedRequests.push(function () {
  2420. issueAjaxRequest(verb, path, elt, event, etc)
  2421. });
  2422. }
  2423. return;
  2424. }
  2425. }
  2426. var xhr = new XMLHttpRequest();
  2427. eltData.xhr = xhr;
  2428. eltData.abortable = abortable;
  2429. var endRequestLock = function(){
  2430. eltData.xhr = null;
  2431. eltData.abortable = false;
  2432. if (eltData.queuedRequests != null &&
  2433. eltData.queuedRequests.length > 0) {
  2434. var queuedRequest = eltData.queuedRequests.shift();
  2435. queuedRequest();
  2436. }
  2437. }
  2438. var promptQuestion = getClosestAttributeValue(elt, "hx-prompt");
  2439. if (promptQuestion) {
  2440. var promptResponse = prompt(promptQuestion);
  2441. // prompt returns null if cancelled and empty string if accepted with no entry
  2442. if (promptResponse === null ||
  2443. !triggerEvent(elt, 'htmx:prompt', {prompt: promptResponse, target:target})) {
  2444. maybeCall(resolve);
  2445. endRequestLock();
  2446. return promise;
  2447. }
  2448. }
  2449. var confirmQuestion = getClosestAttributeValue(elt, "hx-confirm");
  2450. if (confirmQuestion) {
  2451. if(!confirm(confirmQuestion)) {
  2452. maybeCall(resolve);
  2453. endRequestLock()
  2454. return promise;
  2455. }
  2456. }
  2457. var headers = getHeaders(elt, target, promptResponse);
  2458. if (etc.headers) {
  2459. headers = mergeObjects(headers, etc.headers);
  2460. }
  2461. var results = getInputValues(elt, verb);
  2462. var errors = results.errors;
  2463. var rawParameters = results.values;
  2464. if (etc.values) {
  2465. rawParameters = mergeObjects(rawParameters, etc.values);
  2466. }
  2467. var expressionVars = getExpressionVars(elt);
  2468. var allParameters = mergeObjects(rawParameters, expressionVars);
  2469. var filteredParameters = filterValues(allParameters, elt);
  2470. if (verb !== 'get' && !usesFormData(elt)) {
  2471. headers['Content-Type'] = 'application/x-www-form-urlencoded';
  2472. }
  2473. // behavior of anchors w/ empty href is to use the current URL
  2474. if (path == null || path === "") {
  2475. path = getDocument().location.href;
  2476. }
  2477. var requestAttrValues = getValuesForElement(elt, 'hx-request');
  2478. var requestConfig = {
  2479. parameters: filteredParameters,
  2480. unfilteredParameters: allParameters,
  2481. headers:headers,
  2482. target:target,
  2483. verb:verb,
  2484. errors:errors,
  2485. withCredentials: etc.credentials || requestAttrValues.credentials || htmx.config.withCredentials,
  2486. timeout: etc.timeout || requestAttrValues.timeout || htmx.config.timeout,
  2487. path:path,
  2488. triggeringEvent:event
  2489. };
  2490. if(!triggerEvent(elt, 'htmx:configRequest', requestConfig)){
  2491. maybeCall(resolve);
  2492. endRequestLock();
  2493. return promise;
  2494. }
  2495. // copy out in case the object was overwritten
  2496. path = requestConfig.path;
  2497. verb = requestConfig.verb;
  2498. headers = requestConfig.headers;
  2499. filteredParameters = requestConfig.parameters;
  2500. errors = requestConfig.errors;
  2501. if(errors && errors.length > 0){
  2502. triggerEvent(elt, 'htmx:validation:halted', requestConfig)
  2503. maybeCall(resolve);
  2504. endRequestLock();
  2505. return promise;
  2506. }
  2507. var splitPath = path.split("#");
  2508. var pathNoAnchor = splitPath[0];
  2509. var anchor = splitPath[1];
  2510. var finalPathForGet = null;
  2511. if (verb === 'get') {
  2512. finalPathForGet = pathNoAnchor;
  2513. var values = Object.keys(filteredParameters).length !== 0;
  2514. if (values) {
  2515. if (finalPathForGet.indexOf("?") < 0) {
  2516. finalPathForGet += "?";
  2517. } else {
  2518. finalPathForGet += "&";
  2519. }
  2520. finalPathForGet += urlEncode(filteredParameters);
  2521. if (anchor) {
  2522. finalPathForGet += "#" + anchor;
  2523. }
  2524. }
  2525. xhr.open('GET', finalPathForGet, true);
  2526. } else {
  2527. xhr.open(verb.toUpperCase(), path, true);
  2528. }
  2529. xhr.overrideMimeType("text/html");
  2530. xhr.withCredentials = requestConfig.withCredentials;
  2531. xhr.timeout = requestConfig.timeout;
  2532. // request headers
  2533. if (requestAttrValues.noHeaders) {
  2534. // ignore all headers
  2535. } else {
  2536. for (var header in headers) {
  2537. if (headers.hasOwnProperty(header)) {
  2538. var headerValue = headers[header];
  2539. safelySetHeaderValue(xhr, header, headerValue);
  2540. }
  2541. }
  2542. }
  2543. var responseInfo = {
  2544. xhr: xhr, target: target, requestConfig: requestConfig, etc: etc,
  2545. pathInfo: {
  2546. requestPath: path,
  2547. finalRequestPath: finalPathForGet || path,
  2548. anchor: anchor
  2549. }
  2550. };
  2551. xhr.onload = function () {
  2552. try {
  2553. var hierarchy = hierarchyForElt(elt);
  2554. responseInfo.pathInfo.responsePath = getPathFromResponse(xhr);
  2555. responseHandler(elt, responseInfo);
  2556. removeRequestIndicatorClasses(indicators);
  2557. triggerEvent(elt, 'htmx:afterRequest', responseInfo);
  2558. triggerEvent(elt, 'htmx:afterOnLoad', responseInfo);
  2559. // if the body no longer contains the element, trigger the even on the closest parent
  2560. // remaining in the DOM
  2561. if (!bodyContains(elt)) {
  2562. var secondaryTriggerElt = null;
  2563. while (hierarchy.length > 0 && secondaryTriggerElt == null) {
  2564. var parentEltInHierarchy = hierarchy.shift();
  2565. if (bodyContains(parentEltInHierarchy)) {
  2566. secondaryTriggerElt = parentEltInHierarchy;
  2567. }
  2568. }
  2569. if (secondaryTriggerElt) {
  2570. triggerEvent(secondaryTriggerElt, 'htmx:afterRequest', responseInfo);
  2571. triggerEvent(secondaryTriggerElt, 'htmx:afterOnLoad', responseInfo);
  2572. }
  2573. }
  2574. maybeCall(resolve);
  2575. endRequestLock();
  2576. } catch (e) {
  2577. triggerErrorEvent(elt, 'htmx:onLoadError', mergeObjects({error:e}, responseInfo));
  2578. throw e;
  2579. }
  2580. }
  2581. xhr.onerror = function () {
  2582. removeRequestIndicatorClasses(indicators);
  2583. triggerErrorEvent(elt, 'htmx:afterRequest', responseInfo);
  2584. triggerErrorEvent(elt, 'htmx:sendError', responseInfo);
  2585. maybeCall(reject);
  2586. endRequestLock();
  2587. }
  2588. xhr.onabort = function() {
  2589. removeRequestIndicatorClasses(indicators);
  2590. triggerErrorEvent(elt, 'htmx:afterRequest', responseInfo);
  2591. triggerErrorEvent(elt, 'htmx:sendAbort', responseInfo);
  2592. maybeCall(reject);
  2593. endRequestLock();
  2594. }
  2595. xhr.ontimeout = function() {
  2596. removeRequestIndicatorClasses(indicators);
  2597. triggerErrorEvent(elt, 'htmx:afterRequest', responseInfo);
  2598. triggerErrorEvent(elt, 'htmx:timeout', responseInfo);
  2599. maybeCall(reject);
  2600. endRequestLock();
  2601. }
  2602. if(!triggerEvent(elt, 'htmx:beforeRequest', responseInfo)){
  2603. maybeCall(resolve);
  2604. endRequestLock()
  2605. return promise
  2606. }
  2607. var indicators = addRequestIndicatorClasses(elt);
  2608. forEach(['loadstart', 'loadend', 'progress', 'abort'], function(eventName) {
  2609. forEach([xhr, xhr.upload], function (target) {
  2610. target.addEventListener(eventName, function(event){
  2611. triggerEvent(elt, "htmx:xhr:" + eventName, {
  2612. lengthComputable:event.lengthComputable,
  2613. loaded:event.loaded,
  2614. total:event.total
  2615. });
  2616. })
  2617. });
  2618. });
  2619. triggerEvent(elt, 'htmx:beforeSend', responseInfo);
  2620. xhr.send(verb === 'get' ? null : encodeParamsForBody(xhr, elt, filteredParameters));
  2621. return promise;
  2622. }
  2623. function determineHistoryUpdates(elt, responseInfo) {
  2624. var xhr = responseInfo.xhr;
  2625. //===========================================
  2626. // First consult response headers
  2627. //===========================================
  2628. var pathFromHeaders = null;
  2629. var typeFromHeaders = null;
  2630. if (hasHeader(xhr,/HX-Push:/i)) {
  2631. pathFromHeaders = xhr.getResponseHeader("HX-Push");
  2632. typeFromHeaders = "push";
  2633. } else if (hasHeader(xhr,/HX-Push-Url:/i)) {
  2634. pathFromHeaders = xhr.getResponseHeader("HX-Push-Url");
  2635. typeFromHeaders = "push";
  2636. } else if (hasHeader(xhr,/HX-Replace-Url:/i)) {
  2637. pathFromHeaders = xhr.getResponseHeader("HX-Replace-Url");
  2638. typeFromHeaders = "replace";
  2639. }
  2640. // if there was a response header, that has priority
  2641. if (pathFromHeaders) {
  2642. if (pathFromHeaders === "false") {
  2643. return {}
  2644. } else {
  2645. return {
  2646. type: typeFromHeaders,
  2647. path : pathFromHeaders
  2648. }
  2649. }
  2650. }
  2651. //===========================================
  2652. // Next resolve via DOM values
  2653. //===========================================
  2654. var requestPath = responseInfo.pathInfo.finalRequestPath;
  2655. var responsePath = responseInfo.pathInfo.responsePath;
  2656. var pushUrl = getClosestAttributeValue(elt, "hx-push-url");
  2657. var replaceUrl = getClosestAttributeValue(elt, "hx-replace-url");
  2658. var elementIsBoosted = getInternalData(elt).boosted;
  2659. var saveType = null;
  2660. var path = null;
  2661. if (pushUrl) {
  2662. saveType = "push";
  2663. path = pushUrl;
  2664. } else if (replaceUrl) {
  2665. saveType = "replace";
  2666. path = replaceUrl;
  2667. } else if (elementIsBoosted) {
  2668. saveType = "push";
  2669. path = responsePath || requestPath; // if there is no response path, go with the original request path
  2670. }
  2671. if (path) {
  2672. // false indicates no push, return empty object
  2673. if (path === "false") {
  2674. return {};
  2675. }
  2676. // true indicates we want to follow wherever the server ended up sending us
  2677. if (path === "true") {
  2678. path = responsePath || requestPath; // if there is no response path, go with the original request path
  2679. }
  2680. // restore any anchor associated with the request
  2681. if (responseInfo.pathInfo.anchor &&
  2682. path.indexOf("#") === -1) {
  2683. path = path + "#" + responseInfo.pathInfo.anchor;
  2684. }
  2685. return {
  2686. type:saveType,
  2687. path: path
  2688. }
  2689. } else {
  2690. return {};
  2691. }
  2692. }
  2693. function handleAjaxResponse(elt, responseInfo) {
  2694. var xhr = responseInfo.xhr;
  2695. var target = responseInfo.target;
  2696. var etc = responseInfo.etc;
  2697. if (!triggerEvent(elt, 'htmx:beforeOnLoad', responseInfo)) return;
  2698. if (hasHeader(xhr, /HX-Trigger:/i)) {
  2699. handleTrigger(xhr, "HX-Trigger", elt);
  2700. }
  2701. if (hasHeader(xhr, /HX-Location:/i)) {
  2702. saveCurrentPageToHistory();
  2703. var redirectPath = xhr.getResponseHeader("HX-Location");
  2704. var swapSpec;
  2705. if (redirectPath.indexOf("{") === 0) {
  2706. swapSpec = parseJSON(redirectPath);
  2707. // what's the best way to throw an error if the user didn't include this
  2708. redirectPath = swapSpec['path'];
  2709. delete swapSpec['path'];
  2710. }
  2711. ajaxHelper('GET', redirectPath, swapSpec).then(() =>{
  2712. pushUrlIntoHistory(redirectPath);
  2713. });
  2714. return;
  2715. }
  2716. if (hasHeader(xhr, /HX-Redirect:/i)) {
  2717. location.href = xhr.getResponseHeader("HX-Redirect");
  2718. return;
  2719. }
  2720. if (hasHeader(xhr,/HX-Refresh:/i)) {
  2721. if ("true" === xhr.getResponseHeader("HX-Refresh")) {
  2722. location.reload();
  2723. return;
  2724. }
  2725. }
  2726. if (hasHeader(xhr,/HX-Retarget:/i)) {
  2727. responseInfo.target = getDocument().querySelector(xhr.getResponseHeader("HX-Retarget"));
  2728. }
  2729. var historyUpdate = determineHistoryUpdates(elt, responseInfo);
  2730. // by default htmx only swaps on 200 return codes and does not swap
  2731. // on 204 'No Content'
  2732. // this can be ovverriden by responding to the htmx:beforeSwap event and
  2733. // overriding the detail.shouldSwap property
  2734. var shouldSwap = xhr.status >= 200 && xhr.status < 400 && xhr.status !== 204;
  2735. var serverResponse = xhr.response;
  2736. var isError = xhr.status >= 400;
  2737. var beforeSwapDetails = mergeObjects({shouldSwap: shouldSwap, serverResponse:serverResponse, isError:isError}, responseInfo);
  2738. if (!triggerEvent(target, 'htmx:beforeSwap', beforeSwapDetails)) return;
  2739. target = beforeSwapDetails.target; // allow re-targeting
  2740. serverResponse = beforeSwapDetails.serverResponse; // allow updating content
  2741. isError = beforeSwapDetails.isError; // allow updating error
  2742. responseInfo.failed = isError; // Make failed property available to response events
  2743. responseInfo.successful = !isError; // Make successful property available to response events
  2744. if (beforeSwapDetails.shouldSwap) {
  2745. if (xhr.status === 286) {
  2746. cancelPolling(elt);
  2747. }
  2748. withExtensions(elt, function (extension) {
  2749. serverResponse = extension.transformResponse(serverResponse, xhr, elt);
  2750. });
  2751. // Save current page if there will be a history update
  2752. if (historyUpdate.type) {
  2753. saveCurrentPageToHistory();
  2754. }
  2755. var swapOverride = etc.swapOverride;
  2756. if (hasHeader(xhr,/HX-Reswap:/i)) {
  2757. swapOverride = xhr.getResponseHeader("HX-Reswap");
  2758. }
  2759. var swapSpec = getSwapSpecification(elt, swapOverride);
  2760. target.classList.add(htmx.config.swappingClass);
  2761. var doSwap = function () {
  2762. try {
  2763. var activeElt = document.activeElement;
  2764. var selectionInfo = {};
  2765. try {
  2766. selectionInfo = {
  2767. elt: activeElt,
  2768. // @ts-ignore
  2769. start: activeElt ? activeElt.selectionStart : null,
  2770. // @ts-ignore
  2771. end: activeElt ? activeElt.selectionEnd : null
  2772. };
  2773. } catch (e) {
  2774. // safari issue - see https://github.com/microsoft/playwright/issues/5894
  2775. }
  2776. var settleInfo = makeSettleInfo(target);
  2777. selectAndSwap(swapSpec.swapStyle, target, elt, serverResponse, settleInfo);
  2778. if (selectionInfo.elt &&
  2779. !bodyContains(selectionInfo.elt) &&
  2780. selectionInfo.elt.id) {
  2781. var newActiveElt = document.getElementById(selectionInfo.elt.id);
  2782. var focusOptions = { preventScroll: swapSpec.focusScroll !== undefined ? !swapSpec.focusScroll : !htmx.config.defaultFocusScroll };
  2783. if (newActiveElt) {
  2784. // @ts-ignore
  2785. if (selectionInfo.start && newActiveElt.setSelectionRange) {
  2786. // @ts-ignore
  2787. newActiveElt.setSelectionRange(selectionInfo.start, selectionInfo.end);
  2788. }
  2789. newActiveElt.focus(focusOptions);
  2790. }
  2791. }
  2792. target.classList.remove(htmx.config.swappingClass);
  2793. forEach(settleInfo.elts, function (elt) {
  2794. if (elt.classList) {
  2795. elt.classList.add(htmx.config.settlingClass);
  2796. }
  2797. triggerEvent(elt, 'htmx:afterSwap', responseInfo);
  2798. });
  2799. if (hasHeader(xhr, /HX-Trigger-After-Swap:/i)) {
  2800. var finalElt = elt;
  2801. if (!bodyContains(elt)) {
  2802. finalElt = getDocument().body;
  2803. }
  2804. handleTrigger(xhr, "HX-Trigger-After-Swap", finalElt);
  2805. }
  2806. var doSettle = function () {
  2807. forEach(settleInfo.tasks, function (task) {
  2808. task.call();
  2809. });
  2810. forEach(settleInfo.elts, function (elt) {
  2811. if (elt.classList) {
  2812. elt.classList.remove(htmx.config.settlingClass);
  2813. }
  2814. triggerEvent(elt, 'htmx:afterSettle', responseInfo);
  2815. });
  2816. // if we need to save history, do so
  2817. if (historyUpdate.type) {
  2818. if (historyUpdate.type === "push") {
  2819. pushUrlIntoHistory(historyUpdate.path);
  2820. triggerEvent(getDocument().body, 'htmx:pushedIntoHistory', {path: historyUpdate.path});
  2821. } else {
  2822. replaceUrlInHistory(historyUpdate.path);
  2823. triggerEvent(getDocument().body, 'htmx:replacedInHistory', {path: historyUpdate.path});
  2824. }
  2825. }
  2826. if (responseInfo.pathInfo.anchor) {
  2827. var anchorTarget = find("#" + responseInfo.pathInfo.anchor);
  2828. if(anchorTarget) {
  2829. anchorTarget.scrollIntoView({block:'start', behavior: "auto"});
  2830. }
  2831. }
  2832. if(settleInfo.title) {
  2833. var titleElt = find("title");
  2834. if(titleElt) {
  2835. titleElt.innerHTML = settleInfo.title;
  2836. } else {
  2837. window.document.title = settleInfo.title;
  2838. }
  2839. }
  2840. updateScrollState(settleInfo.elts, swapSpec);
  2841. if (hasHeader(xhr, /HX-Trigger-After-Settle:/i)) {
  2842. var finalElt = elt;
  2843. if (!bodyContains(elt)) {
  2844. finalElt = getDocument().body;
  2845. }
  2846. handleTrigger(xhr, "HX-Trigger-After-Settle", finalElt);
  2847. }
  2848. }
  2849. if (swapSpec.settleDelay > 0) {
  2850. setTimeout(doSettle, swapSpec.settleDelay)
  2851. } else {
  2852. doSettle();
  2853. }
  2854. } catch (e) {
  2855. triggerErrorEvent(elt, 'htmx:swapError', responseInfo);
  2856. throw e;
  2857. }
  2858. };
  2859. if (swapSpec.swapDelay > 0) {
  2860. setTimeout(doSwap, swapSpec.swapDelay)
  2861. } else {
  2862. doSwap();
  2863. }
  2864. }
  2865. if (isError) {
  2866. triggerErrorEvent(elt, 'htmx:responseError', mergeObjects({error: "Response Status Error Code " + xhr.status + " from " + responseInfo.pathInfo.path}, responseInfo));
  2867. }
  2868. }
  2869. //====================================================================
  2870. // Extensions API
  2871. //====================================================================
  2872. /** @type {Object<string, import("./htmx").HtmxExtension>} */
  2873. var extensions = {};
  2874. /**
  2875. * extensionBase defines the default functions for all extensions.
  2876. * @returns {import("./htmx").HtmxExtension}
  2877. */
  2878. function extensionBase() {
  2879. return {
  2880. init: function(api) {return null;},
  2881. onEvent : function(name, evt) {return true;},
  2882. transformResponse : function(text, xhr, elt) {return text;},
  2883. isInlineSwap : function(swapStyle) {return false;},
  2884. handleSwap : function(swapStyle, target, fragment, settleInfo) {return false;},
  2885. encodeParameters : function(xhr, parameters, elt) {return null;}
  2886. }
  2887. }
  2888. /**
  2889. * defineExtension initializes the extension and adds it to the htmx registry
  2890. *
  2891. * @param {string} name
  2892. * @param {import("./htmx").HtmxExtension} extension
  2893. */
  2894. function defineExtension(name, extension) {
  2895. if(extension.init) {
  2896. extension.init(internalAPI)
  2897. }
  2898. extensions[name] = mergeObjects(extensionBase(), extension);
  2899. }
  2900. /**
  2901. * removeExtension removes an extension from the htmx registry
  2902. *
  2903. * @param {string} name
  2904. */
  2905. function removeExtension(name) {
  2906. delete extensions[name];
  2907. }
  2908. /**
  2909. * getExtensions searches up the DOM tree to return all extensions that can be applied to a given element
  2910. *
  2911. * @param {HTMLElement} elt
  2912. * @param {import("./htmx").HtmxExtension[]=} extensionsToReturn
  2913. * @param {import("./htmx").HtmxExtension[]=} extensionsToIgnore
  2914. */
  2915. function getExtensions(elt, extensionsToReturn, extensionsToIgnore) {
  2916. if (elt == undefined) {
  2917. return extensionsToReturn;
  2918. }
  2919. if (extensionsToReturn == undefined) {
  2920. extensionsToReturn = [];
  2921. }
  2922. if (extensionsToIgnore == undefined) {
  2923. extensionsToIgnore = [];
  2924. }
  2925. var extensionsForElement = getAttributeValue(elt, "hx-ext");
  2926. if (extensionsForElement) {
  2927. forEach(extensionsForElement.split(","), function(extensionName){
  2928. extensionName = extensionName.replace(/ /g, '');
  2929. if (extensionName.slice(0, 7) == "ignore:") {
  2930. extensionsToIgnore.push(extensionName.slice(7));
  2931. return;
  2932. }
  2933. if (extensionsToIgnore.indexOf(extensionName) < 0) {
  2934. var extension = extensions[extensionName];
  2935. if (extension && extensionsToReturn.indexOf(extension) < 0) {
  2936. extensionsToReturn.push(extension);
  2937. }
  2938. }
  2939. });
  2940. }
  2941. return getExtensions(parentElt(elt), extensionsToReturn, extensionsToIgnore);
  2942. }
  2943. //====================================================================
  2944. // Initialization
  2945. //====================================================================
  2946. function ready(fn) {
  2947. if (getDocument().readyState !== 'loading') {
  2948. fn();
  2949. } else {
  2950. getDocument().addEventListener('DOMContentLoaded', fn);
  2951. }
  2952. }
  2953. function insertIndicatorStyles() {
  2954. if (htmx.config.includeIndicatorStyles !== false) {
  2955. getDocument().head.insertAdjacentHTML("beforeend",
  2956. "<style>\
  2957. ." + htmx.config.indicatorClass + "{opacity:0;transition: opacity 200ms ease-in;}\
  2958. ." + htmx.config.requestClass + " ." + htmx.config.indicatorClass + "{opacity:1}\
  2959. ." + htmx.config.requestClass + "." + htmx.config.indicatorClass + "{opacity:1}\
  2960. </style>");
  2961. }
  2962. }
  2963. function getMetaConfig() {
  2964. var element = getDocument().querySelector('meta[name="htmx-config"]');
  2965. if (element) {
  2966. // @ts-ignore
  2967. return parseJSON(element.content);
  2968. } else {
  2969. return null;
  2970. }
  2971. }
  2972. function mergeMetaConfig() {
  2973. var metaConfig = getMetaConfig();
  2974. if (metaConfig) {
  2975. htmx.config = mergeObjects(htmx.config , metaConfig)
  2976. }
  2977. }
  2978. // initialize the document
  2979. ready(function () {
  2980. mergeMetaConfig();
  2981. insertIndicatorStyles();
  2982. var body = getDocument().body;
  2983. processNode(body);
  2984. var restoredElts = getDocument().querySelectorAll(
  2985. "[hx-trigger='restored'],[data-hx-trigger='restored']"
  2986. );
  2987. body.addEventListener("htmx:abort", function (evt) {
  2988. var target = evt.target;
  2989. var internalData = getInternalData(target);
  2990. if (internalData && internalData.xhr) {
  2991. internalData.xhr.abort();
  2992. }
  2993. });
  2994. window.onpopstate = function (event) {
  2995. if (event.state && event.state.htmx) {
  2996. restoreHistory();
  2997. forEach(restoredElts, function(elt){
  2998. triggerEvent(elt, 'htmx:restored', {
  2999. 'document': getDocument(),
  3000. 'triggerEvent': triggerEvent
  3001. });
  3002. });
  3003. }
  3004. };
  3005. setTimeout(function () {
  3006. triggerEvent(body, 'htmx:load', {}); // give ready handlers a chance to load up before firing this event
  3007. }, 0);
  3008. })
  3009. return htmx;
  3010. }
  3011. )()
  3012. }));