mirror of
https://github.com/a2nt/meta-lightbox.git
synced 2024-10-22 17:05:53 +02:00
minor improvement
This commit is contained in:
Tony Air
parent
9ed0185684
commit
1dd8775fac
227
meta-lightbox.js
227
meta-lightbox.js
@ -1,141 +1,10 @@
|
|||||||
/*
|
/*
|
||||||
* Meta-Lightbox
|
* MetaLightbox v0.61
|
||||||
* https://tony.twma.pro
|
* https://tony.twma.pro
|
||||||
*
|
*
|
||||||
* Use jquery-zoom/jquery.zoom.js if you need to support lightbox image-zoom
|
|
||||||
*/
|
*/
|
||||||
|
|
||||||
/*"use strict";
|
//=require ../../bower_components/jquery-zoom/jquery.zoom.js
|
||||||
|
|
||||||
import $ from 'jquery';
|
|
||||||
|
|
||||||
const Events = {
|
|
||||||
AJAX: 'ajax-load',
|
|
||||||
LOADED: 'load',
|
|
||||||
};
|
|
||||||
|
|
||||||
const MetaUI = (($) => {
|
|
||||||
// Constants
|
|
||||||
const W = window;
|
|
||||||
const D = document;
|
|
||||||
const $Body = $('body');
|
|
||||||
|
|
||||||
const NAME = 'jsMetaUI';
|
|
||||||
const DATA_KEY = NAME;
|
|
||||||
|
|
||||||
class MetaUI {
|
|
||||||
|
|
||||||
constructor(el) {
|
|
||||||
const ui = this;
|
|
||||||
const $el = $(el);
|
|
||||||
|
|
||||||
ui.$el = $el;
|
|
||||||
|
|
||||||
$el.on('click', () => {
|
|
||||||
ui.showLightbox();
|
|
||||||
});
|
|
||||||
|
|
||||||
$el.addClass(`${NAME}-active`);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Static methods
|
|
||||||
static init() {
|
|
||||||
this.dispose();
|
|
||||||
|
|
||||||
console.log(`Initializing: ${NAME}`);
|
|
||||||
}
|
|
||||||
|
|
||||||
static showLightbox(el) {
|
|
||||||
this.el = el;
|
|
||||||
this.$el = $(this.el);
|
|
||||||
|
|
||||||
var $this = this,
|
|
||||||
lightbox, content, currentLink, galleryItems;
|
|
||||||
|
|
||||||
this.options.beforeShowLightbox.call(this);
|
|
||||||
|
|
||||||
lightbox = this.constructLightbox();
|
|
||||||
if (!lightbox) return;
|
|
||||||
content = lightbox.find('.meta-lightbox-content');
|
|
||||||
if (!content) return;
|
|
||||||
currentLink = this.$el;
|
|
||||||
$('body').addClass('meta-lightbox-body-effect-' + this.options.effect);
|
|
||||||
|
|
||||||
// Add content
|
|
||||||
this.processContent(content, currentLink);
|
|
||||||
|
|
||||||
// Nav
|
|
||||||
if (this.$el.data('lightbox-gallery')) {
|
|
||||||
galleryItems = $('[data-lightbox-gallery="' + this.$el.data('lightbox-gallery') + '"]');
|
|
||||||
|
|
||||||
if (galleryItems.length === 1) {
|
|
||||||
$('.meta-lightbox-nav').hide();
|
|
||||||
} else {
|
|
||||||
$('.meta-lightbox-nav').show();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Prev
|
|
||||||
$('.meta-lightbox-prev').off('click').on('click', function(e) {
|
|
||||||
e.preventDefault();
|
|
||||||
var index = galleryItems.index(currentLink);
|
|
||||||
currentLink = galleryItems.eq(index - 1);
|
|
||||||
if (!$(currentLink).length) currentLink = galleryItems.last();
|
|
||||||
$this.processContent(content, currentLink);
|
|
||||||
$this.options.onPrev.call(this, [currentLink]);
|
|
||||||
});
|
|
||||||
|
|
||||||
// Next
|
|
||||||
$('.meta-lightbox-next').off('click').on('click', function(e) {
|
|
||||||
e.preventDefault();
|
|
||||||
var index = galleryItems.index(currentLink);
|
|
||||||
currentLink = galleryItems.eq(index + 1);
|
|
||||||
if (!$(currentLink).length) currentLink = galleryItems.first();
|
|
||||||
$this.processContent(content, currentLink);
|
|
||||||
$this.options.onNext.call(this, [currentLink]);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
setTimeout(function() {
|
|
||||||
lightbox.addClass('meta-lightbox-open');
|
|
||||||
$this.options.afterShowLightbox.call(this, [lightbox]);
|
|
||||||
}, 1); // For CSS transitions
|
|
||||||
}
|
|
||||||
|
|
||||||
static dispose() {
|
|
||||||
console.log(`Destroying: ${NAME}`);
|
|
||||||
}
|
|
||||||
|
|
||||||
static _jQueryInterface() {
|
|
||||||
return this.each(function() {
|
|
||||||
// attach functionality to el
|
|
||||||
const $el = $(this);
|
|
||||||
let data = $el.data(DATA_KEY);
|
|
||||||
|
|
||||||
if (!data) {
|
|
||||||
data = new MetaUI(this);
|
|
||||||
$el.data(DATA_KEY, data);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// jQuery interface
|
|
||||||
$.fn[NAME] = MetaUI._jQueryInterface;
|
|
||||||
$.fn[NAME].Constructor = MetaUI;
|
|
||||||
$.fn[NAME].noConflict = function() {
|
|
||||||
$.fn[NAME] = JQUERY_NO_CONFLICT;
|
|
||||||
return MetaUI._jQueryInterface;
|
|
||||||
};
|
|
||||||
|
|
||||||
// auto-apply
|
|
||||||
$(window).on(`${Events.AJAX} ${Events.LOADED}`, () => {
|
|
||||||
$('[data-toggle="lightbox"]').jsMetaUI();
|
|
||||||
});
|
|
||||||
|
|
||||||
return MetaUI;
|
|
||||||
})($);
|
|
||||||
|
|
||||||
export default MetaUI;*/
|
|
||||||
|
|
||||||
(function($, window, document) {
|
(function($, window, document) {
|
||||||
|
|
||||||
@ -150,13 +19,13 @@ export default MetaUI;*/
|
|||||||
afterShowLightbox: function(lightbox) {},
|
afterShowLightbox: function(lightbox) {},
|
||||||
beforeHideLightbox: function() {},
|
beforeHideLightbox: function() {},
|
||||||
afterHideLightbox: function() {},
|
afterHideLightbox: function() {},
|
||||||
onPrev: function(el) {},
|
onPrev: function(element) {},
|
||||||
onNext: function(el) {},
|
onNext: function(element) {},
|
||||||
errorMessage: 'The requested content cannot be loaded. Please try again later.'
|
errorMessage: 'The requested content cannot be loaded. Please try again later.'
|
||||||
};
|
};
|
||||||
|
|
||||||
function MetaLightbox(el, options) {
|
function MetaLightbox(element, options) {
|
||||||
/*this.el = el;
|
/*this.el = element;
|
||||||
this.$el = $(this.el);*/
|
this.$el = $(this.el);*/
|
||||||
|
|
||||||
this.options = $.extend({}, defaults, options);
|
this.options = $.extend({}, defaults, options);
|
||||||
@ -183,7 +52,7 @@ export default MetaUI;*/
|
|||||||
if ('ontouchstart' in document) $html.removeClass('meta-lightbox-notouch');
|
if ('ontouchstart' in document) $html.removeClass('meta-lightbox-notouch');
|
||||||
|
|
||||||
// Setup the click
|
// Setup the click
|
||||||
$(document).on('click', '[data-toggle="lightbox"]', function(e) {
|
$(document).on('click', '[data-toggle="lightbox"],[data-lightbox-gallery]', function(e) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
|
|
||||||
@ -214,8 +83,8 @@ export default MetaUI;*/
|
|||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
showLightbox: function(el) {
|
showLightbox: function(element) {
|
||||||
this.el = el;
|
this.el = element;
|
||||||
this.$el = $(this.el);
|
this.$el = $(this.el);
|
||||||
|
|
||||||
var $this = this,
|
var $this = this,
|
||||||
@ -272,9 +141,13 @@ export default MetaUI;*/
|
|||||||
|
|
||||||
processContent: function(content, link) {
|
processContent: function(content, link) {
|
||||||
var $this = this,
|
var $this = this,
|
||||||
href = link.attr('href'),
|
|
||||||
img, video, src, classTerm, iframe, wrap;
|
img, video, src, classTerm, iframe, wrap;
|
||||||
|
|
||||||
|
href = link.attr('href');
|
||||||
|
if (!href) {
|
||||||
|
href = link.data('href');
|
||||||
|
}
|
||||||
|
|
||||||
content.html('').addClass('meta-lightbox-loading');
|
content.html('').addClass('meta-lightbox-loading');
|
||||||
|
|
||||||
// Is HiDPI?
|
// Is HiDPI?
|
||||||
@ -347,19 +220,21 @@ export default MetaUI;*/
|
|||||||
src = '';
|
src = '';
|
||||||
classTerm = 'meta-lightbox-video';
|
classTerm = 'meta-lightbox-video';
|
||||||
|
|
||||||
if (video[1] == 'youtube' || video[1] == 'youtu' || video[1] == 'youtube-nocookie') {
|
if (video[1] == 'youtube') {
|
||||||
const YouTubeGetID = (url) => {
|
src = '//www.youtube.com/embed/' + video[4];
|
||||||
url = url.split(/(vi\/|v%3D|v=|\/v\/|youtu\.be\/|\/embed\/)/);
|
classTerm = 'meta-lightbox-youtube';
|
||||||
return undefined !== url[2] ? url[2].split(/[^0-9a-z_\-]/i)[0] : url[0];
|
}
|
||||||
};
|
if (video[1] == 'youtu') {
|
||||||
|
src = '//www.youtube.com/embed/' + video[3];
|
||||||
src = '//www.youtube-nocookie.com/embed/' + YouTubeGetID(href);
|
classTerm = 'meta-lightbox-youtube';
|
||||||
classTerm = classTerm + 'meta-lightbox-youtube';
|
}
|
||||||
|
if (video[1] == 'youtube-nocookie') {
|
||||||
|
src = '//www.youtube-nocookie.com/embed/' + video[4];
|
||||||
|
classTerm = 'nivo-lightbox-youtube';
|
||||||
}
|
}
|
||||||
|
|
||||||
if (video[1] == 'vimeo') {
|
if (video[1] == 'vimeo') {
|
||||||
src = '//player.vimeo.com/video/' + video[3];
|
src = '//player.vimeo.com/video/' + video[3];
|
||||||
classTerm = classTerm + 'meta-lightbox-vimeo';
|
classTerm = 'meta-lightbox-vimeo';
|
||||||
}
|
}
|
||||||
|
|
||||||
if (src) {
|
if (src) {
|
||||||
@ -587,60 +462,58 @@ export default MetaUI;*/
|
|||||||
|
|
||||||
|
|
||||||
constructLightbox: function() {
|
constructLightbox: function() {
|
||||||
const $this = this,
|
var $this = this,
|
||||||
$overlay = $('<div>', {
|
overlay = $('<div>', {
|
||||||
'class': 'meta-lightbox-overlay meta-lightbox-theme-' + this.options.theme + ' meta-lightbox-effect-' + this.options.effect
|
'class': 'meta-lightbox-overlay meta-lightbox-theme-' + this.options.theme + ' meta-lightbox-effect-' + this.options.effect
|
||||||
}),
|
}),
|
||||||
$wrap = $('<div>', {
|
wrap = $('<div>', {
|
||||||
'class': 'meta-lightbox-wrap'
|
'class': 'meta-lightbox-wrap'
|
||||||
}),
|
}),
|
||||||
$content = $('<div>', {
|
content = $('<div>', {
|
||||||
'class': 'meta-lightbox-content'
|
'class': 'meta-lightbox-content'
|
||||||
}),
|
}),
|
||||||
nav = '<a href="#" class="meta-lightbox-nav meta-lightbox-prev"><i class="fa fa-chevron-left"></i> <span class="sr-only">Previous</span></a>' +
|
nav = $('<a href="#" class="meta-lightbox-nav meta-lightbox-prev"><i class="fa fa-chevron-left"></i> <span class="sr-only">Previous</span></a><a href="#" class="meta-lightbox-nav meta-lightbox-next"><i class="fa fa-chevron-right"></i> <span class="sr-only">Next</span></a>'),
|
||||||
'<a href="#" class="meta-lightbox-nav meta-lightbox-next"><i class="fa fa-chevron-right"></i> <span class="sr-only">Next</span></a>' +
|
close = $('<a href="#" class="meta-lightbox-close fa fa-times" title="Close"><span class="sr-only">Close</span></a>'),
|
||||||
'<a href="#" class="meta-lightbox-close fa fa-times" title="Close"><span class="sr-only">Close</span></a>',
|
title = $('<div>', {
|
||||||
$title = $('<div>', {
|
|
||||||
'class': 'meta-lightbox-title-wrap'
|
'class': 'meta-lightbox-title-wrap'
|
||||||
}),
|
}),
|
||||||
isMSIE = /*@cc_on!@*/ 0;
|
isMSIE = /*@cc_on!@*/ 0,
|
||||||
|
$overlay = $('.meta-lightbox-overlay');
|
||||||
|
|
||||||
if ($('.meta-lightbox-overlay').length) {
|
if ($overlay.length) return $overlay;
|
||||||
return $('.meta-lightbox-overlay');
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
if (isMSIE) {
|
if (isMSIE) overlay.addClass('meta-lightbox-ie');
|
||||||
overlay.addClass('meta-lightbox-ie');
|
|
||||||
}
|
|
||||||
|
|
||||||
$wrap.append($content);
|
wrap.append(content);
|
||||||
$wrap.append($title);
|
wrap.append(title);
|
||||||
$overlay.append($wrap);
|
overlay.append(wrap);
|
||||||
$overlay.append($(nav));
|
overlay.append(nav);
|
||||||
$content.append($(nav));
|
overlay.append(close);
|
||||||
$('body').append($overlay);
|
$('body').append(overlay);
|
||||||
|
|
||||||
if ($this.options.clickOverlayToClose) {
|
if ($this.options.clickOverlayToClose) {
|
||||||
$overlay.on('click', (e) => {
|
overlay.on('click', function(e) {
|
||||||
const $target = $(e.target);
|
var $target = $(e.target);
|
||||||
|
|
||||||
if (
|
if (
|
||||||
$target.hasClass('meta-lightbox-zoom-wrapper') ||
|
$target.hasClass('meta-lightbox-zoom-wrapper') ||
|
||||||
$target.hasClass('meta-lightbox-content') ||
|
$target.hasClass('meta-lightbox-content') ||
|
||||||
$target.hasClass('meta-lightbox-image')
|
$target.hasClass('meta-lightbox-wrap') ||
|
||||||
|
$target.hasClass('meta-lightbox-image') ||
|
||||||
|
$target.hasClass('meta-lightbox-overlay')
|
||||||
) {
|
) {
|
||||||
$this.destructLightbox();
|
$this.destructLightbox();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
$overlay.find('.meta-lightbox-close').on('click', function(e) {
|
close.on('click', function(e) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
$this.destructLightbox();
|
$this.destructLightbox();
|
||||||
});
|
});
|
||||||
|
|
||||||
return $overlay;
|
return overlay;
|
||||||
},
|
},
|
||||||
|
|
||||||
destructLightbox: function() {
|
destructLightbox: function() {
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user