Skip to content
GitLab
Menu
Projects
Groups
Snippets
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Sign in
Toggle navigation
Menu
Open sidebar
subugoe
emo
TIDO
Commits
590e284f
Commit
590e284f
authored
Jun 24, 2021
by
dindigala
Browse files
feat: implementation of bookmarking in default view
parent
e48befd5
Pipeline
#206466
passed with stages
in 3 minutes and 49 seconds
Changes
6
Pipelines
1
Hide whitespace changes
Inline
Side-by-side
src/App.vue
View file @
590e284f
...
...
@@ -8,6 +8,7 @@
v-if=
"config['header_section'].show"
:collectiontitle=
"collectiontitle"
:config=
"config"
:default-view=
"defaultView"
:imageurl=
"imageurl"
:item=
"item"
:itemurls=
"itemurls"
...
...
@@ -40,6 +41,7 @@
<
script
>
import
{
colors
}
from
'
quasar
'
;
import
treestore
from
'
@/stores/treestore.js
'
;
import
Header
from
'
@/components/header.vue
'
;
import
Panels
from
'
@/mixins/panels
'
;
...
...
@@ -64,10 +66,21 @@ export default {
item
:
{},
itemurl
:
''
,
itemurls
:
[],
loaded
:
false
,
manifests
:
[],
tree
:
[],
};
},
watch
:
{
'
$route.query
'
:
{
handler
:
'
onItemUrlChange
'
,
immediate
:
true
,
},
manifests
:
{
handler
:
'
onItemUrlChange
'
,
immediate
:
false
,
},
},
created
()
{
this
.
getConfig
();
this
.
init
();
...
...
@@ -101,16 +114,11 @@ export default {
*
* @param string url
*/
this
.
$root
.
$on
(
'
update-item
'
,
(
url
)
=>
{
this
.
itemurl
=
url
;
this
.
$router
.
push
({
query
:
{
itemurl
:
url
}
});
// NOTE: Set imageurl to an empty string. Otherwise, if there is no corresponding image,
// the "preceding" image according to the "preceding" item will be shown.
this
.
imageurl
=
''
;
this
.
getItemData
(
url
);
});
},
methods
:
{
defaultView
()
{
this
.
loaded
=
false
;
},
/**
* get resources using JavaScript's native fetch api
* caller: *getCollection()*, *getItemData()*, *getManifest()*
...
...
@@ -166,30 +174,36 @@ export default {
*
* @param string url
*/
getCollection
(
url
)
{
async
getCollection
(
url
)
{
this
.
isCollection
=
true
;
this
.
request
(
url
)
.
then
((
data
)
=>
{
this
.
collection
=
data
;
this
.
collectiontitle
=
this
.
getLabel
(
data
);
this
.
tree
.
push
(
{
children
:
[],
handler
:
(
node
)
=>
{
this
.
$root
.
$emit
(
'
update-tree-knots
'
,
node
.
label
);
},
label
:
this
.
collectiontitle
,
'
label-key
'
:
this
.
collectiontitle
,
selectable
:
false
,
},
);
const
data
=
await
this
.
request
(
url
);
if
(
Array
.
isArray
(
data
.
sequence
))
{
data
.
sequence
.
forEach
((
seq
)
=>
this
.
getManifest
(
seq
.
id
));
}
});
this
.
collection
=
data
;
this
.
collectiontitle
=
this
.
getLabel
(
data
);
this
.
tree
.
push
(
{
children
:
[],
handler
:
(
node
)
=>
{
this
.
$root
.
$emit
(
'
update-tree-knots
'
,
node
.
label
);
},
label
:
this
.
collectiontitle
,
'
label-key
'
:
this
.
collectiontitle
,
selectable
:
false
,
},
);
if
(
Array
.
isArray
(
data
.
sequence
))
{
const
promises
=
[];
data
.
sequence
.
forEach
((
seq
)
=>
promises
.
push
(
this
.
getManifest
(
seq
.
id
)));
await
Promise
.
all
(
promises
);
}
if
(
this
.
manifests
?.[
0
]?.
sequence
?.[
0
]?.
id
&&
!
this
.
$route
.
query
.
itemurl
)
{
this
.
loaded
=
false
;
this
.
$router
.
push
({
query
:
{
itemurl
:
this
.
manifests
?.[
0
]?.
sequence
?.[
0
]?.
id
}
});
}
},
/**
* get config object (JSON) from index.html
...
...
@@ -277,7 +291,7 @@ export default {
*
* @return array urls
*/
getItemUrls
(
sequence
,
label
)
{
getItemUrls
(
sequence
)
{
const
urls
=
[];
sequence
.
forEach
((
item
)
=>
{
...
...
@@ -292,11 +306,8 @@ export default {
if
(
this
.
itemurl
===
node
.
label
)
{
return
;
}
// node.label === itemurl
// @param label === manifest label; passed by getManifest()
this
.
$root
.
$emit
(
'
update-item
'
,
node
.
label
,
this
.
getSequenceIndex
(
label
));
this
.
$root
.
$emit
(
'
update-item-index
'
,
this
.
getItemIndex
(
node
.
label
));
this
.
$root
.
$emit
(
'
update-sequence-index
'
,
this
.
getSequenceIndex
(
label
));
this
.
loaded
=
false
;
this
.
$router
.
push
({
query
:
{
itemurl
:
node
.
label
}
});
},
},
);
...
...
@@ -323,40 +334,34 @@ export default {
*
* @param string url
*/
getManifest
(
url
)
{
this
.
request
(
url
)
.
then
((
data
)
=>
{
// if the entrypoint points to a single manifest, initialize the tree
if
(
this
.
isCollection
===
false
)
{
this
.
tree
.
push
({
label
:
''
,
'
label-key
'
:
this
.
config
.
labels
.
manifest
,
children
:
[]
});
}
async
getManifest
(
url
)
{
const
data
=
await
this
.
request
(
url
);
if
(
!
Array
.
isArray
(
data
.
sequence
))
{
data
.
sequence
=
[
data
.
sequence
];
}
// if the entrypoint points to a single manifest, initialize the tree
if
(
this
.
isCollection
===
false
)
{
this
.
tree
.
push
({
label
:
''
,
'
label-key
'
:
this
.
config
.
labels
.
manifest
,
children
:
[]
});
}
if
(
data
.
sequence
[
0
]
!==
'
undefined
'
)
{
data
.
sequence
.
map
((
seq
)
=>
this
.
itemurls
.
push
(
seq
.
id
));
}
this
.
manifests
.
push
(
data
);
this
.
tree
[
0
].
children
.
push
(
{
children
:
this
.
getItemUrls
(
data
.
sequence
,
data
.
label
),
label
:
data
.
label
,
'
label-key
'
:
data
.
label
,
handler
:
(
node
)
=>
{
this
.
$root
.
$emit
(
'
update-tree-knots
'
,
node
.
label
);
},
selectable
:
false
,
},
);
// make sure that urls are set just once on init
if
(
!
this
.
itemurl
&&
data
.
sequence
[
0
])
{
this
.
itemurl
=
data
.
sequence
[
0
].
id
;
this
.
getItemData
(
data
.
sequence
[
0
].
id
);
}
});
if
(
!
Array
.
isArray
(
data
.
sequence
))
{
data
.
sequence
=
[
data
.
sequence
];
}
if
(
data
.
sequence
[
0
]
!==
'
undefined
'
)
{
data
.
sequence
.
map
((
seq
)
=>
this
.
itemurls
.
push
(
seq
.
id
));
}
this
.
manifests
.
push
(
data
);
this
.
tree
[
0
].
children
.
push
(
{
children
:
this
.
getItemUrls
(
data
.
sequence
,
data
.
label
),
label
:
data
.
label
,
'
label-key
'
:
data
.
label
,
handler
:
(
node
)
=>
{
this
.
$root
.
$emit
(
'
update-tree-knots
'
,
node
.
label
);
},
selectable
:
false
,
},
);
},
/**
* caller: *getItemUrls()*
...
...
@@ -385,6 +390,45 @@ export default {
?
this
.
getCollection
(
this
.
config
.
entrypoint
)
:
this
.
getManifest
(
this
.
config
.
entrypoint
);
},
onItemUrlChange
()
{
if
(
this
.
loaded
)
{
return
;
}
this
.
itemurl
=
this
.
$route
.
query
.
itemurl
;
if
(
!
this
.
itemurl
)
{
return
;
}
const
item
=
this
.
manifests
.
find
((
manifest
)
=>
manifest
.
sequence
.
find
((
manifestItem
)
=>
manifestItem
.
id
===
this
.
itemurl
));
if
(
!
item
)
{
return
;
}
const
{
label
}
=
item
;
const
seqIdx
=
this
.
getSequenceIndex
(
label
);
treestore
.
updateselectedtreeitem
(
this
.
itemurl
);
treestore
.
updatetreesequence
(
seqIdx
);
this
.
$root
.
$emit
(
'
update-item
'
,
this
.
itemurl
,
seqIdx
);
this
.
$root
.
$emit
(
'
update-item-index
'
,
this
.
getItemIndex
(
this
.
itemurl
));
this
.
$root
.
$emit
(
'
update-sequence-index
'
,
seqIdx
);
const
treeDom
=
document
.
getElementById
(
this
.
itemurl
);
if
(
treeDom
)
{
treeDom
.
scrollIntoView
();
}
// NOTE: Set imageurl to an empty string. Otherwise, if there is no corresponding image,
// the "preceding" image according to the "preceding" item will be shown.
this
.
imageurl
=
''
;
this
.
getItemData
(
this
.
itemurl
);
this
.
loaded
=
true
;
},
},
};
</
script
>
...
...
src/components/header.vue
View file @
590e284f
...
...
@@ -24,6 +24,7 @@
:itemurls=
"itemurls"
:labels=
"config.labels"
:manifests=
"manifests"
:default-view=
"defaultView"
/>
<q-space
/>
...
...
@@ -63,6 +64,11 @@ export default {
Tools
,
},
props
:
{
defaultView
:
{
type
:
Function
,
default
:
()
=>
{},
},
collectiontitle
:
{
type
:
String
,
default
:
()
=>
''
,
...
...
src/components/navbar.vue
View file @
590e284f
...
...
@@ -43,6 +43,12 @@ import { fasArrowRight, fasArrowLeft, fasCheck } from '@quasar/extras/fontawesom
export
default
{
name
:
'
Navbar
'
,
mixins
:
[
Navigation
],
props
:
{
defaultView
:
{
type
:
Function
,
default
:
()
=>
{},
},
},
created
()
{
this
.
fasArrowRight
=
fasArrowRight
;
this
.
fasArrowLeft
=
fasArrowLeft
;
...
...
src/components/tree.vue
View file @
590e284f
...
...
@@ -19,7 +19,10 @@
</
template
>
<
template
#default-header=
"prop"
>
<div
class=
"row items-center"
>
<div
:id=
"prop.node['label']"
class=
"row items-center"
>
<div>
{{
prop
.
node
.
labelSheet
?
$t
(
labels
.
item
):
''
}}
{{
prop
.
node
[
'
label-key
'
]
}}
</div>
</div>
</
template
>
...
...
@@ -68,10 +71,8 @@ export default {
this
.
expanded
.
push
(
this
.
manifests
[
finalSeqIdx
].
label
);
this
.
$root
.
$on
(
'
update-item
'
,
(
item
,
seqIdx
)
=>
{
this
.
$root
.
$on
(
'
update-item
'
,
(
item
)
=>
{
this
.
selected
=
item
;
treestore
.
updateselectedtreeitem
(
item
);
treestore
.
updatetreesequence
(
seqIdx
);
});
this
.
$root
.
$on
(
'
update-sequence-index
'
,
(
index
)
=>
{
...
...
src/index.template.html
View file @
590e284f
...
...
@@ -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/navigation.js
View file @
590e284f
...
...
@@ -15,16 +15,20 @@ export default {
methods
:
{
toggleSheet
(
itemIndex
)
{
const
link
=
this
.
itemurls
[
itemIndex
];
const
tree
=
document
.
getElementsByClassName
(
'
view-tree
'
);
if
(
tree
.
length
)
{
window
.
location
.
hash
=
`selectedItem-
${
link
}
`
;
tree
[
0
].
scrollBy
(
0
,
-
80
);
}
this
.
sequenceindex
=
this
.
computedsequenceindex
;
this
.
updateItem
(
this
.
itemurls
[
itemIndex
],
this
.
sequenceindex
);
this
.
updateSequenceIndex
(
this
.
sequenceindex
);
this
.
defaultView
();
this
.
$router
.
push
({
query
:
{
itemurl
:
link
}
});
// const tree = document.getElementsByClassName('view-tree');
//
// if (tree.length) {
// window.location.hash = `selectedItem-${link}`;
// tree[0].scrollBy(0, -80);
// }
//
// this.sequenceindex = this.computedsequenceindex;
// this.updateItem(this.itemurls[itemIndex], this.sequenceindex);
// this.updateSequenceIndex(this.sequenceindex);
},
updateItem
()
{
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a 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