From 865ecbcf009b8910a7309c2ebbc59c16f4fd4f69 Mon Sep 17 00:00:00 2001 From: Chris Warrick Date: Wed, 11 Nov 2020 02:49:49 +0100 Subject: [PATCH] Fix #3472, limit baguetteBox to with Fix clicking on links to image files. baguetteBox now requires a link (````) to have an ```` as a child in order to make the link activate the lightbox. --- CHANGES.txt | 3 +++ docs/manual.rst | 4 +--- nikola/data/themes/base-jinja/templates/base.tmpl | 4 +--- nikola/data/themes/base/templates/base.tmpl | 4 +--- nikola/data/themes/bootblog4-jinja/templates/base.tmpl | 4 +--- nikola/data/themes/bootblog4/templates/base.tmpl | 4 +--- nikola/data/themes/bootstrap4-jinja/templates/base.tmpl | 4 +--- nikola/data/themes/bootstrap4/templates/base.tmpl | 4 +--- npm_assets/README-baguetteBox.md | 6 ++++++ npm_assets/node_modules/baguettebox.js/dist/baguetteBox.js | 4 ++-- .../node_modules/baguettebox.js/dist/baguetteBox.min.js | 2 +- scripts/update-npm-assets.sh | 3 +++ 12 files changed, 22 insertions(+), 24 deletions(-) create mode 100644 npm_assets/README-baguetteBox.md diff --git a/CHANGES.txt b/CHANGES.txt index ed810311eb..cf98b2cb3d 100644 --- a/CHANGES.txt +++ b/CHANGES.txt @@ -22,6 +22,9 @@ Bugfixes * Also fix symlinks when installing from source with pip; if possible, enable Developer Mode and run ``git config --global core.symlinks true`` before cloning the Nikola repo +* Fix clicking on links to image files. baguetteBox now requires a + link (````) to have an ```` as a child in order to make the + link activate the lightbox. (Issue #3472) * Fix ``LINK_CHECK_WHITELIST`` having issues due to mixing Unicode and bytestrings (Issue #3466) * Add support for ``nbconvert>=6.0.0`` (Issue #3457) diff --git a/docs/manual.rst b/docs/manual.rst index ba2809ce02..64783003ca 100644 --- a/docs/manual.rst +++ b/docs/manual.rst @@ -2000,9 +2000,7 @@ and put images there. Nikola will take care of creating thumbnails, index page, If you click on images on a gallery, or on images with links in post, you will see a bigger image, thanks to the excellent `baguetteBox `_. If don’t want this behavior, add an -``.islink`` class to your link. (The behavior is caused by ```` if you need to use it outside of galleries and reST -thumbnails.) +``.islink`` class to your link. The gallery pages are generated using the ``gallery.tmpl`` template, and you can customize it there (you could switch to another lightbox instead of baguetteBox, change diff --git a/nikola/data/themes/base-jinja/templates/base.tmpl b/nikola/data/themes/base-jinja/templates/base.tmpl index 23376eb5c1..8b057dbe05 100644 --- a/nikola/data/themes/base-jinja/templates/base.tmpl +++ b/nikola/data/themes/base-jinja/templates/base.tmpl @@ -32,9 +32,7 @@ {{ body_end }} {{ template_hooks['body_end']() }} diff --git a/nikola/data/themes/base/templates/base.tmpl b/nikola/data/themes/base/templates/base.tmpl index ace9baa560..f071c955b0 100644 --- a/nikola/data/themes/base/templates/base.tmpl +++ b/nikola/data/themes/base/templates/base.tmpl @@ -32,9 +32,7 @@ ${template_hooks['extra_head']()} ${body_end} ${template_hooks['body_end']()} diff --git a/nikola/data/themes/bootblog4-jinja/templates/base.tmpl b/nikola/data/themes/bootblog4-jinja/templates/base.tmpl index 054c583f15..0adf4471e9 100644 --- a/nikola/data/themes/bootblog4-jinja/templates/base.tmpl +++ b/nikola/data/themes/bootblog4-jinja/templates/base.tmpl @@ -96,9 +96,7 @@ {{ body_end }} {{ template_hooks['body_end']() }} diff --git a/nikola/data/themes/bootblog4/templates/base.tmpl b/nikola/data/themes/bootblog4/templates/base.tmpl index 022c5f3393..69b9d30c92 100644 --- a/nikola/data/themes/bootblog4/templates/base.tmpl +++ b/nikola/data/themes/bootblog4/templates/base.tmpl @@ -96,9 +96,7 @@ ${base.late_load_js()} ${body_end} ${template_hooks['body_end']()} diff --git a/nikola/data/themes/bootstrap4-jinja/templates/base.tmpl b/nikola/data/themes/bootstrap4-jinja/templates/base.tmpl index c2f12e9153..0748bb2afd 100644 --- a/nikola/data/themes/bootstrap4-jinja/templates/base.tmpl +++ b/nikola/data/themes/bootstrap4-jinja/templates/base.tmpl @@ -97,9 +97,7 @@ bg-dark {{ body_end }} {{ template_hooks['body_end']() }} diff --git a/nikola/data/themes/bootstrap4/templates/base.tmpl b/nikola/data/themes/bootstrap4/templates/base.tmpl index e1959c7ae2..21b6141694 100644 --- a/nikola/data/themes/bootstrap4/templates/base.tmpl +++ b/nikola/data/themes/bootstrap4/templates/base.tmpl @@ -97,9 +97,7 @@ ${base.late_load_js()} ${body_end} ${template_hooks['body_end']()} diff --git a/npm_assets/README-baguetteBox.md b/npm_assets/README-baguetteBox.md new file mode 100644 index 0000000000..788fb723f6 --- /dev/null +++ b/npm_assets/README-baguetteBox.md @@ -0,0 +1,6 @@ +BaguetteBox requires patching to make links to image files work. + +To patch: + +1. `patch node_modules/baguettebox.js/dist/baguetteBox.js baguetteBox-links-with-images-only.patch` +2. Use to create `baguetteBox.min.js` (make sure the license comment is preserved) diff --git a/npm_assets/node_modules/baguettebox.js/dist/baguetteBox.js b/npm_assets/node_modules/baguettebox.js/dist/baguetteBox.js index 3288636c2a..712dfbdfa8 100644 --- a/npm_assets/node_modules/baguettebox.js/dist/baguetteBox.js +++ b/npm_assets/node_modules/baguettebox.js/dist/baguetteBox.js @@ -194,9 +194,9 @@ tagsNodeList = galleryElement.getElementsByTagName('a'); } - // Filter 'a' elements from those not linking to images + // Filter 'a' elements from those not linking to images, and not containing tags (PATCHED) tagsNodeList = [].filter.call(tagsNodeList, function(element) { - if (element.className.indexOf(userOptions && userOptions.ignoreClass) === -1) { + if (element.className.indexOf(userOptions && userOptions.ignoreClass) === -1 && element.getElementsByTagName("img").length > 0) { return regex.test(element.href); } }); diff --git a/npm_assets/node_modules/baguettebox.js/dist/baguetteBox.min.js b/npm_assets/node_modules/baguettebox.js/dist/baguetteBox.min.js index a6c7b04b49..6af785d43a 100644 --- a/npm_assets/node_modules/baguettebox.js/dist/baguetteBox.min.js +++ b/npm_assets/node_modules/baguettebox.js/dist/baguetteBox.min.js @@ -4,4 +4,4 @@ * @version 1.11.1 * @url https://github.com/feimosi/baguetteBox.js */ -!function(e,t){"use strict";"function"==typeof define&&define.amd?define(t):"object"==typeof exports?module.exports=t():e.baguetteBox=t()}(this,function(){"use strict";var r,l,u,c,d,f='',g='',p='',b={},v={captions:!0,buttons:"auto",fullScreen:!1,noScrollbars:!1,bodyClass:"baguetteBox-open",titleTag:!1,async:!1,preload:2,animation:"slideIn",afterShow:null,afterHide:null,onChange:null,overlayBackgroundColor:"rgba(0,0,0,.8)"},m={},h=[],o=0,n=!1,i={},a=!1,y=/.+\.(gif|jpe?g|png|webp)/i,w={},k=[],s=null,x=function(e){-1!==e.target.id.indexOf("baguette-img")&&j()},E=function(e){e.stopPropagation?e.stopPropagation():e.cancelBubble=!0,D()},C=function(e){e.stopPropagation?e.stopPropagation():e.cancelBubble=!0,X()},B=function(e){e.stopPropagation?e.stopPropagation():e.cancelBubble=!0,j()},T=function(e){i.count++,1
',b.captions&&s){var u=J("figcaption");u.id="baguetteBox-figcaption-"+t,u.innerHTML=s,l.appendChild(u)}e.appendChild(l);var c=J("img");c.onload=function(){var e=document.querySelector("#baguette-img-"+t+" .baguetteBox-spinner");l.removeChild(e),!b.async&&n&&n()},c.setAttribute("src",r),c.alt=a&&a.alt||"",b.titleTag&&s&&(c.title=s),l.appendChild(c),b.async&&n&&n()}}function X(){return M(o+1)}function D(){return M(o-1)}function M(e,t){return!n&&0<=e&&e=k.length?(b.animation&&O("right"),!1):(q(o=e,function(){z(o),V(o)}),R(),b.onChange&&b.onChange(o,k.length),!0)}function O(e){l.className="bounce-from-"+e,setTimeout(function(){l.className=""},400)}function R(){var e=100*-o+"%";"fadeIn"===b.animation?(l.style.opacity=0,setTimeout(function(){m.transforms?l.style.transform=l.style.webkitTransform="translate3d("+e+",0,0)":l.style.left=e,l.style.opacity=1},400)):m.transforms?l.style.transform=l.style.webkitTransform="translate3d("+e+",0,0)":l.style.left=e}function z(e){e-o>=b.preload||q(e+1,function(){z(e+1)})}function V(e){o-e>=b.preload||q(e-1,function(){V(e-1)})}function U(e,t,n,o){e.addEventListener?e.addEventListener(t,n,o):e.attachEvent("on"+t,function(e){(e=e||window.event).target=e.target||e.srcElement,n(e)})}function W(e,t,n,o){e.removeEventListener?e.removeEventListener(t,n,o):e.detachEvent("on"+t,n)}function G(e){return document.getElementById(e)}function J(e){return document.createElement(e)}return[].forEach||(Array.prototype.forEach=function(e,t){for(var n=0;n1&&(p.multitouch=!0),p.startX=e.changedTouches[0].pageX,p.startY=e.changedTouches[0].pageY},B=function(e){if(!m&&!p.multitouch){e.preventDefault?e.preventDefault():e.returnValue=!1;var t=e.touches[0]||e.changedTouches[0];t.pageX-p.startX>40?(m=!0,q()):t.pageX-p.startX<-40?(m=!0,j()):p.startY-t.pageY>100&&I()}},T=function(){p.count--,p.count<=0&&(p.multitouch=!1),m=!1},N=function(){T()},L=function(t){"block"===e.style.display&&e.contains&&!e.contains(t.target)&&(t.stopPropagation(),H())};function A(e){if(v.hasOwnProperty(e)){var t=v[e].galleries;[].forEach.call(t,function(e){[].forEach.call(e,function(e){V(e.imageElement,"click",e.eventHandler)}),d===e&&(d=[])}),delete v[e]}}function P(e){switch(e.keyCode){case 37:q();break;case 39:j();break;case 27:I();break;case 36:!function(e){e&&e.preventDefault();X(0)}(e);break;case 35:!function(e){e&&e.preventDefault();X(d.length-1)}(e)}}function S(i,a){if(d!==i){for(d=i,function(i){i||(i={});for(var a in u)r[a]=u[a],"undefined"!=typeof i[a]&&(r[a]=i[a]);t.style.transition=t.style.webkitTransition="fadeIn"===r.animation?"opacity .4s ease":"slideIn"===r.animation?"":"none","auto"===r.buttons&&("ontouchstart"in window||1===d.length)&&(r.buttons=!1);n.style.display=o.style.display=r.buttons?"":"none";try{e.style.backgroundColor=r.overlayBackgroundColor}catch(e){}}(a);t.firstChild;)t.removeChild(t.firstChild);h.length=0;for(var s,l=[],c=[],f=0;f
',r.captions&&s){var c=W("figcaption");c.id="baguetteBox-figcaption-"+e,c.innerHTML=s,u.appendChild(c)}n.appendChild(u);var f=W("img");f.onload=function(){var n=document.querySelector("#baguette-img-"+e+" .baguetteBox-spinner");u.removeChild(n),!r.async&&t&&t()},f.setAttribute("src",l),f.alt=a&&a.alt||"",r.titleTag&&s&&(f.title=s),u.appendChild(f),r.async&&t&&t()}}function j(){return X(f+1)}function q(){return X(f-1)}function X(e,t){return!g&&e>=0&&e=h.length?(r.animation&&D("right"),!1):(Y(f=e,function(){O(f),R(f)}),M(),r.onChange&&r.onChange(f,h.length),!0)}function D(e){t.className="bounce-from-"+e,setTimeout(function(){t.className=""},400)}function M(){var e=100*-f+"%";"fadeIn"===r.animation?(t.style.opacity=0,setTimeout(function(){c.transforms?t.style.transform=t.style.webkitTransform="translate3d("+e+",0,0)":t.style.left=e,t.style.opacity=1},400)):c.transforms?t.style.transform=t.style.webkitTransform="translate3d("+e+",0,0)":t.style.left=e}function O(e){e-f>=r.preload||Y(e+1,function(){O(e+1)})}function R(e){f-e>=r.preload||Y(e-1,function(){R(e-1)})}function z(e,t,n,o){e.addEventListener?e.addEventListener(t,n,o):e.attachEvent("on"+t,function(e){(e=e||window.event).target=e.target||e.srcElement,n(e)})}function V(e,t,n,o){e.removeEventListener?e.removeEventListener(t,n,o):e.detachEvent("on"+t,n)}function U(e){return document.getElementById(e)}function W(e){return document.createElement(e)}return[].forEach||(Array.prototype.forEach=function(e,t){for(var n=0;n0)return b.test(e.href)})).length){var i=[];[].forEach.call(n,function(e,n){var o=function(e){e.preventDefault?e.preventDefault():e.returnValue=!1,S(i,t),F(n)},a={eventHandler:o,imageElement:e};z(e,"click",o),i.push(a)}),o.galleries.push(i)}}),o.galleries}(r,u)},show:X,showNext:j,showPrevious:q,hide:I,destroy:function(){var a,s;a=c.passiveEvents?{passive:!1}:null,s=c.passiveEvents?{passive:!0}:null,V(e,"click",w),V(n,"click",k),V(o,"click",E),V(i,"click",x),V(t,"contextmenu",N),V(e,"touchstart",C,s),V(e,"touchmove",B,a),V(e,"touchend",T),V(document,"focus",L,!0),function(){for(var e in v)v.hasOwnProperty(e)&&A(e)}(),V(document,"keydown",P),document.getElementsByTagName("body")[0].removeChild(document.getElementById("baguetteBox-overlay")),v={},d=[],f=0}}}); \ No newline at end of file diff --git a/scripts/update-npm-assets.sh b/scripts/update-npm-assets.sh index b0fdfdc905..b7da0a5927 100755 --- a/scripts/update-npm-assets.sh +++ b/scripts/update-npm-assets.sh @@ -53,4 +53,7 @@ popd scripts/generate_symlinked_list.sh +# Verify baguetteBox patch +grep PATCHED npm_assets/node_modules/baguettebox.js/dist/baguetteBox.js > /dev/null || printf '%b' '\033[1;31mWARNING: baguetteBox must be manually patched (in both unminified and minified versions), see npm_assets/baguetteBox-links-with-images-only.patch\033[0m\n' + # vim:tw=0