pulsable/dist/index.js

A simple and customizable JavaScript library to add a pulsing/skeleton loading effect to your specific html section.

"use strict";var y=Object.defineProperty;var C=Object.getOwnPropertyDescriptor;var M=Object.getOwnPropertyNames;var T=Object.prototype.hasOwnProperty;var N=(a,n)=>{for(var r in n)y(a,r,{get:n[r],enumerable:!0})},D=(a,n,r,u)=>{if(n&&typeof n=="object"||typeof n=="function")for(let o of M(n))!T.call(a,o)&&o!==r&&y(a,o,{get:()=>n[o],enumerable:!(u=C(n,o))||u.enumerable});return a};var z=a=>D(y({},"__esModule",{value:!0}),a);var I={};N(I,{default:()=>R});module.exports=z(I);var P=`
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="40%"
    height="40%"
    viewBox="0 0 180.119 139.794"
  >
    <g transform="translate(-13.59 -66.639)" paintOrder="fill markers stroke">
      <path fill="#d0d0d0" d="M13.591 66.639H193.71v139.794H13.591z" />
      <path
        d="m118.507 133.514-34.249 34.249-15.968-15.968-41.938 41.937H178.726z"
        opacity=".675"
      />
      <circle cx="58.217" cy="108.555" r="11.773" opacity=".675" />
    </g>
  </svg>
`;var A={pulse:"pl-animate",wave:"pl-animate-wave","wave-reverse":"pl-animate-wave-r",none:"pl-animate-none"};function S(a){var n=window.getComputedStyle(a,null),r=parseInt(n.getPropertyValue("height"),10),u=parseInt(n.getPropertyValue("font-size"),10),o=parseInt(n.getPropertyValue("line-height"),10),m=n.getPropertyValue("box-sizing");if(Number.isNaN(o)&&(o=u*1.2),m==="border-box"){var v=parseInt(n.getPropertyValue("padding-top"),10),b=parseInt(n.getPropertyValue("padding-bottom"),10),f=parseInt(n.getPropertyValue("border-top-width"),10),L=parseInt(n.getPropertyValue("border-bottom-width"),10);r=r-v-b-f-L}var s=Math.ceil(r/o);return{lines:s,font_size:u,height:r}}var w=({rootElement:a,config:n,loading:r=!0})=>{let{animation:u="wave",bgColors:o,noRounded:m=!1,noPadding:v=!1}=n||{},b=e=>{e?a.classList.add("pulsable-base"):a.classList.remove("pulsable-base")},f=e=>{e?a.classList.add("pl-css"):a.classList.remove("pl-css")},L=()=>{if(typeof window>"u")return null;let e=document.createElement("div"),c=e.cloneNode(!0);c.classList.add("pl-child-para-cont","pl-no-rounded","pl-child"),e.style.setProperty("--color-transparent-medium",o?.medium||"rgba(130, 130, 130, 0.3)"),e.style.setProperty("--color-transparent-light",o?.light||"rgba(130, 130, 130, 0.2)"),e.classList.add(A[u]);let p=e.cloneNode(!0);p.classList.add("pl-child-para"),e.classList.add("pl-child");let d=e.cloneNode(!0);d.classList.add("pl-child-circle"),m&&(e.classList.add("pl-no-rounded"),p.classList.add("pl-no-rounded"));let l=e.cloneNode(!0);l.classList.add("pl-child-hidden");let i=e.cloneNode(!0);i.classList.add("pl-child-rect");let t=e.cloneNode(!0);return t.classList.add("pl-child-rect-full"),{pCircle:()=>d.cloneNode(!0),pPara:()=>p.cloneNode(!0),pHidden:()=>l.cloneNode(!0),pRect:()=>i.cloneNode(!0),pRectFull:()=>t.cloneNode(!0),pParaCont:()=>c.cloneNode(!0)}};var s=null;requestAnimationFrame(()=>{if(!a){b(!1);return}if(a.classList.contains("pulsable-cont")||a.classList.add("pulsable-cont"),r){if(b(!0),f(!0),s||(s=L()),!s){b(!1),f(!1);return}let c=document.createElement("div");c.classList.add("pl-svg-cont"),c.innerHTML=P;let p=a.querySelectorAll(".pulsable");for(let d=0;d<p.length;d++){let l=p[d];if(l.classList.add("pl-element"),l.hasAttribute("disabled")||(l.classList.add("pl-has-disabled-attr"),l.setAttribute("disabled","true")),l.childNodes.forEach(t=>{t.classList&&!t.classList.contains("pl-child")&&(t.classList.add("pl-child-element"),t?.hasAttribute("disabled")||(t.classList.add("pl-has-disabled-attr"),t.setAttribute("disabled","true")))}),!l.querySelector(".pl-child")){var e;let t=l.classList;if(!s)return;if(t.contains("pulsable-circle"))e=s.pCircle();else if(t.contains("pulsable-hidden"))e=s.pHidden();else if(t.contains("pulsable-para")){e=s.pParaCont();let g=S(l),H=(g.height-g.font_size*g.lines)/(g.lines+2),k=`${Math.max(H,8)}px`;e.style.setProperty("padding-top",k),e.style.setProperty("padding-bottom",k);let h=s.pPara();m&&t.contains("pulsable-rounded")?h.classList.remove("pl-no-rounded"):!m&&t.contains("pulsable-no-rounded")&&h.classList.add("pl-no-rounded"),h.style.setProperty("height",`${g.font_size*80/100}px`);for(let x=0;x<g.lines;x++)e.appendChild(h.cloneNode(!0))}else v?t.contains("pulsable-padding")?e=s.pRect():e=s.pRectFull():t.contains("pulsable-no-padding")?e=s.pRectFull():e=s.pRect();t.contains("pulsable-img")&&e.appendChild(c),m&&t.contains("pulsable-rounded")?e.classList.remove("pl-no-rounded"):!m&&t.contains("pulsable-no-rounded")&&e.classList.add("pl-no-rounded"),l.parentNode?.appendChild(e),l.appendChild(e)}}b(!1)}else{let c=a.querySelectorAll(".pl-child");for(let i=0;i<c.length;i++){let t=c[i];t.parentNode?.removeChild(t)}let p=a.querySelectorAll(".pl-element");for(let i=0;i<p.length;i++)p[i].classList&&p[i].classList.remove("pl-element");let d=a.querySelectorAll(".pl-has-disabled-attr");for(let i=0;i<d.length;i++){let t=d[i];t.removeAttribute("disabled"),t.classList.remove("pl-has-disabled-attr")}let l=a.querySelectorAll(".pl-child-element");for(let i=0;i<l.length;i++)l[i].classList.remove("pl-child-element");f(!1),b(!1)}})};(typeof global<"u"||typeof globalThis<"u")&&(typeof global<"u"&&(global.setPulsing=w),typeof globalThis<"u"&&(globalThis.setPulsing=w));var R=w;