Skip to content

Commit

Permalink
Split asset_detail.html template into smaller templates. Re-added a J…
Browse files Browse the repository at this point in the history 
…S function that was needed. (#2481)
  • Loading branch information
@joshuastegmaier
joshuastegmaier authored Aug 6, 2024
1 parent 677c4d9 commit c93ec4c
Show file tree
Hide file tree
Showing 15 changed files with 753 additions and 736 deletions.
10 changes: 8 additions & 2 deletions concordia/static/js/src/asset-reservation.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/* global jQuery displayMessage displayHtmlMessage buildErrorMessage Sentry */
/* exported attemptToReserveAsset */
/* exported attemptToReserveAsset reserveAssetForEditing */

const assetData = document.currentScript.dataset;

Expand Down Expand Up @@ -98,8 +98,14 @@ function attemptToReserveAsset(reservationURL, findANewPageURL, actionType) {
});
}

function reserveAssetForEditing() {
if (assetData.reserveAssetUrl) {
attemptToReserveAsset(assetData.reserveAssetUrl, '', 'transcribe');
}
}

jQuery(function () {
if (assetData.reserveForEditing) {
attemptToReserveAsset(assetData.reserveAssetUrl, '', 'transcribe');
reserveAssetForEditing();
}
});
766 changes: 32 additions & 734 deletions concordia/templates/transcriptions/asset_detail.html
View file

Large diffs are not rendered by default.

19 changes: 19 additions & 0 deletions concordia/templates/transcriptions/asset_detail/asset_reservation_failure_modal.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Someone else is already transcribing this page</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<p>You can help by transcribing a new page, adding tags to this page, or coming back later to review this page's transcription.</p>
</div>
<div class="modal-footer">
<a class="btn btn-primary" href="{{ next_open_asset_url }}">
Find new page
</a>
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
38 changes: 38 additions & 0 deletions concordia/templates/transcriptions/asset_detail/captcha_modal.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
<form action="{% url 'ajax-captcha' %}" class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 id="captcha-modal-title" class="modal-title">Please confirm you are not a robot</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<div class="form-row">
<div id="captcha-modal-description" class="help-text">
<p class="sr-only">
To prevent abuse non-logged in users are
required to solve a captcha periodically. An
audio alternative is under development. You may
also avoid this challenge by
<a href="{% url 'login' %}?next={{ request.path|urlencode }}" rel="nofollow">logging in</a>.
</p>
Before continuing please enter the letters in the image
below so we know you are a human:
</div>
<img id="captcha-image" class="d-block my-3 mx-auto border rounded" alt="Type the letters in the image">
</div>
<div class="form-row">
<input name="response" class="form-control" autocomplete="off" aria-label="Please enter the letters in the image below">
</div>
<input type="hidden" name="key"/>
</div>
<div class="modal-footer">
<button type="submit" class='btn btn-secondary js-captcha-refresh'>
Show me another image
</button>
<button type="submit" class="btn btn-primary">
Continue
</button>
</div>
</div>
</form>
118 changes: 118 additions & 0 deletions concordia/templates/transcriptions/asset_detail/editor.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,118 @@
<div class="flex-grow-1 d-flex d-print-block flex-column">
<div id="transcription-status-display">
<h2 id="display-submitted" {% if transcription_status != 'submitted' %}hidden{% endif %}>
<span class="fas fa-list"></span>
Needs review
</h2>
<h2 id="display-completed" {% if transcription_status != 'completed' %}hidden{% endif %}>
<span class="fas fa-check"></span>
Completed
</h2>
<h2 id="display-notstarted" {% if transcription_status != "not_started" %}hidden{% endif %}>
<span class="fas fa-edit"></span>
Not started
</h2>
<h2 id="display-inprogress" {% if transcription_status != "in_progress" %}hidden{% endif %}>
<span class="fas fa-edit"></span>
In progress
</h2>
<span id="display-conflict" hidden>
<span class="fas fa-exclamation-triangle"></span>
Another user is transcribing this page
</span>
</div>

<form id="transcription-editor" class="ajax-submission flex-grow-1 d-flex flex-column d-print-block" method="post" action="{% url 'save-transcription' asset_pk=asset.pk %}" data-transcription-status="{{ transcription_status }}" {% if transcription %}data-transcription-id="{{ transcription.pk|default:'' }}" {% if transcription.submitted %}data-unsaved-changes="true"{% endif %} data-submit-url="{% url 'submit-transcription' pk=transcription.pk %}" data-review-url="{% url 'review-transcription' pk=transcription.pk %}"{% endif %}>
{% csrf_token %}
<input type="hidden" name="supersedes" value="{{ transcription.pk|default:'' }}" />

<div class="row justify-content-sm-between px-3">
<span id="transcription-status-message">
<h2 id="message-contributors" {% if transcription_status == 'not_started' %}hidden{% endif %}>
Registered Contributors: <span id="message-contributors-num" class="font-weight-normal">{{ registered_contributors }}</span>
</h2>
<span id="message-notstarted" {% if transcription_status != 'not_started' %}hidden{% endif %}>
Transcribe this page.
</span>
<span id="message-inprogress" {% if transcription_status != 'in_progress' %}hidden{% endif %}>
Someone started this transcription. Can you finish it?
</span>
<span id="message-submitted" {% if transcription_status != 'submitted' %}hidden{% endif %}>
Check this transcription thoroughly. Accept if correct!
</span>
<span id="message-completed" {% if transcription_status != 'completed' %}hidden{% endif %}>
This transcription is finished! You can read and add tags.
</span>
</span>
<div class="align-items-center align-self-end btn-group">
<a class="font-weight-bold" id="quick-tips" data-toggle="modal" data-target="#tutorial-popup" role="button">
<u>Campaign Tips</u>
</a>
</div>
</div>

{% spaceless %}
<div id="loading-container" class="pb-2">
<div id="ocr-loading" class="spinner-border" role="status" aria-hidden="true" hidden>
<span class="sr-only">Loading...</span>
</div>
</div>
<div class="d-flex flex-column flex-grow-1" id="transcription-input-container">
<textarea readonly class="form-control rounded flex-grow-1 d-print-none" name="text" id="transcription-input" placeholder="{% if transcription_status == 'not_started' or transcription_status == 'in_progress' %}Go ahead, start typing. You got this!{% else %}Nothing to transcribe{% endif %}" aria-label="Transcription input">
{{ transcription.text }}
</textarea>
{% if guides %}
<button id="open-guide" class="btn btn-primary" type="button" onclick="openOffcanvas()">How-To Guide</button>
{% include "fragments/_how-to-guide.html" %}
{% endif %}
</div>

<div class="print-transcription-text" aria-hidden="true" style="display: none;">{{ transcription.text }}</div>

<div class="my-3 d-print-none d-flex flex-wrap justify-content-center align-items-center">
{% if transcription_status == 'not_started' or transcription_status == 'in_progress' %}
<div class="form-check w-100 text-center mt-0 mb-3">
<input id="nothing-to-transcribe" type="checkbox" class="form-check-input" />
<label class="form-check-label" for="nothing-to-transcribe">
Nothing to transcribe
</label>

<a tabindex="0" class="btn btn-link d-inline py-0" role="button" data-toggle="popover" data-placement="top" data-trigger="focus click hover" title="Nothing to transcribe?" data-html="true" data-content="If there is no text to transcribe, check this box and click &quot;Submit&quot;. Learn more about what to transcribe and what to skip in &quot;How To.&quot;">
<span class="fas fa-question-circle" aria-label="Open Help"></span>
</a>
</div>

<button id="save-transcription-button" disabled type="submit" class="btn btn-primary mx-1" title="Save the text you entered above">
Save
</button>
<button id="rollback-transcription-button" {% if not undo_available %}disabled{% endif %} type="button" class="btn btn-outline-primary mx-1" title="Undo" data-url="{% url 'rollback-transcription' asset_pk=asset.pk %}">
<span class="fas fa-undo"></span> Undo
</button>
<button id="rollforward-transcription-button" {% if not redo_available %}disabled{% endif %} type="button" class="btn btn-outline-primary mx-1" title="Redo" data-url="{% url 'rollforward-transcription' asset_pk=asset.pk %}">
Redo <span class="fas fa-redo"></span>
</button>
<button id="submit-transcription-button" disabled type="button" class="btn btn-primary mx-1" title="Request another volunteer to review the text you entered above">
Submit for Review
</button>

{% elif transcription_status == 'submitted' %}
{% if not user.is_authenticated %}
<p class="help-text">
<a href="{% url 'registration_register' %}">Register</a>
or
<a href="{% url 'login' %}?next={{ request.path|urlencode }}">login</a>
to help review
</p>
{% else %}
<button id="reject-transcription-button" disabled type="button" class="btn btn-primary mx-1" title="Correct errors you see in the text">Edit</button>
{% if transcription.user.pk == user.pk %}
<p class="help-text mt-2">You submitted this transcription. You can re-open it for editing if you wish to make changes before another volunteer reviews it.</p>
{% else %}
<button id="accept-transcription-button" disabled type="button" class="btn btn-primary mx-1" title="Confirm that the text is accurately transcribed">Accept</button>
{% endif %}
{% endif %}
{% endif %}
</div>
{% endspaceless %}
</form>
</div>
33 changes: 33 additions & 0 deletions concordia/templates/transcriptions/asset_detail/language_selection_modal.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true" class="text-primary">&times;</span>
</button>
</div>
<form id="ocr-transcription-form" class="ajax-submission" method="post" action="{% url 'generate-ocr-transcription' asset_pk=asset.pk %}" data-lock-element="#transcription-editor">
<div class="modal-body">
<div class="bg-light p-3">
<h5 class="modal-title mb-3">Select language</h5>
<p>Select the language the transcription is in from the list below.</p>
<div class="text-center pb-1">
<select id="language" name="language" size="7">
{% for language in languages %}
<option value="{{ language.0 }}"{% if language.0 == "eng" %} selected="selected"{% endif %}>
{{ language.1 }}
</option>
{% endfor %}
</select>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Cancel</button>
{% if transcription_status == "not_started" or transcription_status == "in_progress" %}
<input type="hidden" name="supersedes" value="{{ transcription.pk|default:'' }}" />
<button id="ocr-transcription-button" class="btn btn-link underline-link font-weight-bold" disabled>Replace Text</button>
{% endif %}
</div>
</form>
</div>
</div>
49 changes: 49 additions & 0 deletions concordia/templates/transcriptions/asset_detail/navigation.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
<nav id="asset-navigation" class="d-flex flex-wrap flex-grow-1 justify-content-sm-between align-items-center d-print-block" role="navigation">
<div class="d-flex align-items-center">
<form class="p-1" onsubmit="document.location.href = encodeURI(document.getElementById('asset-selection').value); return false">
<div class="input-group input-group-sm flex-nowrap">
<div class="input-group-prepend">
<label class="input-group-text p-0 pr-1 border-0" for="asset-selection">Page</label>
</div>
<select id="asset-selection" class="custom-select custom-select-sm">
{% for sequence, slug in asset_navigation %}
<option {% if sequence == asset.sequence %}selected{% endif %} value="{% url 'transcriptions:asset-detail' campaign.slug project.slug item.item_id slug %}">{{ sequence }}</option>
{% endfor %}
</select>
<div class="input-group-append">
<button type="submit" class="btn btn-primary">Go</button>
</div>
</div>
</form>

<div class="btn-group btn-group-sm p-1">
<a class="btn btn-primary {% if not previous_asset_url %}disabled{% endif %}" {% if previous_asset_url %}href="{{ previous_asset_url }}"{% else %}aria-disabled="true"{% endif %}>
<span class="fas fa-chevron-left"></span>
<span class="sr-only">Previous Page</span>
</a>
<a class="btn btn-primary {% if not next_asset_url %}disabled{% endif %}" {% if next_asset_url %}href="{{ next_asset_url }}"{% else %}aria-disabled="true"{% endif %}>
<span class="fas fa-chevron-right"></span>
<span class="sr-only">Next Page</span>
</a>
</div>

<div class="btn-group btn-group-sm p-1">
<button hidden id="go-fullscreen" class="btn btn-primary text-nowrap" data-target="contribute-main-content">
<span class="fas fa-arrows-alt"></span>
Fullscreen
</button>
</div>
</div>

<div class="btn-group align-self-end">
{% if asset.resource_url %}
<div class="btn-group-sm p-1" role="navigation" aria-label="Link to the original source for this item">
<a class="btn btn-outline-primary text-nowrap" target="_blank" rel=noopener title="View the original source for this item in a new tab" href="{{ asset.resource_url }}{% if 'sp=' not in asset.resource_url %}?sp={{ asset.sequence }}{% endif %}">View on www.loc.gov <i class="fa fa-external-link-alt"></i></a>
</div>
{% endif %}

<div class="btn-group-sm p-1" role="navigation" aria-label="Link to the next editable page">
<a class="btn btn-outline-primary text-nowrap" title="Move to the next page in this item that needs help" href="{{ next_open_asset_url }}">Find a new page &rarr;</a>
</div>
</div>
</nav>
27 changes: 27 additions & 0 deletions concordia/templates/transcriptions/asset_detail/ocr_help_modal.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
<div id="ocr-help-modal" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">About Transcribe with OCR</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<h6 class="modal-title">What is OCR?</h6>
<p>OCR stands for Optical Character Recognition. OCR is a software tool that can extract print text from some documents.</p>
<h6>When will OCR work well?</h6>
<p>OCR does not work on handwriting. It only works for printed or typed text, meaning text created by a typewriter, printing press, or other mechanical means. OCR will do best on consistent and clear images of modern typefaces.</p>
<h6>Do I still need to review pages started with OCR?</h6>
<p>Yes! OCR is imperfect. It may not work well for some or all parts of a typed page, but it can be a great starting point. If you start a page with OCR, you should read the text closely before submitting. If you are reviewing a OCR-ed page, you also still need to review.</p>
<h6>Who can use "Transcribe with OCR"?</h6>
<p><a href="{% url 'registration_register' %}">Register for an account</a> and <a href="{% url 'registration_login' %}?next={{ request.path }}">log in</a> to use this feature.</p>
<h6>Why does <span class="font-italic">By the People</span> have this feature?</h6>
<p>We always want to use volunteer time effectively. When the Library of Congress digitizes a large group of printed pages, it will usually OCR them. The materials in By the People campaigns are not good candidates for applying OCR at scale, either because they are handwritten, a mixed collection of handwritten and print materials, or printed on paper or in a typeface that does not produce accurate OCR results. However, OCR can still be a useful starting point for some typed pages. Use it if it if you like it or skip it if you don’t!</p>
</div>
<div class="modal-footer justify-content-center">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Loading

0 comments on commit c93ec4c

Please sign in to comment.