Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fixed behavior with tag <picture>: images now get resized. #36

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Fixed behavior with tag <picture>: images now get resized. #36

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion dist/basicLightbox.min.css
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion dist/basicLightbox.min.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

32 changes: 18 additions & 14 deletions src/scripts/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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')

Expand All @@ -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
Expand All @@ -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 {

Expand All @@ -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')
Expand All @@ -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

Expand All @@ -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')

Expand All @@ -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(`
<div class="basicLightbox ${ opts.className }">
<div class="basicLightbox ${opts.className}">
<div class="basicLightbox__placeholder" role="dialog"></div>
</div>
`)
Expand All @@ -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

Expand All @@ -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)

Expand All @@ -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')

Expand All @@ -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)
Expand Down Expand Up @@ -265,4 +269,4 @@ export const create = function(content, opts) {

return instance

}
}
115 changes: 59 additions & 56 deletions src/styles/main.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}

}
}