lightgallery 2.9.0 → 3.0.0-beta.3

package/dist/types/lg-spring-runner.d.ts

@@ -0,0 +1,14 @@
+import { type SpringConfig } from './headless/index';
+/**
+ * rAF driver for the shared spring math: advances one spring per track
+ * each frame and hands the values to the caller's DOM writer. The math
+ * (and therefore the feel) lives in @lightgallery/headless; this file
+ * only owns scheduling.
+ */
+export interface SpringTrack extends SpringConfig {
+    from: number;
+    /** Seed velocity, px/ms, the gesture's windowed release velocity. */
+    velocity: number;
+    target: number;
+}
+export declare function runSprings(tracks: SpringTrack[], onFrame: (values: number[]) => void, onDone?: () => void): () => void;

package/dist/types/lg-toolbar-overflow.d.ts

@@ -0,0 +1,36 @@
+export interface ToolbarOverflowOptions {
+    /** Id of the More options button; the menu id derives from it. */
+    id: string;
+    /** Accessible name of the More options button and its menu. */
+    label: string;
+}
+/**
+ * Keeps the toolbar on one row: measures it, hides the buttons that do
+ * not fit (`data-lg-overflow`) and lists them in a "More options" menu
+ * whose items trigger the hidden buttons, so every plugin's handlers keep
+ * working unchanged.
+ */
+export declare class ToolbarOverflow {
+    private readonly toolbar;
+    private readonly options;
+    private readonly more;
+    private menu;
+    private frame;
+    private movedSignature;
+    private readonly widths;
+    private readonly resizeObserver?;
+    private readonly mutationObserver?;
+    constructor(toolbar: HTMLElement, options: ToolbarOverflowOptions);
+    /** Re-measure the row and move buttons in or out of the menu. */
+    update(): void;
+    /** Close the menu; optionally hand focus back to the More button. */
+    close(returnFocus: boolean): void;
+    destroy(): void;
+    private readonly requestUpdate;
+    private readonly onMoreClick;
+    private open;
+    private renderMenu;
+    private items;
+    private readonly onMenuKeydown;
+    private readonly onDocumentPointerDown;
+}

package/{lg-utils.d.ts → dist/types/lg-utils.d.ts}

@@ -1,228 +1,236 @@
-import { lgQuery } from './lgQuery';
-import { VideoSource } from './plugins/video/types';
-import { VideoInfo } from './types';
-export interface ImageSize {
-    width: number;
-    height: number;
-}
-export interface ImageSources {
-    media?: string;
-    srcset: string;
-    sizes?: string;
-    type?: string;
-}
-export interface GalleryItem {
-    /**
-     * url of the media
-     * @data-attr data-src
-     */
-    src?: string;
-    /**
-     * Source attributes for the <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source#attributes">picture</a> element
-     * @data-attr data-sources
-     */
-    sources?: ImageSources[];
-    /**
-     * Thumbnail url
-     * @description By default lightGallery uses the image inside gallery selector as thumbnail.
-     * But, If you want to use external image for thumbnail,
-     * pass the thumbnail url via any data attribute and
-     * pass the attribute name via exThumbImage option
-     * @example
-     * <div id="lightGallery">
-     *     <a href="a.jpg" data-external-thumb-image="images/externalThumb.jpg" ><img src="thumb.jpg" /></a>
-     * </div>
-     *
-     * lightGallery(document.getElementById('lightGallery'), {
-     *     exThumbImage: 'data-external-thumb-image'
-     * })
-     * @data-attr data-*
-     */
-    thumb?: string;
-    /**
-     * alt attribute for the image
-     * @data-attr alt
-     */
-    alt?: string;
-    /**
-     * Title attribute for the video
-     * @data-attr title
-     */
-    title?: string;
-    /**
-     * Title for iframe
-     * @data-attr data-iframe-title
-     */
-    iframeTitle?: string;
-    /**
-     * Caption for the slide
-     * @description You can either pass the HTML markup or the ID or class name of the element which contains the captions
-     * @data-attr data-sub-html
-     */
-    subHtml?: string;
-    /**
-     * url of the file which contain the sub html.
-     * @description Note - Does not support Internet Explorer browser
-     * @data-attr data-sub-html-url
-     */
-    subHtmlUrl?: string;
-    /**
-     * Video source
-     * @data-attr data-video
-     */
-    video?: VideoSource;
-    /**
-     * Poster url
-     * @data-attr data-poster
-     */
-    poster?: string;
-    /**
-     * Custom slide name to use in the url when hash plugin is enabled
-     * @data-attr data-slide-name
-     */
-    slideName?: string;
-    /**
-     * List of images and viewport's max width separated by comma.
-     * @description Ex?: img/1-375.jpg 375, img/1-480.jpg 480, img/1-757.jpg 757.
-     * @data-attr data-responsive
-     */
-    responsive?: string;
-    /**
-     * srcset attribute values for the main image
-     * @data-attr data-srcset
-     */
-    srcset?: string;
-    /**
-     * srcset sizes attribute for the main image
-     * @data-attr data-sizes
-     */
-    sizes?: string;
-    /**
-     * Set true is you want to open your url in an iframe
-     * @data-attr data-iframe
-     */
-    iframe?: boolean;
-    /**
-     * Download url for your image/video.
-     * @description Pass false if you want to disable the download button.
-     * @data-attr data-download-url
-     */
-    downloadUrl?: string | boolean;
-    /**
-     * Name of the file after it is downloaded.
-     * @description The HTML value of the download attribute.
-     * There are no restrictions on allowed values, and the browser will automatically
-     * detect the correct file extension and add it to the file (.img, .pdf, .txt, .html, etc.).
-     * <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-download">More info</a>
-     * @data-attr data-download
-     */
-    download?: string | boolean;
-    /**
-     * Actual size of the image in px.
-     * @description This is used in zoom plugin to see the actual size of the image when double taped on the image.
-     * @data-attr data-width
-     */
-    width?: string;
-    /**
-     * Facebook share URL.
-     * @description Specify only if you want to provide separate share URL for the specific slide. By default, current browser URL is taken.
-     * @data-attr data-facebook-share-url
-     */
-    facebookShareUrl?: string;
-    /**
-     * Tweet text
-     * @data-attr data-tweet-text
-     */
-    tweetText?: string;
-    /**
-     * Twitter share URL.
-     * @description Specify only if you want to provide separate share URL for the specific slide. By default, current browser URL will be taken.
-     * @data-attr data-twitter-share-url
-     */
-    twitterShareUrl?: string;
-    /**
-     * Pinterest share URL.
-     * @description Specify only if you want to provide separate share URL for the specific slide. By default, current browser URL will be taken.
-     * Note?: Pinterest requires absolute URL
-     * @data-attr data-pinterest-share-url
-     */
-    pinterestShareUrl?: string;
-    /**
-     * Description for Pinterest post.
-     * @data-attr data-pinterest-text
-     */
-    pinterestText?: string;
-    /**
-     * Facebook comments body html
-     * @description Please refer <a href="https://developers.facebook.com/docs/plugins/comments/#comments-plugin">facebook official documentation</a> for generating the HTML markup
-     * @example
-     * <div
-     *      class="fb-comments"
-     *      data-href="https://www.lightgalleryjs.com/demos/comment-box/#facebook-comments-demo"
-     *      data-width="400"
-     *      data-numposts="5">
-     * </div>
-     * @data-attr data-fb-html
-     */
-    fbHtml?: string;
-    /**
-     * Disqus page identifier
-     * @description Please refer official <a href="https://help.disqus.com/en/articles/1717084-javascript-configuration-variables">disqus documentation</a> for more info
-     * @data-attr data-disqus-identifier
-     */
-    disqusIdentifier?: string;
-    /**
-     * Disqus page url
-     * @description Please refer official <a href="https://help.disqus.com/en/articles/1717084-javascript-configuration-variables">disqus documentation</a> for more info
-     * @data-attr data-disqus-url
-     */
-    disqusUrl?: string;
-    __slideVideoInfo?: VideoInfo;
-    [key: string]: any;
-}
-export declare function convertToData(attr: string): string;
-declare const utils: {
-    /**
-     * Fetches HTML content from a given URL and inserts it into a specified element.
-     *
-     * @param url - The URL to fetch the HTML content from.
-     * @param element - The DOM element (jQuery object) to insert the HTML content into.
-     * @param insertMethod - The method to insert the HTML ('append' or 'replace').
-     */
-    fetchCaptionFromUrl(url: string, element: lgQuery, insertMethod: 'append' | 'replace'): void;
-    /**
-     * get possible width and height from the lgSize attribute. Used for ZoomFromOrigin option
-     */
-    getSize(el: HTMLElement, container: lgQuery, spacing?: number, defaultLgSize?: string | undefined): ImageSize | undefined;
-    /**
-     * @desc Get transform value based on the imageSize. Used for ZoomFromOrigin option
-     * @param {jQuery Element}
-     * @returns {String} Transform CSS string
-     */
-    getTransform(el: HTMLElement, container: lgQuery, top: number, bottom: number, imageSize?: ImageSize | undefined): string | undefined;
-    getIframeMarkup(iframeWidth: string, iframeHeight: string, iframeMaxWidth: string, iframeMaxHeight: string, src?: string | undefined, iframeTitle?: string | undefined): string;
-    getImgMarkup(index: number, src: string, altAttr: string, srcset?: string | undefined, sizes?: string | undefined, sources?: ImageSources[] | undefined): string;
-    getResponsiveSrc(srcItms: string[]): string;
-    isImageLoaded(img: HTMLImageElement): boolean;
-    getVideoPosterMarkup(_poster: string, dummyImg: string | HTMLElement, videoContStyle: string, playVideoString: string, _isVideo?: VideoInfo | undefined): string;
-    getFocusableElements(container: HTMLElement): NodeListOf<Element>;
-    /**
-     * @desc Create dynamic elements array from gallery items when dynamic option is false
-     * It helps to avoid frequent DOM interaction
-     * and avoid multiple checks for dynamic elments
-     *
-     * @returns {Array} dynamicEl
-     */
-    getDynamicOptions(items: any, extraProps: string[], getCaptionFromTitleOrAlt: boolean, exThumbImage: string): GalleryItem[];
-    isMobile(): boolean;
-    /**
-     * @desc Check the given src is video
-     * @param {String} src
-     * @return {Object} video type
-     * Ex:{ youtube  :  ["//www.youtube.com/watch?v=c0asJgSyxcY", "c0asJgSyxcY"] }
-     *
-     * @todo - this information can be moved to dynamicEl to avoid frequent calls
-     */
-    isVideo(src: string, isHTML5VIdeo: boolean, index: number): VideoInfo | undefined;
-};
-export default utils;
+import { lgQuery } from './lgQuery';
+import { VideoSource } from './plugins/video/types';
+import { VideoInfo } from './types';
+export interface ImageSize {
+    width: number;
+    height: number;
+}
+export interface ImageSources {
+    media?: string;
+    srcset: string;
+    sizes?: string;
+    type?: string;
+}
+export interface GalleryItem {
+    /**
+     * url of the media
+     * @data-attr data-src
+     */
+    src?: string;
+    /**
+     * Source attributes for the <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source#attributes">picture</a> element
+     * @data-attr data-sources
+     */
+    sources?: ImageSources[];
+    /**
+     * Thumbnail url
+     * @description By default lightGallery uses the image inside gallery selector as thumbnail.
+     * But, If you want to use external image for thumbnail,
+     * pass the thumbnail url via any data attribute and
+     * pass the attribute name via exThumbImage option
+     * @example
+     * <div id="lightGallery">
+     *     <a href="a.jpg" data-external-thumb-image="images/externalThumb.jpg" ><img src="thumb.jpg" /></a>
+     * </div>
+     *
+     * lightGallery(document.getElementById('lightGallery'), {
+     *     exThumbImage: 'data-external-thumb-image'
+     * })
+     * @data-attr data-*
+     */
+    thumb?: string;
+    /**
+     * alt attribute for the image
+     * @data-attr alt
+     */
+    alt?: string;
+    /**
+     * Title attribute for the video
+     * @data-attr title
+     */
+    title?: string;
+    /**
+     * Title for iframe
+     * @data-attr data-iframe-title
+     */
+    iframeTitle?: string;
+    /**
+     * Caption for the slide
+     * @description You can either pass the HTML markup or the ID or class name of the element which contains the captions
+     * @data-attr data-sub-html
+     */
+    subHtml?: string;
+    /**
+     * url of the file which contain the sub html.
+     * @description Note - Does not support Internet Explorer browser
+     * @data-attr data-sub-html-url
+     */
+    subHtmlUrl?: string;
+    /**
+     * Video source
+     * @data-attr data-video
+     */
+    video?: VideoSource;
+    /**
+     * Poster url
+     * @data-attr data-poster
+     */
+    poster?: string;
+    /**
+     * Custom slide name to use in the url when hash plugin is enabled
+     * @data-attr data-slide-name
+     */
+    slideName?: string;
+    /**
+     * List of images and viewport's max width separated by comma.
+     * @description Ex?: img/1-375.jpg 375, img/1-480.jpg 480, img/1-757.jpg 757.
+     * @data-attr data-responsive
+     */
+    responsive?: string;
+    /**
+     * srcset attribute values for the main image
+     * @data-attr data-srcset
+     */
+    srcset?: string;
+    /**
+     * srcset sizes attribute for the main image
+     * @data-attr data-sizes
+     */
+    sizes?: string;
+    /**
+     * Set true is you want to open your url in an iframe
+     * @data-attr data-iframe
+     */
+    iframe?: boolean;
+    /**
+     * Download url for your image/video.
+     * @description Pass false if you want to disable the download button.
+     * @data-attr data-download-url
+     */
+    downloadUrl?: string | boolean;
+    /**
+     * Name of the file after it is downloaded.
+     * @description The HTML value of the download attribute.
+     * There are no restrictions on allowed values, and the browser will automatically
+     * detect the correct file extension and add it to the file (.img, .pdf, .txt, .html, etc.).
+     * <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-download">More info</a>
+     * @data-attr data-download
+     */
+    download?: string | boolean;
+    /**
+     * Actual size of the image in px.
+     * @description This is used in zoom plugin to see the actual size of the image when double taped on the image.
+     * @data-attr data-width
+     */
+    width?: string;
+    /**
+     * Canonical share URL for the native share sheet (Web Share API).
+     * @description Specify only if you want a separate URL for the specific
+     * slide. Falls back to the network-specific share URLs, then the current
+     * browser URL.
+     * @data-attr data-share-url
+     */
+    shareUrl?: string;
+    /**
+     * Facebook share URL.
+     * @description Specify only if you want to provide separate share URL for the specific slide. By default, current browser URL is taken.
+     * @data-attr data-facebook-share-url
+     */
+    facebookShareUrl?: string;
+    /**
+     * Tweet text
+     * @data-attr data-tweet-text
+     */
+    tweetText?: string;
+    /**
+     * Twitter share URL.
+     * @description Specify only if you want to provide separate share URL for the specific slide. By default, current browser URL will be taken.
+     * @data-attr data-twitter-share-url
+     */
+    twitterShareUrl?: string;
+    /**
+     * Pinterest share URL.
+     * @description Specify only if you want to provide separate share URL for the specific slide. By default, current browser URL will be taken.
+     * Note?: Pinterest requires absolute URL
+     * @data-attr data-pinterest-share-url
+     */
+    pinterestShareUrl?: string;
+    /**
+     * Description for Pinterest post.
+     * @data-attr data-pinterest-text
+     */
+    pinterestText?: string;
+    /**
+     * Facebook comments body html
+     * @description Please refer <a href="https://developers.facebook.com/docs/plugins/comments/#comments-plugin">facebook official documentation</a> for generating the HTML markup
+     * @example
+     * <div
+     *      class="fb-comments"
+     *      data-href="https://www.example.com/your-page/#lg=1&slide=0"
+     *      data-width="400"
+     *      data-numposts="5">
+     * </div>
+     * @data-attr data-fb-html
+     */
+    fbHtml?: string;
+    /**
+     * Disqus page identifier
+     * @description Please refer official <a href="https://help.disqus.com/en/articles/1717084-javascript-configuration-variables">disqus documentation</a> for more info
+     * @data-attr data-disqus-identifier
+     */
+    disqusIdentifier?: string;
+    /**
+     * Disqus page url
+     * @description Please refer official <a href="https://help.disqus.com/en/articles/1717084-javascript-configuration-variables">disqus documentation</a> for more info
+     * @data-attr data-disqus-url
+     */
+    disqusUrl?: string;
+    __slideVideoInfo?: VideoInfo;
+    [key: string]: any;
+}
+export declare function convertToData(attr: string): string;
+declare const utils: {
+    /**
+     * Fetches HTML content from a given URL and inserts it into a specified element.
+     *
+     * @param url - The URL to fetch the HTML content from.
+     * @param element - The DOM element (jQuery object) to insert the HTML content into.
+     * @param insertMethod - The method to insert the HTML ('append' or 'replace').
+     */
+    fetchCaptionFromUrl(url: string, element: lgQuery, insertMethod: 'append' | 'replace'): void;
+    /**
+     * get possible width and height from the lgSize attribute. Used for ZoomFromOrigin option
+     */
+    getSize(el: HTMLElement, container: lgQuery, spacing?: number, defaultLgSize?: string): ImageSize | undefined;
+    /**
+     * @desc Get transform value based on the imageSize. Used for ZoomFromOrigin option
+     * @param {jQuery Element}
+     * @returns {String} Transform CSS string
+     */
+    getTransform(el: HTMLElement, container: lgQuery, top: number, bottom: number, imageSize?: ImageSize): string | undefined;
+    getIframeMarkup(iframeWidth: string, iframeHeight: string, iframeMaxWidth: string, iframeMaxHeight: string, src?: string, iframeTitle?: string): string;
+    getImgMarkup(index: number, src: string, altAttr: string, srcset?: string, sizes?: string, sources?: ImageSources[]): string;
+    getResponsiveSrc(srcItms: string[]): string;
+    isImageLoaded(img: HTMLImageElement): boolean;
+    getVideoPosterMarkup(_poster: string, dummyImg: string | HTMLElement, videoContStyle: string, playVideoString: string, _isVideo?: VideoInfo): string;
+    getFocusableElements(container: HTMLElement): NodeListOf<Element>;
+    /**
+     * @desc Create dynamic elements array from gallery items when dynamic option is false
+     * It helps to avoid frequent DOM interaction
+     * and avoid multiple checks for dynamic elments
+     *
+     * @returns {Array} dynamicEl
+     */
+    getDynamicOptions(items: any, extraProps: string[], getCaptionFromTitleOrAlt: boolean, exThumbImage: string): GalleryItem[];
+    isMobile(): boolean;
+    /**
+     * @desc Check the given src is video
+     * @param {String} src
+     * @return {Object} video type
+     * Ex:{ youtube  :  ["//www.youtube.com/watch?v=c0asJgSyxcY", "c0asJgSyxcY"] }
+     *
+     * @todo - this information can be moved to dynamicEl to avoid frequent calls
+     */
+    isVideo(src: string, isHTML5VIdeo: boolean, index: number): VideoInfo | undefined;
+};
+export default utils;

package/{lgQuery.d.ts → dist/types/lgQuery.d.ts}

@@ -1,56 +1,56 @@
-interface Offset {
-    left: number;
-    top: number;
-}
-export declare type LgQuery = (selector: any) => lgQuery;
-export declare class lgQuery {
-    static eventListeners: {
-        [key: string]: any[];
-    };
-    static generateUUID(): string;
-    private selector;
-    private firstElement;
-    private cssVenderPrefixes;
-    constructor(selector: string | Element);
-    private _getSelector;
-    private _each;
-    private _setCssVendorPrefix;
-    private _getFirstEl;
-    private isEventMatched;
-    attr(attr: string): string;
-    attr(attr: string, value: string | number | boolean): this;
-    find(selector: any): lgQuery;
-    first(): lgQuery;
-    eq(index: number): lgQuery;
-    parent(): lgQuery;
-    get(): HTMLElement;
-    removeAttr(attributes: string): this;
-    wrap(className: string): this;
-    addClass(classNames?: string): this;
-    removeClass(classNames: string): this;
-    hasClass(className: string): boolean;
-    hasAttribute(attribute: string): boolean;
-    toggleClass(className: string): this;
-    css(property: string, value?: string | number): this;
-    on(events: string, listener: (e: any) => void): this;
-    once(event: string, listener: (e: any) => void): this;
-    off(event: string): this;
-    trigger<Detail>(event: string, detail?: Detail): this;
-    load(url: string): this;
-    html(): string;
-    html(html: string): this;
-    append(html: string | HTMLElement): this;
-    prepend(html: string | HTMLElement): this;
-    remove(): this;
-    empty(): this;
-    scrollTop(): number;
-    scrollTop(scrollTop: number): this;
-    scrollLeft(): number;
-    scrollLeft(scrollLeft?: number): this;
-    offset(): Offset;
-    style(): CSSStyleDeclaration;
-    width(): number;
-    height(): number;
-}
-export declare function $LG(selector: any): lgQuery;
-export {};
+interface Offset {
+    left: number;
+    top: number;
+}
+export type LgQuery = (selector: any) => lgQuery;
+export declare class lgQuery {
+    static eventListeners: {
+        [key: string]: any[];
+    };
+    static generateUUID(): string;
+    private selector;
+    private firstElement;
+    private cssVenderPrefixes;
+    constructor(selector: string | Element);
+    private _getSelector;
+    private _each;
+    private _setCssVendorPrefix;
+    private _getFirstEl;
+    private isEventMatched;
+    attr(attr: string): string;
+    attr(attr: string, value: string | number | boolean): this;
+    find(selector: any): lgQuery;
+    first(): lgQuery;
+    eq(index: number): lgQuery;
+    parent(): lgQuery;
+    get(): HTMLElement;
+    removeAttr(attributes: string): this;
+    wrap(className: string): this;
+    addClass(classNames?: string): this;
+    removeClass(classNames: string): this;
+    hasClass(className: string): boolean;
+    hasAttribute(attribute: string): boolean;
+    toggleClass(className: string): this;
+    css(property: string, value?: string | number): this;
+    on(events: string, listener: (e: any) => void): this;
+    once(event: string, listener: (e: any) => void): this;
+    off(event: string): this;
+    trigger<Detail>(event: string, detail?: Detail): this;
+    load(url: string): this;
+    html(): string;
+    html(html: string): this;
+    append(html: string | HTMLElement): this;
+    prepend(html: string | HTMLElement): this;
+    remove(): this;
+    empty(): this;
+    scrollTop(): number;
+    scrollTop(scrollTop: number): this;
+    scrollLeft(): number;
+    scrollLeft(scrollLeft?: number): this;
+    offset(): Offset;
+    style(): CSSStyleDeclaration;
+    width(): number;
+    height(): number;
+}
+export declare function $LG(selector: any): lgQuery;
+export {};