instajax
Version:
Instantly move your multi page application navigations to AJAX
8 lines (7 loc) • 5 kB
JavaScript
/*!
* instajax v1.7.1
* Author: Ufuk Bakan (println.ufukbakan@gmail.com)
* Licensed under AGPL-3.0-only
* See https://www.gnu.org/licenses/agpl-3.0.html for more information.
*/
var y=(e,o,r)=>new Promise((s,n)=>{var d=u=>{try{h(r.next(u))}catch(m){n(m)}},v=u=>{try{h(r.throw(u))}catch(m){n(m)}},h=u=>u.done?s(u.value):Promise.resolve(u.value).then(d,v);h((r=r.apply(e,o)).next())});function x(e){let r=new DOMParser().parseFromString(e,"text/html"),s,n,d=!1,v=/<html[^>]*>/i.test(e),h=/<head[^>]*>/i.test(e),u=/<body[^>]*>/i.test(e);if(v)s=r.documentElement,n=document.documentElement,d=!0;else if(h)s=r.head,n=document.head,d=!0;else if(u)s=r.body,n=document.body,d=!0;else{let t=document.createElement("div");Array.from(r.body.childNodes).forEach(a=>t.appendChild(a.cloneNode(!0)));let c=m(t);n=document.body.querySelector(c),s=n?t.firstChild:t,d=!!n,n=n||document.body}function m(t){return t.id?`#${t.id}`:t.className?`.${t.className}`:t.getAttributeNames()[0]?`[${t.getAttributeNames()[0]}="${t.getAttribute(t.getAttributeNames()[0])}"]`:t.tagName}function C(t,i){if(!i){t.remove();return}if(i.nodeName==="SCRIPT"){let c=!1;t.textContent!==i.textContent&&(c=!0),t.attributes.length!==i.attributes.length&&(c=!0);for(let a of i.attributes)t.getAttribute(a.name)!==a.value&&(c=!0);if(c){let a=document.createElement("script");a.textContent=i.textContent;for(let p of i.attributes)a.setAttribute(p.name,p.value);t.parentNode.replaceChild(a,t)}return}if(t.nodeType!==i.nodeType||t.nodeName!==i.nodeName){t.replaceWith(i.cloneNode(!0));return}if(t.nodeType===Node.TEXT_NODE){t.textContent!==i.textContent&&(t.textContent=i.textContent);return}if(t.nodeType===Node.ELEMENT_NODE){let c=Array.from(t.attributes),a=Array.from(i.attributes);for(let l of c)i.hasAttribute(l.name)||t.removeAttribute(l.name);for(let l of a)t.getAttribute(l.name)!==l.value&&t.setAttribute(l.name,l.value);k(t,i)}}function k(t,i){let c=Array.from(i.childNodes),a=Array.from(t.childNodes),l=Math.max(a.length,c.length);for(let p=0;p<l;p++){let b=a[p],g=c[p];b&&g?C(b,g):!b&&g?t.appendChild(g.cloneNode(!0)):b&&!g&&b.remove()}}if(d)C(n,s);else{for(;n.firstChild;)n.removeChild(n.firstChild);Array.from(s.childNodes).forEach(t=>{n.appendChild(t.cloneNode(!0))})}}var w='<body><style>.error-icon{width:64px;height:64px;background-color:#ff4d4d;border-radius:50%;display:inline-flex;justify-content:center;align-items:center;margin-bottom:1rem}.error-icon::after{content:"!";font-size:48px;font-weight:700;color:#fff}.error-description{font-size:16px}.instajax-reload{cursor:pointer;padding:.5rem 1rem;background:0 0;outline-color:currentColor;border-radius:4px;color:inherit}</style><center><div class=error-icon></div><p class=error-description>%error%</p><button class=instajax-reload onclick=window.location.reload()><svg height=24 viewBox="0 0 24 24"width=24 xmlns=http://www.w3.org/2000/svg><path d="M13.5 2c-5.621 0-10.211 4.443-10.475 10h-3.025l5 6.625 5-6.625h-2.975c.257-3.351 3.06-6 6.475-6 3.584 0 6.5 2.916 6.5 6.5s-2.916 6.5-6.5 6.5c-1.863 0-3.542-.793-4.728-2.053l-2.427 3.216c1.877 1.754 4.389 2.837 7.155 2.837 5.79 0 10.5-4.71 10.5-10.5s-4.71-10.5-10.5-10.5z"fill=currentColor /></svg></button></center>'.trim();var f={initialized:!1,errorTemplate:w,previousPathName:typeof window!="undefined"?window.location.pathname:""};function S(e,o){switch(e){case"push":history.pushState(null,"",o),window.dispatchEvent(new Event("pushstate"));break;case"replace":history.replaceState(null,"",o),window.dispatchEvent(new Event("replacestate"));break;case"pop":break;default:console.error("Invalid history mode");break}}function T(e,o="push"){return y(this,null,function*(){let r=document.querySelector(".instajax-progress-bar");r&&r.classList.add("loading");let s;try{s=yield(yield fetch(e,{headers:{"X-Requested-With":"XMLHttpRequest"}})).text()}catch(n){s=f.errorTemplate.replaceAll("%error%",n.message)}x(s),S(o,e),window.dispatchEvent(new Event("load"))})}var E=new Set;function A(){document.querySelectorAll("a:not(.skip-instajax)").forEach(e=>{E.has(e)||(e.addEventListener("click",o=>{let r=e.getAttribute("href")||"#";r.lastIndexOf("#")<r.lastIndexOf("/")&&(o.preventDefault(),r&&(!r.startsWith("http")||new URL(r).origin===location.origin)&&T(r))}),E.add(e))})}function D(){return y(this,null,function*(){window.addEventListener("load",()=>{f.previousPathName=location.pathname;let e=document.querySelector(".instajax-progress-bar");e&&e.classList.remove("loading"),f.initialized||(A(),window.addEventListener("load",A),f.initialized=!0)}),window.addEventListener("popstate",()=>y(this,null,function*(){let e=location.pathname,{previousPathName:o}=f;o!==e&&(yield T(location.href,"pop")),f.previousPathName=e}))})}typeof window!="undefined"&&D();function O(){return y(this,arguments,function*({errorHTML:e=w,initialPathName:o=""}={}){o&&(f.previousPathName=o),e.startsWith("url(")&&(e=yield fetch(e.slice(5,-2)).then(r=>r.text())),e&&(f.errorTemplate=e)})}export{O as configure,O as default,x as morphDOM};