From ef096f04a586c58fde9b44814606dac1af16b9e7 Mon Sep 17 00:00:00 2001 From: Savino Pio Liguori <8lall0@users.noreply.github.com> Date: Fri, 19 Feb 2021 19:05:23 +0100 Subject: [PATCH] Fixed behavior with tag : images now get resized. --- dist/basicLightbox.min.css | 2 +- dist/basicLightbox.min.js | 2 +- src/scripts/main.js | 32 ++++++----- src/styles/main.scss | 115 +++++++++++++++++++------------------ 4 files changed, 79 insertions(+), 72 deletions(-) diff --git a/dist/basicLightbox.min.css b/dist/basicLightbox.min.css index 175b1ce..4a2865a 100644 --- a/dist/basicLightbox.min.css +++ b/dist/basicLightbox.min.css @@ -1 +1 @@ -.basicLightbox{position:fixed;display:flex;justify-content:center;align-items:center;top:0;left:0;width:100%;height:100vh;background:rgba(0,0,0,.8);opacity:.01;transition:opacity .4s ease;z-index:1000;will-change:opacity}.basicLightbox--visible{opacity:1}.basicLightbox__placeholder{max-width:100%;transform:scale(.9);transition:transform .4s ease;z-index:1;will-change:transform}.basicLightbox__placeholder>iframe:first-child:last-child,.basicLightbox__placeholder>img:first-child:last-child,.basicLightbox__placeholder>video:first-child:last-child{display:block;position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;max-width:95%;max-height:95%}.basicLightbox__placeholder>iframe:first-child:last-child,.basicLightbox__placeholder>video:first-child:last-child{pointer-events:auto}.basicLightbox__placeholder>img:first-child:last-child,.basicLightbox__placeholder>video:first-child:last-child{width:auto;height:auto}.basicLightbox--iframe .basicLightbox__placeholder,.basicLightbox--img .basicLightbox__placeholder,.basicLightbox--video .basicLightbox__placeholder{width:100%;height:100%;pointer-events:none}.basicLightbox--visible .basicLightbox__placeholder{transform:scale(1)} \ No newline at end of file +.basicLightbox{position:fixed;display:flex;justify-content:center;align-items:center;top:0;left:0;width:100%;height:100vh;background:rgba(0,0,0,.8);opacity:.01;transition:opacity .4s ease;z-index:1000;will-change:opacity}.basicLightbox--visible{opacity:1}.basicLightbox__placeholder{max-width:100%;transform:scale(.9);transition:transform .4s ease;z-index:1;will-change:transform}.basicLightbox__placeholder>iframe:first-child:last-child,.basicLightbox__placeholder>img:first-child:last-child,.basicLightbox__placeholder>picture:first-child:last-child img,.basicLightbox__placeholder>video:first-child:last-child{display:block;position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;max-width:95%;max-height:95%}.basicLightbox__placeholder>iframe:first-child:last-child,.basicLightbox__placeholder>video:first-child:last-child{pointer-events:auto}.basicLightbox__placeholder>img:first-child:last-child,.basicLightbox__placeholder>picture:first-child:last-child img,.basicLightbox__placeholder>video:first-child:last-child{width:auto;height:auto}.basicLightbox--iframe .basicLightbox__placeholder,.basicLightbox--img .basicLightbox__placeholder,.basicLightbox--picture .basicLightbox__placeholder,.basicLightbox--video .basicLightbox__placeholder{width:100%;height:100%;pointer-events:none}.basicLightbox--visible .basicLightbox__placeholder{transform:scale(1)} \ No newline at end of file diff --git a/dist/basicLightbox.min.js b/dist/basicLightbox.min.js index b2b6ccd..fea4021 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 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"),a=r(i,"PICTURE");return!0===c&&t.classList.add("basicLightbox--img"),!0===u&&t.classList.add("basicLightbox--video"),!0===s&&t.classList.add("basicLightbox--iframe"),!0===a&&t.classList.add("basicLightbox--picture"),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 diff --git a/src/scripts/main.js b/src/scripts/main.js index 10df22a..01fcf72 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -4,7 +4,7 @@ * @param {?Boolean} children - Return all children instead of the first one. * @returns {Node} */ -const toElement = function(html, children = false) { +const toElement = function (html, children = false) { const elem = document.createElement('div') @@ -19,7 +19,7 @@ const toElement = function(html, children = false) { * @param {Node|String} content * @returns {Array} content - Validated content. */ -const validateContent = function(content) { +const validateContent = function (content) { const isString = typeof content === 'string' const isHTMLElement = content instanceof HTMLElement === true @@ -38,7 +38,7 @@ const validateContent = function(content) { } else if (content.tagName === 'TEMPLATE') { // Template - return [ content.content.cloneNode(true) ] + return [content.content.cloneNode(true)] } else { @@ -54,14 +54,16 @@ const validateContent = function(content) { * @param {?Object} opts * @returns {Object} opts - Validated options. */ -const validateOptions = function(opts = {}) { +const validateOptions = function (opts = {}) { opts = Object.assign({}, opts) if (opts.closable == null) opts.closable = true if (opts.className == null) opts.className = '' - if (opts.onShow == null) opts.onShow = () => {} - if (opts.onClose == null) opts.onClose = () => {} + if (opts.onShow == null) opts.onShow = () => { + } + if (opts.onClose == null) opts.onClose = () => { + } 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') @@ -78,7 +80,7 @@ const validateOptions = function(opts = {}) { * @param {String} tag * @returns {Boolean} containsTag */ -const containsTag = function(elem, tag) { +const containsTag = function (elem, tag) { const children = elem.children @@ -91,7 +93,7 @@ const containsTag = function(elem, tag) { * @param {?Node} elem * @returns {Boolean} visible */ -export const visible = function(elem) { +export const visible = function (elem) { elem = elem || document.querySelector('.basicLightbox') @@ -105,10 +107,10 @@ export const visible = function(elem) { * @param {Object} opts * @returns {Node} elem */ -const render = function(content, opts) { +const render = function (content, opts) { const elem = toElement(` -
+
`) @@ -122,12 +124,14 @@ const render = function(content, opts) { const img = containsTag(placeholder, 'IMG') const video = containsTag(placeholder, 'VIDEO') const iframe = containsTag(placeholder, 'IFRAME') + const picture = containsTag(placeholder, 'PICTURE') // Add special treatment class when it only contains an image, a video or iframe. // This class is necessary to center the image, video or iframe. if (img === true) elem.classList.add('basicLightbox--img') if (video === true) elem.classList.add('basicLightbox--video') if (iframe === true) elem.classList.add('basicLightbox--iframe') + if (picture === true) elem.classList.add('basicLightbox--picture') return elem @@ -139,7 +143,7 @@ const render = function(content, opts) { * @param {Function} next - The callback that gets executed when the lightbox starts to show up. * @returns {Boolean} success */ -const show = function(elem, next) { +const show = function (elem, next) { document.body.appendChild(elem) @@ -164,7 +168,7 @@ const show = function(elem, next) { * @param {Function} next - The callback that gets executed when the lightbox is fully closed. * @returns {Boolean} success */ -const close = function(elem, next) { +const close = function (elem, next) { elem.classList.remove('basicLightbox--visible') @@ -189,7 +193,7 @@ const close = function(elem, next) { * @param {?Object} opts * @returns {Object} instance */ -export const create = function(content, opts) { +export const create = function (content, opts) { content = validateContent(content) opts = validateOptions(opts) @@ -265,4 +269,4 @@ export const create = function(content, opts) { return instance -} \ No newline at end of file +} diff --git a/src/styles/main.scss b/src/styles/main.scss index 0a4c9fe..2ebe2c2 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -7,67 +7,70 @@ $basicLightbox__timing: ease !default; // basicLightbox ------------------------------------------------------- // .basicLightbox { - position: fixed; - display: flex; - justify-content: center; - align-items: center; - top: 0; - left: 0; - width: 100%; - height: 100vh; - background: $basicLightbox__background; - opacity: .01; // Start with .01 to avoid the repaint that happens from 0 to .01 - transition: opacity $basicLightbox__duration $basicLightbox__timing; - z-index: $basicLightbox__zIndex; - will-change: opacity; + position: fixed; + display: flex; + justify-content: center; + align-items: center; + top: 0; + left: 0; + width: 100%; + height: 100vh; + background: $basicLightbox__background; + opacity: .01; // Start with .01 to avoid the repaint that happens from 0 to .01 + transition: opacity $basicLightbox__duration $basicLightbox__timing; + z-index: $basicLightbox__zIndex; + will-change: opacity; - &--visible { - opacity: 1; - } + &--visible { + opacity: 1; + } - &__placeholder { - max-width: 100%; - transform: scale(.9); - transition: transform $basicLightbox__duration $basicLightbox__timing; - z-index: 1; - will-change: transform; + &__placeholder { + max-width: 100%; + transform: scale(.9); + transition: transform $basicLightbox__duration $basicLightbox__timing; + z-index: 1; + will-change: transform; - > img:first-child:last-child, - > video:first-child:last-child, - > iframe:first-child:last-child { - display: block; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - margin: auto; - max-width: 95%; - max-height: 95%; - } + > img:first-child:last-child, + > picture:first-child:last-child img, + > video:first-child:last-child, + > iframe:first-child:last-child { + display: block; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + margin: auto; + max-width: 95%; + max-height: 95%; + } - > video:first-child:last-child, - > iframe:first-child:last-child { - pointer-events: auto; - } + > video:first-child:last-child, + > iframe:first-child:last-child { + pointer-events: auto; + } - > img:first-child:last-child, - > video:first-child:last-child { - width: auto; - height: auto; - } - } + > img:first-child:last-child, + > picture:first-child:last-child img, + > video:first-child:last-child { + width: auto; + height: auto; + } + } - &--img &__placeholder, - &--video &__placeholder, - &--iframe &__placeholder { - width: 100%; - height: 100%; - pointer-events: none; - } + &--img &__placeholder, + &--picture &__placeholder, + &--video &__placeholder, + &--iframe &__placeholder { + width: 100%; + height: 100%; + pointer-events: none; + } - &--visible &__placeholder { - transform: scale(1); - } + &--visible &__placeholder { + transform: scale(1); + } -} \ No newline at end of file +}