Media Manager

Plain javascript media selector.

Preview

Installation

npm i simple-media-manager
// OR
yarn add simple-media-manager

Usage

Html

<section class="app"></section>
<button id="selectImages">Open</button>

Javascript

import MediaManager from 'simple-media-manager'
import 'simple-media-manager/src/media-manager.sass'

const mediaManager = new MediaManager()

mediaManager.init({
  elements: {
    wrapper: document.querySelector('.wrapper')
  },
  settings: {
    // Default: true, Show dark overlay over entire screen to highlight media-manager popup
    showOverlay: true,
    // Default: -1, Limit the amount of items that can be selected. -1 indicates an unlimited amount of selected items
    maxSelectedItems: -1

  },
  source: {
    resources: [{path: 'https://unsplash.it/100/100?random'}, {path: 'https://unsplash.it/100/100?random'}]
  },
  events: {
    // Fires when the user presses "Confirm".  The callback receives an array with the paths of all selected items.
    onConfirm: selectedPaths => {
      console.log(selectedPaths)
    },
    // Fires when the file input field fires a "change" event. The callback receives the event object
    onFileSelectionChanged: changeEvent => {
      console.log(changeEvent)
    },
    // Fires when the user presses "Cancel".
    onCancel: () => {
      console.log('Closed media manager popup')
    },
  }
})

// Toggle media manager when the button is clicked.
document.querySelector('#selectImages').addEventListener('click', () => {
  mediaManager.toggle()
})

Styles

If you prefer importing the styles in a separate sass file use the following import statement.

@import "~simple-media-manager/src/media-manager"

Development

1: Fork the repository
2: Install the dependencies

npm install
// or
yarn install

3: start webpack

npm run dev
// or
yarn dev

Stack

• Yarn
• Webpack
  • babel-loader
  • css-loader
  • sass-loader