{"id":18455485,"url":"https://github.com/danielhaim1/imageemitter","last_synced_at":"2026-01-07T16:01:28.294Z","repository":{"id":215647055,"uuid":"739460073","full_name":"danielhaim1/ImageEmitter","owner":"danielhaim1","description":"A utility for loading images with event emission, utilizing an extended EvEmitter.","archived":false,"fork":false,"pushed_at":"2024-07-26T17:25:46.000Z","size":15138,"stargazers_count":0,"open_issues_count":2,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-09T17:44:57.500Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/danielhaim1.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-01-05T16:09:16.000Z","updated_at":"2024-07-26T17:25:50.000Z","dependencies_parsed_at":"2024-06-12T20:36:49.312Z","dependency_job_id":"4bcdeb1b-f23b-4740-a80d-a071f3ed91ab","html_url":"https://github.com/danielhaim1/ImageEmitter","commit_stats":null,"previous_names":["danielhaim1/image-emitter","danielhaim1/imageemitter"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danielhaim1%2FImageEmitter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danielhaim1%2FImageEmitter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danielhaim1%2FImageEmitter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danielhaim1%2FImageEmitter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/danielhaim1","download_url":"https://codeload.github.com/danielhaim1/ImageEmitter/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245904818,"owners_count":20691676,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-06T08:08:09.824Z","updated_at":"2026-01-07T16:01:28.287Z","avatar_url":"https://github.com/danielhaim1.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Image Emitter\n\n[![npm version](https://img.shields.io/npm/v/@danielhaim/imageemitter)](https://www.npmjs.com/package/@danielhaim/imageemitter)\n[![Downloads](https://img.shields.io/npm/dt/@danielhaim/imageemitter.svg)](https://www.npmjs.com/package/@danielhaim/imageemitter)\n![GitHub](https://img.shields.io/github/license/danielhaim1/imageemitter)\n\n\u003c!-- TOC --\u003e\u003ca name=\"image-emitter\"\u003e\u003c/a\u003e\nImageEmitter is a streamlined utility designed for image loading tasks through event-driven approach. The utility manages the loading of images and extends its functionality to categorize images based on their dimensions and format.\n\n\u003c!-- TOC --\u003e\u003ca name=\"key-attributes\"\u003e\u003c/a\u003e\n## Key Attributes\n- Facilitates image loading with event-driven techniques.\n- Includes basic event handling methods such as `done`, `progress`, `always`, and `fail`.\n- Keeps track of image loading status including progress, completion, and potential errors.\n- Built using JavaScript ES6 for improved functionality and ease of understanding.\n\n\u003c!-- TOC --\u003e\u003ca name=\"demo\"\u003e\u003c/a\u003e\n## Demo\n\n\u003ca target=\"_blank\" href=\"https://codepen.io/danielhaim/pen/VwqqoKw\"\u003e\n    \u003cimg src=\"https://raw.githubusercontent.com/danielhaim1/image-emitter/main/__test__/demo.png\" width=\"100%\" height=\"auto\" alt=\"Image Emitter Demo\"\u003e\n\u003c/a\u003e\n\n\u003c!-- TOC --\u003e\u003ca name=\"table-of-contents\"\u003e\u003c/a\u003e\n\u003c!-- TOC start --\u003e\n## Table of Contents\n- [Image Emitter](#image-emitter)\n   * [Key Attributes](#key-attributes)\n   * [Demo](#demo)\n   * [Table of Contents](#table-of-contents)\n   * [Installation](#installation)\n   * [Usage](#usage)\n   * [API](#api)\n      + [Classes and Methods](#classes-and-methods)\n         - [`ImageEvents`](#imageevents)\n         - [`ImageEmitter`](#imageemitter)\n         - [`ImageHelper`](#imagehelper)\n      + [Event Listeners](#event-listeners)\n   * [Repository Structure](#repository-structure)\n\u003c!-- TOC end --\u003e\n\n\u003c!-- TOC --\u003e\u003ca name=\"installation\"\u003e\u003c/a\u003e\n## Installation\nYou can install this module via npm:\n\n```bash\n$ npm i @danielhaim/imageemitter\n```\n\n\u003c!-- TOC --\u003e\u003ca name=\"usage\"\u003e\u003c/a\u003e\n## Usage\n```javascript\n// For Node.js or build systems (Webpack, Rollup, etc.):\nimport { ImageEmitter, ImageHelper } from \"@danielhaim/imageemitter\";\n\n// For direct browser usage via CDNs like esm.sh or unpkg:\n// If the above doesn't work, you might need to import directly from the source:\n// import { ImageEmitter } from \"https://esm.sh/@danielhaim/imageemitter/src/index.js\";\n// import { ImageHelper } from \"https://esm.sh/@danielhaim/imageemitter/src/ImageHelper.js\";\n\n// Initialize image loader for selected images\nconst images = document.querySelectorAll(\"img\");\nconst imageEmitter = new ImageEmitter(images);\n\n// Event Listener: Image Loading Progress\nimageEmitter.on(\"progress\", (loadedCount, totalImages) =\u003e {\n    console.log(`Progress: ${loadedCount}/${totalImages} images loaded.`);\n});\n\n// Event Listener: All Images Successfully Loaded\nimageEmitter.on(\"done\", () =\u003e {\n    console.log(\"Success: All images have been loaded.\");\n});\n\n// Event Listener: Image Loading Failure\nimageEmitter.on(\"fail\", () =\u003e {\n    console.error(\"Error: One or more images failed to load.\");\n});\n\n// Event Listener: Image Loading Completion (Regardless of Success/Failure)\nimageEmitter.on(\"always\", () =\u003e {\n    console.log(\"Info: Image loading process completed.\");\n});\n\n// Optional: Use ImageHelper to classify images\nconst helper = new ImageHelper({ useClasses: true });\nimageEmitter.on(\"done\", () =\u003e { // Classify after loading is done\n    helper.classifyImages(Array.from(images));\n});\n```\n\n\u003c!-- TOC --\u003e\u003ca name=\"api\"\u003e\u003c/a\u003e\n## API\n\n\u003c!-- TOC --\u003e\u003ca name=\"classes-and-methods\"\u003e\u003c/a\u003e\n### Classes and Methods\n\n\u003c!-- TOC --\u003e\u003ca name=\"imageevents\"\u003e\u003c/a\u003e\n#### `ImageEvents`\nA foundational class for event handling.\n\n- `constructor()`: Initializes the event and once-event handlers.\n- `on(eventName, listener)`: Registers an event listener.\n- `once(eventName, listener)`: Registers a one-time event listener.\n- `off(eventName, listener)`: Removes an event listener.\n- `emitEvent(eventName, args)`: Emits an event to all registered listeners.\n- `allOff()`: Removes all event listeners.\n\n\u003c!-- TOC --\u003e\u003ca name=\"imageemitter\"\u003e\u003c/a\u003e\n#### `ImageEmitter`\nExtends `ImageEvents` for image loading.\n\n- `constructor(elements)`: Initializes with a set of DOM elements.\n- `initImages()`: Prepares images for loading.\n- `checkImages()`: Checks and starts the loading process for all images.\n- `loadImage(imgElement, callback)`: Loads a single image.\n- `loadBackgroundImage(url, callback)`: Loads a background image.\n- `progress(loadedCount, totalImages)`: Tracks the progress of image loading.\n- `hasBackgroundImage(element)`: Checks if an element has a background image.\n- `getBackgroundImageUrl(element)`: Retrieves the background image URL of an element.\n\n\u003c!-- TOC --\u003e\u003ca name=\"imagehelper\"\u003e\u003c/a\u003e\n#### `ImageHelper`\nA utility class for image analysis and classification.\n\n- `constructor(options)`: Initializes the class with custom size definitions and an option to use CSS classes or data attributes.\n  - `options.sizeDefinitions`: Custom size definitions for classifying images (e.g., { sm: 600, md: 1200, lg: 1500, xl: Infinity }).\n  - `options.useClasses`: Boolean to choose between using CSS classes or data attributes.\n- `static getNaturalDimensions(img)`: Returns the natural dimensions of an image.\n- `static getImageFormat(img)`: Determines the format of an image (landscape, portrait, square).\n- `getImageSize(img)`: Classifies the size of an image based on custom size definitions.\n- `classifyImage(img)`: Returns the format and size classification of an image.\n- `classifyImages(images)`: Applies format and size classification to a collection of images by either adding CSS classes or `data-img-format` and `data-img-size` attributes.\n\n\u003c!-- TOC --\u003e\u003ca name=\"event-listeners\"\u003e\u003c/a\u003e\n### Event Listeners\n\n- `progress`: Triggered during the image loading process, provides the count of loaded images and the total.\n- `done`: Triggered when all images are loaded successfully.\n- `fail`: Triggered if any image fails to load.\n- `always`: Triggered when the image loading process is completed, regardless of success or failure.\n\n\u003c!-- TOC --\u003e\u003ca name=\"repository-structure\"\u003e\u003c/a\u003e\n## Repository Structure\n```\n├── LICENSE\n├── README.md\n├── __test__\n│   ├── ImageEmitter.test.js\n│   ├── ImageHelper.test.js\n│   ├── test-image1.jpeg\n│   ├── test-image2.jpeg\n│   └── test-image3.jpeg\n├── babel.config.js\n├── dist\n│   ├── imageEmitter.amd.js\n│   └── imageEmitter.js\n├── index.js\n├── jest.config.js\n├── package-lock.json\n├── package.json\n├── src\n│   ├── ImageEvents.js\n│   ├── ImageHelper.js\n│   └── index.js\n└── webpack.config.js\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdanielhaim1%2Fimageemitter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdanielhaim1%2Fimageemitter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdanielhaim1%2Fimageemitter/lists"}