pulsable/dist/index.mjs

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

var x=`
  <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 H={pulse:"pl-animate",wave:"pl-animate-wave","wave-reverse":"pl-animate-wave-r",none:"pl-animate-none"};function C(i){var s=window.getComputedStyle(i,null),u=parseInt(s.getPropertyValue("height"),10),f=parseInt(s.getPropertyValue("font-size"),10),m=parseInt(s.getPropertyValue("line-height"),10),c=s.getPropertyValue("box-sizing");if(Number.isNaN(m)&&(m=f*1.2),c==="border-box"){var v=parseInt(s.getPropertyValue("padding-top"),10),d=parseInt(s.getPropertyValue("padding-bottom"),10),g=parseInt(s.getPropertyValue("border-top-width"),10),L=parseInt(s.getPropertyValue("border-bottom-width"),10);u=u-v-d-g-L}var l=Math.ceil(u/m);return{lines:l,font_size:f,height:u}}var y=({rootElement:i,config:s,loading:u=!0})=>{let{animation:f="wave",bgColors:m,noRounded:c=!1,noPadding:v=!1}=s||{},d=e=>{e?i.classList.add("pulsable-base"):i.classList.remove("pulsable-base")},g=e=>{e?i.classList.add("pl-css"):i.classList.remove("pl-css")},L=()=>{if(typeof window>"u")return null;let e=document.createElement("div"),r=e.cloneNode(!0);r.classList.add("pl-child-para-cont","pl-no-rounded","pl-child"),e.style.setProperty("--color-transparent-medium",m?.medium||"rgba(130, 130, 130, 0.3)"),e.style.setProperty("--color-transparent-light",m?.light||"rgba(130, 130, 130, 0.2)"),e.classList.add(H[f]);let o=e.cloneNode(!0);o.classList.add("pl-child-para"),e.classList.add("pl-child");let p=e.cloneNode(!0);p.classList.add("pl-child-circle"),c&&(e.classList.add("pl-no-rounded"),o.classList.add("pl-no-rounded"));let n=e.cloneNode(!0);n.classList.add("pl-child-hidden");let a=e.cloneNode(!0);a.classList.add("pl-child-rect");let t=e.cloneNode(!0);return t.classList.add("pl-child-rect-full"),{pCircle:()=>p.cloneNode(!0),pPara:()=>o.cloneNode(!0),pHidden:()=>n.cloneNode(!0),pRect:()=>a.cloneNode(!0),pRectFull:()=>t.cloneNode(!0),pParaCont:()=>r.cloneNode(!0)}};var l=null;requestAnimationFrame(()=>{if(!i){d(!1);return}if(i.classList.contains("pulsable-cont")||i.classList.add("pulsable-cont"),u){if(d(!0),g(!0),l||(l=L()),!l){d(!1),g(!1);return}let r=document.createElement("div");r.classList.add("pl-svg-cont"),r.innerHTML=x;let o=i.querySelectorAll(".pulsable");for(let p=0;p<o.length;p++){let n=o[p];if(n.classList.add("pl-element"),n.hasAttribute("disabled")||(n.classList.add("pl-has-disabled-attr"),n.setAttribute("disabled","true")),n.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")))}),!n.querySelector(".pl-child")){var e;let t=n.classList;if(!l)return;if(t.contains("pulsable-circle"))e=l.pCircle();else if(t.contains("pulsable-hidden"))e=l.pHidden();else if(t.contains("pulsable-para")){e=l.pParaCont();let b=C(n),P=(b.height-b.font_size*b.lines)/(b.lines+2),w=`${Math.max(P,8)}px`;e.style.setProperty("padding-top",w),e.style.setProperty("padding-bottom",w);let h=l.pPara();c&&t.contains("pulsable-rounded")?h.classList.remove("pl-no-rounded"):!c&&t.contains("pulsable-no-rounded")&&h.classList.add("pl-no-rounded"),h.style.setProperty("height",`${b.font_size*80/100}px`);for(let k=0;k<b.lines;k++)e.appendChild(h.cloneNode(!0))}else v?t.contains("pulsable-padding")?e=l.pRect():e=l.pRectFull():t.contains("pulsable-no-padding")?e=l.pRectFull():e=l.pRect();t.contains("pulsable-img")&&e.appendChild(r),c&&t.contains("pulsable-rounded")?e.classList.remove("pl-no-rounded"):!c&&t.contains("pulsable-no-rounded")&&e.classList.add("pl-no-rounded"),n.parentNode?.appendChild(e),n.appendChild(e)}}d(!1)}else{let r=i.querySelectorAll(".pl-child");for(let a=0;a<r.length;a++){let t=r[a];t.parentNode?.removeChild(t)}let o=i.querySelectorAll(".pl-element");for(let a=0;a<o.length;a++)o[a].classList&&o[a].classList.remove("pl-element");let p=i.querySelectorAll(".pl-has-disabled-attr");for(let a=0;a<p.length;a++){let t=p[a];t.removeAttribute("disabled"),t.classList.remove("pl-has-disabled-attr")}let n=i.querySelectorAll(".pl-child-element");for(let a=0;a<n.length;a++)n[a].classList.remove("pl-child-element");g(!1),d(!1)}})};(typeof global<"u"||typeof globalThis<"u")&&(typeof global<"u"&&(global.setPulsing=y),typeof globalThis<"u"&&(globalThis.setPulsing=y));var S=y;export{S as default};