@redot-src/glare 1.2.1 → 1.3.0

package/dist/icons.d.ts

@@ -5,7 +5,6 @@ export declare const icons: {
     readonly zoomIn: string;
     readonly zoomOut: string;
     readonly download: string;
-    readonly share: string;
     readonly thumbs: string;
     readonly play: string;
     readonly pause: string;

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import { Glare } from './core/glare';
-export type { AjaxOptions, AnimationEffect, BoundGroup, ClickAction, ClickActionName, ContentType, EventHandler, EventName, FullscreenOptions, GlareInstance, GlareOptions, GlareRefs, I18nDict, IframeOptions, ImageOptions, LifecycleEvent, LifecycleHandler, MediaProvider, ResolvedOptions, ShareOptions, SlideEvent, SlideItem, SlideSource, SlideshowOptions, ThumbsOptions, ToolbarButton, TouchOptions, TransitionEffect, VideoOptions, } from './types';
+export type { AjaxOptions, Anchor, AnchorPosition, AnimationEffect, BoundGroup, ClickAction, ClickActionName, ContentType, CustomButton, EventHandler, EventName, FullscreenOptions, GlareInstance, GlareOptions, GlareRefs, I18nDict, IframeOptions, ImageOptions, LifecycleEvent, LifecycleHandler, MediaProvider, ResolvedOptions, SlideEvent, SlideItem, SlideSource, SlideshowOptions, ThumbsFit, ThumbsOptions, ToolbarButton, TouchOptions, TransitionEffect, VideoOptions, } from './types';
 export type { Point, Zoom, ZoomState } from './core/zoom';
 export { Glare };
 export declare const autoBind: typeof Glare.autoBind;

package/dist/templates.d.ts

@@ -4,4 +4,3 @@ export declare const spinnerTemplate = "<div class=\"glare-spinner\" role=\"stat
 export declare const errorTemplate = "<div class=\"glare-error\"><p>{{ERROR}}</p></div>";
 export declare const videoTemplate: string;
 export declare const iframeTemplate = "<iframe class=\"glare-iframe\"></iframe>";
-export declare const shareTemplate: string;

package/dist/types.d.ts

@@ -1,16 +1,29 @@
 import type { Point, Zoom } from './core/zoom';
 import type { Fullscreen } from './modules/fullscreen';
-import type { Share } from './modules/share';
 import type { Slideshow } from './modules/slideshow';
 import type { Thumbs } from './modules/thumbs';
 export type ContentType = 'image' | 'video' | 'embed' | 'iframe' | 'inline' | 'ajax' | 'html';
-/** Effect played when the lightbox opens. */
-export type AnimationEffect = false | 'fade' | 'zoom';
-/** Effect played when moving between slides. */
-export type TransitionEffect = false | 'fade' | 'slide' | 'circular' | 'tube' | 'zoom-in-out' | 'rotate';
+/** Effect played when the lightbox opens and closes. Any other name is a custom effect, written in CSS. */
+export type AnimationEffect = false | 'fade' | 'zoom' | (string & {});
+/** A spot in the lightbox the opening image can grow from, as `<vertical>-<horizontal>`. */
+export type AnchorPosition = `${'top' | 'center' | 'bottom'}-${'left' | 'center' | 'right'}`;
+/** Where the `'zoom'` effect starts: the slide's trigger, a position, an element, or a selector. */
+export type Anchor = 'trigger' | AnchorPosition | HTMLElement | (string & {});
+/** Effect played when moving between slides. Any other name is a custom effect, written in CSS. */
+export type TransitionEffect = false | 'fade' | 'slide' | 'circular' | 'tube' | 'zoom-in-out' | 'rotate' | (string & {});
 export type ClickActionName = 'close' | 'next' | 'nextOrClose' | 'toggleControls' | 'zoom';
 export type ClickAction = false | ClickActionName | ((current: SlideItem, event: Event) => ClickActionName | false | void);
-export type ToolbarButton = 'zoom' | 'slideshow' | 'thumbs' | 'share' | 'download' | 'fullscreen' | 'more' | 'close' | (string & {});
+/** A toolbar button defined inline: rendered like the built-in ones and wired to `click`. */
+export interface CustomButton {
+    /** Identifies the button; also its `glare-button--{name}` class. */
+    name: string;
+    /** Tooltip and accessible name. */
+    label: string;
+    /** The button's content as HTML, usually an inline `<svg>`. */
+    icon: string;
+    click: (instance: GlareInstance, current: SlideItem, event: MouseEvent) => void;
+}
+export type ToolbarButton = 'zoom' | 'slideshow' | 'thumbs' | 'download' | 'fullscreen' | 'more' | 'close' | (string & {}) | CustomButton;
 export interface MediaProvider {
     matcher: RegExp;
     type?: ContentType;
@@ -77,10 +90,13 @@ export interface VideoOptions {
     format?: string;
     autoStart?: boolean;
 }
+/** How a thumbnail image fills its square, as CSS `object-fit`. */
+export type ThumbsFit = 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';
 export interface ThumbsOptions {
     autoStart?: boolean;
     parentEl?: string | HTMLElement;
     axis?: 'x' | 'y';
+    fit?: ThumbsFit;
 }
 export interface SlideshowOptions {
     autoStart?: boolean;
@@ -89,10 +105,6 @@ export interface SlideshowOptions {
 export interface FullscreenOptions {
     autoStart?: boolean;
 }
-export interface ShareOptions {
-    url?: string | ((item: SlideItem) => string);
-    tpl?: string;
-}
 export type I18nDict = {
     CLOSE: string;
     NEXT: string;
@@ -108,9 +120,7 @@ export type I18nDict = {
     FULL_SCREEN_EXIT: string;
     THUMBS: string;
     DOWNLOAD: string;
-    SHARE: string;
     MORE: string;
-    COPY: string;
     ZOOM: string;
     ZOOM_OUT: string;
 };
@@ -145,6 +155,7 @@ export interface GlareOptions extends EventHandlers {
     caption?: string | ((instance: GlareInstance, current: SlideItem) => string);
     animationEffect?: AnimationEffect;
     animationDuration?: number;
+    anchor?: Anchor;
     zoomOpacity?: boolean;
     transitionEffect?: TransitionEffect;
     transitionDuration?: number;
@@ -165,7 +176,6 @@ export interface GlareOptions extends EventHandlers {
     slideshow?: SlideshowOptions | boolean;
     thumbs?: ThumbsOptions | boolean;
     fullscreen?: FullscreenOptions | boolean;
-    share?: ShareOptions | boolean;
     lang?: string;
     i18n?: Record<string, Partial<I18nDict>>;
     baseTpl?: string;
@@ -208,7 +218,6 @@ export interface GlareInstance {
     slideshow?: Slideshow;
     thumbs?: Thumbs;
     fullscreen?: Fullscreen;
-    share?: Share;
     open(index?: number): void;
     close(): void;
     next(): void;

package/package.json

@@ -1,11 +1,14 @@
 {
   "name": "@redot-src/glare",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "description": "Modern, touch-enabled, fully customizable lightbox for the web — zero dependencies.",
   "type": "module",
   "license": "MIT",
-  "author": "Glare Contributors",
-  "homepage": "https://redot-src.github.io/glare/",
+  "author": {
+    "name": "Redot",
+    "url": "https://redot.dev"
+  },
+  "homepage": "https://glare.redot.dev/",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/redot-src/glare.git"
@@ -50,14 +53,11 @@
     "./dist/*": "./dist/*"
   },
   "scripts": {
-    "dev": "vite --mode demo",
+    "dev": "vitepress dev docs",
     "build": "npm run typecheck && vite build && vite build --mode umd && tsc -p tsconfig.build.json",
     "typecheck": "tsc --noEmit",
-    "demo:build": "vite build --mode demo",
-    "docs:dev": "vitepress dev docs",
     "docs:build": "vitepress build docs",
     "docs:preview": "vitepress preview docs",
-    "pages:build": "npm run docs:build && npm run demo:build",
     "prepublishOnly": "npm run build"
   },
   "devDependencies": {
@@ -65,5 +65,9 @@
     "typescript": "^5.9.2",
     "vite": "^7.1.5",
     "vitepress": "^1.6.4"
+  },
+  "allowScripts": {
+    "esbuild@0.28.2": true,
+    "esbuild@0.21.5": true
   }
 }

package/dist/modules/share.d.ts

@@ -1,17 +0,0 @@
-import type { ShareOptions } from '../types';
-import type { Glare } from '../core/glare';
-/** Overlay with social share links and a copyable URL. */
-export declare class Share {
-    private readonly glare;
-    private readonly container;
-    private readonly opts;
-    private overlay;
-    private off;
-    constructor(glare: Glare, container: HTMLElement, opts: ShareOptions);
-    get isOpen(): boolean;
-    open(): void;
-    close(): void;
-    destroy(): void;
-    private copy;
-    private resolveUrl;
-}