New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
@pluginjs/lightbox
Advanced tools
@pluginjs/lightbox - npm Package Compare versions
Comparing version 0.7.17 to 0.7.18
| /*! | ||
| * @pluginjs/lightbox v0.7.17 (https://pluginjs.com) | ||
| * @pluginjs/lightbox v0.7.18 (https://pluginjs.com) | ||
| * Copyright 2019 Creation Studio Limited | ||
| * Released under the GPL-3.0 License. | ||
| */ | ||
| undefined | ||
| 'use strict'; | ||
| function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; } | ||
| var Component = _interopDefault(require('@pluginjs/component')); | ||
| var templateEngine = _interopDefault(require('@pluginjs/template')); | ||
| var classes$1 = require('@pluginjs/classes'); | ||
| var dom = require('@pluginjs/dom'); | ||
| var events$1 = require('@pluginjs/events'); | ||
| var utils = require('@pluginjs/utils'); | ||
| var decorator = require('@pluginjs/decorator'); | ||
| var Fullscreen = _interopDefault(require('@pluginjs/fullscreen')); | ||
| var SLIDER = _interopDefault(require('@pluginjs/slider')); | ||
| var THUMBS = _interopDefault(require('@pluginjs/thumbnails')); | ||
| var Keyboard = _interopDefault(require('@pluginjs/keyboard')); | ||
| var Breakpoints = _interopDefault(require('@pluginjs/breakpoints')); | ||
| function _defineProperty(obj, key, value) { | ||
| if (key in obj) { | ||
| Object.defineProperty(obj, key, { | ||
| value: value, | ||
| enumerable: true, | ||
| configurable: true, | ||
| writable: true | ||
| }); | ||
| } else { | ||
| obj[key] = value; | ||
| } | ||
| return obj; | ||
| } | ||
| function _objectSpread(target) { | ||
| for (var i = 1; i < arguments.length; i++) { | ||
| var source = arguments[i] != null ? arguments[i] : {}; | ||
| var ownKeys = Object.keys(source); | ||
| if (typeof Object.getOwnPropertySymbols === 'function') { | ||
| ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { | ||
| return Object.getOwnPropertyDescriptor(source, sym).enumerable; | ||
| })); | ||
| } | ||
| ownKeys.forEach(function (key) { | ||
| _defineProperty(target, key, source[key]); | ||
| }); | ||
| } | ||
| return target; | ||
| } | ||
| function _slicedToArray(arr, i) { | ||
| return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); | ||
| } | ||
| function _arrayWithHoles(arr) { | ||
| if (Array.isArray(arr)) return arr; | ||
| } | ||
| function _iterableToArrayLimit(arr, i) { | ||
| var _arr = []; | ||
| var _n = true; | ||
| var _d = false; | ||
| var _e = undefined; | ||
| try { | ||
| for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { | ||
| _arr.push(_s.value); | ||
| if (i && _arr.length === i) break; | ||
| } | ||
| } catch (err) { | ||
| _d = true; | ||
| _e = err; | ||
| } finally { | ||
| try { | ||
| if (!_n && _i["return"] != null) _i["return"](); | ||
| } finally { | ||
| if (_d) throw _e; | ||
| } | ||
| } | ||
| return _arr; | ||
| } | ||
| function _nonIterableRest() { | ||
| throw new TypeError("Invalid attempt to destructure non-iterable instance"); | ||
| } | ||
| const namespace = 'lightbox'; | ||
| const events = { | ||
| READY: 'ready', | ||
| ENABLE: 'enable', | ||
| DISABLE: 'disable', | ||
| DESTROY: 'destroy' | ||
| }; | ||
| const classes = { | ||
| NAMESPACE: "pj-".concat(namespace), | ||
| CONTAINER: '{namespace}-container', | ||
| OVERLAY: '{namespace}-overlay', | ||
| TOPBAR: '{namespace}-topbar', | ||
| COUNTER: '{namespace}-counter', | ||
| PLAY: '{namespace}-play', | ||
| START: '{namespace}-start', | ||
| STOP: '{namespace}-stop', | ||
| FULLSCREEN: '{namespace}-fullscreen', | ||
| ISFULL: '{namespace}-isfull', | ||
| FULL: '{namespace}-full', | ||
| MINI: '{namespace}-mini', | ||
| DOWNLOAD: '{namespace}-download', | ||
| CLOSE: '{namespace}-close', | ||
| FOOTER: '{namespace}-footer', | ||
| CAPTION: '{namespace}-caption', | ||
| TITLE: '{namespace}-title', | ||
| SLIDER: '{namespace}-slider', | ||
| THUMBS: '{namespace}-thumbs', | ||
| VERTICAL: '{namespace}-vertical', | ||
| AUTOPLAY: '{namespace}-autoplay', | ||
| SHOW: '{namespace}-show', | ||
| ACTIVE: '{namespace}-active', | ||
| DISABLED: '{namespace}-disabled', | ||
| RESPONSIVE: '{namespace}-responsive' | ||
| }; | ||
| const methods = ['enable', 'disable', 'destroy', 'show', 'hide']; | ||
| const defaults = { | ||
| templates: { | ||
| container() { | ||
| return '<div class="{classes.CONTAINER}"></div>'; | ||
| }, | ||
| overlay() { | ||
| return '<div class="{classes.OVERLAY}"></div>'; | ||
| }, | ||
| topbar() { | ||
| return '<div class="{classes.TOPBAR}"></div>'; | ||
| }, | ||
| counter() { | ||
| return '<div class="{classes.COUNTER}"></div>'; | ||
| }, | ||
| play() { | ||
| return '<span class="{classes.PLAY}"><i class="{classes.START} pj-icon pj-icon-caret-right"></i><i class="{classes.STOP} pj-icon pj-icon-pause"></i></span>'; | ||
| }, | ||
| fullScreen() { | ||
| return '<span class="{classes.FULLSCREEN}"><i class="{classes.FULL} pj-icon pj-icon-maximize"></i><i class="{classes.MINI} pj-icon pj-icon-minimize"></i></span>'; | ||
| }, | ||
| download() { | ||
| return '<span class="{classes.DOWNLOAD}"><i class="pj-icon pj-icon-download"></i></span>'; | ||
| }, | ||
| close() { | ||
| return '<span class="{classes.CLOSE}"><i class="pj-icon pj-icon-remove"></i></span>'; | ||
| }, | ||
| footer() { | ||
| return '<div class="{classes.FOOTER}"></div>'; | ||
| }, | ||
| caption() { | ||
| return '<div class="{classes.CAPTION}"></div>'; | ||
| }, | ||
| title() { | ||
| return '<div class="{classes.TITLE}">{title}</div>'; | ||
| }, | ||
| slider() { | ||
| return '<div class="{classes.SLIDER}"></div>'; | ||
| }, | ||
| box() { | ||
| return '<div class="{classes.BOX}"></div>'; | ||
| }, | ||
| card() { | ||
| return '<div class="{classes.CARD}">' + '<div class="{classes.LOADER}"></div>' + '</div>'; | ||
| }, | ||
| image() { | ||
| return '<img class="{classes.IMAGE} {classes.CONTENT}">'; | ||
| }, | ||
| video() { | ||
| return '<div class="{classes.VIDEOWRAP} {classes.CONTENT}">' + '<img class="{classes.IMAGE}">' + '<div class="{classes.VIDEO}"></div>' + '</div>'; | ||
| }, | ||
| iframe() { | ||
| return '<iframe class="{classes.IFRAME} {classes.CONTENT}" src="//about:blank" frameborder="0" allowfullscreen></iframe>'; | ||
| }, | ||
| map() { | ||
| return '<iframe class="{classes.MAP} {classes.CONTENT}" src="//about:blank" frameborder="0" allowfullscreen></iframe>'; | ||
| }, | ||
| inline() { | ||
| return '<div class="{classes.INLINE} {classes.CONTENT}"></div>'; | ||
| }, | ||
| thumbs() { | ||
| return '<div class="{classes.THUMBS}"></div>'; | ||
| }, | ||
| inner() { | ||
| return '<div class="{classes.INNER}"></div>'; | ||
| } | ||
| }, | ||
| theme: null, | ||
| data: 'html', | ||
| // html or DATA | ||
| delegate: 'a', | ||
| actions: ['play', 'fullScreen', 'download', 'close'], | ||
| // ['play', 'fullScreen', 'download', 'share', 'close'] | ||
| overlayClose: true, | ||
| counter: true, | ||
| arrows: {}, | ||
| swipe: true, | ||
| caption: true, | ||
| thumbs: true, | ||
| vertical: false, | ||
| keyboard: true, | ||
| duration: 300, | ||
| playCycle: 4000, | ||
| breakpoint: null, | ||
| // xs, sm, md, lg, xl | ||
| loader: { | ||
| theme: 'ring', | ||
| size: 'lg' | ||
| } | ||
| }; | ||
| const dependencies = ['slider', 'thumbnails', 'arrows', 'anime', 'hammer']; | ||
| class Overlay { | ||
| constructor(instance) { | ||
| this.instance = instance; | ||
| this.initialize(); | ||
| } | ||
| initialize() { | ||
| this.element = this.instance.getElement('overlay'); | ||
| dom.append(this.element, this.instance.container); | ||
| this.bind(); | ||
| } | ||
| bind() { | ||
| events$1.bindEvent(this.instance.eventName('click'), event => { | ||
| event.preventDefault(); | ||
| this.instance.hide(); | ||
| }, this.element); | ||
| } | ||
| unbind() { | ||
| events$1.removeEvent(this.instance.eventName('click'), this.element); | ||
| } | ||
| } | ||
| class Topbar { | ||
| constructor(instance) { | ||
| this.instance = instance; | ||
| this.classes = instance.classes; | ||
| this.initialize(); | ||
| } | ||
| initialize() { | ||
| if (this.instance.options.counter) { | ||
| this.instance.options.actions.unshift('counter'); | ||
| } | ||
| this.element = this.instance.getElement('topbar'); | ||
| this.instance.options.actions.forEach(item => { | ||
| this[item] = this.instance.getElement(item); | ||
| dom.append(this[item], this.element); | ||
| }); | ||
| this.setCounter(this.instance.active); | ||
| dom.append(this.element, this.instance.container); // this.fullscreen = new Fullscreen(this.instance.container) | ||
| this.fullscreen = new Fullscreen(); | ||
| this.bind(); | ||
| } | ||
| bind() { | ||
| utils.compose(events$1.bindEvent(this.instance.eventName('click'), ".".concat(this.classes.PLAY), event => { | ||
| event.preventDefault(); | ||
| event.stopPropagation(); | ||
| this.autoPlay(); | ||
| }), events$1.bindEvent(this.instance.eventName('click'), ".".concat(this.classes.FULLSCREEN), event => { | ||
| event.preventDefault(); | ||
| event.stopPropagation(); | ||
| if (this.fullscreen.isFullscreen()) { | ||
| this.mini(); | ||
| } else { | ||
| this.full(); | ||
| } | ||
| }), events$1.bindEvent(this.instance.eventName('click'), ".".concat(this.classes.DOWNLOAD), event => { | ||
| event.preventDefault(); | ||
| event.stopPropagation(); | ||
| const url = this.instance.data[this.instance.slider.plugin.current].orig; | ||
| const filename = url.substr(url.lastIndexOf('/') + 1); | ||
| this.down(url, filename); | ||
| }), events$1.bindEvent(this.instance.eventName('click'), ".".concat(this.classes.CLOSE), event => { | ||
| event.preventDefault(); | ||
| event.stopPropagation(); | ||
| this.off(); | ||
| }))(this.element); | ||
| } | ||
| autoPlay() { | ||
| if (this.instance.is('play')) { | ||
| this.stop(); | ||
| } else { | ||
| this.start(); | ||
| events$1.bindEventOnce(this.instance.eventName('mousedown'), event => { | ||
| if (dom.closest(".".concat(this.classes.PLAY), event.target) === this.play) { | ||
| return; | ||
| } | ||
| this.stop(); | ||
| }, this.instance.container); | ||
| } | ||
| } | ||
| start() { | ||
| this.instance.slider.plugin.intervalToggle(true); | ||
| classes$1.addClass(this.classes.AUTOPLAY, this.instance.container); | ||
| this.instance.enter('play'); | ||
| } | ||
| stop() { | ||
| this.instance.slider.plugin.intervalToggle(false); | ||
| classes$1.removeClass(this.classes.AUTOPLAY, this.instance.container); | ||
| this.instance.leave('play'); | ||
| } | ||
| off() { | ||
| this.instance.hide(); | ||
| if (this.fullscreen.isFullscreen()) { | ||
| this.mini(); | ||
| } | ||
| } | ||
| full() { | ||
| this.fullscreen.request(); | ||
| classes$1.addClass(this.classes.ISFULL, this.instance.container); | ||
| } | ||
| mini() { | ||
| this.fullscreen.exit(); | ||
| classes$1.removeClass(this.classes.ISFULL, this.instance.container); | ||
| } | ||
| getBlob(url) { | ||
| return new Promise(resolve => { | ||
| const xhr = new XMLHttpRequest(); | ||
| xhr.open('GET', url, true); | ||
| xhr.responseType = 'blob'; | ||
| xhr.onload = () => { | ||
| if (xhr.status === 200) { | ||
| resolve(xhr.response); | ||
| } | ||
| }; | ||
| xhr.send(); | ||
| }); | ||
| } | ||
| saveAs(blob, filename) { | ||
| if (window.navigator.msSaveOrOpenBlob) { | ||
| navigator.msSaveBlob(blob, filename); | ||
| } else { | ||
| const link = document.createElement('a'); | ||
| const body = document.querySelector('body'); | ||
| link.href = window.URL.createObjectURL(blob); | ||
| link.download = filename; // fix Firefox | ||
| link.style.display = 'none'; | ||
| body.appendChild(link); | ||
| link.click(); | ||
| body.removeChild(link); | ||
| window.URL.revokeObjectURL(link.href); | ||
| } | ||
| } | ||
| down(url, filename) { | ||
| this.getBlob(url).then(blob => { | ||
| this.saveAs(blob, filename); | ||
| }); | ||
| } | ||
| unbind() { | ||
| events$1.removeEvent(this.instance.eventName('click'), this.close); | ||
| } | ||
| setCounter(index) { | ||
| if (!this.instance.options.counter) { | ||
| return; | ||
| } | ||
| this.counter.innerHTML = "".concat(index + 1, " / ").concat(this.instance.length); | ||
| } | ||
| } | ||
| class Caption { | ||
| constructor(instance) { | ||
| this.instance = instance; | ||
| this.initialize(); | ||
| } | ||
| initialize() { | ||
| if (!this.instance.options.caption) { | ||
| return; | ||
| } | ||
| this.element = this.instance.getElement('caption'); | ||
| this.setInfo(this.instance.data[this.instance.active]); | ||
| dom.append(this.element, this.instance.footer); | ||
| } | ||
| setInfo(data) { | ||
| if (!this.instance.options.caption) { | ||
| return; | ||
| } | ||
| const test = this.instance.getElement('title', data); | ||
| this.element.innerHTML = ''; | ||
| dom.append(test, this.element); | ||
| } | ||
| } | ||
| class Slider { | ||
| constructor(instance) { | ||
| this.instance = instance; | ||
| this.initialize(); | ||
| } | ||
| initialize() { | ||
| this.element = this.instance.getElement('slider'); | ||
| dom.append(this.element, this.instance.container); | ||
| setTimeout(() => { | ||
| this.initSlider(); | ||
| }, 0); | ||
| } | ||
| initSlider() { | ||
| const instance = this.instance; | ||
| this.plugin = SLIDER.of(this.element, utils.deepMerge(instance.options, { | ||
| data: instance.processData(instance.data, 'orig'), | ||
| current: instance.active, | ||
| onChange() { | ||
| instance.topbar.setCounter(this.current); | ||
| instance.caption.setInfo(instance.data[this.current]); | ||
| if (instance.options.thumbs) { | ||
| instance.thumbs.plugin.go(this.current, false); | ||
| } | ||
| } | ||
| })); | ||
| } | ||
| } | ||
| class Thumbs { | ||
| constructor(instance) { | ||
| this.instance = instance; | ||
| this.initialize(); | ||
| } | ||
| initialize() { | ||
| if (!this.instance.options.thumbs) { | ||
| return; | ||
| } | ||
| this.element = this.instance.getElement('thumbs'); | ||
| dom.append(this.element, this.instance.footer); | ||
| setTimeout(() => { | ||
| this.initThumbs(); | ||
| }, 0); | ||
| } | ||
| initThumbs() { | ||
| const instance = this.instance; | ||
| this.plugin = THUMBS.of(this.element, utils.deepMerge(instance.options, { | ||
| data: instance.processData(instance.data, 'thumb'), | ||
| current: instance.active, | ||
| mode: 'center', | ||
| onChange() { | ||
| instance.slider.plugin.go(this.current, false); | ||
| instance.topbar.setCounter(this.current); | ||
| instance.caption.setInfo(instance.data[this.current]); | ||
| } | ||
| })); | ||
| } | ||
| } | ||
| var _dec, _dec2, _dec3, _dec4, _dec5, _dec6, _class; | ||
| let Lightbox = (_dec = decorator.themeable(), _dec2 = decorator.styleable(classes), _dec3 = decorator.eventable(events), _dec4 = decorator.stateable(), _dec5 = decorator.optionable(defaults, true), _dec6 = decorator.register(namespace, { | ||
| methods: methods, | ||
| dependencies: dependencies | ||
| }), _dec(_class = _dec2(_class = _dec3(_class = _dec4(_class = _dec5(_class = _dec6(_class = class Lightbox extends Component { | ||
| constructor(element) { | ||
| let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; | ||
| super(element); | ||
| this.setupOptions(options); | ||
| this.setupClasses(); | ||
| this.setupStates(); | ||
| this.initialize(); | ||
| } | ||
| initialize() { | ||
| if (!this.options.data || this.options.data.length < 0) { | ||
| return; | ||
| } | ||
| classes$1.addClass(this.classes.NAMESPACE, this.element); | ||
| if (this.options.theme) { | ||
| classes$1.addClass(this.getThemeClass(), this.element); | ||
| } | ||
| this.data = this.options.data === 'html' ? this.parseHtml() : this.options.data; | ||
| this.length = this.data.length; | ||
| this.bind(); | ||
| if (this.options.breakpoint) { | ||
| this.initBreakpoints(); | ||
| } | ||
| if (this.options.keyboard) { | ||
| this.keyboard = Keyboard(); | ||
| } | ||
| this.enter('initialized'); | ||
| this.trigger(events.READY); | ||
| } | ||
| initBreakpoints() { | ||
| Breakpoints.init(); | ||
| if (Breakpoints.all().includes(this.options.breakpoint)) { | ||
| const breakpoint = this.options.breakpoint; | ||
| const that = this; | ||
| if (Breakpoints.is("".concat(breakpoint, "-"))) { | ||
| classes$1.addClass(this.classes.RESPONSIVE, this.element); | ||
| } | ||
| Breakpoints.to(breakpoint, { | ||
| enter() { | ||
| classes$1.addClass(that.classes.RESPONSIVE, that.element); | ||
| }, | ||
| leave() { | ||
| classes$1.removeClass(that.classes.RESPONSIVE, that.element); | ||
| } | ||
| }); | ||
| } | ||
| } | ||
| bind() { | ||
| const that = this; | ||
| events$1.bindEvent(this.eventName('click'), this.options.delegate, function (event) { | ||
| event.preventDefault(); | ||
| that.active = Number(this.dataset.index); | ||
| that.open(); | ||
| }, this.element); | ||
| } | ||
| unbind() { | ||
| events$1.removeEvent(this.eventName('click'), this.element); | ||
| } | ||
| bindConatiner() { | ||
| events$1.bindEvent(this.eventName('click'), event => { | ||
| event.preventDefault(); | ||
| event.stopPropagation(); | ||
| const target = event.target; | ||
| if (classes$1.hasClass(this.slider.plugin.classes.CARD, target) || classes$1.hasClass(this.classes.TOPBAR, target)) { | ||
| this.hide(); | ||
| } | ||
| }, this.container); | ||
| if (this.keyboard) { | ||
| this.keyboard.on('down', 'esc', () => { | ||
| this.hide(); | ||
| }); | ||
| this.keyboard.on('down', 'left', () => { | ||
| this.slider.plugin.prev(); | ||
| }); | ||
| this.keyboard.on('down', 'right', () => { | ||
| this.slider.plugin.next(); | ||
| }); | ||
| } | ||
| } | ||
| unbindConatiner() { | ||
| events$1.removeEvent(this.eventName('click'), this.container); | ||
| if (this.keyboard) { | ||
| this.keyboard.off('down', 'esc,left, right'); | ||
| } | ||
| } | ||
| open() { | ||
| if (this.is('generate')) { | ||
| this.initShow(this.active); | ||
| } else { | ||
| this.generate(); | ||
| } | ||
| this.show(); | ||
| } | ||
| show() { | ||
| classes$1.addClass(this.classes.SHOW, this.container); | ||
| this.bindConatiner(); | ||
| this.enter('show'); | ||
| } | ||
| hide() { | ||
| classes$1.removeClass(this.classes.SHOW, this.container); | ||
| this.unbindConatiner(); | ||
| this.topbar.mini(); | ||
| this.leave('show'); | ||
| } | ||
| initShow(index) { | ||
| this.slider.plugin.reset(index); | ||
| this.topbar.setCounter(index); | ||
| this.caption.setInfo(this.data[index]); | ||
| if (this.options.thumbs) { | ||
| this.thumbs.plugin.go(index, false, false); | ||
| } | ||
| } | ||
| generate() { | ||
| this.container = this.getElement('container'); | ||
| this.footer = this.getElement('footer'); | ||
| this.overlay = new Overlay(this); | ||
| this.topbar = new Topbar(this); | ||
| this.slider = new Slider(this); | ||
| dom.append(this.footer, this.container); | ||
| this.caption = new Caption(this); | ||
| this.thumbs = new Thumbs(this); | ||
| if (this.options.theme) { | ||
| classes$1.addClass(this.getThemeClass(), this.container); | ||
| } | ||
| dom.append(this.container, document.body); | ||
| this.enter('generate'); | ||
| } | ||
| getElement(type) { | ||
| const template = this.options.templates[type]; | ||
| let html = ''; | ||
| for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) { | ||
| args[_key - 1] = arguments[_key]; | ||
| } | ||
| html = templateEngine.render(template.call(this), utils.deepMerge({ | ||
| classes: this.classes | ||
| }, ...args)); | ||
| return dom.parseHTML(html); | ||
| } | ||
| processData(data, key) { | ||
| const _data = []; | ||
| data.forEach(item => { | ||
| let info = { | ||
| src: item[key] | ||
| }; | ||
| info = utils.deepMerge(info, item); | ||
| _data.push(info); | ||
| }); | ||
| return _data; | ||
| } | ||
| parseHtml() { | ||
| const data = []; | ||
| const items = this.element.querySelectorAll(this.options.delegate); | ||
| items.forEach((item, index) => { | ||
| item.dataset.index = index; | ||
| let info = { | ||
| orig: item.getAttribute('href'), | ||
| thumb: item.children[0].getAttribute('src') | ||
| }; | ||
| const _data = Object.entries(item.dataset).reduce((result, _ref) => { | ||
| let _ref2 = _slicedToArray(_ref, 2), | ||
| k = _ref2[0], | ||
| v = _ref2[1]; | ||
| try { | ||
| const content = JSON.parse("{\"data\": ".concat(v.replace(/'/g, '"'), "}")).data; | ||
| return _objectSpread({}, result, { | ||
| [k]: content | ||
| }); | ||
| } catch (err) { | ||
| return _objectSpread({}, result, { | ||
| [k]: v | ||
| }); | ||
| } | ||
| }, {}); | ||
| info = utils.deepMerge(info, _data); | ||
| data.push(info); | ||
| }); | ||
| return data; | ||
| } | ||
| enable() { | ||
| this.slider.enable(); | ||
| this.thumbs.enable(); | ||
| } | ||
| disable() { | ||
| this.slider.disable(); | ||
| this.thumbs.disable(); | ||
| } | ||
| destroy() { | ||
| this.slider.destroy(); | ||
| this.thumbs.destroy(); | ||
| } | ||
| }) || _class) || _class) || _class) || _class) || _class) || _class); | ||
| module.exports = Lightbox; |
| /*! | ||
| * @pluginjs/lightbox v0.7.17 (https://pluginjs.com) | ||
| * @pluginjs/lightbox v0.7.18 (https://pluginjs.com) | ||
| * Copyright 2019 Creation Studio Limited | ||
| * Released under the GPL-3.0 License. | ||
| */ | ||
| undefined | ||
| "use strict";function _interopDefault(e){return e&&"object"==typeof e&&"default"in e?e.default:e}var Component=_interopDefault(require("@pluginjs/component")),templateEngine=_interopDefault(require("@pluginjs/template")),classes$1=require("@pluginjs/classes"),dom=require("@pluginjs/dom"),events$1=require("@pluginjs/events"),utils=require("@pluginjs/utils"),decorator=require("@pluginjs/decorator"),Fullscreen=_interopDefault(require("@pluginjs/fullscreen")),SLIDER=_interopDefault(require("@pluginjs/slider")),THUMBS=_interopDefault(require("@pluginjs/thumbnails")),Keyboard=_interopDefault(require("@pluginjs/keyboard")),Breakpoints=_interopDefault(require("@pluginjs/breakpoints"));function _defineProperty(e,s,t){return s in e?Object.defineProperty(e,s,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[s]=t,e}function _objectSpread(e){for(var s=1;s<arguments.length;s++){var t=null!=arguments[s]?arguments[s]:{},i=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(i=i.concat(Object.getOwnPropertySymbols(t).filter(function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),i.forEach(function(s){_defineProperty(e,s,t[s])})}return e}function _slicedToArray(e,s){return _arrayWithHoles(e)||_iterableToArrayLimit(e,s)||_nonIterableRest()}function _arrayWithHoles(e){if(Array.isArray(e))return e}function _iterableToArrayLimit(e,s){var t=[],i=!0,n=!1,a=void 0;try{for(var l,c=e[Symbol.iterator]();!(i=(l=c.next()).done)&&(t.push(l.value),!s||t.length!==s);i=!0);}catch(e){n=!0,a=e}finally{try{i||null==c.return||c.return()}finally{if(n)throw a}}return t}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}const namespace="lightbox",events={READY:"ready",ENABLE:"enable",DISABLE:"disable",DESTROY:"destroy"},classes={NAMESPACE:"pj-".concat(namespace),CONTAINER:"{namespace}-container",OVERLAY:"{namespace}-overlay",TOPBAR:"{namespace}-topbar",COUNTER:"{namespace}-counter",PLAY:"{namespace}-play",START:"{namespace}-start",STOP:"{namespace}-stop",FULLSCREEN:"{namespace}-fullscreen",ISFULL:"{namespace}-isfull",FULL:"{namespace}-full",MINI:"{namespace}-mini",DOWNLOAD:"{namespace}-download",CLOSE:"{namespace}-close",FOOTER:"{namespace}-footer",CAPTION:"{namespace}-caption",TITLE:"{namespace}-title",SLIDER:"{namespace}-slider",THUMBS:"{namespace}-thumbs",VERTICAL:"{namespace}-vertical",AUTOPLAY:"{namespace}-autoplay",SHOW:"{namespace}-show",ACTIVE:"{namespace}-active",DISABLED:"{namespace}-disabled",RESPONSIVE:"{namespace}-responsive"},methods=["enable","disable","destroy","show","hide"],defaults={templates:{container:()=>'<div class="{classes.CONTAINER}"></div>',overlay:()=>'<div class="{classes.OVERLAY}"></div>',topbar:()=>'<div class="{classes.TOPBAR}"></div>',counter:()=>'<div class="{classes.COUNTER}"></div>',play:()=>'<span class="{classes.PLAY}"><i class="{classes.START} pj-icon pj-icon-caret-right"></i><i class="{classes.STOP} pj-icon pj-icon-pause"></i></span>',fullScreen:()=>'<span class="{classes.FULLSCREEN}"><i class="{classes.FULL} pj-icon pj-icon-maximize"></i><i class="{classes.MINI} pj-icon pj-icon-minimize"></i></span>',download:()=>'<span class="{classes.DOWNLOAD}"><i class="pj-icon pj-icon-download"></i></span>',close:()=>'<span class="{classes.CLOSE}"><i class="pj-icon pj-icon-remove"></i></span>',footer:()=>'<div class="{classes.FOOTER}"></div>',caption:()=>'<div class="{classes.CAPTION}"></div>',title:()=>'<div class="{classes.TITLE}">{title}</div>',slider:()=>'<div class="{classes.SLIDER}"></div>',box:()=>'<div class="{classes.BOX}"></div>',card:()=>'<div class="{classes.CARD}"><div class="{classes.LOADER}"></div></div>',image:()=>'<img class="{classes.IMAGE} {classes.CONTENT}">',video:()=>'<div class="{classes.VIDEOWRAP} {classes.CONTENT}"><img class="{classes.IMAGE}"><div class="{classes.VIDEO}"></div></div>',iframe:()=>'<iframe class="{classes.IFRAME} {classes.CONTENT}" src="//about:blank" frameborder="0" allowfullscreen></iframe>',map:()=>'<iframe class="{classes.MAP} {classes.CONTENT}" src="//about:blank" frameborder="0" allowfullscreen></iframe>',inline:()=>'<div class="{classes.INLINE} {classes.CONTENT}"></div>',thumbs:()=>'<div class="{classes.THUMBS}"></div>',inner:()=>'<div class="{classes.INNER}"></div>'},theme:null,data:"html",delegate:"a",actions:["play","fullScreen","download","close"],overlayClose:!0,counter:!0,arrows:{},swipe:!0,caption:!0,thumbs:!0,vertical:!1,keyboard:!0,duration:300,playCycle:4e3,breakpoint:null,loader:{theme:"ring",size:"lg"}},dependencies=["slider","thumbnails","arrows","anime","hammer"];class Overlay{constructor(e){this.instance=e,this.initialize()}initialize(){this.element=this.instance.getElement("overlay"),dom.append(this.element,this.instance.container),this.bind()}bind(){events$1.bindEvent(this.instance.eventName("click"),e=>{e.preventDefault(),this.instance.hide()},this.element)}unbind(){events$1.removeEvent(this.instance.eventName("click"),this.element)}}class Topbar{constructor(e){this.instance=e,this.classes=e.classes,this.initialize()}initialize(){this.instance.options.counter&&this.instance.options.actions.unshift("counter"),this.element=this.instance.getElement("topbar"),this.instance.options.actions.forEach(e=>{this[e]=this.instance.getElement(e),dom.append(this[e],this.element)}),this.setCounter(this.instance.active),dom.append(this.element,this.instance.container),this.fullscreen=new Fullscreen,this.bind()}bind(){utils.compose(events$1.bindEvent(this.instance.eventName("click"),".".concat(this.classes.PLAY),e=>{e.preventDefault(),e.stopPropagation(),this.autoPlay()}),events$1.bindEvent(this.instance.eventName("click"),".".concat(this.classes.FULLSCREEN),e=>{e.preventDefault(),e.stopPropagation(),this.fullscreen.isFullscreen()?this.mini():this.full()}),events$1.bindEvent(this.instance.eventName("click"),".".concat(this.classes.DOWNLOAD),e=>{e.preventDefault(),e.stopPropagation();const s=this.instance.data[this.instance.slider.plugin.current].orig,t=s.substr(s.lastIndexOf("/")+1);this.down(s,t)}),events$1.bindEvent(this.instance.eventName("click"),".".concat(this.classes.CLOSE),e=>{e.preventDefault(),e.stopPropagation(),this.off()}))(this.element)}autoPlay(){this.instance.is("play")?this.stop():(this.start(),events$1.bindEventOnce(this.instance.eventName("mousedown"),e=>{dom.closest(".".concat(this.classes.PLAY),e.target)!==this.play&&this.stop()},this.instance.container))}start(){this.instance.slider.plugin.intervalToggle(!0),classes$1.addClass(this.classes.AUTOPLAY,this.instance.container),this.instance.enter("play")}stop(){this.instance.slider.plugin.intervalToggle(!1),classes$1.removeClass(this.classes.AUTOPLAY,this.instance.container),this.instance.leave("play")}off(){this.instance.hide(),this.fullscreen.isFullscreen()&&this.mini()}full(){this.fullscreen.request(),classes$1.addClass(this.classes.ISFULL,this.instance.container)}mini(){this.fullscreen.exit(),classes$1.removeClass(this.classes.ISFULL,this.instance.container)}getBlob(e){return new Promise(s=>{const t=new XMLHttpRequest;t.open("GET",e,!0),t.responseType="blob",t.onload=(()=>{200===t.status&&s(t.response)}),t.send()})}saveAs(e,s){if(window.navigator.msSaveOrOpenBlob)navigator.msSaveBlob(e,s);else{const t=document.createElement("a"),i=document.querySelector("body");t.href=window.URL.createObjectURL(e),t.download=s,t.style.display="none",i.appendChild(t),t.click(),i.removeChild(t),window.URL.revokeObjectURL(t.href)}}down(e,s){this.getBlob(e).then(e=>{this.saveAs(e,s)})}unbind(){events$1.removeEvent(this.instance.eventName("click"),this.close)}setCounter(e){this.instance.options.counter&&(this.counter.innerHTML="".concat(e+1," / ").concat(this.instance.length))}}class Caption{constructor(e){this.instance=e,this.initialize()}initialize(){this.instance.options.caption&&(this.element=this.instance.getElement("caption"),this.setInfo(this.instance.data[this.instance.active]),dom.append(this.element,this.instance.footer))}setInfo(e){if(!this.instance.options.caption)return;const s=this.instance.getElement("title",e);this.element.innerHTML="",dom.append(s,this.element)}}class Slider{constructor(e){this.instance=e,this.initialize()}initialize(){this.element=this.instance.getElement("slider"),dom.append(this.element,this.instance.container),setTimeout(()=>{this.initSlider()},0)}initSlider(){const e=this.instance;this.plugin=SLIDER.of(this.element,utils.deepMerge(e.options,{data:e.processData(e.data,"orig"),current:e.active,onChange(){e.topbar.setCounter(this.current),e.caption.setInfo(e.data[this.current]),e.options.thumbs&&e.thumbs.plugin.go(this.current,!1)}}))}}class Thumbs{constructor(e){this.instance=e,this.initialize()}initialize(){this.instance.options.thumbs&&(this.element=this.instance.getElement("thumbs"),dom.append(this.element,this.instance.footer),setTimeout(()=>{this.initThumbs()},0))}initThumbs(){const e=this.instance;this.plugin=THUMBS.of(this.element,utils.deepMerge(e.options,{data:e.processData(e.data,"thumb"),current:e.active,mode:"center",onChange(){e.slider.plugin.go(this.current,!1),e.topbar.setCounter(this.current),e.caption.setInfo(e.data[this.current])}}))}}var _dec,_dec2,_dec3,_dec4,_dec5,_dec6,_class;let Lightbox=(_dec=decorator.themeable())(_class=(_dec2=decorator.styleable(classes))(_class=(_dec3=decorator.eventable(events))(_class=(_dec4=decorator.stateable())(_class=(_dec5=decorator.optionable(defaults,!0))(_class=(_dec6=decorator.register(namespace,{methods:methods,dependencies:dependencies}))(_class=class extends Component{constructor(e){let s=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};super(e),this.setupOptions(s),this.setupClasses(),this.setupStates(),this.initialize()}initialize(){!this.options.data||this.options.data.length<0||(classes$1.addClass(this.classes.NAMESPACE,this.element),this.options.theme&&classes$1.addClass(this.getThemeClass(),this.element),this.data="html"===this.options.data?this.parseHtml():this.options.data,this.length=this.data.length,this.bind(),this.options.breakpoint&&this.initBreakpoints(),this.options.keyboard&&(this.keyboard=Keyboard()),this.enter("initialized"),this.trigger(events.READY))}initBreakpoints(){if(Breakpoints.init(),Breakpoints.all().includes(this.options.breakpoint)){const e=this.options.breakpoint,s=this;Breakpoints.is("".concat(e,"-"))&&classes$1.addClass(this.classes.RESPONSIVE,this.element),Breakpoints.to(e,{enter(){classes$1.addClass(s.classes.RESPONSIVE,s.element)},leave(){classes$1.removeClass(s.classes.RESPONSIVE,s.element)}})}}bind(){const e=this;events$1.bindEvent(this.eventName("click"),this.options.delegate,function(s){s.preventDefault(),e.active=Number(this.dataset.index),e.open()},this.element)}unbind(){events$1.removeEvent(this.eventName("click"),this.element)}bindConatiner(){events$1.bindEvent(this.eventName("click"),e=>{e.preventDefault(),e.stopPropagation();const s=e.target;(classes$1.hasClass(this.slider.plugin.classes.CARD,s)||classes$1.hasClass(this.classes.TOPBAR,s))&&this.hide()},this.container),this.keyboard&&(this.keyboard.on("down","esc",()=>{this.hide()}),this.keyboard.on("down","left",()=>{this.slider.plugin.prev()}),this.keyboard.on("down","right",()=>{this.slider.plugin.next()}))}unbindConatiner(){events$1.removeEvent(this.eventName("click"),this.container),this.keyboard&&this.keyboard.off("down","esc,left, right")}open(){this.is("generate")?this.initShow(this.active):this.generate(),this.show()}show(){classes$1.addClass(this.classes.SHOW,this.container),this.bindConatiner(),this.enter("show")}hide(){classes$1.removeClass(this.classes.SHOW,this.container),this.unbindConatiner(),this.topbar.mini(),this.leave("show")}initShow(e){this.slider.plugin.reset(e),this.topbar.setCounter(e),this.caption.setInfo(this.data[e]),this.options.thumbs&&this.thumbs.plugin.go(e,!1,!1)}generate(){this.container=this.getElement("container"),this.footer=this.getElement("footer"),this.overlay=new Overlay(this),this.topbar=new Topbar(this),this.slider=new Slider(this),dom.append(this.footer,this.container),this.caption=new Caption(this),this.thumbs=new Thumbs(this),this.options.theme&&classes$1.addClass(this.getThemeClass(),this.container),dom.append(this.container,document.body),this.enter("generate")}getElement(e){const s=this.options.templates[e];let t="";for(var i=arguments.length,n=new Array(i>1?i-1:0),a=1;a<i;a++)n[a-1]=arguments[a];return t=templateEngine.render(s.call(this),utils.deepMerge({classes:this.classes},...n)),dom.parseHTML(t)}processData(e,s){const t=[];return e.forEach(e=>{let i={src:e[s]};i=utils.deepMerge(i,e),t.push(i)}),t}parseHtml(){const e=[];return this.element.querySelectorAll(this.options.delegate).forEach((s,t)=>{s.dataset.index=t;let i={orig:s.getAttribute("href"),thumb:s.children[0].getAttribute("src")};const n=Object.entries(s.dataset).reduce((e,s)=>{let t=_slicedToArray(s,2),i=t[0],n=t[1];try{return _objectSpread({},e,{[i]:JSON.parse('{"data": '.concat(n.replace(/'/g,'"'),"}")).data})}catch(s){return _objectSpread({},e,{[i]:n})}},{});i=utils.deepMerge(i,n),e.push(i)}),e}enable(){this.slider.enable(),this.thumbs.enable()}disable(){this.slider.disable(),this.thumbs.disable()}destroy(){this.slider.destroy(),this.thumbs.destroy()}})||_class)||_class)||_class)||_class)||_class)||_class;module.exports=Lightbox; |
| /*! | ||
| * @pluginjs/lightbox v0.7.17 (https://pluginjs.com) | ||
| * @pluginjs/lightbox v0.7.18 (https://pluginjs.com) | ||
| * Copyright 2019 Creation Studio Limited | ||
| * Released under the GPL-3.0 License. | ||
| */ | ||
| undefined | ||
| import Component from '@pluginjs/component'; | ||
| import templateEngine from '@pluginjs/template'; | ||
| import { addClass, removeClass, hasClass } from '@pluginjs/classes'; | ||
| import { append, closest, parseHTML } from '@pluginjs/dom'; | ||
| import { bindEvent, removeEvent, bindEventOnce } from '@pluginjs/events'; | ||
| import { compose, deepMerge } from '@pluginjs/utils'; | ||
| import { themeable, styleable, eventable, stateable, optionable, register } from '@pluginjs/decorator'; | ||
| import Fullscreen from '@pluginjs/fullscreen'; | ||
| import SLIDER from '@pluginjs/slider'; | ||
| import THUMBS from '@pluginjs/thumbnails'; | ||
| import Keyboard from '@pluginjs/keyboard'; | ||
| import Breakpoints from '@pluginjs/breakpoints'; | ||
| function _defineProperty(obj, key, value) { | ||
| if (key in obj) { | ||
| Object.defineProperty(obj, key, { | ||
| value: value, | ||
| enumerable: true, | ||
| configurable: true, | ||
| writable: true | ||
| }); | ||
| } else { | ||
| obj[key] = value; | ||
| } | ||
| return obj; | ||
| } | ||
| function _objectSpread(target) { | ||
| for (var i = 1; i < arguments.length; i++) { | ||
| var source = arguments[i] != null ? arguments[i] : {}; | ||
| var ownKeys = Object.keys(source); | ||
| if (typeof Object.getOwnPropertySymbols === 'function') { | ||
| ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { | ||
| return Object.getOwnPropertyDescriptor(source, sym).enumerable; | ||
| })); | ||
| } | ||
| ownKeys.forEach(function (key) { | ||
| _defineProperty(target, key, source[key]); | ||
| }); | ||
| } | ||
| return target; | ||
| } | ||
| function _slicedToArray(arr, i) { | ||
| return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); | ||
| } | ||
| function _arrayWithHoles(arr) { | ||
| if (Array.isArray(arr)) return arr; | ||
| } | ||
| function _iterableToArrayLimit(arr, i) { | ||
| var _arr = []; | ||
| var _n = true; | ||
| var _d = false; | ||
| var _e = undefined; | ||
| try { | ||
| for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { | ||
| _arr.push(_s.value); | ||
| if (i && _arr.length === i) break; | ||
| } | ||
| } catch (err) { | ||
| _d = true; | ||
| _e = err; | ||
| } finally { | ||
| try { | ||
| if (!_n && _i["return"] != null) _i["return"](); | ||
| } finally { | ||
| if (_d) throw _e; | ||
| } | ||
| } | ||
| return _arr; | ||
| } | ||
| function _nonIterableRest() { | ||
| throw new TypeError("Invalid attempt to destructure non-iterable instance"); | ||
| } | ||
| const namespace = 'lightbox'; | ||
| const events = { | ||
| READY: 'ready', | ||
| ENABLE: 'enable', | ||
| DISABLE: 'disable', | ||
| DESTROY: 'destroy' | ||
| }; | ||
| const classes = { | ||
| NAMESPACE: "pj-".concat(namespace), | ||
| CONTAINER: '{namespace}-container', | ||
| OVERLAY: '{namespace}-overlay', | ||
| TOPBAR: '{namespace}-topbar', | ||
| COUNTER: '{namespace}-counter', | ||
| PLAY: '{namespace}-play', | ||
| START: '{namespace}-start', | ||
| STOP: '{namespace}-stop', | ||
| FULLSCREEN: '{namespace}-fullscreen', | ||
| ISFULL: '{namespace}-isfull', | ||
| FULL: '{namespace}-full', | ||
| MINI: '{namespace}-mini', | ||
| DOWNLOAD: '{namespace}-download', | ||
| CLOSE: '{namespace}-close', | ||
| FOOTER: '{namespace}-footer', | ||
| CAPTION: '{namespace}-caption', | ||
| TITLE: '{namespace}-title', | ||
| SLIDER: '{namespace}-slider', | ||
| THUMBS: '{namespace}-thumbs', | ||
| VERTICAL: '{namespace}-vertical', | ||
| AUTOPLAY: '{namespace}-autoplay', | ||
| SHOW: '{namespace}-show', | ||
| ACTIVE: '{namespace}-active', | ||
| DISABLED: '{namespace}-disabled', | ||
| RESPONSIVE: '{namespace}-responsive' | ||
| }; | ||
| const methods = ['enable', 'disable', 'destroy', 'show', 'hide']; | ||
| const defaults = { | ||
| templates: { | ||
| container() { | ||
| return '<div class="{classes.CONTAINER}"></div>'; | ||
| }, | ||
| overlay() { | ||
| return '<div class="{classes.OVERLAY}"></div>'; | ||
| }, | ||
| topbar() { | ||
| return '<div class="{classes.TOPBAR}"></div>'; | ||
| }, | ||
| counter() { | ||
| return '<div class="{classes.COUNTER}"></div>'; | ||
| }, | ||
| play() { | ||
| return '<span class="{classes.PLAY}"><i class="{classes.START} pj-icon pj-icon-caret-right"></i><i class="{classes.STOP} pj-icon pj-icon-pause"></i></span>'; | ||
| }, | ||
| fullScreen() { | ||
| return '<span class="{classes.FULLSCREEN}"><i class="{classes.FULL} pj-icon pj-icon-maximize"></i><i class="{classes.MINI} pj-icon pj-icon-minimize"></i></span>'; | ||
| }, | ||
| download() { | ||
| return '<span class="{classes.DOWNLOAD}"><i class="pj-icon pj-icon-download"></i></span>'; | ||
| }, | ||
| close() { | ||
| return '<span class="{classes.CLOSE}"><i class="pj-icon pj-icon-remove"></i></span>'; | ||
| }, | ||
| footer() { | ||
| return '<div class="{classes.FOOTER}"></div>'; | ||
| }, | ||
| caption() { | ||
| return '<div class="{classes.CAPTION}"></div>'; | ||
| }, | ||
| title() { | ||
| return '<div class="{classes.TITLE}">{title}</div>'; | ||
| }, | ||
| slider() { | ||
| return '<div class="{classes.SLIDER}"></div>'; | ||
| }, | ||
| box() { | ||
| return '<div class="{classes.BOX}"></div>'; | ||
| }, | ||
| card() { | ||
| return '<div class="{classes.CARD}">' + '<div class="{classes.LOADER}"></div>' + '</div>'; | ||
| }, | ||
| image() { | ||
| return '<img class="{classes.IMAGE} {classes.CONTENT}">'; | ||
| }, | ||
| video() { | ||
| return '<div class="{classes.VIDEOWRAP} {classes.CONTENT}">' + '<img class="{classes.IMAGE}">' + '<div class="{classes.VIDEO}"></div>' + '</div>'; | ||
| }, | ||
| iframe() { | ||
| return '<iframe class="{classes.IFRAME} {classes.CONTENT}" src="//about:blank" frameborder="0" allowfullscreen></iframe>'; | ||
| }, | ||
| map() { | ||
| return '<iframe class="{classes.MAP} {classes.CONTENT}" src="//about:blank" frameborder="0" allowfullscreen></iframe>'; | ||
| }, | ||
| inline() { | ||
| return '<div class="{classes.INLINE} {classes.CONTENT}"></div>'; | ||
| }, | ||
| thumbs() { | ||
| return '<div class="{classes.THUMBS}"></div>'; | ||
| }, | ||
| inner() { | ||
| return '<div class="{classes.INNER}"></div>'; | ||
| } | ||
| }, | ||
| theme: null, | ||
| data: 'html', | ||
| // html or DATA | ||
| delegate: 'a', | ||
| actions: ['play', 'fullScreen', 'download', 'close'], | ||
| // ['play', 'fullScreen', 'download', 'share', 'close'] | ||
| overlayClose: true, | ||
| counter: true, | ||
| arrows: {}, | ||
| swipe: true, | ||
| caption: true, | ||
| thumbs: true, | ||
| vertical: false, | ||
| keyboard: true, | ||
| duration: 300, | ||
| playCycle: 4000, | ||
| breakpoint: null, | ||
| // xs, sm, md, lg, xl | ||
| loader: { | ||
| theme: 'ring', | ||
| size: 'lg' | ||
| } | ||
| }; | ||
| const dependencies = ['slider', 'thumbnails', 'arrows', 'anime', 'hammer']; | ||
| class Overlay { | ||
| constructor(instance) { | ||
| this.instance = instance; | ||
| this.initialize(); | ||
| } | ||
| initialize() { | ||
| this.element = this.instance.getElement('overlay'); | ||
| append(this.element, this.instance.container); | ||
| this.bind(); | ||
| } | ||
| bind() { | ||
| bindEvent(this.instance.eventName('click'), event => { | ||
| event.preventDefault(); | ||
| this.instance.hide(); | ||
| }, this.element); | ||
| } | ||
| unbind() { | ||
| removeEvent(this.instance.eventName('click'), this.element); | ||
| } | ||
| } | ||
| class Topbar { | ||
| constructor(instance) { | ||
| this.instance = instance; | ||
| this.classes = instance.classes; | ||
| this.initialize(); | ||
| } | ||
| initialize() { | ||
| if (this.instance.options.counter) { | ||
| this.instance.options.actions.unshift('counter'); | ||
| } | ||
| this.element = this.instance.getElement('topbar'); | ||
| this.instance.options.actions.forEach(item => { | ||
| this[item] = this.instance.getElement(item); | ||
| append(this[item], this.element); | ||
| }); | ||
| this.setCounter(this.instance.active); | ||
| append(this.element, this.instance.container); // this.fullscreen = new Fullscreen(this.instance.container) | ||
| this.fullscreen = new Fullscreen(); | ||
| this.bind(); | ||
| } | ||
| bind() { | ||
| compose(bindEvent(this.instance.eventName('click'), ".".concat(this.classes.PLAY), event => { | ||
| event.preventDefault(); | ||
| event.stopPropagation(); | ||
| this.autoPlay(); | ||
| }), bindEvent(this.instance.eventName('click'), ".".concat(this.classes.FULLSCREEN), event => { | ||
| event.preventDefault(); | ||
| event.stopPropagation(); | ||
| if (this.fullscreen.isFullscreen()) { | ||
| this.mini(); | ||
| } else { | ||
| this.full(); | ||
| } | ||
| }), bindEvent(this.instance.eventName('click'), ".".concat(this.classes.DOWNLOAD), event => { | ||
| event.preventDefault(); | ||
| event.stopPropagation(); | ||
| const url = this.instance.data[this.instance.slider.plugin.current].orig; | ||
| const filename = url.substr(url.lastIndexOf('/') + 1); | ||
| this.down(url, filename); | ||
| }), bindEvent(this.instance.eventName('click'), ".".concat(this.classes.CLOSE), event => { | ||
| event.preventDefault(); | ||
| event.stopPropagation(); | ||
| this.off(); | ||
| }))(this.element); | ||
| } | ||
| autoPlay() { | ||
| if (this.instance.is('play')) { | ||
| this.stop(); | ||
| } else { | ||
| this.start(); | ||
| bindEventOnce(this.instance.eventName('mousedown'), event => { | ||
| if (closest(".".concat(this.classes.PLAY), event.target) === this.play) { | ||
| return; | ||
| } | ||
| this.stop(); | ||
| }, this.instance.container); | ||
| } | ||
| } | ||
| start() { | ||
| this.instance.slider.plugin.intervalToggle(true); | ||
| addClass(this.classes.AUTOPLAY, this.instance.container); | ||
| this.instance.enter('play'); | ||
| } | ||
| stop() { | ||
| this.instance.slider.plugin.intervalToggle(false); | ||
| removeClass(this.classes.AUTOPLAY, this.instance.container); | ||
| this.instance.leave('play'); | ||
| } | ||
| off() { | ||
| this.instance.hide(); | ||
| if (this.fullscreen.isFullscreen()) { | ||
| this.mini(); | ||
| } | ||
| } | ||
| full() { | ||
| this.fullscreen.request(); | ||
| addClass(this.classes.ISFULL, this.instance.container); | ||
| } | ||
| mini() { | ||
| this.fullscreen.exit(); | ||
| removeClass(this.classes.ISFULL, this.instance.container); | ||
| } | ||
| getBlob(url) { | ||
| return new Promise(resolve => { | ||
| const xhr = new XMLHttpRequest(); | ||
| xhr.open('GET', url, true); | ||
| xhr.responseType = 'blob'; | ||
| xhr.onload = () => { | ||
| if (xhr.status === 200) { | ||
| resolve(xhr.response); | ||
| } | ||
| }; | ||
| xhr.send(); | ||
| }); | ||
| } | ||
| saveAs(blob, filename) { | ||
| if (window.navigator.msSaveOrOpenBlob) { | ||
| navigator.msSaveBlob(blob, filename); | ||
| } else { | ||
| const link = document.createElement('a'); | ||
| const body = document.querySelector('body'); | ||
| link.href = window.URL.createObjectURL(blob); | ||
| link.download = filename; // fix Firefox | ||
| link.style.display = 'none'; | ||
| body.appendChild(link); | ||
| link.click(); | ||
| body.removeChild(link); | ||
| window.URL.revokeObjectURL(link.href); | ||
| } | ||
| } | ||
| down(url, filename) { | ||
| this.getBlob(url).then(blob => { | ||
| this.saveAs(blob, filename); | ||
| }); | ||
| } | ||
| unbind() { | ||
| removeEvent(this.instance.eventName('click'), this.close); | ||
| } | ||
| setCounter(index) { | ||
| if (!this.instance.options.counter) { | ||
| return; | ||
| } | ||
| this.counter.innerHTML = "".concat(index + 1, " / ").concat(this.instance.length); | ||
| } | ||
| } | ||
| class Caption { | ||
| constructor(instance) { | ||
| this.instance = instance; | ||
| this.initialize(); | ||
| } | ||
| initialize() { | ||
| if (!this.instance.options.caption) { | ||
| return; | ||
| } | ||
| this.element = this.instance.getElement('caption'); | ||
| this.setInfo(this.instance.data[this.instance.active]); | ||
| append(this.element, this.instance.footer); | ||
| } | ||
| setInfo(data) { | ||
| if (!this.instance.options.caption) { | ||
| return; | ||
| } | ||
| const test = this.instance.getElement('title', data); | ||
| this.element.innerHTML = ''; | ||
| append(test, this.element); | ||
| } | ||
| } | ||
| class Slider { | ||
| constructor(instance) { | ||
| this.instance = instance; | ||
| this.initialize(); | ||
| } | ||
| initialize() { | ||
| this.element = this.instance.getElement('slider'); | ||
| append(this.element, this.instance.container); | ||
| setTimeout(() => { | ||
| this.initSlider(); | ||
| }, 0); | ||
| } | ||
| initSlider() { | ||
| const instance = this.instance; | ||
| this.plugin = SLIDER.of(this.element, deepMerge(instance.options, { | ||
| data: instance.processData(instance.data, 'orig'), | ||
| current: instance.active, | ||
| onChange() { | ||
| instance.topbar.setCounter(this.current); | ||
| instance.caption.setInfo(instance.data[this.current]); | ||
| if (instance.options.thumbs) { | ||
| instance.thumbs.plugin.go(this.current, false); | ||
| } | ||
| } | ||
| })); | ||
| } | ||
| } | ||
| class Thumbs { | ||
| constructor(instance) { | ||
| this.instance = instance; | ||
| this.initialize(); | ||
| } | ||
| initialize() { | ||
| if (!this.instance.options.thumbs) { | ||
| return; | ||
| } | ||
| this.element = this.instance.getElement('thumbs'); | ||
| append(this.element, this.instance.footer); | ||
| setTimeout(() => { | ||
| this.initThumbs(); | ||
| }, 0); | ||
| } | ||
| initThumbs() { | ||
| const instance = this.instance; | ||
| this.plugin = THUMBS.of(this.element, deepMerge(instance.options, { | ||
| data: instance.processData(instance.data, 'thumb'), | ||
| current: instance.active, | ||
| mode: 'center', | ||
| onChange() { | ||
| instance.slider.plugin.go(this.current, false); | ||
| instance.topbar.setCounter(this.current); | ||
| instance.caption.setInfo(instance.data[this.current]); | ||
| } | ||
| })); | ||
| } | ||
| } | ||
| var _dec, _dec2, _dec3, _dec4, _dec5, _dec6, _class; | ||
| let Lightbox = (_dec = themeable(), _dec2 = styleable(classes), _dec3 = eventable(events), _dec4 = stateable(), _dec5 = optionable(defaults, true), _dec6 = register(namespace, { | ||
| methods: methods, | ||
| dependencies: dependencies | ||
| }), _dec(_class = _dec2(_class = _dec3(_class = _dec4(_class = _dec5(_class = _dec6(_class = class Lightbox extends Component { | ||
| constructor(element) { | ||
| let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; | ||
| super(element); | ||
| this.setupOptions(options); | ||
| this.setupClasses(); | ||
| this.setupStates(); | ||
| this.initialize(); | ||
| } | ||
| initialize() { | ||
| if (!this.options.data || this.options.data.length < 0) { | ||
| return; | ||
| } | ||
| addClass(this.classes.NAMESPACE, this.element); | ||
| if (this.options.theme) { | ||
| addClass(this.getThemeClass(), this.element); | ||
| } | ||
| this.data = this.options.data === 'html' ? this.parseHtml() : this.options.data; | ||
| this.length = this.data.length; | ||
| this.bind(); | ||
| if (this.options.breakpoint) { | ||
| this.initBreakpoints(); | ||
| } | ||
| if (this.options.keyboard) { | ||
| this.keyboard = Keyboard(); | ||
| } | ||
| this.enter('initialized'); | ||
| this.trigger(events.READY); | ||
| } | ||
| initBreakpoints() { | ||
| Breakpoints.init(); | ||
| if (Breakpoints.all().includes(this.options.breakpoint)) { | ||
| const breakpoint = this.options.breakpoint; | ||
| const that = this; | ||
| if (Breakpoints.is("".concat(breakpoint, "-"))) { | ||
| addClass(this.classes.RESPONSIVE, this.element); | ||
| } | ||
| Breakpoints.to(breakpoint, { | ||
| enter() { | ||
| addClass(that.classes.RESPONSIVE, that.element); | ||
| }, | ||
| leave() { | ||
| removeClass(that.classes.RESPONSIVE, that.element); | ||
| } | ||
| }); | ||
| } | ||
| } | ||
| bind() { | ||
| const that = this; | ||
| bindEvent(this.eventName('click'), this.options.delegate, function (event) { | ||
| event.preventDefault(); | ||
| that.active = Number(this.dataset.index); | ||
| that.open(); | ||
| }, this.element); | ||
| } | ||
| unbind() { | ||
| removeEvent(this.eventName('click'), this.element); | ||
| } | ||
| bindConatiner() { | ||
| bindEvent(this.eventName('click'), event => { | ||
| event.preventDefault(); | ||
| event.stopPropagation(); | ||
| const target = event.target; | ||
| if (hasClass(this.slider.plugin.classes.CARD, target) || hasClass(this.classes.TOPBAR, target)) { | ||
| this.hide(); | ||
| } | ||
| }, this.container); | ||
| if (this.keyboard) { | ||
| this.keyboard.on('down', 'esc', () => { | ||
| this.hide(); | ||
| }); | ||
| this.keyboard.on('down', 'left', () => { | ||
| this.slider.plugin.prev(); | ||
| }); | ||
| this.keyboard.on('down', 'right', () => { | ||
| this.slider.plugin.next(); | ||
| }); | ||
| } | ||
| } | ||
| unbindConatiner() { | ||
| removeEvent(this.eventName('click'), this.container); | ||
| if (this.keyboard) { | ||
| this.keyboard.off('down', 'esc,left, right'); | ||
| } | ||
| } | ||
| open() { | ||
| if (this.is('generate')) { | ||
| this.initShow(this.active); | ||
| } else { | ||
| this.generate(); | ||
| } | ||
| this.show(); | ||
| } | ||
| show() { | ||
| addClass(this.classes.SHOW, this.container); | ||
| this.bindConatiner(); | ||
| this.enter('show'); | ||
| } | ||
| hide() { | ||
| removeClass(this.classes.SHOW, this.container); | ||
| this.unbindConatiner(); | ||
| this.topbar.mini(); | ||
| this.leave('show'); | ||
| } | ||
| initShow(index) { | ||
| this.slider.plugin.reset(index); | ||
| this.topbar.setCounter(index); | ||
| this.caption.setInfo(this.data[index]); | ||
| if (this.options.thumbs) { | ||
| this.thumbs.plugin.go(index, false, false); | ||
| } | ||
| } | ||
| generate() { | ||
| this.container = this.getElement('container'); | ||
| this.footer = this.getElement('footer'); | ||
| this.overlay = new Overlay(this); | ||
| this.topbar = new Topbar(this); | ||
| this.slider = new Slider(this); | ||
| append(this.footer, this.container); | ||
| this.caption = new Caption(this); | ||
| this.thumbs = new Thumbs(this); | ||
| if (this.options.theme) { | ||
| addClass(this.getThemeClass(), this.container); | ||
| } | ||
| append(this.container, document.body); | ||
| this.enter('generate'); | ||
| } | ||
| getElement(type) { | ||
| const template = this.options.templates[type]; | ||
| let html = ''; | ||
| for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) { | ||
| args[_key - 1] = arguments[_key]; | ||
| } | ||
| html = templateEngine.render(template.call(this), deepMerge({ | ||
| classes: this.classes | ||
| }, ...args)); | ||
| return parseHTML(html); | ||
| } | ||
| processData(data, key) { | ||
| const _data = []; | ||
| data.forEach(item => { | ||
| let info = { | ||
| src: item[key] | ||
| }; | ||
| info = deepMerge(info, item); | ||
| _data.push(info); | ||
| }); | ||
| return _data; | ||
| } | ||
| parseHtml() { | ||
| const data = []; | ||
| const items = this.element.querySelectorAll(this.options.delegate); | ||
| items.forEach((item, index) => { | ||
| item.dataset.index = index; | ||
| let info = { | ||
| orig: item.getAttribute('href'), | ||
| thumb: item.children[0].getAttribute('src') | ||
| }; | ||
| const _data = Object.entries(item.dataset).reduce((result, _ref) => { | ||
| let _ref2 = _slicedToArray(_ref, 2), | ||
| k = _ref2[0], | ||
| v = _ref2[1]; | ||
| try { | ||
| const content = JSON.parse("{\"data\": ".concat(v.replace(/'/g, '"'), "}")).data; | ||
| return _objectSpread({}, result, { | ||
| [k]: content | ||
| }); | ||
| } catch (err) { | ||
| return _objectSpread({}, result, { | ||
| [k]: v | ||
| }); | ||
| } | ||
| }, {}); | ||
| info = deepMerge(info, _data); | ||
| data.push(info); | ||
| }); | ||
| return data; | ||
| } | ||
| enable() { | ||
| this.slider.enable(); | ||
| this.thumbs.enable(); | ||
| } | ||
| disable() { | ||
| this.slider.disable(); | ||
| this.thumbs.disable(); | ||
| } | ||
| destroy() { | ||
| this.slider.destroy(); | ||
| this.thumbs.destroy(); | ||
| } | ||
| }) || _class) || _class) || _class) || _class) || _class) || _class); | ||
| export default Lightbox; |
| /*! | ||
| * @pluginjs/lightbox v0.7.17 (https://pluginjs.com) | ||
| * @pluginjs/lightbox v0.7.18 (https://pluginjs.com) | ||
| * Copyright 2019 Creation Studio Limited | ||
| * Released under the GPL-3.0 License. | ||
| */ | ||
| undefined | ||
| import t from"@pluginjs/component";import e from"@pluginjs/template";import{addClass as s,removeClass as i,hasClass as n}from"@pluginjs/classes";import{append as a,closest as o,parseHTML as c}from"@pluginjs/dom";import{bindEvent as l,removeEvent as r,bindEventOnce as h}from"@pluginjs/events";import{compose as p,deepMerge as d}from"@pluginjs/utils";import{themeable as m,styleable as u,eventable as b,stateable as f,optionable as v,register as g}from"@pluginjs/decorator";import E from"@pluginjs/fullscreen";import O from"@pluginjs/slider";import y from"@pluginjs/thumbnails";import T from"@pluginjs/keyboard";import A from"@pluginjs/breakpoints";function N(t,e,s){return e in t?Object.defineProperty(t,e,{value:s,enumerable:!0,configurable:!0,writable:!0}):t[e]=s,t}function L(t){for(var e=1;e<arguments.length;e++){var s=null!=arguments[e]?arguments[e]:{},i=Object.keys(s);"function"==typeof Object.getOwnPropertySymbols&&(i=i.concat(Object.getOwnPropertySymbols(s).filter(function(t){return Object.getOwnPropertyDescriptor(s,t).enumerable}))),i.forEach(function(e){N(t,e,s[e])})}return t}function S(t,e){return function(t){if(Array.isArray(t))return t}(t)||function(t,e){var s=[],i=!0,n=!1,a=void 0;try{for(var o,c=t[Symbol.iterator]();!(i=(o=c.next()).done)&&(s.push(o.value),!e||s.length!==e);i=!0);}catch(t){n=!0,a=t}finally{try{i||null==c.return||c.return()}finally{if(n)throw a}}return s}(t,e)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}()}const w={READY:"ready",ENABLE:"enable",DISABLE:"disable",DESTROY:"destroy"},C={NAMESPACE:"pj-".concat("lightbox"),CONTAINER:"{namespace}-container",OVERLAY:"{namespace}-overlay",TOPBAR:"{namespace}-topbar",COUNTER:"{namespace}-counter",PLAY:"{namespace}-play",START:"{namespace}-start",STOP:"{namespace}-stop",FULLSCREEN:"{namespace}-fullscreen",ISFULL:"{namespace}-isfull",FULL:"{namespace}-full",MINI:"{namespace}-mini",DOWNLOAD:"{namespace}-download",CLOSE:"{namespace}-close",FOOTER:"{namespace}-footer",CAPTION:"{namespace}-caption",TITLE:"{namespace}-title",SLIDER:"{namespace}-slider",THUMBS:"{namespace}-thumbs",VERTICAL:"{namespace}-vertical",AUTOPLAY:"{namespace}-autoplay",SHOW:"{namespace}-show",ACTIVE:"{namespace}-active",DISABLED:"{namespace}-disabled",RESPONSIVE:"{namespace}-responsive"},I={templates:{container:()=>'<div class="{classes.CONTAINER}"></div>',overlay:()=>'<div class="{classes.OVERLAY}"></div>',topbar:()=>'<div class="{classes.TOPBAR}"></div>',counter:()=>'<div class="{classes.COUNTER}"></div>',play:()=>'<span class="{classes.PLAY}"><i class="{classes.START} pj-icon pj-icon-caret-right"></i><i class="{classes.STOP} pj-icon pj-icon-pause"></i></span>',fullScreen:()=>'<span class="{classes.FULLSCREEN}"><i class="{classes.FULL} pj-icon pj-icon-maximize"></i><i class="{classes.MINI} pj-icon pj-icon-minimize"></i></span>',download:()=>'<span class="{classes.DOWNLOAD}"><i class="pj-icon pj-icon-download"></i></span>',close:()=>'<span class="{classes.CLOSE}"><i class="pj-icon pj-icon-remove"></i></span>',footer:()=>'<div class="{classes.FOOTER}"></div>',caption:()=>'<div class="{classes.CAPTION}"></div>',title:()=>'<div class="{classes.TITLE}">{title}</div>',slider:()=>'<div class="{classes.SLIDER}"></div>',box:()=>'<div class="{classes.BOX}"></div>',card:()=>'<div class="{classes.CARD}"><div class="{classes.LOADER}"></div></div>',image:()=>'<img class="{classes.IMAGE} {classes.CONTENT}">',video:()=>'<div class="{classes.VIDEOWRAP} {classes.CONTENT}"><img class="{classes.IMAGE}"><div class="{classes.VIDEO}"></div></div>',iframe:()=>'<iframe class="{classes.IFRAME} {classes.CONTENT}" src="//about:blank" frameborder="0" allowfullscreen></iframe>',map:()=>'<iframe class="{classes.MAP} {classes.CONTENT}" src="//about:blank" frameborder="0" allowfullscreen></iframe>',inline:()=>'<div class="{classes.INLINE} {classes.CONTENT}"></div>',thumbs:()=>'<div class="{classes.THUMBS}"></div>',inner:()=>'<div class="{classes.INNER}"></div>'},theme:null,data:"html",delegate:"a",actions:["play","fullScreen","download","close"],overlayClose:!0,counter:!0,arrows:{},swipe:!0,caption:!0,thumbs:!0,vertical:!1,keyboard:!0,duration:300,playCycle:4e3,breakpoint:null,loader:{theme:"ring",size:"lg"}};class R{constructor(t){this.instance=t,this.initialize()}initialize(){this.element=this.instance.getElement("overlay"),a(this.element,this.instance.container),this.bind()}bind(){l(this.instance.eventName("click"),t=>{t.preventDefault(),this.instance.hide()},this.element)}unbind(){r(this.instance.eventName("click"),this.element)}}class P{constructor(t){this.instance=t,this.classes=t.classes,this.initialize()}initialize(){this.instance.options.counter&&this.instance.options.actions.unshift("counter"),this.element=this.instance.getElement("topbar"),this.instance.options.actions.forEach(t=>{this[t]=this.instance.getElement(t),a(this[t],this.element)}),this.setCounter(this.instance.active),a(this.element,this.instance.container),this.fullscreen=new E,this.bind()}bind(){p(l(this.instance.eventName("click"),".".concat(this.classes.PLAY),t=>{t.preventDefault(),t.stopPropagation(),this.autoPlay()}),l(this.instance.eventName("click"),".".concat(this.classes.FULLSCREEN),t=>{t.preventDefault(),t.stopPropagation(),this.fullscreen.isFullscreen()?this.mini():this.full()}),l(this.instance.eventName("click"),".".concat(this.classes.DOWNLOAD),t=>{t.preventDefault(),t.stopPropagation();const e=this.instance.data[this.instance.slider.plugin.current].orig,s=e.substr(e.lastIndexOf("/")+1);this.down(e,s)}),l(this.instance.eventName("click"),".".concat(this.classes.CLOSE),t=>{t.preventDefault(),t.stopPropagation(),this.off()}))(this.element)}autoPlay(){this.instance.is("play")?this.stop():(this.start(),h(this.instance.eventName("mousedown"),t=>{o(".".concat(this.classes.PLAY),t.target)!==this.play&&this.stop()},this.instance.container))}start(){this.instance.slider.plugin.intervalToggle(!0),s(this.classes.AUTOPLAY,this.instance.container),this.instance.enter("play")}stop(){this.instance.slider.plugin.intervalToggle(!1),i(this.classes.AUTOPLAY,this.instance.container),this.instance.leave("play")}off(){this.instance.hide(),this.fullscreen.isFullscreen()&&this.mini()}full(){this.fullscreen.request(),s(this.classes.ISFULL,this.instance.container)}mini(){this.fullscreen.exit(),i(this.classes.ISFULL,this.instance.container)}getBlob(t){return new Promise(e=>{const s=new XMLHttpRequest;s.open("GET",t,!0),s.responseType="blob",s.onload=(()=>{200===s.status&&e(s.response)}),s.send()})}saveAs(t,e){if(window.navigator.msSaveOrOpenBlob)navigator.msSaveBlob(t,e);else{const s=document.createElement("a"),i=document.querySelector("body");s.href=window.URL.createObjectURL(t),s.download=e,s.style.display="none",i.appendChild(s),s.click(),i.removeChild(s),window.URL.revokeObjectURL(s.href)}}down(t,e){this.getBlob(t).then(t=>{this.saveAs(t,e)})}unbind(){r(this.instance.eventName("click"),this.close)}setCounter(t){this.instance.options.counter&&(this.counter.innerHTML="".concat(t+1," / ").concat(this.instance.length))}}class j{constructor(t){this.instance=t,this.initialize()}initialize(){this.instance.options.caption&&(this.element=this.instance.getElement("caption"),this.setInfo(this.instance.data[this.instance.active]),a(this.element,this.instance.footer))}setInfo(t){if(!this.instance.options.caption)return;const e=this.instance.getElement("title",t);this.element.innerHTML="",a(e,this.element)}}class k{constructor(t){this.instance=t,this.initialize()}initialize(){this.element=this.instance.getElement("slider"),a(this.element,this.instance.container),setTimeout(()=>{this.initSlider()},0)}initSlider(){const t=this.instance;this.plugin=O.of(this.element,d(t.options,{data:t.processData(t.data,"orig"),current:t.active,onChange(){t.topbar.setCounter(this.current),t.caption.setInfo(t.data[this.current]),t.options.thumbs&&t.thumbs.plugin.go(this.current,!1)}}))}}class D{constructor(t){this.instance=t,this.initialize()}initialize(){this.instance.options.thumbs&&(this.element=this.instance.getElement("thumbs"),a(this.element,this.instance.footer),setTimeout(()=>{this.initThumbs()},0))}initThumbs(){const t=this.instance;this.plugin=y.of(this.element,d(t.options,{data:t.processData(t.data,"thumb"),current:t.active,mode:"center",onChange(){t.slider.plugin.go(this.current,!1),t.topbar.setCounter(this.current),t.caption.setInfo(t.data[this.current])}}))}}var U;export default m()(U=u(C)(U=b(w)(U=f()(U=v(I,!0)(U=g("lightbox",{methods:["enable","disable","destroy","show","hide"],dependencies:["slider","thumbnails","arrows","anime","hammer"]})(U=class extends t{constructor(t){let e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};super(t),this.setupOptions(e),this.setupClasses(),this.setupStates(),this.initialize()}initialize(){!this.options.data||this.options.data.length<0||(s(this.classes.NAMESPACE,this.element),this.options.theme&&s(this.getThemeClass(),this.element),this.data="html"===this.options.data?this.parseHtml():this.options.data,this.length=this.data.length,this.bind(),this.options.breakpoint&&this.initBreakpoints(),this.options.keyboard&&(this.keyboard=T()),this.enter("initialized"),this.trigger(w.READY))}initBreakpoints(){if(A.init(),A.all().includes(this.options.breakpoint)){const t=this.options.breakpoint,e=this;A.is("".concat(t,"-"))&&s(this.classes.RESPONSIVE,this.element),A.to(t,{enter(){s(e.classes.RESPONSIVE,e.element)},leave(){i(e.classes.RESPONSIVE,e.element)}})}}bind(){const t=this;l(this.eventName("click"),this.options.delegate,function(e){e.preventDefault(),t.active=Number(this.dataset.index),t.open()},this.element)}unbind(){r(this.eventName("click"),this.element)}bindConatiner(){l(this.eventName("click"),t=>{t.preventDefault(),t.stopPropagation();const e=t.target;(n(this.slider.plugin.classes.CARD,e)||n(this.classes.TOPBAR,e))&&this.hide()},this.container),this.keyboard&&(this.keyboard.on("down","esc",()=>{this.hide()}),this.keyboard.on("down","left",()=>{this.slider.plugin.prev()}),this.keyboard.on("down","right",()=>{this.slider.plugin.next()}))}unbindConatiner(){r(this.eventName("click"),this.container),this.keyboard&&this.keyboard.off("down","esc,left, right")}open(){this.is("generate")?this.initShow(this.active):this.generate(),this.show()}show(){s(this.classes.SHOW,this.container),this.bindConatiner(),this.enter("show")}hide(){i(this.classes.SHOW,this.container),this.unbindConatiner(),this.topbar.mini(),this.leave("show")}initShow(t){this.slider.plugin.reset(t),this.topbar.setCounter(t),this.caption.setInfo(this.data[t]),this.options.thumbs&&this.thumbs.plugin.go(t,!1,!1)}generate(){this.container=this.getElement("container"),this.footer=this.getElement("footer"),this.overlay=new R(this),this.topbar=new P(this),this.slider=new k(this),a(this.footer,this.container),this.caption=new j(this),this.thumbs=new D(this),this.options.theme&&s(this.getThemeClass(),this.container),a(this.container,document.body),this.enter("generate")}getElement(t){const s=this.options.templates[t];let i="";for(var n=arguments.length,a=new Array(n>1?n-1:0),o=1;o<n;o++)a[o-1]=arguments[o];return i=e.render(s.call(this),d({classes:this.classes},...a)),c(i)}processData(t,e){const s=[];return t.forEach(t=>{let i={src:t[e]};i=d(i,t),s.push(i)}),s}parseHtml(){const t=[];return this.element.querySelectorAll(this.options.delegate).forEach((e,s)=>{e.dataset.index=s;let i={orig:e.getAttribute("href"),thumb:e.children[0].getAttribute("src")};const n=Object.entries(e.dataset).reduce((t,e)=>{let s=S(e,2),i=s[0],n=s[1];try{return L({},t,{[i]:JSON.parse('{"data": '.concat(n.replace(/'/g,'"'),"}")).data})}catch(e){return L({},t,{[i]:n})}},{});i=d(i,n),t.push(i)}),t}enable(){this.slider.enable(),this.thumbs.enable()}disable(){this.slider.disable(),this.thumbs.disable()}destroy(){this.slider.destroy(),this.thumbs.destroy()}})||U)||U)||U)||U)||U)||U; |
| /*! | ||
| * @pluginjs/lightbox v0.7.17 (https://pluginjs.com) | ||
| * @pluginjs/lightbox v0.7.18 (https://pluginjs.com) | ||
| * Copyright 2019 Creation Studio Limited | ||
| * Released under the GPL-3.0 License. | ||
| */ | ||
| undefined | ||
| (function (global, factory) { | ||
| typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('@pluginjs/component'), require('@pluginjs/template'), require('@pluginjs/classes'), require('@pluginjs/dom'), require('@pluginjs/events'), require('@pluginjs/utils'), require('@pluginjs/decorator'), require('@pluginjs/fullscreen'), require('@pluginjs/slider'), require('@pluginjs/thumbnails'), require('@pluginjs/keyboard'), require('@pluginjs/breakpoints')) : | ||
| typeof define === 'function' && define.amd ? define(['@pluginjs/component', '@pluginjs/template', '@pluginjs/classes', '@pluginjs/dom', '@pluginjs/events', '@pluginjs/utils', '@pluginjs/decorator', '@pluginjs/fullscreen', '@pluginjs/slider', '@pluginjs/thumbnails', '@pluginjs/keyboard', '@pluginjs/breakpoints'], factory) : | ||
| (global = global || self, global['@pluginjs/lightbox'] = factory(global['@pluginjs/component'], global['@pluginjs/template'], global['@pluginjs/classes'], global['@pluginjs/dom'], global['@pluginjs/events'], global['@pluginjs/utils'], global['@pluginjs/decorator'], global['@pluginjs/fullscreen'], global['@pluginjs/slider'], global['@pluginjs/thumbnails'], global['@pluginjs/keyboard'], global['@pluginjs/breakpoints'])); | ||
| }(this, function (Component, templateEngine, classes$1, dom, events$1, utils, decorator, Fullscreen, SLIDER, THUMBS, Keyboard, Breakpoints) { 'use strict'; | ||
| Component = Component && Component.hasOwnProperty('default') ? Component['default'] : Component; | ||
| templateEngine = templateEngine && templateEngine.hasOwnProperty('default') ? templateEngine['default'] : templateEngine; | ||
| Fullscreen = Fullscreen && Fullscreen.hasOwnProperty('default') ? Fullscreen['default'] : Fullscreen; | ||
| SLIDER = SLIDER && SLIDER.hasOwnProperty('default') ? SLIDER['default'] : SLIDER; | ||
| THUMBS = THUMBS && THUMBS.hasOwnProperty('default') ? THUMBS['default'] : THUMBS; | ||
| Keyboard = Keyboard && Keyboard.hasOwnProperty('default') ? Keyboard['default'] : Keyboard; | ||
| Breakpoints = Breakpoints && Breakpoints.hasOwnProperty('default') ? Breakpoints['default'] : Breakpoints; | ||
| 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); | ||
| } | ||
| } | ||
| function _createClass(Constructor, protoProps, staticProps) { | ||
| if (protoProps) _defineProperties(Constructor.prototype, protoProps); | ||
| if (staticProps) _defineProperties(Constructor, staticProps); | ||
| return Constructor; | ||
| } | ||
| function _defineProperty(obj, key, value) { | ||
| if (key in obj) { | ||
| Object.defineProperty(obj, key, { | ||
| value: value, | ||
| enumerable: true, | ||
| configurable: true, | ||
| writable: true | ||
| }); | ||
| } else { | ||
| obj[key] = value; | ||
| } | ||
| return obj; | ||
| } | ||
| function _objectSpread(target) { | ||
| for (var i = 1; i < arguments.length; i++) { | ||
| var source = arguments[i] != null ? arguments[i] : {}; | ||
| var ownKeys = Object.keys(source); | ||
| if (typeof Object.getOwnPropertySymbols === 'function') { | ||
| ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { | ||
| return Object.getOwnPropertyDescriptor(source, sym).enumerable; | ||
| })); | ||
| } | ||
| ownKeys.forEach(function (key) { | ||
| _defineProperty(target, key, source[key]); | ||
| }); | ||
| } | ||
| return target; | ||
| } | ||
| function _inherits(subClass, superClass) { | ||
| if (typeof superClass !== "function" && superClass !== null) { | ||
| throw new TypeError("Super expression must either be null or a function"); | ||
| } | ||
| subClass.prototype = Object.create(superClass && superClass.prototype, { | ||
| constructor: { | ||
| value: subClass, | ||
| writable: true, | ||
| configurable: true | ||
| } | ||
| }); | ||
| if (superClass) _setPrototypeOf(subClass, superClass); | ||
| } | ||
| function _getPrototypeOf(o) { | ||
| _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { | ||
| return o.__proto__ || Object.getPrototypeOf(o); | ||
| }; | ||
| return _getPrototypeOf(o); | ||
| } | ||
| function _setPrototypeOf(o, p) { | ||
| _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { | ||
| o.__proto__ = p; | ||
| return o; | ||
| }; | ||
| return _setPrototypeOf(o, p); | ||
| } | ||
| function _assertThisInitialized(self) { | ||
| if (self === void 0) { | ||
| throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); | ||
| } | ||
| return self; | ||
| } | ||
| function _possibleConstructorReturn(self, call) { | ||
| if (call && (typeof call === "object" || typeof call === "function")) { | ||
| return call; | ||
| } | ||
| return _assertThisInitialized(self); | ||
| } | ||
| function _slicedToArray(arr, i) { | ||
| return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); | ||
| } | ||
| function _arrayWithHoles(arr) { | ||
| if (Array.isArray(arr)) return arr; | ||
| } | ||
| function _iterableToArrayLimit(arr, i) { | ||
| var _arr = []; | ||
| var _n = true; | ||
| var _d = false; | ||
| var _e = undefined; | ||
| try { | ||
| for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { | ||
| _arr.push(_s.value); | ||
| if (i && _arr.length === i) break; | ||
| } | ||
| } catch (err) { | ||
| _d = true; | ||
| _e = err; | ||
| } finally { | ||
| try { | ||
| if (!_n && _i["return"] != null) _i["return"](); | ||
| } finally { | ||
| if (_d) throw _e; | ||
| } | ||
| } | ||
| return _arr; | ||
| } | ||
| function _nonIterableRest() { | ||
| throw new TypeError("Invalid attempt to destructure non-iterable instance"); | ||
| } | ||
| var namespace = 'lightbox'; | ||
| var events = { | ||
| READY: 'ready', | ||
| ENABLE: 'enable', | ||
| DISABLE: 'disable', | ||
| DESTROY: 'destroy' | ||
| }; | ||
| var classes = { | ||
| NAMESPACE: "pj-".concat(namespace), | ||
| CONTAINER: '{namespace}-container', | ||
| OVERLAY: '{namespace}-overlay', | ||
| TOPBAR: '{namespace}-topbar', | ||
| COUNTER: '{namespace}-counter', | ||
| PLAY: '{namespace}-play', | ||
| START: '{namespace}-start', | ||
| STOP: '{namespace}-stop', | ||
| FULLSCREEN: '{namespace}-fullscreen', | ||
| ISFULL: '{namespace}-isfull', | ||
| FULL: '{namespace}-full', | ||
| MINI: '{namespace}-mini', | ||
| DOWNLOAD: '{namespace}-download', | ||
| CLOSE: '{namespace}-close', | ||
| FOOTER: '{namespace}-footer', | ||
| CAPTION: '{namespace}-caption', | ||
| TITLE: '{namespace}-title', | ||
| SLIDER: '{namespace}-slider', | ||
| THUMBS: '{namespace}-thumbs', | ||
| VERTICAL: '{namespace}-vertical', | ||
| AUTOPLAY: '{namespace}-autoplay', | ||
| SHOW: '{namespace}-show', | ||
| ACTIVE: '{namespace}-active', | ||
| DISABLED: '{namespace}-disabled', | ||
| RESPONSIVE: '{namespace}-responsive' | ||
| }; | ||
| var methods = ['enable', 'disable', 'destroy', 'show', 'hide']; | ||
| var defaults = { | ||
| templates: { | ||
| container: function container() { | ||
| return '<div class="{classes.CONTAINER}"></div>'; | ||
| }, | ||
| overlay: function overlay() { | ||
| return '<div class="{classes.OVERLAY}"></div>'; | ||
| }, | ||
| topbar: function topbar() { | ||
| return '<div class="{classes.TOPBAR}"></div>'; | ||
| }, | ||
| counter: function counter() { | ||
| return '<div class="{classes.COUNTER}"></div>'; | ||
| }, | ||
| play: function play() { | ||
| return '<span class="{classes.PLAY}"><i class="{classes.START} pj-icon pj-icon-caret-right"></i><i class="{classes.STOP} pj-icon pj-icon-pause"></i></span>'; | ||
| }, | ||
| fullScreen: function fullScreen() { | ||
| return '<span class="{classes.FULLSCREEN}"><i class="{classes.FULL} pj-icon pj-icon-maximize"></i><i class="{classes.MINI} pj-icon pj-icon-minimize"></i></span>'; | ||
| }, | ||
| download: function download() { | ||
| return '<span class="{classes.DOWNLOAD}"><i class="pj-icon pj-icon-download"></i></span>'; | ||
| }, | ||
| close: function close() { | ||
| return '<span class="{classes.CLOSE}"><i class="pj-icon pj-icon-remove"></i></span>'; | ||
| }, | ||
| footer: function footer() { | ||
| return '<div class="{classes.FOOTER}"></div>'; | ||
| }, | ||
| caption: function caption() { | ||
| return '<div class="{classes.CAPTION}"></div>'; | ||
| }, | ||
| title: function title() { | ||
| return '<div class="{classes.TITLE}">{title}</div>'; | ||
| }, | ||
| slider: function slider() { | ||
| return '<div class="{classes.SLIDER}"></div>'; | ||
| }, | ||
| box: function box() { | ||
| return '<div class="{classes.BOX}"></div>'; | ||
| }, | ||
| card: function card() { | ||
| return '<div class="{classes.CARD}">' + '<div class="{classes.LOADER}"></div>' + '</div>'; | ||
| }, | ||
| image: function image() { | ||
| return '<img class="{classes.IMAGE} {classes.CONTENT}">'; | ||
| }, | ||
| video: function video() { | ||
| return '<div class="{classes.VIDEOWRAP} {classes.CONTENT}">' + '<img class="{classes.IMAGE}">' + '<div class="{classes.VIDEO}"></div>' + '</div>'; | ||
| }, | ||
| iframe: function iframe() { | ||
| return '<iframe class="{classes.IFRAME} {classes.CONTENT}" src="//about:blank" frameborder="0" allowfullscreen></iframe>'; | ||
| }, | ||
| map: function map() { | ||
| return '<iframe class="{classes.MAP} {classes.CONTENT}" src="//about:blank" frameborder="0" allowfullscreen></iframe>'; | ||
| }, | ||
| inline: function inline() { | ||
| return '<div class="{classes.INLINE} {classes.CONTENT}"></div>'; | ||
| }, | ||
| thumbs: function thumbs() { | ||
| return '<div class="{classes.THUMBS}"></div>'; | ||
| }, | ||
| inner: function inner() { | ||
| return '<div class="{classes.INNER}"></div>'; | ||
| } | ||
| }, | ||
| theme: null, | ||
| data: 'html', | ||
| // html or DATA | ||
| delegate: 'a', | ||
| actions: ['play', 'fullScreen', 'download', 'close'], | ||
| // ['play', 'fullScreen', 'download', 'share', 'close'] | ||
| overlayClose: true, | ||
| counter: true, | ||
| arrows: {}, | ||
| swipe: true, | ||
| caption: true, | ||
| thumbs: true, | ||
| vertical: false, | ||
| keyboard: true, | ||
| duration: 300, | ||
| playCycle: 4000, | ||
| breakpoint: null, | ||
| // xs, sm, md, lg, xl | ||
| loader: { | ||
| theme: 'ring', | ||
| size: 'lg' | ||
| } | ||
| }; | ||
| var dependencies = ['slider', 'thumbnails', 'arrows', 'anime', 'hammer']; | ||
| var Overlay = | ||
| /*#__PURE__*/ | ||
| function () { | ||
| function Overlay(instance) { | ||
| _classCallCheck(this, Overlay); | ||
| this.instance = instance; | ||
| this.initialize(); | ||
| } | ||
| _createClass(Overlay, [{ | ||
| key: "initialize", | ||
| value: function initialize() { | ||
| this.element = this.instance.getElement('overlay'); | ||
| dom.append(this.element, this.instance.container); | ||
| this.bind(); | ||
| } | ||
| }, { | ||
| key: "bind", | ||
| value: function bind() { | ||
| var _this = this; | ||
| events$1.bindEvent(this.instance.eventName('click'), function (event) { | ||
| event.preventDefault(); | ||
| _this.instance.hide(); | ||
| }, this.element); | ||
| } | ||
| }, { | ||
| key: "unbind", | ||
| value: function unbind() { | ||
| events$1.removeEvent(this.instance.eventName('click'), this.element); | ||
| } | ||
| }]); | ||
| return Overlay; | ||
| }(); | ||
| var Topbar = | ||
| /*#__PURE__*/ | ||
| function () { | ||
| function Topbar(instance) { | ||
| _classCallCheck(this, Topbar); | ||
| this.instance = instance; | ||
| this.classes = instance.classes; | ||
| this.initialize(); | ||
| } | ||
| _createClass(Topbar, [{ | ||
| key: "initialize", | ||
| value: function initialize() { | ||
| var _this = this; | ||
| if (this.instance.options.counter) { | ||
| this.instance.options.actions.unshift('counter'); | ||
| } | ||
| this.element = this.instance.getElement('topbar'); | ||
| this.instance.options.actions.forEach(function (item) { | ||
| _this[item] = _this.instance.getElement(item); | ||
| dom.append(_this[item], _this.element); | ||
| }); | ||
| this.setCounter(this.instance.active); | ||
| dom.append(this.element, this.instance.container); // this.fullscreen = new Fullscreen(this.instance.container) | ||
| this.fullscreen = new Fullscreen(); | ||
| this.bind(); | ||
| } | ||
| }, { | ||
| key: "bind", | ||
| value: function bind() { | ||
| var _this2 = this; | ||
| utils.compose(events$1.bindEvent(this.instance.eventName('click'), ".".concat(this.classes.PLAY), function (event) { | ||
| event.preventDefault(); | ||
| event.stopPropagation(); | ||
| _this2.autoPlay(); | ||
| }), events$1.bindEvent(this.instance.eventName('click'), ".".concat(this.classes.FULLSCREEN), function (event) { | ||
| event.preventDefault(); | ||
| event.stopPropagation(); | ||
| if (_this2.fullscreen.isFullscreen()) { | ||
| _this2.mini(); | ||
| } else { | ||
| _this2.full(); | ||
| } | ||
| }), events$1.bindEvent(this.instance.eventName('click'), ".".concat(this.classes.DOWNLOAD), function (event) { | ||
| event.preventDefault(); | ||
| event.stopPropagation(); | ||
| var url = _this2.instance.data[_this2.instance.slider.plugin.current].orig; | ||
| var filename = url.substr(url.lastIndexOf('/') + 1); | ||
| _this2.down(url, filename); | ||
| }), events$1.bindEvent(this.instance.eventName('click'), ".".concat(this.classes.CLOSE), function (event) { | ||
| event.preventDefault(); | ||
| event.stopPropagation(); | ||
| _this2.off(); | ||
| }))(this.element); | ||
| } | ||
| }, { | ||
| key: "autoPlay", | ||
| value: function autoPlay() { | ||
| var _this3 = this; | ||
| if (this.instance.is('play')) { | ||
| this.stop(); | ||
| } else { | ||
| this.start(); | ||
| events$1.bindEventOnce(this.instance.eventName('mousedown'), function (event) { | ||
| if (dom.closest(".".concat(_this3.classes.PLAY), event.target) === _this3.play) { | ||
| return; | ||
| } | ||
| _this3.stop(); | ||
| }, this.instance.container); | ||
| } | ||
| } | ||
| }, { | ||
| key: "start", | ||
| value: function start() { | ||
| this.instance.slider.plugin.intervalToggle(true); | ||
| classes$1.addClass(this.classes.AUTOPLAY, this.instance.container); | ||
| this.instance.enter('play'); | ||
| } | ||
| }, { | ||
| key: "stop", | ||
| value: function stop() { | ||
| this.instance.slider.plugin.intervalToggle(false); | ||
| classes$1.removeClass(this.classes.AUTOPLAY, this.instance.container); | ||
| this.instance.leave('play'); | ||
| } | ||
| }, { | ||
| key: "off", | ||
| value: function off() { | ||
| this.instance.hide(); | ||
| if (this.fullscreen.isFullscreen()) { | ||
| this.mini(); | ||
| } | ||
| } | ||
| }, { | ||
| key: "full", | ||
| value: function full() { | ||
| this.fullscreen.request(); | ||
| classes$1.addClass(this.classes.ISFULL, this.instance.container); | ||
| } | ||
| }, { | ||
| key: "mini", | ||
| value: function mini() { | ||
| this.fullscreen.exit(); | ||
| classes$1.removeClass(this.classes.ISFULL, this.instance.container); | ||
| } | ||
| }, { | ||
| key: "getBlob", | ||
| value: function getBlob(url) { | ||
| return new Promise(function (resolve) { | ||
| var xhr = new XMLHttpRequest(); | ||
| xhr.open('GET', url, true); | ||
| xhr.responseType = 'blob'; | ||
| xhr.onload = function () { | ||
| if (xhr.status === 200) { | ||
| resolve(xhr.response); | ||
| } | ||
| }; | ||
| xhr.send(); | ||
| }); | ||
| } | ||
| }, { | ||
| key: "saveAs", | ||
| value: function saveAs(blob, filename) { | ||
| if (window.navigator.msSaveOrOpenBlob) { | ||
| navigator.msSaveBlob(blob, filename); | ||
| } else { | ||
| var link = document.createElement('a'); | ||
| var body = document.querySelector('body'); | ||
| link.href = window.URL.createObjectURL(blob); | ||
| link.download = filename; // fix Firefox | ||
| link.style.display = 'none'; | ||
| body.appendChild(link); | ||
| link.click(); | ||
| body.removeChild(link); | ||
| window.URL.revokeObjectURL(link.href); | ||
| } | ||
| } | ||
| }, { | ||
| key: "down", | ||
| value: function down(url, filename) { | ||
| var _this4 = this; | ||
| this.getBlob(url).then(function (blob) { | ||
| _this4.saveAs(blob, filename); | ||
| }); | ||
| } | ||
| }, { | ||
| key: "unbind", | ||
| value: function unbind() { | ||
| events$1.removeEvent(this.instance.eventName('click'), this.close); | ||
| } | ||
| }, { | ||
| key: "setCounter", | ||
| value: function setCounter(index) { | ||
| if (!this.instance.options.counter) { | ||
| return; | ||
| } | ||
| this.counter.innerHTML = "".concat(index + 1, " / ").concat(this.instance.length); | ||
| } | ||
| }]); | ||
| return Topbar; | ||
| }(); | ||
| var Caption = | ||
| /*#__PURE__*/ | ||
| function () { | ||
| function Caption(instance) { | ||
| _classCallCheck(this, Caption); | ||
| this.instance = instance; | ||
| this.initialize(); | ||
| } | ||
| _createClass(Caption, [{ | ||
| key: "initialize", | ||
| value: function initialize() { | ||
| if (!this.instance.options.caption) { | ||
| return; | ||
| } | ||
| this.element = this.instance.getElement('caption'); | ||
| this.setInfo(this.instance.data[this.instance.active]); | ||
| dom.append(this.element, this.instance.footer); | ||
| } | ||
| }, { | ||
| key: "setInfo", | ||
| value: function setInfo(data) { | ||
| if (!this.instance.options.caption) { | ||
| return; | ||
| } | ||
| var test = this.instance.getElement('title', data); | ||
| this.element.innerHTML = ''; | ||
| dom.append(test, this.element); | ||
| } | ||
| }]); | ||
| return Caption; | ||
| }(); | ||
| var Slider = | ||
| /*#__PURE__*/ | ||
| function () { | ||
| function Slider(instance) { | ||
| _classCallCheck(this, Slider); | ||
| this.instance = instance; | ||
| this.initialize(); | ||
| } | ||
| _createClass(Slider, [{ | ||
| key: "initialize", | ||
| value: function initialize() { | ||
| var _this = this; | ||
| this.element = this.instance.getElement('slider'); | ||
| dom.append(this.element, this.instance.container); | ||
| setTimeout(function () { | ||
| _this.initSlider(); | ||
| }, 0); | ||
| } | ||
| }, { | ||
| key: "initSlider", | ||
| value: function initSlider() { | ||
| var instance = this.instance; | ||
| this.plugin = SLIDER.of(this.element, utils.deepMerge(instance.options, { | ||
| data: instance.processData(instance.data, 'orig'), | ||
| current: instance.active, | ||
| onChange: function onChange() { | ||
| instance.topbar.setCounter(this.current); | ||
| instance.caption.setInfo(instance.data[this.current]); | ||
| if (instance.options.thumbs) { | ||
| instance.thumbs.plugin.go(this.current, false); | ||
| } | ||
| } | ||
| })); | ||
| } | ||
| }]); | ||
| return Slider; | ||
| }(); | ||
| var Thumbs = | ||
| /*#__PURE__*/ | ||
| function () { | ||
| function Thumbs(instance) { | ||
| _classCallCheck(this, Thumbs); | ||
| this.instance = instance; | ||
| this.initialize(); | ||
| } | ||
| _createClass(Thumbs, [{ | ||
| key: "initialize", | ||
| value: function initialize() { | ||
| var _this = this; | ||
| if (!this.instance.options.thumbs) { | ||
| return; | ||
| } | ||
| this.element = this.instance.getElement('thumbs'); | ||
| dom.append(this.element, this.instance.footer); | ||
| setTimeout(function () { | ||
| _this.initThumbs(); | ||
| }, 0); | ||
| } | ||
| }, { | ||
| key: "initThumbs", | ||
| value: function initThumbs() { | ||
| var instance = this.instance; | ||
| this.plugin = THUMBS.of(this.element, utils.deepMerge(instance.options, { | ||
| data: instance.processData(instance.data, 'thumb'), | ||
| current: instance.active, | ||
| mode: 'center', | ||
| onChange: function onChange() { | ||
| instance.slider.plugin.go(this.current, false); | ||
| instance.topbar.setCounter(this.current); | ||
| instance.caption.setInfo(instance.data[this.current]); | ||
| } | ||
| })); | ||
| } | ||
| }]); | ||
| return Thumbs; | ||
| }(); | ||
| var _dec, _dec2, _dec3, _dec4, _dec5, _dec6, _class; | ||
| var Lightbox = (_dec = decorator.themeable(), _dec2 = decorator.styleable(classes), _dec3 = decorator.eventable(events), _dec4 = decorator.stateable(), _dec5 = decorator.optionable(defaults, true), _dec6 = decorator.register(namespace, { | ||
| methods: methods, | ||
| dependencies: dependencies | ||
| }), _dec(_class = _dec2(_class = _dec3(_class = _dec4(_class = _dec5(_class = _dec6(_class = | ||
| /*#__PURE__*/ | ||
| function (_Component) { | ||
| _inherits(Lightbox, _Component); | ||
| function Lightbox(element) { | ||
| var _this; | ||
| var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; | ||
| _classCallCheck(this, Lightbox); | ||
| _this = _possibleConstructorReturn(this, _getPrototypeOf(Lightbox).call(this, element)); | ||
| _this.setupOptions(options); | ||
| _this.setupClasses(); | ||
| _this.setupStates(); | ||
| _this.initialize(); | ||
| return _this; | ||
| } | ||
| _createClass(Lightbox, [{ | ||
| key: "initialize", | ||
| value: function initialize() { | ||
| if (!this.options.data || this.options.data.length < 0) { | ||
| return; | ||
| } | ||
| classes$1.addClass(this.classes.NAMESPACE, this.element); | ||
| if (this.options.theme) { | ||
| classes$1.addClass(this.getThemeClass(), this.element); | ||
| } | ||
| this.data = this.options.data === 'html' ? this.parseHtml() : this.options.data; | ||
| this.length = this.data.length; | ||
| this.bind(); | ||
| if (this.options.breakpoint) { | ||
| this.initBreakpoints(); | ||
| } | ||
| if (this.options.keyboard) { | ||
| this.keyboard = Keyboard(); | ||
| } | ||
| this.enter('initialized'); | ||
| this.trigger(events.READY); | ||
| } | ||
| }, { | ||
| key: "initBreakpoints", | ||
| value: function initBreakpoints() { | ||
| Breakpoints.init(); | ||
| if (Breakpoints.all().includes(this.options.breakpoint)) { | ||
| var breakpoint = this.options.breakpoint; | ||
| var that = this; | ||
| if (Breakpoints.is("".concat(breakpoint, "-"))) { | ||
| classes$1.addClass(this.classes.RESPONSIVE, this.element); | ||
| } | ||
| Breakpoints.to(breakpoint, { | ||
| enter: function enter() { | ||
| classes$1.addClass(that.classes.RESPONSIVE, that.element); | ||
| }, | ||
| leave: function leave() { | ||
| classes$1.removeClass(that.classes.RESPONSIVE, that.element); | ||
| } | ||
| }); | ||
| } | ||
| } | ||
| }, { | ||
| key: "bind", | ||
| value: function bind() { | ||
| var that = this; | ||
| events$1.bindEvent(this.eventName('click'), this.options.delegate, function (event) { | ||
| event.preventDefault(); | ||
| that.active = Number(this.dataset.index); | ||
| that.open(); | ||
| }, this.element); | ||
| } | ||
| }, { | ||
| key: "unbind", | ||
| value: function unbind() { | ||
| events$1.removeEvent(this.eventName('click'), this.element); | ||
| } | ||
| }, { | ||
| key: "bindConatiner", | ||
| value: function bindConatiner() { | ||
| var _this2 = this; | ||
| events$1.bindEvent(this.eventName('click'), function (event) { | ||
| event.preventDefault(); | ||
| event.stopPropagation(); | ||
| var target = event.target; | ||
| if (classes$1.hasClass(_this2.slider.plugin.classes.CARD, target) || classes$1.hasClass(_this2.classes.TOPBAR, target)) { | ||
| _this2.hide(); | ||
| } | ||
| }, this.container); | ||
| if (this.keyboard) { | ||
| this.keyboard.on('down', 'esc', function () { | ||
| _this2.hide(); | ||
| }); | ||
| this.keyboard.on('down', 'left', function () { | ||
| _this2.slider.plugin.prev(); | ||
| }); | ||
| this.keyboard.on('down', 'right', function () { | ||
| _this2.slider.plugin.next(); | ||
| }); | ||
| } | ||
| } | ||
| }, { | ||
| key: "unbindConatiner", | ||
| value: function unbindConatiner() { | ||
| events$1.removeEvent(this.eventName('click'), this.container); | ||
| if (this.keyboard) { | ||
| this.keyboard.off('down', 'esc,left, right'); | ||
| } | ||
| } | ||
| }, { | ||
| key: "open", | ||
| value: function open() { | ||
| if (this.is('generate')) { | ||
| this.initShow(this.active); | ||
| } else { | ||
| this.generate(); | ||
| } | ||
| this.show(); | ||
| } | ||
| }, { | ||
| key: "show", | ||
| value: function show() { | ||
| classes$1.addClass(this.classes.SHOW, this.container); | ||
| this.bindConatiner(); | ||
| this.enter('show'); | ||
| } | ||
| }, { | ||
| key: "hide", | ||
| value: function hide() { | ||
| classes$1.removeClass(this.classes.SHOW, this.container); | ||
| this.unbindConatiner(); | ||
| this.topbar.mini(); | ||
| this.leave('show'); | ||
| } | ||
| }, { | ||
| key: "initShow", | ||
| value: function initShow(index) { | ||
| this.slider.plugin.reset(index); | ||
| this.topbar.setCounter(index); | ||
| this.caption.setInfo(this.data[index]); | ||
| if (this.options.thumbs) { | ||
| this.thumbs.plugin.go(index, false, false); | ||
| } | ||
| } | ||
| }, { | ||
| key: "generate", | ||
| value: function generate() { | ||
| this.container = this.getElement('container'); | ||
| this.footer = this.getElement('footer'); | ||
| this.overlay = new Overlay(this); | ||
| this.topbar = new Topbar(this); | ||
| this.slider = new Slider(this); | ||
| dom.append(this.footer, this.container); | ||
| this.caption = new Caption(this); | ||
| this.thumbs = new Thumbs(this); | ||
| if (this.options.theme) { | ||
| classes$1.addClass(this.getThemeClass(), this.container); | ||
| } | ||
| dom.append(this.container, document.body); | ||
| this.enter('generate'); | ||
| } | ||
| }, { | ||
| key: "getElement", | ||
| value: function getElement(type) { | ||
| var template = this.options.templates[type]; | ||
| var html = ''; | ||
| for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) { | ||
| args[_key - 1] = arguments[_key]; | ||
| } | ||
| html = templateEngine.render(template.call(this), utils.deepMerge.apply(void 0, [{ | ||
| classes: this.classes | ||
| }].concat(args))); | ||
| return dom.parseHTML(html); | ||
| } | ||
| }, { | ||
| key: "processData", | ||
| value: function processData(data, key) { | ||
| var _data = []; | ||
| data.forEach(function (item) { | ||
| var info = { | ||
| src: item[key] | ||
| }; | ||
| info = utils.deepMerge(info, item); | ||
| _data.push(info); | ||
| }); | ||
| return _data; | ||
| } | ||
| }, { | ||
| key: "parseHtml", | ||
| value: function parseHtml() { | ||
| var data = []; | ||
| var items = this.element.querySelectorAll(this.options.delegate); | ||
| items.forEach(function (item, index) { | ||
| item.dataset.index = index; | ||
| var info = { | ||
| orig: item.getAttribute('href'), | ||
| thumb: item.children[0].getAttribute('src') | ||
| }; | ||
| var _data = Object.entries(item.dataset).reduce(function (result, _ref) { | ||
| var _ref2 = _slicedToArray(_ref, 2), | ||
| k = _ref2[0], | ||
| v = _ref2[1]; | ||
| try { | ||
| var content = JSON.parse("{\"data\": ".concat(v.replace(/'/g, '"'), "}")).data; | ||
| return _objectSpread({}, result, _defineProperty({}, k, content)); | ||
| } catch (err) { | ||
| return _objectSpread({}, result, _defineProperty({}, k, v)); | ||
| } | ||
| }, {}); | ||
| info = utils.deepMerge(info, _data); | ||
| data.push(info); | ||
| }); | ||
| return data; | ||
| } | ||
| }, { | ||
| key: "enable", | ||
| value: function enable() { | ||
| this.slider.enable(); | ||
| this.thumbs.enable(); | ||
| } | ||
| }, { | ||
| key: "disable", | ||
| value: function disable() { | ||
| this.slider.disable(); | ||
| this.thumbs.disable(); | ||
| } | ||
| }, { | ||
| key: "destroy", | ||
| value: function destroy() { | ||
| this.slider.destroy(); | ||
| this.thumbs.destroy(); | ||
| } | ||
| }]); | ||
| return Lightbox; | ||
| }(Component)) || _class) || _class) || _class) || _class) || _class) || _class); | ||
| return Lightbox; | ||
| })); |
| /*! | ||
| * @pluginjs/lightbox v0.7.17 (https://pluginjs.com) | ||
| * @pluginjs/lightbox v0.7.18 (https://pluginjs.com) | ||
| * Copyright 2019 Creation Studio Limited | ||
| * Released under the GPL-3.0 License. | ||
| */ | ||
| undefined | ||
| !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("@pluginjs/component"),require("@pluginjs/template"),require("@pluginjs/classes"),require("@pluginjs/dom"),require("@pluginjs/events"),require("@pluginjs/utils"),require("@pluginjs/decorator"),require("@pluginjs/fullscreen"),require("@pluginjs/slider"),require("@pluginjs/thumbnails"),require("@pluginjs/keyboard"),require("@pluginjs/breakpoints")):"function"==typeof define&&define.amd?define(["@pluginjs/component","@pluginjs/template","@pluginjs/classes","@pluginjs/dom","@pluginjs/events","@pluginjs/utils","@pluginjs/decorator","@pluginjs/fullscreen","@pluginjs/slider","@pluginjs/thumbnails","@pluginjs/keyboard","@pluginjs/breakpoints"],t):(e=e||self)["@pluginjs/lightbox"]=t(e["@pluginjs/component"],e["@pluginjs/template"],e["@pluginjs/classes"],e["@pluginjs/dom"],e["@pluginjs/events"],e["@pluginjs/utils"],e["@pluginjs/decorator"],e["@pluginjs/fullscreen"],e["@pluginjs/slider"],e["@pluginjs/thumbnails"],e["@pluginjs/keyboard"],e["@pluginjs/breakpoints"])}(this,function(e,t,n,i,s,a,o,r,l,c,u,h){"use strict";function p(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function d(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}function f(e,t,n){return t&&d(e.prototype,t),n&&d(e,n),e}function v(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function m(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},i=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(i=i.concat(Object.getOwnPropertySymbols(n).filter(function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable}))),i.forEach(function(t){v(e,t,n[t])})}return e}function b(e){return(b=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function g(e,t){return(g=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function y(e,t){return!t||"object"!=typeof t&&"function"!=typeof t?function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e):t}function E(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=[],i=!0,s=!1,a=void 0;try{for(var o,r=e[Symbol.iterator]();!(i=(o=r.next()).done)&&(n.push(o.value),!t||n.length!==t);i=!0);}catch(e){s=!0,a=e}finally{try{i||null==r.return||r.return()}finally{if(s)throw a}}return n}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}()}e=e&&e.hasOwnProperty("default")?e.default:e,t=t&&t.hasOwnProperty("default")?t.default:t,r=r&&r.hasOwnProperty("default")?r.default:r,l=l&&l.hasOwnProperty("default")?l.default:l,c=c&&c.hasOwnProperty("default")?c.default:c,u=u&&u.hasOwnProperty("default")?u.default:u,h=h&&h.hasOwnProperty("default")?h.default:h;var O,k={READY:"ready",ENABLE:"enable",DISABLE:"disable",DESTROY:"destroy"},j={NAMESPACE:"pj-".concat("lightbox"),CONTAINER:"{namespace}-container",OVERLAY:"{namespace}-overlay",TOPBAR:"{namespace}-topbar",COUNTER:"{namespace}-counter",PLAY:"{namespace}-play",START:"{namespace}-start",STOP:"{namespace}-stop",FULLSCREEN:"{namespace}-fullscreen",ISFULL:"{namespace}-isfull",FULL:"{namespace}-full",MINI:"{namespace}-mini",DOWNLOAD:"{namespace}-download",CLOSE:"{namespace}-close",FOOTER:"{namespace}-footer",CAPTION:"{namespace}-caption",TITLE:"{namespace}-title",SLIDER:"{namespace}-slider",THUMBS:"{namespace}-thumbs",VERTICAL:"{namespace}-vertical",AUTOPLAY:"{namespace}-autoplay",SHOW:"{namespace}-show",ACTIVE:"{namespace}-active",DISABLED:"{namespace}-disabled",RESPONSIVE:"{namespace}-responsive"},w=function(){function e(t){p(this,e),this.instance=t,this.initialize()}return f(e,[{key:"initialize",value:function(){this.element=this.instance.getElement("overlay"),i.append(this.element,this.instance.container),this.bind()}},{key:"bind",value:function(){var e=this;s.bindEvent(this.instance.eventName("click"),function(t){t.preventDefault(),e.instance.hide()},this.element)}},{key:"unbind",value:function(){s.removeEvent(this.instance.eventName("click"),this.element)}}]),e}(),C=function(){function e(t){p(this,e),this.instance=t,this.classes=t.classes,this.initialize()}return f(e,[{key:"initialize",value:function(){var e=this;this.instance.options.counter&&this.instance.options.actions.unshift("counter"),this.element=this.instance.getElement("topbar"),this.instance.options.actions.forEach(function(t){e[t]=e.instance.getElement(t),i.append(e[t],e.element)}),this.setCounter(this.instance.active),i.append(this.element,this.instance.container),this.fullscreen=new r,this.bind()}},{key:"bind",value:function(){var e=this;a.compose(s.bindEvent(this.instance.eventName("click"),".".concat(this.classes.PLAY),function(t){t.preventDefault(),t.stopPropagation(),e.autoPlay()}),s.bindEvent(this.instance.eventName("click"),".".concat(this.classes.FULLSCREEN),function(t){t.preventDefault(),t.stopPropagation(),e.fullscreen.isFullscreen()?e.mini():e.full()}),s.bindEvent(this.instance.eventName("click"),".".concat(this.classes.DOWNLOAD),function(t){t.preventDefault(),t.stopPropagation();var n=e.instance.data[e.instance.slider.plugin.current].orig,i=n.substr(n.lastIndexOf("/")+1);e.down(n,i)}),s.bindEvent(this.instance.eventName("click"),".".concat(this.classes.CLOSE),function(t){t.preventDefault(),t.stopPropagation(),e.off()}))(this.element)}},{key:"autoPlay",value:function(){var e=this;this.instance.is("play")?this.stop():(this.start(),s.bindEventOnce(this.instance.eventName("mousedown"),function(t){i.closest(".".concat(e.classes.PLAY),t.target)!==e.play&&e.stop()},this.instance.container))}},{key:"start",value:function(){this.instance.slider.plugin.intervalToggle(!0),n.addClass(this.classes.AUTOPLAY,this.instance.container),this.instance.enter("play")}},{key:"stop",value:function(){this.instance.slider.plugin.intervalToggle(!1),n.removeClass(this.classes.AUTOPLAY,this.instance.container),this.instance.leave("play")}},{key:"off",value:function(){this.instance.hide(),this.fullscreen.isFullscreen()&&this.mini()}},{key:"full",value:function(){this.fullscreen.request(),n.addClass(this.classes.ISFULL,this.instance.container)}},{key:"mini",value:function(){this.fullscreen.exit(),n.removeClass(this.classes.ISFULL,this.instance.container)}},{key:"getBlob",value:function(e){return new Promise(function(t){var n=new XMLHttpRequest;n.open("GET",e,!0),n.responseType="blob",n.onload=function(){200===n.status&&t(n.response)},n.send()})}},{key:"saveAs",value:function(e,t){if(window.navigator.msSaveOrOpenBlob)navigator.msSaveBlob(e,t);else{var n=document.createElement("a"),i=document.querySelector("body");n.href=window.URL.createObjectURL(e),n.download=t,n.style.display="none",i.appendChild(n),n.click(),i.removeChild(n),window.URL.revokeObjectURL(n.href)}}},{key:"down",value:function(e,t){var n=this;this.getBlob(e).then(function(e){n.saveAs(e,t)})}},{key:"unbind",value:function(){s.removeEvent(this.instance.eventName("click"),this.close)}},{key:"setCounter",value:function(e){this.instance.options.counter&&(this.counter.innerHTML="".concat(e+1," / ").concat(this.instance.length))}}]),e}(),T=function(){function e(t){p(this,e),this.instance=t,this.initialize()}return f(e,[{key:"initialize",value:function(){this.instance.options.caption&&(this.element=this.instance.getElement("caption"),this.setInfo(this.instance.data[this.instance.active]),i.append(this.element,this.instance.footer))}},{key:"setInfo",value:function(e){if(this.instance.options.caption){var t=this.instance.getElement("title",e);this.element.innerHTML="",i.append(t,this.element)}}}]),e}(),A=function(){function e(t){p(this,e),this.instance=t,this.initialize()}return f(e,[{key:"initialize",value:function(){var e=this;this.element=this.instance.getElement("slider"),i.append(this.element,this.instance.container),setTimeout(function(){e.initSlider()},0)}},{key:"initSlider",value:function(){var e=this.instance;this.plugin=l.of(this.element,a.deepMerge(e.options,{data:e.processData(e.data,"orig"),current:e.active,onChange:function(){e.topbar.setCounter(this.current),e.caption.setInfo(e.data[this.current]),e.options.thumbs&&e.thumbs.plugin.go(this.current,!1)}}))}}]),e}(),N=function(){function e(t){p(this,e),this.instance=t,this.initialize()}return f(e,[{key:"initialize",value:function(){var e=this;this.instance.options.thumbs&&(this.element=this.instance.getElement("thumbs"),i.append(this.element,this.instance.footer),setTimeout(function(){e.initThumbs()},0))}},{key:"initThumbs",value:function(){var e=this.instance;this.plugin=c.of(this.element,a.deepMerge(e.options,{data:e.processData(e.data,"thumb"),current:e.active,mode:"center",onChange:function(){e.slider.plugin.go(this.current,!1),e.topbar.setCounter(this.current),e.caption.setInfo(e.data[this.current])}}))}}]),e}();return o.themeable()(O=o.styleable(j)(O=o.eventable(k)(O=o.stateable()(O=o.optionable({templates:{container:function(){return'<div class="{classes.CONTAINER}"></div>'},overlay:function(){return'<div class="{classes.OVERLAY}"></div>'},topbar:function(){return'<div class="{classes.TOPBAR}"></div>'},counter:function(){return'<div class="{classes.COUNTER}"></div>'},play:function(){return'<span class="{classes.PLAY}"><i class="{classes.START} pj-icon pj-icon-caret-right"></i><i class="{classes.STOP} pj-icon pj-icon-pause"></i></span>'},fullScreen:function(){return'<span class="{classes.FULLSCREEN}"><i class="{classes.FULL} pj-icon pj-icon-maximize"></i><i class="{classes.MINI} pj-icon pj-icon-minimize"></i></span>'},download:function(){return'<span class="{classes.DOWNLOAD}"><i class="pj-icon pj-icon-download"></i></span>'},close:function(){return'<span class="{classes.CLOSE}"><i class="pj-icon pj-icon-remove"></i></span>'},footer:function(){return'<div class="{classes.FOOTER}"></div>'},caption:function(){return'<div class="{classes.CAPTION}"></div>'},title:function(){return'<div class="{classes.TITLE}">{title}</div>'},slider:function(){return'<div class="{classes.SLIDER}"></div>'},box:function(){return'<div class="{classes.BOX}"></div>'},card:function(){return'<div class="{classes.CARD}"><div class="{classes.LOADER}"></div></div>'},image:function(){return'<img class="{classes.IMAGE} {classes.CONTENT}">'},video:function(){return'<div class="{classes.VIDEOWRAP} {classes.CONTENT}"><img class="{classes.IMAGE}"><div class="{classes.VIDEO}"></div></div>'},iframe:function(){return'<iframe class="{classes.IFRAME} {classes.CONTENT}" src="//about:blank" frameborder="0" allowfullscreen></iframe>'},map:function(){return'<iframe class="{classes.MAP} {classes.CONTENT}" src="//about:blank" frameborder="0" allowfullscreen></iframe>'},inline:function(){return'<div class="{classes.INLINE} {classes.CONTENT}"></div>'},thumbs:function(){return'<div class="{classes.THUMBS}"></div>'},inner:function(){return'<div class="{classes.INNER}"></div>'}},theme:null,data:"html",delegate:"a",actions:["play","fullScreen","download","close"],overlayClose:!0,counter:!0,arrows:{},swipe:!0,caption:!0,thumbs:!0,vertical:!1,keyboard:!0,duration:300,playCycle:4e3,breakpoint:null,loader:{theme:"ring",size:"lg"}},!0)(O=o.register("lightbox",{methods:["enable","disable","destroy","show","hide"],dependencies:["slider","thumbnails","arrows","anime","hammer"]})(O=function(o){function r(e){var t,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return p(this,r),(t=y(this,b(r).call(this,e))).setupOptions(n),t.setupClasses(),t.setupStates(),t.initialize(),t}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&g(e,t)}(r,e),f(r,[{key:"initialize",value:function(){!this.options.data||this.options.data.length<0||(n.addClass(this.classes.NAMESPACE,this.element),this.options.theme&&n.addClass(this.getThemeClass(),this.element),this.data="html"===this.options.data?this.parseHtml():this.options.data,this.length=this.data.length,this.bind(),this.options.breakpoint&&this.initBreakpoints(),this.options.keyboard&&(this.keyboard=u()),this.enter("initialized"),this.trigger(k.READY))}},{key:"initBreakpoints",value:function(){if(h.init(),h.all().includes(this.options.breakpoint)){var e=this.options.breakpoint,t=this;h.is("".concat(e,"-"))&&n.addClass(this.classes.RESPONSIVE,this.element),h.to(e,{enter:function(){n.addClass(t.classes.RESPONSIVE,t.element)},leave:function(){n.removeClass(t.classes.RESPONSIVE,t.element)}})}}},{key:"bind",value:function(){var e=this;s.bindEvent(this.eventName("click"),this.options.delegate,function(t){t.preventDefault(),e.active=Number(this.dataset.index),e.open()},this.element)}},{key:"unbind",value:function(){s.removeEvent(this.eventName("click"),this.element)}},{key:"bindConatiner",value:function(){var e=this;s.bindEvent(this.eventName("click"),function(t){t.preventDefault(),t.stopPropagation();var i=t.target;(n.hasClass(e.slider.plugin.classes.CARD,i)||n.hasClass(e.classes.TOPBAR,i))&&e.hide()},this.container),this.keyboard&&(this.keyboard.on("down","esc",function(){e.hide()}),this.keyboard.on("down","left",function(){e.slider.plugin.prev()}),this.keyboard.on("down","right",function(){e.slider.plugin.next()}))}},{key:"unbindConatiner",value:function(){s.removeEvent(this.eventName("click"),this.container),this.keyboard&&this.keyboard.off("down","esc,left, right")}},{key:"open",value:function(){this.is("generate")?this.initShow(this.active):this.generate(),this.show()}},{key:"show",value:function(){n.addClass(this.classes.SHOW,this.container),this.bindConatiner(),this.enter("show")}},{key:"hide",value:function(){n.removeClass(this.classes.SHOW,this.container),this.unbindConatiner(),this.topbar.mini(),this.leave("show")}},{key:"initShow",value:function(e){this.slider.plugin.reset(e),this.topbar.setCounter(e),this.caption.setInfo(this.data[e]),this.options.thumbs&&this.thumbs.plugin.go(e,!1,!1)}},{key:"generate",value:function(){this.container=this.getElement("container"),this.footer=this.getElement("footer"),this.overlay=new w(this),this.topbar=new C(this),this.slider=new A(this),i.append(this.footer,this.container),this.caption=new T(this),this.thumbs=new N(this),this.options.theme&&n.addClass(this.getThemeClass(),this.container),i.append(this.container,document.body),this.enter("generate")}},{key:"getElement",value:function(e){for(var n,s=this.options.templates[e],o=arguments.length,r=new Array(o>1?o-1:0),l=1;l<o;l++)r[l-1]=arguments[l];return n=t.render(s.call(this),a.deepMerge.apply(void 0,[{classes:this.classes}].concat(r))),i.parseHTML(n)}},{key:"processData",value:function(e,t){var n=[];return e.forEach(function(e){var i={src:e[t]};i=a.deepMerge(i,e),n.push(i)}),n}},{key:"parseHtml",value:function(){var e=[];return this.element.querySelectorAll(this.options.delegate).forEach(function(t,n){t.dataset.index=n;var i={orig:t.getAttribute("href"),thumb:t.children[0].getAttribute("src")},s=Object.entries(t.dataset).reduce(function(e,t){var n=E(t,2),i=n[0],s=n[1];try{return m({},e,v({},i,JSON.parse('{"data": '.concat(s.replace(/'/g,'"'),"}")).data))}catch(t){return m({},e,v({},i,s))}},{});i=a.deepMerge(i,s),e.push(i)}),e}},{key:"enable",value:function(){this.slider.enable(),this.thumbs.enable()}},{key:"disable",value:function(){this.slider.disable(),this.thumbs.disable()}},{key:"destroy",value:function(){this.slider.destroy(),this.thumbs.destroy()}}]),r}())||O)||O)||O)||O)||O)||O}); |
@@ -14,3 +14,3 @@ { | ||
| }, | ||
| "version": "0.7.17", | ||
| "version": "0.7.18", | ||
| "category": "media", | ||
@@ -41,23 +41,23 @@ "main": "dist/lightbox.common.js", | ||
| "dependencies": { | ||
| "@pluginjs/breakpoints": "^0.7.9", | ||
| "@pluginjs/classes": "^0.7.9", | ||
| "@pluginjs/component": "^0.7.8", | ||
| "@pluginjs/decorator": "^0.7.9", | ||
| "@pluginjs/dom": "^0.7.9", | ||
| "@pluginjs/events": "^0.7.9", | ||
| "@pluginjs/factory": "^0.7.9", | ||
| "@pluginjs/fullscreen": "^0.7.9", | ||
| "@pluginjs/is": "^0.7.8", | ||
| "@pluginjs/keyboard": "^0.7.9", | ||
| "@pluginjs/slider": "^0.7.16", | ||
| "@pluginjs/styled": "^0.7.9", | ||
| "@pluginjs/template": "^0.7.9", | ||
| "@pluginjs/thumbnails": "^0.7.13", | ||
| "@pluginjs/utils": "^0.7.9", | ||
| "@pluginjs/video": "^0.7.13" | ||
| "@pluginjs/breakpoints": "^0.7.10", | ||
| "@pluginjs/classes": "^0.7.10", | ||
| "@pluginjs/component": "^0.7.9", | ||
| "@pluginjs/decorator": "^0.7.10", | ||
| "@pluginjs/dom": "^0.7.10", | ||
| "@pluginjs/events": "^0.7.10", | ||
| "@pluginjs/factory": "^0.7.10", | ||
| "@pluginjs/fullscreen": "^0.7.10", | ||
| "@pluginjs/is": "^0.7.9", | ||
| "@pluginjs/keyboard": "^0.7.10", | ||
| "@pluginjs/slider": "^0.7.17", | ||
| "@pluginjs/styled": "^0.7.10", | ||
| "@pluginjs/template": "^0.7.10", | ||
| "@pluginjs/thumbnails": "^0.7.14", | ||
| "@pluginjs/utils": "^0.7.10", | ||
| "@pluginjs/video": "^0.7.14" | ||
| }, | ||
| "devDependencies": { | ||
| "@babel/core": "^7.4.4", | ||
| "@pluginjs/browserslist-config": "^1.2.5", | ||
| "@pluginjs/cli": "^0.7.8", | ||
| "@pluginjs/browserslist-config": "^1.2.6", | ||
| "@pluginjs/cli": "^0.7.9", | ||
| "babel-jest": "*", | ||
@@ -87,3 +87,4 @@ "jest": "*", | ||
| "extends @pluginjs/browserslist-config" | ||
| ] | ||
| ], | ||
| "gitHead": "9ae759d6378f7bd8b952e5c1951dec91a101966e" | ||
| } |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Minified code
QualityThis package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.
Found 1 instance in 1 package
Fixed alerts
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by299.88%
141099
- Lines of code
- increased by277.61%
2968
Worsened metrics
- Number of low quality alerts
- increased by100%
4
Dependency changes
Updated@pluginjs/classes@^0.7.10
Updated@pluginjs/component@^0.7.9
Updated@pluginjs/decorator@^0.7.10
Updated@pluginjs/dom@^0.7.10
Updated@pluginjs/events@^0.7.10
Updated@pluginjs/factory@^0.7.10
Updated@pluginjs/fullscreen@^0.7.10
Updated@pluginjs/is@^0.7.9
Updated@pluginjs/keyboard@^0.7.10
Updated@pluginjs/slider@^0.7.17
Updated@pluginjs/styled@^0.7.10
Updated@pluginjs/template@^0.7.10
Updated@pluginjs/thumbnails@^0.7.14
Updated@pluginjs/utils@^0.7.10
Updated@pluginjs/video@^0.7.14