From 58041aa23a68d4e34b7b2423968fed00625f5d7a Mon Sep 17 00:00:00 2001
From: jojohoch <joachim.hoch@iqb.hu-berlin.de>
Date: Thu, 6 Jan 2022 08:40:38 +0100
Subject: [PATCH] [player] Remove unused code for underlining text
This disables the possibility of nested markers
---
.../marking-bar/marking-bar.component.ts | 2 +-
.../common/ui-elements/text/text.component.ts | 2 +-
.../element-container.component.ts | 2 +-
.../src/app/services/marking.service.ts | 78 ++++++-------------
4 files changed, 27 insertions(+), 57 deletions(-)
diff --git a/projects/common/components/marking-bar/marking-bar.component.ts b/projects/common/components/marking-bar/marking-bar.component.ts
index f325874c8..5b76b20fe 100644
--- a/projects/common/components/marking-bar/marking-bar.component.ts
+++ b/projects/common/components/marking-bar/marking-bar.component.ts
@@ -43,7 +43,7 @@ export class MarkingBarComponent {
@Input() element!: HTMLElement;
@Input() elementModel!: TextElement;
@Output() applySelection = new EventEmitter<{
- mode: 'mark' | 'underline' | 'delete',
+ mode: 'mark' | 'delete',
color: string,
element: HTMLElement
}>();
diff --git a/projects/common/ui-elements/text/text.component.ts b/projects/common/ui-elements/text/text.component.ts
index 3e652ce6d..be5b2d981 100644
--- a/projects/common/ui-elements/text/text.component.ts
+++ b/projects/common/ui-elements/text/text.component.ts
@@ -49,7 +49,7 @@ export class TextComponent extends ElementComponent {
@Output() elementValueChanged = new EventEmitter<ValueChangeElement>();
@Output() startSelection = new EventEmitter<MouseEvent>();
@Output() applySelection = new EventEmitter<{
- mode: 'mark' | 'underline' | 'delete',
+ mode: 'mark' | 'delete',
color: string,
element: HTMLElement
}>();
diff --git a/projects/player/src/app/components/element-container/element-container.component.ts b/projects/player/src/app/components/element-container/element-container.component.ts
index 6c1192a88..9dbe5b3da 100644
--- a/projects/player/src/app/components/element-container/element-container.component.ts
+++ b/projects/player/src/app/components/element-container/element-container.component.ts
@@ -187,7 +187,7 @@ export class ElementContainerComponent implements OnInit {
.pipe(takeUntil(this.ngUnsubscribe))
.subscribe((selection:
{
- mode: 'mark' | 'underline' | 'delete',
+ mode: 'mark' | 'delete',
color: string;
element: HTMLElement;
}) => {
diff --git a/projects/player/src/app/services/marking.service.ts b/projects/player/src/app/services/marking.service.ts
index 74754ef2f..345434184 100644
--- a/projects/player/src/app/services/marking.service.ts
+++ b/projects/player/src/app/services/marking.service.ts
@@ -6,9 +6,8 @@ import { TextComponent } from '../../../../common/ui-elements/text/text.componen
})
export class MarkingService {
private static readonly MARKING_TAG = 'ASPECT-MARKED';
- private static readonly UNDERLINE_TAG = 'ASPECT-UNDERLINED';
- applySelection(mode: 'mark' | 'underline' | 'delete',
+ applySelection(mode: 'mark' | 'delete',
color: string,
element: HTMLElement,
textComponent: TextComponent): void {
@@ -17,8 +16,7 @@ export class MarkingService {
const range = selection.getRangeAt(0);
if (this.isDescendantOf(range.startContainer, element) &&
this.isDescendantOf(range.endContainer, element)) {
- const markMode = mode === 'mark' ? 'marked' : 'underlined';
- this.applyRange(range, selection, mode === 'delete', color, markMode);
+ this.applyRange(range, selection, mode === 'delete', color);
textComponent.elementValueChanged.emit({
id: textComponent.elementModel.id,
values: [this.getMarkingData(textComponent.elementModel.text as string),
@@ -102,13 +100,13 @@ export class MarkingService {
}
private applyRange(
- range: Range, selection: Selection, clear: boolean, color: string, markMode: 'marked' | 'underlined'
+ range: Range, selection: Selection, clear: boolean, color: string
): void {
if (range.startContainer === range.endContainer) {
if (clear) {
this.clearMarkingFromNode(range);
} else {
- this.markNode(range, color, markMode);
+ this.markNode(range, color);
}
} else {
// When the user finishes selecting between paragraphs and the selection happens from
@@ -117,16 +115,15 @@ export class MarkingService {
const nodes: Node[] = [range.startContainer];
this.findNodes(range.commonAncestorContainer.childNodes, nodes, selection);
if (clear) {
- this.clearMarkingFromNodes(nodes, range);
+ this.clearNodes(nodes, range);
} else {
- this.markNodes(nodes, range, color, markMode);
+ this.markNodes(nodes, range, color);
}
}
}
private clearMarkingFromNode(range: Range): void {
- if (range.startContainer.parentElement?.tagName?.toUpperCase() === MarkingService.MARKING_TAG ||
- range.startContainer.parentElement?.tagName?.toUpperCase() === MarkingService.UNDERLINE_TAG) {
+ if (range.startContainer.parentElement?.tagName?.toUpperCase() === MarkingService.MARKING_TAG) {
const previousText = range.startContainer.nodeValue?.substring(0, range.startOffset) || '';
const text = range.startContainer.nodeValue?.substring(range.startOffset, range.endOffset) || '';
const nextText = range.startContainer.nodeValue?.substring(range.endOffset) || '';
@@ -136,31 +133,14 @@ export class MarkingService {
}
}
- private clearMarkingFromNodes(nodes: Node[], range: Range): void {
- const nestedMarkedNodes = nodes
- .filter(node => node.parentElement?.parentElement?.tagName.toUpperCase() === MarkingService.MARKING_TAG);
- const nestedUnderLinedNodes = nodes
- .filter(node => node.parentElement?.parentElement?.tagName.toUpperCase() === MarkingService.UNDERLINE_TAG);
- if (nestedUnderLinedNodes.length) {
- this.clearNodes(nestedUnderLinedNodes, range, nodes);
- } else if (nestedMarkedNodes.length) {
- this.clearNodes(nestedMarkedNodes, range, nodes);
- } else {
- this.clearNodes(nodes, range, nodes);
- }
- }
-
private clearMarking(node: Node, text: string, previousText: string, nextText: string) {
const textElement = document.createTextNode(text as string);
if (node.parentNode) {
const { parentNode } = node.parentNode;
- const markMode =
- node.parentElement?.tagName.toUpperCase() === MarkingService.MARKING_TAG ? 'marked' : 'underlined';
- const color =
- markMode === 'underlined' ? 'black' : (node.parentNode as HTMLElement).style.backgroundColor || 'none';
+ const color = (node.parentNode as HTMLElement).style.backgroundColor || 'none';
parentNode?.replaceChild(textElement, node.parentNode);
if (previousText) {
- const prev = this.createMarkedElement(color, markMode);
+ const prev = this.createMarkedElement(color);
prev.append(document.createTextNode(previousText));
parentNode?.insertBefore(prev, textElement);
}
@@ -170,18 +150,17 @@ export class MarkingService {
// In Firefox this always (in Chrome sometimes) leads
// to a misinterpretation of the selection. Therefore, the offset
// is manipulated.
- const end = this.createMarkedElement(color, markMode);
+ const end = this.createMarkedElement(color);
end.append(document.createTextNode(nextText));
parentNode?.insertBefore(end, textElement.nextSibling);
}
}
}
- private clearNodes(nodes: Node[], range: Range, allNodes: Node[]): void {
+ private clearNodes(nodes: Node[], range: Range): void {
nodes.forEach((node: Node) => {
- const index = allNodes.findIndex(rangeNode => rangeNode === node);
- if (node.parentElement?.tagName.toUpperCase() === MarkingService.MARKING_TAG ||
- node.parentElement?.tagName.toUpperCase() === MarkingService.UNDERLINE_TAG) {
+ const index = nodes.findIndex(rangeNode => rangeNode === node);
+ if (node.parentElement?.tagName.toUpperCase() === MarkingService.MARKING_TAG) {
const nodeValues = this.getNodeValues(node, nodes, index, range);
if (nodeValues.text) {
this.clearMarking(node, nodeValues.text, nodeValues.previousText, nodeValues.nextText);
@@ -194,9 +173,9 @@ export class MarkingService {
}
private mark(
- node: Node, text: string, previousText: string, nextText: string, color: string, markMode: 'marked' | 'underlined'
+ node: Node, text: string, previousText: string, nextText: string, color: string
): void {
- const markedElement: HTMLElement = this.createMarkedElement(color, markMode);
+ const markedElement: HTMLElement = this.createMarkedElement(color);
markedElement.append(document.createTextNode(text));
// important!
const { parentNode } = node;
@@ -233,34 +212,25 @@ export class MarkingService {
return { text, previousText, nextText };
};
- private markNode(range: Range, color: string, markMode: 'marked' | 'underlined'): void {
- if (range.startContainer.parentElement?.tagName.toUpperCase() !== MarkingService.MARKING_TAG ||
- range.startContainer.parentElement?.tagName.toUpperCase() !== MarkingService.UNDERLINE_TAG) {
- const markedElement: HTMLElement = this.createMarkedElement(color, markMode);
+ private markNode(range: Range, color: string): void {
+ if (range.startContainer.parentElement?.tagName.toUpperCase() !== MarkingService.MARKING_TAG) {
+ const markedElement: HTMLElement = this.createMarkedElement(color);
range.surroundContents(markedElement);
}
}
- private markNodes(nodes: Node[], range: Range, color: string, markMode: 'marked' | 'underlined'): void {
+ private markNodes(nodes: Node[], range: Range, color: string): void {
nodes.forEach((node, index) => {
const nodeValues = this.getNodeValues(node, nodes, index, range);
- if (nodeValues.text && node.parentElement?.tagName.toUpperCase() !== MarkingService.MARKING_TAG &&
- (nodeValues.text && node.parentElement?.tagName.toUpperCase() !== MarkingService.UNDERLINE_TAG)
- ) {
- this.mark(node, nodeValues.text, nodeValues.previousText, nodeValues.nextText, color, markMode);
+ if (nodeValues.text && node.parentElement?.tagName.toUpperCase() !== MarkingService.MARKING_TAG) {
+ this.mark(node, nodeValues.text, nodeValues.previousText, nodeValues.nextText, color);
}
});
}
- private createMarkedElement = (color: string, markMode: 'marked' | 'underlined'): HTMLElement => {
- let markedElement;
- if (markMode === 'marked') {
- markedElement = document.createElement(MarkingService.MARKING_TAG);
- markedElement.style.backgroundColor = color;
- } else {
- markedElement = document.createElement(MarkingService.UNDERLINE_TAG);
- markedElement.style.textDecoration = `underline solid ${color}`;
- }
+ private createMarkedElement = (color: string): HTMLElement => {
+ const markedElement = document.createElement(MarkingService.MARKING_TAG);
+ markedElement.style.backgroundColor = color;
return markedElement;
};
--
GitLab