From f42334453c87c94ed8e21c996e9286d38d1d8f81 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sybren=20A=2E=20St=C3=BCvel?= Date: Fri, 29 Sep 2017 16:46:27 +0200 Subject: [PATCH] Deduplicated code for image expansion into the page overlay It now also supports WEBP links, and is compatible with Google Cloud Storage (which adds ?blablabla to links). --- src/scripts/tutti/8_expand_image.js | 18 +++++++++++++++++ src/templates/nodes/custom/blog/index.pug | 18 +---------------- .../nodes/custom/blog/index_main_project.pug | 2 +- src/templates/nodes/custom/post/view.pug | 19 ------------------ .../nodes/custom/post/view_embed.pug | 2 +- .../nodes/custom/post/view_main_project.pug | 20 ------------------- 6 files changed, 21 insertions(+), 58 deletions(-) create mode 100644 src/scripts/tutti/8_expand_image.js diff --git a/src/scripts/tutti/8_expand_image.js b/src/scripts/tutti/8_expand_image.js new file mode 100644 index 00000000..8baebc51 --- /dev/null +++ b/src/scripts/tutti/8_expand_image.js @@ -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 = $('').attr('src', src); + $('#page-overlay') + .addClass('active') + .html(overlay_img); + e.preventDefault(); + } + }); +}); diff --git a/src/templates/nodes/custom/blog/index.pug b/src/templates/nodes/custom/blog/index.pug index bb5d95d6..63f44f19 100644 --- a/src/templates/nodes/custom/blog/index.pug +++ b/src/templates/nodes/custom/blog/index.pug @@ -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(''); - } else { - window.location.href = href; - } - }); - /* UI Stuff */ var project_container = document.getElementById('project-container'); diff --git a/src/templates/nodes/custom/blog/index_main_project.pug b/src/templates/nodes/custom/blog/index_main_project.pug index b7a32d12..f8a748e4 100644 --- a/src/templates/nodes/custom/blog/index_main_project.pug +++ b/src/templates/nodes/custom/blog/index_main_project.pug @@ -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 %} diff --git a/src/templates/nodes/custom/post/view.pug b/src/templates/nodes/custom/post/view.pug index 8c09c30e..5824ba85 100644 --- a/src/templates/nodes/custom/post/view.pug +++ b/src/templates/nodes/custom/post/view.pug @@ -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(''); - } else { - window.location.href = href; - } - }); /* UI Stuff */ var project_container = document.getElementById('project-container'); diff --git a/src/templates/nodes/custom/post/view_embed.pug b/src/templates/nodes/custom/post/view_embed.pug index 589f68a5..06667089 100644 --- a/src/templates/nodes/custom/post/view_embed.pug +++ b/src/templates/nodes/custom/post/view_embed.pug @@ -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 diff --git a/src/templates/nodes/custom/post/view_main_project.pug b/src/templates/nodes/custom/post/view_main_project.pug index a22fda95..ad9ffc97 100644 --- a/src/templates/nodes/custom/post/view_main_project.pug +++ b/src/templates/nodes/custom/post/view_main_project.pug @@ -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(''); - } else { - window.location.href = href; - } - }); | {% endblock %}