Encapsulate the asset_details.html scripts

.eslintrc.yaml

@@ -20,5 +20,5 @@ env:
  browser: true
  es2024: true
 parserOptions:
- sourceType: script
+ sourceType: module
  ecmaVersion: latest

concordia/static/js/src/asset-reservation.js

@@ -1,10 +1,11 @@
 /* global jQuery displayMessage displayHtmlMessage buildErrorMessage Sentry */
-/* exported attemptToReserveAsset reserveAssetForEditing */
 
-const assetData = document.currentScript.dataset;
+const assetReservationData = document.getElementById(
+ 'asset-reservation-data',
+).dataset;
 
 function attemptToReserveAsset(reservationURL, findANewPageURL, actionType) {
- var $transcriptionEditor = jQuery('#transcription-editor');
+ let $transcriptionEditor = jQuery('#transcription-editor');
 
  jQuery
  .ajax({
@@ -77,7 +78,7 @@ function attemptToReserveAsset(reservationURL, findANewPageURL, actionType) {
  });
 
  window.addEventListener('beforeunload', function () {
- var payload = {
+ let payload = {
  release: true,
  csrfmiddlewaretoken: jQuery(
  'input[name="csrfmiddlewaretoken"]',
@@ -99,13 +100,19 @@ function attemptToReserveAsset(reservationURL, findANewPageURL, actionType) {
 }
 
 function reserveAssetForEditing() {
- if (assetData.reserveAssetUrl) {
- attemptToReserveAsset(assetData.reserveAssetUrl, '', 'transcribe');
+ if (assetReservationData.reserveAssetUrl) {
+ attemptToReserveAsset(
+ assetReservationData.reserveAssetUrl,
+ '',
+ 'transcribe',
+ );
  }
 }
 
 jQuery(function () {
- if (assetData.reserveForEditing) {
+ if (assetReservationData.reserveForEditing) {
  reserveAssetForEditing();
  }
 });
+
+export {reserveAssetForEditing};

concordia/static/js/src/contribute.js

@@ -1,4 +1,6 @@
-/* global $ displayMessage buildErrorMessage reserveAssetForEditing */
+/* global $ displayMessage buildErrorMessage */
+
+import {reserveAssetForEditing} from './asset-reservation.js';
 
 function lockControls($container) {
  if (!$container) {

concordia/static/js/src/guide.js

@@ -1,8 +1,7 @@
 /* global $ trackUIInteraction */
-/* exported openOffcanvas closeOffcanvas showPane hidePane */
 
 function openOffcanvas() {
- var guide = document.getElementById('guide-sidebar');
+ let guide = document.getElementById('guide-sidebar');
  guide.classList.remove('offscreen');
  guide.style.borderWidth = '0 0 thick thick';
  guide.style.borderStyle = 'solid';
@@ -16,46 +15,16 @@ function openOffcanvas() {
 }
 
 function closeOffcanvas() {
- var guide = document.getElementById('guide-sidebar');
+ let guide = document.getElementById('guide-sidebar');
  guide.classList.add('offscreen');
 
  guide.style.border = 'none';
  document.getElementById('open-guide').style.display = 'block';
 }
 
-function showPane(elementId) {
- document.getElementById(elementId).classList.add('show', 'active');
- document.getElementById('guide-nav').classList.remove('show', 'active');
-}
-
-function hidePane(elementId) {
- document.getElementById(elementId).classList.remove('show', 'active');
- document.getElementById('guide-nav').classList.add('show', 'active');
-}
-
-function trackHowToInteraction(element, label) {
- trackUIInteraction(element, 'How To Guide', 'click', label);
-}
+$('#open-guide').on('click', openOffcanvas);
 
-$('#open-guide').on('click', function () {
- trackHowToInteraction($(this), 'Open');
-});
-$('#close-guide').on('click', function () {
- trackHowToInteraction($(this), 'Close');
-});
-$('#previous-guide').on('click', function () {
- trackHowToInteraction($(this), 'Back');
-});
-$('#next-guide').on('click', function () {
- trackHowToInteraction($(this), 'Next');
-});
-$('#guide-bars').on('click', function () {
- trackHowToInteraction($(this), 'Hamburger Menu');
-});
-$('#guide-sidebar .nav-link').on('click', function () {
- let label = $(this).text().trim();
- trackHowToInteraction($(this), label);
-});
+$('#close-guide').on('click', closeOffcanvas);
 
 $('#guide-carousel')
  .carousel({
@@ -84,3 +53,29 @@ $('#card-carousel').on('slid.bs.carousel', function () {
  $('#next-card').show();
  }
 });
+
+function trackHowToInteraction(element, label) {
+ trackUIInteraction(element, 'How To Guide', 'click', label);
+}
+
+$('#open-guide').on('click', function () {
+ trackHowToInteraction($(this), 'Open');
+});
+$('#close-guide').on('click', function () {
+ trackHowToInteraction($(this), 'Close');
+});
+$('#previous-guide').on('click', function () {
+ trackHowToInteraction($(this), 'Back');
+});
+$('#next-guide').on('click', function () {
+ trackHowToInteraction($(this), 'Next');
+});
+$('#guide-bars').on('click', function () {
+ trackHowToInteraction($(this), 'Hamburger Menu');
+});
+$('#guide-sidebar .nav-link').on('click', function () {
+ let label = $(this).text().trim();
+ trackHowToInteraction($(this), label);
+});
+
+export {openOffcanvas, closeOffcanvas};

concordia/static/js/src/modules/quick-tips.js

@@ -0,0 +1,21 @@
+/* global $ */
+
+function setTutorialHeight() {
+ let $carouselItems = $('#card-carousel .carousel-item');
+ let heights = $carouselItems.map(function () {
+ let height = $(this).height();
+ if (height <= 0) {
+ let firstChild = $(this).children[0];
+ if (firstChild) {
+ height = firstChild.offsetHeight + 48;
+ } else {
+ return 517.195;
+ }
+ }
+ return height;
+ });
+ let maxHeight = Math.max.apply(this, heights);
+ $carouselItems.height(maxHeight);
+}
+
+export {setTutorialHeight};

concordia/static/js/src/ocr.js

@@ -1,7 +1,8 @@
 /* global $ */
-/* exported selectLanguage */
 
 function selectLanguage() {
  $('#ocr-transcription-modal').modal('hide');
  $('#language-selection-modal').modal('show');
 }
+
+$('#select-language-button').on('click', selectLanguage);

concordia/static/js/src/quick-tips.js → concordia/static/js/src/quick-tips-setup.js

@@ -1,10 +1,9 @@
-/* global $ trackUIInteraction setTutorialHeight */
+/* global $ trackUIInteraction */
 
-function trackQuickTipsInteraction(element, label) {
- trackUIInteraction(element, 'Quick Tips', 'click', label);
-}
+import {setTutorialHeight} from './modules/quick-tips.js';
+
+let mainContentHeight = $('#contribute-main-content').height();
 
-var mainContentHeight = $('#contribute-main-content').height();
 if (mainContentHeight < 710) {
  $('.sidebar').height(mainContentHeight - 130);
 }
@@ -13,23 +12,32 @@ $('#tutorial-popup').on('shown.bs.modal', function () {
  setTutorialHeight();
 });
 
+function trackQuickTipsInteraction(element, label) {
+ trackUIInteraction(element, 'Quick Tips', 'click', label);
+}
+
 $('#quick-tips').on('click', function () {
  trackQuickTipsInteraction($(this), 'Open');
 });
+
 $('#previous-card').on('click', function () {
  trackQuickTipsInteraction($(this), 'Back');
 });
+
 $('#next-card').on('click', function () {
  trackQuickTipsInteraction($(this), 'Next');
 });
+
 $('.carousel-indicators li').on('click', function () {
  let index = [...this.parentElement.children].indexOf(this);
  trackQuickTipsInteraction($(this), `Carousel ${index}`);
 });
+
 $('#tutorial-popup').on('hidden.bs.modal', function () {
  // We're tracking whenever the popup closes, so we don't separately track the close button being clicked
  trackUIInteraction($(this), 'Quick Tips', 'click', 'Close');
 });
+
 $('#tutorial-popup').on('shown-on-load', function () {
  // We set a timeout to make sure the analytics code is loaded before trying to track
  setTimeout(function () {

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

@@ -1,4 +1,5 @@
-/* global Split seadragonViewer */
+import {seadragonViewer} from './viewer.js';
+import Split from '/static/split.js/dist/split.es.js';
 
 let pageSplit;
 let contributeContainer = document.getElementById('contribute-container');
@@ -107,6 +108,12 @@ function horizontalSplit() {
  });
 }
 
+if (splitDirection == 'v') {
+ pageSplit = verticalSplit();
+} else {
+ pageSplit = horizontalSplit();
+}
+
 document
  .getElementById('viewer-layout-horizontal')
  .addEventListener('click', function () {
@@ -138,9 +145,3 @@ document
  }, 10);
  }
  });
-
-if (splitDirection == 'v') {
- pageSplit = verticalSplit();
-} else {
- pageSplit = horizontalSplit();
-}

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/base.html

@@ -280,27 +280,6 @@ <h2 class="h3 font-weight-normal text-center text-lg-left">Follow
 
  {% include "fragments/common-scripts.html" %}
 
- <script type="text/javascript">
- function setTutorialHeight() {
- var $carouselItems = $("#card-carousel .carousel-item");
- var heights = $carouselItems.map(function() {
- var height = $(this).height();
- if (height <= 0) {
- var firstChild = $(this).children[0];
- if (firstChild) {
- height = firstChild.offsetHeight + 48;
- } else {
- return 517.195;
- }
- }
- return height;
- });
- var maxHeight = Math.max.apply(this, heights);
- $carouselItems.height(maxHeight);
- }
- </script>
-
-
  {% block body_scripts %}{% endblock body_scripts %}
 
  <script type="text/javascript">
@@ -313,14 +292,17 @@ <h2 class="h3 font-weight-normal text-center text-lg-left">Follow
  }
  </script>
 
- <script>
+ <script type="module">
+ import { setTutorialHeight } from "{% static 'js/modules/quick-tips.js' %}";
+
  function clearCache() {
  for(var i in localStorage) {
  if (i.startsWith("campaign-")) {
  localStorage.removeItem(i);
  }
  }
  }
+
  if (typeof(Storage) !== "undefined") {
  {% if campaign %}
  const keyName = "campaign-{{ campaign.slug }}";

concordia/templates/transcriptions/asset_detail.html

@@ -19,24 +19,30 @@
  <meta property="og.type" content="website" />
  <meta property="og.image" content="{{ thumbnail_url }}" />
 
- <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 defer src="{% static 'js/contribute.js' %}"></script>
- <script defer src="{% static 'js/viewer-split.js' %}"></script>
- <script defer src="{% static 'js/guide.js' %}"></script>
- <script defer src="{% static 'js/quick-tips.js' %}"></script>
- <script defer src="{% static 'js/ocr.js' %}"></script>
- <script defer src="{% static 'js/asset-reservation.js' %}"
+ <script id="asset-reservation-data"
  data-reserve-asset-url="{% url 'reserve-asset' asset.pk %}"
  {% if transcription_status == "not_started" or transcription_status == "in_progress" or user.is_authenticated%}
  data-reserve-for-editing=1
  {% endif %}
  ></script>
- <script defer src="{% static 'js/viewer.js' %}"
+
+ <script id="viewer-data"
  data-prefix-url="{% static 'openseadragon/build/openseadragon/images/' %}"
  data-tile-source-url="{% asset_media_url asset %}?canvas"
  ></script>
+
+ <script module src="{% static 'openseadragon/build/openseadragon/openseadragon.min.js' %}"></script>
+ <script module src="{% static 'openseadragon-filtering/openseadragon-filtering.js' %}"></script>
+
+ <script type="module" src="{% static 'js/contribute.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 type="module" src="{% static 'js/viewer.js' %}"
+
+ ></script>
 {% endblock head_content %}
 
 {% block breadcrumbs %}