Merge pull request #22 from dutchenkoOleg/master

0.14.0 - add TypesScript support

Author: OlehDutchenko

README.md

@@ -1,5 +1,6 @@
 # zz-load
 
+![types](https://img.shields.io/badge/types-TypeScript-blue)
 [![license](https://img.shields.io/badge/License-MIT-blue.svg)](https://github.com/WezomAgency/zz-load/blob/master/LICENSE)
 [![npm](https://img.shields.io/badge/npm-install-orange.svg)](https://www.npmjs.com/package/zz-load)
 [![WezomAgency](https://img.shields.io/badge/wezom-agency-red.svg)](https://github.com/WezomAgency)

dist/zz-load.min.js

@@ -0,0 +1,16 @@
+declare module 'zz-load' {
+	function zzLoad(
+		elements: string | NodeList | Element,
+		options: {
+			rootMargin?: string;
+			threshold?: number;
+			onLoad?(): void;
+			onError?(): void;
+		}
+	): {
+		observe(): void;
+		triggerLoad<TElement = HTMLElement>(element: TElement): void;
+	};
+
+	export = zzLoad;
+}

index.d.ts

@@ -1,6 +1,6 @@
 {
   "name": "zz-load",
-  "version": "0.13.0",
+  "version": "0.14.0",
   "description": "",
   "main": "./src/zz-load.es.js",
   "scripts": {

package.json

@@ -0,0 +1,18 @@
+declare module 'zz-load/src/attrs' {
+	interface ZZLoadAttrs {
+		isObserved: string;
+		isProcessed: string;
+		isLoaded: string;
+		isFailed: string;
+		isInView: string;
+		sourceImg: string;
+		sourceSrcSet: string;
+		sourceBgImg: string;
+		sourceImage: string;
+		sourceIframe: string;
+		sourceContainer: string;
+		sourceInview: string;
+	}
+
+	export const attrs: ZZLoadAttrs;
+}

src/attrs.d.ts

@@ -0,0 +1,18 @@
+declare module 'zz-load/src/data-set' {
+	interface ZZLoadDataSet {
+		isObserved: string;
+		isProcessed: string;
+		isLoaded: string;
+		isFailed: string;
+		isInView: string;
+		sourceImg: string;
+		sourceSrcSet: string;
+		sourceBgImg: string;
+		sourceImage: string;
+		sourceIframe: string;
+		sourceContainer: string;
+		sourceInview: string;
+	}
+
+	export const dataSet: ZZLoadDataSet;
+}

src/data-set.d.ts

@@ -0,0 +1,12 @@
+declare module 'zz-load/src/events' {
+	interface ZZLoadEvents {
+		observed: string;
+		processed: string;
+		loaded: string;
+		failed: string;
+		inView: string;
+		outOfView: string;
+	}
+
+	export const events: ZZLoadEvents;
+}

src/events.d.ts

@@ -40,7 +40,9 @@ const _defaultOptions = {
 const _extend = (userOptions = {}) => {
 	let options = {};
 	for (let key in _defaultOptions) {
-		options[key] = userOptions.hasOwnProperty(key) ? userOptions[key] : _defaultOptions[key];
+		options[key] = userOptions.hasOwnProperty(key)
+			? userOptions[key]
+			: _defaultOptions[key];
 	}
 	return options;
 };
@@ -49,7 +51,7 @@ const _extend = (userOptions = {}) => {
  * @param {HTMLElement} element
  * @private
  */
-const _sanitaze = element => {
+const _sanitaze = (element) => {
 	element.removeAttribute(attrs.sourceImg);
 	element.removeAttribute(attrs.sourceSrcSet);
 	element.removeAttribute(attrs.sourceBgImg);
@@ -178,23 +180,28 @@ const _load = (element, options, asPromise) => {
 		if (element.nodeName.toLowerCase() === 'picture') {
 			const pitureImg = element.getElementsByTagName('img')[0];
 			if (pitureImg instanceof window.HTMLImageElement) {
-				const clear = str => str.replace(/^\/\//i, '').replace(window.location.origin, '');
+				const clear = (str) =>
+					str.replace(/^\/\//i, '').replace(window.location.origin, '');
 				const currentSrc = clear(pitureImg.currentSrc);
 				let src = null;
 				let srcset = null;
 				for (let i = 0; i < element.children.length; i++) {
 					const child = element.children[i];
 					const isSource = child.nodeName.toLowerCase() === 'source';
 					const isImg = child.nodeName.toLowerCase() === 'img';
-					const childSrc = clear(isSource ? child.srcset : isImg ? child.src : '');
+					const childSrc = clear(
+						isSource ? child.srcset : isImg ? child.src : ''
+					);
 					if (currentSrc === childSrc) {
 						src = child.getAttribute(attrs.sourceImg) || null;
 						srcset = child.getAttribute(attrs.sourceSrcSet);
 					}
 				}
 
 				if (src === null) {
-					console.warn('You must provide all the `data-zzload-source-*` attributes for all children.');
+					console.warn(
+						'You must provide all the `data-zzload-source-*` attributes for all children.'
+					);
 					console.warn(element);
 					return null;
 				}
@@ -207,7 +214,7 @@ const _load = (element, options, asPromise) => {
 
 						if (child.nodeName.toLowerCase() === 'source') {
 							if (srcset) {
-								src += (', ' + srcset);
+								src += ', ' + srcset;
 							}
 							child.srcset = src;
 						} else if (child.nodeName.toLowerCase() === 'img') {
@@ -321,8 +328,8 @@ const _checkIs = {
  * @return {Function}
  * @private
  */
-const _onIntersection = options => (entries, observer) => {
-	entries.forEach(entry => {
+const _onIntersection = (options) => (entries, observer) => {
+	entries.forEach((entry) => {
 		/** @type {Element} */
 		let element = entry.target;
 		let inViewType = element.hasAttribute(attrs.sourceInview);