lightgallery
Version:
lightGallery is a feature-rich, modular JavaScript gallery plugin for building beautiful image and video galleries for the web and the mobile
303 lines • 13 kB
JavaScript
;
var __spreadArrays = (this && this.__spreadArrays) || function () {
for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
for (var r = Array(s), k = 0, i = 0; i < il; i++)
for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
r[k] = a[j];
return r;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.convertToData = void 0;
var lgQuery_1 = require("./lgQuery");
var defaultDynamicOptions = [
'src',
'sources',
'subHtml',
'subHtmlUrl',
'html',
'video',
'poster',
'slideName',
'responsive',
'srcset',
'sizes',
'iframe',
'downloadUrl',
'download',
'width',
'facebookShareUrl',
'tweetText',
'iframeTitle',
'twitterShareUrl',
'pinterestShareUrl',
'pinterestText',
'fbHtml',
'disqusIdentifier',
'disqusUrl',
];
// Convert html data-attribute to camalcase
function convertToData(attr) {
// FInd a way for lgsize
if (attr === 'href') {
return 'src';
}
attr = attr.replace('data-', '');
attr = attr.charAt(0).toLowerCase() + attr.slice(1);
attr = attr.replace(/-([a-z])/g, function (g) { return g[1].toUpperCase(); });
return attr;
}
exports.convertToData = convertToData;
var utils = {
/**
* get possible width and height from the lgSize attribute. Used for ZoomFromOrigin option
*/
getSize: function (el, container, spacing, defaultLgSize) {
if (spacing === void 0) { spacing = 0; }
var LGel = lgQuery_1.$LG(el);
var lgSize = LGel.attr('data-lg-size') || defaultLgSize;
if (!lgSize) {
return;
}
var isResponsiveSizes = lgSize.split(',');
// if at-least two viewport sizes are available
if (isResponsiveSizes[1]) {
var wWidth = window.innerWidth;
for (var i = 0; i < isResponsiveSizes.length; i++) {
var size_1 = isResponsiveSizes[i];
var responsiveWidth = parseInt(size_1.split('-')[2], 10);
if (responsiveWidth > wWidth) {
lgSize = size_1;
break;
}
// take last item as last option
if (i === isResponsiveSizes.length - 1) {
lgSize = size_1;
}
}
}
var size = lgSize.split('-');
var width = parseInt(size[0], 10);
var height = parseInt(size[1], 10);
var cWidth = container.width();
var cHeight = container.height() - spacing;
var maxWidth = Math.min(cWidth, width);
var maxHeight = Math.min(cHeight, height);
var ratio = Math.min(maxWidth / width, maxHeight / height);
return { width: width * ratio, height: height * ratio };
},
/**
* @desc Get transform value based on the imageSize. Used for ZoomFromOrigin option
* @param {jQuery Element}
* @returns {String} Transform CSS string
*/
getTransform: function (el, container, top, bottom, imageSize) {
if (!imageSize) {
return;
}
var LGel = lgQuery_1.$LG(el).find('img').first();
if (!LGel.get()) {
return;
}
var containerRect = container.get().getBoundingClientRect();
var wWidth = containerRect.width;
// using innerWidth to include mobile safari bottom bar
var wHeight = container.height() - (top + bottom);
var elWidth = LGel.width();
var elHeight = LGel.height();
var elStyle = LGel.style();
var x = (wWidth - elWidth) / 2 -
LGel.offset().left +
(parseFloat(elStyle.paddingLeft) || 0) +
(parseFloat(elStyle.borderLeft) || 0) +
lgQuery_1.$LG(window).scrollLeft() +
containerRect.left;
var y = (wHeight - elHeight) / 2 -
LGel.offset().top +
(parseFloat(elStyle.paddingTop) || 0) +
(parseFloat(elStyle.borderTop) || 0) +
lgQuery_1.$LG(window).scrollTop() +
top;
var scX = elWidth / imageSize.width;
var scY = elHeight / imageSize.height;
var transform = 'translate3d(' +
(x *= -1) +
'px, ' +
(y *= -1) +
'px, 0) scale3d(' +
scX +
', ' +
scY +
', 1)';
return transform;
},
getIframeMarkup: function (iframeWidth, iframeHeight, iframeMaxWidth, iframeMaxHeight, src, iframeTitle) {
var title = iframeTitle ? 'title="' + iframeTitle + '"' : '';
return "<div class=\"lg-video-cont lg-has-iframe\" style=\"width:" + iframeWidth + "; max-width:" + iframeMaxWidth + "; height: " + iframeHeight + "; max-height:" + iframeMaxHeight + "\">\n <iframe class=\"lg-object\" frameborder=\"0\" " + title + " src=\"" + src + "\" allowfullscreen=\"true\"></iframe>\n </div>";
},
getImgMarkup: function (index, src, altAttr, srcset, sizes, sources) {
var srcsetAttr = srcset ? "srcset=\"" + srcset + "\"" : '';
var sizesAttr = sizes ? "sizes=\"" + sizes + "\"" : '';
var imgMarkup = "<img " + altAttr + " " + srcsetAttr + " " + sizesAttr + " class=\"lg-object lg-image\" data-index=\"" + index + "\" src=\"" + src + "\" />";
var sourceTag = '';
if (sources) {
var sourceObj = typeof sources === 'string' ? JSON.parse(sources) : sources;
sourceTag = sourceObj.map(function (source) {
var attrs = '';
Object.keys(source).forEach(function (key) {
// Do not remove the first space as it is required to separate the attributes
attrs += " " + key + "=\"" + source[key] + "\"";
});
return "<source " + attrs + "></source>";
});
}
return "" + sourceTag + imgMarkup;
},
// Get src from responsive src
getResponsiveSrc: function (srcItms) {
var rsWidth = [];
var rsSrc = [];
var src = '';
for (var i = 0; i < srcItms.length; i++) {
var _src = srcItms[i].split(' ');
// Manage empty space
if (_src[0] === '') {
_src.splice(0, 1);
}
rsSrc.push(_src[0]);
rsWidth.push(_src[1]);
}
var wWidth = window.innerWidth;
for (var j = 0; j < rsWidth.length; j++) {
if (parseInt(rsWidth[j], 10) > wWidth) {
src = rsSrc[j];
break;
}
}
return src;
},
isImageLoaded: function (img) {
if (!img)
return false;
// During the onload event, IE correctly identifies any images that
// weren’t downloaded as not complete. Others should too. Gecko-based
// browsers act like NS4 in that they report this incorrectly.
if (!img.complete) {
return false;
}
// However, they do have two very useful properties: naturalWidth and
// naturalHeight. These give the true size of the image. If it failed
// to load, either of these should be zero.
if (img.naturalWidth === 0) {
return false;
}
// No other way of checking: assume it’s ok.
return true;
},
getVideoPosterMarkup: function (_poster, dummyImg, videoContStyle, playVideoString, _isVideo) {
var videoClass = '';
if (_isVideo && _isVideo.youtube) {
videoClass = 'lg-has-youtube';
}
else if (_isVideo && _isVideo.vimeo) {
videoClass = 'lg-has-vimeo';
}
else {
videoClass = 'lg-has-html5';
}
return "<div class=\"lg-video-cont " + videoClass + "\" style=\"" + videoContStyle + "\">\n <div class=\"lg-video-play-button\">\n <svg\n viewBox=\"0 0 20 20\"\n preserveAspectRatio=\"xMidYMid\"\n focusable=\"false\"\n aria-labelledby=\"" + playVideoString + "\"\n role=\"img\"\n class=\"lg-video-play-icon\"\n >\n <title>" + playVideoString + "</title>\n <polygon class=\"lg-video-play-icon-inner\" points=\"1,0 20,10 1,20\"></polygon>\n </svg>\n <svg class=\"lg-video-play-icon-bg\" viewBox=\"0 0 50 50\" focusable=\"false\">\n <circle cx=\"50%\" cy=\"50%\" r=\"20\"></circle></svg>\n <svg class=\"lg-video-play-icon-circle\" viewBox=\"0 0 50 50\" focusable=\"false\">\n <circle cx=\"50%\" cy=\"50%\" r=\"20\"></circle>\n </svg>\n </div>\n " + (dummyImg || '') + "\n <img class=\"lg-object lg-video-poster\" src=\"" + _poster + "\" />\n </div>";
},
getFocusableElements: function (container) {
var elements = container.querySelectorAll('a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input[type="text"]:not([disabled]), input[type="radio"]:not([disabled]), input[type="checkbox"]:not([disabled]), select:not([disabled])');
var visibleElements = [].filter.call(elements, function (element) {
var style = window.getComputedStyle(element);
return style.display !== 'none' && style.visibility !== 'hidden';
});
return visibleElements;
},
/**
* @desc Create dynamic elements array from gallery items when dynamic option is false
* It helps to avoid frequent DOM interaction
* and avoid multiple checks for dynamic elments
*
* @returns {Array} dynamicEl
*/
getDynamicOptions: function (items, extraProps, getCaptionFromTitleOrAlt, exThumbImage) {
var dynamicElements = [];
var availableDynamicOptions = __spreadArrays(defaultDynamicOptions, extraProps);
[].forEach.call(items, function (item) {
var dynamicEl = {};
for (var i = 0; i < item.attributes.length; i++) {
var attr = item.attributes[i];
if (attr.specified) {
var dynamicAttr = convertToData(attr.name);
var label = '';
if (availableDynamicOptions.indexOf(dynamicAttr) > -1) {
label = dynamicAttr;
}
if (label) {
dynamicEl[label] = attr.value;
}
}
}
var currentItem = lgQuery_1.$LG(item);
var alt = currentItem.find('img').first().attr('alt');
var title = currentItem.attr('title');
var thumb = exThumbImage
? currentItem.attr(exThumbImage)
: currentItem.find('img').first().attr('src');
dynamicEl.thumb = thumb;
if (getCaptionFromTitleOrAlt && !dynamicEl.subHtml) {
dynamicEl.subHtml = title || alt || '';
}
dynamicEl.alt = alt || title || '';
dynamicElements.push(dynamicEl);
});
return dynamicElements;
},
isMobile: function () {
return /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
},
/**
* @desc Check the given src is video
* @param {String} src
* @return {Object} video type
* Ex:{ youtube : ["//www.youtube.com/watch?v=c0asJgSyxcY", "c0asJgSyxcY"] }
*
* @todo - this information can be moved to dynamicEl to avoid frequent calls
*/
isVideo: function (src, isHTML5VIdeo, index) {
if (!src) {
if (isHTML5VIdeo) {
return {
html5: true,
};
}
else {
console.error('lightGallery :- data-src is not provided on slide item ' +
(index + 1) +
'. Please make sure the selector property is properly configured. More info - https://www.lightgalleryjs.com/demos/html-markup/');
return;
}
}
var youtube = src.match(/\/\/(?:www\.)?youtu(?:\.be|be\.com|be-nocookie\.com)\/(?:watch\?v=|embed\/)?([a-z0-9\-\_\%]+)([\&|?][\S]*)*/i);
var vimeo = src.match(/\/\/(?:www\.)?(?:player\.)?vimeo.com\/(?:video\/)?([0-9a-z\-_]+)(.*)?/i);
var wistia = src.match(/https?:\/\/(.+)?(wistia\.com|wi\.st)\/(medias|embed)\/([0-9a-z\-_]+)(.*)/);
if (youtube) {
return {
youtube: youtube,
};
}
else if (vimeo) {
return {
vimeo: vimeo,
};
}
else if (wistia) {
return {
wistia: wistia,
};
}
},
};
exports.default = utils;
//# sourceMappingURL=lg-utils.js.map