From a7917968e29e668fa7f9aa45fa93f6663c49a747 Mon Sep 17 00:00:00 2001 From: Andrew Williams Date: Thu, 22 Feb 2024 09:37:34 +0000 Subject: [PATCH] Add carousel gallery shortcode --- .../lhs-retro/layouts/shortcodes/gallery.html | 1 + themes/lhs/assets/js/bulma-carousel.min.js | 1 + themes/lhs/assets/sass/bulma-carousel.sass | 145 ++++++++++++++++++ themes/lhs/assets/sass/leighhack.scss | 3 + themes/lhs/layouts/partials/foot.html | 17 +- themes/lhs/layouts/shortcodes/gallery.html | 7 + themes/lhs/layouts/shortcodes/image.html | 8 +- 7 files changed, 177 insertions(+), 5 deletions(-) create mode 100644 themes/lhs-retro/layouts/shortcodes/gallery.html create mode 100644 themes/lhs/assets/js/bulma-carousel.min.js create mode 100644 themes/lhs/assets/sass/bulma-carousel.sass create mode 100644 themes/lhs/layouts/shortcodes/gallery.html diff --git a/themes/lhs-retro/layouts/shortcodes/gallery.html b/themes/lhs-retro/layouts/shortcodes/gallery.html new file mode 100644 index 0000000..88c822a --- /dev/null +++ b/themes/lhs-retro/layouts/shortcodes/gallery.html @@ -0,0 +1 @@ +{{ .Inner }} \ No newline at end of file diff --git a/themes/lhs/assets/js/bulma-carousel.min.js b/themes/lhs/assets/js/bulma-carousel.min.js new file mode 100644 index 0000000..5fff069 --- /dev/null +++ b/themes/lhs/assets/js/bulma-carousel.min.js @@ -0,0 +1 @@ +!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.bulmaCarousel=e():t.bulmaCarousel=e()}("undefined"!=typeof self?self:this,function(){return function(i){var n={};function s(t){if(n[t])return n[t].exports;var e=n[t]={i:t,l:!1,exports:{}};return i[t].call(e.exports,e,e.exports,s),e.l=!0,e.exports}return s.m=i,s.c=n,s.d=function(t,e,i){s.o(t,e)||Object.defineProperty(t,e,{configurable:!1,enumerable:!0,get:i})},s.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return s.d(e,"a",e),e},s.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},s.p="",s(s.s=5)}([function(t,e,i){"use strict";i.d(e,"d",function(){return s}),i.d(e,"e",function(){return r}),i.d(e,"b",function(){return o}),i.d(e,"c",function(){return a}),i.d(e,"a",function(){return l});var n=i(2),s=function(e,t){(t=Array.isArray(t)?t:t.split(" ")).forEach(function(t){e.classList.remove(t)})},r=function(t){return t.getBoundingClientRect().width||t.offsetWidth},o=function(t){return t.getBoundingClientRect().height||t.offsetHeight},a=function(t){var e=1=t._x&&this._x<=e._x&&this._y>=t._y&&this._y<=e._y}},{key:"constrain",value:function(t,e){if(t._x>e._x||t._y>e._y)return this;var i=this._x,n=this._y;return null!==t._x&&(i=Math.max(i,t._x)),null!==e._x&&(i=Math.min(i,e._x)),null!==t._y&&(n=Math.max(n,t._y)),null!==e._y&&(n=Math.min(n,e._y)),new s(i,n)}},{key:"reposition",value:function(t){t.style.top=this._y+"px",t.style.left=this._x+"px"}},{key:"toString",value:function(){return"("+this._x+","+this._y+")"}},{key:"x",get:function(){return this._x},set:function(){var t=0this.state.length-this.slidesToShow&&!this.options.centerMode?this.state.next=this.state.index:this.state.next=this.state.index+this.slidesToScroll,this.show()}},{key:"previous",value:function(){this.options.loop||this.options.infinite||0!==this.state.index?this.state.next=this.state.index-this.slidesToScroll:this.state.next=this.state.index,this.show()}},{key:"start",value:function(){this._autoplay.start()}},{key:"pause",value:function(){this._autoplay.pause()}},{key:"stop",value:function(){this._autoplay.stop()}},{key:"show",value:function(t){var e=1this.options.slidesToShow&&(this.options.slidesToScroll=this.slidesToShow),this._breakpoint.init(),this.state.index>=this.state.length&&0!==this.state.index&&(this.state.index=this.state.index-this.slidesToScroll),this.state.length<=this.slidesToShow&&(this.state.index=0),this._ui.wrapper.appendChild(this._navigation.init().render()),this._ui.wrapper.appendChild(this._pagination.init().render()),this.options.navigationSwipe?this._swipe.bindEvents():this._swipe._bindEvents(),this._breakpoint.apply(),this._slides.forEach(function(t){return e._ui.container.appendChild(t)}),this._transitioner.init().apply(!0,this._setHeight.bind(this)),this.options.autoplay&&this._autoplay.init().start()}},{key:"destroy",value:function(){var e=this;this._unbindEvents(),this._items.forEach(function(t){e.element.appendChild(t)}),this.node.remove()}},{key:"id",get:function(){return this._id}},{key:"index",set:function(t){this._index=t},get:function(){return this._index}},{key:"length",set:function(t){this._length=t},get:function(){return this._length}},{key:"slides",get:function(){return this._slides},set:function(t){this._slides=t}},{key:"slidesToScroll",get:function(){return"translate"===this.options.effect?this._breakpoint.getSlidesToScroll():1}},{key:"slidesToShow",get:function(){return"translate"===this.options.effect?this._breakpoint.getSlidesToShow():1}},{key:"direction",get:function(){return"rtl"===this.element.dir.toLowerCase()||"rtl"===this.element.style.direction?"rtl":"ltr"}},{key:"wrapper",get:function(){return this._ui.wrapper}},{key:"wrapperWidth",get:function(){return this._wrapperWidth||0}},{key:"container",get:function(){return this._ui.container}},{key:"containerWidth",get:function(){return this._containerWidth||0}},{key:"slideWidth",get:function(){return this._slideWidth||0}},{key:"transitioner",get:function(){return this._transitioner}}],[{key:"attach",value:function(){var i=this,t=0>t/4).toString(16)})}},function(t,e,i){"use strict";var n=i(3),s=i(8),r=function(){function n(t,e){for(var i=0;i=t.slider.state.length-t.slider.slidesToShow&&!t.slider.options.loop&&!t.slider.options.infinite?t.stop():t.slider.next())},this.slider.options.autoplaySpeed))}},{key:"stop",value:function(){this._interval=clearInterval(this._interval),this.emit("stop",this)}},{key:"pause",value:function(){var t=this,e=0parseInt(e.changePoint,10)}),this._currentBreakpoint=this._getActiveBreakpoint(),this}},{key:"destroy",value:function(){this._unbindEvents()}},{key:"_bindEvents",value:function(){window.addEventListener("resize",this[s]),window.addEventListener("orientationchange",this[s])}},{key:"_unbindEvents",value:function(){window.removeEventListener("resize",this[s]),window.removeEventListener("orientationchange",this[s])}},{key:"_getActiveBreakpoint",value:function(){var t=!0,e=!1,i=void 0;try{for(var n,s=this.options.breakpoints[Symbol.iterator]();!(t=(n=s.next()).done);t=!0){var r=n.value;if(r.changePoint>=window.innerWidth)return r}}catch(t){e=!0,i=t}finally{try{!t&&s.return&&s.return()}finally{if(e)throw i}}return this._defaultBreakpoint}},{key:"getSlidesToShow",value:function(){return this._currentBreakpoint?this._currentBreakpoint.slidesToShow:this._defaultBreakpoint.slidesToShow}},{key:"getSlidesToScroll",value:function(){return this._currentBreakpoint?this._currentBreakpoint.slidesToScroll:this._defaultBreakpoint.slidesToScroll}},{key:"apply",value:function(){this.slider.state.index>=this.slider.state.length&&0!==this.slider.state.index&&(this.slider.state.index=this.slider.state.index-this._currentBreakpoint.slidesToScroll),this.slider.state.length<=this._currentBreakpoint.slidesToShow&&(this.slider.state.index=0),this.options.loop&&this.slider._loop.init().apply(),this.options.infinite&&this.slider._infinite.init().apply(),this.slider._setDimensions(),this.slider._transitioner.init().apply(!0,this.slider._setHeight.bind(this.slider)),this.slider._setClasses(),this.slider._navigation.refresh(),this.slider._pagination.refresh()}},{key:s,value:function(t){var e=this._getActiveBreakpoint();e.slidesToShow!==this._currentBreakpoint.slidesToShow&&(this._currentBreakpoint=e,this.apply())}}]),e}();e.a=r},function(t,e,i){"use strict";var n=function(){function n(t,e){for(var i=0;ithis.slider.state.length-1-this._infiniteCount;i-=1)e=i-1,t.unshift(this._cloneSlide(this.slider.slides[e],e-this.slider.state.length));for(var n=[],s=0;s=this.slider.state.length?(this.slider.state.index=this.slider.state.next=this.slider.state.next-this.slider.state.length,this.slider.transitioner.apply(!0)):this.slider.state.next<0&&(this.slider.state.index=this.slider.state.next=this.slider.state.length+this.slider.state.next,this.slider.transitioner.apply(!0)))}},{key:"_cloneSlide",value:function(t,e){var i=t.cloneNode(!0);return i.dataset.sliderIndex=e,i.dataset.cloned=!0,(i.querySelectorAll("[id]")||[]).forEach(function(t){t.setAttribute("id","")}),i}}]),e}();e.a=s},function(t,e,i){"use strict";var n=i(12),s=function(){function n(t,e){for(var i=0;ithis.slider.state.length-this.slider.slidesToShow&&Object(n.a)(this.slider._slides[this.slider.state.length-1],this.slider.wrapper)?this.slider.state.next=0:this.slider.state.next=Math.min(Math.max(this.slider.state.next,0),this.slider.state.length-this.slider.slidesToShow):this.slider.state.next=0:this.slider.state.next<=0-this.slider.slidesToScroll?this.slider.state.next=this.slider.state.length-this.slider.slidesToShow:this.slider.state.next=0)}}]),e}();e.a=r},function(t,e,i){"use strict";i.d(e,"a",function(){return n});var n=function(t,e){var i=t.getBoundingClientRect();return e=e||document.documentElement,0<=i.top&&0<=i.left&&i.bottom<=(window.innerHeight||e.clientHeight)&&i.right<=(window.innerWidth||e.clientWidth)}},function(t,e,i){"use strict";var n=i(14),s=i(1),r=function(){function n(t,e){for(var i=0;ithis.slider.slidesToShow?(this._ui.previous.classList.remove("is-hidden"),this._ui.next.classList.remove("is-hidden"),0===this.slider.state.next?(this._ui.previous.classList.add("is-hidden"),this._ui.next.classList.remove("is-hidden")):this.slider.state.next>=this.slider.state.length-this.slider.slidesToShow&&!this.slider.options.centerMode?(this._ui.previous.classList.remove("is-hidden"),this._ui.next.classList.add("is-hidden")):this.slider.state.next>=this.slider.state.length-1&&this.slider.options.centerMode&&(this._ui.previous.classList.remove("is-hidden"),this._ui.next.classList.add("is-hidden"))):(this._ui.previous.classList.add("is-hidden"),this._ui.next.classList.add("is-hidden")))}},{key:"render",value:function(){return this.node}}]),e}();e.a=o},function(t,e,i){"use strict";e.a=function(t){return'
'+t.previous+'
\n
'+t.next+"
"}},function(t,e,i){"use strict";var n=i(16),s=i(17),r=i(1),o=function(){function n(t,e){for(var i=0;ithis.slider.slidesToShow){for(var t=0;t<=this._count;t++){var e=document.createRange().createContextualFragment(Object(s.a)()).firstChild;e.dataset.index=t*this.slider.slidesToScroll,this._pages.push(e),this._ui.container.appendChild(e)}this._bindEvents()}}},{key:"onPageClick",value:function(t){this._supportsPassive||t.preventDefault(),this.slider.state.next=t.currentTarget.dataset.index,this.slider.show()}},{key:"onResize",value:function(){this._draw()}},{key:"refresh",value:function(){var e=this,t=void 0;(t=this.slider.options.infinite?Math.ceil(this.slider.state.length-1/this.slider.slidesToScroll):Math.ceil((this.slider.state.length-this.slider.slidesToShow)/this.slider.slidesToScroll))!==this._count&&(this._count=t,this._draw()),this._pages.forEach(function(t){t.classList.remove("is-active"),parseInt(t.dataset.index,10)===e.slider.state.next%e.slider.state.length&&t.classList.add("is-active")})}},{key:"render",value:function(){return this.node}}]),e}();e.a=a},function(t,e,i){"use strict";e.a=function(){return'
'}},function(t,e,i){"use strict";e.a=function(){return'
'}},function(t,e,i){"use strict";var n=i(4),s=i(1),r=function(){function n(t,e){for(var i=0;iMath.abs(this._lastTranslate.y)&&(this._supportsPassive||t.preventDefault(),t.stopPropagation())}}},{key:"onStopDrag",value:function(t){this._origin&&this._lastTranslate&&(Math.abs(this._lastTranslate.x)>.2*this.width?this._lastTranslate.x<0?this.slider.next():this.slider.previous():this.slider.show(!0)),this._origin=null,this._lastTranslate=null}}]),e}();e.a=o},function(t,e,i){"use strict";var n=i(20),s=i(21),r=function(){function n(t,e){for(var i=0;it.x?(s.x=0,this.slider.state.next=0):this.options.vertical&&Math.abs(this._position.y)>t.y&&(s.y=0,this.slider.state.next=0)),this._position.x=s.x,this._position.y=s.y,this.options.centerMode&&(this._position.x=this._position.x+this.slider.wrapperWidth/2-Object(o.e)(i)/2),"rtl"===this.slider.direction&&(this._position.x=-this._position.x,this._position.y=-this._position.y),this.slider.container.style.transform="translate3d("+this._position.x+"px, "+this._position.y+"px, 0)",n.x>t.x&&this.slider.transitioner.end()}}},{key:"onTransitionEnd",value:function(t){"translate"===this.options.effect&&(this.transitioner.isAnimating()&&t.target==this.slider.container&&this.options.infinite&&this.slider._infinite.onTransitionEnd(t),this.transitioner.end())}}]),n}();e.a=n},function(t,e,i){"use strict";e.a={initialSlide:0,slidesToScroll:1,slidesToShow:1,navigation:!0,navigationKeys:!0,navigationSwipe:!0,pagination:!0,loop:!1,infinite:!1,effect:"translate",duration:300,timing:"ease",autoplay:!1,autoplaySpeed:3e3,pauseOnHover:!0,breakpoints:[{changePoint:480,slidesToShow:1,slidesToScroll:1},{changePoint:640,slidesToShow:2,slidesToScroll:2},{changePoint:768,slidesToShow:3,slidesToScroll:3}],onReady:null,icons:{previous:'\n \n ',next:'\n \n '}}},function(t,e,i){"use strict";e.a=function(t){return'
\n
\n
'}},function(t,e,i){"use strict";e.a=function(){return'
'}}]).default}); \ No newline at end of file diff --git a/themes/lhs/assets/sass/bulma-carousel.sass b/themes/lhs/assets/sass/bulma-carousel.sass new file mode 100644 index 0000000..18ff7c4 --- /dev/null +++ b/themes/lhs/assets/sass/bulma-carousel.sass @@ -0,0 +1,145 @@ +.slider + position: relative + width: 100% + // overflow: hidden +.slider-container + display: flex + flex-wrap: nowrap + flex-direction: row + overflow: hidden + transform: translate3d(0, 0, 0) + min-height: 100% + &.is-vertical + flex-direction: column + .slider-item + flex: none + .image + &.is-covered + img + object-fit: cover + object-position: center center + height: 100% + width: 100% + // Responsive embedded objects + .video-container + height: 0 + padding-bottom: 0 + padding-top: 56.25% // ratio 16:9 + margin: 0 + position: relative + &.is-1by1, + &.is-square + padding-top: 100% + &.is-4by3 + padding-top: 75% + &.is-21by9 + padding-top: 42.857143% + & iframe, + & object, + & embed + position: absolute + top: 0 + left: 0 + width: 100% !important + height: 100% !important + + +.slider-navigation-previous, +.slider-navigation-next + display: flex + justify-content: center + align-items: center + position: absolute + width: 42px + height: 42px + background: white center center no-repeat + background-size: 20px 20px + border: 1px solid white + border-radius: 25091983px + box-shadow: 0 2px 5px #3232321a + top: 50% + margin-top: -20px + left: 0px + cursor: pointer + transition: transform .3s, opacity .3s + &:hover + transform: scale(1.2) + &.is-hidden + display: none + opacity: 0 + svg + width: 25% +.slider-navigation-next + left: auto + right: 0px + background: white center center no-repeat + background-size: 20px 20px + +.slider-pagination + display: none + justify-content: center + align-items: center + position: absolute + bottom: 0 + left: 0 + right: 0 + padding: .5rem 1rem + text-align: center + .slider-page + background: white + width: 10px + height: 10px + border-radius: 25091983px + display: inline-block + margin: 0 3px + box-shadow: 0 2px 5px #3232321a + transition: transform .3s + cursor: pointer + &.is-active, + &:hover + transform: scale(1.4) + + @media screen and (min-width: 800px) + display: flex + + +// Hero Carousel +=hero-carousel + position: absolute + top: 0 + left: 0 + bottom: 0 + right: 0 + height: auto + border: none + margin: auto + padding: 0 + z-index: 0 + +.hero + &.has-carousel + position: relative + + .hero-body, + + .hero-head, + + .hero-footer + z-index: 10 + overflow: hidden + .hero-carousel + +hero-carousel + .slider + width: 100% + max-width: 100% + overflow: hidden + height: 100% !important + max-height: 100% + z-index: 0 + .has-background + max-height: 100% + .is-background + object-fit: cover + object-position: center center + height: 100% + width: 100% + .hero-body + margin: 0 3rem + z-index: 10 \ No newline at end of file diff --git a/themes/lhs/assets/sass/leighhack.scss b/themes/lhs/assets/sass/leighhack.scss index 8145061..bb02c15 100644 --- a/themes/lhs/assets/sass/leighhack.scss +++ b/themes/lhs/assets/sass/leighhack.scss @@ -27,6 +27,9 @@ $body-font-size: 1.25em; // Import Bulmas styles @import "bulma.sass"; +// Add Carousel add-on +@import "bulma-carousel.sass"; + // ------------------------------------------------------- // Custom SCSS overrides diff --git a/themes/lhs/layouts/partials/foot.html b/themes/lhs/layouts/partials/foot.html index 66bc30f..ef55576 100644 --- a/themes/lhs/layouts/partials/foot.html +++ b/themes/lhs/layouts/partials/foot.html @@ -2,10 +2,19 @@ {{ if .Page.Store.Get "hasMermaid" }} - + +{{ end }} + +{{ if .Page.Store.Get "hasCarousel" }} +{{ with resources.Get "js/bulma-carousel.min.js" }} + +{{ end }} + {{ end }} {{ $theme := resources.Get "js/theme.js" }} diff --git a/themes/lhs/layouts/shortcodes/gallery.html b/themes/lhs/layouts/shortcodes/gallery.html new file mode 100644 index 0000000..8f991bc --- /dev/null +++ b/themes/lhs/layouts/shortcodes/gallery.html @@ -0,0 +1,7 @@ + + + + +{{ .Page.Store.Set "hasCarousel" true }} \ No newline at end of file diff --git a/themes/lhs/layouts/shortcodes/image.html b/themes/lhs/layouts/shortcodes/image.html index 5eb2a2c..3270528 100644 --- a/themes/lhs/layouts/shortcodes/image.html +++ b/themes/lhs/layouts/shortcodes/image.html @@ -3,6 +3,9 @@ {{ $img = $img.Resize (print (default "1264x" $width) " webp") }} {{ $title := .Get "title" }} {{ $class := .Get "class" }} +{{- with .Parent -}} +
+{{ end }}
{{ $title }} @@ -13,4 +16,7 @@ {{ end }} -
\ No newline at end of file + +{{- with .Parent -}} +
+{{ end }} \ No newline at end of file