{"id":19999688,"url":"https://github.com/novicell/novicell-overlay","last_synced_at":"2025-05-04T14:32:04.378Z","repository":{"id":54962810,"uuid":"78829737","full_name":"Novicell/novicell-overlay","owner":"Novicell","description":"Simple script that can open an overlay / modal","archived":false,"fork":false,"pushed_at":"2021-01-21T09:27:15.000Z","size":97,"stargazers_count":4,"open_issues_count":4,"forks_count":3,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-10-31T20:43:11.514Z","etag":null,"topics":["javascript","js","lightbox","modal","novicell","novicell-overlay","overlay","vanilla"],"latest_commit_sha":null,"homepage":"","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/Novicell.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}},"created_at":"2017-01-13T08:20:30.000Z","updated_at":"2022-05-04T06:26:32.000Z","dependencies_parsed_at":"2022-08-14T07:31:11.683Z","dependency_job_id":null,"html_url":"https://github.com/Novicell/novicell-overlay","commit_stats":null,"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Novicell%2Fnovicell-overlay","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Novicell%2Fnovicell-overlay/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Novicell%2Fnovicell-overlay/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Novicell%2Fnovicell-overlay/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Novicell","download_url":"https://codeload.github.com/Novicell/novicell-overlay/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224393873,"owners_count":17303725,"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":["javascript","js","lightbox","modal","novicell","novicell-overlay","overlay","vanilla"],"created_at":"2024-11-13T05:12:30.583Z","updated_at":"2024-11-13T05:12:31.347Z","avatar_url":"https://github.com/Novicell.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Novicell Overlay\n**Simple script that can open an overlay / modal**\n\n## Usage\n\nWritten 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.\n\n### Install with npm\n\n```bash\nnpm install novicell-overlay\n```\n\n## Setup\n\nFirst include the dependency in your project's js file:\n```javascript\nimport NovicellOverlay from 'novicell-overlay';\n```\n\nAnd css (optional)\n```css\n@import '../../node_modules/novicell-overlay/css/novicell.overlay.css';\n```\n\n## Example\n\n**Markup**\n\n```html\n\u003cdiv class=\"demo-content\"\u003e\n    \u003cbutton id=\"js-overlay-trigger\" class=\"button button--orange\" data-element=\"#js-overlay-content\"\n      type=\"button\"\u003eSelector overlay\u003c/button\u003e\n    \u003cbutton data-video-id=\"152477009\" data-type=\"vimeo\" class=\"js-video-overlay-trigger button button--blue\"\u003eVimeo\n      overlay\u003c/button\u003e\n    \u003cbutton data-video-id=\"5dsGWM5XGdg\" data-type=\"youtube\" class=\"js-video-overlay-trigger button button--red\"\u003eYouTube\n      overlay\u003c/button\u003e\n\u003c/div\u003e\n\n\u003cdiv class=\"overlay-content\" id=\"js-overlay-content\" style=\"display: none;\"\u003e\n    \u003ch1\u003eSeamlessly myocardinate\u003c/h1\u003e\n    \u003cp\u003eRem distinctio, vero sint quas numquam optio placeat, tenetur quasi unde nobis maiores. Reiciendis veritatis\n      itaque recusandae ipsa, qui error possimus illo nihil animi commodi neque beatae, dicta impedit. Laudantium.\u003c/p\u003e\n    \u003cp\u003eOfficia quam commodi blanditiis unde perferendis repellat deleniti voluptatem consequatur repudiandae eos\n      quibusdam dolorem molestias nostrum numquam maiores totam architecto, nemo provident reprehenderit labore veniam\n      eius molestiae odit enim iusto.\u003c/p\u003e\n    \u003cp\u003eAmet dolores reiciendis modi est atque, inventore at adipisci accusamus hic necessitatibus obcaecati recusandae\n      consequuntur, odit, cupiditate ad voluptas laboriosam. Blanditiis ducimus consectetur nulla voluptates rerum iusto\n      quo asperiores enim!\u003c/p\u003e\n\u003c/div\u003e\n```\n\nThen call the `overlay.create()`-method when you need to open the overlay.\n\n**Example:**\n```javascript\nimport NovicellOverlay from 'novicell-overlay';\n// import NovicellOverlay from 'novicell-overlay.esm.js';//\ndocument.addEventListener('DOMContentLoaded', () =\u003e {\n    // Select your overlay trigger\n    const trigger = document.querySelector('#js-overlay-trigger');\n    trigger.addEventListener('click', (e) =\u003e {\n        e.preventDefault();\n        const overlayOne = new NovicellOverlay({\n            selector: '#flafOverlay',\n            className: 'selector-overlay',\n            videoId: 'Bs3RLRF5akk',\n            type: 'youtube',\n            disableTracking: true,\n            onCreate() {\n                console.log('created');\n            },\n            onLoaded() {\n                console.log('loaded');\n            },\n            onDestroy() {\n                console.log('Destroyed');\n            },\n        });\n        overlayOne.create();\n    });\n});\n\n```\n\n## Options\n```javascript\nconst overlay = new NovicellOverlay({\n    'videoId': '9bZkp7q19f0',                               // [string] Youtube or Vimeo video id\n    'isVideo': true                                         // [boolean] Determines if video. Default is false\n    'type': 'youtube',                                      // [string] 'youtube' or 'vimeo'\n    'disableTracking': true,                                // [boolean] Disable tracking from video hosts. Default is false\n    'className': 'video-overlay',                           // [string] class for overlay\n    'autoplay': 1,                                          // [number] 0 or 1, turns on/off autoplay for vimeo and youtube\n    'selector': '#js-overlay-content',                      // [string] javascript selector for content to go in overlay (overrides video)\n    'element': element.querySelector('.child-element'),     // [DOM element] DOM element for content to go in overlay (overrides video)\n    'onCreate': function(){},                               // [function] runs on create\n    'onLoaded': function(){},                               // [function] runs on load\n    'onDestroy': function(){}                               // [function] runs on destroy\n});\n```\n\n## Contribution\n\nLooking 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.\n\n## License\n\nThe Novicell Overlay is licensed under the MIT license. (http://opensource.org/licenses/MIT)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnovicell%2Fnovicell-overlay","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnovicell%2Fnovicell-overlay","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnovicell%2Fnovicell-overlay/lists"}