Skip to content

Commit

Permalink
Merge pull request #234 from hyperaudio/229-strikeout-fix
Browse files Browse the repository at this point in the history 
229 strikeout fix and 233 Update Hyperaudio Lite Editor
  • Loading branch information
@maboa
maboa authored Sep 18, 2024
2 parents 76916aa + 7ca7f7c commit 4382320
Show file tree
Hide file tree
Showing 2 changed files with 532 additions and 601 deletions.
143 changes: 63 additions & 80 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -730,11 +730,11 @@ <h3 class="font-bold text-lg" style="margin-bottom:16px">Transcribe</h3>
}

d = new Date();
console.log("sanitising took "+(d.getTime() - starttime)+"ms");
//console.log("sanitising took "+(d.getTime() - starttime)+"ms");
}

function resetTimer() {
console.log("reset sanitisation timer");
//console.log("reset sanitisation timer");
clearTimeout(time);
time = setTimeout(sanitise, 1000);
}
Expand Down Expand Up @@ -1067,11 +1067,7 @@ <h3 class="font-bold text-lg">Load from Local Storage</h3>

populateCaptionEditor(data);

console.log("no caption alert");
console.log(localStorage.getItem("noCaptionAlert"));

if (updateCaptionsFromTranscript === false && localStorage.getItem("noCaptionAlert") !== "true") {
console.log("displaying...");
document.querySelector('#captionsource-alert').style.visibility = 'visible';
}
}
Expand Down Expand Up @@ -1238,103 +1234,90 @@ <h3 class="font-bold text-lg">Load from Local Storage</h3>

audioDataArray = [];
let transcript = document.querySelector("#hypertranscript");
let selection = null;

if (window.getSelection) {
selection = window.getSelection();
} else if (document.selection) {
selection = document.selection.createRange();
const selection = window.getSelection();
if (!selection.rangeCount) return;

const range = selection.getRangeAt(0);
let startNode = range.startContainer;
let endNode = range.endContainer;

// Function to find the parent paragraph
function findParentParagraph(node) {
while (node && node.nodeName !== 'P') {
node = node.parentNode;
}
return node;
}

if (selection.toString() !== '' && selection.focusNode !== null) {
// Find the parent paragraph of the start and end nodes
let startParagraph = findParentParagraph(startNode);
let endParagraph = findParentParagraph(endNode);

let endNodeText = selection.focusNode;
let startNodeText = selection.anchorNode;
let endNode = endNodeText.parentNode;
let startNode = startNodeText.parentNode;
let selectionAnchorOffset = selection.anchorOffset;
let selectionFocusOffset = selection.focusOffset;
if (!startParagraph || !endParagraph) return;

//Detect one word selection
if (startNode === endNode) {
if (startNode.style.textDecoration === "line-through") {
startNode.style.setProperty("text-decoration", "");
} else {
startNode.style.setProperty("text-decoration", "line-through");
}
} else {
// Deal with selection from right to left
if (Number(startNode.getAttribute("data-m")) > Number(endNode.getAttribute("data-m"))) {
let tempNode = startNode;
let tempText = startNodeText;
startNode = endNode;
startNodeText = endNodeText;
endNode = tempNode;
endNodeText = tempText;

selectionFocusOffset = selection.anchorOffset;
selectionAnchorOffset = selection.focusOffset;
}
// Function to apply strikethrough to a single element
function strikeoutElement(element) {
if (element.nodeType === Node.ELEMENT_NODE && !element.style.textDecoration.includes('line-through')) {
element.style.textDecoration = 'line-through';
}
}

// Check that last char of startNodeText is a space and we selected that char
// if so make the startNode its next sibling
// (as we have selected the trailing space of the previous word)
if (startNodeText.textContent.endsWith(" ") && selectionAnchorOffset === startNodeText.length - 1 ) {
startNode = startNode.nextElementSibling;
console.log("grabbing next element");
// Function to find the specific child element containing a node
function findChildElementContainingNode(parent, node) {
for (let child of parent.children) {
if (child.contains(node)) {
return child;
}
}
return null;
}

if (endNodeText.textContent.endsWith(" ") && selectionFocusOffset === 0 ) {
endNode = endNode.previousElementSibling;
console.log("grabbing previous element");
}
// Check if the selection ends at the very beginning of the end paragraph
const isEndAtParagraphStart = endNode === endParagraph && range.endOffset === 0;

let allSelectionStruckThrough = true;
// Apply strikethrough to selected elements
let currentParagraph = startParagraph;
let inSelection = false;

if (endNode.style.textDecoration !== "line-through" || startNode.style.textDecoration !== "line-through") {
allSelectionStruckThrough = false;
}

let nextNode = startNode.nextElementSibling;
while (currentParagraph) {
let startElement = currentParagraph === startParagraph ? findChildElementContainingNode(currentParagraph, startNode) : null;
let endElement = currentParagraph === endParagraph ? findChildElementContainingNode(currentParagraph, endNode) : null;

if (nextNode == null) {
nextNode = startNode;
}
// Skip the last paragraph if the selection ends at its start
if (currentParagraph === endParagraph && isEndAtParagraphStart) {
break;
}

let textDecoration = "line-through";
if (allSelectionStruckThrough === true) {
textDecoration = "";
Array.from(currentParagraph.children).forEach(child => {
if (child === startElement || inSelection) {
inSelection = true;
strikeoutElement(child);
}

endNode.style.setProperty("text-decoration", textDecoration);
startNode.style.setProperty("text-decoration", textDecoration);

nextNode = startNode.nextElementSibling;

if (nextNode == null) {
nextNode = startNode;
if (child === endElement) {
// Only strikeout the end element if it's not at the very start of the paragraph
if (!(currentParagraph === endParagraph && range.endOffset === 0)) {
strikeoutElement(child);
}
inSelection = false;
return; // Exit the forEach loop
}
});

while (startNode !== endNode && nextNode !== endNode){

nextNode.style.setProperty("text-decoration", textDecoration);

// check not end of paragraph
if (nextNode.nextElementSibling !== null) {
nextNode = nextNode.nextElementSibling;
} else {
nextNode = nextNode.parentElement.nextElementSibling.children[0];
}
}
}
if (currentParagraph === endParagraph) break;
currentParagraph = currentParagraph.nextElementSibling;
inSelection = true; // For paragraphs between start and end
}

// Clear the selection
selection.removeAllRanges();

// detect the ranges to be cut
audioDataArray = createArrayOfGaps(transcript);

// skip the text that is struck thru
skipStrikeThrus(audioDataArray);

});

registerStrikeThrus();
Expand Down
Loading

0 comments on commit 4382320

Please sign in to comment.