@tomasvn/glightbox 0.0.0-stage → 3.3.4

package/index.d.ts

@@ -0,0 +1,586 @@
+// Type definitions for Glightbox 3.2.2
+// Project: https://github.com/biati-digital/glightbox/blob/master/README.md
+// Definitions by: Ngoc Tu Nguyen <https://github.com/tomasvn>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+
+declare namespace Glightbox {
+    /**
+     * Youtube iframe api
+     * @see https://developers.google.com/youtube/player_parameters
+     */
+    interface YoutubeOptions {
+        /**
+         * Whether to use an alternative version of Youtube without cookies
+         */
+        noCookie?: boolean;
+        /**
+         * Show related videos
+         */
+        rel?: number;
+        /**
+         * Show video title
+         * @see https://google.com/youtube/player_parameters#release_notes_08_23_2018
+         *
+         * @deprecated
+         */
+        showinfo?: number;
+        /**
+         * Show or hide annotations
+         */
+        iv_load_policy?: number;
+    }
+
+    /**
+     * Vimeo embed video api
+     *
+     * @see https://help.vimeo.com/hc/en-us/articles/360001494447-Using-Player-Parameters
+     */
+    interface VimeoOptions {
+        /**
+         * Show the byline on the video.
+         */
+        byline?: boolean;
+        /**
+         * Show the author’s profile image (portrait)
+         */
+        portrait?: boolean;
+        /**
+         * Show the video’s title.
+         */
+        title?: boolean;
+        /**
+         * Enable or disable the background of the player
+         */
+        transparent?: boolean;
+    }
+
+    interface Config {
+        /**
+         * Set aspect ratio
+         */
+        ratio?: string;
+        /**
+         *  Toggles whether fullscreen should be enabled or
+         *  whether to use native iOS fullscreen when entering
+         *  fullscreen
+         */
+        fullscreen?: Record<'enabled' | 'iosNative', boolean>;
+        youtube?: YoutubeOptions;
+        vimeo?: VimeoOptions;
+    }
+
+    interface PlyrOptions {
+        /**
+         * Get Plyr.js css files from cdn
+         */
+        css?: string;
+        /**
+         * Get Plyr.js js files from cdn
+         */
+        js?: string;
+        config?: Config;
+    }
+
+    interface Options {
+        /**
+         * Name of the selector for example '.glightbox' or 'data-glightbox'
+         * or '*[data-glightbox]'
+         *
+         * @default '.glightbox'
+         */
+        selector?: string;
+        /**
+         * Instead of passing a selector you can pass all the items
+         * that you want in the gallery.
+         *
+         * @default null
+         */
+        elements?: ({ href: string; type: 'image'; title?: string; description?: string; alt?: string } | { href: string; type: 'video'; source: string; width?: number } | { content: string | HTMLElement })[] | null;
+        /**
+         * Name of the skin, it will add a class to the lightbox
+         * so you can style it with css.
+         *
+         * @default 'clean'
+         */
+        skin?: string;
+        /**
+         * Name of the effect on lightbox open. (zoom, fade, none)
+         *
+         * @default 'zoom'
+         */
+        openEffect?: string;
+        /**
+         * Name of the effect on lightbox close. (zoom, fade, none)
+         *
+         * @default 'zoom'
+         */
+        closeEffect?: string;
+        /**
+         * Name of the effect on slide change. (slide, fade, zoom, none)
+         *
+         * @default 'slide'
+         */
+        slideEffect?: string;
+        /**
+         * More text for descriptions on mobile devices.
+         *
+         * @default 'See more'
+         */
+        moreText?: string;
+        /**
+         * Text for collapsing expanded descriptions.
+         *
+         * @default 'See less'
+         */
+        lessText?: string;
+        /**
+         * Number of characters to display on the description before adding
+         * the moreText link (only for mobiles),
+         * if 0 it will display the entire description.
+         *
+         * @default 60
+         */
+        moreLength?: number;
+        /**
+         * Show or hide the close button.
+         *
+         * @default true
+         */
+        closeButton?: boolean;
+        /**
+         * Text for the close button.
+         *
+         * @default 'Close'
+         */
+        closeButtonText?: string;
+        /**
+         * Text for the next slide button.
+         *
+         * @default 'Next'
+         */
+        nextButtonText?: string;
+        /**
+         * Text for the previous slide button.
+         *
+         * @default 'Previous'
+         */
+        prevButtonText?: string;
+        /**
+         * Enable or disable the touch navigation (swipe).
+         *
+         * @default true
+         */
+        touchNavigation?: boolean;
+        /**
+         * Image follow axis when dragging on mobile.
+         *
+         * @default true
+         */
+        touchFollowAxis?: boolean;
+        /**
+         * Enable or disable the keyboard navigation.
+         *
+         * @default true
+         */
+        keyboardNavigation?: boolean;
+        /**
+         * Close the lightbox when clicking outside the active slide.
+         *
+         * @default true
+         */
+        closeOnOutsideClick?: boolean;
+        /**
+         * Start lightbox at defined index.
+         *
+         * @default 0
+         */
+        startAt?: number;
+        /**
+         * Default width for inline elements and iframes
+         *
+         * @default '900px'
+         */
+        width?: string;
+        /**
+         * Default height for inline elements and iframes
+         *
+         * @default '506px'
+         */
+        height?: string;
+        /**
+         * Default width for videos.
+         *
+         * @default '560px'
+         */
+        videosWidth?: string;
+        /**
+         * Global position for slides description
+         *
+         * @default 'bottom'
+         */
+        descPosition?: string;
+        /**
+         * Loop slides on end.
+         *
+         * @default false
+         */
+        loop?: Exclude<boolean, undefined>;
+        /**
+         * Enable or disable zoomable images
+         *
+         * @default true
+         */
+        zoomable?: boolean;
+        /**
+         * Enable or disable mouse drag to go prev and next slide
+         *
+         * @default true
+         */
+        draggable?: boolean;
+        /**
+         * Used with draggable. Number of pixels the user
+         * has to drag to go to prev or next slide.
+         *
+         * @default 40
+         */
+        dragToleranceX?: number;
+        /**
+         * Used with draggable. Number of pixels the user has to drag
+         * up or down to close the lightbox
+         *
+         * @default 65
+         */
+        dragToleranceY?: number;
+        /**
+         * If true the slide will automatically change to prev/next or close
+         * if dragToleranceX or dragToleranceY is reached,
+         * otherwise it will wait till the mouse is released.
+         *
+         * @default false
+         */
+        dragAutoSnap?: boolean;
+        /**
+         * Enable or disable preloading.
+         *
+         * @default true
+         */
+        preload?: boolean;
+        /**
+         * Set your own svg icons.
+         */
+        svg?: Record<'close' | 'next' | 'prev', string>;
+        /**
+         * Define or adjust lightbox animations.
+         *
+         * @see:
+         */
+        cssEffects?: Record<string, Record<'in' | 'out', string>>;
+        /**
+         * You can completely change the html of GLightbox.
+         */
+        lightboxHTML?: string;
+        /**
+         * You can completely change the html of the individual slide.
+         */
+        slideHTML?: string;
+        /**
+         * Autoplay videos on open.
+         *
+         * @default true
+         */
+        autoplayVideos?: boolean;
+        /**
+         * If true video will be focused on play to allow
+         * keyboard sortcuts for the player, this will deactivate
+         * prev and next arrows to change slide.
+         *
+         */
+        autofocusVideos?: boolean;
+        plyr?: PlyrOptions;
+    }
+
+    type EventTypes = 'open' | 'close' | 'slide_before_change' | 'slide_changed' | 'slide_before_load' | 'slide_after_load' | 'slide_inserted' | 'slide_removed';
+
+    interface SlideConfig {
+        href?: string;
+        sizes?: string;
+        srcset?: string;
+        title?: string;
+        type?: 'image' | 'video' | 'inline';
+        videoProvider?: string;
+        description?: string;
+        alt?: string;
+        descPosition?: 'bottom' | 'top' | 'left' | 'right';
+        effect?: string;
+        width?: string;
+        height?: string;
+        content?: boolean;
+        zoomable?: boolean;
+        draggable?: boolean;
+    }
+
+    interface BaseData {
+        index?: number;
+        slide?: Element;
+        slideNode?: Element;
+        slideConfig?: SlideConfig;
+        slideIndex?: number;
+        trigger?: Element;
+        player?: null | Record<any, any>;
+    }
+
+    type Payload<T extends EventTypes> = {
+        open: undefined;
+        close: undefined;
+        slide_before_change: {
+            prev: BaseData;
+            current: BaseData;
+        };
+        slide_changed: {
+            prev: BaseData;
+            current: BaseData;
+        };
+        slide_before_load: BaseData;
+        slide_after_load: BaseData;
+        slide_inserted: BaseData;
+        slide_removed: number;
+    }[T];
+}
+
+declare class GlightboxInit {
+    constructor(options: Glightbox.Options);
+
+    /**
+     * Initialize lightbox
+     */
+    private init(): void;
+
+    /**
+     * Open lightbox
+     */
+    public open(element?: Element, startAt?: number): void;
+
+    /**
+     * Open at specific index
+     */
+    public openAt(index?: number): void;
+
+    /**
+     * Set Slide
+     */
+    private showSlide(index?: number, first?: boolean): void;
+
+    /**
+     * Preload slides
+     */
+    private preloadSlide(index: number): null;
+
+    /**
+     * Load previous slide
+     * calls goToslide
+     */
+    public prevSlide(): void;
+
+    /**
+     * Load next slide
+     * calls goToslide
+     */
+    public nextSlide(): void;
+
+    /**
+     * Go to slide
+     * calls set slide
+     */
+    public goToSlide(index?: number): void;
+
+    /**
+     * Insert slide
+     */
+    insertSlide(config?: Record<any, any>, index?: number): void;
+
+    /**
+     * Remove slide
+     */
+    public removeSlide(index?: number): boolean | undefined;
+
+    /**
+     * Slide In
+     */
+    private slideAnimateIn(slide: Element, first: boolean): null;
+
+    /**
+     * Slide out
+     */
+    private slideAnimateOut(): void;
+
+    /**
+     * Get all defined players
+     */
+    getAllPlayers(): Record<string, any>;
+
+    /**
+     * Get player at index
+     */
+    getSlidePlayerInstance(index: number): boolean | Record<any, any>;
+
+    /**
+     * Stop video at specified
+     * node or index
+     */
+    stopSlideVideo(slide: Element | number): void;
+
+    /**
+     * Stop player at specified index
+     */
+    slidePlayerPause(slide: Element | number): void;
+
+    /**
+     * Stop video at specified
+     * node or index
+     *
+     * @deprecated use slidePlayerPause instead
+     */
+    stopSlide(slide: Element | number): void;
+
+    /**
+     * Play video at specified
+     * node or index
+     */
+    playSlideVideo(slide: Element | number): void;
+
+    /**
+     * Play media player at specified
+     * node or index
+     */
+    slidePlayerPlay(slide: Element | number): void;
+
+    /**
+     * Set the entire elements
+     * in the gallery, it replaces all
+     * the existing elements
+     * with the specified list
+     */
+    setElements(elements: any[]): void;
+
+    /**
+     * Return the index
+     * of the specified node,
+     * this node is for example an image, link, etc.
+     * that when clicked it opens the lightbox
+     * its position in the elements array can change
+     * when using insertSlide or removeSlide so we
+     * need to find it in the elements list
+     */
+    private getElementIndex(node: Node): boolean | number;
+
+    /**
+     * Get elements
+     * returns an array containing all
+     * the elements that must be displayed in the
+     * lightbox
+     */
+    private getElements(): any[];
+
+    /**
+     * Return only the elements
+     * from a specific gallery
+     */
+    private getGalleryElements(list: any[], gallery: any[]): any[];
+
+    /**
+     * Get selector
+     */
+    private getSelector(): boolean | string;
+
+    /**
+     * Get the active slide
+     */
+    public getActiveSlide(): Element;
+
+    /**
+     * Get the active index
+     */
+    public getActiveSlideIndex(): number | undefined;
+
+    /**
+     * Get the defined
+     * effects as string
+     */
+    private getAnimationClasses(): string;
+
+    /**
+     * Build the structure
+     */
+    private build(): null;
+
+    /**
+     * Handle resize
+     * Create only to handle
+     * when the height of the screen
+     * is lower than the slide content
+     * this helps to resize videos vertically
+     * and images with description
+     */
+    private resize(slide?: null): void;
+
+    /**
+     * Reload Lightbox
+     * reload and apply events to nodes
+     */
+    public reload(): void;
+
+    /**
+     * Update navigation classes on slide change
+     */
+    private updateNavigationClasses(): void;
+
+    /**
+     * Handle loop config
+     */
+    private loop(): void;
+
+    /**
+     * Close Lightbox
+     * closes the lightbox and removes the slides
+     * and some classes
+     */
+    public close(): boolean | undefined;
+
+    /**
+     * Destroy lightbox
+     * and all events
+     */
+    public destroy(): void;
+
+    /**
+     * Set event
+     */
+    public on(eventName: Glightbox.EventTypes, callback: () => void, once?: boolean): void;
+
+    /**
+     * Set event once
+     */
+    public once(eventName: Glightbox.EventTypes, callback: () => void): void;
+
+    /**
+     * Triggers an specific event
+     * with data
+     */
+    public trigger<T extends Glightbox.EventTypes>(eventName: T, data?: Glightbox.Payload<T>): void;
+
+    /**
+     * Removes all events
+     * set using the API
+     */
+    private clearAllEvents(): void;
+
+    /**
+     * Get Version
+     */
+    version(): string;
+}
+
+declare function GLightbox(options: Glightbox.Options): InstanceType<typeof GlightboxInit>;
+
+export = GLightbox;
+export as namespace GLightbox;

package/package.json

@@ -1,6 +1,62 @@
 {
   "name": "@tomasvn/glightbox",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "3.3.4",
+  "description": "Pure Javascript lightbox",
+  "main": "dist/js/glightbox.min.js",
+  "scripts": {
+    "build": "node development/build.js",
+    "test": "node --test",
+    "watch": "node development/watcher.js",
+    "lint": "eslint \"src/js/**/*.js\"",
+    "format": "prettier --write \"src/js/**/*.js\"",
+    "prepare": "husky"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "author": "Biati Digital",
+  "types": "./index.d.ts",
+  "keywords": [
+    "lightbox",
+    "javascript",
+    "gallery",
+    "popup"
+  ],
+  "license": "MIT",
+  "homepage": "https://biati-digital.github.io/glightbox/",
+  "repository": {
+    "url": "https://github.com/biati-digital/glightbox",
+    "type": "git"
+  },
+  "bugs": "https://github.com/biati-digital/glightbox/issues",
+  "devDependencies": {
+    "@babel/cli": "^7.10.3",
+    "@babel/core": "^7.10.3",
+    "@babel/node": "^7.10.3",
+    "@babel/preset-env": "^7.10.3",
+    "@babel/register": "^7.10.3",
+    "archiver": "^3.1.1",
+    "babel-plugin-transform-runtime": "^6.23.0",
+    "chokidar": "^3.4.0",
+    "clean-css": "^4.2.3",
+    "css-mqpacker": "^7.0.0",
+    "eslint": "^7.16.0",
+    "fs-jetpack": "^2.4.0",
+    "husky": "^9.1.7",
+    "install": "^0.13.0",
+    "node-notifier": "^5.4.0",
+    "npm": "^6.14.10",
+    "postcss": "^7.0.32",
+    "postcss-nested": "^4.1.1",
+    "postcss-preset-env": "^6.5.0",
+    "postcss-prettify": "^0.3.4",
+    "prettier": "^3.10.1",
+    "rollup": "^1.32.1",
+    "rollup-plugin-babel": "^4.4.0",
+    "rollup-plugin-commonjs": "^9.2.0",
+    "rollup-plugin-node-resolve": "^4.0.0",
+    "temporary": "^1.1.0",
+    "terser": "^4.8.0",
+    "uninstall": "0.0.0"
+  }
+}

package/src/js/.jshintrc

@@ -0,0 +1,6 @@
+{
+    "esnext": true,
+    "esversion": 6,
+    "maxparams": 4,
+    "asi": false
+}