Skip to content
GitLab
Commit 171b784a authored by dindigala's avatar dindigala
Browse files

refactor: moved dom manipulation logic into mixin file

parent 5774ce05
Pipeline #208419 passed with stages
in 5 minutes and 3 seconds
Hide whitespace changes
Inline Side-by-side
src/components/annotations/annotations.vue
View file @ 171b784a
......@@ -47,6 +47,7 @@
<script>
import * as Icons from '@quasar/extras/fontawesome-v5';
import Annotation from '@/mixins/annotation';
import AnnotationToggles from '@/components/annotations/toggles.vue';
import AnnotationList from '@/components/annotations/list.vue';
import AnnotationOptions from '@/components/annotations/options.vue';
......@@ -61,6 +62,7 @@ export default {
AnnotationOptions,
Notification,
},
mixins: [Annotation],
props: {
annotations: {
type: Array,
......@@ -98,35 +100,9 @@ export default {
return [];
}
const output = this.configuredAnnotations.filter((annotationCollection) => contentType.type.includes(annotationCollection.body['x-content-type']))
.map((annotation) => ({
...annotation,
annotationIdValue: this.stripId(annotation.strippedId).split('.').filter((x) => x),
}))
.sort((a, b) => b.annotationIdValue.length - a.annotationIdValue.length);
const annotationType = this.configuredAnnotations.filter((annotationCollection) => contentType.type.includes(annotationCollection.body['x-content-type']));
if (!output.length) {
return [];
}
const annotationIdLength = output[0]?.annotationIdValue?.length || 0;
return output.map((x) => {
// Consider this as IP address (annotation ID)
// We will get longest ip address we have ("max" here)
// And if any of ip address part less then max then we are append 1 to it
// e.g Max = [1.2.3.4]
// current = [1.2.3] // Less than max because max has four parts
// So annotationIdValue current will be [1.2.3.1] --> Last 1 is better for comparision.
const annotationId = annotationIdLength - x.annotationIdValue.length;
if (annotationId > 0) {
x.annotationIdValue = [...x.annotationIdValue, ...new Array(annotationId).fill(1)].join('');
} else {
x.annotationIdValue = x.annotationIdValue.join('');
}
return x;
}).sort((a, b) => a.annotationIdValue - b.annotationIdValue);
return this.sortAnnotation(annotationType);
},
annotationTabConfig() {
return this.config?.annotations?.tabs || {};
......@@ -232,48 +208,6 @@ export default {
return this.config.annotations.types.filter((annotation) => annotation.contenttype === contentType)[0].icon;
},
highlightActiveTabContent(contentTypes) {
this.annotations.forEach((annotation) => {
const id = this.stripAnnotationId(annotation.target.id);
const textElement = document.getElementById(id);
if (textElement) {
const next = textElement.getAttribute('data-next');
const hasContentType = contentTypes.includes(annotation.body['x-content-type']);
if (hasContentType) {
textElement.classList.add('annotation', 'annotation-disabled');
} else {
textElement.classList.remove('annotation');
textElement.classList.add('annotation-disabled');
}
if (next) {
this.highlightNestedMotifs(next, hasContentType ? 'add' : 'remove', 'add');
}
}
});
},
highlightNestedMotifs(id, annotationOperation, annotationDisabledOperation) {
const element = document.getElementById(id.replace(/#/g, ''));
if (!element) {
return;
}
element.classList[annotationOperation]('annotation');
element.classList[annotationDisabledOperation]('annotation-disabled');
const nextId = element.getAttribute('data-next');
if (!nextId) {
return;
}
this.highlightNestedMotifs(nextId, annotationOperation, annotationDisabledOperation);
},
onHighlightAll() {
this.currentAnnotations.forEach((annotation) => this.updateToggleState(annotation, 'remove', 'add'));
......@@ -323,52 +257,11 @@ export default {
}
},
/**
* get the annotation id of the current item
*
* @param string url
* @return string
*/
stripAnnotationId(url) {
return url.split('/').pop();
},
stripId(val) {
return val.replace(/-/g, '.').replace(/[^.0-9]/g, '');
},
toggle(annotation) {
annotation.status = !annotation.status;
this.updateToggleState(annotation, 'toggle', 'toggle');
},
updateToggleState(annotation, text = 'toggle', list = 'toggle') {
const id = this.stripAnnotationId(annotation.target.id);
document.getElementById(id).classList[text]('annotation-disabled');
document.getElementById(`list${id}`).classList[list]('bg-grey-2');
this.updateNestedMotifToggle(document.getElementById(id).getAttribute('data-next'), text);
},
updateNestedMotifToggle(id, annotationClassOperation) {
const element = document.getElementById(id.replace(/#/g, ''));
if (!element) {
return;
}
element.classList[annotationClassOperation]('annotation-disabled');
const nextId = element.getAttribute('data-next');
if (!nextId) {
return;
}
this.updateNestedMotifToggle(nextId, annotationClassOperation);
},
},
};
</script>
......
src/mixins/annotation.js 0 → 100644
View file @ 171b784a
export default {
methods: {
getElementById(id) {
if (!id) {
return null;
}
return document.getElementById(id.replace(/#/g, ''));
},
highlightActiveTabContent(contentTypes) {
this.annotations.forEach((annotation) => {
const id = this.stripAnnotationId(annotation.target.id);
const textElement = this.getElementById(id);
if (textElement) {
const next = textElement.getAttribute('data-next');
const hasContentType = contentTypes.includes(annotation.body['x-content-type']);
if (hasContentType) {
this.updateTextContentClass(textElement, 'add', 'annotation', 'annotation-disabled');
} else {
this.updateTextContentClass(textElement, 'remove', 'annotation');
this.updateTextContentClass(textElement, 'add', 'annotation-disabled');
}
if (next) {
this.highlightNestedMotifs(next, hasContentType ? 'add' : 'remove', 'add');
}
}
});
},
highlightNestedMotifs(id, annotationOperation, annotationDisabledOperation) {
const element = this.getElementById(id);
if (!element) {
return;
}
this.updateTextContentClass(element, annotationOperation, 'annotation');
this.updateTextContentClass(element, annotationDisabledOperation, 'annotation-disabled');
const nextId = element.getAttribute('data-next');
if (!nextId) {
return;
}
this.highlightNestedMotifs(nextId, annotationOperation, annotationDisabledOperation);
},
sortAnnotation(annotations) {
if (!annotations?.length) {
return [];
}
const output = annotations.map((annotation) => ({
...annotation,
annotationIdValue: this.stripId(annotation.strippedId).split('.').filter((x) => x),
})).sort((a, b) => b.annotationIdValue.length - a.annotationIdValue.length);
const annotationIdLength = output[0]?.annotationIdValue?.length || 0;
return output.map((x) => {
// Consider this as IP address (annotation ID)
// We will get longest ip address we have ("max" here)
// And if any of ip address part less then max then we are append 1 to it
// e.g Max = [1.2.3.4]
// current = [1.2.3] // Less than max because max has four parts
// So annotationIdValue current will be [1.2.3.1] --> Last 1 is better for comparision.
const annotationId = annotationIdLength - x.annotationIdValue.length;
if (annotationId > 0) {
x.annotationIdValue = [...x.annotationIdValue, ...new Array(annotationId).fill(1)].join('');
} else {
x.annotationIdValue = x.annotationIdValue.join('');
}
return x;
}).sort((a, b) => a.annotationIdValue - b.annotationIdValue);
},
/**
* get the annotation id of the current item
*
* @param string url
* @return string
*/
stripAnnotationId(url) {
return url.split('/').pop();
},
stripId(val) {
return val.replace(/-/g, '.').replace(/[^.0-9]/g, '');
},
updateNestedMotifToggle(id, annotationClassOperation) {
const element = this.getElementById(id);
if (!element) {
return;
}
this.updateTextContentClass(element, annotationClassOperation, 'annotation-disabled');
const nextId = element.getAttribute('data-next');
if (!nextId) {
return;
}
this.updateNestedMotifToggle(nextId, annotationClassOperation);
},
updateToggleState(annotation, text = 'toggle', list = 'toggle') {
const id = this.stripAnnotationId(annotation.target.id);
this.updateTextContentClass(this.getElementById(id), text, 'annotation-disabled');
this.updateTextContentClass(this.getElementById(`list${id}`), list, 'bg-grey-2');
this.updateNestedMotifToggle(this.getElementById(id).getAttribute('data-next'), text);
},
updateTextContentClass(element, task = 'add', ...className) {
element.classList[task](...className);
},
},
};
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment