Upload 2 files

script.js

@@ -0,0 +1,359 @@
+const inputText = document.getElementById('input-text');
+const bubbleContainer = document.getElementById('bubble-container');
+const replaceSpacesButton = document.getElementById('replace-spaces-button');
+const replaceUnderscoreButton = document.getElementById('replace-underscore-button');
+const revertUnderscoreButton = document.getElementById('revert-underscore-button');
+const replaceLineBreaksButton = document.getElementById('replace-linebreaks-button');
+const replaceCommasButton = document.getElementById('replace-commas-button');
+const removeDuplicatesButton = document.getElementById('remove-duplicates-button');
+const revertSpacesButton = document.getElementById('revert-spaces-button');
+const copyButton = document.getElementById('copy-button');
+const undoButton = document.getElementById('undo-button');
+const redoButton = document.getElementById('redo-button');
+const deleteModeButton = document.getElementById('delete-mode-button');
+const emphasisModeButton = document.getElementById('emphasis-mode-button');
+const mitigateModeButton = document.getElementById('mitigate-mode-button');
+
+const bubbleColors = {};
+
+let history = [];
+let historyIndex = -1;
+
+let deleteModeEnabled = false;
+
+let emphasisModeEnabled = false;
+
+let mitigateModeEnabled = false;
+
+inputText.addEventListener('input', handleTextChange);
+replaceSpacesButton.addEventListener('click', replaceSpaces);
+replaceUnderscoreButton.addEventListener('click', replaceUnderscores);
+revertUnderscoreButton.addEventListener('click', revertUnderscores);
+replaceLineBreaksButton.addEventListener('click', replaceLineBreaks);
+replaceCommasButton.addEventListener('click', replaceCommas);
+removeDuplicatesButton.addEventListener('click', removeDuplicates);
+revertSpacesButton.addEventListener('click', revertSpaces);
+copyButton.addEventListener('click', copyToClipboard);
+undoButton.addEventListener('click', undoChanges);
+redoButton.addEventListener('click', redoChanges);
+deleteModeButton.addEventListener('click', toggleDeleteMode);
+emphasisModeButton.addEventListener('click', toggleEmphasisMode);
+mitigateModeButton.addEventListener('click', toggleMitigateMode);
+
+const sortable = new Sortable(bubbleContainer, {
+  animation: 250,
+  ghostClass: 'ghost',
+  onEnd: handleBubbleChange,
+  disabled: deleteModeEnabled || emphasisModeEnabled || mitigateModeEnabled
+});
+
+function handleTextChange() {
+  const text = inputText.value;
+
+  if (history.length === 0) {
+    history.push('');
+    historyIndex++;
+  }
+
+  if (text !== history[historyIndex]) {
+    if (historyIndex < history.length - 1) {
+
+      history.splice(historyIndex + 1);
+    }
+
+    history.push(text);
+    historyIndex++;
+
+    updateBubbles();
+    updateButtonStates();
+  }
+}
+
+function handleBubbleChange() {
+  const conceptList = Array.from(bubbleContainer.getElementsByClassName('bubble')).map(bubble => bubble.textContent.trim());
+  inputText.value = conceptList.join(', ');
+  handleTextChange();
+}
+
+function updateBubbles() {
+  bubbleContainer.innerHTML = '';
+  const text = inputText.value.trim();
+
+  if (text === '') return;
+
+  const concepts = text.split(', ');
+
+  concepts.forEach(concept => {
+    const bubble = createBubble(concept);
+    bubbleContainer.appendChild(bubble);
+  });
+}
+
+function createBubble(text) {
+  const bubble = document.createElement('div');
+  bubble.classList.add('bubble');
+
+  if (!bubbleColors.hasOwnProperty(text)) {
+    bubbleColors[text] = getRandomColor();
+  }
+
+  bubble.style.backgroundColor = bubbleColors[text];
+
+  const bubbleText = document.createElement('span');
+  bubbleText.classList.add('bubble-text');
+  bubbleText.innerText = text;
+
+  bubble.appendChild(bubbleText);
+
+  if (deleteModeEnabled) {
+    bubble.classList.add('delete-mode');
+    bubble.addEventListener('click', deleteBubble);
+  }
+
+  if (emphasisModeEnabled) {
+    bubble.classList.add('emphasis-mode');
+    bubble.addEventListener('click', emphasizeBubble);
+  }
+
+  if (mitigateModeEnabled) {
+    bubble.classList.add('mitigate-mode');
+    bubble.addEventListener('click', mitigateBubble);
+  }
+
+  return bubble;
+}
+
+function getRandomColor() {
+  const h = Math.floor(Math.random() * 360);
+  const s = Math.floor(Math.random() * 30) + 50;
+  const l = Math.floor(Math.random() * 40) + 30;
+
+  return `hsl(${h}, ${s}%, ${l}%)`;
+}
+
+function updateButtonStates() {
+  undoButton.disabled = historyIndex === 0;
+  redoButton.disabled = historyIndex === history.length - 1;
+}
+
+function replaceSpaces() {
+  const text = inputText.value;
+  const replacedText = text.replace(/ /g, ', ');
+  inputText.value = replacedText;
+  handleTextChange();
+}
+
+function revertSpaces() {
+  const text = inputText.value;
+  const replacedText = text.replace(/, /g, ' ');
+  inputText.value = replacedText;
+  handleTextChange();
+}
+
+function replaceUnderscores() {
+  const text = inputText.value;
+  const replacedText = text.replace(/_/g, ' ');
+  inputText.value = replacedText;
+  handleTextChange();
+}
+
+function revertUnderscores() {
+  const text = inputText.value;
+  const replacedText = text.replace(/([^,]) /g, '$1_');
+  inputText.value = replacedText;
+  handleTextChange();
+}
+
+function replaceLineBreaks() {
+  const text = inputText.value;
+  const replacedText = text.replace(/\n/g, ', ');
+  inputText.value = replacedText;
+  handleTextChange();
+}
+
+function replaceCommas() {
+  const text = inputText.value;
+  const step1 = text.replace(/,,/g, ',');
+  const step2 = step1.replace(/, ,/g, ', ');
+  const step3 = step2.trimRight();
+  const step4 = step3.replace(/,$/, '');
+  const step5 = step4.replace(/^,/, '');
+  const step6 = step5.replace(/,  /g, ', ');
+  const replacedText = step6.replace(/^ /, '');
+
+  inputText.value = replacedText;
+  handleTextChange();
+}
+
+function removeDuplicates() {
+  const text = inputText.value;
+  const concepts = text.split(', ');
+
+  const uniqueConcepts = [...new Set(concepts)];
+
+  inputText.value = uniqueConcepts.join(', ');
+  handleTextChange();
+}
+
+
+function copyToClipboard() {
+  inputText.select();
+  inputText.setSelectionRange(0, 99999);
+  document.execCommand('copy');
+}
+
+function undoChanges() {
+  if (historyIndex > 0) {
+    historyIndex--;
+    inputText.value = history[historyIndex];
+    updateBubbles();
+    updateButtonStates();
+  }
+}
+
+function redoChanges() {
+  if (historyIndex < history.length - 1) {
+    historyIndex++;
+    inputText.value = history[historyIndex];
+    updateBubbles();
+    updateButtonStates();
+  }
+}
+
+function toggleDeleteMode() {
+  deleteModeEnabled = !deleteModeEnabled;
+  deleteModeButton.classList.toggle('active');
+
+  if (deleteModeEnabled) {
+    emphasisModeEnabled = false;
+    emphasisModeButton.classList.remove('active');
+    mitigateModeEnabled = false;
+    mitigateModeButton.classList.remove('active');
+  }
+
+  sortable.option('disabled', deleteModeEnabled);
+  bubbleContainer.classList.toggle('delete-mode-container');
+
+  const bubbles = bubbleContainer.getElementsByClassName('bubble');
+
+  for (let i = 0; i < bubbles.length; i++) {
+    const bubble = bubbles[i];
+      bubble.classList.remove('emphasis-mode');
+      bubble.classList.remove('mitigate-mode');
+    if (deleteModeEnabled) {
+      bubble.classList.add('delete-mode');
+      bubble.removeEventListener('click', emphasizeBubble);
+      bubble.removeEventListener('click', mitigateBubble);
+      bubble.addEventListener('click', deleteBubble);
+    } else {
+      bubble.classList.remove('delete-mode');
+      bubble.removeEventListener('click', deleteBubble);
+    }
+  }
+}
+
+function toggleEmphasisMode() {
+  emphasisModeEnabled = !emphasisModeEnabled;
+  emphasisModeButton.classList.toggle('active');
+
+  if (emphasisModeEnabled) {
+    deleteModeEnabled = false;
+    deleteModeButton.classList.remove('active');
+    mitigateModeEnabled = false;
+    mitigateModeButton.classList.remove('active');
+  }
+
+  sortable.option('disabled', emphasisModeEnabled);
+  bubbleContainer.classList.toggle('emphasis-mode-container');
+
+  const bubbles = bubbleContainer.getElementsByClassName('bubble');
+
+  for (let i = 0; i < bubbles.length; i++) {
+    const bubble = bubbles[i];
+     bubble.classList.remove('delete-mode');
+     bubble.classList.remove('mitigate-mode');
+    if (emphasisModeEnabled) {
+      bubble.classList.add('emphasis-mode');
+      bubble.removeEventListener('click', deleteBubble);
+      bubble.removeEventListener('click', mitigateBubble);
+      bubble.addEventListener('click', emphasizeBubble);
+    } else {
+      bubble.classList.remove('emphasis-mode');
+      bubble.removeEventListener('click', emphasizeBubble);
+    }
+  }
+}
+
+function toggleMitigateMode() {
+  mitigateModeEnabled = !mitigateModeEnabled;
+  mitigateModeButton.classList.toggle('active');
+
+  if (mitigateModeEnabled) {
+    deleteModeEnabled = false;
+    deleteModeButton.classList.remove('active');
+    emphasisModeEnabled = false;
+    emphasisModeButton.classList.remove('active');
+  }
+
+  sortable.option('disabled', mitigateModeEnabled);
+  bubbleContainer.classList.toggle('mitigate-mode-container');
+
+  const bubbles = bubbleContainer.getElementsByClassName('bubble');
+
+  for (let i = 0; i < bubbles.length; i++) {
+    const bubble = bubbles[i];
+      bubble.classList.remove('delete-mode');
+      bubble.classList.remove('emphasis-mode');
+    if (mitigateModeEnabled) {
+      bubble.classList.add('mitigate-mode');
+      bubble.removeEventListener('click', deleteBubble);
+      bubble.removeEventListener('click', emphasizeBubble);
+      bubble.addEventListener('click', mitigateBubble);
+    } else {
+      bubble.classList.remove('mitigate-mode');
+      bubble.removeEventListener('click', mitigateBubble);
+    }
+  }
+}
+
+function deleteBubble(event) {
+  const bubble = event.target.closest('.bubble');
+  const bubbleText = bubble.querySelector('.bubble-text');
+  const nextComma = bubbleText.nextSibling;
+
+  bubble.remove();
+
+  if (nextComma && nextComma.nodeType === Node.TEXT_NODE && nextComma.textContent.trim() === ',') {
+    nextComma.remove();
+  }
+
+  handleBubbleChange();
+}
+
+function emphasizeBubble(event) {
+  const bubble = event.target.closest('.bubble');
+  const bubbleText = bubble.querySelector('.bubble-text');
+  const text = bubbleText.innerText.trim();
+
+  if (text.startsWith('[') && text.endsWith(']')) {
+    bubbleText.innerText = text.slice(1, -1);
+  } else {
+    bubbleText.innerText = `(${text})`;
+  }
+
+  handleBubbleChange();
+}
+
+function mitigateBubble(event) {
+ const bubble = event.target.closest('.bubble');
+  const bubbleText = bubble.querySelector('.bubble-text');
+  const text = bubbleText.innerText.trim();
+
+  if (text.startsWith('(') && text.endsWith(')')) {
+    bubbleText.innerText = text.slice(1, -1);
+  } else {
+    bubbleText.innerText = `[${text}]`;
+  }
+
+  handleBubbleChange();
+}

styles.css

@@ -0,0 +1,136 @@
+body {
+  background-color: #1C1C1C;
+  font-family: "Signika", sans-serif;
+  user-select: none;
+}
+
+.buttons {
+  padding: 4px 10px;
+  border: none;
+  border-radius: 20px;
+  font-size: 15px;
+  font-family: "Arial", sans-serif;
+  color: black;
+  cursor: pointer;
+  }
+  
+  .delete-mode-button {
+  font-size: 25px;
+  padding: 2px 10px;
+  position: relative;
+  top: 3px;
+}
+
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+#input-text {
+  width: 100%;
+  height: 100px;
+  color: white;
+  font-size: 14px;
+  margin-bottom: -8px;
+  box-sizing: border-box;
+}
+
+.text-container {
+  border-radius: 20px;
+  padding: 10px 10px;
+  border: none;
+  outline: none;
+  background-color: black;
+}
+
+.bubble {
+  display: inline-block;
+  padding: 10px 10px;
+  border-radius: 20px;
+  margin-bottom: 5px;
+  margin-right: 3px;
+  cursor: move;
+}
+
+.bubble-text {
+  color: white;
+  text-shadow: 0px 0px 8px black;
+  user-select: none;
+}
+
+.bubble-container {
+  display: flex;
+  flex-wrap: wrap;
+  user-select: none;
+}
+
+.ghost {
+  opacity: 0;
+}
+
+.mitigate-mode {
+  opacity: 0.66;
+}
+
+.bubble.mitigate-mode {
+  cursor: crosshair;
+}
+
+.bubble.mitigate-mode:hover {
+  opacity: 1;
+  filter: saturate(0);
+}
+
+.delete-mode {
+  opacity: 0.66;
+}
+
+.bubble.delete-mode {
+  cursor: crosshair;
+}
+
+.bubble.delete-mode:hover {
+  opacity: 0.33;
+}
+
+.emphasis-mode {
+  opacity: 0.66;
+}
+
+.bubble.emphasis-mode {
+  cursor: crosshair;
+}
+
+.bubble.emphasis-mode:hover {
+  opacity: 1;
+  filter: saturate(3);
+}
+
+.text-container:focus {
+  background-color: #3a3a3a;
+}
+
+#mitigate-mode-button.active {
+  background-color: #4299e3;
+}
+
+#delete-mode-button.active {
+  background-color: #e3a442;
+  color: white;
+}
+
+#emphasis-mode-button.active {
+  background-color: #e34242;
+}
+
+.tooltip {
+  position: relative;
+  display: inline-block;
+  cursor: help;
+}
+
+.tooltip:hover .tooltiptext {
+  visibility: visible;
+  opacity: 1;
+}