diff --git a/src/js/core.js b/src/js/core.js index a295c7e..c8fdd79 100644 --- a/src/js/core.js +++ b/src/js/core.js @@ -1,10 +1,9 @@ /** - * Private Static Constants + * Private static constants */ var $W = $(window), $D = $(document), - CLICK_EVENT = 'click', RESIZE_EVENT = 'resize', KEYDOWN_EVENT = 'keydown', @@ -12,11 +11,9 @@ var $W = $(window), TOUCH_START_EVENT = supportTouch() ? 'touchstart' : 'mousedown', TOUCH_MOVE_EVENT = supportTouch() ? 'touchmove' : 'mousemove', TOUCH_END_EVENT = supportTouch() ? 'touchend' : 'mouseup', - NS = 'magnify', EVENT_NS = '.' + NS, - - // plugin default options + // Plugin default options DEFAULTS = { // Enable modal to drag draggable: true, @@ -61,10 +58,7 @@ var $W = $(window), maxRatio: 16, // Toolbar options in header - headToolbar: [ - 'maximize', - 'close' - ], + headToolbar: ['maximize', 'close'], // Toolbar options in footer footToolbar: [ @@ -79,20 +73,23 @@ var $W = $(window), // Customize button icon icons: { - minimize: '\ + minimize: + '\ \ ', - maximize: '\ + maximize: + '\ \ ', - close: '\ + close: + '\ \ ', - zoomIn: '\ + zoomIn: + '\ \ ', - zoomOut: '\ + zoomOut: + '\ \ ', - prev: '\ + prev: + '\ \ ', - next: '\ + next: + '\ \ ', - fullscreen: '\ + fullscreen: + '\ \ ', - actualSize: '\ + actualSize: + '\ \ ', - rotateLeft: '\ + rotateLeft: + '\ \ ', - rotateRight: '\ + rotateRight: + '\ ' : ''); + _createTitle: function() { + return this.options.title ? '
' : ''; }, - render: function () { - + render: function() { var btnsTpl = { - minimize: '', - maximize: '', - close: '', - zoomIn: '', - zoomOut: '', - prev: '', - next: '', - fullscreen: '', - actualSize: '', - rotateLeft: '', - rotateRight: '' }; - // magnify base HTML + // Magnify base HTML var magnifyHTML = '
\
\
' + - this._createBtns(this.options.headToolbar, btnsTpl) + '\ + this._createBtns(this.options.headToolbar, btnsTpl) + + '\
' + - this._createTitle() + '\ + this._createTitle() + + '\
\
\ \
\
\
' + - this._createBtns(this.options.footToolbar, btnsTpl) + '\ + this._createBtns(this.options.footToolbar, btnsTpl) + + '\
\
\
'; return magnifyHTML; - }, - build: function () { - + build: function() { // Create magnify HTML string var magnifyHTML = this.render(); @@ -494,23 +510,25 @@ Magnify.prototype = { this.$magnify.css('z-index', PUBLIC_VARS['zIndex']); // Set handle element of draggable - if (!this.options.dragHandle || this.options.dragHandle === '.magnify-modal') { + if ( + !this.options.dragHandle || + this.options.dragHandle === '.magnify-modal' + ) { this.dragHandle = this.$magnify; } else { this.dragHandle = this.$magnify.find(this.options.dragHandle); } - }, - open: function () { - + open: function() { if (!this.options.multiInstances) { - $('.magnify-modal').eq(0).remove(); + $('.magnify-modal') + .eq(0) + .remove(); } // Fixed modal position bug if (!$('.magnify-modal').length && this.options.fixedContent) { - - $('html').css({ 'overflow': 'hidden' }); + $('html').css({ overflow: 'hidden' }); if (hasScrollbar()) { var scrollbarWidth = getScrollbarWidth(); @@ -518,7 +536,6 @@ Magnify.prototype = { $('html').css({ 'padding-right': scrollbarWidth }); } } - } this.build(); @@ -533,10 +550,8 @@ Magnify.prototype = { this.setModalPos(this.$magnify); this._triggerHook('opened', this.$el); - }, - close: function (el) { - + close: function(el) { this._triggerHook('beforeClose', this.$el); // Remove instance @@ -551,7 +566,7 @@ Magnify.prototype = { // Fixed modal position bug if (zeroModal && this.options.fixedContent) { - $('html').css({ 'overflow': '', 'padding-right': '' }); + $('html').css({ overflow: '', 'padding-right': '' }); } // Reset zIndex after close @@ -566,10 +581,8 @@ Magnify.prototype = { } this._triggerHook('closed', this.$el); - }, - setModalPos: function (modal) { - + setModalPos: function(modal) { var winWidth = $W.width(), winHeight = $W.height(), scrollLeft = $D.scrollLeft(), @@ -580,7 +593,6 @@ Magnify.prototype = { // Set modal maximized when init if (this.options.initMaximized) { - modal.addClass('magnify-maximize'); modal.css({ @@ -592,9 +604,7 @@ Magnify.prototype = { this.isOpened = true; this.isMaximized = true; - } else { - // Make the modal in windows center modal.css({ width: modalWidth, @@ -602,19 +612,16 @@ Magnify.prototype = { left: (winWidth - modalWidth) / 2 + scrollLeft + 'px', top: (winHeight - modalHeight) / 2 + scrollTop + 'px' }); - } - }, - setModalSize: function (img) { - + setModalSize: function(img) { var self = this, winWidth = $W.width(), winHeight = $W.height(), scrollLeft = $D.scrollLeft(), scrollTop = $D.scrollTop(); - // stage css value + // Stage css value var stageCSS = { left: this.$stage.css('left'), right: this.$stage.css('right'), @@ -627,19 +634,22 @@ Magnify.prototype = { }; // Modal size should calc with stage css value - var modalWidth = img.width + - parseFloat(stageCSS.left) + - parseFloat(stageCSS.right) + - parseFloat(stageCSS.borderLeft) + - parseFloat(stageCSS.borderRight), - modalHeight = img.height + + var modalWidth = + img.width + + parseFloat(stageCSS.left) + + parseFloat(stageCSS.right) + + parseFloat(stageCSS.borderLeft) + + parseFloat(stageCSS.borderRight), + modalHeight = + img.height + parseFloat(stageCSS.top) + parseFloat(stageCSS.bottom) + parseFloat(stageCSS.borderTop) + parseFloat(stageCSS.borderBottom); - var gapThreshold = (this.options.gapThreshold > 0 ? this.options.gapThreshold : 0) + 1, - // modal scale to window + var gapThreshold = + (this.options.gapThreshold > 0 ? this.options.gapThreshold : 0) + 1, + // Modal scale to window scale = Math.min( winWidth / (modalWidth * gapThreshold), winHeight / (modalHeight * gapThreshold), @@ -649,8 +659,12 @@ Magnify.prototype = { var minWidth = Math.max(modalWidth * scale, this.options.modalWidth), minHeight = Math.max(modalHeight * scale, this.options.modalHeight); - minWidth = this.options.fixedModalSize ? this.options.modalWidth : Math.round(minWidth); - minHeight = this.options.fixedModalSize ? this.options.modalHeight : Math.round(minHeight); + minWidth = this.options.fixedModalSize + ? this.options.modalWidth + : Math.round(minWidth); + minHeight = this.options.fixedModalSize + ? this.options.modalHeight + : Math.round(minHeight); var modalCSSObj = { width: minWidth + 'px', @@ -661,35 +675,36 @@ Magnify.prototype = { // Add modal init animation if (this.options.initAnimation) { - - this.$magnify.animate(modalCSSObj, function () { + this.$magnify.animate(modalCSSObj, function() { self.setImageSize(img); }); - } else { - this.$magnify.css(modalCSSObj); this.setImageSize(img); - } this.isOpened = true; - }, getImageScaleToStage: function(stageWidth, stageHeight) { - var scale = 1; if (!this.isRotated) { - scale = Math.min(stageWidth / this.img.width, stageHeight / this.img.height, 1); + scale = Math.min( + stageWidth / this.img.width, + stageHeight / this.img.height, + 1 + ); } else { - scale = Math.min(stageWidth / this.img.height, stageHeight / this.img.width, 1); + scale = Math.min( + stageWidth / this.img.height, + stageHeight / this.img.width, + 1 + ); } return scale; }, - setImageSize: function (img) { - + setImageSize: function(img) { var $image = isIE8() ? this.$stage.find('.magnify-image') : this.$image; var stageData = { @@ -697,10 +712,7 @@ Magnify.prototype = { h: this.$stage.height() }; - var scale = this.getImageScaleToStage( - stageData.w, - stageData.h - ); + var scale = this.getImageScaleToStage(stageData.w, stageData.h); $image.css({ width: Math.ceil(img.width * scale) + 'px', @@ -737,14 +749,14 @@ Magnify.prototype = { ); // Just execute before image loaded - if(!this.imgLoaded){ + if (!this.imgLoaded) { // loader end this.$magnify.find('.magnify-loader').remove(); // Remove class must when image setting end this.$stage.removeClass('stage-ready'); this.$image.removeClass('image-ready'); - + // Add image init animation if (this.options.initAnimation && !this.options.progressiveLoading) { $image.fadeIn(); @@ -752,10 +764,8 @@ Magnify.prototype = { this.imgLoaded = true; } - }, - loadImg: function (imgSrc, fn, err) { - + loadImg: function(imgSrc, fn, err) { var self = this; // Reset image @@ -765,7 +775,7 @@ Magnify.prototype = { this.imgLoaded = false; - // loader start + // Loader start this.$magnify.append('
'); // Add class before image loaded @@ -777,55 +787,59 @@ Magnify.prototype = { } if (isIE8()) { - this.$stage.html(''); + this.$stage.html( + '' + ); } else { this.$image.attr('src', imgSrc); } - preloadImg(imgSrc, function (img) { - // Store HTMLImageElement - self.img = img; + preloadImg( + imgSrc, + function(img) { + // Store HTMLImageElement + self.img = img; - // Store original data - self.imageData = { - originalWidth: img.width, - originalHeight: img.height - }; - - if (self.isMaximized || (self.isOpened && self.options.fixedModalPos)) { - self.setImageSize(img); - } else { - self.setModalSize(img); - } - - // callback of image loaded successfully - if(fn){ - fn.call(); - } + // Store original data + self.imageData = { + originalWidth: img.width, + originalHeight: img.height + }; - }, function () { - // loader end - self.$magnify.find('.magnify-loader').remove(); + if (self.isMaximized || (self.isOpened && self.options.fixedModalPos)) { + self.setImageSize(img); + } else { + self.setModalSize(img); + } - // callback of image loading failed - if(err){ - err.call(); + // Callback of image loaded successfully + if (fn) { + fn.call(); + } + }, + function() { + // Loader end + self.$magnify.find('.magnify-loader').remove(); + + // Callback of image loading failed + if (err) { + err.call(); + } } - }); + ); if (this.options.title) { this.setImgTitle(imgSrc); } - }, - getImgGroup: function (list, imgSrc) { - + getImgGroup: function(list, imgSrc) { var self = this; self.groupData = []; - $(list).each(function (index, item) { - + $(list).each(function(index, item) { var src = getImgSrc(this); self.groupData.push({ @@ -836,30 +850,23 @@ Magnify.prototype = { if (imgSrc === src) { self.groupIndex = index; } - }); - }, - setImgTitle: function (url) { - + setImgTitle: function(url) { var index = this.groupIndex, caption = this.groupData[index].caption, caption = caption ? caption : getImageNameFromUrl(url); this.$title.html(caption); - }, - jump: function (step) { - + jump: function(step) { this._triggerHook('beforeChange', this.groupIndex); this.groupIndex = this.groupIndex + step; this.jumpTo(this.groupIndex); - }, - jumpTo: function (index) { - + jumpTo: function(index) { var self = this; index = index % this.groupData.length; @@ -872,15 +879,17 @@ Magnify.prototype = { this.groupIndex = index; - this.loadImg(this.groupData[index].src, function () { - self._triggerHook('changed', index); - }, function () { - self._triggerHook('changed', index); - }); - + this.loadImg( + this.groupData[index].src, + function() { + self._triggerHook('changed', index); + }, + function() { + self._triggerHook('changed', index); + } + ); }, - wheel: function (e) { - + wheel: function(e) { e.preventDefault(); var delta = 1; @@ -893,27 +902,25 @@ Magnify.prototype = { delta = e.originalEvent.detail > 0 ? 1 : -1; } - // ratio threshold + // Ratio threshold var ratio = -delta * this.options.ratioThreshold; - // mouse point position relative to stage + // Mouse point position relative to stage var pointer = { x: e.originalEvent.clientX - this.$stage.offset().left + $D.scrollLeft(), y: e.originalEvent.clientY - this.$stage.offset().top + $D.scrollTop() }; this.zoom(ratio, pointer, e); - }, - zoom: function (ratio, origin, e) { - + zoom: function(ratio, origin, e) { this.$image = isIE8() ? this.$stage.find('.magnify-image') : this.$image; - // zoom out ratio & zoom in ratio - ratio = ratio < 0 ? (1 / (1 - ratio)) : (1 + ratio); + // Zoom out ratio & Zoom in ratio + ratio = ratio < 0 ? 1 / (1 - ratio) : 1 + ratio; - // image ratio - ratio = this.$image.width() / this.imageData.originalWidth * ratio; + // Image ratio + ratio = (this.$image.width() / this.imageData.originalWidth) * ratio; // Fixed digital error // if (ratio > 0.95 && ratio < 1.05) { @@ -925,10 +932,8 @@ Magnify.prototype = { } this.zoomTo(ratio, origin, e); - }, - zoomTo: function (ratio, origin, e) { - + zoomTo: function(ratio, origin, e) { var $image = isIE8() ? this.$stage.find('.magnify-image') : this.$image, $stage = this.$stage, imgData = { @@ -938,7 +943,7 @@ Magnify.prototype = { y: this.imageData.top }; - // image stage position + // Image stage position // We will use it to calc the relative position of image var stageData = { w: $stage.width(), @@ -950,8 +955,8 @@ Magnify.prototype = { var newWidth = this.imageData.originalWidth * ratio, newHeight = this.imageData.originalHeight * ratio, // Think about it for a while - newLeft = origin.x - (origin.x - imgData.x) / imgData.w * newWidth, - newTop = origin.y - (origin.y - imgData.y) / imgData.h * newHeight; + newLeft = origin.x - ((origin.x - imgData.x) / imgData.w) * newWidth, + newTop = origin.y - ((origin.y - imgData.y) / imgData.h) * newHeight; // δ is the difference between image new width and new height var δ = !this.isRotated ? 0 : (newWidth - newHeight) / 2, @@ -961,31 +966,27 @@ Magnify.prototype = { var offsetX = stageData.w - newWidth, offsetY = stageData.h - newHeight; - // zoom out & zoom in condition + // Zoom out & Zoom in condition // It's important and it takes me a lot of time to get it // The conditions with image rotate 90 degree drive me crazy alomst! if (imgNewHeight <= stageData.h) { newTop = (stageData.h - newHeight) / 2; } else { - newTop = newTop > δ - ? δ - : (newTop > (offsetY - δ) - ? newTop - : (offsetY - δ)); + newTop = newTop > δ ? δ : newTop > offsetY - δ ? newTop : offsetY - δ; } if (imgNewWidth <= stageData.w) { newLeft = (stageData.w - newWidth) / 2; } else { - newLeft = newLeft > -δ - ? -δ - : (newLeft > (offsetX + δ) - ? newLeft - : (offsetX + δ)); + newLeft = + newLeft > -δ ? -δ : newLeft > offsetX + δ ? newLeft : offsetX + δ; } - // if the image scale get to the critical point - if (Math.abs(this.imageData.initWidth - newWidth) < this.imageData.initWidth * 0.05) { + // If the image scale get to the critical point + if ( + Math.abs(this.imageData.initWidth - newWidth) < + this.imageData.initWidth * 0.05 + ) { this.setImageSize(this.img); } else { $image.css({ @@ -1017,10 +1018,8 @@ Magnify.prototype = { left: newLeft, top: newTop }); - }, - rotate: function (angle) { - + rotate: function(angle) { this.rotateAngle = this.rotateAngle + angle; if ((this.rotateAngle / 90) % 2 === 0) { @@ -1030,14 +1029,12 @@ Magnify.prototype = { } this.rotateTo(this.rotateAngle); - }, - rotateTo: function (angle) { - + rotateTo: function(angle) { var self = this, $image = isIE8() ? this.$stage.find('.magnify-image') : this.$image; - // depend on jQueryRotate.js + // Depend on jQueryRotate.js $image.rotate({ angle: angle }); @@ -1049,16 +1046,12 @@ Magnify.prototype = { // Remove grab cursor when rotate this.$stage.removeClass('is-grab'); - }, - resize: function () { - + resize: function() { var self = this; - var resizeHandler = throttle(function () { - + var resizeHandler = throttle(function() { if (self.isOpened) { - if (self.isMaximized) { self.setImageSize({ width: self.imageData.originalWidth, @@ -1070,16 +1063,12 @@ Magnify.prototype = { height: self.imageData.originalHeight }); } - } - }, 500); return resizeHandler; - }, - maximize: function () { - + maximize: function() { var self = this; if (!this.isMaximized) { @@ -1101,9 +1090,7 @@ Magnify.prototype = { }); this.isMaximized = true; - } else { - this.$magnify.removeClass('magnify-maximize'); this.$magnify.css({ @@ -1128,15 +1115,11 @@ Magnify.prototype = { width: this.imageData.originalWidth, height: this.imageData.originalHeight }); - }, - fullscreen: function () { - + fullscreen: function() { requestFullscreen(this.$magnify[0]); - }, - keydown: function (e) { - + keydown: function(e) { var self = this; if (!this.options.keyboard) { @@ -1148,140 +1131,163 @@ Magnify.prototype = { altKey = e.altKey || e.metaKey; switch (keyCode) { - // ← - case 37: - self.jump(-1); - break; + // ← + case 37: + self.jump(-1); + break; // → - case 39: - self.jump(1); - break; + case 39: + self.jump(1); + break; // + - case 187: - self.zoom( - self.options.ratioThreshold * 3, - { x: self.$stage.width() / 2, y: self.$stage.height() / 2 }, - e - ); - break; + case 187: + self.zoom( + self.options.ratioThreshold * 3, + { x: self.$stage.width() / 2, y: self.$stage.height() / 2 }, + e + ); + break; // - - case 189: - self.zoom( - -self.options.ratioThreshold * 3, - { x: self.$stage.width() / 2, y: self.$stage.height() / 2 }, - e - ); - break; + case 189: + self.zoom( + -self.options.ratioThreshold * 3, + { x: self.$stage.width() / 2, y: self.$stage.height() / 2 }, + e + ); + break; // + Firefox - case 61: - self.zoom( - self.options.ratioThreshold * 3, - { x: self.$stage.width() / 2, y: self.$stage.height() / 2 }, - e - ); - break; + case 61: + self.zoom( + self.options.ratioThreshold * 3, + { x: self.$stage.width() / 2, y: self.$stage.height() / 2 }, + e + ); + break; // - Firefox - case 173: - self.zoom( - -self.options.ratioThreshold * 3, - { x: self.$stage.width() / 2, y: self.$stage.height() / 2 }, - e - ); - break; - // ctrl + alt + 0 - case 48: - if (ctrlKey && altKey) { - self.zoomTo( - 1, + case 173: + self.zoom( + -self.options.ratioThreshold * 3, { x: self.$stage.width() / 2, y: self.$stage.height() / 2 }, e ); - } - break; - // ctrl + , - case 188: - if (ctrlKey) { - self.rotate(-90); - } - break; - // ctrl + . - case 190: - if (ctrlKey) { - self.rotate(90); - } - break; - default: + break; + // Ctrl + Alt + 0 + case 48: + if (ctrlKey && altKey) { + self.zoomTo( + 1, + { x: self.$stage.width() / 2, y: self.$stage.height() / 2 }, + e + ); + } + break; + // Ctrl + , + case 188: + if (ctrlKey) { + self.rotate(-90); + } + break; + // Ctrl + . + case 190: + if (ctrlKey) { + self.rotate(90); + } + break; + // Q + case 81: + this.close(); + break; + default: } - }, - addEvents: function () { - + addEvents: function() { var self = this; - this.$close.off(CLICK_EVENT + EVENT_NS).on(CLICK_EVENT + EVENT_NS, function (e) { - self.close(); - }); + this.$close + .off(CLICK_EVENT + EVENT_NS) + .on(CLICK_EVENT + EVENT_NS, function(e) { + self.close(); + }); - this.$stage.off(WHEEL_EVENT + EVENT_NS).on(WHEEL_EVENT + EVENT_NS, function (e) { - self.wheel(e); - }); + this.$stage + .off(WHEEL_EVENT + EVENT_NS) + .on(WHEEL_EVENT + EVENT_NS, function(e) { + self.wheel(e); + }); - this.$zoomIn.off(CLICK_EVENT + EVENT_NS).on(CLICK_EVENT + EVENT_NS, function (e) { - self.zoom( - self.options.ratioThreshold * 3, - { x: self.$stage.width() / 2, y: self.$stage.height() / 2 }, - e - ); - }); + this.$zoomIn + .off(CLICK_EVENT + EVENT_NS) + .on(CLICK_EVENT + EVENT_NS, function(e) { + self.zoom( + self.options.ratioThreshold * 3, + { x: self.$stage.width() / 2, y: self.$stage.height() / 2 }, + e + ); + }); - this.$zoomOut.off(CLICK_EVENT + EVENT_NS).on(CLICK_EVENT + EVENT_NS, function (e) { - self.zoom( - -self.options.ratioThreshold * 3, - { x: self.$stage.width() / 2, y: self.$stage.height() / 2 }, - e - ); - }); + this.$zoomOut + .off(CLICK_EVENT + EVENT_NS) + .on(CLICK_EVENT + EVENT_NS, function(e) { + self.zoom( + -self.options.ratioThreshold * 3, + { x: self.$stage.width() / 2, y: self.$stage.height() / 2 }, + e + ); + }); - this.$actualSize.off(CLICK_EVENT + EVENT_NS).on(CLICK_EVENT + EVENT_NS, function (e) { - self.zoomTo( - 1, - { x: self.$stage.width() / 2, y: self.$stage.height() / 2 }, - e - ); - }); + this.$actualSize + .off(CLICK_EVENT + EVENT_NS) + .on(CLICK_EVENT + EVENT_NS, function(e) { + self.zoomTo( + 1, + { x: self.$stage.width() / 2, y: self.$stage.height() / 2 }, + e + ); + }); - this.$prev.off(CLICK_EVENT + EVENT_NS).on(CLICK_EVENT + EVENT_NS, function () { - self.jump(-1); - }); + this.$prev + .off(CLICK_EVENT + EVENT_NS) + .on(CLICK_EVENT + EVENT_NS, function() { + self.jump(-1); + }); - this.$fullscreen.off(CLICK_EVENT + EVENT_NS).on(CLICK_EVENT + EVENT_NS, function () { - self.fullscreen(); - }); + this.$fullscreen + .off(CLICK_EVENT + EVENT_NS) + .on(CLICK_EVENT + EVENT_NS, function() { + self.fullscreen(); + }); - this.$next.off(CLICK_EVENT + EVENT_NS).on(CLICK_EVENT + EVENT_NS, function () { - self.jump(1); - }); + this.$next + .off(CLICK_EVENT + EVENT_NS) + .on(CLICK_EVENT + EVENT_NS, function() { + self.jump(1); + }); - this.$rotateLeft.off(CLICK_EVENT + EVENT_NS).on(CLICK_EVENT + EVENT_NS, function () { - self.rotate(-90); - }); + this.$rotateLeft + .off(CLICK_EVENT + EVENT_NS) + .on(CLICK_EVENT + EVENT_NS, function() { + self.rotate(-90); + }); - this.$rotateRight.off(CLICK_EVENT + EVENT_NS).on(CLICK_EVENT + EVENT_NS, function () { - self.rotate(90); - }); + this.$rotateRight + .off(CLICK_EVENT + EVENT_NS) + .on(CLICK_EVENT + EVENT_NS, function() { + self.rotate(90); + }); - this.$maximize.off(CLICK_EVENT + EVENT_NS).on(CLICK_EVENT + EVENT_NS, function () { - self.maximize(); - }); + this.$maximize + .off(CLICK_EVENT + EVENT_NS) + .on(CLICK_EVENT + EVENT_NS, function() { + self.maximize(); + }); - $D.off(KEYDOWN_EVENT + EVENT_NS).on(KEYDOWN_EVENT + EVENT_NS, function (e) { + $D.off(KEYDOWN_EVENT + EVENT_NS).on(KEYDOWN_EVENT + EVENT_NS, function(e) { self.keydown(e); }); $W.on(RESIZE_EVENT + EVENT_NS, self.resize()); - }, - _triggerHook: function (e, data) { + _triggerHook: function(e, data) { if (this.options.callbacks[e]) { this.options.callbacks[e].apply(this, $.isArray(data) ? data : [data]); } @@ -1292,13 +1298,12 @@ Magnify.prototype = { * jQuery plugin */ -$.fn.magnify = function (options) { - +$.fn.magnify = function(options) { jqEl = $(this); // Convert a numeric string into a number for (var key in options) { - if (typeof (options[key]) === 'string' && !isNaN(options[key])) { + if (typeof options[key] === 'string' && !isNaN(options[key])) { options[key] = parseFloat(options[key]); } } @@ -1310,48 +1315,37 @@ $.fn.magnify = function (options) { PUBLIC_VARS['zIndex'] = opts.zIndex; if (typeof options === 'string') { - // $(this).data('magnify')[options](); - } else { - if (opts.initEvent === 'dblclick') { - - jqEl.off('click' + EVENT_NS).on('click' + EVENT_NS, function (e) { - + jqEl.off('click' + EVENT_NS).on('click' + EVENT_NS, function(e) { e.preventDefault(); // This will stop triggering data-api event e.stopPropagation(); - }); - } - jqEl.off(opts.initEvent + EVENT_NS).on(opts.initEvent + EVENT_NS, function (e) { - - e.preventDefault(); - // This will stop triggering data-api event - e.stopPropagation(); - - $(this).data('magnify', new Magnify(this, options)); - - }); + jqEl + .off(opts.initEvent + EVENT_NS) + .on(opts.initEvent + EVENT_NS, function(e) { + e.preventDefault(); + // This will stop triggering data-api event + e.stopPropagation(); + $(this).data('magnify', new Magnify(this, options)); + }); } return jqEl; - }; /** * MAGNIFY DATA-API */ -$D.on(CLICK_EVENT + EVENT_NS, '[data-magnify]', function (e) { - +$D.on(CLICK_EVENT + EVENT_NS, '[data-magnify]', function(e) { jqEl = $('[data-magnify]'); e.preventDefault(); $(this).data('magnify', new Magnify(this, DEFAULTS)); - }); diff --git a/src/js/draggable.js b/src/js/draggable.js index 6ab1e27..8436269 100644 --- a/src/js/draggable.js +++ b/src/js/draggable.js @@ -1,33 +1,26 @@ /** - * [draggable] - * @param {[Object]} modal [the modal element] - * @param {[Object]} dragHandle [the handle element when dragging] - * @param {[Object]} dragCancel [the cancel element when dragging] + * Draggable + * @param {Object} modal - The modal element + * @param {Object} dragHandle - The handle element when dragging + * @param {Object} dragCancel - The cancel element when dragging */ -var draggable = function (modal, dragHandle, dragCancel) { - +var draggable = function(modal, dragHandle, dragCancel) { var self = this; var isDragging = false; var startX = 0, startY = 0, - left = 0, top = 0; - var dragStart = function (e) { - + var dragStart = function(e) { var e = e || window.event; // Must be removed // e.preventDefault(); - if (self.options.multiInstances) { - modal.css('z-index', ++PUBLIC_VARS['zIndex']); - } - // Get clicked button var elemCancel = $(e.target).closest(dragCancel); // Stop modal moving when click buttons @@ -35,38 +28,49 @@ var draggable = function (modal, dragHandle, dragCancel) { return true; } + if (self.options.multiInstances) { + modal.css('z-index', ++PUBLIC_VARS['zIndex']); + } + isDragging = true; - startX = e.type === 'touchstart' - ? e.originalEvent.targetTouches[0].pageX - : e.clientX; - startY = e.type === 'touchstart' - ? e.originalEvent.targetTouches[0].pageY - : e.clientY; + startX = + e.type === 'touchstart' + ? e.originalEvent.targetTouches[0].pageX + : e.clientX; + startY = + e.type === 'touchstart' + ? e.originalEvent.targetTouches[0].pageY + : e.clientY; left = $(modal).offset().left; top = $(modal).offset().top; - $D.on(TOUCH_MOVE_EVENT + EVENT_NS, dragMove) - .on(TOUCH_END_EVENT + EVENT_NS, dragEnd); - + $D.on(TOUCH_MOVE_EVENT + EVENT_NS, dragMove).on( + TOUCH_END_EVENT + EVENT_NS, + dragEnd + ); }; - var dragMove = function (e) { - + var dragMove = function(e) { var e = e || window.event; e.preventDefault(); - if (isDragging && !PUBLIC_VARS['isMoving'] && !PUBLIC_VARS['isResizing'] && !self.isMaximized) { - - var endX = e.type === 'touchmove' - ? e.originalEvent.targetTouches[0].pageX - : e.clientX, - endY = e.type === 'touchmove' - ? e.originalEvent.targetTouches[0].pageY - : e.clientY, - + if ( + isDragging && + !PUBLIC_VARS['isMoving'] && + !PUBLIC_VARS['isResizing'] && + !self.isMaximized + ) { + var endX = + e.type === 'touchmove' + ? e.originalEvent.targetTouches[0].pageX + : e.clientX, + endY = + e.type === 'touchmove' + ? e.originalEvent.targetTouches[0].pageY + : e.clientY, relativeX = endX - startX, relativeY = endY - startY; @@ -74,22 +78,19 @@ var draggable = function (modal, dragHandle, dragCancel) { left: relativeX + left + 'px', top: relativeY + top + 'px' }); - } - }; - var dragEnd = function (e) { - - $D.off(TOUCH_MOVE_EVENT + EVENT_NS, dragMove) - .off(TOUCH_END_EVENT + EVENT_NS, dragEnd); + var dragEnd = function(e) { + $D.off(TOUCH_MOVE_EVENT + EVENT_NS, dragMove).off( + TOUCH_END_EVENT + EVENT_NS, + dragEnd + ); isDragging = false; - }; $(dragHandle).on(TOUCH_START_EVENT + EVENT_NS, dragStart); - }; // Add to Magnify Prototype diff --git a/src/js/movable.js b/src/js/movable.js index 79dd77c..4e48361 100644 --- a/src/js/movable.js +++ b/src/js/movable.js @@ -1,35 +1,30 @@ /** - * -------------------------------------- - * 1.no movable - * 2.vertical movable - * 3.horizontal movable - * 4.vertical & horizontal movable - * -------------------------------------- + * -------------------------------------------------------------------------- + * 1. No movable + * 2. Vertical movable + * 3. Horizontal movable + * 4. Vertical & Horizontal movable + * -------------------------------------------------------------------------- * - * [image movable] - * @param {[Object]} stage [the stage element] - * @param {[Object]} image [the image element] + * Image movable + * @param {Object} stage - The stage element + * @param {Object} image - The image element */ -var movable = function (stage, image) { - +var movable = function(stage, image) { var self = this; var isDragging = false; var startX = 0, startY = 0, - left = 0, top = 0, - widthDiff = 0, heightDiff = 0, - δ = 0; - var dragStart = function (e) { - + var dragStart = function(e) { var e = e || window.event; e.preventDefault(); @@ -41,27 +36,29 @@ var movable = function (stage, image) { stageWidth = $(stage).width(), stageHeight = $(stage).height(); - startX = e.type === 'touchstart' - ? e.originalEvent.targetTouches[0].pageX - : e.clientX; - startY = e.type === 'touchstart' - ? e.originalEvent.targetTouches[0].pageY - : e.clientY; + startX = + e.type === 'touchstart' + ? e.originalEvent.targetTouches[0].pageX + : e.clientX; + startY = + e.type === 'touchstart' + ? e.originalEvent.targetTouches[0].pageY + : e.clientY; // δ is the difference between image width and height δ = !self.isRotated ? 0 : (imageWidth - imageHeight) / 2; // Width or height difference can be use to limit image right or top position widthDiff = !self.isRotated - ? (imageWidth - stageWidth) - : (imageHeight - stageWidth); + ? imageWidth - stageWidth + : imageHeight - stageWidth; heightDiff = !self.isRotated - ? (imageHeight - stageHeight) - : (imageWidth - stageHeight); + ? imageHeight - stageHeight + : imageWidth - stageHeight; // Modal can be dragging if image is smaller to stage - isDragging = (widthDiff > 0 || heightDiff > 0) ? true : false; - PUBLIC_VARS['isMoving'] = (widthDiff > 0 || heightDiff > 0) ? true : false; + isDragging = widthDiff > 0 || heightDiff > 0 ? true : false; + PUBLIC_VARS['isMoving'] = widthDiff > 0 || heightDiff > 0 ? true : false; // Reclac the element position when mousedown // Fixed the issue of stage with a border @@ -70,16 +67,18 @@ var movable = function (stage, image) { // Add grabbing cursor if (stage.hasClass('is-grab')) { - $('html,body,.magnify-modal,.magnify-stage,.magnify-button,.magnify-resizable-handle').addClass('is-grabbing'); + $( + 'html,body,.magnify-modal,.magnify-stage,.magnify-button,.magnify-resizable-handle' + ).addClass('is-grabbing'); } - $D.on(TOUCH_MOVE_EVENT + EVENT_NS, dragMove) - .on(TOUCH_END_EVENT + EVENT_NS, dragEnd); - + $D.on(TOUCH_MOVE_EVENT + EVENT_NS, dragMove).on( + TOUCH_END_EVENT + EVENT_NS, + dragEnd + ); }; - var dragMove = function (e) { - + var dragMove = function(e) { var e = e || window.event; e.preventDefault(); @@ -87,41 +86,36 @@ var movable = function (stage, image) { var $image = isIE8() ? $(stage).find(image) : $(image); if (isDragging) { - - var endX = e.type === 'touchmove' - ? e.originalEvent.targetTouches[0].pageX - : e.clientX, - endY = e.type === 'touchmove' - ? e.originalEvent.targetTouches[0].pageY - : e.clientY, - + var endX = + e.type === 'touchmove' + ? e.originalEvent.targetTouches[0].pageX + : e.clientX, + endY = + e.type === 'touchmove' + ? e.originalEvent.targetTouches[0].pageY + : e.clientY, relativeX = endX - startX, relativeY = endY - startY, - newLeft = relativeX + left, newTop = relativeY + top; - // vertical limit + // Vertical limit if (heightDiff > 0) { - - if ((relativeY + top) > δ) { + if (relativeY + top > δ) { newTop = δ; - } else if ((relativeY + top) < -heightDiff + δ) { + } else if (relativeY + top < -heightDiff + δ) { newTop = -heightDiff + δ; } - } else { newTop = top; } - // horizontal limit + // Horizontal limit if (widthDiff > 0) { - - if ((relativeX + left) > -δ) { + if (relativeX + left > -δ) { newLeft = -δ; - } else if ((relativeX + left) < -widthDiff - δ) { + } else if (relativeX + left < -widthDiff - δ) { newLeft = -widthDiff - δ; } - } else { newLeft = left; } @@ -136,26 +130,25 @@ var movable = function (stage, image) { left: newLeft, top: newTop }); - } - }; - var dragEnd = function (e) { - - $D.off(TOUCH_MOVE_EVENT + EVENT_NS, dragMove) - .off(TOUCH_END_EVENT + EVENT_NS, dragEnd); + var dragEnd = function(e) { + $D.off(TOUCH_MOVE_EVENT + EVENT_NS, dragMove).off( + TOUCH_END_EVENT + EVENT_NS, + dragEnd + ); isDragging = false; PUBLIC_VARS['isMoving'] = false; // Remove grabbing cursor - $('html,body,.magnify-modal,.magnify-stage,.magnify-button,.magnify-resizable-handle').removeClass('is-grabbing'); - + $( + 'html,body,.magnify-modal,.magnify-stage,.magnify-button,.magnify-resizable-handle' + ).removeClass('is-grabbing'); }; $(stage).on(TOUCH_START_EVENT + EVENT_NS, dragStart); - }; // Add to Magnify Prototype diff --git a/src/js/resizable.js b/src/js/resizable.js index ddb034e..bfef645 100644 --- a/src/js/resizable.js +++ b/src/js/resizable.js @@ -1,52 +1,72 @@ /** - * ------------------------------ - * 1.modal resizable - * 2.keep image in stage center - * 3.other image limitations - * ------------------------------ + * -------------------------------------------------------------------------- + * 1. Modal resizable + * 2. Keep image in stage center + * 3. Other image limitations + * -------------------------------------------------------------------------- * - * [resizable] - * @param {[Object]} modal [the modal element] - * @param {[Object]} stage [the stage element] - * @param {[Object]} image [the image element] - * @param {[Number]} minWidth [the option of modalWidth] - * @param {[Number]} minHeight [the option of modalHeight] + * Resizable + * @param {Object} modal - The modal element + * @param {Object} stage - The stage element + * @param {Object} image - The image element + * @param {Number} minWidth - The option of modalWidth + * @param {Number} minHeight - The option of modalHeight */ -var resizable = function (modal, stage, image, minWidth, minHeight) { - +var resizable = function(modal, stage, image, minWidth, minHeight) { var self = this; - var resizableHandleE = $('
'), - resizableHandleW = $('
'), - resizableHandleS = $('
'), - resizableHandleN = $('
'), - resizableHandleSE = $('
'), - resizableHandleSW = $('
'), - resizableHandleNE = $('
'), - resizableHandleNW = $('
'); + var resizableHandleE = $( + '
' + ), + resizableHandleW = $( + '
' + ), + resizableHandleS = $( + '
' + ), + resizableHandleN = $( + '
' + ), + resizableHandleSE = $( + '
' + ), + resizableHandleSW = $( + '
' + ), + resizableHandleNE = $( + '
' + ), + resizableHandleNW = $( + '
' + ); var resizableHandles = { - 'e': resizableHandleE, - 's': resizableHandleS, - 'se': resizableHandleSE, - 'n': resizableHandleN, - 'w': resizableHandleW, - 'nw': resizableHandleNW, - 'ne': resizableHandleNE, - 'sw': resizableHandleSW + e: resizableHandleE, + s: resizableHandleS, + se: resizableHandleSE, + n: resizableHandleN, + w: resizableHandleW, + nw: resizableHandleNW, + ne: resizableHandleNE, + sw: resizableHandleSW }; $(modal).append( - resizableHandleE, resizableHandleW, resizableHandleS, resizableHandleN, - resizableHandleSE, resizableHandleSW, resizableHandleNE, resizableHandleNW + resizableHandleE, + resizableHandleW, + resizableHandleS, + resizableHandleN, + resizableHandleSE, + resizableHandleSW, + resizableHandleNE, + resizableHandleNW ); var isDragging = false; var startX = 0, startY = 0, - modalData = { w: 0, h: 0, @@ -65,58 +85,57 @@ var resizable = function (modal, stage, image, minWidth, minHeight) { l: 0, t: 0 }, - // δ is the difference between image width and height δ = 0, imgWidth = 0, imgHeight = 0, - direction = ''; - // modal CSS options - var getModalOpts = function (dir, offsetX, offsetY) { - + // Modal CSS options + var getModalOpts = function(dir, offsetX, offsetY) { // Modal should not move when its width to the minwidth - var modalLeft = (-offsetX + modalData.w) > minWidth - ? (offsetX + modalData.l) - : (modalData.l + modalData.w - minWidth), - modalTop = (-offsetY + modalData.h) > minHeight - ? (offsetY + modalData.t) - : (modalData.t + modalData.h - minHeight); + var modalLeft = + -offsetX + modalData.w > minWidth + ? offsetX + modalData.l + : modalData.l + modalData.w - minWidth, + modalTop = + -offsetY + modalData.h > minHeight + ? offsetY + modalData.t + : modalData.t + modalData.h - minHeight; var opts = { - 'e': { - width: Math.max((offsetX + modalData.w), minWidth) + 'px' + e: { + width: Math.max(offsetX + modalData.w, minWidth) + 'px' }, - 's': { - height: Math.max((offsetY + modalData.h), minHeight) + 'px' + s: { + height: Math.max(offsetY + modalData.h, minHeight) + 'px' }, - 'se': { - width: Math.max((offsetX + modalData.w), minWidth) + 'px', - height: Math.max((offsetY + modalData.h), minHeight) + 'px' + se: { + width: Math.max(offsetX + modalData.w, minWidth) + 'px', + height: Math.max(offsetY + modalData.h, minHeight) + 'px' }, - 'w': { - width: Math.max((-offsetX + modalData.w), minWidth) + 'px', + w: { + width: Math.max(-offsetX + modalData.w, minWidth) + 'px', left: modalLeft + 'px' }, - 'n': { - height: Math.max((-offsetY + modalData.h), minHeight) + 'px', + n: { + height: Math.max(-offsetY + modalData.h, minHeight) + 'px', top: modalTop + 'px' }, - 'nw': { - width: Math.max((-offsetX + modalData.w), minWidth) + 'px', - height: Math.max((-offsetY + modalData.h), minHeight) + 'px', + nw: { + width: Math.max(-offsetX + modalData.w, minWidth) + 'px', + height: Math.max(-offsetY + modalData.h, minHeight) + 'px', top: modalTop + 'px', left: modalLeft + 'px' }, - 'ne': { - width: Math.max((offsetX + modalData.w), minWidth) + 'px', - height: Math.max((-offsetY + modalData.h), minHeight) + 'px', + ne: { + width: Math.max(offsetX + modalData.w, minWidth) + 'px', + height: Math.max(-offsetY + modalData.h, minHeight) + 'px', top: modalTop + 'px' }, - 'sw': { - width: Math.max((-offsetX + modalData.w), minWidth) + 'px', - height: Math.max((offsetY + modalData.h), minHeight) + 'px', + sw: { + width: Math.max(-offsetX + modalData.w, minWidth) + 'px', + height: Math.max(offsetY + modalData.h, minHeight) + 'px', left: modalLeft + 'px' } }; @@ -124,136 +143,141 @@ var resizable = function (modal, stage, image, minWidth, minHeight) { return opts[dir]; }; - // image CSS options - var getImageOpts = function (dir, offsetX, offsetY) { - + // Image CSS options + var getImageOpts = function(dir, offsetX, offsetY) { var $image = isIE8() ? $(stage).find(image) : $(image); // In modern browser, the width and height of image won't change after rotated. // But its position top and left will get values from the image rotated. // In IE8 browser, due to the type of rotating, all the value will be the same. - var imgPosLeft = isIE8() ? ($image.position().left + δ) : $image.position().left, - imgPosTop = isIE8() ? ($image.position().top - δ) : $image.position().top; + var imgPosLeft = isIE8() + ? $image.position().left + δ + : $image.position().left, + imgPosTop = isIE8() ? $image.position().top - δ : $image.position().top; // Image should not move when modal width to the min width // The minwidth is modal width, so we should clac the stage minwidth - var widthDiff = (offsetX + modalData.w) > minWidth - ? (stageData.w - imgWidth + offsetX - δ) - : (minWidth - (modalData.w - stageData.w) - imgWidth - δ), - heightDiff = (offsetY + modalData.h) > minHeight - ? (stageData.h - imgHeight + offsetY + δ) - : (minHeight - (modalData.h - stageData.h) - imgHeight + δ), - - widthDiff2 = (-offsetX + modalData.w) > minWidth - ? (stageData.w - imgWidth - offsetX - δ) - : (minWidth - (modalData.w - stageData.w) - imgWidth - δ), - heightDiff2 = (-offsetY + modalData.h) > minHeight - ? (stageData.h - imgHeight - offsetY + δ) - : (minHeight - (modalData.h - stageData.h) - imgHeight + δ); + var widthDiff = + offsetX + modalData.w > minWidth + ? stageData.w - imgWidth + offsetX - δ + : minWidth - (modalData.w - stageData.w) - imgWidth - δ, + heightDiff = + offsetY + modalData.h > minHeight + ? stageData.h - imgHeight + offsetY + δ + : minHeight - (modalData.h - stageData.h) - imgHeight + δ, + widthDiff2 = + -offsetX + modalData.w > minWidth + ? stageData.w - imgWidth - offsetX - δ + : minWidth - (modalData.w - stageData.w) - imgWidth - δ, + heightDiff2 = + -offsetY + modalData.h > minHeight + ? stageData.h - imgHeight - offsetY + δ + : minHeight - (modalData.h - stageData.h) - imgHeight + δ; // Get image position in dragging - var imgLeft = (widthDiff > 0 - ? imgPosLeft - : (imgPosLeft < 0 - ? imgPosLeft - : 0)) - δ, - imgTop = (heightDiff > 0 - ? imgPosTop - : (imgPosTop < 0 - ? imgPosTop - : 0)) + δ, - - imgLeft2 = (widthDiff2 > 0 - ? imgPosLeft - : (imgPosLeft < 0 - ? imgPosLeft - : 0)) - δ, - imgTop2 = (heightDiff2 > 0 - ? imgPosTop - : (imgPosTop < 0 - ? imgPosTop - : 0)) + δ; + var imgLeft = + (widthDiff > 0 ? imgPosLeft : imgPosLeft < 0 ? imgPosLeft : 0) - δ, + imgTop = (heightDiff > 0 ? imgPosTop : imgPosTop < 0 ? imgPosTop : 0) + δ, + imgLeft2 = + (widthDiff2 > 0 ? imgPosLeft : imgPosLeft < 0 ? imgPosLeft : 0) - δ, + imgTop2 = + (heightDiff2 > 0 ? imgPosTop : imgPosTop < 0 ? imgPosTop : 0) + δ; var opts = { - 'e': { - left: widthDiff >= -δ - ? ((widthDiff - δ) / 2 + 'px') - : (imgLeft > widthDiff - ? (imgLeft + 'px') - : (widthDiff + 'px')) + e: { + left: + widthDiff >= -δ + ? (widthDiff - δ) / 2 + 'px' + : imgLeft > widthDiff + ? imgLeft + 'px' + : widthDiff + 'px' }, - 's': { - top: heightDiff >= δ - ? ((heightDiff + δ) / 2 + 'px') - : (imgTop > heightDiff - ? (imgTop + 'px') - : (heightDiff + 'px')) + s: { + top: + heightDiff >= δ + ? (heightDiff + δ) / 2 + 'px' + : imgTop > heightDiff + ? imgTop + 'px' + : heightDiff + 'px' }, - 'se': { - top: heightDiff >= δ - ? ((heightDiff + δ) / 2 + 'px') - : (imgTop > heightDiff ? (imgTop + 'px') : (heightDiff + 'px')), - left: widthDiff >= -δ - ? ((widthDiff - δ) / 2 + 'px') - : (imgLeft > widthDiff ? (imgLeft + 'px') : (widthDiff + 'px')) + se: { + top: + heightDiff >= δ + ? (heightDiff + δ) / 2 + 'px' + : imgTop > heightDiff + ? imgTop + 'px' + : heightDiff + 'px', + left: + widthDiff >= -δ + ? (widthDiff - δ) / 2 + 'px' + : imgLeft > widthDiff + ? imgLeft + 'px' + : widthDiff + 'px' }, - 'w': { - left: widthDiff2 >= -δ - ? ((widthDiff2 - δ) / 2 + 'px') - : (imgLeft2 > widthDiff2 - ? (imgLeft2 + 'px') - : (widthDiff2 + 'px')) + w: { + left: + widthDiff2 >= -δ + ? (widthDiff2 - δ) / 2 + 'px' + : imgLeft2 > widthDiff2 + ? imgLeft2 + 'px' + : widthDiff2 + 'px' }, - 'n': { - top: heightDiff2 >= δ - ? ((heightDiff2 + δ) / 2 + 'px') - : (imgTop2 > heightDiff2 - ? (imgTop2 + 'px') - : (heightDiff2 + 'px')) + n: { + top: + heightDiff2 >= δ + ? (heightDiff2 + δ) / 2 + 'px' + : imgTop2 > heightDiff2 + ? imgTop2 + 'px' + : heightDiff2 + 'px' }, - 'nw': { - top: heightDiff2 >= δ - ? ((heightDiff2 + δ) / 2 + 'px') - : (imgTop2 > heightDiff2 - ? (imgTop2 + 'px') - : (heightDiff2 + 'px')), - left: widthDiff2 >= -δ - ? ((widthDiff2 - δ) / 2 + 'px') - : (imgLeft2 > widthDiff2 - ? (imgLeft2 + 'px') - : (widthDiff2 + 'px')) + nw: { + top: + heightDiff2 >= δ + ? (heightDiff2 + δ) / 2 + 'px' + : imgTop2 > heightDiff2 + ? imgTop2 + 'px' + : heightDiff2 + 'px', + left: + widthDiff2 >= -δ + ? (widthDiff2 - δ) / 2 + 'px' + : imgLeft2 > widthDiff2 + ? imgLeft2 + 'px' + : widthDiff2 + 'px' }, - 'ne': { - top: heightDiff2 >= δ - ? ((heightDiff2 + δ) / 2 + 'px') - : (imgTop2 > heightDiff2 - ? (imgTop2 + 'px') - : (heightDiff2 + 'px')), - left: widthDiff >= -δ - ? ((widthDiff - δ) / 2 + 'px') - : (imgLeft > widthDiff - ? (imgLeft + 'px') - : (widthDiff + 'px')) + ne: { + top: + heightDiff2 >= δ + ? (heightDiff2 + δ) / 2 + 'px' + : imgTop2 > heightDiff2 + ? imgTop2 + 'px' + : heightDiff2 + 'px', + left: + widthDiff >= -δ + ? (widthDiff - δ) / 2 + 'px' + : imgLeft > widthDiff + ? imgLeft + 'px' + : widthDiff + 'px' }, - 'sw': { - top: heightDiff >= δ - ? ((heightDiff + δ) / 2 + 'px') - : (imgTop > heightDiff - ? (imgTop + 'px') - : (heightDiff + 'px')), - left: widthDiff2 >= -δ - ? ((widthDiff2 - δ) / 2 + 'px') - : (imgLeft2 > widthDiff2 - ? (imgLeft2 + 'px') - : (widthDiff2 + 'px')) + sw: { + top: + heightDiff >= δ + ? (heightDiff + δ) / 2 + 'px' + : imgTop > heightDiff + ? imgTop + 'px' + : heightDiff + 'px', + left: + widthDiff2 >= -δ + ? (widthDiff2 - δ) / 2 + 'px' + : imgLeft2 > widthDiff2 + ? imgLeft2 + 'px' + : widthDiff2 + 'px' } }; return opts[dir]; }; - var dragStart = function (dir, e) { - + var dragStart = function(dir, e) { var e = e || window.event; e.preventDefault(); @@ -263,12 +287,14 @@ var resizable = function (modal, stage, image, minWidth, minHeight) { isDragging = true; PUBLIC_VARS['isResizing'] = true; - startX = e.type === 'touchstart' - ? e.originalEvent.targetTouches[0].pageX - : e.clientX; - startY = e.type === 'touchstart' - ? e.originalEvent.targetTouches[0].pageY - : e.clientY; + startX = + e.type === 'touchstart' + ? e.originalEvent.targetTouches[0].pageX + : e.clientX; + startY = + e.type === 'touchstart' + ? e.originalEvent.targetTouches[0].pageY + : e.clientY; // Reclac the modal data when mousedown modalData = { @@ -300,15 +326,18 @@ var resizable = function (modal, stage, image, minWidth, minHeight) { direction = dir; // Add resizable cursor - $('html,body,.magnify-modal,.magnify-stage,.magnify-button').css('cursor', dir + '-resize'); - - $D.on(TOUCH_MOVE_EVENT + EVENT_NS, dragMove) - .on(TOUCH_END_EVENT + EVENT_NS, dragEnd); + $('html,body,.magnify-modal,.magnify-stage,.magnify-button').css( + 'cursor', + dir + '-resize' + ); + $D.on(TOUCH_MOVE_EVENT + EVENT_NS, dragMove).on( + TOUCH_END_EVENT + EVENT_NS, + dragEnd + ); }; - var dragMove = function (e) { - + var dragMove = function(e) { var e = e || window.event; e.preventDefault(); @@ -316,14 +345,14 @@ var resizable = function (modal, stage, image, minWidth, minHeight) { var $image = isIE8() ? $(stage).find(image) : $(image); if (isDragging && !self.isMaximized) { - - var endX = e.type === 'touchmove' - ? e.originalEvent.targetTouches[0].pageX - : e.clientX, - endY = e.type === 'touchmove' - ? e.originalEvent.targetTouches[0].pageY - : e.clientY, - + var endX = + e.type === 'touchmove' + ? e.originalEvent.targetTouches[0].pageX + : e.clientX, + endY = + e.type === 'touchmove' + ? e.originalEvent.targetTouches[0].pageY + : e.clientY, relativeX = endX - startX, relativeY = endY - startY; @@ -336,20 +365,19 @@ var resizable = function (modal, stage, image, minWidth, minHeight) { $image.css(imageOpts); self.isDoResize = true; - } - }; - var dragEnd = function (e) { - - $D.off(TOUCH_MOVE_EVENT + EVENT_NS, dragMove) - .off(TOUCH_END_EVENT + EVENT_NS, dragEnd); + var dragEnd = function(e) { + $D.off(TOUCH_MOVE_EVENT + EVENT_NS, dragMove).off( + TOUCH_END_EVENT + EVENT_NS, + dragEnd + ); // Set grab cursor if (PUBLIC_VARS['isResizing']) { setGrabCursor( - { w: imgWidth, h: imgHeight }, + { w: imgWidth, h: imgHeight }, { w: $(stage).width(), h: $(stage).height() }, stage ); @@ -359,29 +387,27 @@ var resizable = function (modal, stage, image, minWidth, minHeight) { PUBLIC_VARS['isResizing'] = false; // Remove resizable cursor - $('html,body,.magnify-modal,.magnify-stage,.magnify-button').css('cursor', ''); - - // Update image initial data - var scale = self.getImageScaleToStage( - $(stage).width(), - $(stage).height() + $('html,body,.magnify-modal,.magnify-stage,.magnify-button').css( + 'cursor', + '' ); + // Update image initial data + var scale = self.getImageScaleToStage($(stage).width(), $(stage).height()); + $.extend(self.imageData, { initWidth: self.img.width * scale, initHeight: self.img.height * scale, initLeft: ($(stage).width() - self.img.width * scale) / 2, initTop: ($(stage).height() - self.img.height * scale) / 2 }); - }; - $.each(resizableHandles, function (dir, handle) { - handle.on(TOUCH_START_EVENT + EVENT_NS, function (e) { + $.each(resizableHandles, function(dir, handle) { + handle.on(TOUCH_START_EVENT + EVENT_NS, function(e) { dragStart(dir, e); }); }); - }; // Add to Magnify Prototype diff --git a/src/js/utilities.js b/src/js/utilities.js index 056e5b4..3dea6ac 100644 --- a/src/js/utilities.js +++ b/src/js/utilities.js @@ -3,8 +3,8 @@ */ /** - * [getImgSrc] - * @param {[Object]} el [description] + * Get image src from `data-src` + * @param {Object} el - image */ function getImgSrc(el) { // Get data-src as image src at first @@ -15,53 +15,49 @@ function getImgSrc(el) { } /** - * [throttle] - * @param {Function} fn [description] - * @param {[Number]} delay [description] - * @return {Function} [description] + * Throttle function + * @param {Function} fn - The function will be triggered + * @param {Number} delay - The throttle delay time + * @return {Function} */ function throttle(fn, delay) { - var timer = null; - return function () { + return function() { var context = this, args = arguments; clearTimeout(timer); - timer = setTimeout(function () { + timer = setTimeout(function() { fn.apply(context, args); }, delay); }; - } /** - * [preloadImg] - * @param {[String]} src [image src] - * @param {Function} success [callbacks] - * @param {Function} error [callbacks] + * Preload a image + * @param {String} src - The image src + * @param {Function} success - The callback of success + * @param {Function} error - The callback of error */ function preloadImg(src, success, error) { - var img = new Image(); - img.onload = function () { + img.onload = function() { success(img); }; - img.onerror = function () { + img.onerror = function() { error(img); }; img.src = src; - } /** - * [requestFullscreen] - * @param {[type]} element [description] + * Request fullscreen + * @param {type} element */ function requestFullscreen(element) { if (element.requestFullscreen) { @@ -76,7 +72,7 @@ function requestFullscreen(element) { } /** - * [exitFullscreen] + * Exit fullscreen */ function exitFullscreen() { if (document.exitFullscreen) { @@ -89,49 +85,50 @@ function exitFullscreen() { } /** - * [getImageNameFromUrl] - * @param {[String]} url [description] - * @return {[String]} [description] + * Get the image name from its url + * @param {String} url- The image src + * @return {String} */ function getImageNameFromUrl(url) { - var reg = /^.*?\/*([^/?]*)\.[a-z]+(\?.+|$)/ig, + var reg = /^.*?\/*([^/?]*)\.[a-z]+(\?.+|$)/gi, txt = url.replace(reg, '$1'); return txt; } /** - * [hasScrollbar] - * @return {[Boolean]} [description] + * Check if the document has a scrollbar + * @return {Boolean} */ function hasScrollbar() { - return document.body.scrollHeight > (window.innerHeight || document.documentElement.clientHeight); + return ( + document.body.scrollHeight > + (window.innerHeight || document.documentElement.clientHeight) + ); } /** - * [getScrollbarWidth] - * @return {[Number]} [description] + * Get the scrollbar width + * @return {Number} */ function getScrollbarWidth() { - var scrollDiv = document.createElement('div'); - scrollDiv.style.cssText = 'width: 99px; height: 99px; overflow: scroll; position: absolute; top: -9999px;'; + scrollDiv.style.cssText = + 'width: 99px; height: 99px; overflow: scroll; position: absolute; top: -9999px;'; document.body.appendChild(scrollDiv); var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth; document.body.removeChild(scrollDiv); return scrollbarWidth; - } /** - * [setGrabCursor] - * @param {[Object]} imageData [description] - * @param {[Object]} stageData [description] - * @param {[Object]} stage [description] - * @param {[Boolean]} isRotate [description] + * Set grab cursor when move image + * @param {Object} imageData - The image data + * @param {Object} stageData - The stage data + * @param {Object} stage - The stage element + * @param {Boolean} isRotate - The image rotated flag */ function setGrabCursor(imageData, stageData, stage, isRotated) { - var imageWidth = !isRotated ? imageData.w : imageData.h, imageHeight = !isRotated ? imageData.h : imageData.w; @@ -144,18 +141,25 @@ function setGrabCursor(imageData, stageData, stage, isRotated) { } /** - * [supportTouch] - * @return {[Boolean]} [description] + * Check if browser support touch event + * @return {Boolean} */ function supportTouch() { - return !!(('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch); + return !!( + 'ontouchstart' in window || + (window.DocumentTouch && document instanceof DocumentTouch) + ); } /** - * [isIE8] - * @return {[Boolean]} [description] + * Check if the browser is IE8 + * @return {Boolean} */ function isIE8() { - return (navigator.appName == 'Microsoft Internet Explorer' && navigator.appVersion.indexOf('MSIE 8.0') > 0) || - (navigator.appName == 'Microsoft Internet Explorer' && navigator.appVersion.indexOf('MSIE 7.0') > 0); + return ( + (navigator.appName == 'Microsoft Internet Explorer' && + navigator.appVersion.indexOf('MSIE 8.0') > 0) || + (navigator.appName == 'Microsoft Internet Explorer' && + navigator.appVersion.indexOf('MSIE 7.0') > 0) + ); }