load MyCoRe-Viewer via Javascript modules #85

see MCR-3147 modernize viewer
MyCoRe-Org · Oct 16, 2024 · 5bdca3b · 5bdca3b
1 parent 977cb8b
commit 5bdca3b
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 24 deletions.
diff --git a/...tal-common-module/src/main/resources/META-INF/resources/WEB-INF/tags/search/mcrviewer.tag b/...tal-common-module/src/main/resources/META-INF/resources/WEB-INF/tags/search/mcrviewer.tag
@@ -22,13 +22,12 @@
 <mcr:session var="lang" info="language" />
 
     <link href="${iviewBaseURL}css/default.css" type="text/css" rel="stylesheet">
-    <script src="${iviewBaseURL}js/iview-client-base.js"></script>
-    <script src="${iviewBaseURL}js/iview-client-frame.js"></script>
+    <script type="module" src="${iviewBaseURL}js/iview-client-base.es.js"></script>
+    <script type="module" src="${iviewBaseURL}js/iview-client-frame.es.js"></script>
 
 
 <c:if test="${doctype eq 'pdf' }">
-    <script src="${iviewBaseURL}js/iview-client-pdf.js"></script>
-    <script src="${iviewBaseURL}js/lib/pdf.js"></script>
+    <script type="module" src="${iviewBaseURL}js/iview-client-pdf.es.js"></script>
 	<style type="text/css">
 		.mycoreViewer .navbar{
 			position: absolute; left: 0px; right: 0px; top: 0px;
@@ -66,9 +65,11 @@
 	}
 %>
 
-    <script>
+    <script type="module">
+    import {MyCoReViewer} from "${iviewBaseURL}js/iview-client-base.es.js";
+
     window.addEventListener("load", function(){
-            new mycore.viewer.MyCoReViewer(jQuery("#${id}"), {
+            window["viewer"] = new MyCoReViewer(jQuery("#${id}"), {
                 mobile: false,
                 pdfProviderURL: "${applicationScope.WebApplicationBaseURL}file/${mcrid}/${derid}/${maindoc}",
                 derivate: "${mcrid}",
@@ -78,7 +79,7 @@
                 i18nURL: "${applicationScope.WebApplicationBaseURL}rsc/locale/translate/{lang}/component.viewer.*",
                 lang: "${lang}",
                 webApplicationBaseURL: "${applicationScope.WebApplicationBaseURL}",
-                pdfWorkerURL: "${iviewBaseURL}js/lib/pdf.worker.js",
+                pdfWorkerURL: "${iviewBaseURL}js/lib/pdf.worker.min.js",
                 canvas: {
                 	startup:{
                 		fitWidth: true
@@ -107,7 +108,7 @@
 
 
 <c:if test="${doctype eq 'mets' }">
-    <script src="${iviewBaseURL}js/iview-client-mets.js"></script>
+    <script type="module" src="${iviewBaseURL}js/iview-client-mets.es.js"></script>
 	<style type="text/css">
 		.mycoreViewer .navbar{
 			position: absolute; left: 0px; right: 0px; top: 0px;
@@ -154,8 +155,10 @@
 
     <script>
     window.addEventListener("load", function(){
-            new mycore.viewer.MyCoReViewer(jQuery("#${id}"),  {
-            	mobile: false,
+        import {MyCoReViewer} from "${iviewBaseURL}js/iview-client-base.es.js";
+        
+        window["viewer"] = new MyCoReViewer(jQuery("#${id}"), {
+                mobile: false,
                 doctype: "mets",
                 metsURL: "${applicationScope.WebApplicationBaseURL}file/${mcrid}/${derid}/${maindoc}",
                 imageXmlPath: "${applicationScope.WebApplicationBaseURL}tiles/${fn:replace(recordIdentifier,'/','_')}/",

diff --git a/jspdocportal-common-module/src/main/resources/META-INF/resources/WEB-INF/views/mcrviewer.jsp b/jspdocportal-common-module/src/main/resources/META-INF/resources/WEB-INF/views/mcrviewer.jsp
@@ -26,10 +26,10 @@
 <mcr:webjarLocator htmlElement="script" project="jquery" file="jquery.min.js" />
 <mcr:webjarLocator htmlElement="script" project="bootstrap" file="js/bootstrap.min.js" />
 
-<script type="text/javascript" src="${iviewBaseURL}js/iview-client-base.js"></script>
-<script type="text/javascript" src="${iviewBaseURL}js/iview-client-desktop.js"></script>
-<script type="text/javascript" src="${iviewBaseURL}js/iview-client-logo.js"></script>
-<script type="text/javascript" src="${iviewBaseURL}js/iview-client-toolbar-extender.js"></script>
+<script type="module" src="${iviewBaseURL}js/iview-client-base.es.js"></script>
+<script type="module" src="${iviewBaseURL}js/iview-client-desktop.es.js"></script>
+<script type="module" src="${iviewBaseURL}js/iview-client-logo.es.js"></script>
+<script type="module" src="${iviewBaseURL}js/iview-client-toolbar-extender.es.js"></script>
 
 <style type="text/css">
       div.mcrviewer_html{
@@ -49,9 +49,8 @@
 <mcr:session var="lang" info="language" />
 
 <c:if test="${it.doctype eq 'pdf'}">
-	<script type="text/javascript" src="${iviewBaseURL}js/iview-client-pdf.js"></script>
-	<script type="text/javascript" src="${iviewBaseURL}js/lib/pdf.js"></script>
-	<script type="text/javascript" src="${iviewBaseURL}js/iview-client-metadata.js"></script>
+	<script type="module" src="${iviewBaseURL}js/iview-client-pdf.es.js"></script>
+	<script type="module" src="${iviewBaseURL}js/iview-client-metadata.es.js"></script>
 	<style type="text/css">
       button[data-id='ShareButton']{
         border-radius:4px !important;
@@ -66,7 +65,9 @@
       }
       
     </style>
-	<script>
+	<script type="module">
+		import {MyCoReViewer} from "${iviewBaseURL}js/iview-client-base.es.js";
+
 		window.onload = function() {
 			var config = {
 				logoURL:"${applicationScope.WebApplicationBaseURL}images/mcrviewer/mcrviewer.png",
@@ -79,7 +80,7 @@
 				i18nURL : "${applicationScope.WebApplicationBaseURL}rsc/locale/translate/{lang}/component.viewer.*",
 				lang : "${lang}",
 				webApplicationBaseURL : "${applicationScope.WebApplicationBaseURL}",
-				pdfWorkerURL : "${iviewBaseURL}js/lib/pdf.worker.js",
+				pdfWorkerURL : "${iviewBaseURL}js/lib/pdf.worker.min.js",
 				canvas: {
                 	startup:{
                 		fitWidth: true
@@ -118,14 +119,14 @@
 								inGroup: "addOns"
 							} ]
 			};
-			new mycore.viewer.MyCoReViewer(jQuery("body"), config);
+			window["viewer"] = new MyCoReViewer(jQuery("body"), config);
 		};
 	</script>
 </c:if>
 <c:if test="${it.doctype eq 'mets'}">
 	<c:set var="mcrid">${it.mcrid}</c:set>
-	<script type="text/javascript" src="${iviewBaseURL}js/iview-client-mets.js"></script>
-	<script type="text/javascript" src="${iviewBaseURL}js/iview-client-metadata.js"></script>
+	<script type="module" src="${iviewBaseURL}js/iview-client-mets.es.js"></script>
+	<script type="module" src="${iviewBaseURL}js/iview-client-metadata.es.js"></script>
 
 	<%
 	   
@@ -148,7 +149,9 @@
 		}
 	%>
 
-	<script>
+	<script type="module">
+		import {MyCoReViewer} from "${iviewBaseURL}js/iview-client-base.es.js";
+
 		window.onload = function() {
 			var config = {
 				mobile : false,
@@ -240,7 +243,7 @@
 				objId : ""
 
 			};
-			new mycore.viewer.MyCoReViewer(jQuery("body"), config);
+			window["viewer"] = new MyCoReViewer(jQuery("body"), config);
 		};
 	</script>
 </c:if>