Skip to content

Commit

Permalink
Merge pull request #9418 from rebecca-shoptaw/9333/feature/add-ia-cov…
Browse files Browse the repository at this point in the history 
…er-option

Add Internet Archive cover option
  • Loading branch information
@cdrini
cdrini authored Jun 20, 2024
2 parents 3cb7cfe + f1a01bf commit e973346
Show file tree
Hide file tree
Showing 6 changed files with 190 additions and 126 deletions.
38 changes: 26 additions & 12 deletions openlibrary/i18n/messages.pot
View file
Original file line number Diff line number Diff line change
Expand Up @@ -656,9 +656,8 @@ msgstr ""

#: CreateListModal.html EditButtons.html account/notifications.html
#: account/password/reset.html account/privacy.html admin/imports-add.html
#: admin/permissions.html books/add.html covers/add.html covers/manage.html
#: databarEdit.html merge/authors.html my_books/dropdown_content.html
#: support.html tag/add.html
#: admin/permissions.html books/add.html covers/manage.html databarEdit.html
#: merge/authors.html my_books/dropdown_content.html support.html tag/add.html
msgid "Cancel"
msgstr ""

Expand Down Expand Up @@ -3550,19 +3549,15 @@ msgid "Edit %(year)d Reading Goal"
msgstr ""

#: covers/add.html
msgid "Please choose an image or provide a URL."
msgstr ""

#: covers/add.html
msgid "There are two ways to put an author's image on Open Library"
msgid "There are two ways to put an author's image on Open Library."
msgstr ""

#: covers/add.html
msgid "Image Guidelines"
msgstr ""

#: covers/add.html
msgid "There are two ways to put a cover image on Open Library"
msgid "There are a few ways to put a cover image on Open Library."
msgstr ""

#: covers/add.html
Expand All @@ -3578,15 +3573,34 @@ msgid "Please provide an image URL."
msgstr ""

#: covers/add.html
msgid "<strong>Pick one</strong> from the existing covers,"
#, python-format
msgid ""
"Learn more by reading our <a href=\"/help/faq/editing#picture\" "
"target=\"blank\">%(guidelines)s</a>."
msgstr ""

#: covers/add.html
msgid "<strong>Pick one</strong> from the existing covers"
msgstr ""

#: covers/add.html
msgid "Use this image"
msgstr ""

#: covers/add.html
msgid "Choose a JPG, GIF or PNG on your computer"
msgstr ""

#: covers/add.html
msgid "Upload"
msgstr ""

#: covers/add.html
msgid "Choose a JPG, GIF or PNG on your computer,"
msgid "Or, paste in the image URL if it's on the web"
msgstr ""

#: covers/add.html
msgid "Or, paste in the image URL if it's on the web."
msgid "Or, use the the cover from Internet Archive"
msgstr ""

#: covers/add.html
Expand Down
46 changes: 9 additions & 37 deletions openlibrary/plugins/openlibrary/js/covers.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,53 +38,25 @@ export function initCoversChange() {
});
}

function val(selector) {
const val = $(selector).val();
if (val) {
return val.trim();
} else {
return val;
}
}

function error(message, event) {
$('#errors').show().html(message);
event.preventDefault();
}

function add_iframe(selector, src) {
$(selector)
.append('<iframe frameborder="0" height="450" width="580" marginheight="0" marginwidth="0" scrolling="auto"></iframe>')
.append('<iframe frameborder="0" height="580" width="580" marginheight="0" marginwidth="0" scrolling="auto"></iframe>')
.find('iframe')
.attr('src', src);
}

// covers/manage.html and covers/add.html
export function initCoversAddManage() {
$('#addcover-form').on('submit', function (event) {
const i18nStrings = JSON.parse(document.querySelector('#errors').dataset.i18n);
var file = val('#coverFile');
var url = val('#imageUrl');
var coverid = val('#coverid');
$('.ol-cover-form').on('submit', function () {
const loadingIndicator = document.querySelector('.loadingIndicator');
const formDivs = document.querySelectorAll('.ol-cover-form, .imageIntro');

if (!file && !url && !coverid) {
return error(i18nStrings['empty_cover_inputs'], event);
if (loadingIndicator) {
loadingIndicator.classList.remove('hidden');
formDivs.forEach(div => div.classList.add('hidden'));
}
})

const btn = $('#imageUpload');
btn.prop('disabled', true).html(btn.data('loading-text'));
});

// Clicking a cover should set the form value to the data-id of that cover
$('#popcovers .book').on('click', function () {
var coverid;
$(this).toggleClass('selected').siblings().removeClass('selected');
coverid = '';
if ($(this).hasClass('selected')) {
coverid = $(this).data('id');
}
$('#coverid').val(coverid);
});

$('.column').sortable({
connectWith: '.trash'
Expand All @@ -108,7 +80,7 @@ export function initCoversSaved() {
const image = $('.imageSaved').data('imageId');
var cover_url;

$('.formButtons button').on('click', closePopup);
$('.popClose').on('click', closePopup);

// Update the image for the cover
if (['/type/edition', '/type/work', '/edit'].includes(doc_type_key)) {
Expand Down
107 changes: 52 additions & 55 deletions openlibrary/templates/covers/add.html
View file
Original file line number Diff line number Diff line change
@@ -1,84 +1,81 @@
$def with (doc, data={}, status=None)

$ i18n_strings = {
$ "empty_cover_inputs": _("Please choose an image or provide a URL.")
$ }

$putctx('cssfile', 'form')
$putctx("show_ol_shell", False)
$putctx('robots', 'noindex,nofollow')

$if doc.type.key == "/type/author":
$ intro = _("There are two ways to put an author's image on Open Library")
$ intro = _("There are two ways to put an author's image on Open Library.")
$ action = doc.url('/add-photo')
$ guideline = _("Image Guidelines")
$else:
$ intro = _("There are two ways to put a cover image on Open Library")
$ intro = _("There are a few ways to put a cover image on Open Library.")
$ action = doc.url('/add-cover')
$ guideline = _("Cover Guidelines")

<div class="popAlert" id="errors" style="display: $('block' if status else 'none')" data-i18n="$json_encode(i18n_strings)">
<div class="popAlert" id="errors" style="display: $('block' if status else 'none')">
$if status:
$if status.code == 1: $_("Please provide a valid image.")
$elif status.code == 2: $_("Please provide an image URL.")
$elif status.code == 3: $_("Please provide a valid image.")
</div>

<div class="imageIntro">$intro</div>

<form class="floatform" id="addcover-form" name="bookcover" method="post" enctype="multipart/form-data" action="$action">

<div class="floatform__body">
<div>
$if doc.type.key == "/type/work":
$if doc.get_edition_covers():
<div class="formElement">
<div class="label">
<label>$:_("<strong>Pick one</strong> from the existing covers,")</label>
</div>
<div class="carousel-section">
<div id="covers" class="carousel-container carousel-container-decorated carousel--minimal">
<div id="popcovers" class="carousel carousel--progressively-enhanced"
data-config="$json_encode({'booksPerBreakpoint': [3, 3, 3, 3, 2, 1]})">
$for cover in doc.get_edition_covers():
<div class="book carousel__item" data-id="$cover.id">
<div class="book-cover">
<img src="$cover.url(size='M')"
width="100" class="bookcover"/>
</div>
<div class="imageIntro">$intro $:_('Learn more by reading our <a href="/help/faq/editing#picture" target="blank">%(guidelines)s</a>.', guidelines=guideline)</div>
$if doc.type.key == "/type/work":
$if doc.get_edition_covers():
<form class="ol-cover-form ol-cover-form--id" method="post" enctype="multipart/form-data" action="$action">
<div class="formElement">
<div class="label">
<label>$:_("<strong>Pick one</strong> from the existing covers")</label>
</div>
<div class="carousel-section">
<div id="covers" class="carousel-container carousel-container-decorated carousel--minimal">
<div class="carousel carousel--progressively-enhanced" data-config="$json_encode({'booksPerBreakpoint': [3, 3, 3, 3, 2, 1]})">
$for cover in doc.get_edition_covers():
<div class="book carousel__item">
<div class="book-cover">
<img src="$cover.url(size='M')" width="100" class="bookcover"/>
<button type="submit" name="coverid" value="$cover.id" class="cta-btn cta-btn--vanilla">$_("Use this image")</button>
</div>
</div>
</div>
</div>
<input type="hidden" id="coverid" name="coverid" value=""/>
</div>

<div class="formElement">
<div class="label">
<label id="imageBrowse" for="coverFile">$_("Choose a JPG, GIF or PNG on your computer,")</label>
</div>
<div class="input">
<input type="file" name="file" id="coverFile" value="" accept=".jpg, .jpeg, .gif, .png"/>
</div>
</div>
</form>

<div class="formElement">
<div class="label">
<label id="imageWeb" for="imageUrl">$_("Or, paste in the image URL if it's on the web.")</label>
</div>
<div class="input">
<input type="url" name="url" id="imageUrl" value="$data.get('url', '')" placeholder="https://..." />
</div>
</div>

<div class="formElement" style="margin: $('15px 0px 0px 15px;' if doc.type.key == '/type/work' else '0px;')">
<button type="submit" name="upload" id="imageUpload" value="$_('Submit')" class="largest" data-loading-text='$_("Uploading...")'>
$_("Submit")
</button>
<a class="dialog--close-parent red" href="javascript:;">$_("Cancel")</a>
</div>
<form class="ol-cover-form ol-cover-form--upload" method="post" enctype="multipart/form-data" action="$action">
<div class="label">
<label for="coverFile">$_("Choose a JPG, GIF or PNG on your computer")</label>
</div>
<div class="input">
<input type="file" name="file" id="coverFile" value="" accept=".jpg, .jpeg, .gif, .png" required/>
<button type="submit" class="cta-btn cta-btn--vanilla">$_("Upload")</button>
</div>
</form>

</div>
<form class="ol-cover-form ol-cover-form--url" method="post" enctype="multipart/form-data" action="$action">
<div class="label">
<label id="imageWeb" for="imageUrl">$_("Or, paste in the image URL if it's on the web")</label>
</div>
<div class="input">
<input type="url" name="url" id="imageUrl" value="$data.get('url', '')" placeholder="https://..." required />
<button type="submit" class="cta-btn cta-btn--vanilla">$_("Submit")</button>
</div>
</form>
<div class="imageIntro smallest"><a href="/help/faq/editing#picture" target="blank">$guideline</a></div>

$if doc.type.key == "/type/edition" and doc.ocaid:
$ img_url = "https://archive.org/services/img/%s/full/pct:600/0/default.jpg" % doc.ocaid
<form class="ol-cover-form ol-cover-form--ia" method="post" enctype="multipart/form-data" action="$action">
<div class="label">
<label>$_("Or, use the the cover from Internet Archive")</label>
</div>
<div class="input">
<a href="$img_url" target="_blank">
<img class="ol-cover-form--ia_image" src="$img_url" style="height: 200px" />
</a>
<button type="submit" id="coverIA" class="cta-btn cta-btn--vanilla" name="url" value="$img_url">$_("Use this image")</button>
</div>
</form>

$:macros.LoadingIndicator(_("Uploading..."))
9 changes: 3 additions & 6 deletions openlibrary/templates/covers/saved.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,13 +21,10 @@
$else:
Uploaded anonymously on $datestr(d.created)<br/>
$if d.source_url:
<a href="$d.source_url">$d.source_url</a><br/>
<a href="$d.source_url" target="_blank">$d.source_url</a><br/>
<br/>
<a href="$changequery()">$_("Add another image")</a>?
<a href="$changequery()" class="imageSaved__button"><button class="cta-btn cta-btn--vanilla">$_("Add another image")</button></a>
<button type="button" name="finished" value="Finished" class="largest cta-btn cta-btn--primary popClose">$_("Finished")</button>
</div>
</div>
</div>

<div class="formButtons">
<button type="button" name="finished" id="popClose" value="Finished" class="largest">$_("Finished")</button>
</div>
Loading

0 comments on commit e973346

Please sign in to comment.