{% extends \"base.html\" %}\n{% load static i18n %}\n{% load account socialaccount %}\n{% load crispy_forms_tags %}\n{% load sass_tags %}\n\n{% block extra_css %}\n<link type=\"text/css\" href=\"{% sass_src 'css/components/reader.scss' %}\" rel=\"stylesheet\">\n{% endblock extra_css %}\n\n{% block nav %}\n{% include '_page/_navbar.html' %}\n{% endblock nav %}\n\n{% block content %}\n{% block inner %}\n\n<!-- uiAction search -->\n<div id=\"modal-search\" class=\"reader-modal\" uk-modal>\n <div class=\"uk-modal-dialog uk-padding-small\">\n <button class=\"uk-modal-close-full uk-padding-small uk-margin-small-top uk-close-small\" type=\"button\" uk-close></button>\n <volume-search pid=\"{{ volume.pid }}\"></volume-search>\n <volume-annotations class=\"uk-margin-small-top\" :manifest-count=\"{{ user_annotation_count }}\" :page-count=\"{{ user_annotation_page_count }}\" :is-all=\"{{ is_all|yesno:'true,false' }}\"></volume-annotations>\n </div>\n</div>\n<!-- uiAction search -->\n\n<!-- uiAction information -->\n<div id=\"modal-info\" class=\"reader-modal\" uk-modal>\n <div class=\"uk-modal-dialog uk-padding-small\">\n <button class=\"uk-modal-close-full uk-padding-small uk-margin-small-top uk-close-small\" type=\"button\" uk-close></button>\n <ul uk-tab class=\"uk-text-bold uk-text-large\">\n <li class=\"uk-active\"><a href=\"#\">Info</a></li>\n <li><a href=\"#\">URLs</a></li>\n </ul>\n <ul class=\"uk-switcher uk-margin-top\">\n <li>{% include '_page/_information.html' %}</li>\n <li>{% include '_page/_urls.html' %}</li>\n </ul>\n </div>\n</div>\n<!-- uiAction information -->\n\n<!-- uiAction urls and exports -->\n<div id=\"modal-urls\" class=\"reader-modal\" uk-modal>\n <div class=\"uk-modal-dialog uk-padding-small\">\n <button class=\"uk-modal-close-full uk-padding-small uk-margin-small-top uk-close-small\" type=\"button\" uk-close></button>\n {% include '_page/_exports.html' %}\n </div>\n</div>\n<!-- uiAction urls and exports -->\n\n<!-- uiAction ocr -->\n<div id=\"modal-ocr\" class=\"reader-modal\" uk-modal>\n <div class=\"uk-modal-dialog uk-padding-small\">\n <button class=\"uk-modal-close-full uk-padding-small uk-margin-small-top uk-close-small\" type=\"button\" uk-close></button>\n {% include '_page/_ocr.html' %}\n </div>\n</div>\n<!-- uiAction ocr -->\n\n{% endblock inner %}\n{% endblock content %}\n\n{% block viewer %}\n<div class=\"rdx-viewer-container\">\n <div id=\"rdx-viewer\" role=\"region\"></div>\n</div>\n{% if page.pid is not None %}\n<!--\n <p id=\"test\"></p>\n <a class=\"facebook\" href='http://www.facebook.com/sharer.php?s=100&p[url]=http://{{ request.META.HTTP_HOST }}{{ request.path }}&p[images][0]{{ page.IIIF_IMAGE_SERVER_BASE }}{{ page.pid }}/full/600,/0/default.jpg' target=\"_blank\">\n <img src=\"https://www.cabq.gov/culturalservices/biopark/images/share-on-facebook.png/@@images/image.png\" title=\"Facebook\" alt=\"Facebook\" ></a>\n-->\n{% endif %}\n{% endblock viewer %}\n\n{% block javascript %}\n{% comment %}\nRendered here (outside #v-readux, before main.js loads) rather than inside\nthe content block: Vue 3 strips <script> tags when it compiles an in-DOM\ntemplate, so a json_script tag placed anywhere inside the #v-readux mount\ntarget never survives to be read by VolumeAnnotations.vue's mounted() hook \u2014\ndocument.getElementById(\"context\") comes back null every time, even though\nthe server renders this tag correctly on every request. Keeping it outside\nVue's mount target (and before main.js, so it's already in the DOM by the\ntime Vue mounts) is what makes it actually readable.\n{% endcomment %}\n{{ json_data|json_script:\"context\" }}\n{{ block.super }}\n{% endblock javascript %}\n\n{% block extra_javascript %}\n<script type=\"text/javascript\">\nwindow.onload = function() {\n const options = {\n manifest: 'https://{{ request.META.HTTP_HOST }}/iiif/v3/{{ volume.pid }}/manifest',\n id: 'rdx-viewer',\n token: document.getElementsByName('csrfmiddlewaretoken')[0].value,\n uiActions: [\n {\n id: 'action-info',\n tooltipContent: 'Information',\n onClick: () => UIkit.modal('#modal-info').show(),\n icon: \"<span uk-icon='icon: info'></span>\"\n }, {\n id: 'action-search',\n tooltipContent: 'Search within this volume',\n onClick: () => UIkit.modal('#modal-search').show(),\n icon: \"<span uk-icon='icon: search'></span>\"\n }, {\n id: 'action-links',\n tooltipContent: 'Export',\n onClick: () => UIkit.modal('#modal-urls').show(),\n icon: \"<span uk-icon='icon: cloud-download'></span>\"\n }, {\n id: 'action-ocr',\n tooltipContent: 'OCR Options',\n onClick: () => UIkit.modal('#modal-ocr').show(),\n icon: \"<span uk-icon='icon: file-text'></span>\",\n hideOnAll: true\n }\n ]\n };\n\n {% if not user.is_anonymouns %}\n options.user = {\n id: '{{user.get_username}}',\n displayName: '{{user.name}}'\n };\n {% endif %}\n\n ECDSAnnotator.init(options);\n\n // The r6o editor lives inside OSD's viewer element. OSD's MouseTracker\n // registers bubble-phase pointerdown/mousedown handlers on viewer.element\n // that call preventDefault(), which cancels focus transfer to Jodit.\n //\n // The r6o editor is rendered immediately at init (opacity:0, not added/removed\n // from DOM), so we query it directly after a short React render delay.\n // stopImmediatePropagation() stops the event from bubbling to OSD's handler\n // without calling preventDefault(), so the browser's focus transfer still fires.\n // An open UIkit modal fights the annotation editor: its focus trap pulls\n // focus back into the modal on every focusin, and the resulting focus\n // tug-of-war can drive Jodit's toolbar into an infinite update loop that\n // freezes the page. Two defenses:\n //\n // 1. Close any open reader modal as soon as the user interacts with the\n // viewer, so the annotation editor never opens beneath a live modal.\n var _readerModalIds = ['#modal-search', '#modal-info', '#modal-urls', '#modal-ocr'];\n document.getElementById('rdx-viewer').addEventListener('pointerdown', function() {\n _readerModalIds.forEach(function(id) {\n var el = document.querySelector(id);\n if (el && el.classList.contains('uk-open')) UIkit.modal(id).hide();\n });\n }, true);\n\n // 2. Hide editor focus events from UIkit's focus trap (capture phase runs\n // before UIkit's document-level focusin listener), so typing keeps\n // working even if a modal is somehow opened while the editor is up.\n document.addEventListener('focusin', function(e) {\n if (e.target.closest && e.target.closest('.r6o-editor')) {\n e.stopImmediatePropagation();\n }\n }, true);\n}\n</script>\n\n{% endblock extra_javascript %}\n