splitting
Version:
Micro-library to split a DOM element's words & chars into elements populated with CSS vars.
24 lines (23 loc) • 2.51 kB
JavaScript
!function(t,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n():"function"==typeof define&&define.amd?define(n):t.Splitting=n()}(this,function(){"use strict"
var u=document,c=u.createTextNode.bind(u)
function f(t,n,e){t.style.setProperty(n,e)}function l(t,n){return t.appendChild(n)}function d(t,n,e,r){var i=u.createElement("span")
return n&&(i.className=n),e&&(r||i.setAttribute("data-"+n,e),i.textContent=e),t&&l(t,i)||i}function n(t,n){return t&&0!=t.length?t.nodeName?[t]:[].slice.call(t[0].nodeName?t:(n||u).querySelectorAll(t)):[]}function p(t,n){t&&t.some(n)}var o={}
function t(t,n,e,r){return{by:t,depends:n,key:e,split:r}}function r(t){return function n(e,t,r){var i=r.indexOf(e)
if(-1==i){r.unshift(e)
var u=o[e]
if(!u)throw new Error("plugin not loaded: "+e)
p(u.depends,function(t){n(t,e,r)})}else u=r.indexOf(t),r.splice(i,1),r.splice(u,0,e)
return r}(t,0,[]).map((n=o,function(t){return n[t]}))
var n}function e(t){o[t.by]=t}function h(t,e,r,i,u){t.normalize()
var o=[],a=document.createDocumentFragment(),s=(i&&o.push(t.previousSibling),[])
return n(t.childNodes).some(function(t){var n
t.tagName&&!t.hasChildNodes()?s.push(t):t.childNodes&&t.childNodes.length?(s.push(t),o.push.apply(o,h(t,e,r,i,u))):(n=(t=t.wholeText||"").trim()).length&&(" "===t[0]&&s.push(c(" ")),p(""===r&&"function"==typeof Intl.Segmenter?Array.from((new Intl.Segmenter).segment(n)).map(function(t){return t.segment}):n.split(r),function(t,n){n&&u&&s.push(d(a,"whitespace"," ",u))
n=d(a,e,t)
o.push(n),s.push(n)})," "===t[t.length-1])&&s.push(c(" "))}),p(s,function(t){l(a,t)}),t.innerHTML="",l(t,a),o}var i="words",a=t(i,0,"word",function(t){return h(t,"word",/\s+/,0,1)}),m="chars",s=t(m,[i],"char",function(t,e,n){var r=[]
return p(n[i],function(t,n){r.push.apply(r,h(t,"char","",e.whitespace&&n))}),r})
function g(e){var c=(e=e||{}).key
return n(e.target||"[data-splitting]").map(function(o){var t,n,a,s=o["🍌"]
return!e.force&&s||(s=o["🍌"]={el:o},n=r(t=(t=e.by||(t="splitting",o.getAttribute("data-"+t)))&&"true"!=t?t:m),a=function(t,n){for(var e in n)t[e]=n[e]
return t}({},e),p(n,function(t){var n,e,r,i,u
t.split&&(n=t.by,r=(c?"-"+c:"")+t.key,t=t.split(o,a,s),r&&(e=o,u=(r="--"+(r=r))+"-index",p(i=t,function(t,n){Array.isArray(t)?p(t,function(t){f(t,u,n)}):f(t,u,n)}),f(e,r+"-total",i.length)),s[n]=t,o.classList.add(n))}),o.classList.add("splitting")),s})}return g.html=function(t){var n=(t=t||{}).target=d()
return n.innerHTML=t.content,g(t),n.outerHTML},(g.add=e)(a),e(s),g})