open-index/open-npm huggingface dataset:
npm package: @sycoraxya/iaspect-media
Description: iaspect media package
Author: Stefan Verweij
Latest version: 1.3.2

# iaspect-media

### Installation:
`npm install @sycoraxya/iaspect-media`

or

`yarn add @sycoraxya/iaspect-media`

<br>
**Specific version:**

`npm install @sycoraxya/iaspect-media@v1.1.1`

or

`yarn add @sycoraxya/iaspect-media@v1.1.1`

See tags for version numbers


### Usage:
Add the following line to your script
```javascript
import Media from "@sycoraxya/iaspect-media";
```

Or add the folder to your webpack.config:
```javascript
resolve: {
  modulesDirectories: [
    'node_modules/@sycoraxya'
  ]
}

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

```javascript
// 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:
```html
<!-- 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>
```
```javascript
// 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:


<img src="https://i.gyazo.com/a7eca11a2dec6c6b869a224d5b10cbdc.gif" alt="Select() demonstration" width="500"/>