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
b263c29c
Commit
b263c29c
authored
Aug 23, 2021
by
dindigala
Browse files
feat: when changing sheet the selected tab remains open
parent
c42cf023
Pipeline
#222853
passed with stages
in 4 minutes and 43 seconds
Changes
6
Pipelines
1
Hide whitespace changes
Inline
Side-by-side
src/App.vue
View file @
b263c29c
...
...
@@ -23,6 +23,7 @@
:annotations=
"annotations"
:collection=
"collection"
:config=
"config"
:contentindex=
"contentindex"
:contenttypes=
"contentTypes"
:contenturls=
"contentUrls"
:fontsize=
"fontsize"
...
...
@@ -31,6 +32,7 @@
:item=
"item"
:labels=
"config.labels"
:manifests=
"manifests"
:oncontentindexchange=
"oncontentindexchange"
:panels=
"panels"
:request=
"request"
:tree=
"tree"
...
...
@@ -61,6 +63,7 @@ export default {
collection
:
{},
collectiontitle
:
''
,
config
:
{},
contentindex
:
0
,
contentTypes
:
[],
contentUrls
:
[],
fontsize
:
16
,
...
...
@@ -253,7 +256,16 @@ export default {
.
then
((
data
)
=>
{
this
.
item
=
data
;
const
previousManifest
=
(
this
.
contentUrls
[
0
]
||
''
).
split
(
'
/
'
).
pop
().
split
(
'
-
'
)[
0
];
this
.
contentUrls
=
this
.
getContentUrls
(
data
.
content
);
const
currentManifest
=
this
.
contentUrls
[
0
].
split
(
'
/
'
).
pop
().
split
(
'
-
'
)[
0
];
if
(
previousManifest
!==
currentManifest
)
{
this
.
$root
.
$emit
(
'
manifest-changed
'
);
}
this
.
imageurl
=
data
.
image
.
id
||
''
;
if
(
data
.
annotationCollection
)
{
...
...
@@ -403,6 +415,10 @@ export default {
:
this
.
getManifest
(
this
.
config
.
entrypoint
);
},
oncontentindexchange
(
index
)
{
this
.
contentindex
=
index
;
},
onItemUrlChange
()
{
if
(
this
.
loaded
)
{
return
;
...
...
src/components/annotations/annotations.vue
View file @
b263c29c
...
...
@@ -11,6 +11,7 @@
<q-tab
v-for=
"annotationTab in annotationTabs"
:key=
"annotationTab.key"
:class=
"
{'disabled-tab': annotationTab.key === currentTab}"
:label="$t(annotationTab.collectionTitle)"
:name="annotationTab.key"
@click="activeTab(annotationTab.key, annotationTab.type)"
...
...
@@ -111,8 +112,7 @@ export default {
key
,
collectionTitle
:
key
,
type
,
}))
.
filter
((
el
)
=>
this
.
annotations
.
find
((
x
)
=>
el
.
type
.
includes
(
x
.
body
[
'
x-content-type
'
])));
}));
},
annotationTabConfig
()
{
return
this
.
config
?.
annotations
?.
tabs
||
{};
...
...
@@ -196,10 +196,16 @@ export default {
},
},
mounted
()
{
this
.
currentTab
=
this
.
annotationTabs
?.[
0
].
key
;
this
.
$root
.
$on
(
'
update-annotations
'
,
this
.
onContentUpdate
);
this
.
$root
.
$on
(
'
update-annotation-loading
'
,
(
isProcessing
)
=>
{
this
.
isProcessing
=
!!
isProcessing
;
});
this
.
$root
.
$on
(
'
manifest-changed
'
,
()
=>
{
this
.
currentTab
=
this
.
annotationTabs
?.[
0
].
key
;
});
},
methods
:
{
activeTab
(
key
)
{
...
...
@@ -356,7 +362,6 @@ export default {
onContentUpdate
(
ids
)
{
try
{
this
.
currentTab
=
this
.
annotationTabs
[
0
].
key
;
this
.
contentIds
=
ids
;
this
.
highlightActiveContent
(
this
.
filteredAnnotations
);
...
...
@@ -576,4 +581,8 @@ export default {
flex
:
1
;
flex-direction
:
column
;
}
.disabled-tab
{
pointer-events
:
none
;
}
</
style
>
src/components/content.vue
View file @
b263c29c
<
template
>
<div
class=
"item"
>
<q-tabs
v-model=
"activeTab"
v-model=
"activeTab
Contents
"
dense
class=
"text-grey q-mb-sm"
active-color=
"$q.dark.isActive ? 'white' : 'accent'"
...
...
@@ -79,6 +79,10 @@ export default {
type
:
Array
,
default
:
()
=>
[],
},
contentindex
:
{
type
:
Number
,
default
:
()
=>
0
,
},
fontsize
:
{
type
:
Number
,
default
:
()
=>
16
,
...
...
@@ -87,6 +91,10 @@ export default {
type
:
Array
,
default
:
()
=>
[],
},
oncontentindexchange
:
{
type
:
Function
,
default
:
()
=>
null
,
},
request
:
{
type
:
Function
,
default
:
null
,
...
...
@@ -101,7 +109,7 @@ export default {
},
},
data
:
()
=>
({
activeTab
:
null
,
activeTab
Contents
:
''
,
content
:
''
,
fontSizeLimits
:
{
min
:
14
,
...
...
@@ -115,75 +123,93 @@ export default {
return
Object
.
keys
(
support
).
length
&&
support
.
url
!==
''
;
},
activeTab
()
{
return
this
.
contenturls
[
this
.
contentindex
];
},
},
watch
:
{
fontsize
()
{
this
.
$refs
.
contentsize
.
style
.
fontSize
=
`
${
this
.
fontsize
}
px`
;
},
async
activeTab
(
url
)
{
this
.
$root
.
$emit
(
'
update-annotation-loading
'
,
true
);
activeTabContents
(
url
)
{
this
.
oncontentindexchange
(
this
.
contenturls
.
findIndex
((
x
)
=>
x
===
url
));
},
activeTab
:
{
async
handler
(
url
)
{
if
(
!
url
)
{
return
;
}
this
.
$root
.
$emit
(
'
update-annotation-loading
'
,
true
);
const
data
=
await
this
.
request
(
url
,
'
text
'
);
const
data
=
await
this
.
request
(
url
,
'
text
'
);
if
(
this
.
supportType
)
{
await
this
.
getSupport
(
this
.
manifests
[
0
].
support
);
}
if
(
this
.
supportType
)
{
await
this
.
getSupport
(
this
.
manifests
[
0
].
support
);
}
const
annotationPanelHidden
=
this
.
panels
.
find
(
(
x
)
=>
x
.
panel_label
===
'
Annotations
'
&&
!
x
.
show
,
);
const
parser
=
new
DOMParser
();
let
dom
=
parser
.
parseFromString
(
data
,
'
text/html
'
);
if
(
!
annotationPanelHidden
)
{
const
spans
=
[
...
dom
.
querySelectorAll
(
'
[data-target]:not([value=""])
'
),
];
const
spanIds
=
[
...
new
Set
(
spans
.
map
((
x
)
=>
x
.
getAttribute
(
'
data-target
'
)
.
replace
(
'
_start
'
,
''
)
.
replace
(
'
_end
'
,
''
)),
),
];
spanIds
.
forEach
((
selector
)
=>
{
dom
=
this
.
replaceSelectorWithSpan
(
selector
,
dom
);
});
const
dataTargets
=
[...
dom
.
querySelectorAll
(
'
[id]
'
)].
map
((
x
)
=>
x
.
getAttribute
(
'
id
'
));
dataTargets
.
forEach
((
selector
)
=>
this
.
addHighlightToTargetIds
(
selector
,
dom
));
}
this
.
content
=
dom
.
documentElement
.
innerHTML
;
const
displayedAnnotations
=
[
...
dom
.
querySelectorAll
(
'
[data-annotation]
'
),
]
.
map
((
x
)
=>
x
.
getAttribute
(
'
class
'
))
.
reduce
((
prev
,
curr
)
=>
{
(
curr
||
''
).
split
(
'
'
).
forEach
((
c
)
=>
{
prev
[
c
.
replace
(
/
\.
/g
,
''
)]
=
true
;
const
annotationPanelHidden
=
this
.
panels
.
find
(
(
x
)
=>
x
.
panel_label
===
'
Annotations
'
&&
!
x
.
show
,
);
const
parser
=
new
DOMParser
();
let
dom
=
parser
.
parseFromString
(
data
,
'
text/html
'
);
if
(
!
annotationPanelHidden
)
{
const
spans
=
[
...
dom
.
querySelectorAll
(
'
[data-target]:not([value=""])
'
),
];
const
spanIds
=
[
...
new
Set
(
spans
.
map
((
x
)
=>
x
.
getAttribute
(
'
data-target
'
)
.
replace
(
'
_start
'
,
''
)
.
replace
(
'
_end
'
,
''
)),
),
];
spanIds
.
forEach
((
selector
)
=>
{
dom
=
this
.
replaceSelectorWithSpan
(
selector
,
dom
);
});
return
prev
;
},
{});
await
this
.
delay
(
200
);
const
dataTargets
=
[...
dom
.
querySelectorAll
(
'
[id]
'
)].
map
((
x
)
=>
x
.
getAttribute
(
'
id
'
)
);
this
.
$root
.
$emit
(
'
update-annotations
'
,
displayedAnnotations
);
this
.
$root
.
$emit
(
'
update-annotation-loading
'
,
false
);
dataTargets
.
forEach
((
selector
)
=>
this
.
addHighlightToTargetIds
(
selector
,
dom
));
}
this
.
content
=
dom
.
documentElement
.
innerHTML
;
const
displayedAnnotations
=
[
...
dom
.
querySelectorAll
(
'
[data-annotation]
'
),
]
.
map
((
x
)
=>
x
.
getAttribute
(
'
class
'
))
.
reduce
((
prev
,
curr
)
=>
{
(
curr
||
''
).
split
(
'
'
).
forEach
((
c
)
=>
{
prev
[
c
.
replace
(
/
\.
/g
,
''
)]
=
true
;
});
return
prev
;
},
{});
await
this
.
delay
(
200
);
this
.
$root
.
$emit
(
'
update-annotations
'
,
displayedAnnotations
);
this
.
$root
.
$emit
(
'
update-annotation-loading
'
,
false
);
},
immediate
:
true
,
},
},
async
created
()
{
this
.
fasSearchPlus
=
fasSearchPlus
;
this
.
fasSearchMinus
=
fasSearchMinus
;
const
[
contentUrl
]
=
this
.
contenturls
;
const
activeTab
=
this
.
contenturls
[
this
.
contentindex
];
const
[
contenturls
]
=
this
.
contenturls
[
0
];
this
.
activeTab
=
contentUrl
;
this
.
activeTabContents
=
activeTab
;
if
(
!
activeTab
)
{
this
.
oncontentindexchange
(
0
);
this
.
activeTabContents
=
contenturls
;
}
},
mounted
()
{
...
...
@@ -194,6 +220,13 @@ export default {
this
.
getSupport
(
this
.
manifests
[
index
].
support
);
}
});
const
[
contenturls
]
=
this
.
contenturls
[
0
];
this
.
$root
.
$on
(
'
manifest-changed
'
,
()
=>
{
this
.
activeTabContents
=
contenturls
;
this
.
oncontentindexchange
(
0
);
});
},
methods
:
{
async
delay
(
ms
=
2500
)
{
...
...
src/index.template.html
View file @
b263c29c
...
...
@@ -31,7 +31,7 @@
-->
<script
id=
"tido-config"
type=
"application/json"
>
{
"
entrypoint
"
:
""
,
"
entrypoint
"
:
"
https://ahikar-dev.sub.uni-goettingen.de/api/textapi/ahikar/arabic-karshuni/collection.json
"
,
"
annotations
"
:
{
"
show
"
:
true
,
"
types
"
:
[
...
...
src/mixins/panels.js
View file @
b263c29c
...
...
@@ -75,6 +75,10 @@ export default {
this
.
panels
=
newPanels
;
});
this
.
$root
.
$on
(
'
manifest-changed
'
,
()
=>
{
this
.
panels
=
[...
this
.
panels
].
map
((
tab
)
=>
({
...
tab
,
tab_model
:
'
tab0
'
}));
});
this
.
$root
.
$on
(
'
add-panel
'
,
()
=>
{
const
newPanel
=
{
id
:
uuidv4
(),
...
...
src/views/mainview.vue
View file @
b263c29c
...
...
@@ -93,6 +93,10 @@ export default {
type
:
Object
,
default
:
()
=>
{},
},
contentindex
:
{
type
:
Number
,
default
:
()
=>
0
,
},
contenttypes
:
{
type
:
Array
,
default
:
()
=>
[],
...
...
@@ -125,6 +129,10 @@ export default {
type
:
Array
,
default
:
()
=>
[],
},
oncontentindexchange
:
{
type
:
Function
,
default
:
()
=>
null
,
},
panels
:
{
type
:
Array
,
default
:
()
=>
[],
...
...
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