Moved all javascript scripts on the asset detail page to their own fi…

…les.

.eslintrc.yaml

@@ -15,6 +15,7 @@ rules:
     'unicorn/prefer-query-selector': off # See https://github.com/sindresorhus/eslint-plugin-unicorn/issues/276
     'unicorn/prefer-node-append': off
     'unicorn/prefer-ternary': off
+    'unicorn/no-lonely-if': off
 env:
     browser: true
     es2024: true

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

@@ -1,6 +1,8 @@
 /* global jQuery displayMessage displayHtmlMessage buildErrorMessage Sentry */
 /* exported attemptToReserveAsset */
 
+const assetData = document.currentScript.dataset;
+
 function attemptToReserveAsset(reservationURL, findANewPageURL, actionType) {
     var $transcriptionEditor = jQuery('#transcription-editor');
 
@@ -95,3 +97,9 @@ function attemptToReserveAsset(reservationURL, findANewPageURL, actionType) {
         }
     });
 }
+
+jQuery(function () {
+    if (assetData.reserveForEditing) {
+        attemptToReserveAsset(assetData.reserveAssetUrl, '', 'transcribe');
+    }
+});

concordia/static/js/src/banner.js

@@ -0,0 +1,18 @@
+/* global $ */
+
+if (typeof Storage !== 'undefined') {
+    if (!(window.screen.width < 1024 || window.screen.height < 768)) {
+        for (var key in localStorage) {
+            if (key.startsWith('banner-')) {
+                if ($('#' + key).hasClass('alert')) {
+                    $('#' + key).attr('hidden', true);
+                }
+            }
+        }
+    }
+}
+
+$('#no-interface-banner').click(function (event) {
+    localStorage.setItem(event.target.parentElement.id, true);
+    $('#' + event.target.parentElement.id).attr('hidden', true);
+});

concordia/static/js/src/contribute.js

@@ -766,4 +766,27 @@ function setupPage() {
     }
 }
 
+let transcriptionForm = document.getElementById('transcription-editor');
+let ocrForm = document.getElementById('ocr-transcription-form');
+
+let formChanged = false;
+transcriptionForm.addEventListener('change', function () {
+    formChanged = true;
+});
+transcriptionForm.addEventListener('submit', function () {
+    formChanged = false;
+});
+if (ocrForm) {
+    ocrForm.addEventListener('submit', function () {
+        formChanged = false;
+    });
+}
+window.addEventListener('beforeunload', function (event) {
+    if (formChanged) {
+        // Some browsers ignore this value and always display a built-in message instead
+        return (event.returnValue =
+            "The transcription you've started has not been saved.");
+    }
+});
+
 setupPage();

concordia/static/js/src/guide.js

@@ -0,0 +1,86 @@
+/* global $ trackUIInteraction */
+/* exported openOffcanvas closeOffcanvas showPane hidePane */
+
+function openOffcanvas() {
+    var guide = document.getElementById('guide-sidebar');
+    guide.classList.remove('offscreen');
+    guide.style.borderWidth = '0 0 thick thick';
+    guide.style.borderStyle = 'solid';
+    guide.style.borderColor = '#0076ad';
+    document.getElementById('open-guide').style.display = 'none';
+    document.addEventListener('keydown', function (event) {
+        if (event.key == 'Escape') {
+            closeOffcanvas();
+        }
+    });
+}
+
+function closeOffcanvas() {
+    var 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', 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);
+});
+
+$('#guide-carousel')
+    .carousel({
+        interval: false,
+        wrap: false,
+    })
+    .on('slide.bs.carousel', function (event) {
+        if (event.to == 0) {
+            $('#guide-bars').addClass('d-none');
+        } else {
+            $('#guide-bars').removeClass('d-none');
+        }
+    });
+
+$('#previous-card').hide();
+
+$('#card-carousel').on('slid.bs.carousel', function () {
+    if ($('#card-carousel .carousel-item:first').hasClass('active')) {
+        $('#previous-card').hide();
+        $('#next-card').show();
+    } else if ($('#card-carousel .carousel-item:last').hasClass('active')) {
+        $('#previous-card').show();
+        $('#next-card').hide();
+    } else {
+        $('#previous-card').show();
+        $('#next-card').show();
+    }
+});

concordia/static/js/src/ocr.js

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

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

@@ -0,0 +1,38 @@
+/* global $ trackUIInteraction setTutorialHeight */
+
+function trackQuickTipsInteraction(element, label) {
+    trackUIInteraction(element, 'Quick Tips', 'click', label);
+}
+
+var mainContentHeight = $('#contribute-main-content').height();
+if (mainContentHeight < 710) {
+    $('.sidebar').height(mainContentHeight - 130);
+}
+
+$('#tutorial-popup').on('shown.bs.modal', function () {
+    setTutorialHeight();
+});
+
+$('#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 () {
+        trackUIInteraction($(this), 'Quick Tips', 'load', 'Open');
+    }, 1000);
+});

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

@@ -0,0 +1,146 @@
+/* global Split seadragonViewer */
+
+let pageSplit;
+let contributeContainer = document.getElementById('contribute-container');
+let ocrSection = document.getElementById('ocr-section');
+let editorColumn = document.getElementById('editor-column');
+let viewerColumn = document.getElementById('viewer-column');
+let layoutColumns = ['#viewer-column', '#editor-column'];
+let verticalKey = 'transcription-split-sizes-vertical';
+let horizontalKey = 'transcription-split-sizes-horizontal';
+
+let sizesVertical = localStorage.getItem(verticalKey);
+
+if (sizesVertical) {
+    sizesVertical = JSON.parse(sizesVertical);
+} else {
+    sizesVertical = [50, 50];
+}
+
+let sizesHorizontal = localStorage.getItem(horizontalKey);
+
+if (sizesHorizontal) {
+    sizesHorizontal = JSON.parse(sizesHorizontal);
+} else {
+    sizesHorizontal = [50, 50];
+}
+
+let splitDirection = localStorage.getItem('transcription-split-direction');
+
+if (splitDirection) {
+    splitDirection = JSON.parse(splitDirection);
+} else {
+    splitDirection = 'h';
+}
+
+function saveSizes(sizes) {
+    let sizeKey;
+    if (splitDirection == 'h') {
+        sizeKey = horizontalKey;
+        sizesHorizontal = sizes;
+    } else {
+        sizeKey = verticalKey;
+        sizesVertical = sizes;
+    }
+    localStorage.setItem(sizeKey, JSON.stringify(sizes));
+}
+
+function saveDirection(direction) {
+    localStorage.setItem(
+        'transcription-split-direction',
+        JSON.stringify(direction),
+    );
+}
+
+function verticalSplit() {
+    splitDirection = 'v';
+    saveDirection(splitDirection);
+    contributeContainer.classList.remove('flex-row');
+    contributeContainer.classList.add('flex-column');
+    viewerColumn.classList.remove('h-100');
+    if (ocrSection != undefined) {
+        editorColumn.prepend(ocrSection);
+    }
+
+    return Split(layoutColumns, {
+        sizes: sizesVertical,
+        minSize: 100,
+        gutterSize: 8,
+        direction: 'vertical',
+        elementStyle: function (dimension, size, gutterSize) {
+            return {
+                'flex-basis': 'calc(' + size + '% - ' + gutterSize + 'px)',
+            };
+        },
+        gutterStyle: function (dimension, gutterSize) {
+            return {
+                'flex-basis': gutterSize + 'px',
+            };
+        },
+        onDragEnd: saveSizes,
+    });
+}
+function horizontalSplit() {
+    splitDirection = 'h';
+    saveDirection(splitDirection);
+    contributeContainer.classList.remove('flex-column');
+    contributeContainer.classList.add('flex-row');
+    viewerColumn.classList.add('h-100');
+    if (ocrSection != undefined) {
+        viewerColumn.append(ocrSection);
+    }
+    return Split(layoutColumns, {
+        sizes: sizesHorizontal,
+        minSize: 100,
+        gutterSize: 8,
+        elementStyle: function (dimension, size, gutterSize) {
+            return {
+                'flex-basis': 'calc(' + size + '% - ' + gutterSize + 'px)',
+            };
+        },
+        gutterStyle: function (dimension, gutterSize) {
+            return {
+                'flex-basis': gutterSize + 'px',
+            };
+        },
+        onDragEnd: saveSizes,
+    });
+}
+
+document
+    .getElementById('viewer-layout-horizontal')
+    .addEventListener('click', function () {
+        if (splitDirection != 'h') {
+            if (pageSplit != undefined) {
+                pageSplit.destroy();
+            }
+            pageSplit = horizontalSplit();
+            setTimeout(function () {
+                // Some quirk in the viewer makes this
+                // sometimes not work depending on
+                // the rotation, unless it's delayed.
+                // Less than 10ms didn't reliable work.
+                seadragonViewer.viewport.zoomTo(1);
+            }, 10);
+        }
+    });
+
+document
+    .getElementById('viewer-layout-vertical')
+    .addEventListener('click', function () {
+        if (splitDirection != 'v') {
+            if (pageSplit != undefined) {
+                pageSplit.destroy();
+            }
+            pageSplit = verticalSplit();
+            setTimeout(function () {
+                seadragonViewer.viewport.zoomTo(1);
+            }, 10);
+        }
+    });
+
+if (splitDirection == 'v') {
+    pageSplit = verticalSplit();
+} else {
+    pageSplit = horizontalSplit();
+}