archive/pillar
0
0
Fork 0
Code Issues 42 Pull Requests Projects Releases Wiki Activity

Deduplicated code for image expansion into the page overlay

Browse Source 
It now also supports WEBP links, and is compatible with Google Cloud
Storage (which adds ?blablabla to links).
This commit is contained in:
Sybren A. Stüvel
2017-09-29 16:46:27 +02:00
parent 2603c4f44f
commit f42334453c
6 changed files with 21 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/scripts/tutti/8_expand_image.js Normal file
View File

@@ -0,0 +1,18 @@
$(function() {
/* Expand images when their link points to a jpg/png/gif/webp */
var imgs = $('.expand-image-links a img')
.off('click')
.on('click', function(e){
var $img = $(this);
var href = $img.parent().attr('href');
if (href.match("\\.(jpg|png|gif|webp)\\W?")) {
var src = $img.attr('src');
var overlay_img = $('<img>').attr('src', src);
$('#page-overlay')
.addClass('active')
.html(overlay_img);
e.preventDefault();
}
});
});

18
src/templates/nodes/custom/blog/index.pug
View File

@@ -10,7 +10,7 @@ link(href="{{ url_for('static_pillar', filename='assets/css/blog.css', v=1732017
| {% block project_context %}
#blog_container
#blog_index-container
#blog_index-container.expand-image-links
| {{ blogmacros.render_blog_index(project, posts, can_create_blog_posts, api) }}
| {% endblock %}
@@ -45,22 +45,6 @@ link(href="{{ url_for('static_pillar', filename='assets/css/blog.css', v=1732017
| {% block footer_scripts %}
include ../_scripts
script.
/* Expand images when their link points to a jpg/png/gif */
$('.blog_index-item .item-content a img').on('click', function(e){
e.preventDefault();
var href = $(this).parent().attr('href');
var src = $(this).attr('src');
if (href.match("jpg$") || href.match("png$") || href.match("gif$")) {
$(page_overlay)
.addClass('active')
.html('<img src="' + src + '"/>');
} else {
window.location.href = href;
}
});
/* UI Stuff */
var project_container = document.getElementById('project-container');

2
src/templates/nodes/custom/blog/index_main_project.pug
View File

@@ -7,7 +7,7 @@
| {% block body %}
.container
#blog_container.cloud-blog
#blog_index-container
#blog_index-container.expand-image-links
| {{ blogmacros.render_blog_index(project, posts, can_create_blog_posts, api) }}
| {% endblock %}

19
src/templates/nodes/custom/post/view.pug
View File

@@ -58,27 +58,8 @@ link(href="{{ url_for('static_pillar', filename='assets/css/blog.css', v=1732017
| {% endblock %}
| {% block footer_scripts %}
script.
ProjectUtils.setProjectAttributes({projectId: "{{project._id}}", isProject: false, nodeId: '{{node._id}}'});
/* Expand images when their link points to a jpg/png/gif */
/* TODO: De-duplicate code from blog index */
var page_overlay = document.getElementById('page-overlay');
$('.blog_index-item .item-content a img').on('click', function (e) {
e.preventDefault();
var href = $(this).parent().attr('href').split("?")[0];
var src = $(this).attr('src');
if (href.match("jpg$") || href.match("png$") || href.match("gif$")) {
$(page_overlay)
.addClass('active')
.html('<img src="' + src + '"/>');
} else {
window.location.href = href;
}
});
/* UI Stuff */
var project_container = document.getElementById('project-container');

2
src/templates/nodes/custom/post/view_embed.pug
View File

@@ -2,7 +2,7 @@
#blog_container(class="{% if project and project._id == config.MAIN_PROJECT_ID %}cloud-blog{% endif %}")
#blog_post-container
#blog_post-container.expand-image-links
| {% if project and project._id == config.MAIN_PROJECT_ID %}
a.btn.btn-default.button-back(href="{{ url_for('projects.view', project_url=project.url) }}blog")
| Back to Blog

20
src/templates/nodes/custom/post/view_main_project.pug
View File

@@ -27,26 +27,6 @@ meta(property="og:image", content="{{ node.picture.thumbnail('l', api=api) }}")
| {% block footer_scripts %}
script.
hopToTop(); // Display jump to top button
/* Expand images when their link points to a jpg/png/gif */
/* TODO: De-duplicate code from view post */
var page_overlay = document.getElementById('page-overlay');
$('.blog_index-item .item-content a img').on('click', function (e) {
e.preventDefault();
var href = $(this).parent().attr('href').split("?")[0];
var src = $(this).attr('src');
if (href.match("jpg$") || href.match("png$") || href.match("gif$")) {
$(page_overlay)
.addClass('active')
.html('<img src="' + src + '"/>');
} else {
window.location.href = href;
}
});
| {% endblock %}