iaspect-media

Installation:

npm install @sycoraxya/iaspect-media

or

yarn add @sycoraxya/iaspect-media

npm install @sycoraxya/[email protected]

or

yarn add @sycoraxya/[email protected]

See tags for version numbers

Usage:

Add the following line to your script

import Media from "@sycoraxya/iaspect-media";

Or add the folder to your webpack.config:

resolve: {
  modulesDirectories: [
    'node_modules/@sycoraxya'
  ]
}

// And add the following line to your scripts
import Media from "iaspect-media";

// 2 ways of instantiating a media class

// 1) by passing an element
const mediaElement = document.querySelector('.media');

new Media(mediaElement);

// 2) by passing a selector
new Media('.media');

// Both methods support passing an optional prefix. This determines the prefix of all modal classes.
new Media('.media', 'product__'); // This will change selectors like media__thumb to product__thumb

API:

Each Media instance has acces to .select(). Select takes 1 argument; the mount to append the selected media element to. This will replace the current media item in that mount.

Example:

<!-- The HTML Markup -->
<div class="main-media">
    <img src="image-url.jpg" alt="image" class="thumb"/>
</div>

<div class="media-wrapper">
    <span class="media media--image" data-key="original" data-hq-image="image-url-hq.jpg">
        <img src="image-url.jpg" alt="image"/>
    </span>

    <span class="media media--image" data-key="1" data-hq-image="second-image-url-hq.jpg">
        <img src="second-image-url.jpg" alt="image"/>
    </span>
</div>

// Select all media elements in the wrapper
const mediaElements = [...document.querySelectorAll('.media-wrapper .media')]; 

// Create a new Media instance from each element and bind a click event to the element
const mediaList = mediaElements.map((element) => {
    const media = new Media(element);
    
    element.addEventListener('click', () => {
        // Call media.select() on click
        media.select(document.querySelector('.main-media'));
    })

    return media;
});

console.log(mediaList); // (2) [Media, Media]

Working example: