UNPKG

jdm_javascript_dom_manipulator

Version:
3 lines (2 loc) 16.3 kB
var Jdm=function(t){"use strict";class e{static debounce(t,e=300){let n;return(...i)=>{clearTimeout(n),n=setTimeout((()=>{t.apply(this,i)}),e)}}static genEvent(t,e,n,i=!0){t.dispatchEvent(new CustomEvent(e,{detail:n,bubbles:i}))}static getTag(t){return t.tagName?.toLowerCase()}}class n{constructor(t=250,e="ease-in-out",n="forwards",i=0,s="replace",r="normal",a=1){this.duration=t,this.easing=e,this.fill=n,this.delay=i,this.composite=s,this.direction=r,this.iterations=a}}const i={fadeIn:[{opacity:0},{opacity:1}],fadeInDown:[{opacity:0,transform:"translate3d(0, -100%, 0)"},{opacity:1,transform:"translate3d(0, 0, 0)"}],fadeInUp:[{opacity:0,transform:"translate3d(0, 100%, 0)"},{opacity:1,transform:"translate3d(0, 0, 0)"}],fadeInLeft:[{opacity:0,transform:"translate3d(-100%, 0, 0)"},{opacity:1,transform:"translate3d(0, 0, 0)"}],fadeInRight:[{opacity:0,transform:"translate3d(100%, 0, 0)"},{opacity:1,transform:"translate3d(0, 0, 0)"}],fadeOut:[{opacity:1},{opacity:0}],fadeOutDown:[{opacity:1,transform:"translate3d(0, 0, 0)"},{opacity:0,transform:"translate3d(0, 100%, 0)"}],fadeOutUp:[{opacity:1,transform:"translate3d(0, 0, 0)"},{opacity:0,transform:"translate3d(0, -100%, 0)"}],fadeOutLeft:[{opacity:1,transform:"translate3d(0, 0, 0)"},{opacity:0,transform:"translate3d(-100%, 0, 0)"}],fadeOutRight:[{opacity:1,transform:"translate3d(0, 0, 0)"},{opacity:0,transform:"translate3d(100%, 0, 0)"}],bounce:[{transform:"translateY(0)",easing:"ease"},{transform:"translateY(-30px)",easing:"ease-in"},{transform:"translateY(15px)",easing:"ease-out"},{transform:"translateY(-10px)",easing:"ease-in-out"},{transform:"translateY(0)",easing:"ease-out"}],tada:[{transform:"scale(1) rotate(0) translateX(0)",transformOrigin:"center center",easing:"ease"},{transform:"scale(1.1) rotate(-3deg) translateX(-0.1%)",transformOrigin:"center center",easing:"ease-in-out"},{transform:"scale(1.1) rotate(3deg) translateX(-0.1%)",transformOrigin:"center center",easing:"ease-in-out"},{transform:"scale(1.1) rotate(-3deg) translateX(-0.1%)",transformOrigin:"center center",easing:"ease-in-out"},{transform:"scale(1.1) rotate(3deg) translateX(-0.1%)",transformOrigin:"center center",easing:"ease-in-out"},{transform:"scale(1) rotate(0) translateX(0)",transformOrigin:"center center",easing:"ease-out"}],zoomIn:[{transform:"scale(0)",opacity:0,transformOrigin:"center center",easing:"ease"},{transform:"scale(1)",opacity:1,transformOrigin:"center center",easing:"ease-out"}],zoomOut:[{transform:"scale(1)",opacity:1,transformOrigin:"center center",easing:"ease-out"},{transform:"scale(0)",opacity:0,transformOrigin:"center center",easing:"ease"}],rotation:t=>[{transform:`rotate(${t}deg)`,transformOrigin:"center center",easing:"linear"}]};class s{static#t(t,e,i){e={...new n,...e};const s=this.node.animate(t,e);return s.onfinish=()=>{"function"==typeof i&&i()},s}static jdm_clearAnimations(){return"function"==typeof this.node.getAnimations&&this.node.getAnimations().forEach((t=>t.cancel())),this.node.style.animation="none",this.node.style.transition="none",this.node.style.transform="",this.node.style.opacity="",this.node}static jdm_animation(t,e,i=new n){return s.#t.apply(this,[t,i,e]),this.node}static jdm_hide(){return this.jdm_setStyle("visibility","hide"),this.jdm_setStyle("opacity",0),this.node}static jdm_show(){return this.jdm_setStyle("visibility","visible"),this.jdm_setStyle("opacity",1),this.node}static jdm_fadeIn(t,e=new n){return s.jdm_animation.apply(this,[i.fadeIn,t,e])}static jdm_fadeInDown(t,e=new n){return s.jdm_animation.apply(this,[i.fadeInDown,t,e])}static jdm_fadeInUp(t,e=new n){return s.jdm_animation.apply(this,[i.fadeInUp,t,e])}static jdm_fadeInLeft(t,e=new n){return s.jdm_animation.apply(this,[i.fadeInLeft,t,e])}static jdm_fadeInRight(t,e=new n){return s.jdm_animation.apply(this,[i.fadeInRight,t,e])}static jdm_fadeOut(t,e=new n){return s.jdm_animation.apply(this,[i.fadeOut,t,e])}static jdm_fadeOutDown(t,e=new n){return s.jdm_animation.apply(this,[i.fadeOutDown,t,e])}static jdm_fadeOutUp(t,e=new n){return s.jdm_animation.apply(this,[i.fadeOutUp,t,e])}static jdm_fadeOutLeft(t,e=new n){return s.jdm_animation.apply(this,[i.fadeOutLeft,t,e])}static jdm_fadeOutRight(t,e=new n){return s.jdm_animation.apply(this,[i.fadeOutRight,t,e])}static jdm_bounce(t,e=new n){return s.jdm_animation.apply(this,[i.bounce,t,e])}static jdm_tada(t,e=new n){return s.jdm_animation.apply(this,[i.tada,t,e])}static jdm_zoomIn(t,e=new n){return s.jdm_animation.apply(this,[i.zoomIn,t,e])}static jdm_zoomOut(t,e=new n){return s.jdm_animation.apply(this,[i.zoomOut,t,e])}static jdm_rotation(t,e=360,r=new n){return s.jdm_animation.apply(this,[i.rotation(e),t,r])}}class r{static jdm_append(t){if(Array.isArray(t))for(const e of t)this.node.appendChild(e);else t&&this.node.appendChild(t);return this.node}static jdm_prepend(t){if(this.node.firstElementChild,Array.isArray(t))for(const e of t)this.node.prepend(e);else t&&this.node.prepend(t);return this.node}static jdm_appendBefore(t){t=Array.isArray(t)?t:[t];const e=this.node.parentNode;for(const n of t)e.insertBefore(n,this.node);return this.node}static jdm_appendAfter(t){t=Array.isArray(t)?t:[t];const e=this.node.parentNode;for(const n of t)e.insertAfter(n,this.node);return this.node}static jdm_setAttribute(t,e=null){return this.node.setAttribute(t,e),this.node}static jdm_getAttribute(t){return this.node.getAttribute(t)}static jdm_removeAttribute(t){return this.node.removeAttribute(t),this.node}static jdm_addId(t){return this.node.setAttribute("id",t),this.node}static jdm_addClassList(t){if(Array.isArray(t))for(const e of t)this.node.classList.add(e);else t&&this.node.classList.add(t);return this.node}static jdm_removeClassList(t){if(Array.isArray(t))for(const e of t)this.node.classList.remove(e);else t&&this.node.classList.remove(t);return this.node}static jdm_toggleClassList(t){if(Array.isArray(t))for(const e of t)this.node.classList.toggle(e);else t&&this.node.classList.toggle(t);return this.node}static jdm_findClassList(t,e=!1){return t=Array.isArray(t)?t:[t],e?t.some((t=>this.node.classList.contains(t))):t.every((t=>this.node.classList.contains(t)))}static jdm_empty(){if("input"!==this.tag||"checkbox"!==this.node.type&&"radio"!==this.node.type)if("input"===this.tag||"textarea"===this.tag)this.node.value=null;else if("form"===this.tag){if(this.node.elements?.length>0)for(const t of this.node.elements)if("checkbox"===t.type||"radio"===t.type)t.checked=!1;else if("select-multiple"===t.type||"select-one"===t.type)for(const e of t.options)t.value=null;else t.value=""}else this.node.innerHTML="";else this.node.checked=!1;return this.node}static jdm_destroy(){return this.node.remove(),this.node}static jdm_validate(){const t=this.node.checkValidity();return this.jdm_genEvent("validate",t),this.node}static jdm_setStyle(t,e){return this.node.style[t]=e,this.node}static jdm_extendNode(t,e=null){return this.node[t]=e,this.node}static jdm_innerHTML(t){return this.node.innerHTML=t,this.node}static jdm_binding(t,e="input",n=!0){let i=[];Array.isArray(t)?i=i.concat(t):i.push(t);for(const t of i)if("input"===t.tagName.toLowerCase()||"select"===t.tagName.toLowerCase()||"textarea"===t.tagName.toLowerCase()?this.node.addEventListener(e,(()=>{t.jdm_setValue(this.jdm_getValue())})):this.node.addEventListener(e,(()=>{t.jdm_innerHTML(this.jdm_getValue())})),n){const n=i.filter((e=>e!==t));n.push(this.node);for(const i of n)t.jdm_binding(n,e,!1)}return this.node}static jdm_setValue(t,e=!0){if(e)try{t=t.toBoolean()}catch(t){}if("checkbox"===this.node.type||"radio"===this.node.type)this.node.checked=t;else if("form"===this.tag){const e=(t,e)=>{"checkbox"===t.type||"radio"===t.type?t.checked=e:t.value=e},n=(t,e)=>t.querySelectorAll(`[name="${e}"]`),i=(t,s,r="")=>{for(const a in s){const d=s[a],o=r?`${r}[${a}]`:a,l=n(t,Array.isArray(d)?`${o}[]`:o);if(l?.length>0)for(const n of l)if(Array.isArray(d)){t.querySelectorAll(`[name="${o}[]"]`).forEach((t=>{e(t,d.includes(t.value))}))}else"object"==typeof d?i(t,d,o):e(n,d);else"object"==typeof d&&i(t,d,o)}};i(this.node,t)}else"number"===this.node.jdm_getAttribute("type")||"range"===this.node.jdm_getAttribute("type")?this.node.value=1*t:this.node.value=t;return this.node}static jdm_getValue(){if("input"!==this.tag||"checkbox"!==this.node.type&&"radio"!==this.node.type){if("form"===this.tag){const t=new FormData(this.node),e={};for(let[n,i]of t.entries()){i=""===i?null:i,i="null"===i?null:i;let t=e;const s=n.split(/\[|\]\[|\]/).filter(Boolean),r=s.pop();for(let e=0;e<s.length;e++){const n=s[e];t[n]||(t[n]=isNaN(s[e+1])?{}:[]),t=t[n]}""===r?(t.length||(t.length=0),t[t.length++]=i):Array.isArray(t[r])?t[r].push(i):t[r]?t[r]=[t[r],i]:n.endsWith("[]")?i&&(t[r]=new Array,t[r].push(i)):t[r]=i}return e}return this.tag,this.node.value}return this.node.checked}static jdm_genEvent(t,n=null,i=!0){return e.genEvent(this.node,t,n,i),this.node}static jdm_addEventListener(t,e=()=>{}){return this.node.addEventListener(t,e),this.node}static jdm_removeEventListener(t,e=()=>{}){return this.node.removeEventListener(t,e),this.node}static jdm_extendChildNode(){if(this.node?.jdm_childNode&&Object.entries(this.node.jdm_childNode).length>0)for(const[t,e]of Object.entries(this.node.jdm_childNode))this.node.jdm_extendNode(t,e);return this.node}static jdm_onInput(t=()=>{}){return this.node.addEventListener("input",t),this.node}static jdm_onChange(t=()=>{}){return this.node.addEventListener("change",t),this.node}static jdm_onSelect(t=()=>{}){return this.node.addEventListener("select",t),this.node}static jdm_onDebounce(t=()=>{},n=300,i="input"){return this.node.addEventListener(i,e.debounce(t,n)),this.node}static jdm_onClick(t=()=>{}){return this.node.addEventListener("click",t),this.node}static jdm_onRightClick(t=()=>{}){return this.node.addEventListener("contextmenu",t),this.node}static jdm_onDoubleClick(t=()=>{}){return this.node.addEventListener("dblclick",t),this.node}static jdm_onInvalid(t=()=>{}){return this.node.addEventListener("invalid",t),this.node}static jdm_onLoad(t=()=>{}){return this.node.addEventListener("load",t),this.node}static jdm_onError(t=()=>{}){return this.node.addEventListener("error",t),this.node}static jdm_onSubmit(t=t=>{}){return this.node.addEventListener("submit",t),this.node}}const a={svgTags:["svg","g","defs","symbol","use","image","path","rect","circle","ellipse","line","polyline","polygon","text","tspan","textPath","marker","pattern","mask","clipPath","filter","feBlend","feColorMatrix","feComponentTransfer","feComposite","feConvolveMatrix","feDiffuseLighting","feDisplacementMap","feFlood","feGaussianBlur","feImage","feMerge","feMorphology","feOffset","feSpecularLighting","feTile","feTurbulence","linearGradient","radialGradient","stop","animate","animateTransform","animateMotion","set","foreignObject","view","switch","style","desc","title","metadata","script"]};new class{constructor(){String.prototype.toBoolean=function(){const t=this.toLowerCase().trim();if("yes"===t||"true"===t||"1"===t)return!0;if("no"===t||"false"===t||"0"===t)return!1;throw new Error(`Invalid boolean string: ${this}`)},String.prototype.toCapitalize=function(){return this.charAt(0).toUpperCase()+this.slice(1)},Number.prototype.toBoolean=function(){return String(this).toBoolean()}}};class d extends HTMLElement{constructor(t=null,e=null,n=null,i=!0,...s){super();const r={element:t,parent:e,classList:n,deep:i,args:s};return this.node=this.#e(r),this.jdm_childNode=[],this.tag=this.node.tagName.toLowerCase(),r.classList&&this.jdm_addClassList(r.classList),r.parent&&r.parent.appendChild(this.node),r.deep&&(r.args?.length>0&&r.args[0],this.#n(this.node.childNodes,r.args[0]?.mainNode)),this.#i(),this.node}#e(t){const e=new DOMParser;switch(this.#s(t.element)){case"tagString":return document.createElement(t.element);case"domFromString":case"domFromHtml":const n=t.element.trim(),i=new RegExp(`^<\\s*(${a.svgTags.join("|")})\\b`,"i").test(n),s=i?"image/svg+xml":"text/html",r=e.parseFromString(i?`<svg xmlns="http://www.w3.org/2000/svg">${n}</svg>`:n,s);return i?r.documentElement.firstElementChild:r.body.firstElementChild;case"elementDom":return t.element;case"tagInDom":return this;case"unknown":console.error("Element not supported by jdm:",t)}}#s(t){return t?"string"==typeof t?"<"===t.charAt(0)&&">"===t.charAt(t.length-1)?"domFromString":/<[a-z][\s\S]*>/i.test(t)?"domFromHtml":"tagString":t.nodeType&&t.nodeType===Node.ELEMENT_NODE?"elementDom":"unknown":"jdm-element"===this.localName?"tagInDom":"unknown"}#n(t,e=null){if(t=Array.from(t).filter((t=>t.nodeType<=2)),e=e||this.node,t.length>0){e.jdm_childNode=e.jdm_childNode?e.jdm_childNode:{};for(const n of t){const t=n.getAttribute("name"),i=n.getAttribute("data-name"),s=JDM(n,null,null,!0,{mainNode:e});i?e.jdm_childNode[i]=s:t&&(e.jdm_childNode[t]=s)}}}#i(){const t=Object.getOwnPropertyNames(d.prototype).filter((t=>t.startsWith("jdm_")));for(const e of t)this.node[e]=this[e].bind(this)}jdm_setAttribute(t,e=null){return r.jdm_setAttribute.call(this,t,e)}jdm_getAttribute(t){return r.jdm_getAttribute.call(this,t)}jdm_append(t){return r.jdm_append.call(this,t)}jdm_prepend(t){return r.jdm_prepend.call(this,t)}jdm_appendBefore(t){return r.jdm_appendBefore.call(this,t)}jdm_appendAfter(t){return r.jdm_appendAfter.call(this,t)}jdm_addId(t){return r.jdm_addId.call(this,t)}jdm_addClassList(t){return r.jdm_addClassList.call(this,t)}jdm_removeClassList(t){return r.jdm_removeClassList.call(this,t)}jdm_toggleClassList(t){return r.jdm_toggleClassList.call(this,t)}jdm_findClassList(t,e=!1){return r.jdm_findClassList.call(this,t,e)}jdm_empty(){return r.jdm_empty.call(this)}jdm_destroy(){return r.jdm_destroy.call(this)}jdm_validate(){return r.jdm_validate.call(this)}jdm_removeAttribute(t){return r.jdm_removeAttribute.call(this,t)}jdm_setStyle(t,e){return r.jdm_setStyle.call(this,t,e)}jdm_extendNode(t,e=null){return r.jdm_extendNode.call(this,t,e)}jdm_innerHTML(t){return r.jdm_innerHTML.call(this,t)}jdm_binding(t,e="input",n=!0){return r.jdm_binding.call(this,t,e,n)}jdm_onInput(t=()=>{}){return r.jdm_onInput.call(this,t)}jdm_onChange(t=()=>{}){return r.jdm_onChange.call(this,t)}jdm_onSelect(t=()=>{}){return r.jdm_onSelect.call(this,t)}jdm_onDebounce(t=()=>{},e=300,n="input"){return r.jdm_onDebounce.call(this,t,e,n)}jdm_onClick(t=()=>{}){return r.jdm_onClick.call(this,t)}jdm_onRightClick(t=()=>{}){return r.jdm_onRightClick.call(this,t)}jdm_onDoubleClick(t=()=>{}){return r.jdm_onDoubleClick.call(this,t)}jdm_onInvalid(t=()=>{}){return r.jdm_onInvalid.call(this,t)}jdm_onLoad(t=()=>{}){return r.jdm_onLoad.call(this,t)}jdm_onError(t=()=>{}){return r.jdm_onError.call(this,t)}jdm_onSubmit(t=t=>{}){return r.jdm_onSubmit.call(this,t)}jdm_setValue(t,e=!0){return r.jdm_setValue.call(this,t,e)}jdm_getValue(){return r.jdm_getValue.call(this)}jdm_genEvent(t,e=null,n=!0){return r.jdm_genEvent.call(this,t,e,n)}jdm_addEventListener(t,e=()=>{}){return r.jdm_addEventListener.call(this,t,e)}jdm_removeEventListener(t,e=()=>{}){return r.jdm_removeEventListener.call(this,t,e)}jdm_extendChildNode(){return r.jdm_extendChildNode.call(this)}jdm_clearAnimations(){return s.jdm_clearAnimations.call(this)}jdm_hide(){return s.jdm_hide.call(this)}jdm_show(){return s.jdm_hide.call(this)}jdm_fadeIn(t,e=new n){return s.jdm_fadeIn.call(this,t,e)}jdm_fadeInDown(t,e=new n){return s.jdm_fadeInDown.call(this,t,e)}jdm_fadeInUp(t,e=new n){return s.jdm_fadeInUp.call(this,t,e)}jdm_fadeInLeft(t,e=new n){return s.jdm_fadeInLeft.call(this,t,e)}jdm_fadeInRight(t,e=new n){return s.jdm_fadeInRight.call(this,t,e)}jdm_fadeOut(t,e=new n){return s.jdm_fadeOut.call(this,t,e)}jdm_fadeOutRight(t,e=new n){return s.jdm_fadeOutRight.call(this,t,e)}jdm_fadeOutUp(t,e=new n){return s.jdm_fadeOutUp.call(this,t,e)}jdm_fadeOutDown(t,e=new n){return s.jdm_fadeOutDown.call(this,t,e)}jdm_fadeOutLeft(t,e=new n){return s.jdm_fadeOutLeft.call(this,t,e)}jdm_bounce(t,e=new n){return s.jdm_bounce.call(this,t,e)}jdm_tada(t,e=new n){return s.jdm_tada.call(this,t,e)}jdm_zoomIn(t,e=new n){return s.jdm_zoomIn.call(this,t,e)}jdm_zoomOut(t,e=new n){return s.jdm_zoomOut.call(this,t,e)}jdm_rotation(t,e=360,i=new n){return s.jdm_rotation.call(this,t,e,i)}}return window.JDM=(t=null,e=null,n=null,i=!0,...s)=>new d(t,e,n,i,...s),window.Jdm=d,customElements.define("jdm-element",d),t.Jdm=d,t}({}); //# sourceMappingURL=jdm.js.map