| 12345678910111213141516171819202122232425262728 |
- /**
- * Available for use under the MIT License (http://en.wikipedia.org/wiki/MIT_License)
- *
- * Copyright (c) 2014 by Adam Banaszkiewicz
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in
- * all copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
- * THE SOFTWARE.
- *
- * @version 0.1.3
- * @date 2015.02.28
- * @author Adam Banaszkiewicz
- */
- !function(t){t.fn.cropimg=function(o){return o=t.extend({maxContainerWidth:null,resultWidth:100,resultHeight:100,inputPrefix:"",zoomDelay:400,mouseWheelZoomTimes:10,showBtnTips:!0,btnTipsFadeTime:100,textBtnTipZoomIn:"Zoom in",textBtnTipZoomOut:"Zoom out",textBtnTipRTW:"Resize to container width",textBtnTipRTH:"Resize to container height",textBtnTipFPTL:"Move image to Top Left Corner",textBtnTipFPTC:"Move image to Top Center",textBtnTipFPTR:"Move image to Top Right Corner",textBtnTipFPCL:"Move image to Center Left",textBtnTipFPCC:"Move image to Center of container",textBtnTipFPCR:"Move image to Center Right",textBtnTipFPBL:"Move image to Bottom Left Corner",textBtnTipFPBC:"Move image to Bottom Center",textBtnTipFPBR:"Move image to Bottom Right Corner",onInit:function(){},onChange:function(){}},o),document.getWindowWidth=function(){return"number"==typeof window.innerWidth?window.innerWidth:document.documentElement&&(document.documentElement.clientWidth||document.documentElement.clientHeight)?document.documentElement.clientWidth:document.body&&(document.body.clientWidth||document.body.clientHeight)?document.body.clientWidth:1280},document.CI_ALREADY_CHANGED=!1,document.CI_IMAGE=null,document.CI_IMAGE_DATA={},document.CI_MAIN_CONTAINER=null,document.CI_IMAGE_CONTAINER=null,document.CI_IMAGE_CONTAINER_DATA={width:-1},document.CI_MT=(new Date).getTime(),document.CI_CURRENT_VARS={x:0,y:0,w:0,h:0},document.CI_TOOLDRAWER={draw:function(){document.CI_TOOLDRAWER.drawContainers(),document.CI_TOOLDRAWER.drawZoomingButtons(),document.CI_TOOLDRAWER.drawFixingPositionButtons(),document.CI_TOOLDRAWER.drawFixingSizeButtons(),t(window).resize(document.CI_TOOLDRAWER.onResize)},drawContainers:function(){document.CI_IMAGE.wrap(t("<div />",{"class":"ci-main",id:"ci-main-"+document.CI_MT,style:"max-width:"+o.resultWidth+"px"})),document.CI_MAIN_CONTAINER=t(".ci-main#ci-main-"+document.CI_MT),document.CI_IMAGE.wrap(t("<div />",{"class":"ci-image-wrapper",id:"ci-image-wrapper-"+document.CI_MT,style:"max-width:"+o.resultWidth+"px;height:"+o.resultHeight+"px"})),document.CI_IMAGE_CONTAINER=t(".ci-image-wrapper#ci-image-wrapper-"+document.CI_MT),document.CI_MAIN_CONTAINER.append(t("<div />",{"class":"ci-tool ci-zooming"}))},drawZoomingButtons:function(){document.CI_MAIN_CONTAINER.find(".ci-tool.ci-zooming").append(t("<a />",{title:o.textBtnTipZoomIn,href:"#","class":"ci-button ci-tool-zoomin"}).click(function(){return!1})).append(t("<a />",{title:o.textBtnTipZoomOut,href:"#","class":"ci-button ci-tool-zoomout"}).click(function(){return!1}))},drawFixingPositionButtons:function(){document.CI_IMAGE_CONTAINER.append(t("<a />",{title:o.textBtnTipFPTL,href:"#","class":"ci-fixing-position ci-fptl"}).click(function(){return!1})).append(t("<a />",{title:o.textBtnTipFPTC,href:"#","class":"ci-fixing-position ci-fptc"}).click(function(){return!1})).append(t("<a />",{title:o.textBtnTipFPTR,href:"#","class":"ci-fixing-position ci-fptr"}).click(function(){return!1})).append(t("<a />",{title:o.textBtnTipFPCL,href:"#","class":"ci-fixing-position ci-fpcl"}).click(function(){return!1})).append(t("<a />",{title:o.textBtnTipFPCC,href:"#","class":"ci-fixing-position ci-fpcc"}).click(function(){return!1})).append(t("<a />",{title:o.textBtnTipFPCR,href:"#","class":"ci-fixing-position ci-fpcr"}).click(function(){return!1})).append(t("<a />",{title:o.textBtnTipFPBL,href:"#","class":"ci-fixing-position ci-fpbl"}).click(function(){return!1})).append(t("<a />",{title:o.textBtnTipFPBC,href:"#","class":"ci-fixing-position ci-fpbc"}).click(function(){return!1})).append(t("<a />",{title:o.textBtnTipFPBR,href:"#","class":"ci-fixing-position ci-fpbr"}).click(function(){return!1}))},drawFixingSizeButtons:function(){document.CI_MAIN_CONTAINER.find(".ci-tool.ci-zooming").append(t("<a />",{title:o.textBtnTipRTW,href:"#","class":"ci-fixing-size ci-fsw"}).click(function(){return!1})).append(t("<a />",{title:o.textBtnTipRTH,href:"#","class":"ci-fixing-size ci-fsh"}).click(function(){return!1}))},onResize:function(){document.CI_IMAGE_CONTAINER.width()<o.resultWidth?(document.CI_IMAGE_CONTAINER_DATA.proportionsToOriginal=document.CI_IMAGE_CONTAINER.width()/o.resultWidth,document.CI_IMAGE_CONTAINER.css("height",o.resultHeight*document.CI_IMAGE_CONTAINER_DATA.proportionsToOriginal+"px"),document.CI_IMAGE_CONTAINER_DATA.width=document.CI_IMAGE_CONTAINER.width(),document.CI_IMAGE_CONTAINER_DATA.height=document.CI_IMAGE_CONTAINER.height(),document.CI_CROPPING_RESULT.cropPercent=document.CI_IMAGE_CONTAINER_DATA.proportionsToOriginal):(document.CI_IMAGE_CONTAINER.css("height",o.resultHeight),document.CI_IMAGE_CONTAINER_DATA.width=document.CI_IMAGE_CONTAINER.width(),document.CI_IMAGE_CONTAINER_DATA.height=o.resultHeight,document.CI_IMAGE_CONTAINER_DATA.proportionsToOriginal=1),document.CI_ALREADY_CHANGED&&document.CI_ZOOMING.eventMouseUp(),t("span#window-width").html(document.getWindowWidth())}},document.CI_BTNSTIPS={currentTipId:"",lastTipId:"",init:function(){return 0==o.showBtnTips?!1:void t("[title]",document.CI_MAIN_CONTAINER).add(t("[title]",document.CI_IMAGE_CONTAINER)).each(function(){t(this).attr("data-txt",t(this).attr("title")).removeAttr("title").hover(document.CI_BTNSTIPS.show,document.CI_BTNSTIPS.hide)})},show:function(){document.CI_BTNSTIPS.currentTipId="ci-tip-"+(new Date).getTime(),t("body").append(t('<span class="ci-tip" id="'+document.CI_BTNSTIPS.currentTipId+'">'+t(this).attr("data-txt")+"</span>").fadeTo(0,0).fadeTo(o.btnTipsFadeTime,1));var e=t(this).offset(),n=t("body").find(".ci-tip#"+document.CI_BTNSTIPS.currentTipId);n.css({left:e.left-n.outerWidth()/2+t(this).outerWidth()/2,top:e.top-n.outerHeight()-(t(this).outerHeight()-5)/2}),document.CI_BTNSTIPS.lastTipId=document.CI_BTNSTIPS.currentTipId},hide:function(){t("body").find(".ci-tip#"+document.CI_BTNSTIPS.lastTipId).hover(function(){t(this).remove()},t.noop).fadeTo(o.btnTipsFadeTime,0,function(){t(this).remove()})}},document.CI_MOVABLE={mousePositionStart:{x:0,y:0},imagePosition:{left:0,top:0},init:function(){document.CI_IMAGE_CONTAINER.bind("mousedown",document.CI_MOVABLE.eventMouseDown);var t=function(t){t.preventDefault()};document.CI_IMAGE_CONTAINER.find("img").bind("mousemove",t).bind("mouseup",t).bind("mousedown",t),document.CI_MOVABLE.bindFixingButtons()},eventMouseDown:function(o){document.CI_MOVABLE.mousePositionStart.x=o.pageX,document.CI_MOVABLE.mousePositionStart.y=o.pageY,document.CI_MOVABLE.imagePosition.left=parseInt(document.CI_IMAGE.css("left").replace("px","")),document.CI_MOVABLE.imagePosition.top=parseInt(document.CI_IMAGE.css("top").replace("px","")),document.CI_ALREADY_CHANGED=!0,t("body").bind("mousemove",document.CI_MOVABLE.eventMouseMove).bind("mouseup",document.CI_MOVABLE.eventMouseUp)},eventMouseUp:function(){t("body").unbind("mousemove",document.CI_MOVABLE.eventMouseMove).unbind("mouseup",document.CI_MOVABLE.eventMouseUp),document.CI_CROPPING_RESULT.update(parseInt(document.CI_IMAGE.css("left").replace("px","")),parseInt(document.CI_IMAGE.css("top").replace("px",""))),document.CI_ZOOMING.eventMouseUp()},eventMouseMove:function(t){document.CI_ALREADY_CHANGED=!0,document.CI_IMAGE.css(document.CI_MOVABLE.helper.calculatePosition(t.pageX,t.pageY))},bindFixingButtons:function(){document.CI_IMAGE_CONTAINER.find(".ci-fixing-position.ci-fptl").mouseup(function(){document.CI_IMAGE.css({top:"0px",left:"0px"}),document.CI_CURRENT_VARS.x=0,document.CI_CURRENT_VARS.y=0,document.CI_CROPPING_RESULT.update(0,0)}),document.CI_IMAGE_CONTAINER.find(".ci-fixing-position.ci-fptc").mouseup(function(){var t=-(document.CI_IMAGE_DATA.width/2-document.CI_IMAGE_CONTAINER_DATA.width/2);document.CI_IMAGE.css({top:"0px",left:t+"px"}),document.CI_CURRENT_VARS.x=0,document.CI_CURRENT_VARS.y=t,document.CI_CROPPING_RESULT.update(t,0)}),document.CI_IMAGE_CONTAINER.find(".ci-fixing-position.ci-fptr").mouseup(function(){var t=-(document.CI_IMAGE_DATA.width-document.CI_IMAGE_CONTAINER_DATA.width);document.CI_IMAGE.css({top:"0px",left:t+"px"}),document.CI_CURRENT_VARS.x=0,document.CI_CURRENT_VARS.y=t,document.CI_CROPPING_RESULT.update(t,0)}),document.CI_IMAGE_CONTAINER.find(".ci-fixing-position.ci-fpcl").mouseup(function(){var t=-(document.CI_IMAGE_DATA.height/2-document.CI_IMAGE_CONTAINER_DATA.height/2);document.CI_IMAGE.css({top:t+"px",left:"0px"}),document.CI_CURRENT_VARS.x=0,document.CI_CURRENT_VARS.y=t,document.CI_CROPPING_RESULT.update(0,t)}),document.CI_IMAGE_CONTAINER.find(".ci-fixing-position.ci-fpcc").mouseup(function(){var t=-(document.CI_IMAGE_DATA.height/2-document.CI_IMAGE_CONTAINER_DATA.height/2),o=-(document.CI_IMAGE_DATA.width/2-document.CI_IMAGE_CONTAINER_DATA.width/2);document.CI_IMAGE.css({top:t+"px",left:o+"px"}),document.CI_CURRENT_VARS.x=o,document.CI_CURRENT_VARS.y=t,document.CI_CROPPING_RESULT.update(o,t)}),document.CI_IMAGE_CONTAINER.find(".ci-fixing-position.ci-fpcr").mouseup(function(){var t=-(document.CI_IMAGE_DATA.height/2-document.CI_IMAGE_CONTAINER_DATA.height/2),o=-(document.CI_IMAGE_DATA.width-document.CI_IMAGE_CONTAINER_DATA.width);document.CI_IMAGE.css({top:t+"px",left:o+"px"}),document.CI_CURRENT_VARS.x=o,document.CI_CURRENT_VARS.y=t,document.CI_CROPPING_RESULT.update(o,t)}),document.CI_IMAGE_CONTAINER.find(".ci-fixing-position.ci-fpbl").mouseup(function(){var t=-(document.CI_IMAGE_DATA.height-document.CI_IMAGE_CONTAINER_DATA.height);document.CI_IMAGE.css({top:t+"px",left:"0px"}),document.CI_CURRENT_VARS.x=0,document.CI_CURRENT_VARS.y=t,document.CI_CROPPING_RESULT.update(0,t)}),document.CI_IMAGE_CONTAINER.find(".ci-fixing-position.ci-fpbc").mouseup(function(){var t=-(document.CI_IMAGE_DATA.height-document.CI_IMAGE_CONTAINER_DATA.height),o=-(document.CI_IMAGE_DATA.width/2-document.CI_IMAGE_CONTAINER_DATA.width/2);document.CI_IMAGE.css({top:t+"px",left:o+"px"}),document.CI_CURRENT_VARS.x=o,document.CI_CURRENT_VARS.y=t,document.CI_CROPPING_RESULT.update(o,t)}),document.CI_IMAGE_CONTAINER.find(".ci-fixing-position.ci-fpbr").mouseup(function(){var t=-(document.CI_IMAGE_DATA.height-document.CI_IMAGE_CONTAINER_DATA.height),o=-(document.CI_IMAGE_DATA.width-document.CI_IMAGE_CONTAINER_DATA.width);document.CI_IMAGE.css({top:t+"px",left:o+"px"}),document.CI_CURRENT_VARS.x=o,document.CI_CURRENT_VARS.y=t,document.CI_CROPPING_RESULT.update(o,t)})},helper:{calculatePosition:function(t,o){return{top:o-document.CI_MOVABLE.mousePositionStart.y+document.CI_MOVABLE.imagePosition.top,left:t-document.CI_MOVABLE.mousePositionStart.x+document.CI_MOVABLE.imagePosition.left}}}},document.CI_ZOOMING={interval:null,timesLeftToZoom:o.zoomDelay,canStopZoom:!1,zoomFunction:function(){},init:function(){document.CI_MAIN_CONTAINER.find(".ci-tool.ci-zooming .ci-button").mousedown(function(){document.CI_ZOOMING.canStopZoom=!0,document.CI_ZOOMING.eventMouseDown(t(this).hasClass("ci-tool-zoomin")?"in":"out")}).mouseup(function(t){document.CI_ZOOMING.eventMouseUp(),document.CI_ZOOMING.canStopZoom=!1,t.stopPropagation()}).click(function(){document.CI_ZOOMING.canStopZoom=!1,document.CI_ZOOMING.eventMouseClick(t(this).hasClass("ci-tool-zoomin")?"in":"out")}),t("body").mouseup(function(){document.CI_ZOOMING.canStopZoom&&document.CI_ZOOMING.stopZoom()});var e=document.createElement("IMG");e.className="ci-image-loader",e.onload=function(){document.CI_IMAGE_DATA={originalWidth:document.CI_IMAGE.width(),originalHeight:document.CI_IMAGE.height(),width:document.CI_IMAGE.width(),height:document.CI_IMAGE.height(),proportions:1},t(".ci-image-loader",document.CI_IMAGE_CONTAINER).remove()},e.src=document.CI_IMAGE.attr("src"),document.CI_IMAGE_CONTAINER.append(e),document.CI_ZOOMING.bindFixingButtons(),"function"==typeof document.CI_MAIN_CONTAINER.mousewheel&&document.CI_MAIN_CONTAINER.mousewheel(function(t){for(var e=1==t.deltaY?"in":"out",n=0;n<o.mouseWheelZoomTimes;n++)document.CI_ZOOMING.zoom(e);return document.CI_MOVABLE.eventMouseUp(),t.stopPropagation(),t.preventDefault(),!1})},prepareToZoom:function(t){document.CI_ALREADY_CHANGED=!0,document.CI_ZOOMING.allowedZoomingFromInterval=!0,document.CI_ZOOMING.zoomFunction=function(){document.CI_ZOOMING.zoom(t)}},eventMouseDown:function(t){return document.CI_ZOOMING.prepareToZoom(t),document.CI_ZOOMING.interval=setInterval(function(){document.CI_ZOOMING.timesLeftToZoom=document.CI_ZOOMING.timesLeftToZoom-10,document.CI_ZOOMING.timesLeftToZoom<=0&&document.CI_ZOOMING.zoomFunction()},10),!1},eventMouseUp:function(){document.CI_CROPPING_RESULT.update(void 0,void 0,o.resultWidth*parseFloat(document.CI_CROPPING_RESULT.cropPercent),o.resultHeight*parseFloat(document.CI_CROPPING_RESULT.cropPercent)),document.CI_ZOOMING.stopZoom()},eventMouseClick:function(t){document.CI_ZOOMING.stopZoom(),document.CI_ZOOMING.prepareToZoom(t),document.CI_ZOOMING.zoomFunction()},stopZoom:function(){document.CI_ZOOMING.timesLeftToZoom=o.zoomDelay,clearInterval(document.CI_ZOOMING.interval)},zoom:function(o){document.CI_IMAGE_DATA.proportions="in"==o?(parseFloat(document.CI_IMAGE_DATA.proportions)+.001).toFixed(3):(parseFloat(document.CI_IMAGE_DATA.proportions)-.001).toFixed(3),document.CI_IMAGE_DATA.proportions>=2&&(document.CI_IMAGE_DATA.proportions=2),document.CI_IMAGE_DATA.proportions<=.001&&(document.CI_IMAGE_DATA.proportions=.001),document.CI_IMAGE_DATA.width=document.CI_IMAGE_DATA.originalWidth*document.CI_IMAGE_DATA.proportions,document.CI_IMAGE_DATA.height=document.CI_IMAGE_DATA.originalHeight*document.CI_IMAGE_DATA.proportions;var e=document.CI_ZOOMING.helper.fixSizes(document.CI_IMAGE_DATA.originalWidth*document.CI_IMAGE_DATA.proportions,document.CI_IMAGE_DATA.originalHeight*document.CI_IMAGE_DATA.proportions);document.CI_IMAGE.css({width:e.width,height:e.height,"max-width":e.width,"max-height":e.height,"min-width":e.width,"min-height":e.height}),t("span.else").html(e.width+" - "+document.CI_IMAGE_DATA.proportions+"%")},bindFixingButtons:function(){document.CI_MAIN_CONTAINER.find(".ci-fixing-size.ci-fsw").click(function(){var t=document.CI_IMAGE_CONTAINER.width()/document.CI_IMAGE_DATA.originalWidth,o=Math.ceil(document.CI_IMAGE_DATA.originalHeight*t);document.CI_IMAGE.css({"min-width":document.CI_IMAGE_CONTAINER.width()+"px","max-width":document.CI_IMAGE_CONTAINER.width()+"px",width:document.CI_IMAGE_CONTAINER.width()+"px","min-height":o+"px","max-height":o+"px",height:o+"px"}),document.CI_IMAGE_DATA.width=document.CI_IMAGE_CONTAINER.width(),document.CI_IMAGE_DATA.height=o,document.CI_IMAGE_DATA.proportions=t,document.CI_CROPPING_RESULT.update(void 0,void 0,document.CI_IMAGE_CONTAINER.width(),o)}),document.CI_MAIN_CONTAINER.find(".ci-fixing-size.ci-fsh").click(function(){var t=document.CI_IMAGE_CONTAINER.height()/document.CI_IMAGE_DATA.originalHeight,o=Math.ceil(document.CI_IMAGE_DATA.originalWidth*t);document.CI_IMAGE.css({"min-height":document.CI_IMAGE_CONTAINER.height()+"px","max-height":document.CI_IMAGE_CONTAINER.height()+"px",height:document.CI_IMAGE_CONTAINER.height()+"px","min-width":o+"px","max-width":o+"px",width:o+"px"}),document.CI_IMAGE_DATA.width=o,document.CI_IMAGE_DATA.height=document.CI_IMAGE_CONTAINER.height(),document.CI_IMAGE_DATA.proportions=t,document.CI_CROPPING_RESULT.update(void 0,void 0,o,document.CI_IMAGE_CONTAINER.height())})},helper:{fixSizes:function(t,e){(0==t||0==e)&&(t=document.CI_IMAGE_DATA.width,e=document.CI_IMAGE_DATA.height);var n={width:o.resultWidth,height:o.resultHeight};if(o.restrictedBounds&&(n.width>t||n.height>e)){var i=n.width/t,c=n.height/e,I=0;I=i>c?i:c,t*=I,e*=I,document.CI_ZOOMING.eventMouseUp()}return{width:t+"px",height:e+"px"}}}},document.CI_CROPPING_RESULT={coordinates:{x:0,y:0},cropPercent:1,update:function(e,n,i,c){var I=document.CI_IMAGE_DATA.originalWidth/document.CI_IMAGE_DATA.width,u=document.CI_CURRENT_VARS.x;void 0!=e?u=Math.ceil(I*e):""==u&&(u=0),e=u,t("#"+o.inputPrefix+"x").val(u),document.CI_CURRENT_VARS.x=u;var d=document.CI_CURRENT_VARS.y;void 0!=n?d=Math.ceil(I*n):""==d&&(d=0),n=d,t("#"+o.inputPrefix+"y").val(d),document.CI_CURRENT_VARS.y=d;var _=document.CI_CURRENT_VARS.w;void 0!=i?_=Math.ceil(I*i):""==_&&(_=0),i=_,t("#"+o.inputPrefix+"w").val(_),document.CI_CURRENT_VARS.w=_;var m=document.CI_CURRENT_VARS.h;void 0!=c?m=Math.ceil(I*c):""==m&&(m=0),c=m,t("#"+o.inputPrefix+"h").val(m),document.CI_CURRENT_VARS.h=m,o.onChange(e,n,i,c)}},this.each(function(){document.CI_IMAGE=t(this),document.CI_TOOLDRAWER.draw(),document.CI_MOVABLE.init(),document.CI_ZOOMING.init(),document.CI_BTNSTIPS.init(),t(window).trigger("resize"),o.onInit()})}}(jQuery);
|