ultra simplication (peut-être un peu trop ?) du plugin img_viewer. À tester en conditions réelles ! (7e7facff) · Commits · pdn-certic / MaX

documentation/docs/plugins.md

+17 −0

Original line number	Diff line number	Diff line
		@@ -33,6 +33,22 @@ Une fois activés, certains plugins requièrent un paramètrage dans les fichier

		## Images (img_viewer)

		Permet la consultation des images au sein d'une visionneuse ([Openseadragon](https://openseadragon.github.io/)).

		Ce plugin requiert le chemin (relatif à l'édition) de stockage des images (`imagesRepository`) comme paramètre de configuration :

		```
		<plugin name="img_viewer">
		<parameters>
		<!--@xsl(default:false): added to xslt parameters map if true -->
		<parameter key="imagesRepository" value="ui/images/" xsl="true"/>
		</parameters>
		</plugin>
		```

		Pour consulter des images tuilées (dzi, iiif, etc.), il fat surcharger le template `tei:graphic` (dans la `text_hook` de l'édition)
		afin de remplacer le paramètre d'appel à `MAX.plugins['img_viewer'].openImageInDialog` par l'URL du `.dzi` ou `.json`.

		## Index

		## Notes
		@@ -55,6 +71,7 @@ Voici un exemple de configuration du plugin de recherche :
		</parameters>
		</plugin>
		```

		* tag: nom du tag xml dans lesquels les recherches sont effectuées
		* backToTextId: xpath à suivre pour les liens de retour au texte sur les éléments de résultat

plugins-available/default/img_viewer/images/gallery.png

0 → 100644

+155 B

Loading image diff...

plugins-available/default/img_viewer/img_viewer.css

0 → 100644

+15 −0

Original line number	Diff line number	Diff line
		#img_dialog_wrap .modal-dialog{
		min-width: 800px;
		min-height: 600px;
		}
		#osd-viewer .openseadragon-container{
		min-height: 500px;
		}
		#main-max-container{
		position: relative;
		}
		#all-images-btn{
		position: absolute;
		top:0px;
		right:0px;
		}
		No newline at end of file

plugins-available/default/img_viewer/img_viewer.js

+64 −28

Original line number	Diff line number	Diff line
		$(document).ready(function(){
		//$('body').prepend("<div id='img_dialog_wrap' title='Image viewer'></div>");
		import {Plugin} from '../../core/ui/js/Plugin.js';

		class EquationPlugin extends Plugin{
		constructor(name) {
		super(name);

		var images = document.querySelectorAll('#text img');
		if(images.length > 0) {
		$('#js_scripts').append('<script type="text/javascript" src="' +baseURI + '/core/ui/lib/openseadragon/openseadragon.min.js"></script>');
		$('body').prepend('<div id="img_dialog_wrap" class="modal" tabindex="-1" role="dialog">'+
		'<div class="modal-dialog" role="document">'+
		'<div class="modal-content">'+
		'<div class="modal-header">'+
		'<h5 class="modal-title">Visionneuse</h5>'+
		'<h5 class="modal-title" id="img-title"></h5>'+
		'<button type="button" class="close" data-dismiss="modal" aria-label="Close">'+
		'<span aria-hidden="true">×</span>'+
		'</button>'+
		@@ -12,20 +19,49 @@ $(document).ready(function(){
		'<div class="modal-body">'+
		'<p>Modal body text goes here.</p>'+
		'</div>'+
		'<div class="modal-footer">'+
		'<button type="button" class="btn btn-secondary" data-dismiss="modal">ok</button>'+
		'</div>'+
		'</div>'+
		'</div>'+
		'</div>');
		$('#img_dialog_wrap').hide();
		$('.viewable').css('cursor', 'pointer')
		})
		$('.viewable').css('cursor', 'pointer');

		if(images.length > 1)
		$('#main-max-container').append('<div>'
		+'<button id="all-images-btn" class="btn btn-secondary" onclick="MAX.plugins[\'img_viewer\'].openImagesInDialog()">'
		+'<img alt="voir la galerie d\'images de la page" title="voir la galerie d\'images de la page" src="' + baseURI + 'plugins/img_viewer/images/gallery.png"/>'
		+'</button></div>')
		}
		}


		openImageInDialog(href){
		let tiled = href.endsWith('dzi') \|\| href.endsWith('json') ;
		this.showImages(tiled ? href : {type: 'image', url: href })
		}

		function openImageInDialog(href, source){
		console.log(href)
		$('#img_dialog_wrap .modal-body').load(href);
		showImages(tileSources){
		$('#img_dialog_wrap .modal-body').html('');
		$('#img_dialog_wrap .modal-body').append('<div id="osd-viewer" style="display: flex;"></div>')
		OpenSeadragon({
		id: "osd-viewer",
		prefixUrl: baseURI + "core/ui/lib/openseadragon/images/",
		tileSources: tileSources,
		sequenceMode: tileSources.length > 1
		});
		$('#img_dialog_wrap').modal();
		}

		MAX.openImageInDialog = openImageInDialog
		No newline at end of file
		openImagesInDialog(){
		var tileSources = [];
		var images = document.querySelectorAll('#text img');
		for(var i = 0; i < images.length; i++){
		tileSources.push({'type' : 'image', 'url' : images[i].src})
		}
		this.showImages(tileSources)
		}

		}


		MAX.addPlugin(new EquationPlugin('img_viewer'));

plugins-available/default/img_viewer/img_viewer.xqm

deleted100644 → 0

+0 −114

Original line number	Diff line number	Diff line
		(: For conditions of distribution and use, see the accompanying legal.txt file. :)

		module namespace max.plugin.img_viewer = 'pddn/max/plugin/img_viewer';
		import module namespace max.config = 'pddn/max/config' at '../../rxq/config.xqm';

		declare variable $max.plugin.img_viewer:PLUGIN_ID := "img_viewer";

		declare variable $max.plugin.img_viewer:IMG_WIDTH_PARAMETER := "viewerWidth";
		declare variable $max.plugin.img_viewer:IMG_HEIGHT_PARAMETER := "viewerHeight";

		declare
		%rest:GET
		%output:method("html")
		%rest:path("/{$projectId}/plugins/img_viewer/{$path=.+}/{$img}")
		function max.plugin.img_viewer:viewer($projectId, $path, $img){

		let $tileSourcesPath := max.config:getBaseURI()
		\|\|"/"\|\| $projectId \|\|"/"\|\| $path \|\|"/"\|\| $img \|\|".dzi"
		return
		<div id='img_viewer'>
		<div id="openseadragon1" style="width: 800px; height: 600px;"></div>
		<script src="{max.config:getBaseURI() \|\| 'core/ui/lib/jquery.min.js'}">
		</script>
		<script src="{max.config:getBaseURI() \|\| 'core/ui/lib/openseadragon.min.js'}">
		</script>
		<script type="text/javascript">{
		"var viewer = OpenSeadragon({
		id: 'openseadragon1',
		prefixUrl: '"\|\|max.config:getBaseURI() \|\| "core/ui/lib/openseadragon/images/',
		tileSources: '" \|\| $tileSourcesPath \|\| "'
		});"}
		</script>
		</div>
		};


		(:
		Returns a simple doc image gallery (no tiling).
		TEI compliant only
		:)
		declare
		%rest:GET
		%output:method("html")
		%rest:path("/{$projectId}/plugins/img_viewer/simple_gallery/{$path=.+}")
		function max.plugin.img_viewer:simpleGallery($projectId, $path){

		let $tileSources :=
		for $img in doc($projectId \|\| '/' \|\| $path)//*:figure
		return "{type: 'image',url: '"\|\|max.config:getBaseURI() \|\|"/ui/images/"\|\| $img/*:graphic/@url\|\|"'},"
		return
		<html>
		<head>
		<script src="{max.config:getBaseURI() \|\| 'core/ui/lib/jquery.min.js'}">
		</script>
		<script src="{max.config:getBaseURI() \|\| 'core/ui/lib/openseadragon/openseadragon.min.js'}">
		</script>
		</head>
		<div id='img_viewer'>
		<div id="openseadragon" style="width: 800px; height: 600px;">
		</div>

		<script type="text/javascript">{
		"var viewer = OpenSeadragon({
		id: 'openseadragon',
		prefixUrl: '"\|\|max.config:getBaseURI() \|\| "core/ui/lib/openseadragon/images/',
		tileSources: ["\|\|string-join($tileSources,'')\|\|"],
		sequenceMode: true,
		showReferenceStrip: true,
		});

		"}
		</script>
		</div>
		</html>
		};


		declare
		%rest:GET
		%output:method("html")
		%rest:path("/{$projectId}/plugins/img_viewer/single_image/{$img=.+}")
		function max.plugin.img_viewer:single_image($projectId, $img){
		let $imgPath:= max.config:getBaseURI() \|\| $projectId \|\| "/"\|\| $img
		return
		<div id='img_viewer'>
		<div id="openseadragon1" style="width: {max.plugin.img_viewer:getViewerWidth($projectId)}; height: {max.plugin.img_viewer:getViewerHeight($projectId)};"></div>
		<script src="{max.config:getBaseURI() \|\| 'core/ui/lib/jquery.min.js'}">
		</script>
		<script src="{max.config:getBaseURI() \|\|'core/ui/lib/openseadragon/openseadragon.min.js'}">
		</script>
		<script type="text/javascript">{
		"var viewer = OpenSeadragon({
		id: 'openseadragon1',
		prefixUrl: '"\|\|max.config:getBaseURI() \|\| "core/ui/lib/openseadragon/images/',
		tileSources: {type:'image', url:'"\|\|$imgPath\|\|"'}
		});"}
		</script>
		</div>

		};


		(:returns viewer width from project configuration:)
		declare %private function max.plugin.img_viewer:getViewerWidth($projectId){
		max.config:getPluginByName($projectId, $max.plugin.img_viewer:PLUGIN_ID)//parameter
		[@key=$max.plugin.img_viewer:IMG_WIDTH_PARAMETER]/@value/string()
		};


		(:returns viewer height from project configuration:)
		declare %private function max.plugin.img_viewer:getViewerHeight($projectId){
		max.config:getPluginByName($projectId, $max.plugin.img_viewer:PLUGIN_ID)//parameter
		[@key=$max.plugin.img_viewer:IMG_HEIGHT_PARAMETER]/@value/string()
		};