diff --git a/js/package.json b/js/package.json index ade33f8..3233046 100644 --- a/js/package.json +++ b/js/package.json @@ -24,6 +24,6 @@ "build": "npm run build:css && webpack --mode production", "format": "prettier --write src", "format-check": "prettier --check src", - "build:css": "cp ./node_modules/@fancyapps/ui/dist/fancybox/fancybox.css ../less/fancybox.css && cp ./node_modules/@fancyapps/ui/dist/carousel/carousel.css ../less/carousel.css && cp ./node_modules/@fancyapps/ui/dist/panzoom/panzoom.css ../less/panzoom.css" + "build:css": "cp ./node_modules/@fancyapps/ui/dist/fancybox/fancybox.css ../less/fancybox.css && cp ./node_modules/@fancyapps/ui/dist/carousel/carousel.css ../less/carousel.css" } } diff --git a/less/forum.less b/less/forum.less index 827dff6..f97c676 100644 --- a/less/forum.less +++ b/less/forum.less @@ -1,7 +1,5 @@ @import (inline) "fancybox.css"; @import (inline) "carousel.css"; -@import (inline) "panzoom.css"; -@import (inline) "panzoom.controls.css"; .f-carousel__slide { display: flex; diff --git a/less/panzoom.controls.css b/less/panzoom.controls.css deleted file mode 100644 index 9ca443d..0000000 --- a/less/panzoom.controls.css +++ /dev/null @@ -1 +0,0 @@ -.panzoom__controls{position:absolute;top:16px;left:16px;display:flex;flex-direction:column;transform-origin:top left;transform:scale(0.75)}.panzoom__button{cursor:pointer;margin:0;padding:10px;border:0;border-radius:0;color:#222;background:#eee}@media(hover: hover){.panzoom__button:hover{background:#ccc}}.panzoom__button svg{vertical-align:top;pointer-events:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} \ No newline at end of file diff --git a/less/panzoom.css b/less/panzoom.css deleted file mode 100644 index dea2aa8..0000000 --- a/less/panzoom.css +++ /dev/null @@ -1 +0,0 @@ -:root{--f-spinner-width: 36px;--f-spinner-height: 36px;--f-spinner-color-1: rgba(0, 0, 0, 0.1);--f-spinner-color-2: rgba(17, 24, 28, 0.8);--f-spinner-stroke: 2.75}.f-spinner{margin:auto;padding:0;width:var(--f-spinner-width);height:var(--f-spinner-height)}.f-spinner svg{width:100%;height:100%;vertical-align:top;animation:f-spinner-rotate 2s linear infinite}.f-spinner svg *{stroke-width:var(--f-spinner-stroke);fill:none}.f-spinner svg *:first-child{stroke:var(--f-spinner-color-1)}.f-spinner svg *:last-child{stroke:var(--f-spinner-color-2);animation:f-spinner-dash 2s ease-in-out infinite}@keyframes f-spinner-rotate{100%{transform:rotate(360deg)}}@keyframes f-spinner-dash{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}100%{stroke-dasharray:90,150;stroke-dashoffset:-124}}.f-panzoom{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:center;align-items:center;transform:translate3d(0, 0, 0);background:#fff}.f-panzoom.is-draggable{cursor:move;cursor:grab}.f-panzoom.can-zoom_in{cursor:zoom-in}.f-panzoom.can-zoom_out{cursor:zoom-out}.f-panzoom.is-dragging{cursor:move;cursor:grabbing}.f-panzoom.in-fullscreen{position:fixed;top:0;left:0;margin:0 !important;width:100% !important;height:100% !important;max-width:none !important;max-height:none !important;aspect-ratio:unset !important;z-index:9999}.f-panzoom__content{display:block;margin:auto;position:relative;max-width:100%;max-height:100%;min-height:0;object-fit:contain;transform:translate3d(0, 0, 0) scale(1) rotate(0) skew(0);transform-origin:center center;transition:none;-webkit-user-select:none;user-select:none}.is-loading .f-panzoom__content{display:none}.is-scaling .f-panzoom__content{filter:blur(0px);will-change:transform,width,height;backface-visibility:hidden}picture.f-panzoom__content>img{width:100%;height:auto;max-height:100%}.f-panzoom__content:not(:last-child){margin-bottom:0}.f-panzoom__viewport{margin:auto;position:relative;width:fit-content;height:fit-content;min-height:1px}.f-panzoom__viewport:not(:last-child){margin-bottom:0}.f-panzoom__caption:not(:first-child){margin-bottom:auto}html.with-panzoom-in-fullscreen{overflow:hidden} \ No newline at end of file diff --git a/src/DefineGalleryTemplate.php b/src/DefineGalleryTemplate.php index af94ec2..511c90a 100644 --- a/src/DefineGalleryTemplate.php +++ b/src/DefineGalleryTemplate.php @@ -21,16 +21,30 @@ public function __invoke(Configurator $config) - {@alt} - - + {@alt} - {@alt} - - + {@alt} + + + + XML; + } + + if ($config->tags->exists('UPL-IMAGE-PREVIEW')) { + $tag = $config->tags->get('UPL-IMAGE-PREVIEW'); + $tag->template = << + + + + + + + + diff --git a/src/WrapImagesInGallery.php b/src/WrapImagesInGallery.php index 1ee3cd1..3255484 100644 --- a/src/WrapImagesInGallery.php +++ b/src/WrapImagesInGallery.php @@ -7,13 +7,13 @@ class WrapImagesInGallery { - const MATCH_IMG_TAGS = '(\[upl-image-preview[^\]]*\]|\]*\>(?:.*?)\<\/IMG\>|\]*\>(?:.*?)\<\/UPL-IMAGE-PREVIEW\>)'; - const MATCH_GALLERY_REGEX = '/(' . self::MATCH_IMG_TAGS . '(?:\s*\n\s*' . self::MATCH_IMG_TAGS . ')+)/s'; + const MATCH_IMG_TAGS = '((?:]*>(?:(?!<\/UPL-IMAGE-PREVIEW>).)*<\/UPL-IMAGE-PREVIEW>)|(?:]*>(?:(?!<\/IMG>).)*<\/IMG>))'; + const MATCH_GALLERY_REGEX = '((?:'.self::MATCH_IMG_TAGS.'(?:\s*(?:|
|\n)\s*)?){2,})'; public function __invoke(Renderer $renderer, $context, string $xml): string { - return preg_replace_callback(self::MATCH_GALLERY_REGEX, function ($matches) { - $images = preg_split('/\s*\n\s*/', $matches[1]); + return preg_replace_callback('/'.self::MATCH_GALLERY_REGEX.'/m', function ($matches) { + $images = preg_split('/\s*(?:|
|\n)\s*/', $matches[0]); $galleryItems = array_map(function($img) { return '' . trim($img) . ''; }, $images);