Remove the MULTIPAGE_PREVIEW_SIZE configuration settings, clicking on a page preview now redirects to the page detail view, added post lazy load class support, use post lazy load class support to add 100% width to document page previews

This commit is contained in:
Roberto Rosario
2014-11-17 19:37:43 -04:00
parent 5963822be7
commit 8ff61778f6
4 changed files with 37 additions and 45 deletions

View File

@@ -33,13 +33,6 @@ Size of the document list and recent document list previews.
Default: ``1400`` Default: ``1400``
.. setting:: DOCUMENTS_MULTIPAGE_PREVIEW_SIZE
**DOCUMENTS_MULTIPAGE_PREVIEW_SIZE**
Default: ``160x120``
.. setting:: DOCUMENTS_THUMBNAIL_SIZE .. setting:: DOCUMENTS_THUMBNAIL_SIZE
**DOCUMENTS_THUMBNAIL_SIZE** **DOCUMENTS_THUMBNAIL_SIZE**

View File

@@ -12,7 +12,7 @@ from django.utils.translation import ugettext_lazy as _
from converter.literals import (DEFAULT_PAGE_NUMBER, DEFAULT_ROTATION, from converter.literals import (DEFAULT_PAGE_NUMBER, DEFAULT_ROTATION,
DEFAULT_ZOOM_LEVEL) DEFAULT_ZOOM_LEVEL)
from .settings import DISPLAY_SIZE, MULTIPAGE_PREVIEW_SIZE, THUMBNAIL_SIZE from .settings import DISPLAY_SIZE, THUMBNAIL_SIZE
class DocumentPageImageWidget(forms.widgets.Widget): class DocumentPageImageWidget(forms.widgets.Widget):
@@ -49,25 +49,23 @@ class DocumentPagesCarouselWidget(forms.widgets.Widget):
for page in document_pages: for page in document_pages:
output.append(u'<div style="margin: 5px 10px 10px 10px;">') output.append(u'<div style="margin: 5px 10px 10px 10px;">')
output.append(u'<div class="tc">%(page_string)s %(page)s</div>' % {'page_string': ugettext(u'Page'), 'page': page.page_number})
output.append( output.append(
document_html_widget( document_html_widget(
page.document, page.document,
click_view='documents:document_display', click_view='documents:document_page_view',
click_view_arguments=[page.pk],
page=page.page_number, page=page.page_number,
gallery_name='document_pages', fancybox_class='fancybox-iframe',
fancybox_class='fancybox-noscaling',
image_class='lazy-load-carousel', image_class='lazy-load-carousel',
title=ugettext(u'Page %(page_num)d of %(total_pages)d') % {'page_num': page.page_number, 'total_pages': page_count}, size=DISPLAY_SIZE,
size=MULTIPAGE_PREVIEW_SIZE, version=latest_version_pk,
version=latest_version_pk post_load_class='lazy-load-carousel-loaded',
) )
) )
output.append(u'<div class="tc">') output.append(u'<div class="tc">%(page_string)s %(page)s</div>' % {'page_string': ugettext(u'Page'), 'page': page.page_number})
output.append(u'<a class="fancybox-iframe" href="%s">%s%s</a>' % (reverse('documents:document_page_view', args=[page.pk]), '<span class="famfam active famfam-page_white_go"></span>', ugettext(u'Details'))) output.append(u'</div>')
output.append(u'</div></div>')
output.append(u'</div><br />%s%s' % ('<span class="famfam active famfam-page_white_magnify"></span>', ugettext(u'Click on the image for full size preview'))) output.append(u'</div>')
return mark_safe(u''.join(output)) return mark_safe(u''.join(output))
@@ -80,7 +78,7 @@ def document_link(document):
return mark_safe(u'<a href="%s">%s</a>' % (document.get_absolute_url(), document)) return mark_safe(u'<a href="%s">%s</a>' % (document.get_absolute_url(), document))
def document_html_widget(document, click_view=None, page=DEFAULT_PAGE_NUMBER, zoom=DEFAULT_ZOOM_LEVEL, rotation=DEFAULT_ROTATION, gallery_name=None, fancybox_class='fancybox', version=None, image_class='lazy-load', title=None, size=THUMBNAIL_SIZE, nolazyload=False): def document_html_widget(document, click_view=None, click_view_arguments=None, page=DEFAULT_PAGE_NUMBER, zoom=DEFAULT_ZOOM_LEVEL, rotation=DEFAULT_ROTATION, gallery_name=None, fancybox_class='fancybox', version=None, image_class='lazy-load', title=None, size=THUMBNAIL_SIZE, nolazyload=False, post_load_class=None):
result = [] result = []
alt_text = _(u'Document page image') alt_text = _(u'Document page image')
@@ -108,9 +106,6 @@ def document_html_widget(document, click_view=None, page=DEFAULT_PAGE_NUMBER, zo
preview_view = u'%s?%s' % (reverse('document-image', args=[document.pk]), query_string) preview_view = u'%s?%s' % (reverse('document-image', args=[document.pk]), query_string)
plain_template = []
plain_template.append(u'<img src="%s" alt="%s" />' % (preview_view, alt_text))
result.append(u'<div class="tc" id="document-%d-%d">' % (document.pk, page if page else 1)) result.append(u'<div class="tc" id="document-%d-%d">' % (document.pk, page if page else 1))
if title: if title:
@@ -119,12 +114,12 @@ def document_html_widget(document, click_view=None, page=DEFAULT_PAGE_NUMBER, zo
title_template = u'' title_template = u''
if click_view: if click_view:
result.append(u'<a %s class="%s" href="%s" %s>' % (gallery_template, fancybox_class, u'%s?%s' % (reverse(click_view, args=[document.pk]), query_string), title_template)) result.append(u'<a %s class="%s" href="%s" %s>' % (gallery_template, fancybox_class, u'%s?%s' % (reverse(click_view, args=click_view_arguments or [document.pk]), query_string), title_template))
if nolazyload: if nolazyload:
result.append(u'<img style="border: 1px solid black;" src="%s" alt="%s" />' % (preview_view, alt_text)) result.append(u'<img style="border: 1px solid black;" src="%s" alt="%s" />' % (preview_view, alt_text))
else: else:
result.append(u'<img class="thin_border %s" data-src="%s" src="%smain/icons/hourglass.png" alt="%s" />' % (image_class, preview_view, settings.STATIC_URL, alt_text)) result.append(u'<img class="thin_border %s" data-src="%s" data-post-load-class="%s" src="%smain/icons/hourglass.png" alt="%s" />' % (image_class, preview_view, post_load_class, settings.STATIC_URL, alt_text))
if click_view: if click_view:
result.append(u'</a>') result.append(u'</a>')

View File

@@ -32,24 +32,6 @@
{% compress css %} {% compress css %}
<link rel="stylesheet" href="{% static 'web_theme_media/stylesheets/base.css' %}" type="text/css" media="screen" /> <link rel="stylesheet" href="{% static 'web_theme_media/stylesheets/base.css' %}" type="text/css" media="screen" />
<link rel="stylesheet" href="{% static 'web_theme_media/stylesheets/themes/activo/style.css' %}" type="text/css" media="screen" /> <link rel="stylesheet" href="{% static 'web_theme_media/stylesheets/themes/activo/style.css' %}" type="text/css" media="screen" />
<style type="text/css">
.message span.dismiss {
padding:0 5px;
cursor:pointer;
float:right;
margin-right:10px;
}
.message span.dismiss-all {
padding:0 5px;
cursor:pointer;
float:right;
margin-right:10px;
}
.message a {
text-decoration:none;
font-weight:bold
}
</style>
<link rel="stylesheet" href="{% static 'packages/animate-custom.css' %}" type="text/css" media="screen" /> <link rel="stylesheet" href="{% static 'packages/animate-custom.css' %}" type="text/css" media="screen" />
<link rel="stylesheet" href="{% static 'css/famfamfam-silk-sprite.css' %}" type="text/css" media="screen" /> <link rel="stylesheet" href="{% static 'css/famfamfam-silk-sprite.css' %}" type="text/css" media="screen" />
<link rel="stylesheet" href="{% static 'css/960-fluid.css' %}" type="text/css" media="screen" /> <link rel="stylesheet" href="{% static 'css/960-fluid.css' %}" type="text/css" media="screen" />
@@ -129,6 +111,28 @@
.thin_border { .thin_border {
border: 1px solid black; border: 1px solid black;
} }
.message span.dismiss {
padding:0 5px;
cursor:pointer;
float:right;
margin-right:10px;
}
.message span.dismiss-all {
padding:0 5px;
cursor:pointer;
float:right;
margin-right:10px;
}
.message a {
text-decoration:none;
font-weight:bold
}
.lazy-load-carousel-loaded {
width: 100%;
}
</style> </style>
{% block stylesheets %}{% endblock %} {% block stylesheets %}{% endblock %}
@@ -460,9 +464,10 @@
} }
function load_document_image(image) { function load_document_image(image) {
$.get( image.attr('data-src'), function( result ) { $.get( image.attr('data-src'), function(result) {
if (result.status == 'success') { if (result.status == 'success') {
image.attr('src', result.data); image.attr('src', result.data);
image.addClass(image.attr('data-post-load-class'));
} else if (result.detail == 'unknown_file_format') { } else if (result.detail == 'unknown_file_format') {
image.attr('src', "{% static 'images/mimetypes/unknown.png' %}"); image.attr('src', "{% static 'images/mimetypes/unknown.png' %}");
set_image_noninteractive(image); set_image_noninteractive(image);

View File

@@ -55,7 +55,6 @@ def staging_file_html_widget(staging_file, click_view=None, page=DEFAULT_PAGE_NU
result.append(u'<img style="border: 1px solid black;" src="%s" alt="%s" />' % (preview_view, alt_text)) result.append(u'<img style="border: 1px solid black;" src="%s" alt="%s" />' % (preview_view, alt_text))
else: else:
result.append(u'<img class="thin_border %s" data-src="%s" src="%smain/icons/hourglass.png" alt="%s" />' % (image_class, preview_view, settings.STATIC_URL, alt_text)) result.append(u'<img class="thin_border %s" data-src="%s" src="%smain/icons/hourglass.png" alt="%s" />' % (image_class, preview_view, settings.STATIC_URL, alt_text))
result.append(u'<noscript><img style="border: 1px solid black;" src="%s" alt="%s" /></noscript>' % (preview_view, alt_text))
if click_view: if click_view:
result.append(u'</a>') result.append(u'</a>')