Skip to content
GitLab
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
subugoe
emo
TIDO
Commits
171b784a
Commit
171b784a
authored
Jul 01, 2021
by
dindigala
Browse files
refactor: moved dom manipulation logic into mixin file
parent
5774ce05
Pipeline
#208419
passed with stages
in 5 minutes and 3 seconds
Changes
2
Pipelines
1
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
);
},
},
};
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment