window.Hyperflux = class { constructor(path){ this.path = path || ''; if(this.path.split('').pop() === '/'){ this.path = this.path.slice(0,-1); } } callComponentAction(action, opts, cb){ if(opts && opts.body){ opts.values = opts.body; delete opts.body; } htmx.ajax('POST', this.path+'/@hx/'+action, opts).then(cb || (() => { // this code will be executed after the 'htmx:afterOnLoad' event, // and before the 'htmx:xhr:loadend' event })); } } window.flux_nav = function(evt){ if(evt.metaKey || evt.shiftKey || evt.ctrlKey) { evt.stopImmediatePropagation(); window.open(evt.target.getAttribute('href'), "_blank"); } if(evt.target.getAttribute('flux:link:active')){ if(evt.target.getAttribute('flux:link:group')){ let els = document.querySelectorAll("[flux\\:link\\:group='"+evt.target.getAttribute('flux:link:group')+"']"); [...els].forEach(el => { el.classList.remove(evt.target.getAttribute('flux:link:active')); }); } evt.target.classList.add(evt.target.getAttribute('flux:link:active')); } } window.flux_xhrprogress = function(e, target){ document.querySelector(target).value = (e.detail.loaded / e.detail.total) * 100; } window.HyperfluxComponent = class extends HTMLElement { connectedCallback() { this.render(); } render() { let prefix = ''; let vals = ''; let name = this.attributes.name.nodeValue; if(this.attributes.params){ vals = " hx-vals='"+this.attributes.params.nodeValue+"'"; } if(window.hyperfluxUri){ prefix = window.hyperfluxUri; } if(document.documentElement.dataset && document.documentElement.dataset.hyperfluxUri){ prefix = document.documentElement.dataset.hyperfluxUri; } this.outerHTML = '
'; } } window.customElements.define('hyperflux-component', HyperfluxComponent); document.addEventListener('DOMContentLoaded', () => { document.body.addEventListener('htmx:sseError', function(evt) { console.log('htmx:sseError', evt); }); document.body.addEventListener('htmx:sseOpen', function(evt) { console.log('htmx:sseOpen', evt); }); document.body.addEventListener('htmx:sseClose', function(evt) { console.log('htmx:sseClose', evt); }); document.body.addEventListener('htmx:configRequest', function(evt) { const attributes = evt.detail.elt.attributes; // csrf-token if(document.querySelector('meta[name="csrf-token"]')){ evt.detail.headers['X-CSRF-Token'] = document.querySelector('meta[name="csrf-token"]').getAttribute('content'); } // flux:body | Include attributes on the body for (var key in attributes) { if (typeof attributes[key] != 'function'){ if(attributes[key].name){ let exp = attributes[key].name.split(':'); // flux:body:* if(exp.length === 3 && exp[0] === 'flux' && exp[1] === 'body'){ evt.detail.parameters[exp[2]] = evt.detail.elt.getAttribute(attributes[key].name); } // flux:body if(exp.length === 2 && exp[0] === 'flux' && exp[1] === 'body'){ const j = JSON.parse(evt.detail.elt.getAttribute(attributes[key].name)); //console.log('J', j); Object.keys(j).forEach(prop => { if(!evt.detail.parameters[prop]){ evt.detail.parameters[prop] = JSON.stringify(j[prop]); } }); } } } } // flux:multipart if(evt.detail.elt.getAttribute('hx-encoding') === 'multipart/form-data'){ let files = {} let fileInputs = evt.detail.elt.querySelectorAll("input[type='file']"); let fs = [...fileInputs]; fs.forEach(f => { console.log('F', f.getAttribute('name'), f.files); let fileArr = [...f.files]; // multiple if(f.getAttribute('name').indexOf('[]') !== -1){ if(!files[f.getAttribute('name')+':meta']){ files[f.getAttribute('name')+':meta'] = []; } console.log('params', files); fileArr.forEach(file => { files[f.getAttribute('name')+':meta'].push({ name : file.name, size : file.size, type : file.type, }) }); // single } else { if(fileArr[0]){ files[f.getAttribute('name')+':meta'] = { name : fileArr[0].name, size : fileArr[0].size, type : fileArr[0].type, }; } } }); Object.keys(files).forEach(k => { evt.detail.parameters[k] = JSON.stringify(files[k]); }); } }); document.body.addEventListener('htmx:afterRequest', function(evt) { // session expired if(evt.detail.xhr.status === 419){ alert(evt.detail.xhr.responseText); window.location.reload(); } }); // hyperflux:hotswap document.addEventListener("hyperflux:hotswap", function(evt){ console.log('hyperflux:hotswap', evt.detail.items); evt.detail.items.forEach(item => { if(document.querySelector(item.target)){ console.log(item.target); //htmx.ajax('GET', item.contentUrl, { target:item.target, swap:item.swap }); //htmx.swap(item.target, item.content, {swapStyle: item.swap }); fetch(item.contentUrl, { credentials: 'include', method: 'get', }) .then(response => response.text()) .then(content => { htmx.swap(item.target, content, { swapStyle: item.swap }); }) .catch((error) => { console.error('Error:', error); }); } }); }); });