From db08d76f9ce77b326efb24555a86ec3d750a31a0 Mon Sep 17 00:00:00 2001 From: Terence Chan Zun Mun Date: Wed, 10 May 2023 09:18:22 +0800 Subject: [PATCH] remove PhotoSwipe (#198) * remove HBS, CSS and JS references to PhotoSwipe * use ghost's default assets for .kg components --- assets/css/misc/kg.css | 37 +++- assets/css/screen.css | 1 - assets/css/vendor/pswp.css | 420 ------------------------------------- assets/js/main.js | 121 +---------- default.hbs | 1 - package.json | 1 - partials/pswp.hbs | 52 ----- 7 files changed, 40 insertions(+), 593 deletions(-) delete mode 100644 assets/css/vendor/pswp.css delete mode 100644 partials/pswp.hbs diff --git a/assets/css/misc/kg.css b/assets/css/misc/kg.css index 395fdb56..bb8260ce 100644 --- a/assets/css/misc/kg.css +++ b/assets/css/misc/kg.css @@ -1,6 +1,22 @@ +.kg-gallery-card, +.kg-gallery-card * { + box-sizing: border-box; +} + +.kg-gallery-card, +.kg-image-card { + --gap: 1.2rem; +} + +.kg-image-card:not(.kg-card-hascaption) + .kg-image-card, +.kg-image-card:not(.kg-card-hascaption) + .kg-gallery-card, +.kg-gallery-card:not(.kg-card-hascaption) + .kg-image-card, +.kg-gallery-card:not(.kg-card-hascaption) + .kg-gallery-card { + margin-top: var(--gap); +} + .kg-gallery-container { - display: flex; - flex-direction: column; + position: relative; } .kg-gallery-row { @@ -9,21 +25,26 @@ justify-content: center; } -.kg-gallery-image { - cursor: pointer; -} - .kg-gallery-image img { + display: block; + margin: 0; width: 100%; height: 100%; } .kg-gallery-row:not(:first-of-type) { - margin: 10px 0 0; + margin: var(--gap) 0 0; } .kg-gallery-image:not(:first-of-type) { - margin: 0 0 0 10px; + margin: 0 0 0 var(--gap); +} + +@media (max-width: 600px) { + .kg-gallery-card, + .kg-image-card { + --gap: 0.6rem; + } } .kg-bookmark-card { diff --git a/assets/css/screen.css b/assets/css/screen.css index 89270bfa..44ccdb32 100644 --- a/assets/css/screen.css +++ b/assets/css/screen.css @@ -31,7 +31,6 @@ @import "members/auth.css"; @import "members/account.css"; @import "members/notification.css"; -@import "vendor/pswp.css"; @import "misc/lazyload.css"; @import "misc/kg.css"; @import "misc/utils.css"; diff --git a/assets/css/vendor/pswp.css b/assets/css/vendor/pswp.css deleted file mode 100644 index 08801dfc..00000000 --- a/assets/css/vendor/pswp.css +++ /dev/null @@ -1,420 +0,0 @@ -.pswp { - backface-visibility: hidden; - display: none; - height: 100%; - left: 0; - position: absolute; - outline: none; - overflow: hidden; - top: 0; - touch-action: none; - width: 100%; - z-index: 1500; - -ms-touch-action: none; - -webkit-text-size-adjust: 100%; -} -.pswp img { - max-width: none; -} -.pswp--animate_opacity { - opacity: 0.001; - transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); - will-change: opacity; -} -.pswp--open { - display: block; -} -.pswp--zoom-allowed .pswp__img { - cursor: zoom-in; -} -.pswp--zoomed-in .pswp__img { - cursor: grab; -} -.pswp--dragging .pswp__img { - cursor: grabbing; -} -.pswp__bg { - backface-visibility: hidden; - background-color: rgba(0, 0, 0, 0.85); - height: 100%; - left: 0; - opacity: 0; - position: absolute; - top: 0; - transform: translateZ(0); - transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); - width: 100%; - will-change: opacity; -} -.pswp__scroll-wrap { - height: 100%; - left: 0; - overflow: hidden; - position: absolute; - top: 0; - width: 100%; -} -.pswp__container, -.pswp__zoom-wrap { - bottom: 0; - left: 0; - position: absolute; - right: 0; - top: 0; - touch-action: none; -} -.pswp__container, -.pswp__img { - user-select: none; - -webkit-tap-highlight-color: transparent; - -webkit-touch-callout: none; -} -.pswp__zoom-wrap { - position: absolute; - transform-origin: left top; - transition: transform 333ms cubic-bezier(0.4, 0, 0.22, 1); - width: 100%; -} -.pswp--animated-in .pswp__bg, -.pswp--animated-in .pswp__zoom-wrap { - transition: none; -} -.pswp__container, -.pswp__zoom-wrap { - backface-visibility: hidden; -} -.pswp__item { - bottom: 0; - left: 0; - overflow: hidden; - position: absolute; - right: 0; - top: 0; -} -.pswp__img { - height: auto; - left: 0; - position: absolute; - top: 0; - width: auto; -} -.pswp__img--placeholder { - backface-visibility: hidden; -} -.pswp__img--placeholder--blank { - background: var(--black-color); -} -.pswp--ie .pswp__img { - height: auto !important; - left: 0; - top: 0; - width: 100% !important; -} -.pswp__error-msg { - color: var(--secondary-text-color); - font-size: 14px; - left: 0; - line-height: 16px; - margin-top: -8px; - position: absolute; - text-align: center; - top: 50%; - width: 100%; -} -.pswp__error-msg a { - color: var(--secondary-text-color); - text-decoration: underline; -} -.pswp__button { - appearance: none; - background: none; - border: 0; - box-shadow: none; - cursor: pointer; - display: block; - float: right; - height: 44px; - margin: 0; - overflow: visible; - padding: 0; - position: relative; - transition: opacity 0.2s; - width: 44px; -} -.pswp__button:focus, -.pswp__button:hover { - opacity: 1; -} -.pswp__button:active { - opacity: 0.9; - outline: none; -} -.pswp__button::-moz-focus-inner { - border: 0; - padding: 0; -} -.pswp__ui--over-close .pswp__button--close { - opacity: 1; -} -.pswp__button, -.pswp__button--arrow--left:before, -.pswp__button--arrow--right:before { - background: url(../images/default-skin.png) 0 0 no-repeat; - background-size: 264px 88px; - height: 44px; - width: 44px; -} -@media (-webkit-min-device-pixel-ratio: 1.1), (-webkit-min-device-pixel-ratio: 1.09375), (min-resolution: 105dpi), (min-resolution: 1.1dppx) { - .pswp--svg .pswp__button, - .pswp--svg .pswp__button--arrow--left:before, - .pswp--svg .pswp__button--arrow--right:before { - background-image: url(../images/default-skin.svg); - } - .pswp--svg .pswp__button--arrow--left, - .pswp--svg .pswp__button--arrow--right { - background: none; - } -} -.pswp__button--close { - background-position: 0 -44px; -} -.pswp__button--share { - background-position: -44px -44px; -} -.pswp__button--fs { - display: none; -} -.pswp--supports-fs .pswp__button--fs { - display: block; -} -.pswp--fs .pswp__button--fs { - background-position: -44px 0; -} -.pswp__button--zoom { - background-position: -88px 0; - display: none; -} -.pswp--zoom-allowed .pswp__button--zoom { - display: block; -} -.pswp--zoomed-in .pswp__button--zoom { - background-position: -132px 0; -} -.pswp--touch .pswp__button--arrow--left, -.pswp--touch .pswp__button--arrow--right { - visibility: hidden; -} -.pswp__button--arrow--left, -.pswp__button--arrow--right { - background: none; - height: 100px; - margin-top: -50px; - position: absolute; - top: 50%; - width: 70px; -} -.pswp__button--arrow--left { - left: 0; -} -.pswp__button--arrow--right { - right: 0; -} -.pswp__button--arrow--left:before, -.pswp__button--arrow--right:before { - content: ""; - height: 30px; - position: absolute; - top: 35px; - width: 32px; -} -.pswp__button--arrow--left:before { - background-position: -138px -44px; - left: 6px; -} -.pswp__button--arrow--right:before { - background-position: -94px -44px; - right: 6px; -} -.pswp__counter { - color: var(--white-color); - font-size: 11px; - font-weight: 700; - height: 44px; - left: 0; - line-height: 44px; - padding: 0 15px; - position: absolute; - top: 0; - user-select: none; -} -.pswp__caption { - bottom: 0; - left: 0; - min-height: 44px; - position: absolute; - width: 100%; -} -.pswp__caption__center { - color: var(--white-color); - font-size: 11px; - line-height: 1.6; - margin: 0 auto; - max-width: 420px; - padding: 25px 15px 30px; - text-align: center; -} -.pswp__caption__center .post-caption-title { - font-size: 15px; - font-weight: 500; - margin-bottom: 7px; - text-transform: uppercase; -} -.pswp__caption__center .post-caption-meta-item + .post-caption-meta-item:before { - content: "\02022"; - padding: 0 4px; -} -.pswp__caption--empty { - display: none; -} -.pswp__caption--fake { - visibility: hidden; -} -.pswp__preloader { - direction: ltr; - height: 44px; - left: 50%; - margin-left: -22px; - opacity: 0; - position: absolute; - top: 0; - transition: opacity 0.25s ease-out; - width: 44px; - will-change: opacity; -} -.pswp__preloader__icn { - height: 20px; - margin: 12px; - width: 20px; -} -.pswp__preloader--active { - opacity: 1; -} -.pswp__preloader--active .pswp__preloader__icn { - background: url(../images/preloader.gif) 0 0 no-repeat; -} -.pswp--css_animation .pswp__preloader--active { - opacity: 1; -} -.pswp--css_animation .pswp__preloader--active .pswp__preloader__icn { - animation: clockwise 500ms linear infinite; -} -.pswp--css_animation .pswp__preloader--active .pswp__preloader__donut { - animation: donut-rotate 1000ms cubic-bezier(0.4, 0, 0.22, 1) infinite; -} -.pswp--css_animation .pswp__preloader__icn { - background: none; - height: 14px; - left: 15px; - margin: 0; - opacity: 0.75; - position: absolute; - top: 15px; - width: 14px; -} -.pswp--css_animation .pswp__preloader__cut { - height: 14px; - overflow: hidden; - position: relative; - width: 7px; -} -.pswp--css_animation .pswp__preloader__donut { - background: none; - border: 2px solid var(--white-color); - border-bottom-color: transparent; - border-left-color: transparent; - border-radius: 50%; - box-sizing: border-box; - height: 14px; - left: 0; - margin: 0; - position: absolute; - top: 0; - width: 14px; -} -@media screen and (max-width: 1024px) { - .pswp__preloader { - float: right; - left: auto; - margin: 0; - position: relative; - top: auto; - } -} -@keyframes clockwise { - 0% { - transform: rotate(0deg); - } - 100% { - transform: rotate(360deg); - } -} -@keyframes donut-rotate { - 0% { - transform: rotate(0); - } - 50% { - transform: rotate(-140deg); - } - 100% { - transform: rotate(0); - } -} -.pswp__ui { - opacity: 1; - visibility: visible; - z-index: 1550; - -webkit-font-smoothing: auto; -} -.pswp__top-bar { - height: 44px; - left: 0; - position: absolute; - top: 0; - width: 100%; -} -.pswp__caption, -.pswp__top-bar, -.pswp--has_mouse .pswp__button--arrow--left, -.pswp--has_mouse .pswp__button--arrow--right { - backface-visibility: hidden; - transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); - will-change: opacity; -} -.pswp--has_mouse .pswp__button--arrow--left, -.pswp--has_mouse .pswp__button--arrow--right { - visibility: visible; -} -.pswp__ui--idle .pswp__top-bar { - opacity: 0; -} -.pswp__ui--idle .pswp__button--arrow--left, -.pswp__ui--idle .pswp__button--arrow--right { - opacity: 0; -} -.pswp__ui--hidden .pswp__top-bar, -.pswp__ui--hidden .pswp__caption, -.pswp__ui--hidden .pswp__button--arrow--left, -.pswp__ui--hidden .pswp__button--arrow--right { - opacity: 0.001; -} -.pswp__ui--one-slide .pswp__button--arrow--left, -.pswp__ui--one-slide .pswp__button--arrow--right, -.pswp__ui--one-slide .pswp__counter { - display: none; -} -.pswp__element--disabled { - display: none !important; -} -.pswp--minimal--dark .pswp__top-bar { - background: none; -} diff --git a/assets/js/main.js b/assets/js/main.js index 184e60c0..5c536e2d 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -1,8 +1,6 @@ import './jquery-global.js'; import InfiniteScroll from 'infinite-scroll'; -import PhotoSwipe from 'photoswipe'; -import PhotoSwipeUIDefault from 'photoswipe/dist/photoswipe-ui-default'; import fitvids from 'fitvids'; import 'lazysizes'; @@ -199,25 +197,6 @@ function video() { fitvids('.single-content'); } -function gallery() { - var images = document.querySelectorAll('.kg-gallery-image img'); - images.forEach(function (image) { - var container = image.closest('.kg-gallery-image'); - var width = image.attributes.width.value; - var height = image.attributes.height.value; - var ratio = width / height; - container.style.flex = ratio + ' 1 0%'; - }); - - pswp( - '.kg-gallery-container', - '.kg-gallery-image', - '.kg-gallery-image', - false, - true - ); -} - function table() { if (body.hasClass('post-template') || body.hasClass('page-template')) { var tables = $('.single-content').find('.table'); @@ -280,6 +259,17 @@ function modal() { }); } +function gallery() { + const images = document.querySelectorAll('.kg-gallery-image img'); + images.forEach((image) => { + const container = image.closest('.kg-gallery-image'); + const width = image.attributes.width.value; + const height = image.attributes.height.value; + const ratio = width / height; + container.style.flex = ratio + ' 1 0%'; + }); +} + function elasticSearch(query, callback) { var baseUrl = 'https://advisorysg.ent.ap-southeast-1.aws.found.io'; var engine = 'ghost'; @@ -442,92 +432,3 @@ function burger() { body.toggleClass('menu-opened'); }); } - -function pswp(container, element, trigger, caption, isGallery) { - var parseThumbnailElements = function (el) { - var items = [], - gridEl, - linkEl, - item; - - $(el) - .find(element) - .each(function (i, v) { - gridEl = $(v); - linkEl = gridEl.find(trigger); - - item = { - src: isGallery - ? gridEl.find('img').attr('src') - : linkEl.attr('href'), - w: 0, - h: 0, - }; - - if (caption && gridEl.find(caption).length) { - item.title = gridEl.find(caption).html(); - } - - items.push(item); - }); - - return items; - }; - - var openPhotoSwipe = function (index, galleryElement) { - var pswpElement = document.querySelectorAll('.pswp')[0], - gallery, - options, - items; - - items = parseThumbnailElements(galleryElement); - - options = { - closeOnScroll: false, - history: false, - index: index, - shareEl: false, - showAnimationDuration: 0, - showHideOpacity: true, - }; - - gallery = new PhotoSwipe( - pswpElement, - PhotoSwipeUIDefault, - items, - options - ); - gallery.listen('gettingData', function (index, item) { - if (item.w < 1 || item.h < 1) { - // unknown size - var img = new Image(); - img.onload = function () { - // will get size after load - item.w = this.width; // set image width - item.h = this.height; // set image height - gallery.updateSize(true); // reinit Items - }; - img.src = item.src; // let's download image - } - }); - gallery.init(); - }; - - var onThumbnailsClick = function (e) { - e.preventDefault(); - - var index = $(e.target) - .closest(container) - .find(element) - .index($(e.target).closest(element)); - var clickedGallery = $(e.target).closest(container); - - openPhotoSwipe(index, clickedGallery[0]); - - return false; - }; - - $(container).on('click', trigger, function (e) { - onThumbnailsClick(e); - }); -} diff --git a/default.hbs b/default.hbs index d9d1d77a..239b79a7 100644 --- a/default.hbs +++ b/default.hbs @@ -33,7 +33,6 @@ {{> footer}} {{> modal}} - {{> pswp}} diff --git a/package.json b/package.json index ef29afcf..a3b99801 100644 --- a/package.json +++ b/package.json @@ -123,7 +123,6 @@ "infinite-scroll": "^4.0.1", "jquery": "^3.6.0", "lazysizes": "^5.3.2", - "photoswipe": "^4.1.3", "tailwindcss": "^3.0.7", "webpack": "^5.70.0" } diff --git a/partials/pswp.hbs b/partials/pswp.hbs deleted file mode 100644 index 5886c9ac..00000000 --- a/partials/pswp.hbs +++ /dev/null @@ -1,52 +0,0 @@ - - \ No newline at end of file