Skip to content

Commit

Permalink
Move crop image into formvalidator and the file class to avoid doubles
Browse files Browse the repository at this point in the history
  • Loading branch information
@jmontoyaa
jmontoyaa committed Jul 13, 2016
1 parent 3d74cee commit af16493
Show file tree
Hide file tree
Showing 10 changed files with 113 additions and 388 deletions.
71 changes: 5 additions & 66 deletions main/admin/user_add.php
View file
Expand Up @@ -44,56 +44,6 @@
}
$htmlHeadXtra[] = '<link href="'. api_get_path(WEB_PATH) .'web/assets/cropper/dist/cropper.min.css" rel="stylesheet">';
$htmlHeadXtra[] = '<script src="'. api_get_path(WEB_PATH) .'web/assets/cropper/dist/cropper.min.js"></script>';
$htmlHeadXtra[] = '<script>
$(document).ready(function() {
var $image = $("#previewImage");
var $input = $("[name=\'cropResult\']");
var $cropButton = $("#cropButton");
var canvas = "";
var imageWidth = "";
var imageHeight = "";
$("input:file").change(function() {
var oFReader = new FileReader();
oFReader.readAsDataURL(document.getElementById("picture").files[0]);
oFReader.onload = function (oFREvent) {
$image.attr("src", this.result);
$("#labelCropImage").html("'.get_lang('Preview').'");
$("#cropImage").addClass("thumbnail");
$cropButton.removeClass("hidden");
// Destroy cropper
$image.cropper("destroy");
$image.cropper({
aspectRatio: 1 / 1,
responsive : true,
center : false,
guides : false,
movable: false,
zoomable: false,
rotatable: false,
scalable: false,
crop: function(e) {
// Output the result data for cropping image.
$input.val(e.x+","+e.y+","+e.width+","+e.height);
}
});
};
});
$("#cropButton").on("click", function() {
var canvas = $image.cropper("getCroppedCanvas");
var dataUrl = canvas.toDataURL();
$image.attr("src", dataUrl);
$image.cropper("destroy");
$cropButton.addClass("hidden");
return false;
});
});
</script>';


$htmlHeadXtra[] = '
<script>
$("#status_select").ready(function() {
Expand Down Expand Up @@ -190,24 +140,13 @@ function display_drh_list(){
// Phone
$form->addElement('text', 'phone', get_lang('PhoneNumber'));
// Picture
$form->addElement('file', 'picture', get_lang('AddImage'), array('id' => 'picture', 'class' => 'picture-form'));
$form->addFile(
'picture',
get_lang('AddImage'),
array('id' => 'picture', 'class' => 'picture-form', 'crop_image' => true)
);
$allowed_picture_types = array ('jpg', 'jpeg', 'png', 'gif');

$form->addHtml(''
. '<div class="form-group">'
. '<label for="cropImage" id="labelCropImage" class="col-sm-2 control-label"></label>'
. '<div class="col-sm-8">'
. '<div id="cropImage" class="cropCanvas">'
. '<img id="previewImage" >'
. '</div>'
. '<div>'
. '<button class="btn btn-primary hidden" name="cropButton" id="cropButton" type="submit"><em class="fa fa-crop"></em> '.get_lang('CropYourPicture').'</button>'
. '</div>'
. '</div>'
. '</div>'
. '');
$form->addHidden('cropResult', '');

$form->addRule('picture', get_lang('OnlyImagesAllowed').' ('.implode(',', $allowed_picture_types).')', 'filetype', $allowed_picture_types);

// Username
Expand Down
68 changes: 6 additions & 62 deletions main/admin/user_edit.php
View file
Expand Up @@ -73,51 +73,6 @@ function confirmation(name) {
$htmlHeadXtra[] = '<link href="'. api_get_path(WEB_PATH) .'web/assets/cropper/dist/cropper.min.css" rel="stylesheet">';
$htmlHeadXtra[] = '<script src="'. api_get_path(WEB_PATH) .'web/assets/cropper/dist/cropper.min.js"></script>';
$htmlHeadXtra[] = '<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?sensor=true" ></script>';
$htmlHeadXtra[] = '<script>
$(document).ready(function() {
var $image = $("#previewImage");
var $input = $("[name=\'cropResult\']");
var $cropButton = $("#cropButton");
$("input:file").change(function() {
var oFReader = new FileReader();
oFReader.readAsDataURL(document.getElementById("picture").files[0]);
oFReader.onload = function (oFREvent) {
$image.attr("src", this.result);
$("#labelCropImage").html("'.get_lang('Preview').'");
$("#cropImage").addClass("thumbnail");
$cropButton.removeClass("hidden");
// Destroy cropper
$image.cropper("destroy");
$image.cropper({
aspectRatio: 1 / 1,
responsive : true,
center : false,
guides : false,
movable: false,
zoomable: false,
rotatable: false,
scalable: false,
crop: function(e) {
// Output the result data for cropping image.
$input.val(e.x+","+e.y+","+e.width+","+e.height);
}
});
};
});
$("#cropButton").on("click", function() {
var canvas = $image.cropper("getCroppedCanvas");
var dataUrl = canvas.toDataURL();
$image.attr("src", dataUrl);
$image.cropper("destroy");
$cropButton.addClass("hidden");
return false;
});
});
</script>';

$libpath = api_get_path(LIBRARY_PATH);
$noPHP_SELF = true;
Expand Down Expand Up @@ -332,24 +287,13 @@ function initializeGeo(address, latLng) {
}

// Picture
$form->addElement('file', 'picture', get_lang('AddPicture'), array('id' => 'picture', 'class' => 'picture-form'));
$form->addFile(
'picture',
get_lang('AddImage'),
array('id' => 'picture', 'class' => 'picture-form', 'crop_image' => true)
);
$allowed_picture_types = array ('jpg', 'jpeg', 'png', 'gif');

$form->addHtml('<div class="form-group">
<label for="cropImage" id="labelCropImage" class="col-sm-2 control-label"></label>
<div class="col-sm-8">
<div id="cropImage" class="cropCanvas">
<img id="previewImage" >
</div>
<div>
<button class="btn btn-primary hidden" name="cropButton" id="cropButton">
<em class="fa fa-crop"></em> '.get_lang('CropYourPicture').'</button>
</div>
</div>
</div>');

$form->addHidden('cropResult', '');

$form->addRule(
'picture',
get_lang('OnlyImagesAllowed').' ('.implode(',', $allowed_picture_types).')',
Expand Down Expand Up @@ -617,7 +561,7 @@ function initializeGeo(address, latLng) {
$currentUserId = api_get_user_id();

$userObj = api_get_user_entity($user_id);

UserManager::add_user_as_admin($userObj);

if ($user_id != $currentUserId) {
Expand Down
63 changes: 3 additions & 60 deletions main/auth/profile.php
View file
Expand Up @@ -38,48 +38,6 @@
$htmlHeadXtra[] = '<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?sensor=true" ></script>';
$htmlHeadXtra[] = '<script>
$(document).ready(function() {
var $image = $("#previewImage");
var $input = $("[name=\'cropResult\']");
var $cropButton = $("#cropButton");
$("input:file").change(function() {
var oFReader = new FileReader();
oFReader.readAsDataURL(document.getElementById("picture_form").files[0]);
oFReader.onload = function (oFREvent) {
$image.attr("src", this.result);
$("#labelCropImage").html("'.get_lang('Preview').'");
$("#cropImage").addClass("thumbnail");
$cropButton.removeClass("hidden");
// Destroy cropper
$image.cropper("destroy");
$image.cropper({
aspectRatio: 1 / 1,
responsive : true,
center : false,
guides : false,
movable: false,
zoomable: false,
rotatable: false,
scalable: false,
crop: function(e) {
// Output the result data for cropping image.
$input.val(e.x+","+e.y+","+e.width+","+e.height);
}
});
};
});
$("#cropButton").on("click", function() {
var canvas = $image.cropper("getCroppedCanvas");
var dataUrl = canvas.toDataURL();
$image.attr("src", dataUrl);
$image.cropper("destroy");
$cropButton.addClass("hidden");
return false;
});
$("id_generate_api_key").on("click", function (e) {
e.preventDefault();
Expand Down Expand Up @@ -107,7 +65,6 @@ function show_image(image,width,height) {
width = parseInt(width) + 20;
height = parseInt(height) + 20;
window_x = window.open(image,\'windowX\',\'width=\'+ width + \', height=\'+ height + \'\');
}
function hide_icon_edit(element_html) {
Expand Down Expand Up @@ -378,28 +335,14 @@ function initializeGeo(address, latLng) {

// PICTURE
if (is_profile_editable() && api_get_setting('profile', 'picture') == 'true') {
$form->addElement(
'file',
$form->addFile(
'picture',
($user_data['picture_uri'] != '' ? get_lang('UpdateImage') : get_lang(
'AddImage'
)),
array('id' => 'picture_form', 'class' => 'picture-form')
array('id' => 'picture', 'class' => 'picture-form', 'crop_image' => true)
);
$form->addHtml(''
. '<div class="form-group">'
. '<label for="cropImage" id="labelCropImage" class="col-sm-2 control-label"></label>'
. '<div class="col-sm-8">'
. '<div id="cropImage" class="cropCanvas">'
. '<img id="previewImage" >'
. '</div>'
. '<div>'
. '<button class="btn btn-primary hidden" name="cropButton" id="cropButton"><em class="fa fa-crop"></em> '.get_lang('CropYourPicture').'</button>'
. '</div>'
. '</div>'
. '</div>'
. '');
$form->addHidden('cropResult', '');

$form->add_progress_bar();
if (!empty($user_data['picture_uri'])) {
$form->addElement('checkbox', 'remove_picture', null, get_lang('DelImage'));
Expand Down
74 changes: 7 additions & 67 deletions main/course_info/infocours.php
View file
Expand Up @@ -48,55 +48,6 @@ function is_settings_editable()

$htmlHeadXtra[] = '<link href="'. api_get_path(WEB_PATH) .'web/assets/cropper/dist/cropper.min.css" rel="stylesheet">';
$htmlHeadXtra[] = '<script src="'. api_get_path(WEB_PATH) .'web/assets/cropper/dist/cropper.min.js"></script>';
$htmlHeadXtra[] = '<script>
$(document).ready(function() {
var $image = $("#previewImage");
var $input = $("[name=\'cropResult\']");
var $cropButton = $("#cropButton");
var canvas = "";
var imageWidth = "";
var imageHeight = "";
$("input:file").change(function() {
var oFReader = new FileReader();
oFReader.readAsDataURL(document.getElementById("picture").files[0]);
oFReader.onload = function (oFREvent) {
$image.attr("src", this.result);
$("#labelCropImage").html("'.get_lang('Preview').'");
$("#cropImage").addClass("thumbnail");
$cropButton.removeClass("hidden");
// Destroy cropper
$image.cropper("destroy");
$image.cropper({
aspectRatio: 16 / 9,
responsive : true,
center : false,
guides : false,
movable: false,
zoomable: false,
rotatable: false,
scalable: false,
crop: function(e) {
// Output the result data for cropping image.
$input.val(e.x+","+e.y+","+e.width+","+e.height);
}
});
};
});
$("#cropButton").on("click", function() {
var canvas = $image.cropper("getCroppedCanvas");
var dataUrl = canvas.toDataURL();
$image.attr("src", dataUrl);
$image.cropper("destroy");
$cropButton.addClass("hidden");
return false;
});
});
</script>';

$show_delete_watermark_text_message = false;
if (api_get_setting('pdf_export_watermark_by_course') == 'true') {
if (isset($_GET['delete_watermark'])) {
Expand Down Expand Up @@ -193,24 +144,13 @@ function is_settings_editable()
$form->applyFilter('department_url', 'html_filter');

// Picture
$form->addElement('file', 'picture', get_lang('AddPicture'), array('id' => 'picture', 'class' => 'picture-form'));
$form->addHtml('
<div class="form-group">
<label for="cropImage" id="labelCropImage" class="col-sm-2 control-label"></label>
<div class="col-sm-8">
<div id="cropImage" class="cropCanvas">
<img id="previewImage" />
</div>
<div>
<button class="btn btn-primary hidden" type="button" name="cropButton" id="cropButton">
<em class="fa fa-crop"></em> '.get_lang('CropYourPicture').'
</button>
</div>
</div>
</div>
');
$form->addHidden('cropResult', '');
$allowed_picture_types = array ('jpg', 'jpeg', 'png', 'gif');
$form->addFile(
'picture',
get_lang('AddPicture'),
array('id' => 'picture', 'class' => 'picture-form', 'crop_image' => true)
);

$allowed_picture_types = array('jpg', 'jpeg', 'png', 'gif');
$form->addRule(
'picture',
get_lang('OnlyImagesAllowed').' ('.implode(',', $allowed_picture_types).')',
Expand Down
5 changes: 2 additions & 3 deletions main/inc/lib/extra_field.lib.php
View file
Expand Up @@ -1477,11 +1477,10 @@ public function set_extra_fields_in_form(
$fieldTexts[0] = get_lang($fieldTexts[0]);
}

$form->addElement(
'file',
$form->addFile(
$fieldVariable,
$fieldTexts,
['accept' => 'image/*', 'id' => 'extra_image']
['accept' => 'image/*', 'id' => 'extra_image', 'crop_image' => 'true']
);

$form->applyFilter('extra_'.$field_details['variable'], 'stripslashes');
Expand Down
17 changes: 17 additions & 0 deletions main/inc/lib/formvalidator/FormValidator.class.php
View file
Expand Up @@ -809,6 +809,23 @@ public function addHeader($text)
public function addFile($name, $label, $attributes = array())
{
$this->addElement('file', $name, $label, $attributes);
if (isset($attributes['crop_image'])) {
$this->addHtml('
<div class="form-group">
<label for="cropImage" id="labelCropImage" class="col-sm-2 control-label"></label>
<div class="col-sm-8">
<div id="cropImage" class="cropCanvas">
<img id="previewImage">
</div>
<div>
<button class="btn btn-primary hidden" name="cropButton" id="cropButton" ><em class="fa fa-crop"></em> '.
get_lang('CropYourPicture').'</button>
</div>
</div>
</div>'
);
$this->addHidden('cropResult', '');
}
}

/**
Expand Down

5 comments on commit af16493

@ywarnier
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's weird... it looks like JPG images are not accepted for user pictures anymore (but they are accepted for courses). I have sent some changes as well (to maintain the ratio flexibility because users are 1/1 and courses are 16/9) but I can't find what the issue is, exactly (this issue happened before my changes).
Do you know anything about what might cause this?

@jmontoyaa
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Picture upload stop working because of this:

554c806

@ywarnier
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Err... OK :-/
My change was right, though, but there's probably something more somewhere, that I can do. To be precise, picture uploads work perfectly with .png and .jpg for courses, but for users only .png works.

@jmontoyaa
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't say it was not ok. But for my installation the user upload was working. Now it doesnt work with any images jpg, JPG.

@jmontoyaa
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Problem is with a user that never had an image before.

Please sign in to comment.