diff --git a/README.md b/README.md index 68fb5aa..e2e2a58 100644 --- a/README.md +++ b/README.md @@ -18,6 +18,11 @@ This Cropper can resize, zoom, move image before crop. bower install jq-cropbox#1.0.* ``` +## Requirements + +- [jQuery](https://github.com/jquery/jquery) >= 1.8 +- [jquery-mousewheel](https://github.com/jquery/jquery-mousewheel) + ## Usage Include: @@ -91,10 +96,60 @@ $('#plugin').cropbox({ ## Options -TODO +### ```selectors``` (required) + +Selectors is required property where must be content: + +**Required:** +- ```inputInfo``` - Selector to input type "text"/"textarea" where will be write information about cropped. +- ```inputFile``` - Selector to input type "file" for select image from file. +- ```btnCrop``` - Selector to button for run crop action. +- ```btnReset``` - Selector to button for run reset action. +- ```resultContainer``` - Content cropped images. + +**Additional:** +- ```messageBlock``` - If you set property ```messages``` then you must be set selector for display it messages. + +### ```variants``` (required) + +Variants of crop image. Supported few crop settings. + +By default variants content following settings: + +```js +variants = [ + { + width: 200, + height: 200, + minWidth: 200, + minHeight: 200, + maxWidth: 350, + maxHeight: 350 + } +] +``` + +You can set your settings of frame crop. + +**Required:** +- ```width``` - Width of frame crop (px). +- ```height``` - Height of frame crop (px). + +**Additional:** +- ```minWidth``` - Minimal width of frame crop for resize it (px). +- ```maxWidth``` - Maximum width of frame crop for resize it (px). +- ```minHeight``` - Minimal height of frame crop for resize it (px). +- ```maxHeight``` - Maximum height of frame crop for resize it (px). + +You can set both or one options max(min)Width/max(min)Height of resize frame crop. + +### ```imageOptions``` + +HTML-attributes for cropped images which content to ```resultContainer```. -- ```selectors``` - Selectors of skeleton plugin. +### ```messages``` +Text/Html messages for current frame crop settings. ## License diff --git a/dist/jquery.cropbox.min.js b/dist/jquery.cropbox.min.js index 23b3046..d887fbc 100644 --- a/dist/jquery.cropbox.min.js +++ b/dist/jquery.cropbox.min.js @@ -1 +1 @@ -"use strict";(function(ap){var y="mousedown",ai="mousemove",Y="mouseup",ak="mousewheel",L="resize",b="change",aw="load",h="click";var K=null,k=null,B=null,t=null,an=null,aa=null,az={},r={},x={},e=new Image,v=ap(document),C=ap(window),al=1,s=0,l=null,G=null,X=null,p=null,T=null,u=null,I=null,n={},A=[{width:200,height:200,minWidth:200,minHeight:200,maxWidth:350,maxHeight:350}],E=[];var ar={init:function(aB){K=ap(this);A=aB.variants||A;n=aB.imageOptions||n;E=aB.messages||E;G=ap(aB.selectors.inputFile);u=ap(aB.selectors.inputInfo);X=ap(aB.selectors.btnReset);p=ap(aB.selectors.btnCrop);T=ap(aB.selectors.resultContainer);I=ap(aB.selectors.messageBlock);W();H();M();V();ad()}};var H=function(){B=K.find(".image-cropbox");k=K.find(".frame-cropbox");t=K.find(".workarea-cropbox");an=K.find(".membrane-cropbox");aa=K.find(".resize-cropbox")},ad=function(){k.on(y,f);k.on(ai,R);v.on(Y,av);aa.on(y,ay);v.on(ai,z);v.on(Y,N);an.on(y,j);an.on(ai,S);an.on(Y,au);an.on(ak,am);C.on(L,at);G.on(b,F);p.on(h,d);X.on(h,Q)},F=function(){var aB=new FileReader();aB.readAsDataURL(this.files[0]);ap(aB).one(aw,P)},d=function(){var aB=k.position().left-B.position().left,aG=k.position().top-B.position().top,aC=k.width(),aE=k.height(),aD=ap("").attr({width:aC,height:aE})[0],aF=null;aD.getContext("2d").drawImage(B[0],0,0,e.width,e.height,-aB,-aG,B.width(),B.height());aF=aD.toDataURL("image/png");af({sWidth:e.width,sHeight:e.height,x:aB,y:aG,dWidth:B.width(),dHeight:B.height(),ratio:al,width:aC,height:aE,image:aF});Z(ap("",ap.extend(n,{src:aF})));if(ao()){q()}},J=function(){var aB=aj(),aD=t.width()/2-aB.width/2,aC=t.height()/2-aB.height/2;k.css({width:aB.width,height:aB.height,backgroundImage:'url("'+e.src+'")'});U(aD,aC)},U=function(aE,aD){var aF=B.position().left,aC=B.position().top,aB=aF-aE,aG=aC-aD;if(aB>0){aB=0;aE=aF}else{if(B.width()+aF0){aG=0;aD=aC}else{if(B.height()+aCaI&&typeof aK=="undefined"){aK=aI}else{if(aCaE&&typeof aJ=="undefined"){aJ=aE}else{if(aMaK){aC=aK}else{if(aCaJ){aM=aJ}else{if(aM0){m()}else{D()}aB.preventDefault?aB.preventDefault():(aB.returnValue=false)},m=function(){al*=1.01;var aC=e.width*al,aB=e.height*al;g(aC,aB);U(k.position().left,k.position().top)},D=function(){var aC=al;al*=0.99;var aD=e.width*al,aB=e.height*al;if(aD>=k.width()&&aB>=k.height()){g(aD,aB);U(k.position().left,k.position().top)}else{al=aC}},g=function(aC,aB){B.css({width:aC,height:aB});k.css({backgroundSize:aC+"px "+aB+"px"})},ag=function(){var aC=aj();if(aC.width>e.width||aC.height>e.height){var aB=aC.width/e.width,aD=aC.height/e.height;if(aB>aD){al=aB}else{al=aD}}else{al=1}g(e.width*al,e.height*al)},O=function(){t.fadeIn()},aA=function(){t.fadeOut()},a=function(){s=0},aj=function(){return A[s]},ao=function(){if(A.length<=s+1){s=0;ah();return false}++s;ag();ae();J();return true},ac=function(aB){u.val(JSON.stringify(aB))},af=function(aC){var aB=JSON.parse(u.val());aB.push(aC);u.val(JSON.stringify(aB))},Q=function(){aq();ac([]);a();aA();M();V()},o=function(){ax();ac([]);a();O();ag();ae();J();i();c()},ah=function(){aA();M();V()},M=function(){p.prop("disabled",true)},i=function(){p.prop("disabled",false)},q=function(){if(!c()){V()}},c=function(){if(typeof E[s]!="undefined"){I.html(E[s]).show();return true}return false},V=function(){I.hide()},W=function(){l=T.clone()},aq=function(){T.html(l.html())},Z=function(aB){T.append(aB)},ax=function(){T.empty()};ap.fn.cropbox=function(aB){if(ar[aB]){return ar[aB].apply(this,Array.prototype.slice.call(arguments,1))}else{if(typeof aB==="object"||!aB){return ar.init.apply(this,arguments)}else{ap.error('Method "'+aB+'" not exists.')}}}})(jQuery); \ No newline at end of file +"use strict";(function(ap){var y="mousedown",ai="mousemove",Y="mouseup",ak="mousewheel",L="resize",b="change",aw="load",h="click";var K=null,k=null,B=null,t=null,an=null,aa=null,az={},r={},x={},e=new Image,v=ap(document),C=ap(window),al=1,s=0,l=null,G=null,X=null,p=null,T=null,u=null,I=null,n={},A=[{width:200,height:200,minWidth:200,minHeight:200,maxWidth:350,maxHeight:350}],E=[];var ar={init:function(aB){K=ap(this);G=ap(aB.selectors.inputFile);u=ap(aB.selectors.inputInfo);X=ap(aB.selectors.btnReset);p=ap(aB.selectors.btnCrop);T=ap(aB.selectors.resultContainer);A=aB.variants||A;n=aB.imageOptions||n;E=aB.messages||E;if(typeof aB.selectors.messageBlock!="undefined"){I=ap(aB.selectors.messageBlock)}W();H();M();V();ad()}};var H=function(){B=K.find(".image-cropbox");k=K.find(".frame-cropbox");t=K.find(".workarea-cropbox");an=K.find(".membrane-cropbox");aa=K.find(".resize-cropbox")},ad=function(){k.on(y,f);k.on(ai,R);v.on(Y,av);aa.on(y,ay);v.on(ai,z);v.on(Y,N);an.on(y,j);an.on(ai,S);an.on(Y,au);an.on(ak,am);C.on(L,at);G.on(b,F);p.on(h,d);X.on(h,Q)},F=function(){var aB=new FileReader();aB.readAsDataURL(this.files[0]);ap(aB).one(aw,P)},d=function(){var aB=k.position().left-B.position().left,aG=k.position().top-B.position().top,aC=k.width(),aE=k.height(),aD=ap("").attr({width:aC,height:aE})[0],aF=null;aD.getContext("2d").drawImage(B[0],0,0,e.width,e.height,-aB,-aG,B.width(),B.height());aF=aD.toDataURL("image/png");af({sWidth:e.width,sHeight:e.height,x:aB,y:aG,dWidth:B.width(),dHeight:B.height(),ratio:al,width:aC,height:aE,image:aF});Z(ap("",ap.extend(n,{src:aF})));if(ao()){q()}},J=function(){var aB=aj(),aD=t.width()/2-aB.width/2,aC=t.height()/2-aB.height/2;k.css({width:aB.width,height:aB.height,backgroundImage:'url("'+e.src+'")'});U(aD,aC)},U=function(aE,aD){var aF=B.position().left,aC=B.position().top,aB=aF-aE,aG=aC-aD;if(aB>0){aB=0;aE=aF}else{if(B.width()+aF0){aG=0;aD=aC}else{if(B.height()+aCaI&&typeof aK=="undefined"){aK=aI}else{if(aCaE&&typeof aJ=="undefined"){aJ=aE}else{if(aMaK){aC=aK}else{if(aCaJ){aM=aJ}else{if(aM0){m()}else{D()}aB.preventDefault?aB.preventDefault():(aB.returnValue=false)},m=function(){al*=1.01;var aC=e.width*al,aB=e.height*al;g(aC,aB);U(k.position().left,k.position().top)},D=function(){var aC=al;al*=0.99;var aD=e.width*al,aB=e.height*al;if(aD>=k.width()&&aB>=k.height()){g(aD,aB);U(k.position().left,k.position().top)}else{al=aC}},g=function(aC,aB){B.css({width:aC,height:aB});k.css({backgroundSize:aC+"px "+aB+"px"})},ag=function(){var aC=aj();if(aC.width>e.width||aC.height>e.height){var aB=aC.width/e.width,aD=aC.height/e.height;if(aB>aD){al=aB}else{al=aD}}else{al=1}g(e.width*al,e.height*al)},O=function(){t.fadeIn()},aA=function(){t.fadeOut()},a=function(){s=0},aj=function(){return A[s]},ao=function(){if(A.length<=s+1){s=0;ah();return false}++s;ag();ae();J();return true},ac=function(aB){u.val(JSON.stringify(aB))},af=function(aC){var aB=JSON.parse(u.val());aB.push(aC);u.val(JSON.stringify(aB))},Q=function(){aq();ac([]);a();aA();M();V()},o=function(){ax();ac([]);a();O();ag();ae();J();i();c()},ah=function(){aA();M();V()},M=function(){p.prop("disabled",true)},i=function(){p.prop("disabled",false)},q=function(){if(!c()){V()}},c=function(){if(typeof E[s]!="undefined"&&I!==null){I.html(E[s]).show();return true}return false},V=function(){if(I!==null){I.hide()}},W=function(){l=T.clone()},aq=function(){T.html(l.html())},Z=function(aB){T.append(aB)},ax=function(){T.empty()};ap.fn.cropbox=function(aB){if(ar[aB]){return ar[aB].apply(this,Array.prototype.slice.call(arguments,1))}else{if(typeof aB==="object"||!aB){return ar.init.apply(this,arguments)}else{ap.error('Method "'+aB+'" not exists.')}}}})(jQuery); \ No newline at end of file diff --git a/src/jquery.cropbox.js b/src/jquery.cropbox.js index a923138..e727d1c 100755 --- a/src/jquery.cropbox.js +++ b/src/jquery.cropbox.js @@ -68,15 +68,17 @@ init: function(options) { $th = $(this); // merge options - variants = options.variants || variants; - imageOptions = options.imageOptions || imageOptions; - messages = options.messages || messages; $inputFile = $(options.selectors.inputFile); $inputInfo = $(options.selectors.inputInfo); $btnReset = $(options.selectors.btnReset); $btnCrop = $(options.selectors.btnCrop); $resultContainer = $(options.selectors.resultContainer); - $messageBlock = $(options.selectors.messageBlock); + variants = options.variants || variants; + imageOptions = options.imageOptions || imageOptions; + messages = options.messages || messages; + if (typeof options.selectors.messageBlock != 'undefined') { + $messageBlock = $(options.selectors.messageBlock); + } // initialize plugin initResultBackup(); initComponents(); @@ -440,14 +442,16 @@ } }, showMessage = function() { - if (typeof messages[indexVariant] != 'undefined') { + if (typeof messages[indexVariant] != 'undefined' && $messageBlock !== null) { $messageBlock.html(messages[indexVariant]).show(); return true; } return false; }, hideMessage = function() { - $messageBlock.hide(); + if ($messageBlock !== null) { + $messageBlock.hide(); + } }, initResultBackup = function() { $backupResultContainer = $resultContainer.clone();