@mhmdhammoud/meritt-utils 1.1.0 → 1.2.0

package/dist/lib/imagefull.d.ts

@@ -0,0 +1,23 @@
+declare class ImageFull {
+    /**
+     * @remarks
+     *  Receives either a className or an id or an element and returns a promise that resolves when all images are loaded
+     * @param selector - either a className or an id or an element that contains images
+     * @example
+     * ```ts
+     * .image-container
+     * #image-container
+     * img //as an element
+     *
+     * Imagefull.preloadImages('.image-container').then((event) => {
+     *  do something
+     * })
+     * ```
+     *
+     * @returns Promise<ImagesLoaded | undefined>
+     *
+     */
+    preloadImages: (selector: string) => Promise<unknown>;
+}
+declare const imagefull: ImageFull;
+export default imagefull;

package/dist/lib/imagefull.js

@@ -0,0 +1,43 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const imagesloaded_1 = __importDefault(require("imagesloaded"));
+/*
+     Author : Mustafa Halabi https://github.com/mustafahalabi
+     Date : 2024-01-29
+     Description : Loads images and returns a promise
+     Version : 1.0
+*/
+class ImageFull {
+    constructor() {
+        /**
+         * @remarks
+         *  Receives either a className or an id or an element and returns a promise that resolves when all images are loaded
+         * @param selector - either a className or an id or an element that contains images
+         * @example
+         * ```ts
+         * .image-container
+         * #image-container
+         * img //as an element
+         *
+         * Imagefull.preloadImages('.image-container').then((event) => {
+         *  do something
+         * })
+         * ```
+         *
+         * @returns Promise<ImagesLoaded | undefined>
+         *
+         */
+        this.preloadImages = (selector) => {
+            return new Promise((resolve) => {
+                (0, imagesloaded_1.default)(document.querySelectorAll(selector), { background: true }, (event) => {
+                    resolve(event);
+                });
+            });
+        };
+    }
+}
+const imagefull = new ImageFull();
+exports.default = imagefull;

package/dist/lib/index.d.ts

@@ -2,3 +2,4 @@ export { default as Crypto } from './cypto';
 export { default as Formatter } from './formatter';
 export { default as Pdf } from './formatter';
 export { default as Colorful } from './colorful';
+export { default as ImageFull } from './imagefull';

package/dist/lib/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Colorful = exports.Pdf = exports.Formatter = exports.Crypto = void 0;
+exports.ImageFull = exports.Colorful = exports.Pdf = exports.Formatter = exports.Crypto = void 0;
 var cypto_1 = require("./cypto");
 Object.defineProperty(exports, "Crypto", { enumerable: true, get: function () { return __importDefault(cypto_1).default; } });
 var formatter_1 = require("./formatter");
@@ -12,3 +12,5 @@ var formatter_2 = require("./formatter");
 Object.defineProperty(exports, "Pdf", { enumerable: true, get: function () { return __importDefault(formatter_2).default; } });
 var colorful_1 = require("./colorful");
 Object.defineProperty(exports, "Colorful", { enumerable: true, get: function () { return __importDefault(colorful_1).default; } });
+var imagefull_1 = require("./imagefull");
+Object.defineProperty(exports, "ImageFull", { enumerable: true, get: function () { return __importDefault(imagefull_1).default; } });

package/imagesloaded.d.ts

@@ -0,0 +1,66 @@
+/// <reference types="jquery" />
+
+declare namespace ImagesLoaded {
+	type ElementSelector = Element | NodeList | Element[] | string
+
+	/** interface for an image currently loading or completed */
+	interface LoadingImage {
+		img: HTMLImageElement
+		isLoaded: boolean
+	}
+
+	interface ImagesLoadedCallback {
+		(instance?: ImagesLoaded): void
+	}
+
+	interface ImagesLoadedListener {
+		(instance: ImagesLoaded, image?: LoadingImage): void
+	}
+
+	interface ImagesLoaded {
+		new (elem: ElementSelector, callback: ImagesLoadedCallback): ImagesLoaded
+
+		images: LoadingImage[]
+
+		// event listeners
+		on(event: string, listener: ImagesLoadedListener): void
+		off(event: string, listener: ImagesLoadedListener): void
+		once(event: string, listener: ImagesLoadedListener): void
+		progressedCount: number | undefined
+	}
+
+	interface ImagesLoadedOptions {
+		background: true | string
+	}
+
+	interface ImagesLoadedConstructor {
+		/**
+		 * Creates a new ImagesLoaded object with the provided callback
+		 * @param elem Element, NodeList, Element array, or selector string for images to watch
+		 * @param options object that can tell imagesloaded to watch background images as well
+		 * @param callback function triggered after all images have been loaded
+		 */
+		(
+			elem: ElementSelector,
+			options: ImagesLoadedOptions,
+			callback?: ImagesLoadedCallback
+		): ImagesLoaded
+		(elem: ElementSelector, callback?: ImagesLoadedCallback): ImagesLoaded
+	}
+}
+
+declare var imagesLoaded: ImagesLoaded.ImagesLoadedConstructor
+
+declare module 'imagesloaded' {
+	export = imagesLoaded
+}
+
+interface JQuery {
+	imagesLoaded(
+		callback?: ImagesLoaded.ImagesLoadedCallback
+	): JQueryDeferred<ImagesLoaded.ImagesLoaded>
+	imagesLoaded(
+		options: ImagesLoaded.ImagesLoadedOptions,
+		callback?: ImagesLoaded.ImagesLoadedCallback
+	): JQueryDeferred<ImagesLoaded.ImagesLoaded>
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@mhmdhammoud/meritt-utils",
-	"version": "1.1.0",
+	"version": "1.2.0",
 	"description": "",
 	"main": "./dist/index.js",
 	"private": false,
@@ -39,6 +39,7 @@
 	"author": "Mhmdhammoud",
 	"license": "ISC",
 	"dependencies": {
-		"axios": "^1.4.0"
+		"axios": "^1.4.0",
+		"imagesloaded": "^5.0.0"
 	}
 }

package/src/lib/imagefull.ts

@@ -0,0 +1,41 @@
+import imagesLoaded from 'imagesloaded'
+/*
+	 Author : Mustafa Halabi https://github.com/mustafahalabi
+	 Date : 2024-01-29
+	 Description : Loads images and returns a promise
+	 Version : 1.0
+*/
+class ImageFull {
+	/**
+	 * @remarks
+	 *  Receives either a className or an id or an element and returns a promise that resolves when all images are loaded
+	 * @param selector - either a className or an id or an element that contains images
+	 * @example
+	 * ```ts
+	 * .image-container
+	 * #image-container
+	 * img //as an element
+	 *
+	 * Imagefull.preloadImages('.image-container').then((event) => {
+	 *  do something
+	 * })
+	 * ```
+	 *
+	 * @returns Promise<ImagesLoaded | undefined>
+	 *
+	 */
+	preloadImages = (selector: string) => {
+		return new Promise((resolve) => {
+			imagesLoaded(
+				document.querySelectorAll(selector),
+				{background: true},
+				(event) => {
+					resolve(event)
+				}
+			)
+		})
+	}
+}
+
+const imagefull = new ImageFull()
+export default imagefull

package/src/lib/index.ts

@@ -2,3 +2,4 @@ export {default as Crypto} from './cypto'
 export {default as Formatter} from './formatter'
 export {default as Pdf} from './formatter'
 export {default as Colorful} from './colorful'
+export {default as ImageFull} from './imagefull'