From f2bfdce1d90be29279eaada3ec12aca68a7d42e1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=B6ren=20Weber?= Date: Sun, 29 Jan 2023 11:21:52 +0100 Subject: [PATCH] lightbox: switch to CSS-only solution #451 --- .../content/basics/migration/_index.en.md | 10 ++++++ exampleSite/content/cont/markdown.en.md | 6 ++-- exampleSite/content/more/credits/_index.en.md | 1 - layouts/_default/_markup/render-image.html | 1 + layouts/partials/footer.html | 1 - layouts/partials/shortcodes/image.html | 15 +++++--- layouts/partials/stylesheet.html | 1 - static/css/featherlight.min.css | 8 ----- static/css/ie.css | 2 +- static/css/theme.css | 36 ++++++++++++++----- static/css/variant.css | 2 +- static/js/featherlight.min.js | 9 ----- static/js/theme.js | 2 +- 13 files changed, 54 insertions(+), 40 deletions(-) delete mode 100644 static/css/featherlight.min.css delete mode 100644 static/js/featherlight.min.js diff --git a/exampleSite/content/basics/migration/_index.en.md b/exampleSite/content/basics/migration/_index.en.md index 6a9db29848..c0fdd7554e 100644 --- a/exampleSite/content/basics/migration/_index.en.md +++ b/exampleSite/content/basics/migration/_index.en.md @@ -18,6 +18,16 @@ This document shows you what's new in the latest release. For a detailed list of --- +## 5.11.0 (not yet released) + +- {{% badge style="note" title=" " %}}Change{{% /badge %}} The JavaScript code for handling image lightboxes (was [Featherlight](https://noelboss.github.io/featherlight)) was replaced by a CSS-only solution. + + This also changed the [lightbox effects]({{% relref "cont/markdown#lightbox" %}}) parameter from `featherlight=false` to `lightbox=false`. Nevertheless you don't need to change anything as the old name will be used as a fallback. + + As a further advantage, the image inside the lightbox now has its own URL and is therefore linkable. + +--- + ## 5.10.0 (2023-01-25) - {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} The [`attachments`]({{% relref "shortcodes/attachments" %}}), [`badge`]({{% relref "shortcodes/badge" %}}), [`button`]({{% relref "shortcodes/button" %}}) and [`notice`]({{% relref "shortcodes/notice" %}}) shortcodes have a new parameter `color` to set arbitrary CSS color values. diff --git a/exampleSite/content/cont/markdown.en.md b/exampleSite/content/cont/markdown.en.md index 3692ef82fa..630fc547dc 100644 --- a/exampleSite/content/cont/markdown.en.md +++ b/exampleSite/content/cont/markdown.en.md @@ -666,12 +666,12 @@ Add a query parameter `classes` to the link image to add CSS classes. Add some o #### Lightbox -Add the query parameter `featherlight=false` to the image link to disable the lightbox. +Add the query parameter `lightbox=false` to the image link to disable the lightbox. ````markdown -![Homercat](https://octodex.github.com/images/homercat.png?featherlight=false) +![Homercat](https://octodex.github.com/images/homercat.png?lightbox=false) ```` {{% notice style="secondary" icon="eye" title="Result" %}} -![Homercat](https://octodex.github.com/images/homercat.png?width=20vw&featherlight=false&classes=bg-white) +![Homercat](https://octodex.github.com/images/homercat.png?width=20vw&lightbox=false&classes=bg-white) {{% /notice %}} diff --git a/exampleSite/content/more/credits/_index.en.md b/exampleSite/content/more/credits/_index.en.md index e652704c70..6e10c462b9 100644 --- a/exampleSite/content/more/credits/_index.en.md +++ b/exampleSite/content/more/credits/_index.en.md @@ -15,7 +15,6 @@ Many thanks to [Andy Miller](https://github.com/rhukster) for initially creating - [autoComplete](https://github.com/Pixabay/JavaScript-autoComplete) - A lightweight and powerful vanilla JavaScript completion suggester - [clipboard.js](https://clipboardjs.com) - A modern approach to copy text to clipboard -- [Featherlight](https://noelboss.github.io/featherlight) - A lightweight jQuery lightbox plugin - [Font Awesome](https://fontawesome.com) - The internet's icon library and toolkit - [jQuery](https://jquery.com) - The "Write less, do more" JavaScript library - [jquery-svg-zoom-pan](https://github.com/DanielHoffmann/jquery-svg-pan-zoom) - A jQuery plugin to enable pan and zoom in SVG images diff --git a/layouts/_default/_markup/render-image.html b/layouts/_default/_markup/render-image.html index 500fc908ed..f7d656fa5a 100644 --- a/layouts/_default/_markup/render-image.html +++ b/layouts/_default/_markup/render-image.html @@ -3,4 +3,5 @@ "url" .Destination "title" .Title "alt" .Text + "ordinal" 0 ) }} \ No newline at end of file diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index cc25494770..5246e0b87e 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -6,7 +6,6 @@ {{- partial "output-partial.hugo" (dict "base" "menu" "page" . "parameter" . "outputFormat" $outputFormat) }} - {{- $wantsMathJax := or (.Page.Store.Get "hasMathJax") (and (.Page.Store.Get (printf "%sIsNested" $outputFormat)) (.Page.Store.Get "nestedHasMathJax")) }} {{- if $wantsMathJax }} {{- if isset .Params "mathjaxinitialize" }} diff --git a/layouts/partials/shortcodes/image.html b/layouts/partials/shortcodes/image.html index 49d8421769..1807b8b00b 100644 --- a/layouts/partials/shortcodes/image.html +++ b/layouts/partials/shortcodes/image.html @@ -2,8 +2,9 @@ {{- $url := .url }} {{- $title := .title }} {{- $alt := .alt }} +{{- $ordinal := .ordinal }} {{- $classes := slice }} -{{- $featherlight := true }} +{{- $lightbox := true }} {{- $height := "auto" }} {{- $width := "auto" }} {{- $dest_url := urls.Parse $url }} @@ -25,7 +26,7 @@ {{- if $dest_url.Query.Get "classes" }} {{- $classes = $classes | append (split ($dest_url.Query.Get "classes") ",") }} {{- end }} - {{- $featherlight = (ne ($dest_url.Query.Get "featherlight") "false") }} + {{- $lightbox = and (ne ($dest_url.Query.Get "lightbox") "false") (ne ($dest_url.Query.Get "featherlight") "false") }} {{- with $dest_url.Query.Get "height" }} {{ $height = . }} {{- end }} @@ -33,10 +34,14 @@ {{ $width = . }} {{- end }} {{- end }} -{{- if $featherlight }} - +{{- $fragment := printf "%d-%s" $ordinal ((trim (replace (replace (replace (replace (replace $url "=" "-") "&" "-") "?" "-") "." "-") "/" "-") "-") | safeURL | anchorize) }} +{{- if $lightbox }} + {{- end }} {{ $alt }} -{{- if $featherlight }} +{{- if $lightbox }} + + +{{ $alt }} {{- end }} \ No newline at end of file diff --git a/layouts/partials/stylesheet.html b/layouts/partials/stylesheet.html index b6d28a1ee5..38d92287fc 100644 --- a/layouts/partials/stylesheet.html +++ b/layouts/partials/stylesheet.html @@ -8,7 +8,6 @@ {{- $assetBusting := not .Site.Params.disableAssetsBusting }} {{ "" | safeHTML }} - diff --git a/static/css/featherlight.min.css b/static/css/featherlight.min.css deleted file mode 100644 index 058487f916..0000000000 --- a/static/css/featherlight.min.css +++ /dev/null @@ -1,8 +0,0 @@ -/** - * Featherlight - ultra slim jQuery lightbox - * Version 1.7.13 - http://noelboss.github.io/featherlight/ - * - * Copyright 2018, Noël Raoul Bossart (http://www.noelboss.com) - * MIT Licensed. -**/ -html.with-featherlight{overflow:hidden}.featherlight{display:none;position:fixed;top:0;right:0;bottom:0;left:0;z-index:2147483647;text-align:center;white-space:nowrap;cursor:pointer;background:#333;background:rgba(0,0,0,0)}.featherlight:last-of-type{background:rgba(0,0,0,.8)}.featherlight:before{content:'';display:inline-block;height:100%;vertical-align:middle}.featherlight .featherlight-content{position:relative;text-align:left;vertical-align:middle;display:inline-block;overflow:auto;padding:25px 25px 0;border-bottom:25px solid transparent;margin-left:5%;margin-right:5%;max-height:95%;background:#fff;cursor:auto;white-space:normal}.featherlight .featherlight-inner{display:block}.featherlight link.featherlight-inner,.featherlight script.featherlight-inner,.featherlight style.featherlight-inner{display:none}.featherlight .featherlight-close-icon{position:absolute;z-index:9999;top:0;right:0;line-height:25px;width:25px;cursor:pointer;text-align:center;font-family:Arial,sans-serif;background:#fff;background:rgba(255,255,255,.3);color:#000;border:0;padding:0}.featherlight .featherlight-close-icon::-moz-focus-inner{border:0;padding:0}.featherlight .featherlight-image{width:100%}.featherlight-iframe .featherlight-content{border-bottom:0;padding:0;-webkit-overflow-scrolling:touch}.featherlight iframe{border:0}.featherlight *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}@media only screen and (max-width:1024px){.featherlight .featherlight-content{margin-left:0;margin-right:0;max-height:98%;padding:10px 10px 0;border-bottom:10px solid transparent}}@media print{html.with-featherlight>*>:not(.featherlight){display:none}} \ No newline at end of file diff --git a/static/css/ie.css b/static/css/ie.css index 83d52d3f66..c6dce21117 100644 --- a/static/css/ie.css +++ b/static/css/ie.css @@ -329,7 +329,7 @@ background-color: #ffffff; /* var(--INTERNAL-MAIN-BG-color) */ } - div.featherlight .featherlight-content{ + .lightbox img{ background-color: #ffffff /* var(--INTERNAL-MAIN-BG-color); */ } diff --git a/static/css/theme.css b/static/css/theme.css index 983f100cd1..ada1b073f3 100644 --- a/static/css/theme.css +++ b/static/css/theme.css @@ -77,7 +77,6 @@ dd { max-width: 300px; position: fixed; width: 300px; - z-index: 80; } #header-wrapper { @@ -807,14 +806,6 @@ td { position: relative; } -.lightbox-active #body { - overflow: visible; -} - -.featherlight img { - margin: 0 !important; -} - #topbar { min-height: 3rem; position: relative; @@ -1717,3 +1708,30 @@ article ul li input[type="checkbox"]::before { article ul li input[type="checkbox"]:checked::before { transform: scale(1); } + +/* CSS Lightbox https://codepen.io/gschier/pen/kyRXVx */ +.lightbox { + align-items: center; + background: rgba(0, 0, 0, 0.8); + bottom: 0; + display: none; + justify-content: center; + left: 0; + position: fixed; + right: 0; + text-align: center; + top: 0; + white-space: nowrap; + z-index: 1999; +} + +.lightbox:target { + display: flex; +} + +.lightbox img { + max-height: 95%; + max-width: 95%; + overflow: auto; + padding: min(2vh, 2vw); +} diff --git a/static/css/variant.css b/static/css/variant.css index ed15e53490..e80559c613 100644 --- a/static/css/variant.css +++ b/static/css/variant.css @@ -332,7 +332,7 @@ table { background-color: var(--INTERNAL-MAIN-BG-color); } -div.featherlight .featherlight-content{ +.lightbox img{ background-color: var(--INTERNAL-MAIN-BG-color); } diff --git a/static/js/featherlight.min.js b/static/js/featherlight.min.js deleted file mode 100644 index 062e823ff0..0000000000 --- a/static/js/featherlight.min.js +++ /dev/null @@ -1,9 +0,0 @@ -/** - * Featherlight - ultra slim jQuery lightbox - * Version 1.7.13 - http://noelboss.github.io/featherlight/ - * - * Copyright 2018, Noël Raoul Bossart (http://www.noelboss.com) - * MIT Licensed. -**/ -// Modified by OZ -> https://github.com/noelboss/featherlight/issues/317 -!function(u){"use strict";if(void 0!==u)if(u.fn.jquery.match(/-ajax/))"console"in window&&window.console.info("Featherlight needs regular jQuery, not the slim version.");else{var r=[],i=function(t){return r=u.grep(r,function(e){return e!==t&&0','
','",'
'+n.loading+"
","
",""].join("")),o="."+n.namespace+"-close"+(n.otherClose?","+n.otherClose:"");return n.$instance=i.clone().addClass(n.variant),n.$instance.on(n.closeTrigger+"."+n.namespace,function(e){if(!e.isDefaultPrevented()){var t=u(e.target);("background"===n.closeOnClick&&t.is("."+n.namespace)||"anywhere"===n.closeOnClick||t.closest(o).length)&&(n.close(e),e.preventDefault())}}),this},getContent:function(){if(!1!==this.persist&&this.$content)return this.$content;var t=this,e=this.constructor.contentFilters,n=function(e){return t.$currentTarget&&t.$currentTarget.attr(e)},r=n(t.targetAttr),i=t.target||r||"",o=e[t.type];if(!o&&i in e&&(o=e[i],i=t.target&&r),i=i||n("href")||"",!o)for(var a in e)t[a]&&(o=e[a],i=t[a]);if(!o){var s=i;if(i=null,u.each(t.contentFilters,function(){return(o=e[this]).test&&(i=o.test(s)),!i&&o.regex&&s.match&&s.match(o.regex)&&(i=s),!i}),!i)return"console"in window&&window.console.error("Featherlight: no content filter found "+(s?' for "'+s+'"':" (no target specified)")),!1}return o.process.call(t,i)},setContent:function(e){return this.$instance.removeClass(this.namespace+"-loading"),this.$instance.toggleClass(this.namespace+"-iframe",e.is("iframe")),this.$instance.find("."+this.namespace+"-inner").not(e).slice(1).remove().end().replaceWith(u.contains(this.$instance[0],e[0])?"":e),this.$content=e.addClass(this.namespace+"-inner"),this},open:function(t){var n=this;if(n.$instance.hide().appendTo(n.root),!(t&&t.isDefaultPrevented()||!1===n.beforeOpen(t))){t&&t.preventDefault();var e=n.getContent();if(e)return r.push(n),s(!0),n.$instance.fadeIn(n.openSpeed),n.beforeContent(t),u.when(e).always(function(e){n.setContent(e),n.afterContent(t)}).then(n.$instance.promise()).done(function(){n.afterOpen(t)})}return n.$instance.detach(),u.Deferred().reject().promise()},close:function(e){var t=this,n=u.Deferred();return!1===t.beforeClose(e)?n.reject():(0===i(t).length&&s(!1),t.$instance.fadeOut(t.closeSpeed,function(){t.$instance.detach(),t.afterClose(e),n.resolve()})),n.promise()},resize:function(e,t){if(e&&t&&(this.$content.css("width","").css("height",""),this.$content.parent().width()');return n.onload=function(){r.naturalWidth=n.width,r.naturalHeight=n.height,t.resolve(r)},n.onerror=function(){t.reject(r)},n.src=e,t.promise()}},html:{regex:/^\s*<[\w!][^<]*>/,process:function(e){return u(e)}},ajax:{regex:/./,process:function(e){var n=u.Deferred(),r=u("
").load(e,function(e,t){"error"!==t&&n.resolve(r.contents()),n.fail()});return n.promise()}},iframe:{process:function(e){var t=new u.Deferred,n=u("