From fca25f9aa0ce6884a7960651e6bc21028bc5cd31 Mon Sep 17 00:00:00 2001 From: Sylvain Savajols Date: Fri, 29 Jan 2016 20:15:10 +0100 Subject: [PATCH] add umd --- image-scale.js | 88 +++++++++++++++++++++++++++++----------------- image-scale.min.js | 10 +----- 2 files changed, 56 insertions(+), 42 deletions(-) diff --git a/image-scale.js b/image-scale.js index 86f9882..12740a0 100755 --- a/image-scale.js +++ b/image-scale.js @@ -1,13 +1,34 @@ -// ========================================================================== -// Project: Image Scale -// Description: Scale images to fit or fill any target size via two simple properties: scale and align. -// Copyright: ©2012-2016 GestiXi -// License: Licensed under the MIT license (see LICENCE) -// Version: 2.1 -// Author: Nicolas BADIA -// ========================================================================== +// Uses CommonJS, AMD or browser globals to create a jQuery plugin. + +(function (factory) { + if (typeof define === 'function' && define.amd) { + // AMD. Register as an anonymous module. + define(['jquery'], factory); + } else if (typeof module === 'object' && module.exports) { + // Node/CommonJS + module.exports = function( root, jQuery ) { + if ( jQuery === undefined ) { + // require('jQuery') returns a factory that requires window to + // build a jQuery instance, we normalize how we use modules + // that require this pattern but the window provided is a noop + // if it's defined (how jquery works) + if ( typeof window !== 'undefined' ) { + jQuery = require('jquery'); + } + else { + jQuery = require('jquery')(root); + } + } + factory(jQuery); + return jQuery; + }; + } else { + // Browser globals + factory(jQuery); + } +}(function ($) { -!function($) { "use strict"; + "use strict"; // .......................................................... // IMAGE SCALE PLUGIN DEFINITION @@ -115,10 +136,10 @@ fadeInDuration: 0, /** - A boolean indicating if the image size should be rescaled when the window is resized. + A boolean indicating if the image size should be rescaled when the window is resized. The window size is checked using requestAnimationFrame for good performance. - + @type Boolean @default false @since Version 1.0 @@ -126,16 +147,16 @@ rescaleOnResize: false, /** - A function that will be call each time the receiver is scaled. + A function that will be call each time the receiver is scaled. Example: - $images.imageScale({ + $images.imageScale({ didScale: function() { console.log('did scale img: ', this.element); } }); - + @type Function @param firstTime {Boolean} true if the image was scale for the first time. @param options {Object} the options passed to the scale method. @@ -145,12 +166,12 @@ /** A number indicating the log level : - + 0: silent 1: error 2: error & warning 3: error & warning & notice - + @type Number @default 0 @since Version 1.0 @@ -162,7 +183,7 @@ // IMAGE SCALE PUBLIC CLASS DEFINITION // - var ImageScale = function(element, options) { + var ImageScale = function(element, options) { var that = this; that.options = options; that.element = element; @@ -198,7 +219,7 @@ BEST_FILL: "best-fill", BEST_FIT: "best-fit", BEST_FIT_DOWN_ONLY: "best-fit-down", - + ALIGN_LEFT: 'left', ALIGN_RIGHT: 'right', ALIGN_CENTER: 'center', @@ -229,9 +250,9 @@ Main method. Used to scale the images. When `rescaleOnResize` is set to true, this method is executed each time the - windows size changes. - - If `rescaleOnResize` is set to false, you may want to call it manually. Here is an + windows size changes. + + If `rescaleOnResize` is set to false, you may want to call it manually. Here is an example on how you should do it: $image.imageScale('scale'); @@ -242,7 +263,7 @@ scale: function(firstTime, opt) { if (this._isDestroyed || this._canScale === false) return; - var that = this, + var that = this, options = this.options, $parent = this.$parent, element = this.element, @@ -282,11 +303,11 @@ $element.css('transition', 'null'); }, transition); } - - var destWidth = opt.destWidth ? opt.destWidth : $parent.outerWidth(), + + var destWidth = opt.destWidth ? opt.destWidth : $parent.outerWidth(), destHeight = opt.destHeight ? opt.destHeight : $parent.outerHeight(), - destInnerWidth = opt.destWidth ? opt.destWidth : $parent.innerWidth(), + destInnerWidth = opt.destWidth ? opt.destWidth : $parent.innerWidth(), destInnerHeight = opt.destHeight ? opt.destHeight : $parent.innerHeight(), widthOffset = destWidth - destInnerWidth, @@ -313,9 +334,9 @@ } } - var sourceWidth = this.imgWidth, + var sourceWidth = this.imgWidth, sourceHeight = this.imgHeight; - + if (!(destWidth && destHeight && sourceWidth && sourceHeight)) { if (options.logLevel > 0) { console.error("imageScale - DEBUG ERROR: The dimensions are incorrect: source width: '"+sourceWidth+"' - source height: '"+sourceHeight+"' - dest width: '"+destWidth+"' - dest height: '"+destHeight+"'.", element); @@ -343,7 +364,7 @@ /** Removes the data for the element. - + Here is an example on how you can call the destroy method: $image.imageScale('destroy'); @@ -356,10 +377,10 @@ /** @private - + Returns a frame (x, y, width, height) fitting the source size (sourceWidth & sourceHeight) within the destination size (destWidth & destHeight) according to the align and scale properties. - + @param {String} scale @param {String} align @param {Number} sourceWidth @@ -386,7 +407,7 @@ if (scale !== this.BEST_FIT_DOWN_ONLY && this.options.logLevel > 1) { console.warn("imageScale - DEBUG WARNING: The scale '"+scale+"' was not understood."); } - + if ((sourceWidth > destWidth) || (sourceHeight > destHeight)) { scale = scaleX < scaleY ? scaleX : scaleY; } else { @@ -478,7 +499,7 @@ Schedule a scale update. */ scheduleScale: function() { - if (this._didScheduleScale) return; + if (this._didScheduleScale) return; if (window.requestAnimationFrame) { var that = this; @@ -491,4 +512,5 @@ } } } -}(window.jQuery); + +})); diff --git a/image-scale.min.js b/image-scale.min.js index c330096..1dec907 100755 --- a/image-scale.min.js +++ b/image-scale.min.js @@ -1,10 +1,2 @@ /*! image-scale v2.1 | ©2012-2016 GestiXi | Licensed under the MIT license */ -!function(l){l.fn.imageScale=function(b){return this.each(function(){var f=this,c=l(this),a=c.data("imageScale"),g="IMG"===this.tagName?c:c.find("img");if(a)if("string"==typeof b)a[b]();else if("object"==typeof b)a[b.method||"scale"](!1,b);else a.scale();else{var e=g[0].complete,k=l.extend({},l.fn.imageScale.defaults,"object"==typeof b&&b),h=function(){c.data("imageScale",a=new n(f,k));a.scale(!0,k)};e?h.apply(c[0]):g.on("load",h).attr("src",g.attr("src"))}})};l.fn.imageScale.defaults={scale:"best-fill", -align:"center",parent:null,hideParentOverflow:!0,fadeInDuration:0,rescaleOnResize:!1,didScale:function(b,f){},logLevel:0};var n=function(b,f){var c=this;c.options=f;c.element=b;var a=c.$element=l(b),g=c.$img="IMG"===b.tagName?a:a.find("img"),e=c.img=g[0];c.src=g.attr("src");c.imgWidth=e.naturalWidth||e.width;c.imgHeight=e.naturalHeight||e.height;a=c.$parent=f.parent?f.parent:l(a.parent()[0]);c.parent=a[0];"static"===a.css("position")&&a.css("position","relative");f.rescaleOnResize&&l(window).resize(function(a){c.scheduleScale()})}; -l.fn.imageScale.Constructor=n;n.prototype={NONE:"none",FILL:"fill",BEST_FILL:"best-fill",BEST_FIT:"best-fit",BEST_FIT_DOWN_ONLY:"best-fit-down",ALIGN_LEFT:"left",ALIGN_RIGHT:"right",ALIGN_CENTER:"center",ALIGN_TOP:"top",ALIGN_BOTTOM:"bottom",ALIGN_TOP_LEFT:"top-left",ALIGN_TOP_RIGHT:"top-right",ALIGN_BOTTOM_LEFT:"bottom-left",ALIGN_BOTTOM_RIGHT:"bottom-right",constructor:n,element:null,options:null,scale:function(b,f){if(!this._isDestroyed&&!1!==this._canScale){var c=this,a=this.options,g=this.$parent, -e=this.element,k=this.$element,h=this.$img;if(b)a.hideParentOverflow&&g.css({overflow:"hidden"});else if(this.src!==h.attr("src")){this.destroy();k.data("imageScale",null);k.imageScale(a);return}this._didScheduleScale=!1;if(!a.rescaleOnResize||f||this._needUpdate(this.parent)){f=f?f:{};if(h=f.transition)this._canScale=!1,k.css("transition","all "+h+"ms"),setTimeout(function(){c._canScale=null;k.css("transition","null")},h);var h=f.destWidth?f.destWidth:g.outerWidth(),d=f.destHeight?f.destHeight:g.outerHeight(), -l=f.destWidth?f.destWidth:g.innerWidth(),m=f.destHeight?f.destHeight:g.innerHeight(),g=h-l,l=d-m,m=k.attr("data-scale"),p=k.attr("data-align"),m=m?m:a.scale,n=p?p:a.align,p=a.fadeInDuration;if(m){this._cacheDestWidth===h&&this._cacheDestHeight===d&&2g||a>e?kh?k:h}c*=b;a*=b;d.width=Math.round(c); -d.height=Math.round(a);switch(f){case this.ALIGN_LEFT:d.x=0;d.y=e/2-a/2;break;case this.ALIGN_RIGHT:d.x=g-c;d.y=e/2-a/2;break;case this.ALIGN_TOP:d.x=g/2-c/2;d.y=0;break;case this.ALIGN_BOTTOM:d.x=g/2-c/2;d.y=e-a;break;case this.ALIGN_TOP_LEFT:d.x=0;d.y=0;break;case this.ALIGN_TOP_RIGHT:d.x=g-c;d.y=0;break;case this.ALIGN_BOTTOM_LEFT:d.x=0;d.y=e-a;break;case this.ALIGN_BOTTOM_RIGHT:d.x=g-c;d.y=e-a;break;default:f!==this.ALIGN_CENTER&&12&&console.log("imageScale - DEBUG NOTICE: The scale property is null.",f));this._cacheDestWidth===k&&this._cacheDestHeight===l&&d.logLevel>2&&console.log("imageScale - DEBUG NOTICE: The parent size hasn't changed: dest width: '"+k+"' - dest height: '"+l+"'.",f);var v=this.imgWidth,w=this.imgHeight;if(!(k&&l&&v&&w))return void(d.logLevel>0&&console.error("imageScale - DEBUG ERROR: The dimensions are incorrect: source width: '"+v+"' - source height: '"+w+"' - dest width: '"+k+"' - dest height: '"+l+"'.",f));this._cacheDestWidth=k,this._cacheDestHeight=l;var x=this._innerFrameForSize(s,t,v,w,k,l);o&&(x.x-=o/2),p&&(x.y-=p/2),g.css({position:"absolute",top:x.y+"px",left:x.x+"px",width:x.width+"px",height:x.height+"px","max-width":"none"}),a&&u&&(g.css({display:"none"}),g.fadeIn(u)),d.didScale.call(this,a,b)}}},destroy:function(){this._isDestroyed=!0,this.$element.removeData("imageScale")},_innerFrameForSize:function(a,b,c,d,e,f){var g,h,i;if(i={x:0,y:0,width:e,height:f},a===this.FILL)return i;switch(g=e/c,h=f/d,a){case this.BEST_FIT_DOWN_ONLY:a!==this.BEST_FIT_DOWN_ONLY&&this.options.logLevel>1&&console.warn("imageScale - DEBUG WARNING: The scale '"+a+"' was not understood."),a=c>e||d>f?h>g?g:h:1;break;case this.BEST_FIT:a=h>g?g:h;break;case this.NONE:a=1;break;default:a=g>h?g:h}switch(c*=a,d*=a,i.width=Math.round(c),i.height=Math.round(d),b){case this.ALIGN_LEFT:i.x=0,i.y=f/2-d/2;break;case this.ALIGN_RIGHT:i.x=e-c,i.y=f/2-d/2;break;case this.ALIGN_TOP:i.x=e/2-c/2,i.y=0;break;case this.ALIGN_BOTTOM:i.x=e/2-c/2,i.y=f-d;break;case this.ALIGN_TOP_LEFT:i.x=0,i.y=0;break;case this.ALIGN_TOP_RIGHT:i.x=e-c,i.y=0;break;case this.ALIGN_BOTTOM_LEFT:i.x=0,i.y=f-d;break;case this.ALIGN_BOTTOM_RIGHT:i.x=e-c,i.y=f-d;break;default:b!==this.ALIGN_CENTER&&this.options.logLevel>1&&console.warn("imageScale - DEBUG WARNING: The align '"+b+"' was not understood."),i.x=e/2-c/2,i.y=f/2-d/2}return i},_needUpdate:function(a){var b=a.clientHeight+" "+a.clientWidth;return this._lastParentSize!==b?(this._lastParentSize=b,!0):!1},scheduleScale:function(){if(!this._didScheduleScale)if(window.requestAnimationFrame){var a=this;this._didScheduleScale=!0,requestAnimationFrame(function(){setTimeout(function(){a.scale()},0)})}else this.scale()}}});