From 1dd8775facb28fec7ad7c9fc504902fa9de71478 Mon Sep 17 00:00:00 2001 From: Tony Air Date: Fri, 4 Oct 2019 03:14:29 +0700 Subject: [PATCH] minor improvement --- meta-lightbox.js | 235 +++++++++++------------------------------------ 1 file changed, 54 insertions(+), 181 deletions(-) diff --git a/meta-lightbox.js b/meta-lightbox.js index bcb01c5..e89d919 100755 --- a/meta-lightbox.js +++ b/meta-lightbox.js @@ -1,141 +1,10 @@ /* - * Meta-Lightbox + * MetaLightbox v0.61 * https://tony.twma.pro * - * Use jquery-zoom/jquery.zoom.js if you need to support lightbox image-zoom */ -/*"use strict"; - -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;*/ +//=require ../../bower_components/jquery-zoom/jquery.zoom.js (function($, window, document) { @@ -150,14 +19,14 @@ export default MetaUI;*/ afterShowLightbox: function(lightbox) {}, beforeHideLightbox: function() {}, afterHideLightbox: function() {}, - onPrev: function(el) {}, - onNext: function(el) {}, + onPrev: function(element) {}, + onNext: function(element) {}, errorMessage: 'The requested content cannot be loaded. Please try again later.' }; - function MetaLightbox(el, options) { - /*this.el = el; - this.$el = $(this.el);*/ + function MetaLightbox(element, options) { + /*this.el = element; + this.$el = $(this.el);*/ this.options = $.extend({}, defaults, options); @@ -183,7 +52,7 @@ export default MetaUI;*/ if ('ontouchstart' in document) $html.removeClass('meta-lightbox-notouch'); // 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.stopPropagation(); @@ -214,8 +83,8 @@ export default MetaUI;*/ }, - showLightbox: function(el) { - this.el = el; + showLightbox: function(element) { + this.el = element; this.$el = $(this.el); var $this = this, @@ -272,9 +141,13 @@ export default MetaUI;*/ processContent: function(content, link) { var $this = this, - href = link.attr('href'), img, video, src, classTerm, iframe, wrap; + href = link.attr('href'); + if (!href) { + href = link.data('href'); + } + content.html('').addClass('meta-lightbox-loading'); // Is HiDPI? @@ -347,19 +220,21 @@ export default MetaUI;*/ src = ''; classTerm = 'meta-lightbox-video'; - if (video[1] == 'youtube' || video[1] == 'youtu' || video[1] == 'youtube-nocookie') { - const YouTubeGetID = (url) => { - url = url.split(/(vi\/|v%3D|v=|\/v\/|youtu\.be\/|\/embed\/)/); - return undefined !== url[2] ? url[2].split(/[^0-9a-z_\-]/i)[0] : url[0]; - }; - - src = '//www.youtube-nocookie.com/embed/' + YouTubeGetID(href); - classTerm = classTerm + 'meta-lightbox-youtube'; + if (video[1] == 'youtube') { + src = '//www.youtube.com/embed/' + video[4]; + classTerm = 'meta-lightbox-youtube'; + } + if (video[1] == 'youtu') { + src = '//www.youtube.com/embed/' + video[3]; + 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') { src = '//player.vimeo.com/video/' + video[3]; - classTerm = classTerm + 'meta-lightbox-vimeo'; + classTerm = 'meta-lightbox-vimeo'; } if (src) { @@ -587,60 +462,58 @@ export default MetaUI;*/ constructLightbox: function() { - const $this = this, - $overlay = $('
', { + var $this = this, + overlay = $('
', { 'class': 'meta-lightbox-overlay meta-lightbox-theme-' + this.options.theme + ' meta-lightbox-effect-' + this.options.effect }), - $wrap = $('
', { + wrap = $('
', { 'class': 'meta-lightbox-wrap' }), - $content = $('
', { + content = $('
', { 'class': 'meta-lightbox-content' }), - nav = ' Previous' + - ' Next' + - 'Close', - $title = $('
', { + nav = $(' Previous Next'), + close = $('Close'), + title = $('
', { 'class': 'meta-lightbox-title-wrap' }), - isMSIE = /*@cc_on!@*/ 0; + isMSIE = /*@cc_on!@*/ 0, + $overlay = $('.meta-lightbox-overlay'); - if ($('.meta-lightbox-overlay').length) { - return $('.meta-lightbox-overlay'); - } + if ($overlay.length) return $overlay; - if (isMSIE) { - overlay.addClass('meta-lightbox-ie'); - } + if (isMSIE) overlay.addClass('meta-lightbox-ie'); - $wrap.append($content); - $wrap.append($title); - $overlay.append($wrap); - $overlay.append($(nav)); - $content.append($(nav)); - $('body').append($overlay); + wrap.append(content); + wrap.append(title); + overlay.append(wrap); + overlay.append(nav); + overlay.append(close); + $('body').append(overlay); if ($this.options.clickOverlayToClose) { - $overlay.on('click', (e) => { - const $target = $(e.target); + overlay.on('click', function(e) { + var $target = $(e.target); if ( $target.hasClass('meta-lightbox-zoom-wrapper') || $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(); } }); } - $overlay.find('.meta-lightbox-close').on('click', function(e) { + close.on('click', function(e) { e.preventDefault(); $this.destructLightbox(); }); - return $overlay; + return overlay; }, destructLightbox: function() { @@ -703,9 +576,9 @@ export default MetaUI;*/ isHidpi: function() { var mediaQuery = "(-webkit-min-device-pixel-ratio: 1.5),\ - (min--moz-device-pixel-ratio: 1.5),\ - (-o-min-device-pixel-ratio: 3/2),\ - (min-resolution: 1.5dppx)"; + (min--moz-device-pixel-ratio: 1.5),\ + (-o-min-device-pixel-ratio: 3/2),\ + (min-resolution: 1.5dppx)"; if (window.devicePixelRatio > 1) return true; return (window.matchMedia && window.matchMedia(mediaQuery).matches); }