readtime.js

/**
 * Read Time Counter
 * https://github.com/SPACESODA/readtimecounter
 */
(function() {
  "use strict";
  const DEFAULTS = {
    engSpeed: 275,
    charSpeed: 500,
    imgSpeed: 12,
    timeFormat: "decimal"
  };
  let segmenter;
  if (typeof Intl !== "undefined" && Intl.Segmenter) {
    segmenter = new Intl.Segmenter("ja", { granularity: "word" });
  }
  function isCJK(str) {
    return /[\p{Script=Han}\p{Script=Hangul}\p{Script=Hiragana}\p{Script=Katakana}]/u.test(
      str
    );
  }
  function analyzeText(text) {
    let engCount = 0;
    let ckjCount = 0;
    if (segmenter) {
      const segments = segmenter.segment(text);
      for (const { segment, isWordLike } of segments) {
        if (isWordLike) {
          if (isCJK(segment)) {
            ckjCount += [...segment].length;
          } else {
            engCount++;
          }
        }
      }
    } else {
      const ckjMatches = text.match(
        /[\p{Script=Han}\p{Script=Hangul}\p{Script=Hiragana}\p{Script=Katakana}]+/gu
      );
      if (ckjMatches) {
        ckjCount = ckjMatches.join("").length;
      }
      const nonCkjText = text.replace(
        /[\p{Script=Han}\p{Script=Hangul}\p{Script=Hiragana}\p{Script=Katakana}]+/gu,
        " "
      );
      const cleanedText = nonCkjText.replace(/[^\w\s'-]/g, " ").replace(/\s+/g, " ").trim();
      if (cleanedText.length > 0) {
        engCount = cleanedText.split(" ").length;
      }
    }
    return { engCount, ckjCount };
  }
  function calculateReadingTime(stats, settings = DEFAULTS) {
    const engTime = stats.engCount / settings.engSpeed;
    const ckjTime = stats.ckjCount / settings.charSpeed;
    const imgTime = stats.imgCount * settings.imgSpeed / 60;
    return engTime + ckjTime + imgTime;
  }
  function formatReadingTime(totalMinutes, format = "decimal") {
    let displayTime;
    if (format === "integer") {
      displayTime = Math.round(totalMinutes).toString();
    } else {
      displayTime = (Math.round(totalMinutes * 10) / 10).toFixed(1);
      if (displayTime.endsWith(".0")) {
        displayTime = displayTime.slice(0, -2);
      }
    }
    return parseFloat(displayTime) === 0 ? "0" : displayTime;
  }
  const defaultBrowserSettings = {
    ...DEFAULTS,
    readTimeTarget: "readtime",
    wordCountTarget: "wordCount",
    ckjCountTarget: "ckjCount",
    imgCountTarget: "imgCount",
    hybridCountTarget: "hybridCount",
    readTimeArea: "readtimearea"
  };
  function debounce(func, wait) {
    let timeout;
    return function(...args) {
      const context = this;
      clearTimeout(timeout);
      timeout = setTimeout(() => func.apply(context, args), wait);
    };
  }
  function countImages(element) {
    return element.querySelectorAll("img[alt], svg[alt]").length;
  }
  function getReadableText(element) {
    let text = "";
    const walker = document.createTreeWalker(
      element,
      NodeFilter.SHOW_TEXT | NodeFilter.SHOW_ELEMENT,
      {
        acceptNode: function(node) {
          if (node.nodeType === Node.ELEMENT_NODE) {
            if (["SCRIPT", "STYLE", "NOSCRIPT"].includes(node.tagName)) {
              return NodeFilter.FILTER_REJECT;
            }
            return NodeFilter.FILTER_SKIP;
          }
          return NodeFilter.FILTER_ACCEPT;
        }
      }
    );
    while (walker.nextNode()) {
      text += walker.currentNode.textContent + " ";
    }
    return text.replace(/\s+/g, " ").trim();
  }
  (function() {
    const userSettings = window.readingTimeSettings || {};
    const settings = Object.assign(
      {},
      defaultBrowserSettings,
      userSettings
    );
    function updateDisplay(element) {
      const text = getReadableText(element);
      const { engCount, ckjCount } = analyzeText(text);
      const imgCount = countImages(element);
      const totalMinutes = calculateReadingTime(
        { engCount, ckjCount, imgCount },
        settings
      );
      const displayTime = formatReadingTime(totalMinutes, settings.timeFormat);
      const readTimeElement = document.getElementById(settings.readTimeTarget);
      if (readTimeElement) readTimeElement.textContent = displayTime;
      const wordCountElement = document.getElementById(settings.wordCountTarget);
      if (wordCountElement) wordCountElement.textContent = engCount.toString();
      const ckjCountElement = document.getElementById(settings.ckjCountTarget);
      if (ckjCountElement) ckjCountElement.textContent = ckjCount.toString();
      const imgCountElement = document.getElementById(settings.imgCountTarget);
      if (imgCountElement) imgCountElement.textContent = imgCount.toString();
      const hybridCountElement = document.getElementById(
        settings.hybridCountTarget
      );
      if (hybridCountElement) {
        let infoParts = [];
        if (engCount > 0) infoParts.push(`${engCount} Words`);
        if (ckjCount > 0) infoParts.push(`${ckjCount} CKJ Characters`);
        if (imgCount > 0) infoParts.push(`${imgCount} Images`);
        hybridCountElement.textContent = infoParts.length ? infoParts.join(" • ") : "0";
      }
    }
    document.addEventListener("DOMContentLoaded", function() {
      const readtimeArea = document.getElementById(settings.readTimeArea);
      if (!readtimeArea) {
        return;
      }
      const debouncedUpdate = debounce(
        () => updateDisplay(readtimeArea),
        250
      );
      if (["INPUT", "TEXTAREA"].includes(readtimeArea.tagName) || readtimeArea.isContentEditable) {
        readtimeArea.addEventListener("input", debouncedUpdate);
      } else {
        const observer = new MutationObserver(debouncedUpdate);
        observer.observe(readtimeArea, {
          attributes: true,
          childList: true,
          subtree: true,
          characterData: true
        });
      }
      updateDisplay(readtimeArea);
    });
  })();
})();