be consistent about casing of Freezeframe, update docs

helloraee · Sep 7, 2020 · 9f83551 · 9f83551
1 parent aa1aaa6
commit 9f83551
Show file tree

Hide file tree

Showing 10 changed files with 62 additions and 56 deletions.
diff --git a/docs/freezeframe.min.js b/docs/freezeframe.min.js
diff --git a/packages/freezeframe/README.md b/packages/freezeframe/README.md
@@ -11,7 +11,13 @@ animate on mouse hover / mouse click / touch event, or manually via class method
 Version 4.x no longer requires or supports jQuery. If you want to use freezeframe as a jQuery
 plugin, check out [freezeframe v3.0.10](https://github.com/ctrl-freaks/freezeframe.js/tree/archived/3.0.10).
 
-FreezeFrame is now built in TypeScript, and offers consumable type definitions and improved input validation!
+Freezeframe is now built in TypeScript, and offers consumable type definitions and improved input validation!
+
+To get started using the TypeScript beta:
+
+```sh
+npm install [email protected]
+```
 
 - [Freezeframe.js](#freezeframejs)
   - [Examples](#examples)

diff --git a/packages/freezeframe/dist/freezeframe.min.js b/packages/freezeframe/dist/freezeframe.min.js
diff --git a/packages/freezeframe/dist/src/index.d.ts b/packages/freezeframe/dist/src/index.d.ts
@@ -1,12 +1,12 @@
-import { SelectorOrNodes, Freeze, FreezeFrameOptions, RequireProps } from '../types';
+import { SelectorOrNodes, Freeze, FreezeframeOptions, RequireProps } from '../types';
 declare class Freezeframe {
     #private;
-    options: FreezeFrameOptions;
+    options: FreezeframeOptions;
     items: Freeze[];
     $images: HTMLImageElement[];
     private _eventListeners;
     private get _stylesInjected();
-    constructor(target?: SelectorOrNodes | RequireProps<FreezeFrameOptions, 'selector'>, options?: FreezeFrameOptions);
+    constructor(target?: SelectorOrNodes | RequireProps<FreezeframeOptions, 'selector'>, options?: FreezeframeOptions);
     private _init;
     private _capture;
     private _load;

diff --git a/packages/freezeframe/dist/src/utils/index.d.ts b/packages/freezeframe/dist/src/utils/index.d.ts
@@ -1,4 +1,4 @@
-import { SelectorOrNodes, FreezeFrameOptions } from '../../types/index';
+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;
@@ -7,7 +7,7 @@ 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<Element> | NodeListOf<Element>;
-export declare const validateElements: (elements: Element | Element[], _: any, options: FreezeFrameOptions) => any[];
+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
@@ -3,12 +3,12 @@ export declare type RequireProps<T extends {}, K extends keyof T> = Omit<T, K> &
 };
 export declare type SelectorOrNodes = string | Element | HTMLCollectionOf<Element> | NodeListOf<Element>;
 export declare type TriggerType = string | false;
-export declare enum FreezeFrameEventTypes {
+export declare enum FreezeframeEventTypes {
     START = "start",
     STOP = "stop",
     TOGGLE = "toggle"
 }
-export interface FreezeFrameOptions {
+export interface FreezeframeOptions {
     selector?: SelectorOrNodes;
     responsive?: boolean;
     trigger?: TriggerType;
@@ -20,7 +20,7 @@ export interface Freeze {
     $canvas: HTMLCanvasElement;
     $image: HTMLImageElement;
 }
-export interface FreezeFrameEvent {
+export interface FreezeframeEvent {
     $image: HTMLImageElement;
     event: string;
     listener: EventListenerOrEventListenerObject;

diff --git a/packages/freezeframe/src/index.ts b/packages/freezeframe/src/index.ts
@@ -2,9 +2,9 @@ import imagesLoaded from 'imagesloaded';
 import {
   SelectorOrNodes,
   Freeze,
-  FreezeFrameEvent,
-  FreezeFrameOptions,
-  FreezeFrameEventTypes,
+  FreezeframeEvent,
+  FreezeframeOptions,
+  FreezeframeEventTypes,
   RequireProps
 } from '../types';
 import {
@@ -25,7 +25,7 @@ import {
 } from './constants';
 
 class Freezeframe {
-  options: FreezeFrameOptions;
+  options: FreezeframeOptions;
 
   items: Freeze[] = [];
 
@@ -36,7 +36,7 @@ class Freezeframe {
   #isTouch: boolean;
 
   private _eventListeners = {
-    ...Object.values(FreezeFrameEventTypes)
+    ...Object.values(FreezeframeEventTypes)
       .reduce<any>((acc, item) => {
         acc[item] = [];
         return acc;
@@ -48,8 +48,8 @@ class Freezeframe {
   }
 
   constructor(
-    target: SelectorOrNodes | RequireProps<FreezeFrameOptions, 'selector'> = classes.SELECTOR,
-    options?: FreezeFrameOptions
+    target: SelectorOrNodes | RequireProps<FreezeframeOptions, 'selector'> = classes.SELECTOR,
+    options?: FreezeframeOptions
   ) {
     if (
       typeof target === 'string'
@@ -64,7 +64,7 @@ class Freezeframe {
       this.#target = this.options.selector;
     } else {
       error(
-        'Invalid FreezeFrame.js configuration:',
+        'Invalid Freezeframe.js configuration:',
         ...[target, options].filter((arg) => arg !== undefined)
       );
     }
@@ -155,13 +155,13 @@ class Freezeframe {
     if (!this.#isTouch && this.options.trigger === 'hover') {
       const onMouseEnter = (): void => {
         this._toggleOn(freeze);
-        this._emit(FreezeFrameEventTypes.START, freeze, true);
-        this._emit(FreezeFrameEventTypes.TOGGLE, freeze, true);
+        this._emit(FreezeframeEventTypes.START, freeze, true);
+        this._emit(FreezeframeEventTypes.TOGGLE, freeze, true);
       };
       const onMouseLeave = (): void => {
         this._toggleOff(freeze);
-        this._emit(FreezeFrameEventTypes.START, freeze, false);
-        this._emit(FreezeFrameEventTypes.TOGGLE, freeze, false);
+        this._emit(FreezeframeEventTypes.START, freeze, false);
+        this._emit(FreezeframeEventTypes.TOGGLE, freeze, false);
       };
       this._addEventListener($image, 'mouseleave', onMouseLeave);
       this._addEventListener($image, 'mouseenter', onMouseEnter);
@@ -175,7 +175,7 @@ class Freezeframe {
     }
   }
 
-  #internalEvents: FreezeFrameEvent[] = [];
+  #internalEvents: FreezeframeEvent[] = [];
 
   private _addEventListener(
     $image: HTMLImageElement,
@@ -250,29 +250,29 @@ class Freezeframe {
     this.items.forEach((freeze) => {
       this._toggleOn(freeze);
     });
-    this._emit(FreezeFrameEventTypes.START, this.items, true);
-    this._emit(FreezeFrameEventTypes.TOGGLE, this.items, true);
+    this._emit(FreezeframeEventTypes.START, this.items, true);
+    this._emit(FreezeframeEventTypes.TOGGLE, this.items, true);
     return this;
   }
 
   stop() {
     this.items.forEach((freeze) => {
       this._toggleOff(freeze);
     });
-    this._emit(FreezeFrameEventTypes.STOP, this.items, false);
-    this._emit(FreezeFrameEventTypes.TOGGLE, this.items, false);
+    this._emit(FreezeframeEventTypes.STOP, this.items, false);
+    this._emit(FreezeframeEventTypes.TOGGLE, this.items, false);
     return this;
   }
 
   toggle() {
     this.items.forEach((freeze) => {
       const isPlaying = this._toggle(freeze);
       if (isPlaying) {
-        this._emit(FreezeFrameEventTypes.START, this.items, false);
+        this._emit(FreezeframeEventTypes.START, this.items, false);
       } else {
-        this._emit(FreezeFrameEventTypes.STOP, this.items, false);
+        this._emit(FreezeframeEventTypes.STOP, this.items, false);
       }
-      this._emit(FreezeFrameEventTypes.TOGGLE, this.items, isPlaying);
+      this._emit(FreezeframeEventTypes.TOGGLE, this.items, isPlaying);
     });
     return this;
   }

diff --git a/packages/freezeframe/src/utils/index.ts b/packages/freezeframe/src/utils/index.ts
@@ -1,4 +1,4 @@
-import { SelectorOrNodes, FreezeFrameOptions } from '../../types/index';
+import { SelectorOrNodes, FreezeframeOptions } from '../../types/index';
 
 export const pipe = (...fns: Function[]) => (
   (...initArgs: any[]) => {
@@ -42,7 +42,7 @@ export const normalizeElements = (selectorOrNodes: SelectorOrNodes) => {
 export const validateElements = (
   elements: Element | Element[],
   _: any,
-  options: FreezeFrameOptions
+  options: FreezeframeOptions
 ) => {
   const list = elements instanceof Element ? [elements] : elements;
   return Array.from(list).reduce((acc, image) => {

diff --git a/packages/freezeframe/tests/ts-intellisense/test.ts b/packages/freezeframe/tests/ts-intellisense/test.ts
@@ -1,45 +1,45 @@
 /* eslint-disable no-new */
-import FreezeFrame from '../../src';
+import Freezeframe from '../../src';
 
 // happy paths
-new FreezeFrame();
-new FreezeFrame('.foo');
-new FreezeFrame('#foo');
-new FreezeFrame(document.body);
-new FreezeFrame(document.getElementById('foo'));
-new FreezeFrame(document.getElementsByClassName('foo'));
-new FreezeFrame(document.querySelector('.foo'));
-new FreezeFrame(document.querySelectorAll('.foo'));
-new FreezeFrame({
+new Freezeframe();
+new Freezeframe('.foo');
+new Freezeframe('#foo');
+new Freezeframe(document.body);
+new Freezeframe(document.getElementById('foo'));
+new Freezeframe(document.getElementsByClassName('foo'));
+new Freezeframe(document.querySelector('.foo'));
+new Freezeframe(document.querySelectorAll('.foo'));
+new Freezeframe({
   selector: '.foo'
 });
-new FreezeFrame({
+new Freezeframe({
   selector: document.body,
   responsive: false,
   trigger: 'click',
   overlay: false,
   warnings: false
 });
-new FreezeFrame(document.body, {
+new Freezeframe(document.body, {
   responsive: false,
   trigger: 'click',
   overlay: false,
   warnings: false
 });
-new FreezeFrame('.foo', {}); // looks odd but isn't an issue
+new Freezeframe('.foo', {}); // looks odd but isn't an issue
 
 // sad paths
-new FreezeFrame(true);
-new FreezeFrame(3);
-new FreezeFrame({});
-new FreezeFrame([]);
-new FreezeFrame({
+new Freezeframe(true);
+new Freezeframe(3);
+new Freezeframe({});
+new Freezeframe([]);
+new Freezeframe({
   foo: 3
 });
-new FreezeFrame({
+new Freezeframe({
   selector: 3
 });
-new FreezeFrame({
+new Freezeframe({
   responsive: false,
   trigger: 'click',
   overlay: false,

diff --git a/packages/freezeframe/types/index.ts b/packages/freezeframe/types/index.ts
@@ -9,13 +9,13 @@ export type SelectorOrNodes = string
 
 export type TriggerType = string | false
 
-export enum FreezeFrameEventTypes {
+export enum FreezeframeEventTypes {
   START = 'start',
   STOP = 'stop',
   TOGGLE = 'toggle'
 }
 
-export interface FreezeFrameOptions {
+export interface FreezeframeOptions {
   selector?: SelectorOrNodes,
   responsive?: boolean,
   trigger?: TriggerType,
@@ -29,7 +29,7 @@ export interface Freeze {
   $image: HTMLImageElement
 }
 
-export interface FreezeFrameEvent {
+export interface FreezeframeEvent {
   $image: HTMLImageElement,
   event: string,
   listener: EventListenerOrEventListenerObject