stack1

by Julian

HTML

<form id="indexer">
  <button id="toggle" class="off" type="button"></button>
  <fieldset id="source">
     I love Turkey. I work in a Turkey restaurant. My friends are Turkish and Im always going to Turkey and obviously my partner is Turkish. What is it you love so much about Turkey? Okay. Part from my partner. I just love the people, the culture. Sorry. I love about yeah. What I love most about Turkey is the culture, the people, the lifestyle. Its just completely different to England and I wait, hang on, sorry. Im just trying to think about the culture, the people, the lifestyle. Its just completely different to England. Yeah, Ill say that. And what I love most about Turkey is the culture, the people, the lifestyle. Its just completely different to England. How long have you been going to Turkey for? I have been going to Turkey. Oh sorry, sorry, sorry. Ive been going to Turkey for a long time. Since I was a kid. Every year. How many years? Probably about five or six. So yeah, thats a very interesting sort of thing. Yeah, it is. And then dont go back to the way you love it. Yeah. Okay. Ive been going to Turkey since I was five or six years old. My parents would always take us there. It was our holiday destination every single summer. So Ive just fallen in love with the country. So used to go in there. I just love being there. Its like home. Do you feel like youre a bookstress and you are meant to be Turkish? Yeah. And I feel a sense of mes, sorry, Ive been touched on my head. Yeah, I feel a sense of me is drawn to Turkey for a reason. I went out with that. I just feel like happier and more I just connect with that. I feel like I have a connection with the country. Its so nice to have that away from England. Yeah. And did you parents think youd always end up with a Turkish? Yeah, my parents knew I would always end up with a Turkish partner. My parents as soon as they found that I was there in someone in Turkey. Their first reaction was, okay, new, then we would...

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-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>
 *   - <fieldset>
 *   - <output>
 */
const io = form.elements;
// Reference <button>
const btn = io.toggle;
// Reference <fieldset>
const src = io.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(" ");
  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);
};

/**
 * Handle "click" event when the user clicks
 * button#toggle. Basically an on/off switch
 * for whether fieldset#source can be edited
 * and when the text can be indexed.
 * @param {object} e - Event object
 */
const editText = (e) => {
  e.target.classList.toggle("off");
  src.toggleAttribute("contenteditable");
  indexText();
};

/**
 * Handle "click" event when user clicks
 * a word. Each word is inside a <mark> and
 * it's background color will change, and
 * it's 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 `
    <li>${txt}
    ${h.dataset.idx}</li>
    `;
    });
  sel.firstElementChild.innerHTML =...