Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[FEATURE] Client-side paging #50

Open
wants to merge 23 commits into
base: master
Choose a base branch
from
Open

[FEATURE] Client-side paging #50

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
23 commits
Select commit Hold shift + click to select a range
8ffc31e
Allow sprint branch
Aug 2, 2022
5c36382
Add JS for Client Side Browsing
Aug 22, 2022
4c80339
Format code (replace tabs with spaces)
Aug 22, 2022
f6484aa
Refactor: Remove inline Navigation JS, now in Kitodo
Aug 22, 2022
6f5c71c
Fix naming pageBack vs. pageStepBack
Aug 22, 2022
1572d23
Handle all forward/back navigation buttons
Aug 22, 2022
29b32f4
Enable/disable nav buttons on client
Aug 22, 2022
ffef4cf
Update navigation select
beatrycze-volk Aug 23, 2022
b617e8f
Update page download links on page change
Aug 24, 2022
0cf32a7
Update image download links on page change
Aug 24, 2022
9fb8800
Start implementing client-side double page mode
Aug 24, 2022
618ebe1
Fix back buttons when using route enhancers
Aug 24, 2022
24dc08d
Fix pdf and image download links
Aug 25, 2022
0e2d6ea
Add markup and settings for full table of contents
Aug 25, 2022
5c8a29e
Start implementing dynamic TOC expansion
Aug 25, 2022
0b87a8f
Add Markup and Script for Page Grid Button Update
Aug 26, 2022
12c087e
Add config and call to document plugin
Aug 26, 2022
6665738
Use dlfController methods
Aug 26, 2022
ec48b23
Use `getVisiblePages()` of `dlfController`
Aug 27, 2022
2ae1daa
Refactor: Extract `dlfController::eventTarget`
Aug 27, 2022
3cdd69d
Always render left/right pdf download
Aug 27, 2022
2ccb0b0
Display toolbox initialization only once
beatrycze-volk Apr 4, 2023
0515b9d
Fix intendation for rwnd span
beatrycze-volk Nov 21, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 11 additions & 1 deletion Configuration/TypoScript/Plugin/Kitodo/setup.typoscript
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,15 @@ plugin.tx_dlf {
}
}

# --------------------------------------------------------------------------------------------------------------------
# document
# --------------------------------------------------------------------------------------------------------------------
plugin.tx_dlf_document < tt_content.list.20.dlf_document
plugin.tx_dlf_document {
settings {
}
}

# --------------------------------------------------------------------------------------------------------------------
# search
# --------------------------------------------------------------------------------------------------------------------
Expand Down Expand Up @@ -103,6 +112,7 @@ plugin.tx_dlf_pagegrid {
plugin.tx_dlf_tableofcontents < tt_content.list.20.dlf_tableofcontents
plugin.tx_dlf_tableofcontents {
settings {
showFull = 1
targetPid = {$config.kitodo.pageView}
}
}
Expand All @@ -118,7 +128,7 @@ lib.kitodo.navigation.pagecontrol < tt_content.list.20.dlf_navigation
lib.kitodo.navigation.pagecontrol {
settings {
pageStep = 10
features = pageFirst,pageBack,pageStepBack,pageForward,pageStepForward,pageLast
features = pageFirst,pageStepBack,pageBack,pageForward,pageStepForward,pageLast
}
}

Expand Down
17 changes: 17 additions & 0 deletions Resources/Private/JavaScript/DigitalcollectionsScripts.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -222,6 +222,23 @@ $(function () {

});

(function () {
let docController = null;
window.addEventListener('tx-dlf-documentLoaded', e => {
docController = e.detail.docController;

// Update URL in page grid button
docController.eventTarget.addEventListener('tx-dlf-stateChanged', e => {
if (docController === null) {
return;
}

$('#digitalcollections-enable-grid-view')
.attr('href', docController.makePageUrl(e.detail.page, true));
});
});
})();

$(document).keyup(function (e) {

// Check if ESC key is pressed. Then end fullscreen mode or close SRU form.
Expand Down
3 changes: 2 additions & 1 deletion Resources/Private/Partials/KitodoPageView.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@

<f:section name="PageView">
<div class="document-view">
<f:cObject typoscriptObjectPath="plugin.tx_dlf_document" />
<f:if condition="{gp-pagegrid} == 1">
<f:then>
<f:cObject typoscriptObjectPath="plugin.tx_dlf_pagegrid" />
Expand Down Expand Up @@ -412,7 +413,7 @@
<f:link.page pageUid="{kitodo.pageView}" additionalParams="{tx_dlf:{page:'{gp-page}', double:'0', id:'{gp-id}', pagegrid:'0'}}" class="active" title="<f:translate key='double.singlePageView' extensionName='slub_digitalcollections' />"><f:translate key='double.singlePageView' extensionName='slub_digitalcollections' /></f:link.page>
</f:then>
<f:else>
<f:link.page pageUid="{kitodo.pageView}" additionalParams="{tx_dlf:{page:'{gp-page}', double:'0', id:'{gp-id}', pagegrid:'1'}}" title="<f:translate key='gridpage.preview' extensionName='slub_digitalcollections' />"><f:translate key='gridpage.preview' extensionName='slub_digitalcollections' /></f:link.page>
<f:link.page id="digitalcollections-enable-grid-view" pageUid="{kitodo.pageView}" additionalParams="{tx_dlf:{page:'{gp-page}', double:'0', id:'{gp-id}', pagegrid:'1'}}" title="<f:translate key='gridpage.preview' extensionName='slub_digitalcollections' />"><f:translate key='gridpage.preview' extensionName='slub_digitalcollections' /></f:link.page>
</f:else>
</f:if>
</f:then>
Expand Down
19 changes: 13 additions & 6 deletions Resources/Private/Plugins/Kitodo/Partials/TableOfContents/Children.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,25 +15,31 @@
<f:for each="{children}" as="child">
<f:switch expression="{child.ITEM_STATE}">
<f:case value="ACT">
<li class="active">
<f:variable name="tocItemClass" value="active" />
</f:case>
<f:case value="CUR">
<li class="current">
<f:variable name="tocItemClass" value="current" />
</f:case>
<f:case value="ACTIFSUB">
<li class="active submenu">
<f:variable name="tocItemClass" value="active submenu" />
</f:case>
<f:case value="CURIFSUB">
<li class="current submenu">
<f:variable name="tocItemClass" value="current submenu" />
</f:case>
<f:case value="IFSUB">
<li class="submenu">
<f:variable name="tocItemClass" value="submenu" />
</f:case>
<f:defaultCase>
<li>
<f:variable name="tocItemClass" value="" />
</f:defaultCase>
</f:switch>

<f:if condition="!{child.isCurrentlyExpanded}">
<f:variable name="tocItemClass" value="{tocItemClass} dlf-toc-collapsed" />
</f:if>

<li class="{tocItemClass}" data-toc-item data-dlf-section="{child.logId}" data-toc-expand-always="{child.isAlwaysExpanded}">

<f:if condition="{child.doNotLinkIt}">
<f:then>
<f:render partial="TableOfContents/Title" arguments="{child: child}"/>
Expand All @@ -45,6 +51,7 @@
additionalParams="{f:if(condition:'{child.id}', then:'{\'tx_dlf[id]\':child.id, \'tx_dlf[page]\':child.page}', else: '{\'tx_dlf[page]\':child.page}')}"
addQueryString="1"
addQueryStringMethod="GET"
additionalAttributes="{'data-document-id':child.id, 'data-page':child.page, 'data-toc-link':1}"
title="{f:if(condition:'{child.title}', then: '{child.title}', else: '{child.type}')}">
<f:render partial="TableOfContents/Title" arguments="{child: child}"/>
</f:link.action>
Expand Down
107 changes: 42 additions & 65 deletions Resources/Private/Plugins/Kitodo/Templates/Navigation/Main.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,50 +64,43 @@
<f:section name="render.pageFirst">
<div class="backs">
<span class="first">
<f:if condition="{viewData.requestData.page} > 1">
<f:link.action class="first page-first {f:if(condition:\"{viewData.requestData.page} <= 1\", then: \"disabled\")}" addQueryString="1" addQueryStringMethod="GET" additionalParams="{'tx_dlf[page]':'1'}" >
<f:translate key="firstPage"/>
</f:link.action>
</span>
</f:section>

<f:section name="render.pageStepBack">
<span class="rwnd">
<f:variable name="backTextTemplate" value="{f:translate(key: 'backXPages', arguments: '{0: \'PAGE_STEPS\'}')}" />
<f:comment>Make sure that no negative number is put into tx_dlf[page], so that a route enhancer that requires matches against "\d+" won't fail</f:comment>
<f:if condition="{viewData.requestData.page} > {pageSteps}">
<f:then>
<f:link.action addQueryString="1" addQueryStringMethod="GET" additionalParams="{'tx_dlf[page]':'1'}" class="first" >
<f:translate key="firstPage"/>
<f:link.action class="page-step-back" addQueryString="1" addQueryStringMethod="GET" additionalParams="{'tx_dlf[page]':'{viewData.requestData.page - pageSteps}'}" additionalAttributes="{'data-text': '{backTextTemplate}'}">
<f:translate key="backXPages" arguments="{0: '{pageSteps}'}"/>
</f:link.action>
</f:then>
<f:else>
<span class="first" title="{f:translate(key: 'firstPage')}">
<f:translate key="firstPage"/>
</span>
<f:link.action class="page-step-back disabled" additionalAttributes="{'data-text': '{backTextTemplate}'}">
<f:translate key="backXPages" arguments="{0: '{pageSteps}'}"/>
</f:link.action>
</f:else>
</f:if>
</span>
</f:section>

<f:section name="render.pageBack">
<span class="rwnd">
<f:if condition="{viewData.requestData.page} > {pageSteps}">
<f:then>
<f:link.action addQueryString="1" addQueryStringMethod="GET" additionalParams="{'tx_dlf[page]':'{viewData.requestData.page - pageSteps}'}">
<f:translate key="backXPages" arguments="{0: '{pageSteps}'}"/>
</f:link.action>
</f:then>
<f:else>
<span title="{f:translate(key: 'backXPages', arguments: '{0: pageSteps}')}">
<f:translate key="backXPages" arguments="{0: '{pageSteps}'}"/>
</span>
</f:else>
</f:if>
</span>
</f:section>

<f:section name="render.pageStepBack">
<span class="prev">
<f:if condition="{viewData.requestData.page} > {viewData.requestData.double + 1}">
<f:then>
<f:link.action addQueryString="1" addQueryStringMethod="GET" additionalParams="{'tx_dlf[page]':'{viewData.requestData.page - 1 - viewData.requestData.double}'}">
<f:link.action class="page-back" addQueryString="1" addQueryStringMethod="GET" additionalParams="{'tx_dlf[page]':'{viewData.requestData.page - 1 - viewData.requestData.double}'}">
<f:translate key="prevPage"/>
</f:link.action>
</f:then>
<f:else>
<span title="{f:translate(key: 'prevPage')}">
<f:link.action class="page-back disabled">
<f:translate key="prevPage"/>
</span>
</f:link.action>
</f:else>
</f:if>
</span>
Expand All @@ -129,10 +122,9 @@
<label for="tx-dlf-page-{viewData.uniqueId}">
<f:translate key="selectPage"/>
</label>
<f:form.select id="tx-dlf-page-{viewData.uniqueId}" name="tx_dlf[page]"
<f:form.select class="page-select" id="tx-dlf-page-{viewData.uniqueId}" name="tx_dlf[page]"
options="{pageOptions}"
value="{viewData.requestData.page}"
additionalAttributes="{'onchange': 'javascript:this.form.submit();'}">
value="{viewData.requestData.page}">
</f:form.select>
</form>
</li>
Expand All @@ -141,52 +133,26 @@
<f:section name="render.pageForward">
<div class="fwds">
<span class="next">
<f:if condition="{viewData.requestData.page + viewData.requestData.double} < {numPages}">
<f:then>
<f:link.action addQueryString="1" addQueryStringMethod="GET" additionalParams="{'tx_dlf[page]':'{viewData.requestData.page + 1 + viewData.requestData.double}'}">
<f:translate key="nextPage"/>
</f:link.action>
</f:then>
<f:else>
<span title="{f:translate(key: 'nextPage')}">
<f:translate key="nextPage"/>
</span>
</f:else>
</f:if>
<f:link.action class="page-forward {f:if(condition: \"{viewData.requestData.page + viewData.requestData.double} >= {numPages}\", then: \"disabled\")}" addQueryString="1" addQueryStringMethod="GET" additionalParams="{'tx_dlf[page]':'{viewData.requestData.page + 1 + viewData.requestData.double}'}">
<f:translate key="nextPage"/>
</f:link.action>
</span>
</f:section>

<f:section name="render.pageStepForward">
<span class="fwd">
<f:if condition="{viewData.requestData.page} <= {numPages - pageSteps}">
<f:then>
<f:link.action addQueryString="1" addQueryStringMethod="GET" additionalParams="{'tx_dlf[page]':'{viewData.requestData.page + pageSteps}'}">
<f:translate key="forwardXPages" arguments="{0: '{pageSteps}'}"/>
</f:link.action>
</f:then>
<f:else>
<span title="{f:translate(key: 'forwardXPages', arguments: '{0: pageSteps}')}">
<f:translate key="forwardXPages" arguments="{0: '{pageSteps}'}"/>
</span>
</f:else>
</f:if>
<f:variable name="forwardTextTemplate" value="{f:translate(key: 'forwardXPages', arguments: '{0: \'PAGE_STEPS\'}')}" />
<f:link.action class="page-step-forward {f:if(condition: \"{viewData.requestData.page} > {numPages - pageSteps}\", then: \"disabled\")}" addQueryString="1" addQueryStringMethod="GET" additionalParams="{'tx_dlf[page]':'{viewData.requestData.page + pageSteps}'}" additionalAttributes="{'data-text': '{forwardTextTemplate}'}">
<f:translate key="forwardXPages" arguments="{0: '{pageSteps}'}"/>
</f:link.action>
</span>
</f:section>

<f:section name="render.pageLast">
<span class="last">
<f:if condition="{viewData.requestData.page} < {numPages - viewData.requestData.double}">
<f:then>
<f:link.action addQueryString="1" addQueryStringMethod="GET" additionalParams="{'tx_dlf[page]':'{numPages - viewData.requestData.double}'}">
<f:translate key="lastPage"/>
</f:link.action>
</f:then>
<f:else>
<span title="{f:translate(key: 'lastPage'}">
<f:translate key="lastPage"/>
</span>
</f:else>
</f:if>
<f:link.action class="page-last {f:if(condition: \"{viewData.requestData.page} >= {numPages - viewData.requestData.double}\", then: \"disabled\")}" addQueryString="1" addQueryStringMethod="GET" additionalParams="{'tx_dlf[page]':'{numPages - viewData.requestData.double}'}">
<f:translate key="lastPage"/>
</f:link.action>
</span>
</div>
</f:section>
Expand Down Expand Up @@ -226,4 +192,15 @@
</a>
</li>
</f:section>

<script>
// NOTE: The navigation plugin may be instantiated multiple times, even on a single page view
window.addEventListener('tx-dlf-documentLoaded', e => {
const controller = e.detail.docController;
const features = {features -> f:format.json() -> f:format.raw()};
const basePageSteps = {basePageSteps};

new dlfNavigation(controller, { features, basePageSteps });
});
</script>
</html>
6 changes: 6 additions & 0 deletions Resources/Private/Plugins/Kitodo/Templates/TableOfContents/Main.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,3 +22,9 @@
</div>
</div>
</div>

<script>
window.addEventListener('tx-dlf-documentLoaded', (e) => {
new dlfTableOfContents(e.detail.docController);
});
</script>
Loading
Loading