Skip to content

Commit

Permalink
Added possibility to add multiple classes to captions #280, added pos…
Browse files Browse the repository at this point in the history 
…sibility for better selectors which fixes #62 again, fixed #268 lightbox not centered with scrolling
  • Loading branch information
ars committed Nov 21, 2022
1 parent 30317f8 commit dc95258
Show file tree
Hide file tree
Showing 17 changed files with 779 additions and 271 deletions.
1 change: 1 addition & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -223,6 +223,7 @@ Run `gulp watch` to enable continous watching of both src/simple-lightbox.js and
Just call `gulp build` to have all files and variants created inside dist!

### Changelog
**2.11.0 - Added possibility to add multiple classes to captions #280, added possibility for better selectors which fixes #62 again, fixed #268 lightbox not centered with scrolling**
**2.10.4 - Fixed #277 - add passive listener for scroll events, #276 mistake z-index**
**2.10.3 - Fixed #264 - Fixed wrong mouse-zoom when the page is scrolled**
**2.10.2 - Fixed #258 with opacity flicker on overlay. For this, moved style option captionOpacity to js plugin**
Expand Down
2 changes: 1 addition & 1 deletion bower.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "simplelightbox",
"version": "2.10.4",
"version": "2.11.0",
"homepage": "https://simplelightbox.com/",
"authors": [
"André Rinas <[email protected]> (https://www.andrerinas.de)"
Expand Down
7 changes: 4 additions & 3 deletions demo/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport" />
<link href="https://fonts.googleapis.com/css?family=Raleway:300,400,700" rel="stylesheet">
<link rel="stylesheet" href="../dist/simple-lightbox.css?v2.10.4" />
<link rel="stylesheet" href="../dist/simple-lightbox.css?v2.11.0" />
<link rel="stylesheet" href="demo.css" />
<title>SimpleLightbox by André Rinas</title>
</head>
Expand All @@ -14,7 +14,7 @@
<div class="header-container">
<div class="container demo-container">
<div class="info">
<h1>SimpleLightbox <sup>v2.10.4</sup></h1>
<h1>SimpleLightbox <sup>v2.11.0</sup></h1>
<span class="subline">Touch-friendly image lightbox</span>
<nav>
<a class="btn donate" target="_blank" href="https://www.paypal.me/anrinas">Donate</a>
Expand Down Expand Up @@ -642,6 +642,7 @@ <h2>Customization</h2>
<h2>Changelog</h2>
</div>
<div class="col-right">
<strong>2.11.0</strong> - Added possibility to add multiple classes to captions #280, added possibility for better selectors which fixes #62 again, fixed #268 lightbox not centered with scrolling<br />
<strong>2.10.4</strong> - Fixed #277 - add passive listener for scroll events, #276 mistake z-index<br />
<strong>2.10.3</strong> - Fixed #264 - Fixed wrong mouse-zoom when the page is scrolled<br />
<strong>2.10.2</strong> - Fixed #258 with opacity flicker on overlay. For this, moved style option captionOpacity to js plugin<br />
Expand Down Expand Up @@ -759,7 +760,7 @@ <h2>Author/<br />Contributors</h2>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="../dist/simple-lightbox.js?v2.10.4"></script>
<script src="../dist/simple-lightbox.js?v2.11.0"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
Expand Down
4 changes: 2 additions & 2 deletions demo/onlyImages.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<title>Simple Lightbox - Responsive touch friendly Image lightbox</title>
<link href="https://fonts.googleapis.com/css?family=Raleway:300,400,700" rel="stylesheet">
<link rel="stylesheet" href="../dist/simple-lightbox.css?v2.10.4" />
<link rel="stylesheet" href="../dist/simple-lightbox.css?v2.11.0" />
<style>
body {
font-family: 'Raleway', sans-serif;
Expand Down Expand Up @@ -62,7 +62,7 @@ <h1 class="align-center">Simple Lightbox Demo Page</h1>
<p>All images are free availabled on <a href="https://unsplash.com/" target="_blank">Unsplash</a></p>
<p>Documentation and download <a target="_blank" href="https://simplelightbox.com">here</a></p>
</div>
<script src="../dist/simple-lightbox.js?v2.8.0"></script>
<script src="../dist/simple-lightbox.js?v2.11.0"></script>
<script>
(function() {
var $gallery = new SimpleLightbox('.gallery a', {});
Expand Down
2 changes: 1 addition & 1 deletion dist/simple-lightbox.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
By André Rinas, www.andrerinas.de
Documentation, www.simplelightbox.de
Available for use under the MIT License
Version 2.10.4
Version 2.11.0
*/
body.hidden-scroll {
overflow: hidden; }
Expand Down
83 changes: 69 additions & 14 deletions dist/simple-lightbox.esm.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
By André Rinas, www.andrerinas.de
Documentation, www.simplelightbox.de
Available for use under the MIT License
Version 2.10.4
Version 2.11.0
*/
class SimpleLightbox {

Expand Down Expand Up @@ -255,6 +255,52 @@ class SimpleLightbox {
return supportsPassive;
}

generateQuerySelector(elem) {
const {
tagName,
id,
className,
parentNode
} = elem;

if (tagName === 'HTML') return 'HTML';

let str = tagName;

str += (id !== '') ? `#${id}` : '';

if (className) {
const classes = className.split(/\s/);
for (let i = 0; i < classes.length; i++) {
str += `.${classes[i]}`;
}
}

let childIndex = 1;

for (let e = elem; e.previousElementSibling; e = e.previousElementSibling) {
childIndex += 1;
}

str += `:nth-child(${childIndex})`;

return `${this.generateQuerySelector(parentNode)} > ${str}`;
}

// generateQuerySelector(el) {
// if (el.tagName.toLowerCase() == "html")
// return "HTML";
// var str = el.tagName;
// str += (el.id != "") ? "#" + el.id : "";
// if (el.className) {
// var classes = el.className.split(/\s/);
// for (var i = 0; i < classes.length; i++) {
// str += "." + classes[i]
// }
// }
// return this.generateQuerySelector(el.parentNode) + " > " + str;
// }

createDomNodes() {
this.domNodes.overlay = document.createElement('div');
this.domNodes.overlay.classList.add('sl-overlay');
Expand All @@ -279,7 +325,8 @@ class SimpleLightbox {
this.domNodes.caption = document.createElement('div');
this.domNodes.caption.classList.add('sl-caption', 'pos-' + this.options.captionPosition);
if (this.options.captionClass) {
this.domNodes.caption.classList.add(this.options.captionClass);
let captionClasses = this.options.captionClass.split(/[\s,]+/);
this.domNodes.caption.classList.add(...captionClasses);
}

this.domNodes.image = document.createElement('div');
Expand Down Expand Up @@ -325,6 +372,17 @@ class SimpleLightbox {
false;
}

getScrollbarWidth() {
let scrollbarWidth = 0;
let scrollDiv = document.createElement('div');
scrollDiv.classList.add('sl-scrollbar-measure');

document.body.appendChild(scrollDiv);
scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
document.body.removeChild(scrollDiv);
return scrollbarWidth;
}

toggleScrollbar(type) {
let scrollbarWidth = 0;
let fixedElements = [].slice.call(document.querySelectorAll('.'+this.options.fixedClass))
Expand All @@ -335,15 +393,8 @@ class SimpleLightbox {
fullWindowWidth = documentElementRect.right - Math.abs(documentElementRect.left);
}
if (document.body.clientWidth < fullWindowWidth || this.isAppleDevice) {
let scrollDiv = document.createElement('div'),
paddingRight = parseInt(document.body.style.paddingRight || 0, 10);

scrollDiv.classList.add('sl-scrollbar-measure');

document.body.appendChild(scrollDiv);
scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
document.body.removeChild(scrollDiv);

let paddingRight = parseInt(document.body.style.paddingRight || 0, 10);
scrollbarWidth = this.getScrollbarWidth();
document.body.dataset.originalPaddingRight = paddingRight;
if (scrollbarWidth > 0 || (scrollbarWidth == 0 && this.isAppleDevice)) {
document.body.classList.add('hidden-scroll');
Expand Down Expand Up @@ -582,7 +633,9 @@ class SimpleLightbox {
captionText;

if (typeof this.options.captionSelector === 'string') {
captionContainer = this.options.captionSelector === 'self' ? this.relatedElements[this.currentImageIndex] : this.relatedElements[this.currentImageIndex].querySelector(this.options.captionSelector);
captionContainer = this.options.captionSelector === 'self'
? this.relatedElements[this.currentImageIndex]
: document.querySelector(this.generateQuerySelector(this.relatedElements[this.currentImageIndex]) + ' ' + this.options.captionSelector);
} else if (typeof this.options.captionSelector === 'function') {
captionContainer = this.options.captionSelector(this.relatedElements[this.currentImageIndex]);
}
Expand Down Expand Up @@ -1180,8 +1233,10 @@ class SimpleLightbox {
openImage(element) {
element.dispatchEvent(new Event('show.' + this.eventNamespace));

this.globalScrollbarWidth = this.getScrollbarWidth();
if (this.options.disableScroll) {
this.globalScrollbarWidth = this.toggleScrollbar('hide');
this.toggleScrollbar('hide');
this.globalScrollbarWidth = 0;
}

if (this.options.htmlClass && this.options.htmlClass !== '') {
Expand Down Expand Up @@ -1488,4 +1543,4 @@ class SimpleLightbox {
}
export default SimpleLightbox;

global.SimpleLightbox = SimpleLightbox;
global.SimpleLightbox = SimpleLightbox;
72 changes: 62 additions & 10 deletions dist/simple-lightbox.jquery.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
By André Rinas, www.andrerinas.de
Documentation, www.simplelightbox.de
Available for use under the MIT License
Version 2.10.4
Version 2.11.0
*/
(function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){
"use strict";
Expand All @@ -26,7 +26,11 @@ Object.defineProperty(exports, "__esModule", {
exports["default"] = void 0;
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
Expand Down Expand Up @@ -258,6 +262,43 @@ var SimpleLightbox = /*#__PURE__*/function () {
} catch (e) {}
return supportsPassive;
}
}, {
key: "generateQuerySelector",
value: function generateQuerySelector(elem) {
var tagName = elem.tagName,
id = elem.id,
className = elem.className,
parentNode = elem.parentNode;
if (tagName === 'HTML') return 'HTML';
var str = tagName;
str += id !== '' ? "#".concat(id) : '';
if (className) {
var classes = className.split(/\s/);
for (var i = 0; i < classes.length; i++) {
str += ".".concat(classes[i]);
}
}
var childIndex = 1;
for (var e = elem; e.previousElementSibling; e = e.previousElementSibling) {
childIndex += 1;
}
str += ":nth-child(".concat(childIndex, ")");
return "".concat(this.generateQuerySelector(parentNode), " > ").concat(str);
}

// generateQuerySelector(el) {
// if (el.tagName.toLowerCase() == "html")
// return "HTML";
// var str = el.tagName;
// str += (el.id != "") ? "#" + el.id : "";
// if (el.className) {
// var classes = el.className.split(/\s/);
// for (var i = 0; i < classes.length; i++) {
// str += "." + classes[i]
// }
// }
// return this.generateQuerySelector(el.parentNode) + " > " + str;
// }
}, {
key: "createDomNodes",
value: function createDomNodes() {
Expand All @@ -279,7 +320,9 @@ var SimpleLightbox = /*#__PURE__*/function () {
this.domNodes.caption = document.createElement('div');
this.domNodes.caption.classList.add('sl-caption', 'pos-' + this.options.captionPosition);
if (this.options.captionClass) {
this.domNodes.caption.classList.add(this.options.captionClass);
var _this$domNodes$captio;
var captionClasses = this.options.captionClass.split(/[\s,]+/);
(_this$domNodes$captio = this.domNodes.caption.classList).add.apply(_this$domNodes$captio, _toConsumableArray(captionClasses));
}
this.domNodes.image = document.createElement('div');
this.domNodes.image.classList.add('sl-image');
Expand Down Expand Up @@ -320,6 +363,17 @@ var SimpleLightbox = /*#__PURE__*/function () {
var s = (document.body || document.documentElement).style;
return 'transition' in s ? '' : 'WebkitTransition' in s ? '-webkit-' : 'MozTransition' in s ? '-moz-' : 'OTransition' in s ? '-o' : false;
}
}, {
key: "getScrollbarWidth",
value: function getScrollbarWidth() {
var scrollbarWidth = 0;
var scrollDiv = document.createElement('div');
scrollDiv.classList.add('sl-scrollbar-measure');
document.body.appendChild(scrollDiv);
scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
document.body.removeChild(scrollDiv);
return scrollbarWidth;
}
}, {
key: "toggleScrollbar",
value: function toggleScrollbar(type) {
Expand All @@ -332,12 +386,8 @@ var SimpleLightbox = /*#__PURE__*/function () {
fullWindowWidth = documentElementRect.right - Math.abs(documentElementRect.left);
}
if (document.body.clientWidth < fullWindowWidth || this.isAppleDevice) {
var scrollDiv = document.createElement('div'),
paddingRight = parseInt(document.body.style.paddingRight || 0, 10);
scrollDiv.classList.add('sl-scrollbar-measure');
document.body.appendChild(scrollDiv);
scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
document.body.removeChild(scrollDiv);
var paddingRight = parseInt(document.body.style.paddingRight || 0, 10);
scrollbarWidth = this.getScrollbarWidth();
document.body.dataset.originalPaddingRight = paddingRight;
if (scrollbarWidth > 0 || scrollbarWidth == 0 && this.isAppleDevice) {
document.body.classList.add('hidden-scroll');
Expand Down Expand Up @@ -544,7 +594,7 @@ var SimpleLightbox = /*#__PURE__*/function () {
_this5.isOpen = true;
var captionContainer, captionText;
if (typeof _this5.options.captionSelector === 'string') {
captionContainer = _this5.options.captionSelector === 'self' ? _this5.relatedElements[_this5.currentImageIndex] : _this5.relatedElements[_this5.currentImageIndex].querySelector(_this5.options.captionSelector);
captionContainer = _this5.options.captionSelector === 'self' ? _this5.relatedElements[_this5.currentImageIndex] : document.querySelector(_this5.generateQuerySelector(_this5.relatedElements[_this5.currentImageIndex]) + ' ' + _this5.options.captionSelector);
} else if (typeof _this5.options.captionSelector === 'function') {
captionContainer = _this5.options.captionSelector(_this5.relatedElements[_this5.currentImageIndex]);
}
Expand Down Expand Up @@ -1076,8 +1126,10 @@ var SimpleLightbox = /*#__PURE__*/function () {
value: function openImage(element) {
var _this8 = this;
element.dispatchEvent(new Event('show.' + this.eventNamespace));
this.globalScrollbarWidth = this.getScrollbarWidth();
if (this.options.disableScroll) {
this.globalScrollbarWidth = this.toggleScrollbar('hide');
this.toggleScrollbar('hide');
this.globalScrollbarWidth = 0;
}
if (this.options.htmlClass && this.options.htmlClass !== '') {
document.querySelector('html').classList.add(this.options.htmlClass);
Expand Down
2 changes: 1 addition & 1 deletion dist/simple-lightbox.jquery.min.js
View file

Large diffs are not rendered by default.

Loading

0 comments on commit dc95258

Please sign in to comment.