jQueryプラグインのLettering.jsをVanillaに変換

Ads

2020.10.22 | 10時17分15秒

Result

CSS-TricksのChris氏が開発した、文字装飾ライブラリはjQueryプラグインとして開発されましたが、これをVanillaに変えてくれた方がいました。

JavaScript

/*!
 * Vanilla JS Lettering.js
 * A vanilla JS fork of http://letteringjs.com/ by Dave Rupert
 * (c) 2019 Chris Ferdinandi, MIT License, https://gomakethings.com
 */
var Lettering = (function () {
 "use strict";
 var Constructor = function (selector) {
  if (!selector) {
   throw new Error("Please provide a valid selector");
  }
  var elems = Array.prototype.slice.call(document.querySelectorAll(selector));
  var str = "eefec303079ad17405c889e092e105b0";
  var publicAPIs = {};
  var replaceBreaks = function (elem) {
   var r = document.createTextNode(str);
   Array.prototype.slice
    .call(elem.querySelectorAll("br"))
    .forEach(function (br) {
     elem.replaceChild(r.cloneNode(), br);
    });
  };

  var wrap = function (elems, splitStr, className, after, breaks) {
   elems.forEach(function (elem) {
    var original = elem.textContent;
    if (breaks) {
     replaceBreaks(elem);
    }
    var text = elem.textContent
     .split(splitStr)
     .map(function (item, index) {
      return (
       '<span class="' +
       className +
       (index + 1) +
       '" aria-hidden="true">' +
       item +
       "</span>" +
       after
      );
     })
     .join("");
    elem.setAttribute("aria-label", original);
    elem.innerHTML = text;
   });
   return elems;
  };
  publicAPIs.letters = function () {
   return wrap(elems, "", "char", "");
  };
  publicAPIs.words = function () {
   return wrap(elems, " ", "word", " ");
  };
  publicAPIs.lines = function () {
   return wrap(elems, str, "line", "", true);
  };
  return publicAPIs;
 };
 return Constructor;
})();

VanillaなLettering.jsです。

new Lettering("#demo1 h1").letters();
new Lettering("#demo2 h1").words();
new Lettering("#demo3 h1").lines();

任意の要素を指定して、文字毎にするかキーワード毎にするか行ごとにするか選択できます。が、キーワードは半角開ける必要あるので日本語圏では相性悪そうですが、条件が半角になっているのを別のものに変更する事で使えるようになるかも。

html

<div id="demo1" class="demo">
  <h1>東京特許許可局</h1>
 </div>

 <div id="demo2" class="demo">
  <h1>千葉 滋賀 佐賀</h1>
 </div>

 <div id="demo3" class="demo">
  <h1>その1<br>その2<br>その3</h1>
 </div>

via

Vanilla Lettering.js