https://github.com/novicell/novicell-overlay

Simple script that can open an overlay / modal
https://github.com/novicell/novicell-overlay

javascript js lightbox modal novicell novicell-overlay overlay vanilla

Last synced: 2 days ago
JSON representation

Simple script that can open an overlay / modal

• Host: GitHub
• URL: https://github.com/novicell/novicell-overlay
• Owner: Novicell
• License: mit
• Created: 2017-01-13T08:20:30.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2021-01-21T09:27:15.000Z (almost 4 years ago)
• Last Synced: 2024-10-31T20:43:11.514Z (14 days ago)
• Topics: javascript, js, lightbox, modal, novicell, novicell-overlay, overlay, vanilla
• Language: JavaScript
• Homepage:
• Size: 94.7 KB
• Stars: 4
• Watchers: 4
• Forks: 3
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Novicell Overlay

**Simple script that can open an overlay / modal**

## Usage

Written in pure Vanilla JS, it has *no dependencies*. It ships with a sample POST-CSS file, for easy implementation with the [novicell-frontend setup](https://github.com/Novicell/novicell-frontend). Use the styles for inspiration and then make your own styles.

### Install with npm

```bash

npm install novicell-overlay

```

## Setup

First include the dependency in your project's js file:

```javascript

import NovicellOverlay from 'novicell-overlay';

```

And css (optional)

```css

@import '../../node_modules/novicell-overlay/css/novicell.overlay.css';

```

## Example

**Markup**

```html



    Selector overlay

    Vimeo

      overlay

    YouTube

      overlay





    
Seamlessly myocardinate

    
Rem distinctio, vero sint quas numquam optio placeat, tenetur quasi unde nobis maiores. Reiciendis veritatis

      itaque recusandae ipsa, qui error possimus illo nihil animi commodi neque beatae, dicta impedit. Laudantium.

    
Officia quam commodi blanditiis unde perferendis repellat deleniti voluptatem consequatur repudiandae eos

      quibusdam dolorem molestias nostrum numquam maiores totam architecto, nemo provident reprehenderit labore veniam

      eius molestiae odit enim iusto.

    
Amet dolores reiciendis modi est atque, inventore at adipisci accusamus hic necessitatibus obcaecati recusandae

      consequuntur, odit, cupiditate ad voluptas laboriosam. Blanditiis ducimus consectetur nulla voluptates rerum iusto

      quo asperiores enim!



```


Then call the `overlay.create()`-method when you need to open the overlay.

**Example:**

```javascript

import NovicellOverlay from 'novicell-overlay';

// import NovicellOverlay from 'novicell-overlay.esm.js';//

document.addEventListener('DOMContentLoaded', () => {

    // Select your overlay trigger

    const trigger = document.querySelector('#js-overlay-trigger');

    trigger.addEventListener('click', (e) => {

        e.preventDefault();

        const overlayOne = new NovicellOverlay({

            selector: '#flafOverlay',

            className: 'selector-overlay',

            videoId: 'Bs3RLRF5akk',

            type: 'youtube',

            disableTracking: true,

            onCreate() {

                console.log('created');

            },

            onLoaded() {

                console.log('loaded');

            },

            onDestroy() {

                console.log('Destroyed');

            },

        });

        overlayOne.create();

    });

});

```

## Options

```javascript

const overlay = new NovicellOverlay({

    'videoId': '9bZkp7q19f0',                               // [string] Youtube or Vimeo video id

    'isVideo': true                                         // [boolean] Determines if video. Default is false

    'type': 'youtube',                                      // [string] 'youtube' or 'vimeo'

    'disableTracking': true,                                // [boolean] Disable tracking from video hosts. Default is false

    'className': 'video-overlay',                           // [string] class for overlay

    'autoplay': 1,                                          // [number] 0 or 1, turns on/off autoplay for vimeo and youtube

    'selector': '#js-overlay-content',                      // [string] javascript selector for content to go in overlay (overrides video)

    'element': element.querySelector('.child-element'),     // [DOM element] DOM element for content to go in overlay (overrides video)

    'onCreate': function(){},                               // [function] runs on create

    'onLoaded': function(){},                               // [function] runs on load

    'onDestroy': function(){}                               // [function] runs on destroy

});

```

## Contribution

Looking to contribute something? Here's how you can help. Please take a moment to review our [contribution guidelines](https://github.com/Novicell/novicell-frontend/wiki/Contribution-guidelines) in order to make the contribution process easy and effective for everyone involved.

## License

The Novicell Overlay is licensed under the MIT license. (http://opensource.org/licenses/MIT)