Browse Source
- ${images.gallery(...)} accepts JS-style image objects
({src, alt?, caption?}) that may span multiple lines and contain
whitespace inside the gallery brackets. Captions go through a
whitelist sanitiser (b/strong/i/em/u/s/mark/small/sub/sup/br/code/
span with class+style only — style values containing
expression()/javascript:/url() are dropped) so authors can use
inline markup without exposing XSS.
- Promote escapeHtml / escapeHtmlAttr to exported helpers in
iot-hub-markdown.utils, add the new sanitizeInlineHtml. Drop the
duplicate copies (and the now-unused DocLinks helpers + buildDocLinkButton)
from shared/models/iot-hub/device-package.models.
- Move the PhotoSwipe wiring out of TbIotHubMarkdownComponent into a
reusable tbPhotoSwipeGallery shared directive, declared/exported
by SharedModule. The component now just renders the
data-attributed wrapper and the directive lazy-binds PhotoSwipe.
- Tighten the gallery layout: 200px-min auto-fill grid, 8px vertical
margins, hover border swapped to the shared #2a7dec accent token.
pull/15615/head
Igor Kulikov
5 months ago
6 changed files with 317 additions and 172 deletions
@ -0,0 +1,219 @@ |
|||
///
|
|||
/// Copyright © 2016-2026 The Thingsboard Authors
|
|||
///
|
|||
/// Licensed under the Apache License, Version 2.0 (the "License");
|
|||
/// you may not use this file except in compliance with the License.
|
|||
/// You may obtain a copy of the License at
|
|||
///
|
|||
/// http://www.apache.org/licenses/LICENSE-2.0
|
|||
///
|
|||
/// Unless required by applicable law or agreed to in writing, software
|
|||
/// distributed under the License is distributed on an "AS IS" BASIS,
|
|||
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|||
/// See the License for the specific language governing permissions and
|
|||
/// limitations under the License.
|
|||
///
|
|||
|
|||
import { Directive, ElementRef, Input, OnDestroy, OnInit } from '@angular/core'; |
|||
import PhotoSwipeLightbox from 'photoswipe/lightbox'; |
|||
import PhotoSwipe from 'photoswipe'; |
|||
import cssjs from '@core/css/css'; |
|||
|
|||
const PHOTO_GALLERY_STYLE_ID = 'photoswipe-gallery-style'; |
|||
const PHOTO_GALLERY_CLASS = 'tb-photoswipe-gallery'; |
|||
const PHOTO_GALLERY_STYLE = |
|||
'{\n'+ |
|||
' background: rgba(10, 10, 20, 0.55);\n' + |
|||
' backdrop-filter: blur(18px);\n' + |
|||
' opacity: 1;\n' + |
|||
'}\n' + |
|||
'\n' + |
|||
'.pswp__tb-photoswipe-caption {\n' + |
|||
' position: fixed;\n' + |
|||
' bottom: 1.5rem;\n' + |
|||
' left: 50%;\n' + |
|||
' transform: translate(-50%);\n' + |
|||
' z-index: 10000;\n' + |
|||
' display: flex;\n' + |
|||
' flex-direction: column;\n' + |
|||
' align-items: center;\n' + |
|||
' gap: .25rem;\n' + |
|||
' max-width: 80vw;\n' + |
|||
' text-align: center;\n' + |
|||
' pointer-events: none;\n' + |
|||
' line-height: 1.75;\n' + |
|||
'}\n' + |
|||
'\n' + |
|||
'.pswp__tb-photoswipe-caption .tb-gallery-caption {\n' + |
|||
' color: #fff;\n' + |
|||
' font-size: 1.125rem;\n' + |
|||
' line-height: 1.5;\n' + |
|||
' background: #000000a6;\n' + |
|||
' padding: .5rem 1.25rem;\n' + |
|||
' border-radius: 8px;\n' + |
|||
' backdrop-filter: blur(8px);\n' + |
|||
' -webkit-backdrop-filter: blur(8px);\n' + |
|||
'}\n' + |
|||
'\n' + |
|||
'.pswp__tb-photoswipe-caption .tb-gallery-counter {\n' + |
|||
' color: #fff9;\n' + |
|||
' font-size: .8rem;\n' + |
|||
'}\n'+ |
|||
'\n' + |
|||
'.pswp__item img.pswp__img {\n' + |
|||
' display: block;\n' + |
|||
' max-width: 90vw;\n' + |
|||
' max-height: 78vh;\n' + |
|||
' object-fit: contain;\n' + |
|||
' border-radius: 4px; \n' + |
|||
' box-shadow: 0 20px 60px #00000080;\n' + |
|||
'}\n' + |
|||
'\n' + |
|||
'.pswp__item .pswp__img--placeholder {\n' + |
|||
' border-radius: 4px; \n' + |
|||
'}\n' + |
|||
'\n' + |
|||
'.pswp__button {\n' + |
|||
' border-radius: 50%;\n' + |
|||
' border: 1px solid rgba(255, 255, 255, .2);\n' + |
|||
' background: #1e1e2899;\n' + |
|||
' backdrop-filter: blur(8px);\n' + |
|||
' -webkit-backdrop-filter: blur(8px);\n' + |
|||
' color: #fff;\n' + |
|||
' transition: background .18s ease, transform .18s ease;\n' + |
|||
' outline: none;\n' + |
|||
'}\n' + |
|||
'\n' + |
|||
'.pswp__button:hover {\n' + |
|||
' background: #3c3c50d9;\n' + |
|||
' transform: scale(1.08);\n' + |
|||
' outline: none;\n' + |
|||
'}\n' + |
|||
'\n' + |
|||
'.pswp__button.pswp__button--close {\n' + |
|||
' width: 40px;\n' + |
|||
' height: 40px;\n' + |
|||
' margin-top: 16px;\n' + |
|||
' margin-right: 16px;\n' + |
|||
'}\n' + |
|||
'\n' + |
|||
'.pswp__button.pswp__button--close .pswp__icn {\n' + |
|||
' width: 24px;\n' + |
|||
' height: 24px;\n' + |
|||
' top: 7px;\n' + |
|||
' left: 7px;\n' + |
|||
'}\n' + |
|||
'\n' + |
|||
'.pswp__button.pswp__button--arrow {\n' + |
|||
' width: 48px;\n' + |
|||
' height: 48px;\n' + |
|||
' margin-top: -24px;\n' + |
|||
'}\n' + |
|||
'\n' + |
|||
'.pswp__button.pswp__button--arrow .pswp__icn {\n' + |
|||
' width: 32px;\n' + |
|||
' height: 32px;\n' + |
|||
' margin-top: 0;\n' + |
|||
' top: 7px;\n' + |
|||
'}\n' + |
|||
'\n' + |
|||
'.pswp__button.pswp__button--arrow.pswp__button--arrow--prev {\n' + |
|||
' left: 16px;\n' + |
|||
'}\n' + |
|||
'\n' + |
|||
'.pswp__button.pswp__button--arrow.pswp__button--arrow--prev .pswp__icn {\n' + |
|||
' left: 12px;\n' + |
|||
'}\n' + |
|||
'\n' + |
|||
'.pswp__button.pswp__button--arrow.pswp__button--arrow--next {\n' + |
|||
' right: 16px\n' + |
|||
'}\n' + |
|||
'\n' + |
|||
'.pswp__button.pswp__button--arrow.pswp__button--arrow--next .pswp__icn { \n' + |
|||
' right: 12px;\n' + |
|||
'}'; |
|||
|
|||
@Directive({ |
|||
selector: '[tbPhotoSwipeGallery]', |
|||
standalone: false |
|||
}) |
|||
export class PhotoSwipeGalleryDirective implements OnInit, OnDestroy { |
|||
|
|||
@Input() galleryChildrenSelector = '.tb-image'; |
|||
@Input() imageCaptionSelector = '.tb-image-tooltip'; |
|||
|
|||
private lightbox: PhotoSwipeLightbox; |
|||
|
|||
constructor( |
|||
private elementRef: ElementRef<HTMLElement> |
|||
) {} |
|||
|
|||
ngOnInit(): void { |
|||
this.initPhotoSwipeGalleryStyle(); |
|||
this.lightbox = new PhotoSwipeLightbox({ |
|||
gallery: this.elementRef.nativeElement, |
|||
children: this.galleryChildrenSelector, |
|||
pswpModule: PhotoSwipe, |
|||
counter: false, |
|||
bgOpacity: 0, |
|||
mainClass: PHOTO_GALLERY_CLASS |
|||
}); |
|||
this.lightbox.addFilter('domItemData', (itemData, element) => { |
|||
let image: HTMLImageElement; |
|||
if (element instanceof HTMLImageElement) { |
|||
image = element; |
|||
} else { |
|||
image = element.querySelector('img'); |
|||
} |
|||
itemData.src = image.src; |
|||
itemData.width = image.naturalWidth; |
|||
itemData.height = image.naturalHeight; |
|||
itemData.thumbCropped = true; |
|||
return itemData; |
|||
}); |
|||
this.lightbox.on('uiRegister', () => { |
|||
this.lightbox.pswp.ui.registerElement({ |
|||
name: 'tb-photoswipe-caption', |
|||
order: 9, |
|||
isButton: false, |
|||
appendTo: 'root', |
|||
html: '<span class="tb-gallery-caption"></span><span class="tb-gallery-counter"></span>', |
|||
onInit: (el, pswp) => { |
|||
const caption = el.querySelector<HTMLElement>('.tb-gallery-caption'); |
|||
const counter = el.querySelector<HTMLElement>('.tb-gallery-counter'); |
|||
this.lightbox.pswp.on('change', () => { |
|||
counter.innerText = pswp.currIndex + 1 + pswp.options.indexIndicatorSep + pswp.getNumItems(); |
|||
const currSlideElement = this.lightbox.pswp.currSlide.data.element; |
|||
let imageTooltip: Element; |
|||
if (currSlideElement) { |
|||
imageTooltip = currSlideElement.querySelector(this.imageCaptionSelector); |
|||
} |
|||
if (imageTooltip) { |
|||
caption.style.display = 'block'; |
|||
caption.innerHTML = imageTooltip.innerHTML || ''; |
|||
} else { |
|||
caption.style.display = 'none'; |
|||
} |
|||
}); |
|||
} |
|||
}); |
|||
}); |
|||
this.lightbox.init(); |
|||
} |
|||
|
|||
ngOnDestroy(): void { |
|||
if (this.lightbox) { |
|||
this.lightbox.destroy(); |
|||
} |
|||
} |
|||
|
|||
private initPhotoSwipeGalleryStyle(): void { |
|||
const existingElement = document.getElementById(PHOTO_GALLERY_STYLE_ID); |
|||
if (!existingElement) { |
|||
const cssParser = new cssjs(); |
|||
cssParser.testMode = false; |
|||
cssParser.cssPreviewNamespace = PHOTO_GALLERY_CLASS; |
|||
cssParser.createStyleElement(PHOTO_GALLERY_STYLE_ID, PHOTO_GALLERY_STYLE); |
|||
} |
|||
} |
|||
} |
|||
Loading…
Reference in new issue