diff --git a/db.sql b/db.sql new file mode 100644 index 0000000..2197ba9 --- /dev/null +++ b/db.sql @@ -0,0 +1,185 @@ +-- -------------------------------------------------------- +-- Host: 10.10.5.31 +-- Server-Version: 8.0.42-0ubuntu0.24.04.1 - (Ubuntu) +-- Server-Betriebssystem: Linux +-- HeidiSQL Version: 12.10.0.7000 +-- -------------------------------------------------------- + +/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */; +/*!40101 SET NAMES utf8 */; +/*!50503 SET NAMES utf8mb4 */; +/*!40103 SET @OLD_TIME_ZONE=@@TIME_ZONE */; +/*!40103 SET TIME_ZONE='+00:00' */; +/*!40014 SET @OLD_FOREIGN_KEY_CHECKS=@@FOREIGN_KEY_CHECKS, FOREIGN_KEY_CHECKS=0 */; +/*!40101 SET @OLD_SQL_MODE=@@SQL_MODE, SQL_MODE='NO_AUTO_VALUE_ON_ZERO' */; +/*!40111 SET @OLD_SQL_NOTES=@@SQL_NOTES, SQL_NOTES=0 */; + + +-- Exportiere Datenbank-Struktur für hikos +CREATE DATABASE IF NOT EXISTS `hikos` /*!40100 DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci */ /*!80016 DEFAULT ENCRYPTION='N' */; +USE `hikos`; + +-- Exportiere Struktur von Tabelle hikos.aduser +CREATE TABLE IF NOT EXISTS `aduser` ( + `aduser_id` int NOT NULL AUTO_INCREMENT, + `aduser_samaccountname` varchar(50) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL, + `aduser_sid` varchar(250) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL, + `aduser_ruleset_id` int NOT NULL DEFAULT '-1', + PRIMARY KEY (`aduser_id`), + UNIQUE KEY `aduser_samaccountname` (`aduser_samaccountname`), + UNIQUE KEY `aduser_sid` (`aduser_sid`), + KEY `FK_aduser_ruleset` (`aduser_ruleset_id`), + CONSTRAINT `FK_aduser_ruleset` FOREIGN KEY (`aduser_ruleset_id`) REFERENCES `ruleset` (`ruleset_id`) +) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci; + +-- Exportiere Daten aus Tabelle hikos.aduser: ~0 rows (ungefähr) + +-- Exportiere Struktur von Tabelle hikos.contact +CREATE TABLE IF NOT EXISTS `contact` ( + `contact_id` int NOT NULL AUTO_INCREMENT, + `contact_owner_id` int NOT NULL DEFAULT '-1', + `contact_aduser_id` int DEFAULT NULL, + `contact_displayname` varchar(250) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL, + `contact_phone` varchar(50) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci DEFAULT NULL, + `contact_mobile` varchar(50) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci DEFAULT NULL, + `contact_homeoffice` varchar(50) COLLATE utf8mb4_general_ci DEFAULT NULL, + `contact_email` varchar(50) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci DEFAULT NULL, + `contact_room` varchar(50) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci DEFAULT NULL, + `contact_department_id` int DEFAULT NULL, + `contact_location_id` int DEFAULT NULL, + PRIMARY KEY (`contact_id`) USING BTREE, + UNIQUE KEY `contact_aduser_id` (`contact_aduser_id`), + KEY `FK_contact_department` (`contact_department_id`), + KEY `FK_contact_location` (`contact_location_id`), + CONSTRAINT `FK_contact_aduser_2` FOREIGN KEY (`contact_aduser_id`) REFERENCES `aduser` (`aduser_id`), + CONSTRAINT `FK_contact_department` FOREIGN KEY (`contact_department_id`) REFERENCES `department` (`department_id`), + CONSTRAINT `FK_contact_location` FOREIGN KEY (`contact_location_id`) REFERENCES `location` (`location_id`) +) ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci; + +-- Exportiere Daten aus Tabelle hikos.contact: ~1 rows (ungefähr) +REPLACE INTO `contact` (`contact_id`, `contact_owner_id`, `contact_aduser_id`, `contact_displayname`, `contact_phone`, `contact_mobile`, `contact_homeoffice`, `contact_email`, `contact_room`, `contact_department_id`, `contact_location_id`) VALUES + (1, -1, NULL, 'Bergner, Jan', '1142', '123', '123', '123', '123', NULL, NULL); + +-- Exportiere Struktur von Tabelle hikos.contactkeyword +CREATE TABLE IF NOT EXISTS `contactkeyword` ( + `contactkeyword_contact` int NOT NULL, + `contactkeyword_keyword` int NOT NULL, + PRIMARY KEY (`contactkeyword_contact`,`contactkeyword_keyword`), + KEY `FK_contactkeyword_keyword` (`contactkeyword_keyword`), + CONSTRAINT `FK_contactkeyword_contact` FOREIGN KEY (`contactkeyword_contact`) REFERENCES `contact` (`contact_id`), + CONSTRAINT `FK_contactkeyword_keyword` FOREIGN KEY (`contactkeyword_keyword`) REFERENCES `keyword` (`keyword_id`) +) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci; + +-- Exportiere Daten aus Tabelle hikos.contactkeyword: ~0 rows (ungefähr) + +-- Exportiere Struktur von Tabelle hikos.department +CREATE TABLE IF NOT EXISTS `department` ( + `department_id` int NOT NULL AUTO_INCREMENT, + `department_name` varchar(250) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL, + PRIMARY KEY (`department_id`), + UNIQUE KEY `department_name` (`department_name`) +) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci; + +-- Exportiere Daten aus Tabelle hikos.department: ~0 rows (ungefähr) + +-- Exportiere Struktur von Tabelle hikos.flag +CREATE TABLE IF NOT EXISTS `flag` ( + `flag_id` int NOT NULL AUTO_INCREMENT, + `flag_contact_id` int NOT NULL, + `flag_key` varchar(250) COLLATE utf8mb4_general_ci NOT NULL, + `flag_value` longtext COLLATE utf8mb4_general_ci, + PRIMARY KEY (`flag_id`), + UNIQUE KEY `flag_contact_id_flag_key` (`flag_contact_id`,`flag_key`), + CONSTRAINT `FK__contact` FOREIGN KEY (`flag_contact_id`) REFERENCES `contact` (`contact_id`) +) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci; + +-- Exportiere Daten aus Tabelle hikos.flag: ~0 rows (ungefähr) + +-- Exportiere Struktur von Tabelle hikos.keyword +CREATE TABLE IF NOT EXISTS `keyword` ( + `keyword_id` int NOT NULL AUTO_INCREMENT, + `keyword_owner` int NOT NULL DEFAULT '-1', + `keyword_name` varchar(250) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL, + PRIMARY KEY (`keyword_id`), + UNIQUE KEY `keyword_owner_keyword_name` (`keyword_owner`,`keyword_name`) +) ENGINE=InnoDB AUTO_INCREMENT=3 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci; + +-- Exportiere Daten aus Tabelle hikos.keyword: ~2 rows (ungefähr) +REPLACE INTO `keyword` (`keyword_id`, `keyword_owner`, `keyword_name`) VALUES + (1, -1, 'Test'), + (2, 1, 'Demo1'); + +-- Exportiere Struktur von Tabelle hikos.location +CREATE TABLE IF NOT EXISTS `location` ( + `location_id` int NOT NULL AUTO_INCREMENT, + `location_name` varchar(250) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL, + `location_address` varchar(250) COLLATE utf8mb4_general_ci DEFAULT NULL, + `location_zip` varchar(250) COLLATE utf8mb4_general_ci DEFAULT NULL, + `location_city` varchar(250) COLLATE utf8mb4_general_ci DEFAULT NULL, + PRIMARY KEY (`location_id`), + UNIQUE KEY `location_name` (`location_name`) +) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci; + +-- Exportiere Daten aus Tabelle hikos.location: ~0 rows (ungefähr) + +-- Exportiere Struktur von Tabelle hikos.ruleset +CREATE TABLE IF NOT EXISTS `ruleset` ( + `ruleset_id` int NOT NULL AUTO_INCREMENT, + `ruleset_name` varchar(250) COLLATE utf8mb4_general_ci NOT NULL, + `ruleset_default_contact_read` int NOT NULL DEFAULT '1', + `ruleset_default_contact_write` int NOT NULL DEFAULT '0', + `ruleset_default_contact_delete` int NOT NULL DEFAULT '0', + `ruleset_default_keyword_read` int NOT NULL DEFAULT '1', + `ruleset_default_keyword_write` int NOT NULL DEFAULT '0', + `ruleset_default_keyword_delete` int NOT NULL DEFAULT '0', + `ruleset_default_keyword_attach` int NOT NULL DEFAULT '0', + `ruleset_default_keyword_detach` int NOT NULL DEFAULT '0', + `ruleset_default_aduser_read` int NOT NULL DEFAULT '0', + `ruleset_default_aduser_write` int NOT NULL DEFAULT '0', + `ruleset_default_aduser_delete` int NOT NULL DEFAULT '0', + `ruleset_default_location_read` int NOT NULL DEFAULT '1', + `ruleset_default_location_write` int NOT NULL DEFAULT '0', + `ruleset_default_location_delete` int NOT NULL DEFAULT '0', + `ruleset_default_department_read` int NOT NULL DEFAULT '1', + `ruleset_default_department_write` int NOT NULL DEFAULT '0', + `ruleset_default_department_delete` int NOT NULL DEFAULT '0', + `ruleset_self_contact_read` int NOT NULL DEFAULT '1', + `ruleset_self_contact_write` int NOT NULL DEFAULT '1', + `ruleset_self_keyword_attach` int NOT NULL DEFAULT '1', + `ruleset_self_keyword_detach` int NOT NULL DEFAULT '1', + `ruleset_private_contact_read` int NOT NULL DEFAULT '1', + `ruleset_private_contact_write` int NOT NULL DEFAULT '1', + `ruleset_private_keyword_add` int NOT NULL DEFAULT '1', + `ruleset_private_keyword_delete` int NOT NULL DEFAULT '1', + `ruleset_private_keyword_attach` int NOT NULL DEFAULT '1', + `ruleset_private_keyword_detach` int NOT NULL DEFAULT '1', + PRIMARY KEY (`ruleset_id`) +) ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci; + +-- Exportiere Daten aus Tabelle hikos.ruleset: ~2 rows (ungefähr) +REPLACE INTO `ruleset` (`ruleset_id`, `ruleset_name`, `ruleset_default_contact_read`, `ruleset_default_contact_write`, `ruleset_default_contact_delete`, `ruleset_default_keyword_read`, `ruleset_default_keyword_write`, `ruleset_default_keyword_delete`, `ruleset_default_keyword_attach`, `ruleset_default_keyword_detach`, `ruleset_default_aduser_read`, `ruleset_default_aduser_write`, `ruleset_default_aduser_delete`, `ruleset_default_location_read`, `ruleset_default_location_write`, `ruleset_default_location_delete`, `ruleset_default_department_read`, `ruleset_default_department_write`, `ruleset_default_department_delete`, `ruleset_self_contact_read`, `ruleset_self_contact_write`, `ruleset_self_keyword_attach`, `ruleset_self_keyword_detach`, `ruleset_private_contact_read`, `ruleset_private_contact_write`, `ruleset_private_keyword_add`, `ruleset_private_keyword_delete`, `ruleset_private_keyword_attach`, `ruleset_private_keyword_detach`) VALUES + (-1, 'Default_Ruleset', 1, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1), + (0, 'Default_Admin_Ruleset', 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1); + +-- Exportiere Struktur von Tabelle hikos.sessions +CREATE TABLE IF NOT EXISTS `sessions` ( + `id` int NOT NULL AUTO_INCREMENT, + `username` varchar(255) COLLATE utf8mb4_general_ci NOT NULL, + `token` varchar(512) COLLATE utf8mb4_general_ci NOT NULL, + `created_at` timestamp NULL DEFAULT CURRENT_TIMESTAMP, + `expires_at` timestamp NOT NULL, + PRIMARY KEY (`id`) +) ENGINE=InnoDB AUTO_INCREMENT=9 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci; + +-- Exportiere Daten aus Tabelle hikos.sessions: ~4 rows (ungefähr) +REPLACE INTO `sessions` (`id`, `username`, `token`, `created_at`, `expires_at`) VALUES + (5, 'admin', 'qITgAy47f5gmlBG72y_vJWh5IC7_aXQGKsL6M7IFTWU', '2025-05-20 18:14:30', '2025-05-21 18:14:30'), + (6, 'admin', 'Vjde9ngqPdUchF_I2_FzekK6Kb3-wBtZy_7mFPtRMV8', '2025-05-20 19:18:58', '2025-05-21 19:18:58'), + (7, 'admin', 'E2znECPx1Ppcwsby4ky7sQMf55Wax0KttnFmV83rqoc', '2025-05-21 04:21:43', '2025-05-22 04:21:43'), + (8, 'admin', 'Y7MVV-Nd4i1BPEerPLbv0jM0gJ4dYnnqZ0OtxnVWUXw', '2025-05-21 04:22:08', '2025-05-22 04:22:08'); + +/*!40103 SET TIME_ZONE=IFNULL(@OLD_TIME_ZONE, 'system') */; +/*!40101 SET SQL_MODE=IFNULL(@OLD_SQL_MODE, '') */; +/*!40014 SET FOREIGN_KEY_CHECKS=IFNULL(@OLD_FOREIGN_KEY_CHECKS, 1) */; +/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */; +/*!40111 SET SQL_NOTES=IFNULL(@OLD_SQL_NOTES, 1) */; diff --git a/main.go b/main.go index f0619d2..8e80a74 100644 --- a/main.go +++ b/main.go @@ -128,6 +128,7 @@ type Keyword struct { type DataPort struct { Contacts []Contact Keywords []Keyword + /*Links []ContactKeywordLink*/ } /* ################################################################## */ @@ -144,33 +145,39 @@ func (s *Server) privateHello(w http.ResponseWriter, r *http.Request) { } func GetDataReturnDataPort(QueryContact, QueryKeyword string) DataPort { - rows, err := DB.Query(QueryContact) - if err != nil { - fmt.Println("a", err) - } var contList []Contact - for rows.Next() { - var c Contact - err = rows.Scan(&c.Id, &c.OwnerId, &c.AdUserId, &c.DisplayName, &c.Phone, &c.Mobile, &c.Homeoffice, &c.Email, &c.Room, &c.DepartmentId, &c.LocationId) + var keywordList []Keyword + + if QueryContact != "" { + rowsContact, err := DB.Query(QueryContact) if err != nil { - fmt.Println("b", err) + fmt.Println("a", err) + } + for rowsContact.Next() { + var c Contact + err = rowsContact.Scan(&c.Id, &c.OwnerId, &c.AdUserId, &c.DisplayName, &c.Phone, &c.Mobile, &c.Homeoffice, &c.Email, &c.Room, &c.DepartmentId, &c.LocationId) + if err != nil { + fmt.Println("b", err) + } + contList = append(contList, c) } - contList = append(contList, c) } - rows1, err := DB.Query(QueryKeyword) - if err != nil { - fmt.Println("c", err) - } - var keywordList []Keyword - for rows1.Next() { - var c0 Keyword - err = rows1.Scan(&c0.Id, &c0.Owner, &c0.Name) + if QueryKeyword != "" { + rowsKeyword, err := DB.Query(QueryKeyword) if err != nil { - fmt.Println("d", err) + fmt.Println("c", err) + } + for rowsKeyword.Next() { + var c0 Keyword + err = rowsKeyword.Scan(&c0.Id, &c0.Owner, &c0.Name) + if err != nil { + fmt.Println("d", err) + } + keywordList = append(keywordList, c0) } - keywordList = append(keywordList, c0) } + return DataPort{Contacts: contList, Keywords: keywordList} } @@ -283,44 +290,39 @@ func main() { tplFull.ExecuteTemplate(w, "layout", nil) })*/ - mux.HandleFunc("/htmx/kontakt", func(w http.ResponseWriter, r *http.Request) { + mux.HandleFunc("/htmx/contact", func(w http.ResponseWriter, r *http.Request) { if err := r.ParseForm(); err != nil { http.Error(w, "bad request", http.StatusBadRequest) return } sparam := strings.TrimSpace(r.Form.Get("search")) - + fmt.Println("All_OK", sparam) sqlq := "SELECT * FROM contact c WHERE c.contact_displayname LIKE '%" + sparam + "%' OR c.contact_phone LIKE '%" + sparam + "%' OR c.contact_mobile LIKE '%" + sparam + "%' OR c.contact_homeoffice LIKE '%" + sparam + "%';" - - rows, err := db.Query(sqlq) - if err != nil { - w.WriteHeader(http.StatusInternalServerError) - } - - var contList []Contact - - for rows.Next() { - var c Contact - err = rows.Scan(&c.Id) - contList = append(contList, c) - } - - tplKontakt.ExecuteTemplate(w, "kontakt", contList) + D := GetDataReturnDataPort(sqlq, "") + tplKontakt.ExecuteTemplate(w, "kontakt", D) }) mux.HandleFunc("/htmx/kontaktbyschlagwort", func(w http.ResponseWriter, r *http.Request) { tplKontakt.ExecuteTemplate(w, "kontakt", nil) }) - mux.HandleFunc("/htmx/amt", func(w http.ResponseWriter, r *http.Request) { + mux.HandleFunc("/htmx/department", func(w http.ResponseWriter, r *http.Request) { + if err := r.ParseForm(); err != nil { + http.Error(w, "bad request", http.StatusBadRequest) + return + } + sparam := strings.TrimSpace(r.Form.Get("search")) + fmt.Println("Department_OK", sparam) + sqlq := "SELECT c.* FROM contact c JOIN department d ON c.contact_department_id = d.department_id WHERE d.department_name LIKE '%" + sparam + "%';" + D := GetDataReturnDataPort(sqlq, "") + tplKontakt.ExecuteTemplate(w, "kontakt", D) + }) + + mux.HandleFunc("/htmx/room", func(w http.ResponseWriter, r *http.Request) { tplKontakt.ExecuteTemplate(w, "kontakt", nil) }) - mux.HandleFunc("/htmx/raum", func(w http.ResponseWriter, r *http.Request) { - tplKontakt.ExecuteTemplate(w, "kontakt", nil) - }) - - mux.HandleFunc("/htmx/gebaeude", func(w http.ResponseWriter, r *http.Request) { + mux.HandleFunc("/htmx/location", func(w http.ResponseWriter, r *http.Request) { tplKontakt.ExecuteTemplate(w, "kontakt", nil) }) diff --git a/static/packages/htmx/ext/README.md b/static/packages/htmx/ext/README.md new file mode 100644 index 0000000..366e714 --- /dev/null +++ b/static/packages/htmx/ext/README.md @@ -0,0 +1,9 @@ +# Why Are These Files Here? + +These are legacy extensions for htmx 1.x and are **NOT** actively maintained or guaranteed to work with htmx 2.x. +They are here because we unfortunately linked to unversioned unpkg URLs in the installation guides for them +in 1.x, so we need to keep them here to preserve those URLs and not break existing users functionality. + +If you are looking for extensions for htmx 2.x, please see the [htmx 2.0 extensions site](https://htmx.org/extensions), +which has links to the new extensions repos (They have all been moved to their own NPM projects and URLs, like +they should have been from the start!) diff --git a/static/packages/htmx/ext/_WARNING_DEPRECATED_FILES_.txt b/static/packages/htmx/ext/_WARNING_DEPRECATED_FILES_.txt new file mode 100644 index 0000000..6dff4c2 --- /dev/null +++ b/static/packages/htmx/ext/_WARNING_DEPRECATED_FILES_.txt @@ -0,0 +1,5 @@ +!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! +!! THESE FILES ARE DEPRECATED AND UNSUPPORTED !! +!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! + +SEE README.md FOR MORE DETAILS diff --git a/static/packages/htmx/ext/ajax-header.js b/static/packages/htmx/ext/ajax-header.js new file mode 100644 index 0000000..e8c2dbc --- /dev/null +++ b/static/packages/htmx/ext/ajax-header.js @@ -0,0 +1,11 @@ +if (htmx.version && !htmx.version.startsWith("1.")) { + console.warn("WARNING: You are using an htmx 1 extension with htmx " + htmx.version + + ". It is recommended that you move to the version of this extension found on https://htmx.org/extensions") +} +htmx.defineExtension('ajax-header', { + onEvent: function (name, evt) { + if (name === "htmx:configRequest") { + evt.detail.headers['X-Requested-With'] = 'XMLHttpRequest'; + } + } +}); diff --git a/static/packages/htmx/ext/alpine-morph.js b/static/packages/htmx/ext/alpine-morph.js new file mode 100644 index 0000000..ea41cf0 --- /dev/null +++ b/static/packages/htmx/ext/alpine-morph.js @@ -0,0 +1,20 @@ +if (htmx.version && !htmx.version.startsWith("1.")) { + console.warn("WARNING: You are using an htmx 1 extension with htmx " + htmx.version + + ". It is recommended that you move to the version of this extension found on https://htmx.org/extensions") +} +htmx.defineExtension('alpine-morph', { + isInlineSwap: function (swapStyle) { + return swapStyle === 'morph'; + }, + handleSwap: function (swapStyle, target, fragment) { + if (swapStyle === 'morph') { + if (fragment.nodeType === Node.DOCUMENT_FRAGMENT_NODE) { + Alpine.morph(target, fragment.firstElementChild); + return [target]; + } else { + Alpine.morph(target, fragment.outerHTML); + return [target]; + } + } + } +}); diff --git a/static/packages/htmx/ext/class-tools.js b/static/packages/htmx/ext/class-tools.js new file mode 100644 index 0000000..83f5c7c --- /dev/null +++ b/static/packages/htmx/ext/class-tools.js @@ -0,0 +1,97 @@ +(function () { + + if (htmx.version && !htmx.version.startsWith("1.")) { + console.warn("WARNING: You are using an htmx 1 extension with htmx " + htmx.version + + ". It is recommended that you move to the version of this extension found on https://htmx.org/extensions") + } + + function splitOnWhitespace(trigger) { + return trigger.split(/\s+/); + } + + function parseClassOperation(trimmedValue) { + var split = splitOnWhitespace(trimmedValue); + if (split.length > 1) { + var operation = split[0]; + var classDef = split[1].trim(); + var cssClass; + var delay; + if (classDef.indexOf(":") > 0) { + var splitCssClass = classDef.split(':'); + cssClass = splitCssClass[0]; + delay = htmx.parseInterval(splitCssClass[1]); + } else { + cssClass = classDef; + delay = 100; + } + return { + operation: operation, + cssClass: cssClass, + delay: delay + } + } else { + return null; + } + } + + function performOperation(elt, classOperation, classList, currentRunTime) { + setTimeout(function () { + elt.classList[classOperation.operation].call(elt.classList, classOperation.cssClass); + }, currentRunTime) + } + + function toggleOperation(elt, classOperation, classList, currentRunTime) { + setTimeout(function () { + setInterval(function () { + elt.classList[classOperation.operation].call(elt.classList, classOperation.cssClass); + }, classOperation.delay); + }, currentRunTime) + } + + function processClassList(elt, classList) { + var runs = classList.split("&"); + for (var i = 0; i < runs.length; i++) { + var run = runs[i]; + var currentRunTime = 0; + var classOperations = run.split(","); + for (var j = 0; j < classOperations.length; j++) { + var value = classOperations[j]; + var trimmedValue = value.trim(); + var classOperation = parseClassOperation(trimmedValue); + if (classOperation) { + if (classOperation.operation === "toggle") { + toggleOperation(elt, classOperation, classList, currentRunTime); + currentRunTime = currentRunTime + classOperation.delay; + } else { + currentRunTime = currentRunTime + classOperation.delay; + performOperation(elt, classOperation, classList, currentRunTime); + } + } + } + } + } + + function maybeProcessClasses(elt) { + if (elt.getAttribute) { + var classList = elt.getAttribute("classes") || elt.getAttribute("data-classes"); + if (classList) { + processClassList(elt, classList); + } + } + } + + htmx.defineExtension('class-tools', { + onEvent: function (name, evt) { + if (name === "htmx:afterProcessNode") { + var elt = evt.detail.elt; + maybeProcessClasses(elt); + if (elt.querySelectorAll) { + var children = elt.querySelectorAll("[classes], [data-classes]"); + for (var i = 0; i < children.length; i++) { + maybeProcessClasses(children[i]); + } + } + } + } + }); +})(); diff --git a/static/packages/htmx/ext/client-side-templates.js b/static/packages/htmx/ext/client-side-templates.js new file mode 100644 index 0000000..d23c5c9 --- /dev/null +++ b/static/packages/htmx/ext/client-side-templates.js @@ -0,0 +1,100 @@ +if (htmx.version && !htmx.version.startsWith("1.")) { + console.warn("WARNING: You are using an htmx 1 extension with htmx " + htmx.version + + ". It is recommended that you move to the version of this extension found on https://htmx.org/extensions") +} +htmx.defineExtension('client-side-templates', { + transformResponse : function(text, xhr, elt) { + + var mustacheTemplate = htmx.closest(elt, "[mustache-template]"); + if (mustacheTemplate) { + var data = JSON.parse(text); + var templateId = mustacheTemplate.getAttribute('mustache-template'); + var template = htmx.find("#" + templateId); + if (template) { + return Mustache.render(template.innerHTML, data); + } else { + throw "Unknown mustache template: " + templateId; + } + } + + var mustacheArrayTemplate = htmx.closest(elt, "[mustache-array-template]"); + if (mustacheArrayTemplate) { + var data = JSON.parse(text); + var templateId = mustacheArrayTemplate.getAttribute('mustache-array-template'); + var template = htmx.find("#" + templateId); + if (template) { + return Mustache.render(template.innerHTML, {"data": data }); + } else { + throw "Unknown mustache template: " + templateId; + } + } + + var handlebarsTemplate = htmx.closest(elt, "[handlebars-template]"); + if (handlebarsTemplate) { + var data = JSON.parse(text); + var templateId = handlebarsTemplate.getAttribute('handlebars-template'); + var templateElement = htmx.find('#' + templateId).innerHTML; + var renderTemplate = Handlebars.compile(templateElement); + if (renderTemplate) { + return renderTemplate(data); + } else { + throw "Unknown handlebars template: " + templateId; + } + } + + var handlebarsArrayTemplate = htmx.closest(elt, "[handlebars-array-template]"); + if (handlebarsArrayTemplate) { + var data = JSON.parse(text); + var templateId = handlebarsArrayTemplate.getAttribute('handlebars-array-template'); + var templateElement = htmx.find('#' + templateId).innerHTML; + var renderTemplate = Handlebars.compile(templateElement); + if (renderTemplate) { + return renderTemplate(data); + } else { + throw "Unknown handlebars template: " + templateId; + } + } + + var nunjucksTemplate = htmx.closest(elt, "[nunjucks-template]"); + if (nunjucksTemplate) { + var data = JSON.parse(text); + var templateName = nunjucksTemplate.getAttribute('nunjucks-template'); + var template = htmx.find('#' + templateName); + if (template) { + return nunjucks.renderString(template.innerHTML, data); + } else { + return nunjucks.render(templateName, data); + } + } + + var xsltTemplate = htmx.closest(elt, "[xslt-template]"); + if (xsltTemplate) { + var templateId = xsltTemplate.getAttribute('xslt-template'); + var template = htmx.find("#" + templateId); + if (template) { + var content = template.innerHTML ? new DOMParser().parseFromString(template.innerHTML, 'application/xml') + : template.contentDocument; + var processor = new XSLTProcessor(); + processor.importStylesheet(content); + var data = new DOMParser().parseFromString(text, "application/xml"); + var frag = processor.transformToFragment(data, document); + return new XMLSerializer().serializeToString(frag); + } else { + throw "Unknown XSLT template: " + templateId; + } + } + + var nunjucksArrayTemplate = htmx.closest(elt, "[nunjucks-array-template]"); + if (nunjucksArrayTemplate) { + var data = JSON.parse(text); + var templateName = nunjucksArrayTemplate.getAttribute('nunjucks-array-template'); + var template = htmx.find('#' + templateName); + if (template) { + return nunjucks.renderString(template.innerHTML, {"data": data}); + } else { + return nunjucks.render(templateName, {"data": data}); + } + } + return text; + } +}); diff --git a/static/packages/htmx/ext/debug.js b/static/packages/htmx/ext/debug.js new file mode 100644 index 0000000..aa88c9e --- /dev/null +++ b/static/packages/htmx/ext/debug.js @@ -0,0 +1,15 @@ +if (htmx.version && !htmx.version.startsWith("1.")) { + console.warn("WARNING: You are using an htmx 1 extension with htmx " + htmx.version + + ". It is recommended that you move to the version of this extension found on https://htmx.org/extensions") +} +htmx.defineExtension('debug', { + onEvent: function (name, evt) { + if (console.debug) { + console.debug(name, evt); + } else if (console) { + console.log("DEBUG:", name, evt); + } else { + throw "NO CONSOLE SUPPORTED" + } + } +}); diff --git a/static/packages/htmx/ext/disable-element.js b/static/packages/htmx/ext/disable-element.js new file mode 100644 index 0000000..0192661 --- /dev/null +++ b/static/packages/htmx/ext/disable-element.js @@ -0,0 +1,20 @@ +if (htmx.version && !htmx.version.startsWith("1.")) { + console.warn("WARNING: You are using an htmx 1 extension with htmx " + htmx.version + + ". It is recommended that you move to the version of this extension found on https://htmx.org/extensions") +} +// Disable Submit Button +htmx.defineExtension('disable-element', { + onEvent: function (name, evt) { + let elt = evt.detail.elt; + let target = elt.getAttribute("hx-disable-element"); + let targetElements = (target == "self") ? [ elt ] : document.querySelectorAll(target); + + for (var i = 0; i < targetElements.length; i++) { + if (name === "htmx:beforeRequest" && targetElements[i]) { + targetElements[i].disabled = true; + } else if (name == "htmx:afterRequest" && targetElements[i]) { + targetElements[i].disabled = false; + } + } + } +}); diff --git a/static/packages/htmx/ext/event-header.js b/static/packages/htmx/ext/event-header.js new file mode 100644 index 0000000..0ccb7de --- /dev/null +++ b/static/packages/htmx/ext/event-header.js @@ -0,0 +1,41 @@ +(function(){ + if (htmx.version && !htmx.version.startsWith("1.")) { + console.warn("WARNING: You are using an htmx 1 extension with htmx " + htmx.version + + ". It is recommended that you move to the version of this extension found on https://htmx.org/extensions") + } + function stringifyEvent(event) { + var obj = {}; + for (var key in event) { + obj[key] = event[key]; + } + return JSON.stringify(obj, function(key, value){ + if(value instanceof Node){ + var nodeRep = value.tagName; + if (nodeRep) { + nodeRep = nodeRep.toLowerCase(); + if(value.id){ + nodeRep += "#" + value.id; + } + if(value.classList && value.classList.length){ + nodeRep += "." + value.classList.toString().replace(" ", ".") + } + return nodeRep; + } else { + return "Node" + } + } + if (value instanceof Window) return 'Window'; + return value; + }); + } + + htmx.defineExtension('event-header', { + onEvent: function (name, evt) { + if (name === "htmx:configRequest") { + if (evt.detail.triggeringEvent) { + evt.detail.headers['Triggering-Event'] = stringifyEvent(evt.detail.triggeringEvent); + } + } + } + }); +})(); diff --git a/static/packages/htmx/ext/head-support.js b/static/packages/htmx/ext/head-support.js new file mode 100644 index 0000000..07c0231 --- /dev/null +++ b/static/packages/htmx/ext/head-support.js @@ -0,0 +1,146 @@ +//========================================================== +// head-support.js +// +// An extension to htmx 1.0 to add head tag merging. +//========================================================== +(function(){ + + if (htmx.version && !htmx.version.startsWith("1.")) { + console.warn("WARNING: You are using an htmx 1 extension with htmx " + htmx.version + + ". It is recommended that you move to the version of this extension found on https://htmx.org/extensions") + } + + var api = null; + + function log() { + //console.log(arguments); + } + + function mergeHead(newContent, defaultMergeStrategy) { + + if (newContent && newContent.indexOf(' -1) { + const htmlDoc = document.createElement("html"); + // remove svgs to avoid conflicts + var contentWithSvgsRemoved = newContent.replace(/]*>|>)([\s\S]*?)<\/svg>/gim, ''); + // extract head tag + var headTag = contentWithSvgsRemoved.match(/(]*>|>)([\s\S]*?)<\/head>)/im); + + // if the head tag exists... + if (headTag) { + + var added = [] + var removed = [] + var preserved = [] + var nodesToAppend = [] + + htmlDoc.innerHTML = headTag; + var newHeadTag = htmlDoc.querySelector("head"); + var currentHead = document.head; + + if (newHeadTag == null) { + return; + } else { + // put all new head elements into a Map, by their outerHTML + var srcToNewHeadNodes = new Map(); + for (const newHeadChild of newHeadTag.children) { + srcToNewHeadNodes.set(newHeadChild.outerHTML, newHeadChild); + } + } + + + + // determine merge strategy + var mergeStrategy = api.getAttributeValue(newHeadTag, "hx-head") || defaultMergeStrategy; + + // get the current head + for (const currentHeadElt of currentHead.children) { + + // If the current head element is in the map + var inNewContent = srcToNewHeadNodes.has(currentHeadElt.outerHTML); + var isReAppended = currentHeadElt.getAttribute("hx-head") === "re-eval"; + var isPreserved = api.getAttributeValue(currentHeadElt, "hx-preserve") === "true"; + if (inNewContent || isPreserved) { + if (isReAppended) { + // remove the current version and let the new version replace it and re-execute + removed.push(currentHeadElt); + } else { + // this element already exists and should not be re-appended, so remove it from + // the new content map, preserving it in the DOM + srcToNewHeadNodes.delete(currentHeadElt.outerHTML); + preserved.push(currentHeadElt); + } + } else { + if (mergeStrategy === "append") { + // we are appending and this existing element is not new content + // so if and only if it is marked for re-append do we do anything + if (isReAppended) { + removed.push(currentHeadElt); + nodesToAppend.push(currentHeadElt); + } + } else { + // if this is a merge, we remove this content since it is not in the new head + if (api.triggerEvent(document.body, "htmx:removingHeadElement", {headElement: currentHeadElt}) !== false) { + removed.push(currentHeadElt); + } + } + } + } + + // Push the tremaining new head elements in the Map into the + // nodes to append to the head tag + nodesToAppend.push(...srcToNewHeadNodes.values()); + log("to append: ", nodesToAppend); + + for (const newNode of nodesToAppend) { + log("adding: ", newNode); + var newElt = document.createRange().createContextualFragment(newNode.outerHTML); + log(newElt); + if (api.triggerEvent(document.body, "htmx:addingHeadElement", {headElement: newElt}) !== false) { + currentHead.appendChild(newElt); + added.push(newElt); + } + } + + // remove all removed elements, after we have appended the new elements to avoid + // additional network requests for things like style sheets + for (const removedElement of removed) { + if (api.triggerEvent(document.body, "htmx:removingHeadElement", {headElement: removedElement}) !== false) { + currentHead.removeChild(removedElement); + } + } + + api.triggerEvent(document.body, "htmx:afterHeadMerge", {added: added, kept: preserved, removed: removed}); + } + } + } + + htmx.defineExtension("head-support", { + init: function(apiRef) { + // store a reference to the internal API. + api = apiRef; + + htmx.on('htmx:afterSwap', function(evt){ + var serverResponse = evt.detail.xhr.response; + if (api.triggerEvent(document.body, "htmx:beforeHeadMerge", evt.detail)) { + mergeHead(serverResponse, evt.detail.boosted ? "merge" : "append"); + } + }) + + htmx.on('htmx:historyRestore', function(evt){ + if (api.triggerEvent(document.body, "htmx:beforeHeadMerge", evt.detail)) { + if (evt.detail.cacheMiss) { + mergeHead(evt.detail.serverResponse, "merge"); + } else { + mergeHead(evt.detail.item.head, "merge"); + } + } + }) + + htmx.on('htmx:historyItemCreated', function(evt){ + var historyItem = evt.detail.item; + historyItem.head = document.head.outerHTML; + }) + } + }); + +})() diff --git a/static/packages/htmx/ext/include-vals.js b/static/packages/htmx/ext/include-vals.js new file mode 100644 index 0000000..53332d3 --- /dev/null +++ b/static/packages/htmx/ext/include-vals.js @@ -0,0 +1,28 @@ +(function(){ + if (htmx.version && !htmx.version.startsWith("1.")) { + console.warn("WARNING: You are using an htmx 1 extension with htmx " + htmx.version + + ". It is recommended that you move to the version of this extension found on https://htmx.org/extensions") + } + + function mergeObjects(obj1, obj2) { + for (var key in obj2) { + if (obj2.hasOwnProperty(key)) { + obj1[key] = obj2[key]; + } + } + return obj1; + } + + htmx.defineExtension('include-vals', { + onEvent: function (name, evt) { + if (name === "htmx:configRequest") { + var includeValsElt = htmx.closest(evt.detail.elt, "[include-vals],[data-include-vals]"); + if (includeValsElt) { + var includeVals = includeValsElt.getAttribute("include-vals") || includeValsElt.getAttribute("data-include-vals"); + var valuesToInclude = eval("({" + includeVals + "})"); + mergeObjects(evt.detail.parameters, valuesToInclude); + } + } + } + }); +})(); diff --git a/static/packages/htmx/ext/json-enc.js b/static/packages/htmx/ext/json-enc.js new file mode 100644 index 0000000..ef05680 --- /dev/null +++ b/static/packages/htmx/ext/json-enc.js @@ -0,0 +1,16 @@ +if (htmx.version && !htmx.version.startsWith("1.")) { + console.warn("WARNING: You are using an htmx 1 extension with htmx " + htmx.version + + ". It is recommended that you move to the version of this extension found on https://htmx.org/extensions") +} +htmx.defineExtension('json-enc', { + onEvent: function (name, evt) { + if (name === "htmx:configRequest") { + evt.detail.headers['Content-Type'] = "application/json"; + } + }, + + encodeParameters : function(xhr, parameters, elt) { + xhr.overrideMimeType('text/json'); + return (JSON.stringify(parameters)); + } +}); diff --git a/static/packages/htmx/ext/loading-states.js b/static/packages/htmx/ext/loading-states.js new file mode 100644 index 0000000..1774304 --- /dev/null +++ b/static/packages/htmx/ext/loading-states.js @@ -0,0 +1,189 @@ +;(function () { + + if (htmx.version && !htmx.version.startsWith("1.")) { + console.warn("WARNING: You are using an htmx 1 extension with htmx " + htmx.version + + ". It is recommended that you move to the version of this extension found on https://htmx.org/extensions") + } + + let loadingStatesUndoQueue = [] + + function loadingStateContainer(target) { + return htmx.closest(target, '[data-loading-states]') || document.body + } + + function mayProcessUndoCallback(target, callback) { + if (document.body.contains(target)) { + callback() + } + } + + function mayProcessLoadingStateByPath(elt, requestPath) { + const pathElt = htmx.closest(elt, '[data-loading-path]') + if (!pathElt) { + return true + } + + return pathElt.getAttribute('data-loading-path') === requestPath + } + + function queueLoadingState(sourceElt, targetElt, doCallback, undoCallback) { + const delayElt = htmx.closest(sourceElt, '[data-loading-delay]') + if (delayElt) { + const delayInMilliseconds = + delayElt.getAttribute('data-loading-delay') || 200 + const timeout = setTimeout(function () { + doCallback() + + loadingStatesUndoQueue.push(function () { + mayProcessUndoCallback(targetElt, undoCallback) + }) + }, delayInMilliseconds) + + loadingStatesUndoQueue.push(function () { + mayProcessUndoCallback(targetElt, function () { clearTimeout(timeout) }) + }) + } else { + doCallback() + loadingStatesUndoQueue.push(function () { + mayProcessUndoCallback(targetElt, undoCallback) + }) + } + } + + function getLoadingStateElts(loadingScope, type, path) { + return Array.from(htmx.findAll(loadingScope, "[" + type + "]")).filter( + function (elt) { return mayProcessLoadingStateByPath(elt, path) } + ) + } + + function getLoadingTarget(elt) { + if (elt.getAttribute('data-loading-target')) { + return Array.from( + htmx.findAll(elt.getAttribute('data-loading-target')) + ) + } + return [elt] + } + + htmx.defineExtension('loading-states', { + onEvent: function (name, evt) { + if (name === 'htmx:beforeRequest') { + const container = loadingStateContainer(evt.target) + + const loadingStateTypes = [ + 'data-loading', + 'data-loading-class', + 'data-loading-class-remove', + 'data-loading-disable', + 'data-loading-aria-busy', + ] + + let loadingStateEltsByType = {} + + loadingStateTypes.forEach(function (type) { + loadingStateEltsByType[type] = getLoadingStateElts( + container, + type, + evt.detail.pathInfo.requestPath + ) + }) + + loadingStateEltsByType['data-loading'].forEach(function (sourceElt) { + getLoadingTarget(sourceElt).forEach(function (targetElt) { + queueLoadingState( + sourceElt, + targetElt, + function () { + targetElt.style.display = + sourceElt.getAttribute('data-loading') || + 'inline-block' }, + function () { targetElt.style.display = 'none' } + ) + }) + }) + + loadingStateEltsByType['data-loading-class'].forEach( + function (sourceElt) { + const classNames = sourceElt + .getAttribute('data-loading-class') + .split(' ') + + getLoadingTarget(sourceElt).forEach(function (targetElt) { + queueLoadingState( + sourceElt, + targetElt, + function () { + classNames.forEach(function (className) { + targetElt.classList.add(className) + }) + }, + function() { + classNames.forEach(function (className) { + targetElt.classList.remove(className) + }) + } + ) + }) + } + ) + + loadingStateEltsByType['data-loading-class-remove'].forEach( + function (sourceElt) { + const classNames = sourceElt + .getAttribute('data-loading-class-remove') + .split(' ') + + getLoadingTarget(sourceElt).forEach(function (targetElt) { + queueLoadingState( + sourceElt, + targetElt, + function () { + classNames.forEach(function (className) { + targetElt.classList.remove(className) + }) + }, + function() { + classNames.forEach(function (className) { + targetElt.classList.add(className) + }) + } + ) + }) + } + ) + + loadingStateEltsByType['data-loading-disable'].forEach( + function (sourceElt) { + getLoadingTarget(sourceElt).forEach(function (targetElt) { + queueLoadingState( + sourceElt, + targetElt, + function() { targetElt.disabled = true }, + function() { targetElt.disabled = false } + ) + }) + } + ) + + loadingStateEltsByType['data-loading-aria-busy'].forEach( + function (sourceElt) { + getLoadingTarget(sourceElt).forEach(function (targetElt) { + queueLoadingState( + sourceElt, + targetElt, + function () { targetElt.setAttribute("aria-busy", "true") }, + function () { targetElt.removeAttribute("aria-busy") } + ) + }) + } + ) + } + + if (name === 'htmx:beforeOnLoad') { + while (loadingStatesUndoQueue.length > 0) { + loadingStatesUndoQueue.shift()() + } + } + }, + }) +})() diff --git a/static/packages/htmx/ext/method-override.js b/static/packages/htmx/ext/method-override.js new file mode 100644 index 0000000..44621cd --- /dev/null +++ b/static/packages/htmx/ext/method-override.js @@ -0,0 +1,15 @@ +if (htmx.version && !htmx.version.startsWith("1.")) { + console.warn("WARNING: You are using an htmx 1 extension with htmx " + htmx.version + + ". It is recommended that you move to the version of this extension found on https://htmx.org/extensions") +} +htmx.defineExtension('method-override', { + onEvent: function (name, evt) { + if (name === "htmx:configRequest") { + var method = evt.detail.verb; + if (method !== "get" || method !== "post") { + evt.detail.headers['X-HTTP-Method-Override'] = method.toUpperCase(); + evt.detail.verb = "post"; + } + } + } +}); diff --git a/static/packages/htmx/ext/morphdom-swap.js b/static/packages/htmx/ext/morphdom-swap.js new file mode 100644 index 0000000..337a604 --- /dev/null +++ b/static/packages/htmx/ext/morphdom-swap.js @@ -0,0 +1,21 @@ +if (htmx.version && !htmx.version.startsWith("1.")) { + console.warn("WARNING: You are using an htmx 1 extension with htmx " + htmx.version + + ". It is recommended that you move to the version of this extension found on https://htmx.org/extensions") +} +htmx.defineExtension('morphdom-swap', { + isInlineSwap: function(swapStyle) { + return swapStyle === 'morphdom'; + }, + handleSwap: function (swapStyle, target, fragment) { + if (swapStyle === 'morphdom') { + if (fragment.nodeType === Node.DOCUMENT_FRAGMENT_NODE) { + // IE11 doesn't support DocumentFragment.firstElementChild + morphdom(target, fragment.firstElementChild || fragment.firstChild); + return [target]; + } else { + morphdom(target, fragment.outerHTML); + return [target]; + } + } + } +}); diff --git a/static/packages/htmx/ext/multi-swap.js b/static/packages/htmx/ext/multi-swap.js new file mode 100644 index 0000000..0c882f8 --- /dev/null +++ b/static/packages/htmx/ext/multi-swap.js @@ -0,0 +1,50 @@ +(function () { + + if (htmx.version && !htmx.version.startsWith("1.")) { + console.warn("WARNING: You are using an htmx 1 extension with htmx " + htmx.version + + ". It is recommended that you move to the version of this extension found on https://htmx.org/extensions") + } + + /** @type {import("../htmx").HtmxInternalApi} */ + var api; + + htmx.defineExtension('multi-swap', { + init: function (apiRef) { + api = apiRef; + }, + isInlineSwap: function (swapStyle) { + return swapStyle.indexOf('multi:') === 0; + }, + handleSwap: function (swapStyle, target, fragment, settleInfo) { + if (swapStyle.indexOf('multi:') === 0) { + var selectorToSwapStyle = {}; + var elements = swapStyle.replace(/^multi\s*:\s*/, '').split(/\s*,\s*/); + + elements.map(function (element) { + var split = element.split(/\s*:\s*/); + var elementSelector = split[0]; + var elementSwapStyle = typeof (split[1]) !== "undefined" ? split[1] : "innerHTML"; + + if (elementSelector.charAt(0) !== '#') { + console.error("HTMX multi-swap: unsupported selector '" + elementSelector + "'. Only ID selectors starting with '#' are supported."); + return; + } + + selectorToSwapStyle[elementSelector] = elementSwapStyle; + }); + + for (var selector in selectorToSwapStyle) { + var swapStyle = selectorToSwapStyle[selector]; + var elementToSwap = fragment.querySelector(selector); + if (elementToSwap) { + api.oobSwap(swapStyle, elementToSwap, settleInfo); + } else { + console.warn("HTMX multi-swap: selector '" + selector + "' not found in source content."); + } + } + + return true; + } + } + }); +})(); diff --git a/static/packages/htmx/ext/path-deps.js b/static/packages/htmx/ext/path-deps.js new file mode 100644 index 0000000..8460e83 --- /dev/null +++ b/static/packages/htmx/ext/path-deps.js @@ -0,0 +1,63 @@ +(function(undefined){ + 'use strict'; + if (htmx.version && !htmx.version.startsWith("1.")) { + console.warn("WARNING: You are using an htmx 1 extension with htmx " + htmx.version + + ". It is recommended that you move to the version of this extension found on https://htmx.org/extensions") + } + // Save a reference to the global object (window in the browser) + var _root = this; + + function dependsOn(pathSpec, url) { + if (pathSpec === "ignore") { + return false; + } + var dependencyPath = pathSpec.split("/"); + var urlPath = url.split("/"); + for (var i = 0; i < urlPath.length; i++) { + var dependencyElement = dependencyPath.shift(); + var pathElement = urlPath[i]; + if (dependencyElement !== pathElement && dependencyElement !== "*") { + return false; + } + if (dependencyPath.length === 0 || (dependencyPath.length === 1 && dependencyPath[0] === "")) { + return true; + } + } + return false; + } + + function refreshPath(path) { + var eltsWithDeps = htmx.findAll("[path-deps]"); + for (var i = 0; i < eltsWithDeps.length; i++) { + var elt = eltsWithDeps[i]; + if (dependsOn(elt.getAttribute('path-deps'), path)) { + htmx.trigger(elt, "path-deps"); + } + } + } + + htmx.defineExtension('path-deps', { + onEvent: function (name, evt) { + if (name === "htmx:beforeOnLoad") { + var config = evt.detail.requestConfig; + // mutating call + if (config.verb !== "get" && evt.target.getAttribute('path-deps') !== 'ignore') { + refreshPath(config.path); + } + } + } + }); + + /** + * ******************** + * Expose functionality + * ******************** + */ + + _root.PathDeps = { + refresh: function(path) { + refreshPath(path); + } + }; + +}).call(this); diff --git a/static/packages/htmx/ext/path-params.js b/static/packages/htmx/ext/path-params.js new file mode 100644 index 0000000..462be0a --- /dev/null +++ b/static/packages/htmx/ext/path-params.js @@ -0,0 +1,15 @@ +if (htmx.version && !htmx.version.startsWith("1.")) { + console.warn("WARNING: You are using an htmx 1 extension with htmx " + htmx.version + + ". It is recommended that you move to the version of this extension found on https://htmx.org/extensions") +} +htmx.defineExtension('path-params', { + onEvent: function(name, evt) { + if (name === "htmx:configRequest") { + evt.detail.path = evt.detail.path.replace(/{([^}]+)}/g, function (_, param) { + var val = evt.detail.parameters[param]; + delete evt.detail.parameters[param]; + return val === undefined ? "{" + param + "}" : encodeURIComponent(val); + }) + } + } +}); diff --git a/static/packages/htmx/ext/preload.js b/static/packages/htmx/ext/preload.js new file mode 100644 index 0000000..ac3ef5c --- /dev/null +++ b/static/packages/htmx/ext/preload.js @@ -0,0 +1,151 @@ +if (htmx.version && !htmx.version.startsWith("1.")) { + console.warn("WARNING: You are using an htmx 1 extension with htmx " + htmx.version + + ". It is recommended that you move to the version of this extension found on https://htmx.org/extensions") +} +// This adds the "preload" extension to htmx. By default, this will +// preload the targets of any tags with `href` or `hx-get` attributes +// if they also have a `preload` attribute as well. See documentation +// for more details +htmx.defineExtension("preload", { + + onEvent: function(name, event) { + + // Only take actions on "htmx:afterProcessNode" + if (name !== "htmx:afterProcessNode") { + return; + } + + // SOME HELPER FUNCTIONS WE'LL NEED ALONG THE WAY + + // attr gets the closest non-empty value from the attribute. + var attr = function(node, property) { + if (node == undefined) {return undefined;} + return node.getAttribute(property) || node.getAttribute("data-" + property) || attr(node.parentElement, property) + } + + // load handles the actual HTTP fetch, and uses htmx.ajax in cases where we're + // preloading an htmx resource (this sends the same HTTP headers as a regular htmx request) + var load = function(node) { + + // Called after a successful AJAX request, to mark the + // content as loaded (and prevent additional AJAX calls.) + var done = function(html) { + if (!node.preloadAlways) { + node.preloadState = "DONE" + } + + if (attr(node, "preload-images") == "true") { + document.createElement("div").innerHTML = html // create and populate a node to load linked resources, too. + } + } + + return function() { + + // If this value has already been loaded, then do not try again. + if (node.preloadState !== "READY") { + return; + } + + // Special handling for HX-GET - use built-in htmx.ajax function + // so that headers match other htmx requests, then set + // node.preloadState = TRUE so that requests are not duplicated + // in the future + var hxGet = node.getAttribute("hx-get") || node.getAttribute("data-hx-get") + if (hxGet) { + htmx.ajax("GET", hxGet, { + source: node, + handler:function(elt, info) { + done(info.xhr.responseText); + } + }); + return; + } + + // Otherwise, perform a standard xhr request, then set + // node.preloadState = TRUE so that requests are not duplicated + // in the future. + if (node.getAttribute("href")) { + var r = new XMLHttpRequest(); + r.open("GET", node.getAttribute("href")); + r.onload = function() {done(r.responseText);}; + r.send(); + return; + } + } + } + + // This function processes a specific node and sets up event handlers. + // We'll search for nodes and use it below. + var init = function(node) { + + // If this node DOES NOT include a "GET" transaction, then there's nothing to do here. + if (node.getAttribute("href") + node.getAttribute("hx-get") + node.getAttribute("data-hx-get") == "") { + return; + } + + // Guarantee that we only initialize each node once. + if (node.preloadState !== undefined) { + return; + } + + // Get event name from config. + var on = attr(node, "preload") || "mousedown" + const always = on.indexOf("always") !== -1 + if (always) { + on = on.replace('always', '').trim() + } + + // FALL THROUGH to here means we need to add an EventListener + + // Apply the listener to the node + node.addEventListener(on, function(evt) { + if (node.preloadState === "PAUSE") { // Only add one event listener + node.preloadState = "READY"; // Required for the `load` function to trigger + + // Special handling for "mouseover" events. Wait 100ms before triggering load. + if (on === "mouseover") { + window.setTimeout(load(node), 100); + } else { + load(node)() // all other events trigger immediately. + } + } + }) + + // Special handling for certain built-in event handlers + switch (on) { + + case "mouseover": + // Mirror `touchstart` events (fires immediately) + node.addEventListener("touchstart", load(node)); + + // WHhen the mouse leaves, immediately disable the preload + node.addEventListener("mouseout", function(evt) { + if ((evt.target === node) && (node.preloadState === "READY")) { + node.preloadState = "PAUSE"; + } + }) + break; + + case "mousedown": + // Mirror `touchstart` events (fires immediately) + node.addEventListener("touchstart", load(node)); + break; + } + + // Mark the node as ready to run. + node.preloadState = "PAUSE"; + node.preloadAlways = always; + htmx.trigger(node, "preload:init") // This event can be used to load content immediately. + } + + // Search for all child nodes that have a "preload" attribute + event.target.querySelectorAll("[preload]").forEach(function(node) { + + // Initialize the node with the "preload" attribute + init(node) + + // Initialize all child elements that are anchors or have `hx-get` (use with care) + node.querySelectorAll("a,[hx-get],[data-hx-get]").forEach(init) + }) + } +}) diff --git a/static/packages/htmx/ext/rails-method.js b/static/packages/htmx/ext/rails-method.js new file mode 100644 index 0000000..632d86c --- /dev/null +++ b/static/packages/htmx/ext/rails-method.js @@ -0,0 +1,14 @@ +if (htmx.version && !htmx.version.startsWith("1.")) { + console.warn("WARNING: You are using an htmx 1 extension with htmx " + htmx.version + + ". It is recommended that you move to the version of this extension found on https://htmx.org/extensions") +} +htmx.defineExtension('rails-method', { + onEvent: function (name, evt) { + if (name === "configRequest.htmx") { + var methodOverride = evt.detail.headers['X-HTTP-Method-Override']; + if (methodOverride) { + evt.detail.parameters['_method'] = methodOverride; + } + } + } +}); diff --git a/static/packages/htmx/ext/remove-me.js b/static/packages/htmx/ext/remove-me.js new file mode 100644 index 0000000..21cd788 --- /dev/null +++ b/static/packages/htmx/ext/remove-me.js @@ -0,0 +1,31 @@ +(function(){ + if (htmx.version && !htmx.version.startsWith("1.")) { + console.warn("WARNING: You are using an htmx 1 extension with htmx " + htmx.version + + ". It is recommended that you move to the version of this extension found on https://htmx.org/extensions") + } + function maybeRemoveMe(elt) { + var timing = elt.getAttribute("remove-me") || elt.getAttribute("data-remove-me"); + if (timing) { + setTimeout(function () { + elt.parentElement.removeChild(elt); + }, htmx.parseInterval(timing)); + } + } + + htmx.defineExtension('remove-me', { + onEvent: function (name, evt) { + if (name === "htmx:afterProcessNode") { + var elt = evt.detail.elt; + if (elt.getAttribute) { + maybeRemoveMe(elt); + if (elt.querySelectorAll) { + var children = elt.querySelectorAll("[remove-me], [data-remove-me]"); + for (var i = 0; i < children.length; i++) { + maybeRemoveMe(children[i]); + } + } + } + } + } + }); +})(); diff --git a/static/packages/htmx/ext/response-targets.js b/static/packages/htmx/ext/response-targets.js new file mode 100644 index 0000000..021ec0d --- /dev/null +++ b/static/packages/htmx/ext/response-targets.js @@ -0,0 +1,135 @@ +(function(){ + + if (htmx.version && !htmx.version.startsWith("1.")) { + console.warn("WARNING: You are using an htmx 1 extension with htmx " + htmx.version + + ". It is recommended that you move to the version of this extension found on https://htmx.org/extensions") + } + + /** @type {import("../htmx").HtmxInternalApi} */ + var api; + + var attrPrefix = 'hx-target-'; + + // IE11 doesn't support string.startsWith + function startsWith(str, prefix) { + return str.substring(0, prefix.length) === prefix + } + + /** + * @param {HTMLElement} elt + * @param {number} respCode + * @returns {HTMLElement | null} + */ + function getRespCodeTarget(elt, respCodeNumber) { + if (!elt || !respCodeNumber) return null; + + var respCode = respCodeNumber.toString(); + + // '*' is the original syntax, as the obvious character for a wildcard. + // The 'x' alternative was added for maximum compatibility with HTML + // templating engines, due to ambiguity around which characters are + // supported in HTML attributes. + // + // Start with the most specific possible attribute and generalize from + // there. + var attrPossibilities = [ + respCode, + + respCode.substr(0, 2) + '*', + respCode.substr(0, 2) + 'x', + + respCode.substr(0, 1) + '*', + respCode.substr(0, 1) + 'x', + respCode.substr(0, 1) + '**', + respCode.substr(0, 1) + 'xx', + + '*', + 'x', + '***', + 'xxx', + ]; + if (startsWith(respCode, '4') || startsWith(respCode, '5')) { + attrPossibilities.push('error'); + } + + for (var i = 0; i < attrPossibilities.length; i++) { + var attr = attrPrefix + attrPossibilities[i]; + var attrValue = api.getClosestAttributeValue(elt, attr); + if (attrValue) { + if (attrValue === "this") { + return api.findThisElement(elt, attr); + } else { + return api.querySelectorExt(elt, attrValue); + } + } + } + + return null; + } + + /** @param {Event} evt */ + function handleErrorFlag(evt) { + if (evt.detail.isError) { + if (htmx.config.responseTargetUnsetsError) { + evt.detail.isError = false; + } + } else if (htmx.config.responseTargetSetsError) { + evt.detail.isError = true; + } + } + + htmx.defineExtension('response-targets', { + + /** @param {import("../htmx").HtmxInternalApi} apiRef */ + init: function (apiRef) { + api = apiRef; + + if (htmx.config.responseTargetUnsetsError === undefined) { + htmx.config.responseTargetUnsetsError = true; + } + if (htmx.config.responseTargetSetsError === undefined) { + htmx.config.responseTargetSetsError = false; + } + if (htmx.config.responseTargetPrefersExisting === undefined) { + htmx.config.responseTargetPrefersExisting = false; + } + if (htmx.config.responseTargetPrefersRetargetHeader === undefined) { + htmx.config.responseTargetPrefersRetargetHeader = true; + } + }, + + /** + * @param {string} name + * @param {Event} evt + */ + onEvent: function (name, evt) { + if (name === "htmx:beforeSwap" && + evt.detail.xhr && + evt.detail.xhr.status !== 200) { + if (evt.detail.target) { + if (htmx.config.responseTargetPrefersExisting) { + evt.detail.shouldSwap = true; + handleErrorFlag(evt); + return true; + } + if (htmx.config.responseTargetPrefersRetargetHeader && + evt.detail.xhr.getAllResponseHeaders().match(/HX-Retarget:/i)) { + evt.detail.shouldSwap = true; + handleErrorFlag(evt); + return true; + } + } + if (!evt.detail.requestConfig) { + return true; + } + var target = getRespCodeTarget(evt.detail.requestConfig.elt, evt.detail.xhr.status); + if (target) { + handleErrorFlag(evt); + evt.detail.shouldSwap = true; + evt.detail.target = target; + } + return true; + } + } + }); +})(); diff --git a/static/packages/htmx/ext/restored.js b/static/packages/htmx/ext/restored.js new file mode 100644 index 0000000..a314b07 --- /dev/null +++ b/static/packages/htmx/ext/restored.js @@ -0,0 +1,19 @@ +if (htmx.version && !htmx.version.startsWith("1.")) { + console.warn("WARNING: You are using an htmx 1 extension with htmx " + htmx.version + + ". It is recommended that you move to the version of this extension found on https://htmx.org/extensions") +} +htmx.defineExtension('restored', { + onEvent : function(name, evt) { + if (name === 'htmx:restored'){ + var restoredElts = evt.detail.document.querySelectorAll( + "[hx-trigger='restored'],[data-hx-trigger='restored']" + ); + // need a better way to do this, would prefer to just trigger from evt.detail.elt + var foundElt = Array.from(restoredElts).find( + (x) => (x.outerHTML === evt.detail.elt.outerHTML) + ); + var restoredEvent = evt.detail.triggerEvent(foundElt, 'restored'); + } + return; + } +}) diff --git a/static/packages/htmx/ext/sse.js b/static/packages/htmx/ext/sse.js new file mode 100644 index 0000000..16eee54 --- /dev/null +++ b/static/packages/htmx/ext/sse.js @@ -0,0 +1,374 @@ +/* +Server Sent Events Extension +============================ +This extension adds support for Server Sent Events to htmx. See /www/extensions/sse.md for usage instructions. + +*/ + +(function() { + + if (htmx.version && !htmx.version.startsWith("1.")) { + console.warn("WARNING: You are using an htmx 1 extension with htmx " + htmx.version + + ". It is recommended that you move to the version of this extension found on https://htmx.org/extensions") + } + + /** @type {import("../htmx").HtmxInternalApi} */ + var api; + + htmx.defineExtension("sse", { + + /** + * Init saves the provided reference to the internal HTMX API. + * + * @param {import("../htmx").HtmxInternalApi} api + * @returns void + */ + init: function(apiRef) { + // store a reference to the internal API. + api = apiRef; + + // set a function in the public API for creating new EventSource objects + if (htmx.createEventSource == undefined) { + htmx.createEventSource = createEventSource; + } + }, + + /** + * onEvent handles all events passed to this extension. + * + * @param {string} name + * @param {Event} evt + * @returns void + */ + onEvent: function(name, evt) { + + var parent = evt.target || evt.detail.elt; + switch (name) { + + case "htmx:beforeCleanupElement": + var internalData = api.getInternalData(parent) + // Try to remove remove an EventSource when elements are removed + if (internalData.sseEventSource) { + internalData.sseEventSource.close(); + } + + return; + + // Try to create EventSources when elements are processed + case "htmx:afterProcessNode": + ensureEventSourceOnElement(parent); + } + } + }); + + /////////////////////////////////////////////// + // HELPER FUNCTIONS + /////////////////////////////////////////////// + + + /** + * createEventSource is the default method for creating new EventSource objects. + * it is hoisted into htmx.config.createEventSource to be overridden by the user, if needed. + * + * @param {string} url + * @returns EventSource + */ + function createEventSource(url) { + return new EventSource(url, { withCredentials: true }); + } + + function splitOnWhitespace(trigger) { + return trigger.trim().split(/\s+/); + } + + function getLegacySSEURL(elt) { + var legacySSEValue = api.getAttributeValue(elt, "hx-sse"); + if (legacySSEValue) { + var values = splitOnWhitespace(legacySSEValue); + for (var i = 0; i < values.length; i++) { + var value = values[i].split(/:(.+)/); + if (value[0] === "connect") { + return value[1]; + } + } + } + } + + function getLegacySSESwaps(elt) { + var legacySSEValue = api.getAttributeValue(elt, "hx-sse"); + var returnArr = []; + if (legacySSEValue != null) { + var values = splitOnWhitespace(legacySSEValue); + for (var i = 0; i < values.length; i++) { + var value = values[i].split(/:(.+)/); + if (value[0] === "swap") { + returnArr.push(value[1]); + } + } + } + return returnArr; + } + + /** + * registerSSE looks for attributes that can contain sse events, right + * now hx-trigger and sse-swap and adds listeners based on these attributes too + * the closest event source + * + * @param {HTMLElement} elt + */ + function registerSSE(elt) { + // Add message handlers for every `sse-swap` attribute + queryAttributeOnThisOrChildren(elt, "sse-swap").forEach(function (child) { + // Find closest existing event source + var sourceElement = api.getClosestMatch(child, hasEventSource); + if (sourceElement == null) { + // api.triggerErrorEvent(elt, "htmx:noSSESourceError") + return null; // no eventsource in parentage, orphaned element + } + + // Set internalData and source + var internalData = api.getInternalData(sourceElement); + var source = internalData.sseEventSource; + + var sseSwapAttr = api.getAttributeValue(child, "sse-swap"); + if (sseSwapAttr) { + var sseEventNames = sseSwapAttr.split(","); + } else { + var sseEventNames = getLegacySSESwaps(child); + } + + for (var i = 0; i < sseEventNames.length; i++) { + var sseEventName = sseEventNames[i].trim(); + var listener = function(event) { + + // If the source is missing then close SSE + if (maybeCloseSSESource(sourceElement)) { + return; + } + + // If the body no longer contains the element, remove the listener + if (!api.bodyContains(child)) { + source.removeEventListener(sseEventName, listener); + return; + } + + // swap the response into the DOM and trigger a notification + if(!api.triggerEvent(elt, "htmx:sseBeforeMessage", event)) { + return; + } + swap(child, event.data); + api.triggerEvent(elt, "htmx:sseMessage", event); + }; + + // Register the new listener + api.getInternalData(child).sseEventListener = listener; + source.addEventListener(sseEventName, listener); + } + }); + + // Add message handlers for every `hx-trigger="sse:*"` attribute + queryAttributeOnThisOrChildren(elt, "hx-trigger").forEach(function(child) { + // Find closest existing event source + var sourceElement = api.getClosestMatch(child, hasEventSource); + if (sourceElement == null) { + // api.triggerErrorEvent(elt, "htmx:noSSESourceError") + return null; // no eventsource in parentage, orphaned element + } + + // Set internalData and source + var internalData = api.getInternalData(sourceElement); + var source = internalData.sseEventSource; + + var sseEventName = api.getAttributeValue(child, "hx-trigger"); + if (sseEventName == null) { + return; + } + + // Only process hx-triggers for events with the "sse:" prefix + if (sseEventName.slice(0, 4) != "sse:") { + return; + } + + // remove the sse: prefix from here on out + sseEventName = sseEventName.substr(4); + + var listener = function() { + if (maybeCloseSSESource(sourceElement)) { + return + } + + if (!api.bodyContains(child)) { + source.removeEventListener(sseEventName, listener); + } + } + }); + } + + /** + * ensureEventSourceOnElement creates a new EventSource connection on the provided element. + * If a usable EventSource already exists, then it is returned. If not, then a new EventSource + * is created and stored in the element's internalData. + * @param {HTMLElement} elt + * @param {number} retryCount + * @returns {EventSource | null} + */ + function ensureEventSourceOnElement(elt, retryCount) { + + if (elt == null) { + return null; + } + + // handle extension source creation attribute + queryAttributeOnThisOrChildren(elt, "sse-connect").forEach(function(child) { + var sseURL = api.getAttributeValue(child, "sse-connect"); + if (sseURL == null) { + return; + } + + ensureEventSource(child, sseURL, retryCount); + }); + + // handle legacy sse, remove for HTMX2 + queryAttributeOnThisOrChildren(elt, "hx-sse").forEach(function(child) { + var sseURL = getLegacySSEURL(child); + if (sseURL == null) { + return; + } + + ensureEventSource(child, sseURL, retryCount); + }); + + registerSSE(elt); + } + + function ensureEventSource(elt, url, retryCount) { + var source = htmx.createEventSource(url); + + source.onerror = function(err) { + + // Log an error event + api.triggerErrorEvent(elt, "htmx:sseError", { error: err, source: source }); + + // If parent no longer exists in the document, then clean up this EventSource + if (maybeCloseSSESource(elt)) { + return; + } + + // Otherwise, try to reconnect the EventSource + if (source.readyState === EventSource.CLOSED) { + retryCount = retryCount || 0; + var timeout = Math.random() * (2 ^ retryCount) * 500; + window.setTimeout(function() { + ensureEventSourceOnElement(elt, Math.min(7, retryCount + 1)); + }, timeout); + } + }; + + source.onopen = function(evt) { + api.triggerEvent(elt, "htmx:sseOpen", { source: source }); + } + + api.getInternalData(elt).sseEventSource = source; + } + + /** + * maybeCloseSSESource confirms that the parent element still exists. + * If not, then any associated SSE source is closed and the function returns true. + * + * @param {HTMLElement} elt + * @returns boolean + */ + function maybeCloseSSESource(elt) { + if (!api.bodyContains(elt)) { + var source = api.getInternalData(elt).sseEventSource; + if (source != undefined) { + source.close(); + // source = null + return true; + } + } + return false; + } + + /** + * queryAttributeOnThisOrChildren returns all nodes that contain the requested attributeName, INCLUDING THE PROVIDED ROOT ELEMENT. + * + * @param {HTMLElement} elt + * @param {string} attributeName + */ + function queryAttributeOnThisOrChildren(elt, attributeName) { + + var result = []; + + // If the parent element also contains the requested attribute, then add it to the results too. + if (api.hasAttribute(elt, attributeName)) { + result.push(elt); + } + + // Search all child nodes that match the requested attribute + elt.querySelectorAll("[" + attributeName + "], [data-" + attributeName + "]").forEach(function(node) { + result.push(node); + }); + + return result; + } + + /** + * @param {HTMLElement} elt + * @param {string} content + */ + function swap(elt, content) { + + api.withExtensions(elt, function(extension) { + content = extension.transformResponse(content, null, elt); + }); + + var swapSpec = api.getSwapSpecification(elt); + var target = api.getTarget(elt); + var settleInfo = api.makeSettleInfo(elt); + + api.selectAndSwap(swapSpec.swapStyle, target, elt, content, settleInfo); + + settleInfo.elts.forEach(function(elt) { + if (elt.classList) { + elt.classList.add(htmx.config.settlingClass); + } + api.triggerEvent(elt, 'htmx:beforeSettle'); + }); + + // Handle settle tasks (with delay if requested) + if (swapSpec.settleDelay > 0) { + setTimeout(doSettle(settleInfo), swapSpec.settleDelay); + } else { + doSettle(settleInfo)(); + } + } + + /** + * doSettle mirrors much of the functionality in htmx that + * settles elements after their content has been swapped. + * TODO: this should be published by htmx, and not duplicated here + * @param {import("../htmx").HtmxSettleInfo} settleInfo + * @returns () => void + */ + function doSettle(settleInfo) { + + return function() { + settleInfo.tasks.forEach(function(task) { + task.call(); + }); + + settleInfo.elts.forEach(function(elt) { + if (elt.classList) { + elt.classList.remove(htmx.config.settlingClass); + } + api.triggerEvent(elt, 'htmx:afterSettle'); + }); + } + } + + function hasEventSource(node) { + return api.getInternalData(node).sseEventSource != null; + } + +})(); diff --git a/static/packages/htmx/ext/ws.js b/static/packages/htmx/ext/ws.js new file mode 100644 index 0000000..3d7e44d --- /dev/null +++ b/static/packages/htmx/ext/ws.js @@ -0,0 +1,481 @@ +/* +WebSockets Extension +============================ +This extension adds support for WebSockets to htmx. See /www/extensions/ws.md for usage instructions. +*/ + +(function () { + + if (htmx.version && !htmx.version.startsWith("1.")) { + console.warn("WARNING: You are using an htmx 1 extension with htmx " + htmx.version + + ". It is recommended that you move to the version of this extension found on https://htmx.org/extensions") + } + + /** @type {import("../htmx").HtmxInternalApi} */ + var api; + + htmx.defineExtension("ws", { + + /** + * init is called once, when this extension is first registered. + * @param {import("../htmx").HtmxInternalApi} apiRef + */ + init: function (apiRef) { + + // Store reference to internal API + api = apiRef; + + // Default function for creating new EventSource objects + if (!htmx.createWebSocket) { + htmx.createWebSocket = createWebSocket; + } + + // Default setting for reconnect delay + if (!htmx.config.wsReconnectDelay) { + htmx.config.wsReconnectDelay = "full-jitter"; + } + }, + + /** + * onEvent handles all events passed to this extension. + * + * @param {string} name + * @param {Event} evt + */ + onEvent: function (name, evt) { + var parent = evt.target || evt.detail.elt; + + switch (name) { + + // Try to close the socket when elements are removed + case "htmx:beforeCleanupElement": + + var internalData = api.getInternalData(parent) + + if (internalData.webSocket) { + internalData.webSocket.close(); + } + return; + + // Try to create websockets when elements are processed + case "htmx:beforeProcessNode": + forEach(queryAttributeOnThisOrChildren(parent, "ws-connect"), function (child) { + ensureWebSocket(child) + }); + forEach(queryAttributeOnThisOrChildren(parent, "ws-send"), function (child) { + ensureWebSocketSend(child) + }); + } + } + }); + + function splitOnWhitespace(trigger) { + return trigger.trim().split(/\s+/); + } + + function getLegacyWebsocketURL(elt) { + var legacySSEValue = api.getAttributeValue(elt, "hx-ws"); + if (legacySSEValue) { + var values = splitOnWhitespace(legacySSEValue); + for (var i = 0; i < values.length; i++) { + var value = values[i].split(/:(.+)/); + if (value[0] === "connect") { + return value[1]; + } + } + } + } + + /** + * ensureWebSocket creates a new WebSocket on the designated element, using + * the element's "ws-connect" attribute. + * @param {HTMLElement} socketElt + * @returns + */ + function ensureWebSocket(socketElt) { + + // If the element containing the WebSocket connection no longer exists, then + // do not connect/reconnect the WebSocket. + if (!api.bodyContains(socketElt)) { + return; + } + + // Get the source straight from the element's value + var wssSource = api.getAttributeValue(socketElt, "ws-connect") + + if (wssSource == null || wssSource === "") { + var legacySource = getLegacyWebsocketURL(socketElt); + if (legacySource == null) { + return; + } else { + wssSource = legacySource; + } + } + + // Guarantee that the wssSource value is a fully qualified URL + if (wssSource.indexOf("/") === 0) { + var base_part = location.hostname + (location.port ? ':' + location.port : ''); + if (location.protocol === 'https:') { + wssSource = "wss://" + base_part + wssSource; + } else if (location.protocol === 'http:') { + wssSource = "ws://" + base_part + wssSource; + } + } + + var socketWrapper = createWebsocketWrapper(socketElt, function () { + return htmx.createWebSocket(wssSource) + }); + + socketWrapper.addEventListener('message', function (event) { + if (maybeCloseWebSocketSource(socketElt)) { + return; + } + + var response = event.data; + if (!api.triggerEvent(socketElt, "htmx:wsBeforeMessage", { + message: response, + socketWrapper: socketWrapper.publicInterface + })) { + return; + } + + api.withExtensions(socketElt, function (extension) { + response = extension.transformResponse(response, null, socketElt); + }); + + var settleInfo = api.makeSettleInfo(socketElt); + var fragment = api.makeFragment(response); + + if (fragment.children.length) { + var children = Array.from(fragment.children); + for (var i = 0; i < children.length; i++) { + api.oobSwap(api.getAttributeValue(children[i], "hx-swap-oob") || "true", children[i], settleInfo); + } + } + + api.settleImmediately(settleInfo.tasks); + api.triggerEvent(socketElt, "htmx:wsAfterMessage", { message: response, socketWrapper: socketWrapper.publicInterface }) + }); + + // Put the WebSocket into the HTML Element's custom data. + api.getInternalData(socketElt).webSocket = socketWrapper; + } + + /** + * @typedef {Object} WebSocketWrapper + * @property {WebSocket} socket + * @property {Array<{message: string, sendElt: Element}>} messageQueue + * @property {number} retryCount + * @property {(message: string, sendElt: Element) => void} sendImmediately sendImmediately sends message regardless of websocket connection state + * @property {(message: string, sendElt: Element) => void} send + * @property {(event: string, handler: Function) => void} addEventListener + * @property {() => void} handleQueuedMessages + * @property {() => void} init + * @property {() => void} close + */ + /** + * + * @param socketElt + * @param socketFunc + * @returns {WebSocketWrapper} + */ + function createWebsocketWrapper(socketElt, socketFunc) { + var wrapper = { + socket: null, + messageQueue: [], + retryCount: 0, + + /** @type {Object} */ + events: {}, + + addEventListener: function (event, handler) { + if (this.socket) { + this.socket.addEventListener(event, handler); + } + + if (!this.events[event]) { + this.events[event] = []; + } + + this.events[event].push(handler); + }, + + sendImmediately: function (message, sendElt) { + if (!this.socket) { + api.triggerErrorEvent() + } + if (!sendElt || api.triggerEvent(sendElt, 'htmx:wsBeforeSend', { + message: message, + socketWrapper: this.publicInterface + })) { + this.socket.send(message); + sendElt && api.triggerEvent(sendElt, 'htmx:wsAfterSend', { + message: message, + socketWrapper: this.publicInterface + }) + } + }, + + send: function (message, sendElt) { + if (this.socket.readyState !== this.socket.OPEN) { + this.messageQueue.push({ message: message, sendElt: sendElt }); + } else { + this.sendImmediately(message, sendElt); + } + }, + + handleQueuedMessages: function () { + while (this.messageQueue.length > 0) { + var queuedItem = this.messageQueue[0] + if (this.socket.readyState === this.socket.OPEN) { + this.sendImmediately(queuedItem.message, queuedItem.sendElt); + this.messageQueue.shift(); + } else { + break; + } + } + }, + + init: function () { + if (this.socket && this.socket.readyState === this.socket.OPEN) { + // Close discarded socket + this.socket.close() + } + + // Create a new WebSocket and event handlers + /** @type {WebSocket} */ + var socket = socketFunc(); + + // The event.type detail is added for interface conformance with the + // other two lifecycle events (open and close) so a single handler method + // can handle them polymorphically, if required. + api.triggerEvent(socketElt, "htmx:wsConnecting", { event: { type: 'connecting' } }); + + this.socket = socket; + + socket.onopen = function (e) { + wrapper.retryCount = 0; + api.triggerEvent(socketElt, "htmx:wsOpen", { event: e, socketWrapper: wrapper.publicInterface }); + wrapper.handleQueuedMessages(); + } + + socket.onclose = function (e) { + // If socket should not be connected, stop further attempts to establish connection + // If Abnormal Closure/Service Restart/Try Again Later, then set a timer to reconnect after a pause. + if (!maybeCloseWebSocketSource(socketElt) && [1006, 1012, 1013].indexOf(e.code) >= 0) { + var delay = getWebSocketReconnectDelay(wrapper.retryCount); + setTimeout(function () { + wrapper.retryCount += 1; + wrapper.init(); + }, delay); + } + + // Notify client code that connection has been closed. Client code can inspect `event` field + // to determine whether closure has been valid or abnormal + api.triggerEvent(socketElt, "htmx:wsClose", { event: e, socketWrapper: wrapper.publicInterface }) + }; + + socket.onerror = function (e) { + api.triggerErrorEvent(socketElt, "htmx:wsError", { error: e, socketWrapper: wrapper }); + maybeCloseWebSocketSource(socketElt); + }; + + var events = this.events; + Object.keys(events).forEach(function (k) { + events[k].forEach(function (e) { + socket.addEventListener(k, e); + }) + }); + }, + + close: function () { + this.socket.close() + } + } + + wrapper.init(); + + wrapper.publicInterface = { + send: wrapper.send.bind(wrapper), + sendImmediately: wrapper.sendImmediately.bind(wrapper), + queue: wrapper.messageQueue + }; + + return wrapper; + } + + /** + * ensureWebSocketSend attaches trigger handles to elements with + * "ws-send" attribute + * @param {HTMLElement} elt + */ + function ensureWebSocketSend(elt) { + var legacyAttribute = api.getAttributeValue(elt, "hx-ws"); + if (legacyAttribute && legacyAttribute !== 'send') { + return; + } + + var webSocketParent = api.getClosestMatch(elt, hasWebSocket) + processWebSocketSend(webSocketParent, elt); + } + + /** + * hasWebSocket function checks if a node has webSocket instance attached + * @param {HTMLElement} node + * @returns {boolean} + */ + function hasWebSocket(node) { + return api.getInternalData(node).webSocket != null; + } + + /** + * processWebSocketSend adds event listeners to the
element so that + * messages can be sent to the WebSocket server when the form is submitted. + * @param {HTMLElement} socketElt + * @param {HTMLElement} sendElt + */ + function processWebSocketSend(socketElt, sendElt) { + var nodeData = api.getInternalData(sendElt); + var triggerSpecs = api.getTriggerSpecs(sendElt); + triggerSpecs.forEach(function (ts) { + api.addTriggerHandler(sendElt, ts, nodeData, function (elt, evt) { + if (maybeCloseWebSocketSource(socketElt)) { + return; + } + + /** @type {WebSocketWrapper} */ + var socketWrapper = api.getInternalData(socketElt).webSocket; + var headers = api.getHeaders(sendElt, api.getTarget(sendElt)); + var results = api.getInputValues(sendElt, 'post'); + var errors = results.errors; + var rawParameters = results.values; + var expressionVars = api.getExpressionVars(sendElt); + var allParameters = api.mergeObjects(rawParameters, expressionVars); + var filteredParameters = api.filterValues(allParameters, sendElt); + + var sendConfig = { + parameters: filteredParameters, + unfilteredParameters: allParameters, + headers: headers, + errors: errors, + + triggeringEvent: evt, + messageBody: undefined, + socketWrapper: socketWrapper.publicInterface + }; + + if (!api.triggerEvent(elt, 'htmx:wsConfigSend', sendConfig)) { + return; + } + + if (errors && errors.length > 0) { + api.triggerEvent(elt, 'htmx:validation:halted', errors); + return; + } + + var body = sendConfig.messageBody; + if (body === undefined) { + var toSend = Object.assign({}, sendConfig.parameters); + if (sendConfig.headers) + toSend['HEADERS'] = headers; + body = JSON.stringify(toSend); + } + + socketWrapper.send(body, elt); + + if (evt && api.shouldCancel(evt, elt)) { + evt.preventDefault(); + } + }); + }); + } + + /** + * getWebSocketReconnectDelay is the default easing function for WebSocket reconnects. + * @param {number} retryCount // The number of retries that have already taken place + * @returns {number} + */ + function getWebSocketReconnectDelay(retryCount) { + + /** @type {"full-jitter" | ((retryCount:number) => number)} */ + var delay = htmx.config.wsReconnectDelay; + if (typeof delay === 'function') { + return delay(retryCount); + } + if (delay === 'full-jitter') { + var exp = Math.min(retryCount, 6); + var maxDelay = 1000 * Math.pow(2, exp); + return maxDelay * Math.random(); + } + + logError('htmx.config.wsReconnectDelay must either be a function or the string "full-jitter"'); + } + + /** + * maybeCloseWebSocketSource checks to the if the element that created the WebSocket + * still exists in the DOM. If NOT, then the WebSocket is closed and this function + * returns TRUE. If the element DOES EXIST, then no action is taken, and this function + * returns FALSE. + * + * @param {*} elt + * @returns + */ + function maybeCloseWebSocketSource(elt) { + if (!api.bodyContains(elt)) { + api.getInternalData(elt).webSocket.close(); + return true; + } + return false; + } + + /** + * createWebSocket is the default method for creating new WebSocket objects. + * it is hoisted into htmx.createWebSocket to be overridden by the user, if needed. + * + * @param {string} url + * @returns WebSocket + */ + function createWebSocket(url) { + var sock = new WebSocket(url, []); + sock.binaryType = htmx.config.wsBinaryType; + return sock; + } + + /** + * queryAttributeOnThisOrChildren returns all nodes that contain the requested attributeName, INCLUDING THE PROVIDED ROOT ELEMENT. + * + * @param {HTMLElement} elt + * @param {string} attributeName + */ + function queryAttributeOnThisOrChildren(elt, attributeName) { + + var result = [] + + // If the parent element also contains the requested attribute, then add it to the results too. + if (api.hasAttribute(elt, attributeName) || api.hasAttribute(elt, "hx-ws")) { + result.push(elt); + } + + // Search all child nodes that match the requested attribute + elt.querySelectorAll("[" + attributeName + "], [data-" + attributeName + "], [data-hx-ws], [hx-ws]").forEach(function (node) { + result.push(node) + }) + + return result + } + + /** + * @template T + * @param {T[]} arr + * @param {(T) => void} func + */ + function forEach(arr, func) { + if (arr) { + for (var i = 0; i < arr.length; i++) { + func(arr[i]); + } + } + } + +})(); + diff --git a/static/packages/htmx/htmx.js b/static/packages/htmx/htmx.js new file mode 100644 index 0000000..370cc0f --- /dev/null +++ b/static/packages/htmx/htmx.js @@ -0,0 +1,5261 @@ +var htmx = (function() { + 'use strict' + + // Public API + const htmx = { + // Tsc madness here, assigning the functions directly results in an invalid TypeScript output, but reassigning is fine + /* Event processing */ + /** @type {typeof onLoadHelper} */ + onLoad: null, + /** @type {typeof processNode} */ + process: null, + /** @type {typeof addEventListenerImpl} */ + on: null, + /** @type {typeof removeEventListenerImpl} */ + off: null, + /** @type {typeof triggerEvent} */ + trigger: null, + /** @type {typeof ajaxHelper} */ + ajax: null, + /* DOM querying helpers */ + /** @type {typeof find} */ + find: null, + /** @type {typeof findAll} */ + findAll: null, + /** @type {typeof closest} */ + closest: null, + /** + * Returns the input values that would resolve for a given element via the htmx value resolution mechanism + * + * @see https://htmx.org/api/#values + * + * @param {Element} elt the element to resolve values on + * @param {HttpVerb} type the request type (e.g. **get** or **post**) non-GET's will include the enclosing form of the element. Defaults to **post** + * @returns {Object} + */ + values: function(elt, type) { + const inputValues = getInputValues(elt, type || 'post') + return inputValues.values + }, + /* DOM manipulation helpers */ + /** @type {typeof removeElement} */ + remove: null, + /** @type {typeof addClassToElement} */ + addClass: null, + /** @type {typeof removeClassFromElement} */ + removeClass: null, + /** @type {typeof toggleClassOnElement} */ + toggleClass: null, + /** @type {typeof takeClassForElement} */ + takeClass: null, + /** @type {typeof swap} */ + swap: null, + /* Extension entrypoints */ + /** @type {typeof defineExtension} */ + defineExtension: null, + /** @type {typeof removeExtension} */ + removeExtension: null, + /* Debugging */ + /** @type {typeof logAll} */ + logAll: null, + /** @type {typeof logNone} */ + logNone: null, + /* Debugging */ + /** + * The logger htmx uses to log with + * + * @see https://htmx.org/api/#logger + */ + logger: null, + /** + * A property holding the configuration htmx uses at runtime. + * + * Note that using a [meta tag](https://htmx.org/docs/#config) is the preferred mechanism for setting these properties. + * + * @see https://htmx.org/api/#config + */ + config: { + /** + * Whether to use history. + * @type boolean + * @default true + */ + historyEnabled: true, + /** + * The number of pages to keep in **localStorage** for history support. + * @type number + * @default 10 + */ + historyCacheSize: 10, + /** + * @type boolean + * @default false + */ + refreshOnHistoryMiss: false, + /** + * The default swap style to use if **[hx-swap](https://htmx.org/attributes/hx-swap)** is omitted. + * @type HtmxSwapStyle + * @default 'innerHTML' + */ + defaultSwapStyle: 'innerHTML', + /** + * The default delay between receiving a response from the server and doing the swap. + * @type number + * @default 0 + */ + defaultSwapDelay: 0, + /** + * The default delay between completing the content swap and settling attributes. + * @type number + * @default 20 + */ + defaultSettleDelay: 20, + /** + * If true, htmx will inject a small amount of CSS into the page to make indicators invisible unless the **htmx-indicator** class is present. + * @type boolean + * @default true + */ + includeIndicatorStyles: true, + /** + * The class to place on indicators when a request is in flight. + * @type string + * @default 'htmx-indicator' + */ + indicatorClass: 'htmx-indicator', + /** + * The class to place on triggering elements when a request is in flight. + * @type string + * @default 'htmx-request' + */ + requestClass: 'htmx-request', + /** + * The class to temporarily place on elements that htmx has added to the DOM. + * @type string + * @default 'htmx-added' + */ + addedClass: 'htmx-added', + /** + * The class to place on target elements when htmx is in the settling phase. + * @type string + * @default 'htmx-settling' + */ + settlingClass: 'htmx-settling', + /** + * The class to place on target elements when htmx is in the swapping phase. + * @type string + * @default 'htmx-swapping' + */ + swappingClass: 'htmx-swapping', + /** + * Allows the use of eval-like functionality in htmx, to enable **hx-vars**, trigger conditions & script tag evaluation. Can be set to **false** for CSP compatibility. + * @type boolean + * @default true + */ + allowEval: true, + /** + * If set to false, disables the interpretation of script tags. + * @type boolean + * @default true + */ + allowScriptTags: true, + /** + * If set, the nonce will be added to inline scripts. + * @type string + * @default '' + */ + inlineScriptNonce: '', + /** + * If set, the nonce will be added to inline styles. + * @type string + * @default '' + */ + inlineStyleNonce: '', + /** + * The attributes to settle during the settling phase. + * @type string[] + * @default ['class', 'style', 'width', 'height'] + */ + attributesToSettle: ['class', 'style', 'width', 'height'], + /** + * Allow cross-site Access-Control requests using credentials such as cookies, authorization headers or TLS client certificates. + * @type boolean + * @default false + */ + withCredentials: false, + /** + * @type number + * @default 0 + */ + timeout: 0, + /** + * The default implementation of **getWebSocketReconnectDelay** for reconnecting after unexpected connection loss by the event code **Abnormal Closure**, **Service Restart** or **Try Again Later**. + * @type {'full-jitter' | ((retryCount:number) => number)} + * @default "full-jitter" + */ + wsReconnectDelay: 'full-jitter', + /** + * The type of binary data being received over the WebSocket connection + * @type BinaryType + * @default 'blob' + */ + wsBinaryType: 'blob', + /** + * @type string + * @default '[hx-disable], [data-hx-disable]' + */ + disableSelector: '[hx-disable], [data-hx-disable]', + /** + * @type {'auto' | 'instant' | 'smooth'} + * @default 'instant' + */ + scrollBehavior: 'instant', + /** + * If the focused element should be scrolled into view. + * @type boolean + * @default false + */ + defaultFocusScroll: false, + /** + * If set to true htmx will include a cache-busting parameter in GET requests to avoid caching partial responses by the browser + * @type boolean + * @default false + */ + getCacheBusterParam: false, + /** + * If set to true, htmx will use the View Transition API when swapping in new content. + * @type boolean + * @default false + */ + globalViewTransitions: false, + /** + * htmx will format requests with these methods by encoding their parameters in the URL, not the request body + * @type {(HttpVerb)[]} + * @default ['get', 'delete'] + */ + methodsThatUseUrlParams: ['get', 'delete'], + /** + * If set to true, disables htmx-based requests to non-origin hosts. + * @type boolean + * @default false + */ + selfRequestsOnly: true, + /** + * If set to true htmx will not update the title of the document when a title tag is found in new content + * @type boolean + * @default false + */ + ignoreTitle: false, + /** + * Whether the target of a boosted element is scrolled into the viewport. + * @type boolean + * @default true + */ + scrollIntoViewOnBoost: true, + /** + * The cache to store evaluated trigger specifications into. + * You may define a simple object to use a never-clearing cache, or implement your own system using a [proxy object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Proxy) + * @type {Object|null} + * @default null + */ + triggerSpecsCache: null, + /** @type boolean */ + disableInheritance: false, + /** @type HtmxResponseHandlingConfig[] */ + responseHandling: [ + { code: '204', swap: false }, + { code: '[23]..', swap: true }, + { code: '[45]..', swap: false, error: true } + ], + /** + * Whether to process OOB swaps on elements that are nested within the main response element. + * @type boolean + * @default true + */ + allowNestedOobSwaps: true + }, + /** @type {typeof parseInterval} */ + parseInterval: null, + /** @type {typeof internalEval} */ + _: null, + version: '2.0.4' + } + // Tsc madness part 2 + htmx.onLoad = onLoadHelper + htmx.process = processNode + htmx.on = addEventListenerImpl + htmx.off = removeEventListenerImpl + htmx.trigger = triggerEvent + htmx.ajax = ajaxHelper + htmx.find = find + htmx.findAll = findAll + htmx.closest = closest + htmx.remove = removeElement + htmx.addClass = addClassToElement + htmx.removeClass = removeClassFromElement + htmx.toggleClass = toggleClassOnElement + htmx.takeClass = takeClassForElement + htmx.swap = swap + htmx.defineExtension = defineExtension + htmx.removeExtension = removeExtension + htmx.logAll = logAll + htmx.logNone = logNone + htmx.parseInterval = parseInterval + htmx._ = internalEval + + const internalAPI = { + addTriggerHandler, + bodyContains, + canAccessLocalStorage, + findThisElement, + filterValues, + swap, + hasAttribute, + getAttributeValue, + getClosestAttributeValue, + getClosestMatch, + getExpressionVars, + getHeaders, + getInputValues, + getInternalData, + getSwapSpecification, + getTriggerSpecs, + getTarget, + makeFragment, + mergeObjects, + makeSettleInfo, + oobSwap, + querySelectorExt, + settleImmediately, + shouldCancel, + triggerEvent, + triggerErrorEvent, + withExtensions + } + + const VERBS = ['get', 'post', 'put', 'delete', 'patch'] + const VERB_SELECTOR = VERBS.map(function(verb) { + return '[hx-' + verb + '], [data-hx-' + verb + ']' + }).join(', ') + + //= =================================================================== + // Utilities + //= =================================================================== + + /** + * Parses an interval string consistent with the way htmx does. Useful for plugins that have timing-related attributes. + * + * Caution: Accepts an int followed by either **s** or **ms**. All other values use **parseFloat** + * + * @see https://htmx.org/api/#parseInterval + * + * @param {string} str timing string + * @returns {number|undefined} + */ + function parseInterval(str) { + if (str == undefined) { + return undefined + } + + let interval = NaN + if (str.slice(-2) == 'ms') { + interval = parseFloat(str.slice(0, -2)) + } else if (str.slice(-1) == 's') { + interval = parseFloat(str.slice(0, -1)) * 1000 + } else if (str.slice(-1) == 'm') { + interval = parseFloat(str.slice(0, -1)) * 1000 * 60 + } else { + interval = parseFloat(str) + } + return isNaN(interval) ? undefined : interval + } + + /** + * @param {Node} elt + * @param {string} name + * @returns {(string | null)} + */ + function getRawAttribute(elt, name) { + return elt instanceof Element && elt.getAttribute(name) + } + + /** + * @param {Element} elt + * @param {string} qualifiedName + * @returns {boolean} + */ + // resolve with both hx and data-hx prefixes + function hasAttribute(elt, qualifiedName) { + return !!elt.hasAttribute && (elt.hasAttribute(qualifiedName) || + elt.hasAttribute('data-' + qualifiedName)) + } + + /** + * + * @param {Node} elt + * @param {string} qualifiedName + * @returns {(string | null)} + */ + function getAttributeValue(elt, qualifiedName) { + return getRawAttribute(elt, qualifiedName) || getRawAttribute(elt, 'data-' + qualifiedName) + } + + /** + * @param {Node} elt + * @returns {Node | null} + */ + function parentElt(elt) { + const parent = elt.parentElement + if (!parent && elt.parentNode instanceof ShadowRoot) return elt.parentNode + return parent + } + + /** + * @returns {Document} + */ + function getDocument() { + return document + } + + /** + * @param {Node} elt + * @param {boolean} global + * @returns {Node|Document} + */ + function getRootNode(elt, global) { + return elt.getRootNode ? elt.getRootNode({ composed: global }) : getDocument() + } + + /** + * @param {Node} elt + * @param {(e:Node) => boolean} condition + * @returns {Node | null} + */ + function getClosestMatch(elt, condition) { + while (elt && !condition(elt)) { + elt = parentElt(elt) + } + + return elt || null + } + + /** + * @param {Element} initialElement + * @param {Element} ancestor + * @param {string} attributeName + * @returns {string|null} + */ + function getAttributeValueWithDisinheritance(initialElement, ancestor, attributeName) { + const attributeValue = getAttributeValue(ancestor, attributeName) + const disinherit = getAttributeValue(ancestor, 'hx-disinherit') + var inherit = getAttributeValue(ancestor, 'hx-inherit') + if (initialElement !== ancestor) { + if (htmx.config.disableInheritance) { + if (inherit && (inherit === '*' || inherit.split(' ').indexOf(attributeName) >= 0)) { + return attributeValue + } else { + return null + } + } + if (disinherit && (disinherit === '*' || disinherit.split(' ').indexOf(attributeName) >= 0)) { + return 'unset' + } + } + return attributeValue + } + + /** + * @param {Element} elt + * @param {string} attributeName + * @returns {string | null} + */ + function getClosestAttributeValue(elt, attributeName) { + let closestAttr = null + getClosestMatch(elt, function(e) { + return !!(closestAttr = getAttributeValueWithDisinheritance(elt, asElement(e), attributeName)) + }) + if (closestAttr !== 'unset') { + return closestAttr + } + } + + /** + * @param {Node} elt + * @param {string} selector + * @returns {boolean} + */ + function matches(elt, selector) { + // @ts-ignore: non-standard properties for browser compatibility + // noinspection JSUnresolvedVariable + const matchesFunction = elt instanceof Element && (elt.matches || elt.matchesSelector || elt.msMatchesSelector || elt.mozMatchesSelector || elt.webkitMatchesSelector || elt.oMatchesSelector) + return !!matchesFunction && matchesFunction.call(elt, selector) + } + + /** + * @param {string} str + * @returns {string} + */ + function getStartTag(str) { + const tagMatcher = /<([a-z][^\/\0>\x20\t\r\n\f]*)/i + const match = tagMatcher.exec(str) + if (match) { + return match[1].toLowerCase() + } else { + return '' + } + } + + /** + * @param {string} resp + * @returns {Document} + */ + function parseHTML(resp) { + const parser = new DOMParser() + return parser.parseFromString(resp, 'text/html') + } + + /** + * @param {DocumentFragment} fragment + * @param {Node} elt + */ + function takeChildrenFor(fragment, elt) { + while (elt.childNodes.length > 0) { + fragment.append(elt.childNodes[0]) + } + } + + /** + * @param {HTMLScriptElement} script + * @returns {HTMLScriptElement} + */ + function duplicateScript(script) { + const newScript = getDocument().createElement('script') + forEach(script.attributes, function(attr) { + newScript.setAttribute(attr.name, attr.value) + }) + newScript.textContent = script.textContent + newScript.async = false + if (htmx.config.inlineScriptNonce) { + newScript.nonce = htmx.config.inlineScriptNonce + } + return newScript + } + + /** + * @param {HTMLScriptElement} script + * @returns {boolean} + */ + function isJavaScriptScriptNode(script) { + return script.matches('script') && (script.type === 'text/javascript' || script.type === 'module' || script.type === '') + } + + /** + * we have to make new copies of script tags that we are going to insert because + * SOME browsers (not saying who, but it involves an element and an animal) don't + * execute scripts created in