Skip to content

Commit 13f903c

Browse files
author
Simon Sendler
committed
fix: fix reload of images on paginator input
1 parent 9242197 commit 13f903c

File tree

2 files changed

+130
-108
lines changed

2 files changed

+130
-108
lines changed

‎module-gui/src/main/webapp/resources/uii/TranscriptionPlugin_include_imagenavigation.xhtml

+48-48
Original file line numberDiff line numberDiff line change
@@ -31,30 +31,30 @@
3131
<composite:implementation>
3232
<!-- navigation for big image -->
3333
<div class="dataTables__paginator justify-content-center">
34-
<button
35-
class="btn btn-blank"
36-
jsf:action="#{AktuelleSchritteForm.myPlugin.cmdMoveFirst}"
37-
disabled="#{AktuelleSchritteForm.myPlugin.getHasPreviousPage()}"
38-
title="#{AktuelleSchritteForm.myPlugin.pagesRTL?msgs.lastImage:msgs.firstImage}"
39-
data-bs-toggle="tooltip">
40-
<span
41-
aria-hidden="true"
42-
class="fa fa-angle-double-left"/>
43-
<f:ajax render="@form"/>
44-
</button>
45-
<button
46-
class="btn btn-primary-400"
47-
jsf:action="#{AktuelleSchritteForm.myPlugin.cmdMovePrevious}"
48-
disabled="#{AktuelleSchritteForm.myPlugin.getHasPreviousPage()}"
49-
jsf:id="imageBack">
50-
<span
51-
aria-hidden="true"
52-
class="fa fa-angle-left" />
53-
<span>
54-
<h:outputText value="#{AktuelleSchritteForm.myPlugin.pagesRTL?msgs.lw_nextImage:msgs.lw_previousImage}"/>
55-
</span>
56-
<f:ajax render="@form"/>
57-
</button>
34+
<f:ajax render="@form">
35+
<button
36+
class="btn btn-blank"
37+
jsf:action="#{AktuelleSchritteForm.myPlugin.cmdMoveFirst}"
38+
disabled="#{AktuelleSchritteForm.myPlugin.getHasPreviousPage()}"
39+
title="#{AktuelleSchritteForm.myPlugin.pagesRTL?msgs.lastImage:msgs.firstImage}"
40+
data-bs-toggle="tooltip">
41+
<span
42+
aria-hidden="true"
43+
class="fa fa-angle-double-left"/>
44+
</button>
45+
<button
46+
class="btn btn-primary-400"
47+
jsf:action="#{AktuelleSchritteForm.myPlugin.cmdMovePrevious}"
48+
disabled="#{AktuelleSchritteForm.myPlugin.getHasPreviousPage()}"
49+
jsf:id="imageBack">
50+
<span
51+
aria-hidden="true"
52+
class="fa fa-angle-left" />
53+
<span>
54+
<h:outputText value="#{AktuelleSchritteForm.myPlugin.pagesRTL?msgs.lw_nextImage:msgs.lw_previousImage}"/>
55+
</span>
56+
</button>
57+
</f:ajax>
5858
<div class="dataTables__paginator__page-count">
5959
<h:outputText
6060
id="txtMoveTo1"
@@ -80,30 +80,30 @@
8080
style="display:none">
8181
</x:commandButton>
8282
</div>
83-
<button
84-
class="btn btn-primary-400"
85-
jsf:action="#{AktuelleSchritteForm.myPlugin.cmdMoveNext}"
86-
disabled="#{AktuelleSchritteForm.myPlugin.getHasNextPage()}"
87-
jsf:id="imageNext">
88-
<span>
89-
<h:outputText value="#{AktuelleSchritteForm.myPlugin.pagesRTL?msgs.lw_previousImage:msgs.lw_nextImage} " />
90-
</span>
91-
<span
92-
aria-hidden="true"
93-
class="fa fa-angle-right" />
94-
<f:ajax render="@form"/>
95-
</button>
96-
<button
97-
class="btn btn-blank"
98-
jsf:action="#{AktuelleSchritteForm.myPlugin.cmdMoveLast}"
99-
disabled="#{AktuelleSchritteForm.myPlugin.getHasNextPage()}"
100-
jsf:id="navlast"
101-
title="#{AktuelleSchritteForm.myPlugin.pagesRTL?msgs.firstImage:msgs.lastImage}">
102-
<span
103-
aria-hidden="true"
104-
class="fa fa-angle-double-right"/>
105-
<f:ajax render="@form"/>
106-
</button>
83+
<f:ajax render="@form">
84+
<button
85+
class="btn btn-primary-400"
86+
jsf:action="#{AktuelleSchritteForm.myPlugin.cmdMoveNext}"
87+
disabled="#{AktuelleSchritteForm.myPlugin.getHasNextPage()}"
88+
jsf:id="imageNext">
89+
<span>
90+
<h:outputText value="#{AktuelleSchritteForm.myPlugin.pagesRTL?msgs.lw_previousImage:msgs.lw_nextImage} " />
91+
</span>
92+
<span
93+
aria-hidden="true"
94+
class="fa fa-angle-right" />
95+
</button>
96+
<button
97+
class="btn btn-blank"
98+
jsf:action="#{AktuelleSchritteForm.myPlugin.cmdMoveLast}"
99+
disabled="#{AktuelleSchritteForm.myPlugin.getHasNextPage()}"
100+
jsf:id="navlast"
101+
title="#{AktuelleSchritteForm.myPlugin.pagesRTL?msgs.firstImage:msgs.lastImage}">
102+
<span
103+
aria-hidden="true"
104+
class="fa fa-angle-double-right"/>
105+
</button>
106+
</f:ajax>
107107

108108
<h:commandLink style="display:none;" class="hidden-set-image-button" action="#{AktuelleSchritteForm.myPlugin.setImageToIndex}"/>
109109

‎module-gui/src/main/webapp/resources/uii/plugin_step_transcription.xhtml

+82-60
Original file line numberDiff line numberDiff line change
@@ -76,25 +76,6 @@
7676

7777
<script
7878
src="plugins/step/intranda_step_transcription/tinymce/tinymce.min.js"></script>
79-
<script>
80-
let mytiny = tinymce.init({
81-
plugins: 'paste table',
82-
selector : '.ocr-text',
83-
menubar : '',
84-
toolbar: 'undo redo | formatselect | fontsizeselect | bold italic underline strikethrough | alignleft aligncenter alignright alighnblock | indent outdent | table | pastetext | forecolor backcolor',
85-
paste_as_text: true,
86-
height : "90vh",
87-
init_instance_callback: function (editor) {
88-
editor.on('blur', function (e) {
89-
save();
90-
});
91-
}
92-
93-
});
94-
mytiny.then(mt => {
95-
console.log(mt)
96-
})
97-
</script>
9879

9980
<section:section type="neutral">
10081
<section:header
@@ -105,7 +86,8 @@
10586
id="id10"
10687
action="#{NavigationForm.Reload}"
10788
styleClass="btn d-flex align-items-center btn--title-action"
108-
pt:data-bs-toggle="tooltip">
89+
pt:data-bs-toggle="tooltip"
90+
title="#{msgs.reload}">
10991
<span
11092
aria-hidden="true"
11193
class="fa fa-refresh" />
@@ -202,6 +184,9 @@
202184
<h:inputText
203185
value="#{AktuelleSchritteForm.myPlugin.image.ocrText}"
204186
class="input_0"></h:inputText>
187+
<h:inputText
188+
value="#{AktuelleSchritteForm.myPlugin.image.image.url}"
189+
id="inputImageUrl"></h:inputText>
205190
</h:panelGroup>
206191

207192
<h:panelGroup layout="block"
@@ -264,53 +249,90 @@
264249
</section:section>
265250

266251
<script>
267-
let configViewer = {
268-
global: {
269-
divId: 'bigImage',
270-
useTiles: #{AktuelleSchritteForm.myPlugin.useTiles},
271-
footerHeight: 0,
272-
adaptContainerHeight: false,
273-
zoomSlider: "#zoomSlider",
274-
zoomSliderHandle: "#zoomSlider .zoom-slider-handle",
275-
zoomSliderLabel: "#zoomSliderLabel input"
276-
},
277-
image: {
278-
mimeType: "image/jpeg",
279-
tileSource: "#{AktuelleSchritteForm.myPlugin.image.image.url}"
252+
let useTilesBool = #{AktuelleSchritteForm.myPlugin.useTiles};
253+
254+
function save() {
255+
let editors = tinymce.editors
256+
for (let i = 0; i != editors.length; i++) {
257+
let editor = editors[i];
258+
let textAreaID = editor.id;
259+
let content = editor.getContent();
260+
let inputID = "input_0".replace("textarea_", "");
261+
document.querySelector('.' + inputID).value = content;
280262
}
281-
};
263+
return true;
264+
}
282265

283-
let viewImage = new ImageView.Image( configViewer );
284-
viewImage.load()
285-
.then(function(image) {
286-
image.onFirstTileLoaded()
287-
.then(function() {
288-
$('#ajaxloader_image').fadeOut(800);
266+
const showImage = () => {
267+
let imageUrl = document.querySelector('[id$="inputImageUrl"]').value;
268+
let configViewer = {
269+
global: {
270+
divId: 'bigImage',
271+
useTiles: useTilesBool,
272+
footerHeight: 0,
273+
adaptContainerHeight: false,
274+
zoomSlider: "#zoomSlider",
275+
zoomSliderHandle: "#zoomSlider .zoom-slider-handle",
276+
zoomSliderLabel: "#zoomSliderLabel input",
277+
},
278+
image: {
279+
mimeType: "image/jpeg",
280+
tileSource: imageUrl,
281+
},
282+
};
283+
let viewImage = new ImageView.Image( configViewer );
284+
viewImage.load()
285+
.then(function(image) {
286+
image.onFirstTileLoaded()
287+
.then(function() {
288+
$('#ajaxloader_image').fadeOut(800);
289+
})
290+
.catch(function() {
291+
$('#ajaxloader_image').fadeOut(800);
292+
})
289293
})
290-
.catch(function() {
294+
.catch(function(error){
295+
console.error( 'Error opening image', error );
291296
$('#ajaxloader_image').fadeOut(800);
292-
})
293-
})
294-
.catch(function(error){
295-
console.error( 'Error opening image', error );
296-
$('#ajaxloader_image').fadeOut(800);
297-
$('#' + configViewer.global.divId).html( 'Failed to load image: "' + error + '"' );
298-
});
297+
$('#' + configViewer.global.divId).html( 'Failed to load image: "' + error + '"' );
298+
});
299+
};
299300

301+
const initTinyMCE = () => {
302+
let mytiny = tinymce.init({
303+
plugins: 'table',
304+
selector : '.ocr-text',
305+
menubar : '',
306+
toolbar: 'undo redo | formatselect | fontsizeselect | bold italic underline strikethrough | alignleft aligncenter alignright alighnblock | indent outdent | table | pastetext | forecolor backcolor',
307+
paste_as_text: true,
308+
height : "90vh",
309+
license_key: 'gpl',
310+
promotion: false,
311+
init_instance_callback: function (editor) {
312+
editor.on('blur', function (e) {
313+
save();
314+
});
315+
}
316+
317+
});
318+
mytiny.then(mt => {
319+
console.log(mt)
320+
})
321+
};
300322

323+
document.addEventListener('DOMContentLoaded', function() {
324+
showImage();
325+
initTinyMCE();
326+
});
301327

302-
function save() {
303-
let editors = tinymce.editors
304-
for (let i = 0; i != editors.length; i++) {
305-
let editor = editors[i];
306-
let textAreaID = editor.id;
307-
let content = editor.getContent();
308-
let inputID = "input_0".replace("textarea_", "");
309-
document.querySelector('.' + inputID).value = content;
310-
}
311-
return true;
312-
}
313-
</script>
328+
// initialize image viewer and tinyMCE after ajax request
329+
jsf.ajax.addOnEvent(function (data) {
330+
if (data.status === 'success') {
331+
showImage();
332+
initTinyMCE();
333+
}
334+
});
335+
</script>
314336

315337

316338
</ui:define>

0 commit comments

Comments
 (0)