j1-template 2024.3.16 → 2024.3.18

data/assets/theme/j1/modules/photoswipe/css/photoswipe-caption-plugin.min.css

@@ -0,0 +1,16 @@
+/*
+ # -----------------------------------------------------------------------------
+ # ~/assets/theme/j1/modules/photoswipe/css/photoswipe-caption-plugin.css
+ # Caption plugin 1.2.7 for PhotoSwipe v5
+ # -----------------------------------------------------------------------------
+ #
+ # Product/Info:
+ # https://github.com/dimsemenov/photoswipe-dynamic-caption-plugin
+ # Copyright (C) 2021 Dmitry Semenov
+ #
+ # Caption plugin for PhotoSwipe is licensed under the MIT License.
+ # See: https://github.com/dimsemenov/photoswipe-dynamic-caption-plugin/blob/main/LICENSE
+ # -----------------------------------------------------------------------------
+*/
+
+.pswp__dynamic-caption{color:#fff;position:absolute;width:100%;left:0;top:0;transition:opacity .12s linear!important}.pswp-caption-content{display:none}.pswp__dynamic-caption a{color:#fff}.pswp__dynamic-caption--faded{opacity:0!important}.pswp__dynamic-caption--aside{width:auto;max-width:300px;padding:20px 15px 20px 20px;margin-top:70px}.pswp__dynamic-caption--below{width:auto;max-width:700px;padding:15px 0 0}.pswp__dynamic-caption--on-hor-edge{padding-left:15px;padding-right:15px}.pswp__dynamic-caption--mobile{width:100%;background:rgba(0,0,0,.5);padding:10px 15px;right:0;bottom:0;top:auto!important;left:0!important}

data/assets/theme/j1/modules/photoswipe/css/photoswipe.css

@@ -0,0 +1,376 @@
+/*
+ # -----------------------------------------------------------------------------
+ # ~/assets/theme/j1/modules/photoswipe/css/photoswipe.css
+ # PhotoSwipe main CSS by Dmytro Semenov 
+ # Provides PhotoSwipe styles
+ # -----------------------------------------------------------------------------
+ #
+ # Product/Info:
+ # https://photoswipe.com
+ # Copyright (C) 2014 - 2024 Dmitry Semenov
+ #
+ # PhotoSwipe is licensed under the MIT License.
+ # See: https://github.com/dimsemenov/PhotoSwipe/blob/master/LICENSE
+ # -----------------------------------------------------------------------------
+*/
+
+/* Sniper FONT */
+@font-face {
+    font-family: 'swiper-icons';
+    src: url('data:application/font-woff;charset=utf-8;base64, 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');
+    font-weight: 400;
+    font-style: normal;
+}
+
+/* "1 of 10" counter */
+:root {
+    --pswp-bg: #000;
+    --pswp-placeholder-bg: #222;
+    --pswp-root-z-index: 100000;
+    --pswp-preloader-color: rgba(79, 79, 79, 0.4);
+    --pswp-preloader-color-secondary: rgba(255, 255, 255, 0.9);
+    --pswp-icon-color: #fff;
+    --pswp-icon-color-secondary: #4f4f4f;
+    --pswp-icon-stroke-color: #4f4f4f;
+    --pswp-icon-stroke-width: 2px;
+    --pswp-error-text-color: var(--pswp-icon-color);
+}
+
+/* "1 of 10" counter */
+.pswp {    
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: var(--pswp-root-z-index);
+    display: none;
+    touch-action: none;
+    outline: 0;
+    opacity: 0.003;
+    contain: layout style size;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    transform: translateZ(0);
+    will-change: opacity;
+    overflow: hidden;
+}
+
+.pswp:focus {
+    outline: 0;
+}
+.pswp * {
+    box-sizing: border-box;
+}
+.pswp img {
+    max-width: none;
+}
+.pswp .pswp__hide-on-close {
+    opacity: 0.005;
+    will-change: opacity;
+    transition: opacity var(--pswp-transition-duration) cubic-bezier(0.4, 0, 0.22, 1);
+    z-index: 10;
+    pointer-events: none;
+}
+.pswp--open {
+    display: block;
+}
+.pswp__bg {
+    transform: translateZ(0);
+    will-change: opacity;
+    opacity: 0.005;
+    background: var(--pswp-bg);
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+.pswp__scroll-wrap {
+    overflow: hidden;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+.pswp__container {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+.pswp__item {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+    overflow: hidden;
+}
+.pswp__content {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+}
+.pswp__content > * {
+    pointer-events: auto;
+}
+.pswp__img {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    width: auto;
+    height: auto;
+    cursor: -webkit-zoom-out;
+    cursor: -moz-zoom-out;
+    cursor: zoom-out;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+.pswp__zoom-wrap {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    width: auto;
+    height: auto;
+}
+.pswp--click-to-zoom.pswp--zoom-allowed .pswp__img {
+    cursor: -webkit-zoom-in;
+    cursor: -moz-zoom-in;
+    cursor: zoom-in;
+}
+.pswp--click-to-zoom.pswp--zoomed-in .pswp__img {
+    cursor: move;
+    cursor: -webkit-grab;
+    cursor: -moz-grab;
+    cursor: grab;
+}
+.pswp--click-to-zoom.pswp--zoomed-in .pswp__img:active {
+    cursor: -webkit-grabbing;
+    cursor: -moz-grabbing;
+    cursor: grabbing;
+}
+.pswp--no-mouse-drag.pswp--zoomed-in .pswp__img {
+    cursor: -webkit-zoom-out;
+    cursor: -moz-zoom-out;
+    cursor: zoom-out;
+}
+.pswp--no-mouse-drag.pswp--zoomed-in .pswp__img:active {
+    cursor: -webkit-zoom-out;
+    cursor: -moz-zoom-out;
+    cursor: zoom-out;
+}
+.pswp__button {
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    position: relative;
+    display: block;
+    width: 50px;
+    height: 60px;
+    padding: 0;
+    margin: 0;
+    overflow: hidden;
+    cursor: pointer;
+    background: none;
+    border: 0;
+    box-shadow: none;
+    opacity: 0.85;
+    -webkit-appearance: none;
+    -webkit-touch-callout: none;
+}
+.pswp__button:hover {
+    transition: none;
+    padding: 0;
+    background: none;
+    border: 0;
+    box-shadow: none;
+    opacity: 1;
+}
+.pswp__button:active {
+    transition: none;
+    padding: 0;
+    background: none;
+    border: 0;
+    box-shadow: none;
+    opacity: 1;
+}
+.pswp__button:focus {
+    transition: none;
+    padding: 0;
+    background: none;
+    border: 0;
+    box-shadow: none;
+    opacity: 1;
+}
+.pswp__button:disabled {
+    opacity: 0.3;
+    cursor: auto;
+}
+.pswp__counter {
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    height: 30px;
+    margin-top: 15px;
+    margin-inline-start: 20px;
+    font-size: 14px;
+    line-height: 30px;
+    color: var(--pswp-icon-color);
+    text-shadow: 1px 1px 3px var(--pswp-icon-color-secondary);
+    opacity: 0.85;
+}
+.pswp__hidden {
+    display: none !important;
+}
+.pswp__error-msg-container {
+    display: grid;
+}
+.pswp__error-msg {
+    margin: auto;
+    font-size: 1em;
+    line-height: 1;
+    color: var(--pswp-error-text-color);
+}
+.pswp--ui-visible .pswp__hide-on-close {
+    opacity: 1;
+    pointer-events: auto;
+}
+.pswp__icn {
+    fill: var(--pswp-icon-color);
+    color: var(--pswp-icon-color-secondary);
+    position: absolute;
+    top: 14px;
+    left: 9px;
+    width: 32px;
+    height: 32px;
+    overflow: hidden;
+    pointer-events: none;
+}
+.pswp__icn:focus {
+    outline: 0;
+}
+.pswp__icn-shadow {
+    stroke: var(--pswp-icon-stroke-color);
+    stroke-width: var(--pswp-icon-stroke-width);
+    fill: none;
+}
+div.pswp__img--placeholder {
+    background: var(--pswp-placeholder-bg);
+}
+.pswp__img--with-bg {
+    background: var(--pswp-placeholder-bg);
+}
+.pswp__top-bar {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 60px;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    z-index: 10;
+    pointer-events: none !important;
+}
+.pswp__top-bar > * {
+    pointer-events: auto;
+    will-change: opacity;
+}
+.pswp__button--close {
+    margin-right: 6px;
+}
+.pswp__button--arrow {
+    position: absolute;
+    top: 0;
+    width: 75px;
+    height: 100px;
+    top: 50%;
+    margin-top: -50px;
+}
+.pswp__button--arrow:disabled {
+    display: none;
+    cursor: default;
+}
+.pswp__button--arrow .pswp__icn {
+    top: 50%;
+    margin-top: -30px;
+    width: 60px;
+    height: 60px;
+    background: none;
+    border-radius: 0;
+}
+.pswp--one-slide .pswp__button--arrow {
+    display: none;
+}
+.pswp--one-slide .pswp__counter {
+    display: none;
+}
+.pswp--touch .pswp__button--arrow {
+    visibility: hidden;
+}
+.pswp--has_mouse .pswp__button--arrow {
+    visibility: visible;
+}
+.pswp__button--arrow--prev {
+    right: auto;
+    left: 0px;
+}
+.pswp__button--arrow--next {
+    right: 0px;
+}
+.pswp__button--arrow--next .pswp__icn {
+    left: auto;
+    right: 14px;
+    transform: scale(-1, 1);
+}
+.pswp__button--zoom {
+    display: none;
+}
+.pswp--zoom-allowed .pswp__button--zoom {
+    display: block;
+}
+.pswp--zoomed-in .pswp__zoom-icn-bar-v {
+    display: none;
+}
+.pswp__preloader {
+    position: relative;
+    overflow: hidden;
+    width: 50px;
+    height: 60px;
+    margin-right: auto;
+}
+.pswp__preloader .pswp__icn {
+    opacity: 0;
+    transition: opacity 0.2s linear;
+    animation: pswp-clockwise 600ms linear infinite;
+}
+.pswp__preloader--active .pswp__icn {
+    opacity: 0.85;
+}
+
+@keyframes pswp-clockwise {
+    0% {
+        transform: rotate(0deg);
+   }
+    100% {
+        transform: rotate(360deg);
+   }
+}

data/assets/theme/j1/modules/photoswipe/css/photoswipe.min.css

@@ -0,0 +1,17 @@
+/*
+ # -----------------------------------------------------------------------------
+ # ~/assets/theme/j1/modules/photoswipe/css/photoswipe.min.css
+ # PhotoSwipe main CSS by Dmytro Semenov 
+ # Provides PhotoSwipe styles
+ # -----------------------------------------------------------------------------
+ #
+ # Product/Info:
+ # https://photoswipe.com
+ # Copyright (C) 2014 - 2024 Dmitry Semenov
+ #
+ # PhotoSwipe is licensed under the MIT License.
+ # See: https://github.com/dimsemenov/PhotoSwipe/blob/master/LICENSE
+ # -----------------------------------------------------------------------------
+*/
+
+@keyframes pswp-clockwise{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.pswp{--pswp-bg:#000;--pswp-placeholder-bg:#222;--pswp-root-z-index:100000;--pswp-preloader-color:rgba(79,79,79,0.4);--pswp-preloader-color-secondary:hsla(0,0%,100%,0.9);--pswp-icon-color:#fff;--pswp-icon-color-secondary:#4f4f4f;--pswp-icon-stroke-color:#4f4f4f;--pswp-icon-stroke-width:2px;--pswp-error-text-color:var(--pswp-icon-color);position:fixed;top:0;left:0;width:100%;height:100%;z-index:var(--pswp-root-z-index);display:none;touch-action:none;opacity:.003;contain:layout style size;-webkit-tap-highlight-color:rgba(0,0,0,0);transform:translateZ(0);will-change:opacity;overflow:hidden}.pswp,.pswp:focus{outline:0}.pswp *{box-sizing:border-box}.pswp img{max-width:none}.pswp .pswp__hide-on-close{opacity:.005;will-change:opacity;transition:opacity var(--pswp-transition-duration) cubic-bezier(.4,0,.22,1);z-index:10;pointer-events:none}.pswp--open{display:block}.pswp__bg{transform:translateZ(0);will-change:opacity;opacity:.005;background:var(--pswp-bg)}.pswp__bg,.pswp__scroll-wrap{position:absolute;top:0;left:0;width:100%;height:100%}.pswp__scroll-wrap{overflow:hidden}.pswp__container{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.pswp__container,.pswp__item{position:absolute;top:0;left:0;width:100%;height:100%}.pswp__item{z-index:1;overflow:hidden}.pswp__content{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.pswp__content>*{pointer-events:auto}.pswp__img{cursor:-webkit-zoom-out;cursor:-moz-zoom-out;cursor:zoom-out;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.pswp__img,.pswp__zoom-wrap{position:absolute;top:0;left:0;width:100%;height:100%;width:auto;height:auto}.pswp--click-to-zoom.pswp--zoom-allowed .pswp__img{cursor:-webkit-zoom-in;cursor:-moz-zoom-in;cursor:zoom-in}.pswp--click-to-zoom.pswp--zoomed-in .pswp__img{cursor:move;cursor:-webkit-grab;cursor:-moz-grab;cursor:grab}.pswp--click-to-zoom.pswp--zoomed-in .pswp__img:active{cursor:-webkit-grabbing;cursor:-moz-grabbing;cursor:grabbing}.pswp--no-mouse-drag.pswp--zoomed-in .pswp__img,.pswp--no-mouse-drag.pswp--zoomed-in .pswp__img:active{cursor:-webkit-zoom-out;cursor:-moz-zoom-out;cursor:zoom-out}.pswp__button{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;display:block;width:50px;height:60px;padding:0;margin:0;overflow:hidden;cursor:pointer;background:none;border:0;box-shadow:none;opacity:.85;-webkit-appearance:none;-webkit-touch-callout:none}.pswp__button:active,.pswp__button:focus,.pswp__button:hover{transition:none;padding:0;background:none;border:0;box-shadow:none;opacity:1}.pswp__button:disabled{opacity:.3;cursor:auto}.pswp__counter{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;height:30px;margin-top:15px;margin-inline-start:20px;font-size:14px;line-height:30px;color:var(--pswp-icon-color);text-shadow:1px 1px 3px var(--pswp-icon-color-secondary);opacity:.85}.pswp__hidden{display:none!important}.pswp__error-msg-container{display:grid}.pswp__error-msg{margin:auto;font-size:1em;line-height:1;color:var(--pswp-error-text-color)}.pswp--ui-visible .pswp__hide-on-close{opacity:1;pointer-events:auto}.pswp__icn{fill:var(--pswp-icon-color);color:var(--pswp-icon-color-secondary);position:absolute;top:14px;left:9px;width:32px;height:32px;overflow:hidden;pointer-events:none}.pswp__icn:focus{outline:0}.pswp__icn-shadow{stroke:var(--pswp-icon-stroke-color);stroke-width:var(--pswp-icon-stroke-width);fill:none}.pswp__img--with-bg,div.pswp__img--placeholder{background:var(--pswp-placeholder-bg)}.pswp__top-bar{position:absolute;left:0;top:0;width:100%;height:60px;display:flex;flex-direction:row;justify-content:flex-end;z-index:10;pointer-events:none!important}.pswp__top-bar>*{pointer-events:auto;will-change:opacity}.pswp__button--close{margin-right:6px}.pswp__button--arrow{position:absolute;top:0;width:75px;height:100px;top:50%;margin-top:-50px}.pswp__button--arrow:disabled{display:none;cursor:default}.pswp__button--arrow .pswp__icn{top:50%;margin-top:-30px;width:60px;height:60px;background:none;border-radius:0}.pswp--one-slide .pswp__button--arrow,.pswp--one-slide .pswp__counter{display:none}.pswp--touch .pswp__button--arrow{visibility:hidden}.pswp--has_mouse .pswp__button--arrow{visibility:visible}.pswp__button--arrow--prev{right:auto;left:0}.pswp__button--arrow--next{right:0}.pswp__button--arrow--next .pswp__icn{left:auto;right:14px;transform:scaleX(-1)}.pswp__button--zoom{display:none}.pswp--zoom-allowed .pswp__button--zoom{display:block}.pswp--zoomed-in .pswp__zoom-icn-bar-v{display:none}.pswp__preloader{position:relative;overflow:hidden;width:50px;height:60px;margin-right:auto}.pswp__preloader .pswp__icn{opacity:0;transition:opacity .2s linear;animation:pswp-clockwise .6s linear infinite}.pswp__preloader--active .pswp__icn{opacity:.85}

data/assets/theme/j1/modules/photoswipe/js/_info/README.md

@@ -0,0 +1,43 @@
+The `js/` folder contains a transpiled version of PhotoSwipe in
+universal module definition format (umd) to be used in the browser.
+
+Basic example:
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Test Gallery</title>
+  </head>
+  <body>
+
+    <script src="../js/photoswipe-core.min.js"></script>
+    <script src="../js/photoswipe-lightbox.min.js"></script>
+    
+    <link rel="stylesheet" href="../css/photoswipe.css">
+
+    <div class="test-gallery">
+      <a href="https://dummyimage.com/1200x600/000/fff" data-pswp-width="1200" data-pswp-height="600">
+        <img src="https://dummyimage.com/120x60/000/fff" alt="" />
+      </a>
+      <a href="https://dummyimage.com/1200x1200/000/fff" data-pswp-width="1200" data-pswp-height="1200">
+        <img src="https://dummyimage.com/60x60/000/fff" alt="" />
+      </a>
+      <a href="https://dummyimage.com/600x1200/000/fff" data-pswp-width="600" data-pswp-height="1200">
+        <img src="https://dummyimage.com/30x60/000/fff" alt="" />
+      </a>
+    </div>
+    
+    <script type="text/javascript">
+      var lightbox = new PhotoSwipeLightbox({
+        gallery: '.test-gallery',
+        children: 'a',
+        // dynamic import is not supported in UMD version
+        pswpModule: PhotoSwipe 
+      });
+      lightbox.init();
+    </script>
+
+  </body>
+</html>
+```