diff --git a/CHANGELOG.md b/CHANGELOG.md index 8115b10..0e4ba3f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,12 @@ All notable changes to this project will be documented in this file. The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/) and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html). +## [5.1.0] - 2025-06-05 + +### Added + +- Extend Option with (optional) "container" parameter which can be used to specify the container the overlay should be attached to + ## [5.0.4] - 2021-01-17 ### Changed diff --git a/README.md b/README.md index c992343..20ad7b4 100644 --- a/README.md +++ b/README.md @@ -216,6 +216,10 @@ The option object can include the following properties: * One or more space separated classes to be added to the basicLightbox element. */ className: '', + /* + * (optional) dom object the lightbox markup will be appended to, default: document.body + */ + container: dom-object /* * Function that gets executed before the lightbox will be shown. * Returning false will prevent the lightbox from showing. @@ -238,4 +242,4 @@ $basicLightbox__duration: .4s; // Transition duration $basicLightbox__timing: ease; // Transition timing @import 'src/styles/main'; -``` \ No newline at end of file +``` diff --git a/dist/basicLightbox.min.js b/dist/basicLightbox.min.js index b2b6ccd..92e5d39 100644 --- a/dist/basicLightbox.min.js +++ b/dist/basicLightbox.min.js @@ -1 +1 @@ -!function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{("undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this).basicLightbox=e()}}((function(){return function e(n,t,o){function r(c,u){if(!t[c]){if(!n[c]){var s="function"==typeof require&&require;if(!u&&s)return s(c,!0);if(i)return i(c,!0);var a=new Error("Cannot find module '"+c+"'");throw a.code="MODULE_NOT_FOUND",a}var l=t[c]={exports:{}};n[c][0].call(l.exports,(function(e){return r(n[c][1][e]||e)}),l,l.exports,e,n,t,o)}return t[c].exports}for(var i="function"==typeof require&&require,c=0;c1&&void 0!==arguments[1]&&arguments[1],t=document.createElement("div");return t.innerHTML=e.trim(),!0===n?t.children:t.firstChild},r=function(e,n){var t=e.children;return 1===t.length&&t[0].tagName===n},i=function(e){return null!=(e=e||document.querySelector(".basicLightbox"))&&!0===e.ownerDocument.body.contains(e)};t.visible=i;t.create=function(e,n){var t=function(e,n){var t=o('\n\t\t
\n\t\t\t\n\t\t
\n\t')),i=t.querySelector(".basicLightbox__placeholder");e.forEach((function(e){return i.appendChild(e)}));var c=r(i,"IMG"),u=r(i,"VIDEO"),s=r(i,"IFRAME");return!0===c&&t.classList.add("basicLightbox--img"),!0===u&&t.classList.add("basicLightbox--video"),!0===s&&t.classList.add("basicLightbox--iframe"),t}(e=function(e){var n="string"==typeof e,t=e instanceof HTMLElement==1;if(!1===n&&!1===t)throw new Error("Content must be a DOM element/node or string");return!0===n?Array.from(o(e,!0)):"TEMPLATE"===e.tagName?[e.content.cloneNode(!0)]:Array.from(e.children)}(e),n=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};if(null==(e=Object.assign({},e)).closable&&(e.closable=!0),null==e.className&&(e.className=""),null==e.onShow&&(e.onShow=function(){}),null==e.onClose&&(e.onClose=function(){}),"boolean"!=typeof e.closable)throw new Error("Property `closable` must be a boolean");if("string"!=typeof e.className)throw new Error("Property `className` must be a string");if("function"!=typeof e.onShow)throw new Error("Property `onShow` must be a function");if("function"!=typeof e.onClose)throw new Error("Property `onClose` must be a function");return e}(n)),c=function(e){return!1!==n.onClose(u)&&function(e,n){return e.classList.remove("basicLightbox--visible"),setTimeout((function(){return!1===i(e)||e.parentElement.removeChild(e),n()}),410),!0}(t,(function(){if("function"==typeof e)return e(u)}))};!0===n.closable&&t.addEventListener("click",(function(e){e.target===t&&c()}));var u={element:function(){return t},visible:function(){return i(t)},show:function(e){return!1!==n.onShow(u)&&function(e,n){return document.body.appendChild(e),setTimeout((function(){requestAnimationFrame((function(){return e.classList.add("basicLightbox--visible"),n()}))}),10),!0}(t,(function(){if("function"==typeof e)return e(u)}))},close:c};return u}},{}]},{},[1])(1)})); \ No newline at end of file +!function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{("undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this).basicLightbox=e()}}((function(){return function e(n,t,o){function r(c,u){if(!t[c]){if(!n[c]){var l="function"==typeof require&&require;if(!u&&l)return l(c,!0);if(i)return i(c,!0);var f=new Error("Cannot find module '"+c+"'");throw f.code="MODULE_NOT_FOUND",f}var a=t[c]={exports:{}};n[c][0].call(a.exports,(function(e){return r(n[c][1][e]||e)}),a,a.exports,e,n,t,o)}return t[c].exports}for(var i="function"==typeof require&&require,c=0;c1&&void 0!==arguments[1]&&arguments[1],t=document.createElement("div");return t.innerHTML=e.trim(),!0===n?t.children:t.firstChild},i=function(e,n){var t=e.children;return 1===t.length&&t[0].tagName===n},c=t.visible=function(e){return null!=(e=e||document.querySelector(".basicLightbox"))&&!0===e.ownerDocument.body.contains(e)};t.create=function(e,n){e=function(e){var n="string"==typeof e,t=e instanceof HTMLElement==1;if(!1===n&&!1===t)throw new Error("Content must be a DOM element/node or string");return!0===n?Array.from(r(e,!0)):"TEMPLATE"===e.tagName?[e.content.cloneNode(!0)]:Array.from(e.children)}(e),n=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};if(null==(e=Object.assign({},e)).closable&&(e.closable=!0),null==e.className&&(e.className=""),null==e.onShow&&(e.onShow=function(){}),null==e.onClose&&(e.onClose=function(){}),null==e.container&&(e.container=document.body),"boolean"!=typeof e.closable)throw new Error("Property `closable` must be a boolean");if("string"!=typeof e.className)throw new Error("Property `className` must be a string");if("function"!=typeof e.onShow)throw new Error("Property `onShow` must be a function");if("function"!=typeof e.onClose)throw new Error("Property `onClose` must be a function");if("object"!==o(e.container))throw new Error("Property `conteiner` must be a object");return e}(n);var t=function(e,n){var t=r('\n\t\t
\n\t\t\t\n\t\t
\n\t')),o=t.querySelector(".basicLightbox__placeholder");e.forEach((function(e){return o.appendChild(e)}));var c=i(o,"IMG"),u=i(o,"VIDEO"),l=i(o,"IFRAME");return!0===c&&t.classList.add("basicLightbox--img"),!0===u&&t.classList.add("basicLightbox--video"),!0===l&&t.classList.add("basicLightbox--iframe"),t}(e,n),u=function(e){return!1!==n.onClose(l)&&function(e,n){return e.classList.remove("basicLightbox--visible"),setTimeout((function(){return!1===c(e)||e.parentElement.removeChild(e),n()}),410),!0}(t,(function(){if("function"==typeof e)return e(l)}))};!0===n.closable&&t.addEventListener("click",(function(e){e.target===t&&u()}));var l={element:function(){return t},visible:function(){return c(t)},show:function(e){return!1!==n.onShow(l)&&function(e,n,t){return t.container.appendChild(e),setTimeout((function(){requestAnimationFrame((function(){return e.classList.add("basicLightbox--visible"),n()}))}),10),!0}(t,(function(){if("function"==typeof e)return e(l)}),n)},close:u};return l}},{}]},{},[1])(1)})); \ No newline at end of file diff --git a/src/scripts/main.js b/src/scripts/main.js index 10df22a..db8b93e 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -62,11 +62,14 @@ const validateOptions = function(opts = {}) { if (opts.className == null) opts.className = '' if (opts.onShow == null) opts.onShow = () => {} if (opts.onClose == null) opts.onClose = () => {} + if (opts.container == null) opts.container = document.body; + if (typeof opts.closable !== 'boolean') throw new Error('Property `closable` must be a boolean') if (typeof opts.className !== 'string') throw new Error('Property `className` must be a string') if (typeof opts.onShow !== 'function') throw new Error('Property `onShow` must be a function') if (typeof opts.onClose !== 'function') throw new Error('Property `onClose` must be a function') + if (typeof opts.container !== 'object') throw new Error('Property `conteiner` must be a object') return opts @@ -137,11 +140,12 @@ const render = function(content, opts) { * Shows a lightbox by appending an element to the DOM. * @param {Node} elem * @param {Function} next - The callback that gets executed when the lightbox starts to show up. + * @param {?Object} opts * @returns {Boolean} success */ -const show = function(elem, next) { +const show = function(elem, next, opts) { - document.body.appendChild(elem) + opts.container.appendChild(elem) // Wait a while to ensure that the class change triggers the animation setTimeout(() => { @@ -223,7 +227,7 @@ export const create = function(content, opts) { // Continue with the callback when available if (typeof next === 'function') return next(instance) - }) + }, opts) }