From b341aedfd293552410c17ea67d32d02ae0c98a1e Mon Sep 17 00:00:00 2001 From: Nicolas Turlais Date: Wed, 21 Nov 2018 20:18:17 +0100 Subject: [PATCH] Facotry returns chocolat to be used as a module --- dist/js/jquery.chocolat.js | 927 ++++++++++++++++----------------- dist/js/jquery.chocolat.min.js | 2 +- src/js/jquery.chocolat.js | 2 + 3 files changed, 461 insertions(+), 470 deletions(-) diff --git a/dist/js/jquery.chocolat.js b/dist/js/jquery.chocolat.js index f7a566e..e0caa74 100644 --- a/dist/js/jquery.chocolat.js +++ b/dist/js/jquery.chocolat.js @@ -1,469 +1,443 @@ -(function (factory) { - if(typeof module === "object" && typeof module.exports === "object") { - module.exports = factory(require("jquery"), window, document); +;(function(factory) { + if (typeof module === 'object' && typeof module.exports === 'object') { + module.exports = factory(require('jquery'), window, document) } else { - factory(jQuery, window, document); + factory(jQuery, window, document) } -}(function($, window, document, undefined) { - var calls = 0; +})(function($, window, document, undefined) { + var calls = 0 function Chocolat(element, settings) { - var that = this; + var that = this - this.settings = settings; - this.elems = {}; - this.element = element; + this.settings = settings + this.elems = {} + this.element = element this._cssClasses = [ 'chocolat-open', 'chocolat-in-container', 'chocolat-cover', 'chocolat-zoomable', - 'chocolat-zoomed' - ]; + 'chocolat-zoomed', + ] if (!this.settings.setTitle && element.data('chocolat-title')) { - this.settings.setTitle = element.data('chocolat-title'); + this.settings.setTitle = element.data('chocolat-title') } - this.element.find(this.settings.imageSelector).each(function () { + this.element.find(this.settings.imageSelector).each(function() { that.settings.images.push({ - title : $(this).attr('title'), - src : $(this).attr(that.settings.imageSource), - height : false, - width : false - }); - }); - - this.element.find(this.settings.imageSelector).each(function (i) { - $(this).off('click.chocolat').on('click.chocolat', function(e){ - that.init(i); - e.preventDefault(); - }); - }); - - return this; + title: $(this).attr('title'), + src: $(this).attr(that.settings.imageSource), + height: false, + width: false, + }) + }) + + this.element.find(this.settings.imageSelector).each(function(i) { + $(this) + .off('click.chocolat') + .on('click.chocolat', function(e) { + that.init(i) + e.preventDefault() + }) + }) + + return this } $.extend(Chocolat.prototype, { - - init : function(i) { + init: function(i) { if (!this.settings.initialized) { - this.setDomContainer(); - this.markup(); - this.events(); - this.settings.lastImage = this.settings.images.length - 1; - this.settings.initialized = true; + this.setDomContainer() + this.markup() + this.events() + this.settings.lastImage = this.settings.images.length - 1 + this.settings.initialized = true } - this.settings.afterInitialize.call(this); + this.settings.afterInitialize.call(this) - return this.load(i); + return this.load(i) }, - preload : function(i) { - var def = $.Deferred(); + preload: function(i) { + var def = $.Deferred() if (typeof this.settings.images[i] === 'undefined') { - return; + return } - var imgLoader = new Image(); - imgLoader.onload = function() { def.resolve(imgLoader); }; - imgLoader.src = this.settings.images[i].src; + var imgLoader = new Image() + imgLoader.onload = function() { + def.resolve(imgLoader) + } + imgLoader.src = this.settings.images[i].src - return def; + return def }, - load : function(i) { - var that = this; + load: function(i) { + var that = this if (this.settings.fullScreen) { - this.openFullScreen(); + this.openFullScreen() } if (this.settings.currentImage === i) { - return; + return } - this.elems.overlay.fadeIn(this.settings.duration); - this.elems.wrapper.fadeIn(this.settings.duration); - this.elems.domContainer.addClass('chocolat-open'); + this.elems.overlay.fadeIn(this.settings.duration) + this.elems.wrapper.fadeIn(this.settings.duration) + this.elems.domContainer.addClass('chocolat-open') - this.settings.timer = setTimeout(function(){ + this.settings.timer = setTimeout(function() { if (typeof that.elems != 'undefined') { - $.proxy(that.elems.loader.fadeIn(), that); + $.proxy(that.elems.loader.fadeIn(), that) } - }, this.settings.duration); + }, this.settings.duration) var deferred = this.preload(i) - .then(function (imgLoader) { - return that.place(i, imgLoader); + .then(function(imgLoader) { + return that.place(i, imgLoader) + }) + .then(function(imgLoader) { + return that.appear(i) }) - .then(function (imgLoader) { - return that.appear(i); + .then(function(imgLoader) { + that.zoomable() + that.settings.afterImageLoad.call(that) }) - .then(function (imgLoader) { - that.zoomable(); - that.settings.afterImageLoad.call(that); - }); - var nextIndex = i + 1; + var nextIndex = i + 1 if (typeof this.settings.images[nextIndex] != 'undefined') { - this.preload(nextIndex); + this.preload(nextIndex) } - return deferred; + return deferred }, - place : function(i, imgLoader) { - var that = this; - var fitting; + place: function(i, imgLoader) { + var that = this + var fitting - this.settings.currentImage = i; - this.description(); - this.pagination(); - this.arrows(); + this.settings.currentImage = i + this.description() + this.pagination() + this.arrows() - this.storeImgSize(imgLoader, i); - fitting = this.fit(i, that.elems.wrapper); + this.storeImgSize(imgLoader, i) + fitting = this.fit(i, that.elems.wrapper) - return this.center( - fitting.width, - fitting.height, - fitting.left, - fitting.top, - 0 - ); + return this.center(fitting.width, fitting.height, fitting.left, fitting.top, 0) }, - center : function(width, height, left, top, duration) { - + center: function(width, height, left, top, duration) { return this.elems.content .css('overflow', 'visible') - .animate({ - 'width' :width, - 'height' :height, - 'left' :left, - 'top' :top - }, duration) - .promise(); + .animate( + { + width: width, + height: height, + left: left, + top: top, + }, + duration + ) + .promise() }, - appear : function(i) { - var that = this; - clearTimeout(this.settings.timer); + appear: function(i) { + var that = this + clearTimeout(this.settings.timer) this.elems.loader.stop().fadeOut(300, function() { - that.elems.img - .attr('src', that.settings.images[i].src); - }); + that.elems.img.attr('src', that.settings.images[i].src) + }) }, - fit : function(i, container) { - var height; - var width; + fit: function(i, container) { + var height + var width - var imgHeight = this.settings.images[i].height; - var imgWidth = this.settings.images[i].width; - var holderHeight = $(container).height(); - var holderWidth = $(container).width(); - var holderOutMarginH = this.getOutMarginH(); - var holderOutMarginW = this.getOutMarginW(); + var imgHeight = this.settings.images[i].height + var imgWidth = this.settings.images[i].width + var holderHeight = $(container).height() + var holderWidth = $(container).width() + var holderOutMarginH = this.getOutMarginH() + var holderOutMarginW = this.getOutMarginW() - var holderGlobalWidth = holderWidth-holderOutMarginW; - var holderGlobalHeight = holderHeight-holderOutMarginH; - var holderGlobalRatio = (holderGlobalHeight / holderGlobalWidth); - var holderRatio = (holderHeight / holderWidth); - var imgRatio = (imgHeight / imgWidth); + var holderGlobalWidth = holderWidth - holderOutMarginW + var holderGlobalHeight = holderHeight - holderOutMarginH + var holderGlobalRatio = holderGlobalHeight / holderGlobalWidth + var holderRatio = holderHeight / holderWidth + var imgRatio = imgHeight / imgWidth if (this.settings.imageSize == 'cover') { if (imgRatio < holderRatio) { - height = holderHeight; - width = height / imgRatio; + height = holderHeight + width = height / imgRatio + } else { + width = holderWidth + height = width * imgRatio } - else { - width = holderWidth; - height = width * imgRatio; - } - } - else if (this.settings.imageSize == 'native') { - height = imgHeight; - width = imgWidth; - } - else { + } else if (this.settings.imageSize == 'native') { + height = imgHeight + width = imgWidth + } else { if (imgRatio > holderGlobalRatio) { - height = holderGlobalHeight; - width = height / imgRatio; - } - else { - width = holderGlobalWidth; - height = width * imgRatio; + height = holderGlobalHeight + width = height / imgRatio + } else { + width = holderGlobalWidth + height = width * imgRatio } - if (this.settings.imageSize === 'default' && (width >= imgWidth || height >= imgHeight)) { - width = imgWidth; - height = imgHeight; + if ( + this.settings.imageSize === 'default' && + (width >= imgWidth || height >= imgHeight) + ) { + width = imgWidth + height = imgHeight } } return { - 'height' : height, - 'width' : width, - 'top' : (holderHeight - height)/2, - 'left' : (holderWidth - width)/2 - }; + height: height, + width: width, + top: (holderHeight - height) / 2, + left: (holderWidth - width) / 2, + } }, - change : function(signe) { - this.zoomOut(0); - this.zoomable(); + change: function(signe) { + this.zoomOut(0) + this.zoomable() - var requestedImage = this.settings.currentImage + parseInt(signe); + var requestedImage = this.settings.currentImage + parseInt(signe) if (requestedImage > this.settings.lastImage) { if (this.settings.loop) { - return this.load(0); + return this.load(0) } - } - else if (requestedImage < 0) { + } else if (requestedImage < 0) { if (this.settings.loop) { - return this.load(this.settings.lastImage); + return this.load(this.settings.lastImage) } - } - else { - return this.load(requestedImage); + } else { + return this.load(requestedImage) } }, arrows: function() { if (this.settings.loop) { - $([this.elems.left[0],this.elems.right[0]]) - .addClass('active'); - } - else if (this.settings.linkImages) { + $([this.elems.left[0], this.elems.right[0]]).addClass('active') + } else if (this.settings.linkImages) { // right if (this.settings.currentImage == this.settings.lastImage) { - this.elems.right.removeClass('active'); - } - else { - this.elems.right.addClass('active'); + this.elems.right.removeClass('active') + } else { + this.elems.right.addClass('active') } // left if (this.settings.currentImage === 0) { - this.elems.left.removeClass('active'); + this.elems.left.removeClass('active') + } else { + this.elems.left.addClass('active') } - else { - this.elems.left.addClass('active'); - } - } - else { - $([this.elems.left[0],this.elems.right[0]]) - .removeClass('active'); + } else { + $([this.elems.left[0], this.elems.right[0]]).removeClass('active') } }, - description : function() { - var that = this; - this.elems.description - .html(that.settings.images[that.settings.currentImage].title); + description: function() { + var that = this + this.elems.description.html(that.settings.images[that.settings.currentImage].title) }, - pagination : function() { - var that = this; - var last = this.settings.lastImage + 1; - var position = this.settings.currentImage + 1; + pagination: function() { + var that = this + var last = this.settings.lastImage + 1 + var position = this.settings.currentImage + 1 - this.elems.pagination - .html(position + ' ' + that.settings.separator2 + last); + this.elems.pagination.html(position + ' ' + that.settings.separator2 + last) }, - storeImgSize : function(img, i) { + storeImgSize: function(img, i) { if (typeof img === 'undefined') { - return; + return } if (!this.settings.images[i].height || !this.settings.images[i].width) { - this.settings.images[i].height = img.height; - this.settings.images[i].width = img.width; + this.settings.images[i].height = img.height + this.settings.images[i].width = img.width } }, - close : function() { - + close: function() { if (this.settings.fullscreenOpen) { - this.exitFullScreen(); - return; + this.exitFullScreen() + return } - var els = [ - this.elems.overlay[0], - this.elems.loader[0], - this.elems.wrapper[0] - ]; - var that = this; - var def = $.when($(els).fadeOut(200)).done(function () { - that.elems.domContainer.removeClass('chocolat-open'); - }); - this.settings.currentImage = false; - - return def; + var els = [this.elems.overlay[0], this.elems.loader[0], this.elems.wrapper[0]] + var that = this + var def = $.when($(els).fadeOut(200)).done(function() { + that.elems.domContainer.removeClass('chocolat-open') + }) + this.settings.currentImage = false + + return def }, - destroy : function() { - this.element.removeData(); - this.element.find(this.settings.imageSelector).off('click.chocolat'); + destroy: function() { + this.element.removeData() + this.element.find(this.settings.imageSelector).off('click.chocolat') if (!this.settings.initialized) { - return; + return } if (this.settings.fullscreenOpen) { - this.exitFullScreen(); + this.exitFullScreen() } - this.settings.currentImage = false; - this.settings.initialized = false; - this.elems.domContainer.removeClass(this._cssClasses.join(' ')); - this.elems.wrapper.remove(); + this.settings.currentImage = false + this.settings.initialized = false + this.elems.domContainer.removeClass(this._cssClasses.join(' ')) + this.elems.wrapper.remove() }, - getOutMarginW : function() { - var left = this.elems.left.outerWidth(true); - var right = this.elems.right.outerWidth(true); - return left + right; + getOutMarginW: function() { + var left = this.elems.left.outerWidth(true) + var right = this.elems.right.outerWidth(true) + return left + right }, - getOutMarginH : function() { - return this.elems.top.outerHeight(true) + this.elems.bottom.outerHeight(true); + getOutMarginH: function() { + return this.elems.top.outerHeight(true) + this.elems.bottom.outerHeight(true) }, - markup : function() { - this.elems.domContainer.addClass('chocolat-open ' + this.settings.className); + markup: function() { + this.elems.domContainer.addClass('chocolat-open ' + this.settings.className) if (this.settings.imageSize == 'cover') { - this.elems.domContainer.addClass('chocolat-cover'); + this.elems.domContainer.addClass('chocolat-cover') } if (this.settings.container !== window) { - this.elems.domContainer.addClass('chocolat-in-container'); + this.elems.domContainer.addClass('chocolat-in-container') } this.elems.wrapper = $('
', { - 'class' : 'chocolat-wrapper', - 'id' : 'chocolat-content-' + this.settings.setIndex - }).appendTo(this.elems.domContainer); + class: 'chocolat-wrapper', + id: 'chocolat-content-' + this.settings.setIndex, + }).appendTo(this.elems.domContainer) this.elems.overlay = $('
', { - 'class' : 'chocolat-overlay' - }).appendTo(this.elems.wrapper); + class: 'chocolat-overlay', + }).appendTo(this.elems.wrapper) this.elems.loader = $('
', { - 'class' : 'chocolat-loader' - }).appendTo(this.elems.wrapper); + class: 'chocolat-loader', + }).appendTo(this.elems.wrapper) this.elems.content = $('
', { - 'class' : 'chocolat-content', - }).appendTo(this.elems.wrapper); + class: 'chocolat-content', + }).appendTo(this.elems.wrapper) this.elems.img = $('', { - 'class' : 'chocolat-img', - 'src' : '' - }).appendTo(this.elems.content); + class: 'chocolat-img', + src: '', + }).appendTo(this.elems.content) this.elems.top = $('
', { - 'class' : 'chocolat-top' - }).appendTo(this.elems.wrapper); + class: 'chocolat-top', + }).appendTo(this.elems.wrapper) this.elems.left = $('
', { - 'class' : 'chocolat-left' - }).appendTo(this.elems.wrapper); + class: 'chocolat-left', + }).appendTo(this.elems.wrapper) this.elems.right = $('
', { - 'class' : 'chocolat-right' - }).appendTo(this.elems.wrapper); + class: 'chocolat-right', + }).appendTo(this.elems.wrapper) this.elems.bottom = $('
', { - 'class' : 'chocolat-bottom' - }).appendTo(this.elems.wrapper); + class: 'chocolat-bottom', + }).appendTo(this.elems.wrapper) this.elems.close = $('', { - 'class' : 'chocolat-close' - }).appendTo(this.elems.top); + class: 'chocolat-close', + }).appendTo(this.elems.top) this.elems.fullscreen = $('', { - 'class' : 'chocolat-fullscreen' - }).appendTo(this.elems.bottom); + class: 'chocolat-fullscreen', + }).appendTo(this.elems.bottom) this.elems.description = $('', { - 'class' : 'chocolat-description' - }).appendTo(this.elems.bottom); + class: 'chocolat-description', + }).appendTo(this.elems.bottom) this.elems.pagination = $('', { - 'class' : 'chocolat-pagination' - }).appendTo(this.elems.bottom); + class: 'chocolat-pagination', + }).appendTo(this.elems.bottom) this.elems.setTitle = $('', { - 'class' : 'chocolat-set-title', - 'html' : this.settings.setTitle - }).appendTo(this.elems.bottom); + class: 'chocolat-set-title', + html: this.settings.setTitle, + }).appendTo(this.elems.bottom) - this.settings.afterMarkup.call(this); + this.settings.afterMarkup.call(this) }, - openFullScreen : function() { - var wrapper = this.elems.wrapper[0]; + openFullScreen: function() { + var wrapper = this.elems.wrapper[0] if (wrapper.requestFullscreen) { - this.settings.fullscreenOpen = true; - wrapper.requestFullscreen(); - } - else if (wrapper.mozRequestFullScreen) { - this.settings.fullscreenOpen = true; - wrapper.mozRequestFullScreen(); - } - else if (wrapper.webkitRequestFullscreen) { - this.settings.fullscreenOpen = true; - wrapper.webkitRequestFullscreen(); - } - else if (wrapper.msRequestFullscreen) { - wrapper.msRequestFullscreen(); - this.settings.fullscreenOpen = true; - } - else { - this.settings.fullscreenOpen = false; + this.settings.fullscreenOpen = true + wrapper.requestFullscreen() + } else if (wrapper.mozRequestFullScreen) { + this.settings.fullscreenOpen = true + wrapper.mozRequestFullScreen() + } else if (wrapper.webkitRequestFullscreen) { + this.settings.fullscreenOpen = true + wrapper.webkitRequestFullscreen() + } else if (wrapper.msRequestFullscreen) { + wrapper.msRequestFullscreen() + this.settings.fullscreenOpen = true + } else { + this.settings.fullscreenOpen = false } }, - exitFullScreen : function() { + exitFullScreen: function() { if (document.exitFullscreen) { - document.exitFullscreen(); - this.settings.fullscreenOpen = false; - } - else if (document.mozCancelFullScreen) { - document.mozCancelFullScreen(); - this.settings.fullscreenOpen = false; - } - else if (document.webkitExitFullscreen) { - document.webkitExitFullscreen(); - this.settings.fullscreenOpen = false; - } - else if (document.msExitFullscreen) { - document.msExitFullscreen(); - this.settings.fullscreenOpen = false; - } - else { - this.settings.fullscreenOpen = true; + document.exitFullscreen() + this.settings.fullscreenOpen = false + } else if (document.mozCancelFullScreen) { + document.mozCancelFullScreen() + this.settings.fullscreenOpen = false + } else if (document.webkitExitFullscreen) { + document.webkitExitFullscreen() + this.settings.fullscreenOpen = false + } else if (document.msExitFullscreen) { + document.msExitFullscreen() + this.settings.fullscreenOpen = false + } else { + this.settings.fullscreenOpen = true } }, - events : function() { - var that = this; - - $(document).off('keydown.chocolat').on('keydown.chocolat', function(e) { - if (that.settings.initialized) { - if (e.keyCode == 37) { - that.change(-1); - } - else if (e.keyCode == 39) { - that.change(1); + events: function() { + var that = this + + $(document) + .off('keydown.chocolat') + .on('keydown.chocolat', function(e) { + if (that.settings.initialized) { + if (e.keyCode == 37) { + that.change(-1) + } else if (e.keyCode == 39) { + that.change(1) + } else if (e.keyCode == 27) { + that.close() + } } - else if (e.keyCode == 27) { - that.close(); - } - } - }); + }) // this.elems.wrapper.find('.chocolat-img') // .off('click.chocolat') // .on('click.chocolat', function(e) { @@ -473,269 +447,284 @@ // } // }); - this.elems.wrapper.find('.chocolat-right') + this.elems.wrapper + .find('.chocolat-right') .off('click.chocolat') .on('click.chocolat', function() { - that.change(+1); - }); + that.change(+1) + }) - this.elems.wrapper.find('.chocolat-left') + this.elems.wrapper + .find('.chocolat-left') .off('click.chocolat') .on('click.chocolat', function() { - return that.change(-1); - }); + return that.change(-1) + }) $([this.elems.overlay[0], this.elems.close[0]]) .off('click.chocolat') .on('click.chocolat', function() { - return that.close(); - }); + return that.close() + }) - this.elems.fullscreen - .off('click.chocolat') - .on('click.chocolat', function() { - if (that.settings.fullscreenOpen) { - that.exitFullScreen(); - return; - } + this.elems.fullscreen.off('click.chocolat').on('click.chocolat', function() { + if (that.settings.fullscreenOpen) { + that.exitFullScreen() + return + } - that.openFullScreen(); - }); + that.openFullScreen() + }) if (that.settings.backgroundClose) { - this.elems.overlay - .off('click.chocolat') - .on('click.chocolat', function() { - return that.close(); - }); + this.elems.overlay.off('click.chocolat').on('click.chocolat', function() { + return that.close() + }) } - this.elems.wrapper - .off('click.chocolat') - .on('click.chocolat', function(e) { - return that.zoomOut(e); - }); + this.elems.wrapper.off('click.chocolat').on('click.chocolat', function(e) { + return that.zoomOut(e) + }) - this.elems.wrapper.find('.chocolat-img') + this.elems.wrapper + .find('.chocolat-img') .off('click.chocolat') .on('click.chocolat', function(e) { - if (that.settings.initialZoomState === null && that.elems.domContainer.hasClass('chocolat-zoomable')) { - e.stopPropagation(); - return that.zoomIn(e); + if ( + that.settings.initialZoomState === null && + that.elems.domContainer.hasClass('chocolat-zoomable') + ) { + e.stopPropagation() + return that.zoomIn(e) } - }); + }) - this.elems.wrapper.mousemove(function( e ) { + this.elems.wrapper.mousemove(function(e) { if (that.settings.initialZoomState === null) { - return; + return } if (that.elems.img.is(':animated')) { - return; + return } - var pos = $(this).offset(); - var height = $(this).height(); - var width = $(this).width(); + var pos = $(this).offset() + var height = $(this).height() + var width = $(this).width() - var currentImage = that.settings.images[that.settings.currentImage]; - var imgWidth = currentImage.width; - var imgHeight = currentImage.height; + var currentImage = that.settings.images[that.settings.currentImage] + var imgWidth = currentImage.width + var imgHeight = currentImage.height - var coord = [e.pageX - width/2 - pos.left, e.pageY - height/2 - pos.top]; + var coord = [e.pageX - width / 2 - pos.left, e.pageY - height / 2 - pos.top] - var mvtX = 0; + var mvtX = 0 if (imgWidth > width) { - var paddingX = that.settings.zoomedPaddingX(imgWidth, width); - mvtX = coord[0] / (width / 2); - mvtX = ((imgWidth - width)/ 2 + paddingX) * mvtX; + var paddingX = that.settings.zoomedPaddingX(imgWidth, width) + mvtX = coord[0] / (width / 2) + mvtX = ((imgWidth - width) / 2 + paddingX) * mvtX } - var mvtY = 0; + var mvtY = 0 if (imgHeight > height) { - var paddingY = that.settings.zoomedPaddingY(imgHeight, height); - mvtY = coord[1] / (height / 2); - mvtY = ((imgHeight - height) / 2 + paddingY) * mvtY; + var paddingY = that.settings.zoomedPaddingY(imgHeight, height) + mvtY = coord[1] / (height / 2) + mvtY = ((imgHeight - height) / 2 + paddingY) * mvtY } var animation = { - 'margin-left': - mvtX + 'px', - 'margin-top': - mvtY + 'px' - }; - if (typeof e.duration !== 'undefined') { - $(that.elems.img).stop(false, true).animate(animation, e.duration); + 'margin-left': -mvtX + 'px', + 'margin-top': -mvtY + 'px', } - else { - $(that.elems.img).stop(false, true).css(animation); + if (typeof e.duration !== 'undefined') { + $(that.elems.img) + .stop(false, true) + .animate(animation, e.duration) + } else { + $(that.elems.img) + .stop(false, true) + .css(animation) } - - }); + }) $(window).on('resize', function() { - if (!that.settings.initialized || that.settings.currentImage === false) { - return; + if (!that.settings.initialized || that.settings.currentImage === false) { + return } that.debounce(50, function() { - var fitting = that.fit(that.settings.currentImage, that.elems.wrapper); - that.center(fitting.width, fitting.height, fitting.left, fitting.top, 0); - that.zoomable(); - }); - }); + var fitting = that.fit(that.settings.currentImage, that.elems.wrapper) + that.center(fitting.width, fitting.height, fitting.left, fitting.top, 0) + that.zoomable() + }) + }) }, - zoomable : function () { - var currentImage = this.settings.images[this.settings.currentImage]; - var wrapperWidth = this.elems.wrapper.width(); - var wrapperHeight = this.elems.wrapper.height(); - - var isImageZoomable = ( this.settings.enableZoom && ( currentImage.width > wrapperWidth || currentImage.height > wrapperHeight)) ? true : false; - var isImageStretched = this.elems.img.width() > currentImage.width || this.elems.img.height() > currentImage.height; + zoomable: function() { + var currentImage = this.settings.images[this.settings.currentImage] + var wrapperWidth = this.elems.wrapper.width() + var wrapperHeight = this.elems.wrapper.height() + var isImageZoomable = + this.settings.enableZoom && + (currentImage.width > wrapperWidth || currentImage.height > wrapperHeight) + ? true + : false + var isImageStretched = + this.elems.img.width() > currentImage.width || + this.elems.img.height() > currentImage.height if (isImageZoomable && !isImageStretched) { - this.elems.domContainer.addClass('chocolat-zoomable'); - } - else { - this.elems.domContainer.removeClass('chocolat-zoomable'); + this.elems.domContainer.addClass('chocolat-zoomable') + } else { + this.elems.domContainer.removeClass('chocolat-zoomable') } }, - zoomIn : function (e) { - this.settings.initialZoomState = this.settings.imageSize; - this.settings.imageSize = 'native'; + zoomIn: function(e) { + this.settings.initialZoomState = this.settings.imageSize + this.settings.imageSize = 'native' - var event = $.Event('mousemove'); - event.pageX = e.pageX; - event.pageY = e.pageY; - event.duration = this.settings.duration; - this.elems.wrapper.trigger(event); + var event = $.Event('mousemove') + event.pageX = e.pageX + event.pageY = e.pageY + event.duration = this.settings.duration + this.elems.wrapper.trigger(event) - this.elems.domContainer.addClass('chocolat-zoomed'); - var fitting = this.fit(this.settings.currentImage, this.elems.wrapper); - return this.center(fitting.width, fitting.height, fitting.left, fitting.top, this.settings.duration); + this.elems.domContainer.addClass('chocolat-zoomed') + var fitting = this.fit(this.settings.currentImage, this.elems.wrapper) + return this.center( + fitting.width, + fitting.height, + fitting.left, + fitting.top, + this.settings.duration + ) }, - zoomOut : function (e, duration) { + zoomOut: function(e, duration) { if (this.settings.initialZoomState === null || this.settings.currentImage === false) { - return; + return } - duration = duration || this.settings.duration; + duration = duration || this.settings.duration - this.settings.imageSize = this.settings.initialZoomState; - this.settings.initialZoomState = null; - this.elems.img.animate({'margin': 0}, duration); + this.settings.imageSize = this.settings.initialZoomState + this.settings.initialZoomState = null + this.elems.img.animate({ margin: 0 }, duration) - this.elems.domContainer.removeClass('chocolat-zoomed'); - var fitting = this.fit(this.settings.currentImage, this.elems.wrapper); - return this.center(fitting.width, fitting.height, fitting.left, fitting.top, duration); + this.elems.domContainer.removeClass('chocolat-zoomed') + var fitting = this.fit(this.settings.currentImage, this.elems.wrapper) + return this.center(fitting.width, fitting.height, fitting.left, fitting.top, duration) }, - setDomContainer : function() { + setDomContainer: function() { // if container == window // domContainer = body - if ( this.settings.container === window) { - this.elems.domContainer = $('body'); - } - else { - this.elems.domContainer = $(this.settings.container); + if (this.settings.container === window) { + this.elems.domContainer = $('body') + } else { + this.elems.domContainer = $(this.settings.container) } }, debounce: function(duration, callback) { - clearTimeout(this.settings.timerDebounce); + clearTimeout(this.settings.timerDebounce) this.settings.timerDebounce = setTimeout(function() { - callback(); - }, duration); + callback() + }, duration) }, api: function() { - var that = this; + var that = this return { - open : function(i){ - i = parseInt(i) || 0; - return that.init(i); + open: function(i) { + i = parseInt(i) || 0 + return that.init(i) }, - close : function(){ - return that.close(); + close: function() { + return that.close() }, - next : function(){ - return that.change(1); + next: function() { + return that.change(1) }, - prev : function(){ - return that.change(-1); + prev: function() { + return that.change(-1) }, - goto : function(i){ // open alias - return that.open(i); + goto: function(i) { + // open alias + return that.open(i) }, - current : function(){ - return that.settings.currentImage; + current: function() { + return that.settings.currentImage }, - place : function(){ - return that.place(that.settings.currentImage, that.settings.duration); + place: function() { + return that.place(that.settings.currentImage, that.settings.duration) }, - destroy : function(){ - return that.destroy(); + destroy: function() { + return that.destroy() }, - set : function(property, value){ - that.settings[property] = value; - return value; + set: function(property, value) { + that.settings[property] = value + return value }, - get : function(property){ - return that.settings[property]; + get: function(property) { + return that.settings[property] }, - getElem : function(name){ - return that.elems[name]; + getElem: function(name) { + return that.elems[name] }, - }; - } - }); + } + }, + }) var defaults = { - container : window, // window or jquery object or jquery selector, or element - imageSelector : '.chocolat-image', - className : '', - imageSize : 'default', // 'default', 'contain', 'cover' or 'native' - initialZoomState : null, - fullScreen : false, - loop : false, - linkImages : true, - duration : 300, - setTitle : '', - separator2 : '/', - setIndex : 0, - firstImage : 0, - lastImage : false, - currentImage : false, - initialized : false, - timer : false, - timerDebounce : false, - images : [], - enableZoom : true, - imageSource : "href", - afterInitialize : function () {}, - afterMarkup : function () {}, - afterImageLoad : function () {}, - zoomedPaddingX : function (canvasWidth, imgWidth) { return 0; }, - zoomedPaddingY : function (canvasHeight, imgHeight) { return 0; }, - }; - - $.fn.Chocolat = function (options) { - return this.each(function() { + container: window, // window or jquery object or jquery selector, or element + imageSelector: '.chocolat-image', + className: '', + imageSize: 'default', // 'default', 'contain', 'cover' or 'native' + initialZoomState: null, + fullScreen: false, + loop: false, + linkImages: true, + duration: 300, + setTitle: '', + separator2: '/', + setIndex: 0, + firstImage: 0, + lastImage: false, + currentImage: false, + initialized: false, + timer: false, + timerDebounce: false, + images: [], + enableZoom: true, + imageSource: 'href', + afterInitialize: function() {}, + afterMarkup: function() {}, + afterImageLoad: function() {}, + zoomedPaddingX: function(canvasWidth, imgWidth) { + return 0 + }, + zoomedPaddingY: function(canvasHeight, imgHeight) { + return 0 + }, + } - calls++; - var settings = $.extend(true, {}, defaults, options, {setIndex:calls} ); + $.fn.Chocolat = function(options) { + return this.each(function() { + calls++ + var settings = $.extend(true, {}, defaults, options, { setIndex: calls }) if (!$.data(this, 'chocolat')) { - $.data(this, 'chocolat', - new Chocolat($(this), settings) - ); + $.data(this, 'chocolat', new Chocolat($(this), settings)) } - }); - }; -})); + }) + } + + return $.fn.Chocolat +}) diff --git a/dist/js/jquery.chocolat.min.js b/dist/js/jquery.chocolat.min.js index 9388e1f..bc422f7 100644 --- a/dist/js/jquery.chocolat.min.js +++ b/dist/js/jquery.chocolat.min.js @@ -1 +1 @@ -!function(t){"object"==typeof module&&"object"==typeof module.exports?module.exports=t(require("jquery"),window,document):t(jQuery,window,document)}(function(t,e,i,s){function n(e,i){var s=this;return this.settings=i,this.elems={},this.element=e,this._cssClasses=["chocolat-open","chocolat-in-container","chocolat-cover","chocolat-zoomable","chocolat-zoomed"],!this.settings.setTitle&&e.data("chocolat-title")&&(this.settings.setTitle=e.data("chocolat-title")),this.element.find(this.settings.imageSelector).each(function(){s.settings.images.push({title:t(this).attr("title"),src:t(this).attr(s.settings.imageSource),height:!1,width:!1})}),this.element.find(this.settings.imageSelector).each(function(e){t(this).off("click.chocolat").on("click.chocolat",function(t){s.init(e),t.preventDefault()})}),this}var o=0;t.extend(n.prototype,{init:function(t){return this.settings.initialized||(this.setDomContainer(),this.markup(),this.events(),this.settings.lastImage=this.settings.images.length-1,this.settings.initialized=!0),this.settings.afterInitialize.call(this),this.load(t)},preload:function(e){var i=t.Deferred();if("undefined"!=typeof this.settings.images[e]){var s=new Image;return s.onload=function(){i.resolve(s)},s.src=this.settings.images[e].src,i}},load:function(e){var i=this;if(this.settings.fullScreen&&this.openFullScreen(),this.settings.currentImage!==e){this.elems.overlay.fadeIn(this.settings.duration),this.elems.wrapper.fadeIn(this.settings.duration),this.elems.domContainer.addClass("chocolat-open"),this.settings.timer=setTimeout(function(){"undefined"!=typeof i.elems&&t.proxy(i.elems.loader.fadeIn(),i)},this.settings.duration);var s=this.preload(e).then(function(t){return i.place(e,t)}).then(function(t){return i.appear(e)}).then(function(t){i.zoomable(),i.settings.afterImageLoad.call(i)}),n=e+1;return"undefined"!=typeof this.settings.images[n]&&this.preload(n),s}},place:function(t,e){var i,s=this;return this.settings.currentImage=t,this.description(),this.pagination(),this.arrows(),this.storeImgSize(e,t),i=this.fit(t,s.elems.wrapper),this.center(i.width,i.height,i.left,i.top,0)},center:function(t,e,i,s,n){return this.elems.content.css("overflow","visible").animate({width:t,height:e,left:i,top:s},n).promise()},appear:function(t){var e=this;clearTimeout(this.settings.timer),this.elems.loader.stop().fadeOut(300,function(){e.elems.img.attr("src",e.settings.images[t].src)})},fit:function(e,i){var s,n,o=this.settings.images[e].height,a=this.settings.images[e].width,l=t(i).height(),r=t(i).width(),c=this.getOutMarginH(),h=this.getOutMarginW(),m=r-h,g=l-c,u=g/m,d=l/r,p=o/a;return"cover"==this.settings.imageSize?pu?(s=g,n=s/p):(n=m,s=n*p),"default"===this.settings.imageSize&&(n>=a||s>=o)&&(n=a,s=o)),{height:s,width:n,top:(l-s)/2,left:(r-n)/2}},change:function(t){this.zoomOut(0),this.zoomable();var e=this.settings.currentImage+parseInt(t);if(e>this.settings.lastImage){if(this.settings.loop)return this.load(0)}else{if(!(e<0))return this.load(e);if(this.settings.loop)return this.load(this.settings.lastImage)}},arrows:function(){this.settings.loop?t([this.elems.left[0],this.elems.right[0]]).addClass("active"):this.settings.linkImages?(this.settings.currentImage==this.settings.lastImage?this.elems.right.removeClass("active"):this.elems.right.addClass("active"),0===this.settings.currentImage?this.elems.left.removeClass("active"):this.elems.left.addClass("active")):t([this.elems.left[0],this.elems.right[0]]).removeClass("active")},description:function(){var t=this;this.elems.description.html(t.settings.images[t.settings.currentImage].title)},pagination:function(){var t=this,e=this.settings.lastImage+1,i=this.settings.currentImage+1;this.elems.pagination.html(i+" "+t.settings.separator2+e)},storeImgSize:function(t,e){"undefined"!=typeof t&&(this.settings.images[e].height&&this.settings.images[e].width||(this.settings.images[e].height=t.height,this.settings.images[e].width=t.width))},close:function(){if(this.settings.fullscreenOpen)return void this.exitFullScreen();var e=[this.elems.overlay[0],this.elems.loader[0],this.elems.wrapper[0]],i=this,s=t.when(t(e).fadeOut(200)).done(function(){i.elems.domContainer.removeClass("chocolat-open")});return this.settings.currentImage=!1,s},destroy:function(){this.element.removeData(),this.element.find(this.settings.imageSelector).off("click.chocolat"),this.settings.initialized&&(this.settings.fullscreenOpen&&this.exitFullScreen(),this.settings.currentImage=!1,this.settings.initialized=!1,this.elems.domContainer.removeClass(this._cssClasses.join(" ")),this.elems.wrapper.remove())},getOutMarginW:function(){var t=this.elems.left.outerWidth(!0),e=this.elems.right.outerWidth(!0);return t+e},getOutMarginH:function(){return this.elems.top.outerHeight(!0)+this.elems.bottom.outerHeight(!0)},markup:function(){this.elems.domContainer.addClass("chocolat-open "+this.settings.className),"cover"==this.settings.imageSize&&this.elems.domContainer.addClass("chocolat-cover"),this.settings.container!==e&&this.elems.domContainer.addClass("chocolat-in-container"),this.elems.wrapper=t("
",{"class":"chocolat-wrapper",id:"chocolat-content-"+this.settings.setIndex}).appendTo(this.elems.domContainer),this.elems.overlay=t("
",{"class":"chocolat-overlay"}).appendTo(this.elems.wrapper),this.elems.loader=t("
",{"class":"chocolat-loader"}).appendTo(this.elems.wrapper),this.elems.content=t("
",{"class":"chocolat-content"}).appendTo(this.elems.wrapper),this.elems.img=t("",{"class":"chocolat-img",src:""}).appendTo(this.elems.content),this.elems.top=t("
",{"class":"chocolat-top"}).appendTo(this.elems.wrapper),this.elems.left=t("
",{"class":"chocolat-left"}).appendTo(this.elems.wrapper),this.elems.right=t("
",{"class":"chocolat-right"}).appendTo(this.elems.wrapper),this.elems.bottom=t("
",{"class":"chocolat-bottom"}).appendTo(this.elems.wrapper),this.elems.close=t("",{"class":"chocolat-close"}).appendTo(this.elems.top),this.elems.fullscreen=t("",{"class":"chocolat-fullscreen"}).appendTo(this.elems.bottom),this.elems.description=t("",{"class":"chocolat-description"}).appendTo(this.elems.bottom),this.elems.pagination=t("",{"class":"chocolat-pagination"}).appendTo(this.elems.bottom),this.elems.setTitle=t("",{"class":"chocolat-set-title",html:this.settings.setTitle}).appendTo(this.elems.bottom),this.settings.afterMarkup.call(this)},openFullScreen:function(){var t=this.elems.wrapper[0];t.requestFullscreen?(this.settings.fullscreenOpen=!0,t.requestFullscreen()):t.mozRequestFullScreen?(this.settings.fullscreenOpen=!0,t.mozRequestFullScreen()):t.webkitRequestFullscreen?(this.settings.fullscreenOpen=!0,t.webkitRequestFullscreen()):t.msRequestFullscreen?(t.msRequestFullscreen(),this.settings.fullscreenOpen=!0):this.settings.fullscreenOpen=!1},exitFullScreen:function(){i.exitFullscreen?(i.exitFullscreen(),this.settings.fullscreenOpen=!1):i.mozCancelFullScreen?(i.mozCancelFullScreen(),this.settings.fullscreenOpen=!1):i.webkitExitFullscreen?(i.webkitExitFullscreen(),this.settings.fullscreenOpen=!1):i.msExitFullscreen?(i.msExitFullscreen(),this.settings.fullscreenOpen=!1):this.settings.fullscreenOpen=!0},events:function(){var s=this;t(i).off("keydown.chocolat").on("keydown.chocolat",function(t){s.settings.initialized&&(37==t.keyCode?s.change(-1):39==t.keyCode?s.change(1):27==t.keyCode&&s.close())}),this.elems.wrapper.find(".chocolat-right").off("click.chocolat").on("click.chocolat",function(){s.change(1)}),this.elems.wrapper.find(".chocolat-left").off("click.chocolat").on("click.chocolat",function(){return s.change(-1)}),t([this.elems.overlay[0],this.elems.close[0]]).off("click.chocolat").on("click.chocolat",function(){return s.close()}),this.elems.fullscreen.off("click.chocolat").on("click.chocolat",function(){return s.settings.fullscreenOpen?void s.exitFullScreen():void s.openFullScreen()}),s.settings.backgroundClose&&this.elems.overlay.off("click.chocolat").on("click.chocolat",function(){return s.close()}),this.elems.wrapper.off("click.chocolat").on("click.chocolat",function(t){return s.zoomOut(t)}),this.elems.wrapper.find(".chocolat-img").off("click.chocolat").on("click.chocolat",function(t){if(null===s.settings.initialZoomState&&s.elems.domContainer.hasClass("chocolat-zoomable"))return t.stopPropagation(),s.zoomIn(t)}),this.elems.wrapper.mousemove(function(e){if(null!==s.settings.initialZoomState&&!s.elems.img.is(":animated")){var i=t(this).offset(),n=t(this).height(),o=t(this).width(),a=s.settings.images[s.settings.currentImage],l=a.width,r=a.height,c=[e.pageX-o/2-i.left,e.pageY-n/2-i.top],h=0;if(l>o){var m=s.settings.zoomedPaddingX(l,o);h=c[0]/(o/2),h=((l-o)/2+m)*h}var g=0;if(r>n){var u=s.settings.zoomedPaddingY(r,n);g=c[1]/(n/2),g=((r-n)/2+u)*g}var d={"margin-left":-h+"px","margin-top":-g+"px"};"undefined"!=typeof e.duration?t(s.elems.img).stop(!1,!0).animate(d,e.duration):t(s.elems.img).stop(!1,!0).css(d)}}),t(e).on("resize",function(){s.settings.initialized&&s.settings.currentImage!==!1&&s.debounce(50,function(){var t=s.fit(s.settings.currentImage,s.elems.wrapper);s.center(t.width,t.height,t.left,t.top,0),s.zoomable()})})},zoomable:function(){var t=this.settings.images[this.settings.currentImage],e=this.elems.wrapper.width(),i=this.elems.wrapper.height(),s=!(!this.settings.enableZoom||!(t.width>e||t.height>i)),n=this.elems.img.width()>t.width||this.elems.img.height()>t.height;s&&!n?this.elems.domContainer.addClass("chocolat-zoomable"):this.elems.domContainer.removeClass("chocolat-zoomable")},zoomIn:function(e){this.settings.initialZoomState=this.settings.imageSize,this.settings.imageSize="native";var i=t.Event("mousemove");i.pageX=e.pageX,i.pageY=e.pageY,i.duration=this.settings.duration,this.elems.wrapper.trigger(i),this.elems.domContainer.addClass("chocolat-zoomed");var s=this.fit(this.settings.currentImage,this.elems.wrapper);return this.center(s.width,s.height,s.left,s.top,this.settings.duration)},zoomOut:function(t,e){if(null!==this.settings.initialZoomState&&this.settings.currentImage!==!1){e=e||this.settings.duration,this.settings.imageSize=this.settings.initialZoomState,this.settings.initialZoomState=null,this.elems.img.animate({margin:0},e),this.elems.domContainer.removeClass("chocolat-zoomed");var i=this.fit(this.settings.currentImage,this.elems.wrapper);return this.center(i.width,i.height,i.left,i.top,e)}},setDomContainer:function(){this.settings.container===e?this.elems.domContainer=t("body"):this.elems.domContainer=t(this.settings.container)},debounce:function(t,e){clearTimeout(this.settings.timerDebounce),this.settings.timerDebounce=setTimeout(function(){e()},t)},api:function(){var t=this;return{open:function(e){return e=parseInt(e)||0,t.init(e)},close:function(){return t.close()},next:function(){return t.change(1)},prev:function(){return t.change(-1)},"goto":function(e){return t.open(e)},current:function(){return t.settings.currentImage},place:function(){return t.place(t.settings.currentImage,t.settings.duration)},destroy:function(){return t.destroy()},set:function(e,i){return t.settings[e]=i,i},get:function(e){return t.settings[e]},getElem:function(e){return t.elems[e]}}}});var a={container:e,imageSelector:".chocolat-image",className:"",imageSize:"default",initialZoomState:null,fullScreen:!1,loop:!1,linkImages:!0,duration:300,setTitle:"",separator2:"/",setIndex:0,firstImage:0,lastImage:!1,currentImage:!1,initialized:!1,timer:!1,timerDebounce:!1,images:[],enableZoom:!0,imageSource:"href",afterInitialize:function(){},afterMarkup:function(){},afterImageLoad:function(){},zoomedPaddingX:function(t,e){return 0},zoomedPaddingY:function(t,e){return 0}};t.fn.Chocolat=function(e){return this.each(function(){o++;var i=t.extend(!0,{},a,e,{setIndex:o});t.data(this,"chocolat")||t.data(this,"chocolat",new n(t(this),i))})}}); \ No newline at end of file +!function(t){"object"==typeof module&&"object"==typeof module.exports?module.exports=t(require("jquery"),window,document):t(jQuery,window,document)}(function(t,e,i,s){function n(e,i){var s=this;return this.settings=i,this.elems={},this.element=e,this._cssClasses=["chocolat-open","chocolat-in-container","chocolat-cover","chocolat-zoomable","chocolat-zoomed"],!this.settings.setTitle&&e.data("chocolat-title")&&(this.settings.setTitle=e.data("chocolat-title")),this.element.find(this.settings.imageSelector).each(function(){s.settings.images.push({title:t(this).attr("title"),src:t(this).attr(s.settings.imageSource),height:!1,width:!1})}),this.element.find(this.settings.imageSelector).each(function(e){t(this).off("click.chocolat").on("click.chocolat",function(t){s.init(e),t.preventDefault()})}),this}var o=0;t.extend(n.prototype,{init:function(t){return this.settings.initialized||(this.setDomContainer(),this.markup(),this.events(),this.settings.lastImage=this.settings.images.length-1,this.settings.initialized=!0),this.settings.afterInitialize.call(this),this.load(t)},preload:function(e){var i=t.Deferred();if("undefined"!=typeof this.settings.images[e]){var s=new Image;return s.onload=function(){i.resolve(s)},s.src=this.settings.images[e].src,i}},load:function(e){var i=this;if(this.settings.fullScreen&&this.openFullScreen(),this.settings.currentImage!==e){this.elems.overlay.fadeIn(this.settings.duration),this.elems.wrapper.fadeIn(this.settings.duration),this.elems.domContainer.addClass("chocolat-open"),this.settings.timer=setTimeout(function(){"undefined"!=typeof i.elems&&t.proxy(i.elems.loader.fadeIn(),i)},this.settings.duration);var s=this.preload(e).then(function(t){return i.place(e,t)}).then(function(t){return i.appear(e)}).then(function(t){i.zoomable(),i.settings.afterImageLoad.call(i)}),n=e+1;return"undefined"!=typeof this.settings.images[n]&&this.preload(n),s}},place:function(t,e){var i,s=this;return this.settings.currentImage=t,this.description(),this.pagination(),this.arrows(),this.storeImgSize(e,t),i=this.fit(t,s.elems.wrapper),this.center(i.width,i.height,i.left,i.top,0)},center:function(t,e,i,s,n){return this.elems.content.css("overflow","visible").animate({width:t,height:e,left:i,top:s},n).promise()},appear:function(t){var e=this;clearTimeout(this.settings.timer),this.elems.loader.stop().fadeOut(300,function(){e.elems.img.attr("src",e.settings.images[t].src)})},fit:function(e,i){var s,n,o=this.settings.images[e].height,a=this.settings.images[e].width,l=t(i).height(),r=t(i).width(),c=this.getOutMarginH(),h=this.getOutMarginW(),m=r-h,g=l-c,u=g/m,d=l/r,f=o/a;return"cover"==this.settings.imageSize?fu?(s=g,n=s/f):(n=m,s=n*f),"default"===this.settings.imageSize&&(n>=a||s>=o)&&(n=a,s=o)),{height:s,width:n,top:(l-s)/2,left:(r-n)/2}},change:function(t){this.zoomOut(0),this.zoomable();var e=this.settings.currentImage+parseInt(t);if(e>this.settings.lastImage){if(this.settings.loop)return this.load(0)}else{if(!(e<0))return this.load(e);if(this.settings.loop)return this.load(this.settings.lastImage)}},arrows:function(){this.settings.loop?t([this.elems.left[0],this.elems.right[0]]).addClass("active"):this.settings.linkImages?(this.settings.currentImage==this.settings.lastImage?this.elems.right.removeClass("active"):this.elems.right.addClass("active"),0===this.settings.currentImage?this.elems.left.removeClass("active"):this.elems.left.addClass("active")):t([this.elems.left[0],this.elems.right[0]]).removeClass("active")},description:function(){var t=this;this.elems.description.html(t.settings.images[t.settings.currentImage].title)},pagination:function(){var t=this,e=this.settings.lastImage+1,i=this.settings.currentImage+1;this.elems.pagination.html(i+" "+t.settings.separator2+e)},storeImgSize:function(t,e){"undefined"!=typeof t&&(this.settings.images[e].height&&this.settings.images[e].width||(this.settings.images[e].height=t.height,this.settings.images[e].width=t.width))},close:function(){if(this.settings.fullscreenOpen)return void this.exitFullScreen();var e=[this.elems.overlay[0],this.elems.loader[0],this.elems.wrapper[0]],i=this,s=t.when(t(e).fadeOut(200)).done(function(){i.elems.domContainer.removeClass("chocolat-open")});return this.settings.currentImage=!1,s},destroy:function(){this.element.removeData(),this.element.find(this.settings.imageSelector).off("click.chocolat"),this.settings.initialized&&(this.settings.fullscreenOpen&&this.exitFullScreen(),this.settings.currentImage=!1,this.settings.initialized=!1,this.elems.domContainer.removeClass(this._cssClasses.join(" ")),this.elems.wrapper.remove())},getOutMarginW:function(){var t=this.elems.left.outerWidth(!0),e=this.elems.right.outerWidth(!0);return t+e},getOutMarginH:function(){return this.elems.top.outerHeight(!0)+this.elems.bottom.outerHeight(!0)},markup:function(){this.elems.domContainer.addClass("chocolat-open "+this.settings.className),"cover"==this.settings.imageSize&&this.elems.domContainer.addClass("chocolat-cover"),this.settings.container!==e&&this.elems.domContainer.addClass("chocolat-in-container"),this.elems.wrapper=t("
",{"class":"chocolat-wrapper",id:"chocolat-content-"+this.settings.setIndex}).appendTo(this.elems.domContainer),this.elems.overlay=t("
",{"class":"chocolat-overlay"}).appendTo(this.elems.wrapper),this.elems.loader=t("
",{"class":"chocolat-loader"}).appendTo(this.elems.wrapper),this.elems.content=t("
",{"class":"chocolat-content"}).appendTo(this.elems.wrapper),this.elems.img=t("",{"class":"chocolat-img",src:""}).appendTo(this.elems.content),this.elems.top=t("
",{"class":"chocolat-top"}).appendTo(this.elems.wrapper),this.elems.left=t("
",{"class":"chocolat-left"}).appendTo(this.elems.wrapper),this.elems.right=t("
",{"class":"chocolat-right"}).appendTo(this.elems.wrapper),this.elems.bottom=t("
",{"class":"chocolat-bottom"}).appendTo(this.elems.wrapper),this.elems.close=t("",{"class":"chocolat-close"}).appendTo(this.elems.top),this.elems.fullscreen=t("",{"class":"chocolat-fullscreen"}).appendTo(this.elems.bottom),this.elems.description=t("",{"class":"chocolat-description"}).appendTo(this.elems.bottom),this.elems.pagination=t("",{"class":"chocolat-pagination"}).appendTo(this.elems.bottom),this.elems.setTitle=t("",{"class":"chocolat-set-title",html:this.settings.setTitle}).appendTo(this.elems.bottom),this.settings.afterMarkup.call(this)},openFullScreen:function(){var t=this.elems.wrapper[0];t.requestFullscreen?(this.settings.fullscreenOpen=!0,t.requestFullscreen()):t.mozRequestFullScreen?(this.settings.fullscreenOpen=!0,t.mozRequestFullScreen()):t.webkitRequestFullscreen?(this.settings.fullscreenOpen=!0,t.webkitRequestFullscreen()):t.msRequestFullscreen?(t.msRequestFullscreen(),this.settings.fullscreenOpen=!0):this.settings.fullscreenOpen=!1},exitFullScreen:function(){i.exitFullscreen?(i.exitFullscreen(),this.settings.fullscreenOpen=!1):i.mozCancelFullScreen?(i.mozCancelFullScreen(),this.settings.fullscreenOpen=!1):i.webkitExitFullscreen?(i.webkitExitFullscreen(),this.settings.fullscreenOpen=!1):i.msExitFullscreen?(i.msExitFullscreen(),this.settings.fullscreenOpen=!1):this.settings.fullscreenOpen=!0},events:function(){var s=this;t(i).off("keydown.chocolat").on("keydown.chocolat",function(t){s.settings.initialized&&(37==t.keyCode?s.change(-1):39==t.keyCode?s.change(1):27==t.keyCode&&s.close())}),this.elems.wrapper.find(".chocolat-right").off("click.chocolat").on("click.chocolat",function(){s.change(1)}),this.elems.wrapper.find(".chocolat-left").off("click.chocolat").on("click.chocolat",function(){return s.change(-1)}),t([this.elems.overlay[0],this.elems.close[0]]).off("click.chocolat").on("click.chocolat",function(){return s.close()}),this.elems.fullscreen.off("click.chocolat").on("click.chocolat",function(){return s.settings.fullscreenOpen?void s.exitFullScreen():void s.openFullScreen()}),s.settings.backgroundClose&&this.elems.overlay.off("click.chocolat").on("click.chocolat",function(){return s.close()}),this.elems.wrapper.off("click.chocolat").on("click.chocolat",function(t){return s.zoomOut(t)}),this.elems.wrapper.find(".chocolat-img").off("click.chocolat").on("click.chocolat",function(t){if(null===s.settings.initialZoomState&&s.elems.domContainer.hasClass("chocolat-zoomable"))return t.stopPropagation(),s.zoomIn(t)}),this.elems.wrapper.mousemove(function(e){if(null!==s.settings.initialZoomState&&!s.elems.img.is(":animated")){var i=t(this).offset(),n=t(this).height(),o=t(this).width(),a=s.settings.images[s.settings.currentImage],l=a.width,r=a.height,c=[e.pageX-o/2-i.left,e.pageY-n/2-i.top],h=0;if(l>o){var m=s.settings.zoomedPaddingX(l,o);h=c[0]/(o/2),h=((l-o)/2+m)*h}var g=0;if(r>n){var u=s.settings.zoomedPaddingY(r,n);g=c[1]/(n/2),g=((r-n)/2+u)*g}var d={"margin-left":-h+"px","margin-top":-g+"px"};"undefined"!=typeof e.duration?t(s.elems.img).stop(!1,!0).animate(d,e.duration):t(s.elems.img).stop(!1,!0).css(d)}}),t(e).on("resize",function(){s.settings.initialized&&s.settings.currentImage!==!1&&s.debounce(50,function(){var t=s.fit(s.settings.currentImage,s.elems.wrapper);s.center(t.width,t.height,t.left,t.top,0),s.zoomable()})})},zoomable:function(){var t=this.settings.images[this.settings.currentImage],e=this.elems.wrapper.width(),i=this.elems.wrapper.height(),s=!(!this.settings.enableZoom||!(t.width>e||t.height>i)),n=this.elems.img.width()>t.width||this.elems.img.height()>t.height;s&&!n?this.elems.domContainer.addClass("chocolat-zoomable"):this.elems.domContainer.removeClass("chocolat-zoomable")},zoomIn:function(e){this.settings.initialZoomState=this.settings.imageSize,this.settings.imageSize="native";var i=t.Event("mousemove");i.pageX=e.pageX,i.pageY=e.pageY,i.duration=this.settings.duration,this.elems.wrapper.trigger(i),this.elems.domContainer.addClass("chocolat-zoomed");var s=this.fit(this.settings.currentImage,this.elems.wrapper);return this.center(s.width,s.height,s.left,s.top,this.settings.duration)},zoomOut:function(t,e){if(null!==this.settings.initialZoomState&&this.settings.currentImage!==!1){e=e||this.settings.duration,this.settings.imageSize=this.settings.initialZoomState,this.settings.initialZoomState=null,this.elems.img.animate({margin:0},e),this.elems.domContainer.removeClass("chocolat-zoomed");var i=this.fit(this.settings.currentImage,this.elems.wrapper);return this.center(i.width,i.height,i.left,i.top,e)}},setDomContainer:function(){this.settings.container===e?this.elems.domContainer=t("body"):this.elems.domContainer=t(this.settings.container)},debounce:function(t,e){clearTimeout(this.settings.timerDebounce),this.settings.timerDebounce=setTimeout(function(){e()},t)},api:function(){var t=this;return{open:function(e){return e=parseInt(e)||0,t.init(e)},close:function(){return t.close()},next:function(){return t.change(1)},prev:function(){return t.change(-1)},"goto":function(e){return t.open(e)},current:function(){return t.settings.currentImage},place:function(){return t.place(t.settings.currentImage,t.settings.duration)},destroy:function(){return t.destroy()},set:function(e,i){return t.settings[e]=i,i},get:function(e){return t.settings[e]},getElem:function(e){return t.elems[e]}}}});var a={container:e,imageSelector:".chocolat-image",className:"",imageSize:"default",initialZoomState:null,fullScreen:!1,loop:!1,linkImages:!0,duration:300,setTitle:"",separator2:"/",setIndex:0,firstImage:0,lastImage:!1,currentImage:!1,initialized:!1,timer:!1,timerDebounce:!1,images:[],enableZoom:!0,imageSource:"href",afterInitialize:function(){},afterMarkup:function(){},afterImageLoad:function(){},zoomedPaddingX:function(t,e){return 0},zoomedPaddingY:function(t,e){return 0}};return t.fn.Chocolat=function(e){return this.each(function(){o++;var i=t.extend(!0,{},a,e,{setIndex:o});t.data(this,"chocolat")||t.data(this,"chocolat",new n(t(this),i))})},t.fn.Chocolat}); \ No newline at end of file diff --git a/src/js/jquery.chocolat.js b/src/js/jquery.chocolat.js index a168feb..aa3cd2c 100644 --- a/src/js/jquery.chocolat.js +++ b/src/js/jquery.chocolat.js @@ -725,4 +725,6 @@ } }) } + + return $.fn.Chocolat })