Skip to content

Commit

Permalink
Merge branch 'fix-scroll-text' into 'develop'
Browse files Browse the repository at this point in the history 
Fix scroll text

See merge request subugoe/emo/tido!289
  • Loading branch information
Paul Pestov committed Sep 21, 2023
2 parents 48f5dfa + f30f282 commit f55f1e7
Show file tree
Hide file tree
Showing 3 changed files with 149 additions and 123 deletions.
248 changes: 128 additions & 120 deletions examples/gfl.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,139 +27,147 @@
<script src="config-menu/config-menu.js"></script>
<script>
window.addEventListener('load', function () {
window.tido = new window.Tido({
"manifest": "https://goethes-farbenlehre-berlin.sub.uni-goettingen.de/tido/gfl/Z_1822-02-20_k/manifest.json",
"labels": {
"item": "Seite",
"manifest": "Dokument"
},
"lang": "de",
"panels": [
{
"views": [{
"id": "image",
"label": "Manuskript",
"connector": {
"id": 3
}
}]
window.tido = new window.Tido({
manifest: "https://goethes-farbenlehre-berlin.sub.uni-goettingen.de/tido/gfl/Z_1822-02-20_k/manifest.json",
labels: {
item: "Seite",
manifest: "Dokument"
},
{
"label": "Text",
"views": [
{
"id": "text1",
"label": "Edierter Text",
"connector": {
"id": 4,
"options": {
"type": "Edierter Text"
}
colors: {
forceMode: "light",
primary: "#4569cc"
},
lang: "de",
panels: [
{
views: [{
id: "image",
label: "Manuskript",
connector: {
id: 3
}
},
{
"id": "text2",
"connector": {
"id": 4,
"options": {
"type": "Transcription"
}]
},
{
label: "Text",
views: [
{
id: "text1",
label: "Edierter Text",
connector: {
id: 4,
options: {
type: "edited"
}
}
},
{
id: "text2",
label: "Transkription",
connector: {
id: 4,
options: {
type: "transcription"
}
}
}
}
]
},
{
"label": "Kommentar",
"views": [
{
"id": "annotations1",
"label": "Kommentare",
"connector": {
"id": 5,
"options": {
"types": [
{
"name": "Editorial Comment",
"icon": "biChatFill"
},
{
"name": "Abstract",
"annotationType": "text",
"displayWhen": "Edierter Text"
}
]
]
},
{
label: "Kommentar",
views: [
{
id: "annotations1",
label: "Kommentare",
connector: {
id: 5,
options: {
types: [
{
name: "Editorial Comment",
icon: "biChatFill"
},
{
name: "Abstract",
annotationType: "text",
displayWhen: "edited"
}
]
}
}
},
{
id: "annotations2",
label: "Register",
connector: {
id: 5,
options: {
types: [
{
name: "Person",
icon: "biPersonFill"
},
{
name: "Place",
icon: "biGeoAltFill"
},
{
name: "Org",
icon: "biBank2"
},
{
name: "Object",
icon: "biArchiveFill"
},
{
name: "Date",
icon: "biCalendarWeek"
},
{
name: "Work",
icon: "biJournals"
}
]
}
}
}
},
{
"id": "annotations2",
"label": "Register",
"connector": {
"id": 5,
"options": {
"types": [
{
"name": "Person",
"icon": "biPersonFill"
},
{
"name": "Place",
"icon": "biGeoAltFill"
},
{
"name": "Org",
"icon": "biBank2"
]
},
{
label: "Dokumentdaten",
views: [
{
id: "meta",
label: "Metadaten",
connector: {
id: 2,
options: {
collection: {
all: true
},
{
"name": "Object",
"icon": "biArchiveFill"
manifest: {
all: true
},
{
"name": "Date",
"icon": "biCalendarWeek"
},
{
"name": "Work",
"icon": "biJournals"
item: {
all: true
}
]
}
}
}
]
},
{
"label": "Dokumentdaten",
"views": [
{
"id": "meta",
"label": "Metadaten",
"connector": {
"id": 2,
"options": {
"collection": {
"all": true
},
"manifest": {
"all": true
},
"item": {
"all": true
}
}
},
{
id: "tree",
label: "Inhalt",
connector: {
id: 1
}
}
},
{
"id": "tree",
"label": "Inhalt",
"connector": {
"id": 1
}
}
]
]
}
],
translations: {
Edition_license: 'Editionslizenz'
}
]
});
});
});
</script>
</body>
Expand Down
5 changes: 3 additions & 2 deletions src/store/annotations/actions.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,8 +25,9 @@ export const addActiveAnnotation = ({ getters, rootGetters, dispatch }, id) => {
Utils.highlightTargets(selector, { operation: 'INC' });

if (elements.length > 0) {
Utils.addIcon(elements[0], newActiveAnnotation, iconName);
scrollIntoViewIfNeeded(elements[0], document.getElementById('text-content'));
const target = elements[0];
Utils.addIcon(target, newActiveAnnotation, iconName);
scrollIntoViewIfNeeded(target, target.closest('.panel-body'));

// Get the scroll container of Quasar tab panel
const annotationsView = document.querySelector('.annotations-view').parentElement.parentElement;
Expand Down
19 changes: 18 additions & 1 deletion tests/cypress/e2e/annotation.cy.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ describe('Annotation - Multiple Tabs', () => {
.get('.panels-target > .item:nth-child(4) .q-tab-panel .q-list .q-item')
.should('be.visible');
});

it('Should display first annotation tab', () => {
cy
.get('.panels-target > .item:nth-child(4) .q-tabs__content .q-tab')
Expand All @@ -30,7 +31,7 @@ describe('Annotation - Multiple Tabs', () => {
.get('.panels-target > .item:nth-child(4) .q-tabs__content .q-tab')
.eq(1)
.click()
.wait(400)// wait for tab switch transition
.wait(400) // wait for tab switch transition
.should('have.class', 'q-tab--active')
.get('.panels-target > .item:nth-child(4) .q-tab-panel .q-list .q-item')
.eq(0)
Expand Down Expand Up @@ -156,4 +157,20 @@ describe('Annotation - Multiple Tabs', () => {
.find('#text-content [data-annotation-ids][data-annotation-level="1"]')
.should('have.length', 0);
});

it('Should scroll in text to highlighted annotation', { scrollBehavior: false }, () => {

// We scroll down the text panel first and select the first annotation
// because there is a problem with initial scrolling of text panel.
// Somehow it works when scroll programmatically like described above.
cy
.get('.panels-target > .item:nth-child(3) .content-view')
.scrollTo('bottom')
.get('.panels-target > .item:nth-child(4)')
.find('.q-tab-panel .q-list .q-item')
.first()
.click()
.get('#t_Mingana_ar_christ_93_84_MD1816225N1l5l3l5l5l47l3l2_1')
.should('be.visible');
});
});

0 comments on commit f55f1e7

Please sign in to comment.