stack_tweaked 2

by Julian

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Word Index Tracker</title>
    </head>
<body>
 
    <h1>Track Words</h1>
    <form id="indexer">
  <button id="toggle" class="off" type="button"></button>
 <div id="source" contenteditable="true" style="min-height: 5rem; padding: 0.75rem; border: 1px solid #ccc; border-radius: 4px;">
    This is where the text goes.
</div>

  <output id="selected">
    <ol></ol>
  </output>
  <button id="download" type="button">Download JSON</button>
</form>

</body>
</html>

CSS

:root {
  font: 2ch/1.5 "Segoe UI"
}

#toggle {
  margin-bottom: 1rem;
  padding: 5px 10px;
  border-radius: 8px;
  font: inherit;
  cursor: pointer;
  background: 
  radial-gradient(
    ellipse at center,    
    rgba(197,222,234,1) 0%,
    rgba(138,187,215,1) 31%,
    rgba(6,109,171,1) 100%);
}

#toggle::before {
  content: "Edit Mode"
}

#toggle::after {
  content: " ON";
}

#toggle.off {
  color: #fff;
  background: 
  radial-gradient(
    ellipse at center,
    rgba(125, 126, 125, 1) 0%, 
    rgba(14, 14, 14, 1) 100%);
}

#toggle.off::after {
  content: " OFF";
}

.off + #source {
  opacity: 0.7;
  pointer-events: none;
}

#source {
  min-height: 5rem;
  padding-top: 0.75rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}

mark {
  background-color: transparent
}

mark.highlight {
  background: gold;
}

JavaScript

// Reference <form>
const form = document.forms.indexer;
/**
 * Reference all form controls of <form>
 * In this layout it is:
 *   - <button>
 *   - <div>
 *   - <output>
 */
const io = form.elements;
// Reference <button>
const btn = io.toggle;
const downloadBtn = document.getElementById("download");
// Reference <div>
const src = document.getElementById("source");
// Reference <output>
const sel = io.selected;
// Declaration for two arrays (not made yet).
let marked;
let indices;

/**
 * Index each word by extracting the string,
 * converting the string into an array of 
 * substrings, and wrapping each word with
 * a <mark> element. Each <mark> is then 
 * assigned a [data-idx] attribute with the 
 * corresponding index number.
 */
const indexText = () => { const text = src.innerText; let marks = text.split(/\s+/); // Split by any whitespace marks[0] = `<mark>${marks[0]}`; marks[marks.length - 1] = `${marks[marks.length - 1]}</mark>`; src.innerHTML = marks.join(`</mark> <mark>`).trim(); marked = [...document.querySelectorAll("mark")]; marked.forEach((mrk, idx) => mrk.dataset.idx = idx); }; const editText = (e) => { e.target.classList.toggle("off"); src.toggleAttribute("contenteditable"); if (!src.hasAttribute("contenteditable")) { indexText(); // Index only when editing is complete } };
/**
 * Handle "click" event when user clicks
 * a word. Each word is inside a <mark> and
 * its background color will change, and
 * its text and index number will be listed
 * in output#selected > ol.
 * @param {object} e - Event object
 */
const highLight = (e) => {
  const clk = e.target;
  if (clk.matches("mark")) {
    clk.classList.toggle("highlight");
  }
  indices = [...document.querySelectorAll(".highlight")]
    .map(h => {
      let txt = h.innerText;
      txt = txt.replace(/[^A-Z0-9]$/i, "");
      return {
        word: txt,
        index: h.dataset.idx
      };
    });
  sel.firstElementChild.innerHTML = indices.map(item => `<li>${item.word}...