From 174742dd5fc1aac1875b6455b37276788e556481 Mon Sep 17 00:00:00 2001 From: Nick Ford Date: Fri, 15 Jan 2021 10:50:51 -0500 Subject: [PATCH] update example and docs --- docs/index.html | 46 ++++++++++++++++++- packages/freezeframe/dist/index.html | 46 ++++++++++++++++++- packages/freezeframe/dist/src/constants.d.ts | 21 --------- packages/freezeframe/dist/src/index.d.ts | 31 ------------- packages/freezeframe/dist/src/templates.d.ts | 4 -- .../freezeframe/dist/src/utils/index.d.ts | 13 ------ packages/freezeframe/dist/types/index.d.ts | 27 ----------- packages/freezeframe/examples/index.ejs | 46 ++++++++++++++++++- 8 files changed, 132 insertions(+), 102 deletions(-) delete mode 100644 packages/freezeframe/dist/src/constants.d.ts delete mode 100644 packages/freezeframe/dist/src/index.d.ts delete mode 100644 packages/freezeframe/dist/src/templates.d.ts delete mode 100644 packages/freezeframe/dist/src/utils/index.d.ts delete mode 100644 packages/freezeframe/dist/types/index.d.ts diff --git a/docs/index.html b/docs/index.html index dc859fc..549262e 100644 --- a/docs/index.html +++ b/docs/index.html @@ -50,6 +50,19 @@ .italic { font-style: italic; } +.grid { + display: flex; + flex-wrap: wrap; + justify-items: center; + align-items: center; +} + +.grid .cell { + width: calc(50% - 24px); + height: auto; + padding: 12px; +} + @@ -121,12 +134,41 @@

with overlay icon.

+
+

using child elements

+ +
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+ diff --git a/packages/freezeframe/dist/index.html b/packages/freezeframe/dist/index.html index dc859fc..549262e 100644 --- a/packages/freezeframe/dist/index.html +++ b/packages/freezeframe/dist/index.html @@ -50,6 +50,19 @@ .italic { font-style: italic; } +.grid { + display: flex; + flex-wrap: wrap; + justify-items: center; + align-items: center; +} + +.grid .cell { + width: calc(50% - 24px); + height: auto; + padding: 12px; +} + @@ -121,12 +134,41 @@

with overlay icon.

+
+

using child elements

+ +
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+ diff --git a/packages/freezeframe/dist/src/constants.d.ts b/packages/freezeframe/dist/src/constants.d.ts deleted file mode 100644 index 5c04f13..0000000 --- a/packages/freezeframe/dist/src/constants.d.ts +++ /dev/null @@ -1,21 +0,0 @@ -export declare const classes: { - SELECTOR: string; - CONTAINER: string; - LOADING_ICON: string; - IMAGE: string; - CANVAS: string; - READY: string; - INACTIVE: string; - ACTIVE: string; - CANVAS_READY: string; - RESPONSIVE: string; - OVERLAY: string; -}; -export declare const defaultOptions: { - selector: string; - responsive: boolean; - trigger: string; - overlay: boolean; - warnings: boolean; -}; -export declare const styleId = "ff-styles"; diff --git a/packages/freezeframe/dist/src/index.d.ts b/packages/freezeframe/dist/src/index.d.ts deleted file mode 100644 index 4e77543..0000000 --- a/packages/freezeframe/dist/src/index.d.ts +++ /dev/null @@ -1,31 +0,0 @@ -import { SelectorOrNodes, Freeze, FreezeframeOptions, RequireProps } from '../types'; -declare class Freezeframe { - #private; - options: FreezeframeOptions; - items: Freeze[]; - $images: HTMLImageElement[]; - private _eventListeners; - private get _stylesInjected(); - constructor(target?: SelectorOrNodes | RequireProps, options?: FreezeframeOptions); - private _init; - private _capture; - private _load; - private _setup; - private _wrap; - private _process; - private _ready; - private _attach; - private _addEventListener; - private _removeEventListener; - private _injectStylesheet; - private _emit; - private _toggleOn; - private _toggleOff; - private _toggle; - start(): this; - stop(): this; - toggle(): this; - on(event: string, cb: Function): this; - destroy(): void; -} -export default Freezeframe; diff --git a/packages/freezeframe/dist/src/templates.d.ts b/packages/freezeframe/dist/src/templates.d.ts deleted file mode 100644 index b460f45..0000000 --- a/packages/freezeframe/dist/src/templates.d.ts +++ /dev/null @@ -1,4 +0,0 @@ -export declare const stylesheet: () => string; -export declare const container: () => string; -export declare const canvas: () => string; -export declare const overlay: () => string; diff --git a/packages/freezeframe/dist/src/utils/index.d.ts b/packages/freezeframe/dist/src/utils/index.d.ts deleted file mode 100644 index b6a924c..0000000 --- a/packages/freezeframe/dist/src/utils/index.d.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { SelectorOrNodes, FreezeframeOptions } from '../../types/index'; -export declare const pipe: (...fns: Function[]) => (...initArgs: any[]) => any; -export declare const formatMessage: (string: string) => string; -export declare const error: (message: string, ...args: any[]) => void; -export declare const warn: (message: string, ...args: any[]) => void; -export declare const isTouch: () => boolean; -export declare const parseFilename: (filePath: string) => string; -export declare const validateFilename: (filePath: string) => boolean; -export declare const normalizeElements: (selectorOrNodes: SelectorOrNodes) => Element | HTMLCollectionOf | NodeListOf; -export declare const validateElements: (elements: Element | Element[], _: any, options: FreezeframeOptions) => any[]; -export declare const dedupeImages: (images: HTMLImageElement[]) => HTMLImageElement[]; -export declare const htmlToNode: (html: string) => HTMLElement; -export declare const wrapNode: ($el: HTMLElement, $wrapper: HTMLElement) => void; diff --git a/packages/freezeframe/dist/types/index.d.ts b/packages/freezeframe/dist/types/index.d.ts deleted file mode 100644 index ec96ee3..0000000 --- a/packages/freezeframe/dist/types/index.d.ts +++ /dev/null @@ -1,27 +0,0 @@ -export declare type RequireProps = Omit & { - [MK in K]-?: NonNullable; -}; -export declare type SelectorOrNodes = string | Element | HTMLCollectionOf | NodeListOf; -export declare type TriggerType = string | false; -export declare enum FreezeframeEventTypes { - START = "start", - STOP = "stop", - TOGGLE = "toggle" -} -export interface FreezeframeOptions { - selector?: SelectorOrNodes; - responsive?: boolean; - trigger?: TriggerType; - overlay?: boolean; - warnings?: boolean; -} -export interface Freeze { - $container: HTMLElement; - $canvas: HTMLCanvasElement; - $image: HTMLImageElement; -} -export interface FreezeframeEvent { - $image: HTMLImageElement; - event: string; - listener: EventListenerOrEventListenerObject; -} diff --git a/packages/freezeframe/examples/index.ejs b/packages/freezeframe/examples/index.ejs index 37291ef..9f9c205 100755 --- a/packages/freezeframe/examples/index.ejs +++ b/packages/freezeframe/examples/index.ejs @@ -50,6 +50,19 @@ button:active { .italic { font-style: italic; } +.grid { + display: flex; + flex-wrap: wrap; + justify-items: center; + align-items: center; +} + +.grid .cell { + width: calc(50% - 24px); + height: auto; + padding: 12px; +} + @@ -121,12 +134,41 @@ document

with overlay icon.

+
+

using child elements

+ +
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+