132 lines
4.8 KiB
JavaScript
132 lines
4.8 KiB
JavaScript
htmx.defineExtension('disable-submit', {
|
|
onEvent: function (name, evt, data) {
|
|
/*
|
|
let elt = evt.detail.elt;
|
|
let result = elt.querySelectorAll('.hx-disable');
|
|
|
|
if (name === 'htmx:beforeRequest') {
|
|
result.forEach(element => element.disabled = true);
|
|
if (elt.classList.contains('hx-disable')) {
|
|
elt.disabled = true;}
|
|
|
|
} else if(name == 'htmx:afterRequest') {
|
|
result.forEach(element => element.disabled = false);
|
|
if (elt.classList.contains('hx-disable')) elt.disabled = false;
|
|
}
|
|
*/
|
|
}
|
|
})
|
|
|
|
htmx.defineExtension('rename-params', {
|
|
onEvent: function(name , evt) {
|
|
if (name === "htmx:configRequest") {
|
|
var normal = evt.detail.elt.getAttribute("hx-rename-params");
|
|
if (normal) {
|
|
normal = JSON.parse(normal);
|
|
for (const [key, value] of Object.entries(normal)) {
|
|
console.log(evt.detail.parameters)
|
|
evt.detail.parameters[value] = evt.detail.parameters[key];
|
|
delete evt.detail.parameters[key];
|
|
}
|
|
}
|
|
var exclusive = evt.detail.elt.getAttribute("hx-rename-params-ex");
|
|
if (exclusive) {
|
|
exclusive = JSON.parse(exclusive);
|
|
var params = {};
|
|
for (const [key, value] of Object.entries(exclusive)) {
|
|
var v = evt.detail.parameters[key]
|
|
if (v) {
|
|
params[value] = v;
|
|
}
|
|
}
|
|
evt.detail.parameters = params;
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
|
|
htmx.defineExtension('reactive-trigger', {
|
|
|
|
onEvent: function(name , evt) {
|
|
if (name === "htmx:beforeProcessNode") {
|
|
var element = evt.detail.elt;
|
|
var reactiveTrigger = element.getAttribute("hx-reactive-trigger");
|
|
if (reactiveTrigger) {
|
|
reactiveTrigger = JSON.parse(reactiveTrigger);
|
|
var reactiveSource = element.getAttribute("hx-reactive-source");
|
|
reactiveSource = reactiveSource ? document.querySelector(reactiveSource) : element.closest("form");
|
|
|
|
// var triggerString = Object.keys(reactiveTrigger).map(k => "change from:#" + reactiveSource.getAttribute("id") + " [name=\"" + k + "\"]").join(", ");
|
|
var triggerString = reactiveTrigger.map(k => "change from:" + "[name=\"" + k + "\"]").join(", ");
|
|
element.setAttribute("hx-trigger", triggerString);
|
|
}
|
|
} else if (name=="htmx:configRequest") {
|
|
var element = evt.detail.elt;
|
|
var reactiveTrigger = element.getAttribute("hx-reactive-trigger");
|
|
if (reactiveTrigger) {
|
|
reactiveTrigger = JSON.parse(reactiveTrigger);
|
|
var reactiveSource = element.getAttribute("hx-reactive-source");
|
|
reactiveSource = reactiveSource ? document.querySelector(reactiveSource) : element.closest("form");
|
|
for (key of reactiveTrigger) {
|
|
console.log( reactiveSource.querySelector(`[name="${key}"]`).value)
|
|
evt.detail.parameters[key] = reactiveSource.querySelector(`[name="${key}"]`).value || "";
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
function deepEqual(obj1, obj2) {
|
|
if (obj1 === obj2) {
|
|
return true; // Check for equality
|
|
}
|
|
|
|
if (typeof obj1 !== 'object' || typeof obj2 !== 'object' || obj1 === null || obj2 === null) {
|
|
return false; // Check if both are objects
|
|
}
|
|
|
|
const keys1 = Object.keys(obj1);
|
|
const keys2 = Object.keys(obj2);
|
|
|
|
if (keys1.length !== keys2.length) {
|
|
return false; // Check if they have the same number of properties
|
|
}
|
|
|
|
for (const key of keys1) {
|
|
if (!keys2.includes(key) || !deepEqual(obj1[key], obj2[key])) {
|
|
return false; // Recursively compare properties
|
|
}
|
|
}
|
|
|
|
return true; // Objects are deeply equal
|
|
}
|
|
|
|
htmx.defineExtension('trigger-filter', {
|
|
|
|
onEvent: function(name , evt) {
|
|
if (name=="htmx:beforeRequest") {
|
|
var element = evt.detail.elt;
|
|
console.log("HEREEE", element.lastParams, evt.detail.requestConfig.parameters)
|
|
if (!deepEqual(element.lastParams, evt.detail.requestConfig.parameters)) {
|
|
element.lastParams = evt.detail.requestConfig.parameters;
|
|
} else {
|
|
console.log("unchanged")
|
|
evt.preventDefault();
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
|
|
initDatepicker = function(elem) {
|
|
elem.dp = new Datepicker(elem, {format: "mm/dd/yyyy", autohide: true});
|
|
}
|
|
|
|
countRows = function(id) {
|
|
var table = document.querySelector(id);
|
|
var rows = table.querySelectorAll("tbody tr");
|
|
console.log("ROWS", rows.length);
|
|
return rows.length;
|
|
}
|