diff --git a/src/components/panels/Panel.vue b/src/components/panels/Panel.vue index 7052d66d..ef33acea 100644 --- a/src/components/panels/Panel.vue +++ b/src/components/panels/Panel.vue @@ -406,7 +406,7 @@ export default { function onViewChange(index) { activeTabIndex.value = index; if (index !==2) { - AnnotationUtils.removeChipsFromOtherViews() + AnnotationUtils.removeWitnessesWrappers() } emit('active-view', activeTabIndex.value); diff --git a/src/utils/annotations.js b/src/utils/annotations.js index 5f513d9c..6127ef8c 100644 --- a/src/utils/annotations.js +++ b/src/utils/annotations.js @@ -247,27 +247,27 @@ export function addWitness(target, witness, color) { const targetIndex = [].slice.call(parentEl.children).indexOf(target) if (targetIndex < 0) return; - const witEl = createWitnessEl(witness, color) - const isWitnessesEl = parentEl.children[targetIndex-1].classList.contains("witnesses") + const witnessEl = createWitnessEl(witness, color) + const isWrapper = parentEl.children[targetIndex-1].classList.contains("witnesses") - if (isWitnessesEl) { - let witnessesEl = parentEl.children[targetIndex-1] - witnessesEl.appendChild(witEl) + if (isWrapper) { + let wrapper = parentEl.children[targetIndex-1] + wrapper.appendChild(witnessEl) } else { - // witnesses element which holds the witnesses 'chips' is not yet created -> we add the first witness + // witnesses wrapper which holds the witnesses 'chips' is not yet created -> we add the first witness // create witnesses Html - const witnessesEl = createWitnessesWrapper() - witnessesEl.appendChild(witEl) - parentEl.insertBefore(witnessesEl, target) + const wrapper = createWitnessesWrapper() + wrapper.appendChild(witnessEl) + parentEl.insertBefore(wrapper, target) } } function createWitnessesWrapper() { - const witnessesEl = document.createElement("span"); - witnessesEl.classList.add('witnesses') + const el = document.createElement("span"); + el.classList.add('witnesses') - return witnessesEl + return el } function createWitnessEl(witness, witnessColor) { @@ -281,15 +281,16 @@ function createWitnessEl(witness, witnessColor) { return el } -export function removeChipsFromOtherViews() { +export function removeWitnessesWrappers() { + // remove witnesses in text Panel - it is used when switch off the variants tab const textPanelEl = document.querySelector('#text-content') - const witnessesElements = textPanelEl.getElementsByClassName('witnesses') - if (!witnessesElements) return; - if(Array.from(witnessesElements).length === 0) return; + const wrappers = textPanelEl.getElementsByClassName('witnesses') + if (!wrappers) return; + if(Array.from(wrappers).length === 0) return; // each target has its witnesses wrapper; for every target we remove its witnesses wrapper - Array.from(witnessesElements).forEach((witnesses) => { - witnesses.remove() + Array.from(wrappers).forEach((wrapper) => { + wrapper.remove() }) } @@ -299,16 +300,16 @@ export function removeWitness(selector, witness) { const textPanel = document.querySelector('#text-content') if (!textPanel.querySelector('.witnesses')) return; - const witnessesEl = getWitnessesHtmlEl(selector) - if (!witnessesEl) return; - if (Array.from(witnessesEl.children).length === 0) return; + const wrapper = getWitnessesWrapper(selector) + if (!wrapper) return; + if (Array.from(wrapper.children).length === 0) return; - const witEl = Array.from(witnessesEl.children).filter(item => item.innerHTML === witness) + const witnessEl = Array.from(wrapper.children).filter(item => item.innerHTML === witness) // witEl: refers to the current Witness chip that we will remove - if (witEl.length > 0) witEl[0].remove() + if (witnessEl.length > 0) witnessEl[0].remove() } -export function getWitnessesHtmlEl(selector) { +export function getWitnessesWrapper(selector) { // selector represents the target text of a certain variant item // we aim to get the html element which contains the 'witnesses chips' related to the target. // this html element which contains the 'witnesses chips' is located before the target element @@ -323,21 +324,22 @@ export function getWitnessesHtmlEl(selector) { return parentEl.children[targetIndex-1] } -export function getWitnessesList(witnessesEl) { - // returns the list of witnesses() which are already selected - let witnessesList= [] - if (!witnessesEl) return []; - if(Array.from(witnessesEl.children).length === 0) return []; +export function getWitnessesList(wrapper) { + // wrapper: witnesses html wrapper which belongs to a target + // returns the list of witnesses() which belong to a witnesses wrapper + let list = [] + if (!wrapper) return []; + if(Array.from(wrapper.children).length === 0) return []; - Array.from(witnessesEl.children).forEach((witness) => { - witnessesList.push(witness.innerHTML) + Array.from(wrapper.children).forEach((witness) => { + list.push(witness.innerHTML) }) - return witnessesList + return list } export function isVariant(annotation) { - return annotation.body['x-content-type'] === 'Variant'; + return annotation?.body['x-content-type'] === 'Variant'; }