Made viewer.js and viewer-split.js into modules. Moved data for viewe…

…r.js to separate script element to allowing access to the data in the module. Moved inline onclick handlers for viewer image filters into click handlers in viewer.js

concordia/static/js/src/viewer-split.js

@@ -1,4 +1,6 @@
-/* global Split seadragonViewer */
+/* global Split */
+
+import {seadragonViewer} from './viewer.js';
 
 let pageSplit;
 let contributeContainer = document.getElementById('contribute-container');

concordia/static/js/src/viewer.js

@@ -1,9 +1,8 @@
 /* global OpenSeadragon screenfull debounce */
-/* exported seadragonView stepUp stepDown resetImageFilterForms */
 
-const viewerData = document.currentScript.dataset;
+const viewerData = document.getElementById('viewer-data').dataset;
 
-var seadragonViewer = OpenSeadragon({
+let seadragonViewer = OpenSeadragon({
     id: 'asset-image',
     prefixUrl: viewerData.prefixUrl,
     tileSources: {
@@ -188,6 +187,16 @@ gammaRange.addEventListener('input', function () {
     gammaNumber.value = gammaRange.value;
 });
 
+let gammaUp = document.getElementById('gamma-up');
+gammaUp.addEventListener('click', function () {
+    stepUp('gamma');
+});
+
+let gammaDown = document.getElementById('gamma-down');
+gammaDown.addEventListener('click', function () {
+    stepDown('gamma');
+});
+
 let thresholdNumber = document.getElementById('threshold');
 let thresholdRange = document.getElementById('threshold-range');
 
@@ -198,3 +207,18 @@ thresholdNumber.addEventListener('input', function () {
 thresholdRange.addEventListener('input', function () {
     thresholdNumber.value = thresholdRange.value;
 });
+
+let thresholdUp = document.getElementById('threshold-up');
+thresholdUp.addEventListener('click', function () {
+    stepUp('threshold');
+});
+
+let thresholdDown = document.getElementById('threshold-down');
+thresholdDown.addEventListener('click', function () {
+    stepDown('threshold');
+});
+
+let reset = document.getElementById('viewer-reset');
+reset.addEventListener('click', resetImageFilterForms);
+
+export {seadragonViewer};

concordia/templates/transcriptions/asset_detail.html

@@ -26,18 +26,23 @@
             {% endif %}
     ></script>
 
+    <script id="viewer-data"
+            data-prefix-url="{% static 'openseadragon/build/openseadragon/images/' %}"
+            data-tile-source-url="{% asset_media_url asset %}?canvas"
+    ></script>
+
     <script defer src="{% static 'split.js/dist/split.min.js' %}"></script>
     <script defer src="{% static 'openseadragon/build/openseadragon/openseadragon.min.js' %}"></script>
     <script defer src="{% static 'openseadragon-filtering/openseadragon-filtering.js' %}"></script>
+
     <script type="module" src="{% static 'js/contribute.js' %}"></script>
-    <script defer src="{% static 'js/viewer-split.js' %}"></script>
+    <script type="module" src="{% static 'js/viewer-split.js' %}"></script>
     <script type="module" src="{% static 'js/guide.js' %}"></script>
     <script type="module" src="{% static 'js/quick-tips-setup.js' %}"></script>
     <script type="module" src="{% static 'js/ocr.js' %}"></script>
     <script type="module" src="{% static 'js/asset-reservation.js' %}"></script>
-    <script defer src="{% static 'js/viewer.js' %}"
-            data-prefix-url="{% static 'openseadragon/build/openseadragon/images/' %}"
-            data-tile-source-url="{% asset_media_url asset %}?canvas"
+    <script type="module" src="{% static 'js/viewer.js' %}"
+
     ></script>
 {% endblock head_content %}
 

concordia/templates/transcriptions/asset_detail/viewer_filters.html

@@ -18,7 +18,7 @@
         </li>
     </ul>
     <div class="btn-group m-1">
-        <button id="viewer-reset" class="btn" title="Reset all filters" onclick="resetImageFilterForms()">
+        <button id="viewer-reset" class="btn" title="Reset all filters">
             Reset All
         </button>
     </div>
@@ -40,13 +40,13 @@
                     </div>
                     <div class="col p-0">
                         <div class="row m-0">
-                            <button type="button" class="arrow-button" onclick="stepUp('gamma')">
+                            <button id="gamma-up" type="button" class="arrow-button">
                                 <span class="fas fa-chevron-up" />
                                 <span class="visually-hidden">Increase</span>
                             </button>
                         </div>
                         <div class="row m-0">
-                            <button type="button" class="arrow-button" onclick="stepDown('gamma')">
+                            <button id="gamma-down" type="button" class="arrow-button">
                                 <span class="fas fa-chevron-down" />
                                 <span class="visually-hidden">Decrease</span>
                             </button>
@@ -94,13 +94,13 @@
                     </div>
                     <div class="col p-0">
                         <div class="row m-0">
-                            <button type="button" class="arrow-button" onclick="stepUp('threshold')">
+                            <button id="threshold-up" type="button" class="arrow-button">
                                 <span class="fas fa-chevron-up" />
                                 <span class="visually-hidden">Increase</span>
                             </button>
                         </div>
                         <div class="row m-0">
-                            <button type="button" class="arrow-button" onclick="stepDown('threshold')">
+                            <button id="threshold-down" type="button" class="arrow-button">
                                 <span class="fas fa-chevron-down" />
                                 <span class="visually-hidden">Decrease</span>
                             </button>