Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added initialLeft / Top to set initial crop region #266

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Added initialLeft / Top to set initial crop region #266

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
7055b8b
Added initialLeft / Top
DangerD256 May 23, 2017
9ebd7e1
Added initialLeft / Top
DangerD256 May 23, 2017
4420be0
Update croppic.js
angekouf May 30, 2017
4ebf6cb
Merge pull request #1 from angekouf/patch-1
DangerD256 May 30, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
114 changes: 63 additions & 51 deletions croppic.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/*
* CROPPIC
* dependancy: jQuery
* author: Ognjen "Zmaj Džedaj" Božičković and Mat Steinlin
* author: Ognjen "Zmaj Dzedaj" Bozickovic and Mat Steinlin
*/

(function (window, document) {
Expand All @@ -10,7 +10,7 @@

var that = this;
that.id = id;
that.obj = $('#' + id);
that.obj = jQuery('#' + id);
that.outputDiv = that.obj;

// DEFAULT OPTIONS
Expand All @@ -23,7 +23,9 @@
//styles
imgEyecandy:true,
imgEyecandyOpacity:0.2,
initialZoom:40,
initialZoom:0,
initialLeft:0,
initialTop:0,
zoomFactor:10,
rotateFactor:5,
doubleZoomControls:true,
Expand All @@ -34,6 +36,7 @@
scaleToFill: true,
processInline: false,
loadPicture:'',
loadCroppedPicture:'',
onReset: null,
enableMousescroll: false,

Expand All @@ -53,7 +56,6 @@

// OVERWRITE DEFAULT OPTIONS
for (i in options) that.options[i] = options[i];

// INIT THE WHOLE DAMN THING!!!
that.init();

Expand All @@ -69,7 +71,7 @@
objH:0,
actualRotation: 0,
windowW:0,
windowH:$(window).height(),
windowH:jQuery(window).height(),
obj:{},
outputDiv:{},
outputUrlObj:{},
Expand Down Expand Up @@ -101,11 +103,12 @@
// reset rotation
that.actualRotation = 0;

if( $.isEmptyObject(that.defaultImg)){ that.defaultImg = that.obj.find('img'); }
if( jQuery.isEmptyObject(that.defaultImg)){ that.defaultImg = that.obj.find('img'); }
if( !jQuery.isEmptyObject(that.options.loadCroppedPicture)){ that.loadCroppedImg(that.options.loadCroppedPicture) }

that.createImgUploadControls();

if( $.isEmptyObject(that.options.loadPicture)){
if( jQuery.isEmptyObject(that.options.loadPicture)){
that.bindImgUploadControl();
}else{
that.loadExistingImage();
Expand All @@ -119,18 +122,18 @@
if(that.options.customUploadButtonId ===''){ cropControlUpload = '<i class="cropControlUpload"></i>'; }
var cropControlRemoveCroppedImage = '<i class="cropControlRemoveCroppedImage"></i>';

if( $.isEmptyObject(that.croppedImg)){ cropControlRemoveCroppedImage=''; }
if( !$.isEmptyObject(that.options.loadPicture)){ cropControlUpload='';}
if( jQuery.isEmptyObject(that.croppedImg)){ cropControlRemoveCroppedImage=''; }
if( !jQuery.isEmptyObject(that.options.loadPicture)){ cropControlUpload='';}

var html = '<div class="cropControls cropControlsUpload"> ' + cropControlUpload + cropControlRemoveCroppedImage + ' </div>';
that.outputDiv.append(html);

that.cropControlsUpload = that.outputDiv.find('.cropControlsUpload');

if(that.options.customUploadButtonId ===''){ that.imgUploadControl = that.outputDiv.find('.cropControlUpload'); }
else{ that.imgUploadControl = $('#'+that.options.customUploadButtonId); that.imgUploadControl.show(); }
else{ that.imgUploadControl = jQuery('#'+that.options.customUploadButtonId); that.imgUploadControl.show(); }

if( !$.isEmptyObject(that.croppedImg)){
if( !jQuery.isEmptyObject(that.croppedImg)){
that.cropControlRemoveCroppedImage = that.outputDiv.find('.cropControlRemoveCroppedImage');
}

Expand Down Expand Up @@ -158,7 +161,7 @@
}
});

if( !$.isEmptyObject(that.croppedImg)){
if( !jQuery.isEmptyObject(that.croppedImg)){

that.cropControlRemoveCroppedImage.on('click',function(){
if (typeof (that.options.onBeforeRemoveCroppedImg) === typeof(Function)) {
Expand All @@ -167,17 +170,17 @@

that.croppedImg.remove();
that.croppedImg = {};
$(this).hide();
jQuery(this).hide();

if (typeof (that.options.onAfterRemoveCroppedImg) === typeof(Function)) {
that.options.onAfterRemoveCroppedImg.call(that);
}

if( !$.isEmptyObject(that.defaultImg)){
if( !jQuery.isEmptyObject(that.defaultImg)){
that.obj.append(that.defaultImg);
}

if(that.options.outputUrlId !== ''){ $('#'+that.options.outputUrlId).val(''); }
if(that.options.outputUrlId !== ''){ jQuery('#'+that.options.outputUrlId).val(''); }

});

Expand Down Expand Up @@ -205,7 +208,7 @@
that.imgInitH = that.imgH = image.height;

if(that.options.modal){ that.createModal(); }
if( !$.isEmptyObject(that.croppedImg)){ that.croppedImg.remove(); }
if( !jQuery.isEmptyObject(that.croppedImg)){ that.croppedImg.remove(); }

that.imgUrl=image.src;

Expand Down Expand Up @@ -238,7 +241,7 @@
}
}

$.ajax({
jQuery.ajax({
url: that.options.uploadUrl,
data: formData,
context: document.body,
Expand All @@ -256,16 +259,16 @@
loadExistingImage: function(){
var that = this;

if( $.isEmptyObject(that.croppedImg)){
if( jQuery.isEmptyObject(that.croppedImg)){
if (that.options.onBeforeImgUpload) that.options.onBeforeImgUpload.call(that);

that.showLoader();
if(that.options.modal){ that.createModal(); }
if( !$.isEmptyObject(that.croppedImg)){ that.croppedImg.remove(); }
if( !jQuery.isEmptyObject(that.croppedImg)){ that.croppedImg.remove(); }

that.imgUrl=that.options.loadPicture ;

var img =$('<img src="'+ that.options.loadPicture +'">');
var img =jQuery('<img src="'+ that.options.loadPicture +'">');
that.obj.append(img);
img.load(function() {
that.imgInitW = that.imgW = this.width;
Expand All @@ -277,13 +280,14 @@

}else{
that.cropControlRemoveCroppedImage.on('click',function(){
that.options.loadCroppedPicture = '';
that.croppedImg.remove();
$(this).hide();
jQuery(this).hide();

if( !$.isEmptyObject(that.defaultImg)){
if( !jQuery.isEmptyObject(that.defaultImg)){
that.obj.append(that.defaultImg);
}
if(that.options.outputUrlId !== ''){ $('#'+that.options.outputUrlId).val(''); }
if(that.options.outputUrlId !== ''){ jQuery('#'+that.options.outputUrlId).val(''); }
that.croppedImg = '';
that.reset();
});
Expand All @@ -302,11 +306,11 @@
that.imgInitH = that.imgH = response.height;

if (that.options.modal) { that.createModal(); }
if (!$.isEmptyObject(that.croppedImg)) { that.croppedImg.remove(); }
if (!jQuery.isEmptyObject(that.croppedImg)) { that.croppedImg.remove(); }

that.imgUrl = response.url;

var img = $('<img src="'+response.url+'">')
var img = jQuery('<img src="'+response.url+'">')

that.obj.append(img);

Expand Down Expand Up @@ -334,11 +338,11 @@
var marginTop = that.windowH/2-that.objH/2;
var modalHTML = '<div id="croppicModal">'+'<div id="croppicModalObj" style="width:'+ that.objW +'px; height:'+ that.objH +'px; margin:0 auto; margin-top:'+ marginTop +'px; position: relative;"> </div>'+'</div>';

$('body').append(modalHTML);
jQuery('body').append(modalHTML);

that.modal = $('#croppicModal');
that.modal = jQuery('#croppicModal');

that.obj = $('#croppicModalObj');
that.obj = jQuery('#croppicModalObj');

},
destroyModal: function(){
Expand Down Expand Up @@ -385,9 +389,14 @@
});
}
// initial center image

that.img.css({'left': -(that.imgW -that.objW)/2, 'top': -(that.imgH -that.objH)/2, 'position':'relative'});
if(that.options.imgEyecandy){ that.imgEyecandy.css({'left': -(that.imgW -that.objW)/2, 'top': -(that.imgH -that.objH)/2, 'position':'relative'}); }
if(that.options.initialLeft==0) {
that.img.css({'left': -(that.imgW -that.objW)/2, 'top': -(that.imgH -that.objH)/2, 'position':'relative'});
if(that.options.imgEyecandy){ that.imgEyecandy.css({'left': -(that.imgW -that.objW)/2, 'top': -(that.imgH -that.objH)/2, 'position':'relative'}); }

} else {
that.img.css({'left': that.options.initialLeft, 'top': that.options.initialTop, 'position':'relative'});
if(that.options.imgEyecandy){ that.imgEyecandy.css({'left': that.options.initialLeft, 'top': that.options.initialTop, 'position':'relative'}); }
}

},

Expand All @@ -400,8 +409,8 @@
var cropControlZoomOut = '<i class="cropControlZoomOut"></i>';
var cropControlZoomMuchOut = '';
var cropControlRotateLeft = '';
var cropControlRotateRight = '';
var cropControlCrop = '<i class="cropControlCrop"></i>';
var cropControlRotateRight = '';
var cropControlCrop = '<i class="cropControlCrop"></i>';
var cropControlReset = '<i class="cropControlReset"></i>';

var html;
Expand Down Expand Up @@ -490,7 +499,7 @@
top:imgTop,
left:imgLeft
}).on("mouseup", function() {
$(this).removeClass('draggable').css('z-index', z_idx);
jQuery(this).removeClass('draggable').css('z-index', z_idx);
});

if(that.options.imgEyecandy){ that.imgEyecandy.offset({ top:imgTop, left:imgLeft }); }
Expand Down Expand Up @@ -670,7 +679,7 @@
}
}

$.ajax({
jQuery.ajax({
url: that.options.cropUrl,
data: formData,
context: document.body,
Expand All @@ -686,6 +695,14 @@
}

//
},
loadCroppedImg: function (croppedUrl) {
var that = this;

that.obj.append('<img class="croppedImg" src="' + croppedUrl + '">');
if (that.options.outputUrlId !== '') { jQuery('#' + that.options.outputUrlId).val(croppedUrl); }

that.croppedImg = that.obj.find('.croppedImg');
},
afterCrop: function (data) {
var that = this;
Expand All @@ -702,12 +719,7 @@
that.imgEyecandy.hide();

that.destroy();

that.obj.append('<img class="croppedImg" src="' + response.url + '">');
if (that.options.outputUrlId !== '') { $('#' + that.options.outputUrlId).val(response.url); }

that.croppedImg = that.obj.find('.croppedImg');

that.loadCroppedImg(response.url);
that.init();

that.hideLoader();
Expand Down Expand Up @@ -737,21 +749,21 @@

that.init();

if( !$.isEmptyObject(that.croppedImg)){
if( !jQuery.isEmptyObject(that.croppedImg)){
that.obj.append(that.croppedImg);
if(that.options.outputUrlId !== ''){ $('#'+that.options.outputUrlId).val(that.croppedImg.attr('url')); }
if(that.options.outputUrlId !== ''){ jQuery('#'+that.options.outputUrlId).val(that.croppedImg.attr('url')); }
}
if (typeof that.options.onReset == 'function')
that.options.onReset.call(that);
},
destroy:function(){
var that = this;
if(that.options.modal && !$.isEmptyObject(that.modal) ){ that.destroyModal(); }
if(that.options.imgEyecandy && !$.isEmptyObject(that.imgEyecandy) ){ that.destroyEyecandy(); }
if( !$.isEmptyObject( that.cropControlsUpload ) ){ that.cropControlsUpload.remove(); }
if( !$.isEmptyObject( that.cropControlsCrop ) ){ that.cropControlsCrop.remove(); }
if( !$.isEmptyObject( that.loader ) ){ that.loader.remove(); }
if( !$.isEmptyObject( that.form ) ){ that.form.remove(); }
if(that.options.modal && !jQuery.isEmptyObject(that.modal) ){ that.destroyModal(); }
if(that.options.imgEyecandy && !jQuery.isEmptyObject(that.imgEyecandy) ){ that.destroyEyecandy(); }
if( !jQuery.isEmptyObject( that.cropControlsUpload ) ){ that.cropControlsUpload.remove(); }
if( !jQuery.isEmptyObject( that.cropControlsCrop ) ){ that.cropControlsCrop.remove(); }
if( !jQuery.isEmptyObject( that.loader ) ){ that.loader.remove(); }
if( !jQuery.isEmptyObject( that.form ) ){ that.form.remove(); }
that.obj.html('');
},
isAjaxUploadSupported: function () {
Expand Down Expand Up @@ -791,14 +803,14 @@
+ 'name="' + that.id + '_upload_iframe_form" '
+ 'action="' + that.options.uploadUrl + '" method="post" '
+ 'enctype="multipart/form-data" encoding="multipart/form-data" style="display:none;">'
+ $("#" + that.id + '_imgUploadField')[0].outerHTML
+ jQuery("#" + that.id + '_imgUploadField')[0].outerHTML
+ '</form></body></html>';

iframe.contentWindow.document.open('text/htmlreplace');
iframe.contentWindow.document.write(myContent);
iframe.contentWindow.document.close();

that.iframeobj = $("#" + that.id + "_upload_iframe");
that.iframeobj = jQuery("#" + that.id + "_upload_iframe");
that.iframeform = that.iframeobj.contents().find("html").find("." + that.id + "_upload_iframe_form");

that.iframeform.on("change", "input", function () {
Expand Down