From 60d6c5f3e46b887806e252d5dea1f04715a81e0d Mon Sep 17 00:00:00 2001 From: Victor Häggqvist Date: Sat, 16 Jan 2016 22:00:36 +0100 Subject: write some docs and fixup demo --- demo/LightBox.ActivityIndicator.js | 106 +++++ demo/LightBox.Captions.js | 108 +++++ demo/LightBox.CloseButton.js | 113 +++++ demo/LightBox.Core.js | 857 +++++++++++++++++++++++++++++++++++++ demo/LightBox.Navigation.js | 138 ++++++ demo/LightBox.Overlay.js | 96 +++++ demo/index.html | 277 ++++++++---- 7 files changed, 1614 insertions(+), 81 deletions(-) create mode 100644 demo/LightBox.ActivityIndicator.js create mode 100644 demo/LightBox.Captions.js create mode 100644 demo/LightBox.CloseButton.js create mode 100644 demo/LightBox.Core.js create mode 100644 demo/LightBox.Navigation.js create mode 100644 demo/LightBox.Overlay.js (limited to 'demo') diff --git a/demo/LightBox.ActivityIndicator.js b/demo/LightBox.ActivityIndicator.js new file mode 100644 index 0000000..479372e --- /dev/null +++ b/demo/LightBox.ActivityIndicator.js @@ -0,0 +1,106 @@ +var LightBox = LightBox || {}; LightBox["ActivityIndicator"] = +/******/ (function(modules) { // webpackBootstrap +/******/ // The module cache +/******/ var installedModules = {}; + +/******/ // The require function +/******/ function __webpack_require__(moduleId) { + +/******/ // Check if module is in cache +/******/ if(installedModules[moduleId]) +/******/ return installedModules[moduleId].exports; + +/******/ // Create a new module (and put it into the cache) +/******/ var module = installedModules[moduleId] = { +/******/ exports: {}, +/******/ id: moduleId, +/******/ loaded: false +/******/ }; + +/******/ // Execute the module function +/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); + +/******/ // Flag the module as loaded +/******/ module.loaded = true; + +/******/ // Return the exports of the module +/******/ return module.exports; +/******/ } + + +/******/ // expose the modules object (__webpack_modules__) +/******/ __webpack_require__.m = modules; + +/******/ // expose the module cache +/******/ __webpack_require__.c = installedModules; + +/******/ // __webpack_public_path__ +/******/ __webpack_require__.p = ""; + +/******/ // Load entry module and return exports +/******/ return __webpack_require__(0); +/******/ }) +/************************************************************************/ +/******/ ([ +/* 0 */ +/***/ function(module, exports) { + + 'use strict'; + + var _createClass = 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); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); + + Object.defineProperty(exports, "__esModule", { + value: true + }); + + function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + + /** + * + * @author Victor Häggqvist + * @since 2016-01-14 + */ + + var ActivityIndicator = function () { + function ActivityIndicator() { + _classCallCheck(this, ActivityIndicator); + + this.element = document.createElement('div'); + this.element.id = 'imagelightbox-loading'; + this.element.appendChild(document.createElement('div')); + } + + /** + * + * @param {LightBox} lightbox + */ + + _createClass(ActivityIndicator, [{ + key: 'register', + value: function register(lightbox) { + lightbox.addOnLoadStartListener(this.activityIndicatorOn.bind(this)); + lightbox.addOnLoadEndListener(this.activityIndicatorOff.bind(this)); + lightbox.addOnEndListener(this.activityIndicatorOff.bind(this)); + } + }, { + key: 'activityIndicatorOn', + value: function activityIndicatorOn() { + document.body.appendChild(this.element); + } + }, { + key: 'activityIndicatorOff', + value: function activityIndicatorOff() { + try { + document.body.removeChild(this.element); + } catch (e) {} + } + }]); + + return ActivityIndicator; + }(); + + exports.default = ActivityIndicator; + module.exports = exports['default']; + +/***/ } +/******/ ]); \ No newline at end of file diff --git a/demo/LightBox.Captions.js b/demo/LightBox.Captions.js new file mode 100644 index 0000000..8207f97 --- /dev/null +++ b/demo/LightBox.Captions.js @@ -0,0 +1,108 @@ +var LightBox = LightBox || {}; LightBox["Captions"] = +/******/ (function(modules) { // webpackBootstrap +/******/ // The module cache +/******/ var installedModules = {}; + +/******/ // The require function +/******/ function __webpack_require__(moduleId) { + +/******/ // Check if module is in cache +/******/ if(installedModules[moduleId]) +/******/ return installedModules[moduleId].exports; + +/******/ // Create a new module (and put it into the cache) +/******/ var module = installedModules[moduleId] = { +/******/ exports: {}, +/******/ id: moduleId, +/******/ loaded: false +/******/ }; + +/******/ // Execute the module function +/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); + +/******/ // Flag the module as loaded +/******/ module.loaded = true; + +/******/ // Return the exports of the module +/******/ return module.exports; +/******/ } + + +/******/ // expose the modules object (__webpack_modules__) +/******/ __webpack_require__.m = modules; + +/******/ // expose the module cache +/******/ __webpack_require__.c = installedModules; + +/******/ // __webpack_public_path__ +/******/ __webpack_require__.p = ""; + +/******/ // Load entry module and return exports +/******/ return __webpack_require__(0); +/******/ }) +/************************************************************************/ +/******/ ([ +/* 0 */ +/***/ function(module, exports) { + + 'use strict'; + + var _createClass = 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); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); + + Object.defineProperty(exports, "__esModule", { + value: true + }); + + function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + + /** + * @author Victor Häggqvist + * @since 2016-01-16 + */ + + var Captions = function () { + function Captions() { + _classCallCheck(this, Captions); + + this.element = document.createElement('div'); + this.element.id = 'imagelightbox-caption'; + } + + _createClass(Captions, [{ + key: 'register', + value: function register(lightbox) { + this.lightbox = lightbox; + lightbox.addOnLoadStartListener(this.hideCaption.bind(this)); + lightbox.addOnLoadEndListener(this.showCaption.bind(this)); + lightbox.addOnEndListener(this.hideCaption.bind(this)); + } + }, { + key: 'showCaption', + value: function showCaption() { + var img = this.lightbox.target.querySelector('img'); + + if (img === null) return; + + var caption = img.getAttribute('alt'); + if (caption !== null && caption.length > 0) { + this.element.innerHTML = img.alt; + document.body.appendChild(this.element); + } + } + }, { + key: 'hideCaption', + value: function hideCaption() { + try { + document.body.removeChild(this.element); + } catch (e) {} + } + }]); + + return Captions; + }(); + + exports.default = Captions; + module.exports = exports['default']; + +/***/ } +/******/ ]); \ No newline at end of file diff --git a/demo/LightBox.CloseButton.js b/demo/LightBox.CloseButton.js new file mode 100644 index 0000000..287ad0e --- /dev/null +++ b/demo/LightBox.CloseButton.js @@ -0,0 +1,113 @@ +var LightBox = LightBox || {}; LightBox["CloseButton"] = +/******/ (function(modules) { // webpackBootstrap +/******/ // The module cache +/******/ var installedModules = {}; + +/******/ // The require function +/******/ function __webpack_require__(moduleId) { + +/******/ // Check if module is in cache +/******/ if(installedModules[moduleId]) +/******/ return installedModules[moduleId].exports; + +/******/ // Create a new module (and put it into the cache) +/******/ var module = installedModules[moduleId] = { +/******/ exports: {}, +/******/ id: moduleId, +/******/ loaded: false +/******/ }; + +/******/ // Execute the module function +/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); + +/******/ // Flag the module as loaded +/******/ module.loaded = true; + +/******/ // Return the exports of the module +/******/ return module.exports; +/******/ } + + +/******/ // expose the modules object (__webpack_modules__) +/******/ __webpack_require__.m = modules; + +/******/ // expose the module cache +/******/ __webpack_require__.c = installedModules; + +/******/ // __webpack_public_path__ +/******/ __webpack_require__.p = ""; + +/******/ // Load entry module and return exports +/******/ return __webpack_require__(0); +/******/ }) +/************************************************************************/ +/******/ ([ +/* 0 */ +/***/ function(module, exports) { + + 'use strict'; + + var _createClass = 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); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); + + Object.defineProperty(exports, "__esModule", { + value: true + }); + + function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + + /** + * @author Victor Häggqvist + * @since 2016-01-14 + */ + + var CloseButton = function () { + function CloseButton() { + var closeOnDocumentClick = arguments.length <= 0 || arguments[0] === undefined ? false : arguments[0]; + + _classCallCheck(this, CloseButton); + + this.closeOnDocumentClick = closeOnDocumentClick; + this.element = document.createElement('a'); + this.element.id = 'imagelightbox-close'; + this.element.innerHTML = 'Close'; + } + + _createClass(CloseButton, [{ + key: 'register', + value: function register(lightbox) { + this.lightbox = lightbox; + lightbox.addOnStartListener(this.showButton.bind(this)); + lightbox.addOnEndListener(this.hideButton.bind(this)); + } + }, { + key: 'showButton', + value: function showButton() { + var _this = this; + + this.lightbox.options.quitOnDocClick = this.closeOnDocumentClick; + ['click', 'touchend'].forEach(function (name) { + _this.element.addEventListener(name, _this.exitLightbox.bind(_this)); + }); + + document.body.appendChild(this.element); + } + }, { + key: 'hideButton', + value: function hideButton() { + document.body.removeChild(this.element); + } + }, { + key: 'exitLightbox', + value: function exitLightbox() { + this.lightbox.quitLightbox(); + } + }]); + + return CloseButton; + }(); + + exports.default = CloseButton; + module.exports = exports['default']; + +/***/ } +/******/ ]); \ No newline at end of file diff --git a/demo/LightBox.Core.js b/demo/LightBox.Core.js new file mode 100644 index 0000000..e5b8e25 --- /dev/null +++ b/demo/LightBox.Core.js @@ -0,0 +1,857 @@ +var LightBox = LightBox || {}; LightBox["Core"] = +/******/ (function(modules) { // webpackBootstrap +/******/ // The module cache +/******/ var installedModules = {}; + +/******/ // The require function +/******/ function __webpack_require__(moduleId) { + +/******/ // Check if module is in cache +/******/ if(installedModules[moduleId]) +/******/ return installedModules[moduleId].exports; + +/******/ // Create a new module (and put it into the cache) +/******/ var module = installedModules[moduleId] = { +/******/ exports: {}, +/******/ id: moduleId, +/******/ loaded: false +/******/ }; + +/******/ // Execute the module function +/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); + +/******/ // Flag the module as loaded +/******/ module.loaded = true; + +/******/ // Return the exports of the module +/******/ return module.exports; +/******/ } + + +/******/ // expose the modules object (__webpack_modules__) +/******/ __webpack_require__.m = modules; + +/******/ // expose the module cache +/******/ __webpack_require__.c = installedModules; + +/******/ // __webpack_public_path__ +/******/ __webpack_require__.p = ""; + +/******/ // Load entry module and return exports +/******/ return __webpack_require__(0); +/******/ }) +/************************************************************************/ +/******/ ([ +/* 0 */ +/***/ function(module, exports, __webpack_require__) { + + 'use strict'; + + var _createClass = 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); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); /** + * @author Victor Häggqvist + * @since 2016-01-12 + */ + + Object.defineProperty(exports, "__esModule", { + value: true + }); + + var _CSSUtil = __webpack_require__(1); + + var _LightDirection = __webpack_require__(2); + + function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + + var log = __webpack_require__(3); + + log.setDefaultLevel(log.levels.DEBUG); + + var LightBox = function () { + function LightBox(targetSelector) { + var options = arguments.length <= 1 || arguments[1] === undefined ? {} : arguments[1]; + + _classCallCheck(this, LightBox); + + log.info('LightBox'); + this.targets = document.querySelectorAll(targetSelector); + log.debug(this.targets); + + log.debug('HAS_TOUCH ' + LightBox.HAS_TOUCH); + var defaultOptions = { + allowedTypes: 'png|jpg|jpeg|gif', + restrictTypes: false, + selectorId: 'imagelightbox', + animationSpeed: 350, + preloadNext: true, + enableKeyboard: true, + quitOnEnd: false, + quitOnImgClick: false, + quitOnDocClick: true, + requestFullscreenOnMobile: true + }; + + this.options = Object.assign(options, defaultOptions); + log.info(this.options); + + this.target = null; + this.image = null; + this.imageWidth = 0; + this.imageHeight = 0; + this.swipeDiff = 0; + this.inProgress = false; + + this.swipeStart = 0; + this.swipeEnd = 0; + + this.onStartListeners = []; + this.onEndListeners = []; + this.onLoadStartListeners = []; + this.onLoadEndListeners = []; + + this.bindEvents(); + } + + _createClass(LightBox, [{ + key: 'bindEvents', + value: function bindEvents() { + var _this = this; + + Array.prototype.forEach.call(this.targets, function (ele) { + ele.addEventListener('click', _this.onImageClick.bind(_this)); + }); + window.addEventListener('resize', this.windowResizeListener.bind(this)); + + if (this.options.quitOnDocClick) { + document.body.addEventListener(LightBox.HAS_TOUCH ? 'touchend' : 'click', this.documentClick.bind(this)); + } + + if (this.options.enableKeyboard) { + document.body.addEventListener('keyup', this.handleKeyboard.bind(this)); + } + } + }, { + key: 'handleKeyboard', + value: function handleKeyboard(e) { + if (this.image === null) return true; + + e.preventDefault(); + + if (e.keyCode === 27) this.quitLightbox(); + + if (e.keyCode === 37 || e.keyCode === 39) { + var gotoIndex = Array.prototype.indexOf.call(this.targets, this.target) - (e.keyCode === 37 ? 1 : -1); + + if (gotoIndex > this.targets.length - 1) { + this.target = this.targets[0]; + } else if (gotoIndex < 0) { + this.target = this.targets[this.targets.length - 1]; + } else { + this.target = this.targets[gotoIndex]; + } + + this.loadImage(); + } + } + }, { + key: 'documentClick', + value: function documentClick() { + log.debug('document click'); + + if (this.image !== null && this.target.href === this.image.src) { + log.info('quitting'); + if (this.options.quitOnDocClick) this.quitLightbox(); + } + } + }, { + key: 'quitLightbox', + value: function quitLightbox() { + var _this2 = this; + + log.debug('quitLightbox'); + if (this.image === null) return false; + + _CSSUtil.CSSUtil.setTransitionProperty(this.image, 'opacity ' + this.options.animationSpeed / 1000 + 's linear'); + setTimeout(function () { + // without timeout it's to fast to make it fade and just jumps to 1 instant + _this2.image.style.opacity = 0; + }, 5); + + setTimeout(function () { + _this2.removeImage(); + _this2.inProgress = false; + + _this2.onEndListeners.forEach(function (l) { + return l(); + }); + }, this.options.animationSpeed); + } + }, { + key: 'onImageClick', + value: function onImageClick(event) { + log.debug(event); + var element = event.srcElement.parentElement; + if (!this.isTargetValid(element)) return true; + + event.preventDefault(); + + //if (LightBox.HAS_TOUCH) { + // log.debug('requesting fullscreen'); + // document.body.webkitRequestFullscreen() + //} + + if (this.inProgress) return; + + this.inProgress = false; + + this.onStartListeners.forEach(function (l) { + return l(); + }); + + this.target = element; + + this.loadImage(); + } + }, { + key: 'isTargetValid', + value: function isTargetValid(element) { + if (this.options.restrictTypes === false) return true; + + var validTypes = new RegExp("(\.(" + this.options.allowedTypes + ")$)"); + + return element.tagName.toLowerCase() === 'a' && validTypes.test(element.href); + } + }, { + key: 'loadImage', + value: function loadImage() { + var _this3 = this; + + var direction = arguments.length <= 0 || arguments[0] === undefined ? false : arguments[0]; + + log.info('loadImage'); + if (this.inProgress) return false; + log.debug('not progress'); + + if (this.image !== null) { + log.debug('has current image'); + if (direction !== false && (this.targets.length < 2 || this.options.quitOnEnd === true && (direction === _LightDirection.LightDirection.RIGHT && Array.prototype.indexOf(this.targets, this.target) === 0 || direction === _LightDirection.LightDirection.LEFT && Array.prototype.indexOf(this.targets, this.target) === targets.length - 1))) { + this.quitLightbox(); + return false; + } + + log.debug('unload'); + _CSSUtil.CSSUtil.setTransitionProperty(this.image, 'opacity ' + this.options.animationSpeed / 1000 + 's linear'); + + var transitionArgs = '0px'; + if (direction !== false) { + transitionArgs = 100 * direction - this.swipeDiff + 'px'; + } + + this.image.style.transform = 'translateX(' + transitionArgs + ')'; + + setTimeout(function () { + // without timeout it's to fast to make it fade and just jumps to 1 instant + _this3.image.style.opacity = 0; + }, 5); + + setTimeout(function () { + log.debug('remove from dom'); + _this3.removeImage(); + }, this.options.animationSpeed); + + this.swipeDiff = 0; + } + + this.inProgress = true; + this.onLoadStartListeners.forEach(function (l) { + return l(); + }); + + setTimeout(function () { + log.debug('loadImage in'); + var image = new Image(); + _this3.image = image; + image.onload = function () { + image.id = _this3.options.selectorId; + log.debug('img loaded'); + document.body.appendChild(image); + _this3.setImage(); + + image.style.opacity = 0; + + var interpretedSpeed = _this3.options.animationSpeed / 1000; + log.debug(interpretedSpeed); + _CSSUtil.CSSUtil.setTransitionProperty(image, 'opacity ' + interpretedSpeed + 's ease'); + image.style.transform = 'translateX(0px)'; + + setTimeout(function () { + // without timeout it's to fast to make it fade and just jumps to 1 instant + image.style.opacity = 1; + }, 10); + + setTimeout(function () { + _this3.inProgress = false; + _this3.onLoadEndListeners.forEach(function (l) { + return l(); + }); + }, _this3.options.animationSpeed); + + if (_this3.options.preloadNext) { + var index = Array.prototype.indexOf.call(_this3.targets, _this3.target); + var next = _this3.targets[index + 1]; + + if (next !== null && next !== undefined) { + log.debug('preloading next'); + var nextImg = new Image(); + nextImg.src = next.href; + } else { + log.debug('no preloading'); + } + } + }; + image.src = _this3.target.href; + + _this3.swipeStart = 0; + _this3.swipeEnd = 0; + //this.imagePosLeft = 0; + + if (LightBox.HAS_POINTERS) { + image.addEventListener('pointerup', _this3.imageClickEvent.bind(_this3)); + image.addEventListener('MSPointerUp', _this3.imageClickEvent.bind(_this3)); + } else { + image.addEventListener('click', _this3.imageClickEvent.bind(_this3)); + } + + ['touchstart', 'pointerdown', 'MSPointerDown'].forEach(function (name) { + image.addEventListener(name, _this3.imageTouchStart.bind(_this3)); + }); + + ['touchmove', 'pointermove', 'MSPointerMove'].forEach(function (name) { + image.addEventListener(name, _this3.imageTouchMove.bind(_this3)); + }); + + ['touchend', 'touchcancel', 'pointerup', 'MSPointerUp'].forEach(function (name) { + image.addEventListener(name, _this3.imageTouchEnd.bind(_this3)); + }); + }, this.options.animationSpeed + 100); + } + }, { + key: 'removeImage', + value: function removeImage() { + var image = document.querySelector('#' + this.options.selectorId); + document.body.removeChild(image); + this.image = null; + } + }, { + key: 'imageClickEvent', + value: function imageClickEvent(e) { + e.preventDefault(); + log.debug('click'); + + if (this.options.quitOnImgClick) { + this.quitLightbox(); + return false; + } + + if (this.wasTouched(e)) return true; + + var posX = e.pageX - e.target.offsetLeft; + log.debug(posX); + + var gotoIndex = Array.prototype.indexOf.call(this.targets, this.target) - (this.imageWidth / 2 > posX ? 1 : -1); + + if (gotoIndex > this.targets.length - 1) { + this.target = this.targets[0]; + } else if (gotoIndex < 0) { + this.target = this.targets[this.targets.length - 1]; + } else { + this.target = this.targets[gotoIndex]; + } + + this.loadImage(); + } + }, { + key: 'imageTouchStart', + value: function imageTouchStart(e) { + if (!this.wasTouched(e) || this.options.quitOnImgClick) return true; + + this.swipeStart = e.pageX || e.touches[0].pageX; + } + }, { + key: 'imageTouchMove', + value: function imageTouchMove(e) { + if (!this.wasTouched(e) || this.options.quitOnImgClick) return true; + + e.preventDefault(); + this.swipeEnd = e.pageX || e.touches[0].pageX; + this.swipeDiff = this.swipeStart - this.swipeEnd; + + this.image.style.transform = 'translateX(' + -this.swipeDiff + 'px)'; + //CSSUtil.setTransitionProperty(this.image, 'transform 0s linear'); + } + }, { + key: 'imageTouchEnd', + value: function imageTouchEnd(e) { + if (!this.wasTouched(e) || this.options.quitOnImgClick) return true; + + log.debug(this.swipeDiff); + if (Math.abs(this.swipeDiff) > 50) { + var gotoIndex = Array.prototype.indexOf.call(this.targets, this.target) - (this.swipeDiff < 0 ? 1 : -1); + + if (gotoIndex > this.targets.length - 1) { + this.target = this.targets[0]; + } else if (gotoIndex < 0) { + this.target = this.targets[this.targets.length - 1]; + } else { + this.target = this.targets[gotoIndex]; + } + + var direction = this.swipeDiff > 0 ? _LightDirection.LightDirection.RIGHT : _LightDirection.LightDirection.LEFT; + this.loadImage(direction); + } else { + this.image.style.transform = 'translateX(0px)'; + //CSSUtil.setTransitionProperty(this.image, 'transform '+ options.animationSpeed / 1000 +'s linear'); + } + } + }, { + key: 'setImage', + value: function setImage() { + var _this4 = this; + + if (!this.image) return false; + + var screenWidth = window.innerWidth * 0.8; + var screenHeight = window.innerHeight * 0.9; + + var tmpImage = new Image(); + tmpImage.src = this.image.src; + tmpImage.onload = function () { + _this4.imageWidth = tmpImage.width; + _this4.imageHeight = tmpImage.height; + + if (_this4.imageWidth > screenWidth || _this4.imageHeight > screenHeight) { + var ratio = _this4.imageWidth / _this4.imageHeight > screenWidth / screenHeight ? _this4.imageWidth / screenWidth : _this4.imageHeight / screenHeight; + _this4.imageWidth /= ratio; + _this4.imageHeight /= ratio; + } + + _this4.image.style.width = _this4.imageWidth + 'px'; + _this4.image.style.height = _this4.imageHeight + 'px'; + _this4.image.style.top = (window.innerHeight - _this4.imageHeight) / 2 + 'px'; + _this4.image.style.left = (window.innerWidth - _this4.imageWidth) / 2 + 'px'; + }; + } + }, { + key: 'wasTouched', + value: function wasTouched(event) { + if (LightBox.HAS_TOUCH) return true; + + if (!LightBox.HAS_POINTERS || typeof event === 'undefined' || typeof event.pointerType === 'undefined') return false; + + if (typeof event.MSPOINTER_TYPE_MOUSE !== 'undefined') { + if (event.MSPOINTER_TYPE_MOUSE !== event.pointerType) return true; + } else { + if (event.pointerType !== 'mouse') return true; + } + + return false; + } + }, { + key: 'switchToIndex', + value: function switchToIndex(index) { + if (index >= 0 && index < this.targets.length) { + this.target = this.targets[index]; + this.loadImage(); + } + } + }, { + key: 'windowResizeListener', + value: function windowResizeListener() { + log.debug('resized'); + this.setImage(); + } + }, { + key: 'addOnStartListener', + value: function addOnStartListener(listener) { + this.onStartListeners.push(listener); + } + }, { + key: 'addOnEndListener', + value: function addOnEndListener(listener) { + this.onEndListeners.push(listener); + } + }, { + key: 'addOnLoadStartListener', + value: function addOnLoadStartListener(listener) { + this.onLoadStartListeners.push(listener); + } + }, { + key: 'addOnLoadEndListener', + value: function addOnLoadEndListener(listener) { + this.onLoadEndListeners.push(listener); + } + }, { + key: 'registerPlugin', + value: function registerPlugin(plugin) { + plugin.register(this); + } + }]); + + return LightBox; + }(); + + exports.default = LightBox; + + LightBox.HAS_TOUCH = 'ontouchstart' in window; + LightBox.HAS_POINTERS = window.navigator.pointerEnabled || window.navigator.msPointerEnabled; + module.exports = exports['default']; + +/***/ }, +/* 1 */ +/***/ function(module, exports) { + + 'use strict'; + + var _createClass = 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); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); + + Object.defineProperty(exports, "__esModule", { + value: true + }); + + function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + + /** + * Created by Victor Häggqvist on 1/12/16. + */ + + var CSSUtil = exports.CSSUtil = function () { + function CSSUtil() { + _classCallCheck(this, CSSUtil); + } + + _createClass(CSSUtil, null, [{ + key: 'setTransitionProperty', + + /** + * transion need to be set on property + * + * using key-value dont work + * + * @param ele DOMElement + * @param value + */ + value: function setTransitionProperty(ele, value) { + var style = ele.style; + if (style.transition === '') { + style.transition = value; + return; + } + if (style.WebkitTransition === '') { + style.WebkitTransition = value; + return; + } + if (style.MozTransition === '') { + style.MozTransition = value; + return; + } + if (style.OTransition === '') { + style.OTransition = value; + } + } + }, { + key: 'cssTransitionSupport', + value: function cssTransitionSupport() { + var d = document.body || document.documentElement, + s = d.style; + if (s.WebkitTransition === '') return '-webkit-'; + if (s.MozTransition === '') return '-moz-'; + if (s.OTransition === '') return '-o-'; + if (s.transition === '') return ''; + return false; + } + }, { + key: 'cssTransitionTranslateX', + value: function cssTransitionTranslateX(element, positionX, speed) { + var prefix = CSSUtil.cssTransitionSupport(); + element.style[prefix + 'transform'] = 'translateX(' + positionX + ')'; + element.style[prefix + 'transition'] = prefix + 'transform ' + speed + 's linear'; + } + }]); + + return CSSUtil; + }(); + + CSSUtil.isCssTransitionSupport = CSSUtil.cssTransitionSupport() !== false; + +/***/ }, +/* 2 */ +/***/ function(module, exports) { + + "use strict"; + + Object.defineProperty(exports, "__esModule", { + value: true + }); + + function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + + /** + * Created by Victor Häggqvist on 1/14/16. + */ + + var LightDirection = exports.LightDirection = function LightDirection() { + _classCallCheck(this, LightDirection); + }; + + LightDirection.LEFT = 1; + LightDirection.RIGHT = -1; + +/***/ }, +/* 3 */ +/***/ function(module, exports, __webpack_require__) { + + var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_RESULT__;/* WEBPACK VAR INJECTION */(function(module) {'use strict'; + + var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol ? "symbol" : typeof obj; }; + + /* + * loglevel - https://github.com/pimterry/loglevel + * + * Copyright (c) 2013 Tim Perry + * Licensed under the MIT license. + */ + (function (root, definition) { + "use strict"; + + if (( false ? 'undefined' : _typeof(module)) === 'object' && module.exports && "function" === 'function') { + module.exports = definition(); + } else if ("function" === 'function' && _typeof(__webpack_require__(5)) === 'object') { + !(__WEBPACK_AMD_DEFINE_FACTORY__ = (definition), __WEBPACK_AMD_DEFINE_RESULT__ = (typeof __WEBPACK_AMD_DEFINE_FACTORY__ === 'function' ? (__WEBPACK_AMD_DEFINE_FACTORY__.call(exports, __webpack_require__, exports, module)) : __WEBPACK_AMD_DEFINE_FACTORY__), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); + } else { + root.log = definition(); + } + })(undefined, function () { + "use strict"; + + var noop = function noop() {}; + var undefinedType = "undefined"; + + function realMethod(methodName) { + if ((typeof console === 'undefined' ? 'undefined' : _typeof(console)) === undefinedType) { + return false; // We can't build a real method without a console to log to + } else if (console[methodName] !== undefined) { + return bindMethod(console, methodName); + } else if (console.log !== undefined) { + return bindMethod(console, 'log'); + } else { + return noop; + } + } + + function bindMethod(obj, methodName) { + var method = obj[methodName]; + if (typeof method.bind === 'function') { + return method.bind(obj); + } else { + try { + return Function.prototype.bind.call(method, obj); + } catch (e) { + // Missing bind shim or IE8 + Modernizr, fallback to wrapping + return function () { + return Function.prototype.apply.apply(method, [obj, arguments]); + }; + } + } + } + + // these private functions always need `this` to be set properly + + function enableLoggingWhenConsoleArrives(methodName, level, loggerName) { + return function () { + if ((typeof console === 'undefined' ? 'undefined' : _typeof(console)) !== undefinedType) { + replaceLoggingMethods.call(this, level, loggerName); + this[methodName].apply(this, arguments); + } + }; + } + + function replaceLoggingMethods(level, loggerName) { + /*jshint validthis:true */ + for (var i = 0; i < logMethods.length; i++) { + var methodName = logMethods[i]; + this[methodName] = i < level ? noop : this.methodFactory(methodName, level, loggerName); + } + } + + function defaultMethodFactory(methodName, level, loggerName) { + /*jshint validthis:true */ + return realMethod(methodName) || enableLoggingWhenConsoleArrives.apply(this, arguments); + } + + var logMethods = ["trace", "debug", "info", "warn", "error"]; + + function Logger(name, defaultLevel, factory) { + var self = this; + var currentLevel; + var storageKey = "loglevel"; + if (name) { + storageKey += ":" + name; + } + + function persistLevelIfPossible(levelNum) { + var levelName = (logMethods[levelNum] || 'silent').toUpperCase(); + + // Use localStorage if available + try { + window.localStorage[storageKey] = levelName; + return; + } catch (ignore) {} + + // Use session cookie as fallback + try { + window.document.cookie = encodeURIComponent(storageKey) + "=" + levelName + ";"; + } catch (ignore) {} + } + + function getPersistedLevel() { + var storedLevel; + + try { + storedLevel = window.localStorage[storageKey]; + } catch (ignore) {} + + if ((typeof storedLevel === 'undefined' ? 'undefined' : _typeof(storedLevel)) === undefinedType) { + try { + var cookie = window.document.cookie; + var location = cookie.indexOf(encodeURIComponent(storageKey) + "="); + if (location) { + storedLevel = /^([^;]+)/.exec(cookie.slice(location))[1]; + } + } catch (ignore) {} + } + + // If the stored level is not valid, treat it as if nothing was stored. + if (self.levels[storedLevel] === undefined) { + storedLevel = undefined; + } + + return storedLevel; + } + + /* + * + * Public API + * + */ + + self.levels = { "TRACE": 0, "DEBUG": 1, "INFO": 2, "WARN": 3, + "ERROR": 4, "SILENT": 5 }; + + self.methodFactory = factory || defaultMethodFactory; + + self.getLevel = function () { + return currentLevel; + }; + + self.setLevel = function (level, persist) { + if (typeof level === "string" && self.levels[level.toUpperCase()] !== undefined) { + level = self.levels[level.toUpperCase()]; + } + if (typeof level === "number" && level >= 0 && level <= self.levels.SILENT) { + currentLevel = level; + if (persist !== false) { + // defaults to true + persistLevelIfPossible(level); + } + replaceLoggingMethods.call(self, level, name); + if ((typeof console === 'undefined' ? 'undefined' : _typeof(console)) === undefinedType && level < self.levels.SILENT) { + return "No console available for logging"; + } + } else { + throw "log.setLevel() called with invalid level: " + level; + } + }; + + self.setDefaultLevel = function (level) { + if (!getPersistedLevel()) { + self.setLevel(level, false); + } + }; + + self.enableAll = function (persist) { + self.setLevel(self.levels.TRACE, persist); + }; + + self.disableAll = function (persist) { + self.setLevel(self.levels.SILENT, persist); + }; + + // Initialize with the right level + var initialLevel = getPersistedLevel(); + if (initialLevel == null) { + initialLevel = defaultLevel == null ? "WARN" : defaultLevel; + } + self.setLevel(initialLevel, false); + } + + /* + * + * Package-level API + * + */ + + var defaultLogger = new Logger(); + + var _loggersByName = {}; + defaultLogger.getLogger = function getLogger(name) { + if (typeof name !== "string" || name === "") { + throw new TypeError("You must supply a name when creating a logger."); + } + + var logger = _loggersByName[name]; + if (!logger) { + logger = _loggersByName[name] = new Logger(name, defaultLogger.getLevel(), defaultLogger.methodFactory); + } + return logger; + }; + + // Grab the current global log variable in case of overwrite + var _log = (typeof window === 'undefined' ? 'undefined' : _typeof(window)) !== undefinedType ? window.log : undefined; + defaultLogger.noConflict = function () { + if ((typeof window === 'undefined' ? 'undefined' : _typeof(window)) !== undefinedType && window.log === defaultLogger) { + window.log = _log; + } + + return defaultLogger; + }; + + return defaultLogger; + }); + /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(4)(module))) + +/***/ }, +/* 4 */ +/***/ function(module, exports) { + + "use strict"; + + module.exports = function (module) { + if (!module.webpackPolyfill) { + module.deprecate = function () {}; + module.paths = []; + // module.parent = undefined by default + module.children = []; + module.webpackPolyfill = 1; + } + return module; + }; + +/***/ }, +/* 5 */ +/***/ function(module, exports) { + + /* WEBPACK VAR INJECTION */(function(__webpack_amd_options__) {module.exports = __webpack_amd_options__; + + /* WEBPACK VAR INJECTION */}.call(exports, {})) + +/***/ } +/******/ ]); \ No newline at end of file diff --git a/demo/LightBox.Navigation.js b/demo/LightBox.Navigation.js new file mode 100644 index 0000000..abcc5b4 --- /dev/null +++ b/demo/LightBox.Navigation.js @@ -0,0 +1,138 @@ +var LightBox = LightBox || {}; LightBox["Navigation"] = +/******/ (function(modules) { // webpackBootstrap +/******/ // The module cache +/******/ var installedModules = {}; + +/******/ // The require function +/******/ function __webpack_require__(moduleId) { + +/******/ // Check if module is in cache +/******/ if(installedModules[moduleId]) +/******/ return installedModules[moduleId].exports; + +/******/ // Create a new module (and put it into the cache) +/******/ var module = installedModules[moduleId] = { +/******/ exports: {}, +/******/ id: moduleId, +/******/ loaded: false +/******/ }; + +/******/ // Execute the module function +/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); + +/******/ // Flag the module as loaded +/******/ module.loaded = true; + +/******/ // Return the exports of the module +/******/ return module.exports; +/******/ } + + +/******/ // expose the modules object (__webpack_modules__) +/******/ __webpack_require__.m = modules; + +/******/ // expose the module cache +/******/ __webpack_require__.c = installedModules; + +/******/ // __webpack_public_path__ +/******/ __webpack_require__.p = ""; + +/******/ // Load entry module and return exports +/******/ return __webpack_require__(0); +/******/ }) +/************************************************************************/ +/******/ ([ +/* 0 */ +/***/ function(module, exports) { + + 'use strict'; + + var _createClass = 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); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); + + Object.defineProperty(exports, "__esModule", { + value: true + }); + + function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + + /** + * @author Victor Häggqvist + * @since 1/15/16 + */ + + var Navigation = function () { + function Navigation() { + _classCallCheck(this, Navigation); + } + + _createClass(Navigation, [{ + key: 'register', + value: function register(lightbox) { + this.lightbox = lightbox; + lightbox.addOnStartListener(this.showNavigation.bind(this)); + lightbox.addOnEndListener(this.hideNavigation.bind(this)); + lightbox.addOnLoadEndListener(this.updateNavigation.bind(this)); + } + }, { + key: 'showNavigation', + value: function showNavigation() { + var _this = this; + + this.sink = document.createElement('div'); + this.sink.id = 'imagelightbox-nav-sink'; + this.nav = document.createElement('div'); + this.nav.id = 'imagelightbox-nav'; + this.sink.appendChild(this.nav); + + Array.prototype.forEach.call(this.lightbox.targets, function (_) { + _this.nav.appendChild(document.createElement('a')); + }); + + document.body.appendChild(this.sink); + + var navItems = this.nav.querySelectorAll('a'); + Array.prototype.forEach.call(navItems, function (item, i) { + ['click', 'touchend'].forEach(function (name) { + item.addEventListener(name, _this.navClick.bind(_this, i)); + }); + }); + + // make the nav actually centered, flex center dont make it + var rect = this.nav.getBoundingClientRect(); + var diff = rect.width / 2; + this.nav.style.marginLeft = '-' + diff + 'px'; + } + }, { + key: 'updateNavigation', + value: function updateNavigation() { + Array.prototype.forEach.call(this.nav.childNodes, function (n) { + n.classList.remove('active'); + }); + + var current = Array.prototype.indexOf.call(this.lightbox.targets, this.lightbox.target); + this.nav.childNodes[current].classList.add('active'); + } + }, { + key: 'hideNavigation', + value: function hideNavigation() { + try { + document.body.removeChild(this.sink); + } catch (e) {} + } + }, { + key: 'navClick', + value: function navClick(index, e) { + e.stopPropagation(); + e.cancelBubble = true; + this.lightbox.switchToIndex(index); + } + }]); + + return Navigation; + }(); + + exports.default = Navigation; + module.exports = exports['default']; + +/***/ } +/******/ ]); \ No newline at end of file diff --git a/demo/LightBox.Overlay.js b/demo/LightBox.Overlay.js new file mode 100644 index 0000000..e52a586 --- /dev/null +++ b/demo/LightBox.Overlay.js @@ -0,0 +1,96 @@ +var LightBox = LightBox || {}; LightBox["Overlay"] = +/******/ (function(modules) { // webpackBootstrap +/******/ // The module cache +/******/ var installedModules = {}; + +/******/ // The require function +/******/ function __webpack_require__(moduleId) { + +/******/ // Check if module is in cache +/******/ if(installedModules[moduleId]) +/******/ return installedModules[moduleId].exports; + +/******/ // Create a new module (and put it into the cache) +/******/ var module = installedModules[moduleId] = { +/******/ exports: {}, +/******/ id: moduleId, +/******/ loaded: false +/******/ }; + +/******/ // Execute the module function +/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); + +/******/ // Flag the module as loaded +/******/ module.loaded = true; + +/******/ // Return the exports of the module +/******/ return module.exports; +/******/ } + + +/******/ // expose the modules object (__webpack_modules__) +/******/ __webpack_require__.m = modules; + +/******/ // expose the module cache +/******/ __webpack_require__.c = installedModules; + +/******/ // __webpack_public_path__ +/******/ __webpack_require__.p = ""; + +/******/ // Load entry module and return exports +/******/ return __webpack_require__(0); +/******/ }) +/************************************************************************/ +/******/ ([ +/* 0 */ +/***/ function(module, exports) { + + 'use strict'; + + var _createClass = 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); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); + + Object.defineProperty(exports, "__esModule", { + value: true + }); + + function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + + /** + * @author Victor Häggqvist + * @since 2016-01-14 + */ + + var Overlay = function () { + function Overlay() { + _classCallCheck(this, Overlay); + + this.element = document.createElement('div'); + this.element.id = 'imagelightbox-overlay'; + } + + _createClass(Overlay, [{ + key: 'register', + value: function register(lightbox) { + lightbox.addOnStartListener(this.overlayOn.bind(this)); + lightbox.addOnEndListener(this.overlayOff.bind(this)); + } + }, { + key: 'overlayOn', + value: function overlayOn() { + document.body.appendChild(this.element); + } + }, { + key: 'overlayOff', + value: function overlayOff() { + document.body.removeChild(this.element); + } + }]); + + return Overlay; + }(); + + exports.default = Overlay; + module.exports = exports['default']; + +/***/ } +/******/ ]); \ No newline at end of file diff --git a/demo/index.html b/demo/index.html index 7bc02cd..d1e167c 100644 --- a/demo/index.html +++ b/demo/index.html @@ -9,99 +9,214 @@ Image Lightbox Demo - - + -Fork me on GitHub + +
-

Image LightboxResponsive & Touch-Friendly

- -

View source of demos on Github.

+

Image LightboxResponsive & Touch-Friendly

+

View source of demos on Github.

-

With activity indication

- -

With overlay & activity indication

- -

With "close" button & activity indication

- -

With caption & activity indication

- -

With navigation & activity indication

- -

Combination

- + + +

Core

+ + + +

With activity indication

+ + + +

With overlay & activity indication

+ + + +

With "close" button & activity indication

+ + + +

With caption & activity indication

+ + + +

With navigation & activity indication

+ + + +

Combination

+ + +
- - - - + + + + + + -- cgit v1.2.3