chamilo
/
chamilo-lms
mirror of https://github.com/chamilo/chamilo-lms/tree/1.11.x
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Move crop image into formvalidator and the file class to avoid doubles

Browse Source
pull/2487/head
jmontoyaa 9 years ago
parent 3d74cee8e3
commit af164930aa
10 changed files with 113 additions and 388 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 71
      main/admin/user_add.php
  2. 68
      main/admin/user_edit.php
  3. 63
      main/auth/profile.php
  4. 74
      main/course_info/infocours.php
  5. 5
      main/inc/lib/extra_field.lib.php
  6. 17
      main/inc/lib/formvalidator/FormValidator.class.php
  7. 71
      main/inc/lib/pear/HTML/QuickForm/file.php
  8. 2
      main/inc/lib/sessionmanager.lib.php
  9. 66
      main/session/session_add.php
  10. 64
      main/session/session_edit.php

71
main/admin/user_add.php
Unescape View File

@ -44,56 +44,6 @@ if ($checkPass == 'true') {
}
$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() {
@ -190,24 +140,13 @@ if (api_get_setting('login_is_email') == 'true') {
// 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

68
main/admin/user_edit.php
Unescape View File

@ -73,51 +73,6 @@ $userGeolocalization = api_get_setting('enable_profile_user_address_geolocalizat
$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;
@ -332,24 +287,13 @@ if ($userGeolocalization) {
}
// 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).')',
@ -617,7 +561,7 @@ if ($form->validate()) {
$currentUserId = api_get_user_id();
$userObj = api_get_user_entity($user_id);
UserManager::add_user_as_admin($userObj);
if ($user_id != $currentUserId) {

63
main/auth/profile.php
Unescape View File

@ -38,48 +38,6 @@ $htmlHeadXtra[] = '<script src="'. api_get_path(WEB_PATH) .'web/assets/cropper/d
$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();
@ -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) {
@ -378,28 +335,14 @@ if ($userGeolocalization) {
// 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'));

74
main/course_info/infocours.php
Unescape View File

@ -48,55 +48,6 @@ if (!$is_allowedToEdit) {
$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'])) {
@ -193,24 +144,13 @@ $form->addText('department_url', get_lang('DepartmentUrl'), false);
$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).')',

5
main/inc/lib/extra_field.lib.php
Unescape View File

@ -1477,11 +1477,10 @@ EOF;
$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');

17
main/inc/lib/formvalidator/FormValidator.class.php
Unescape View File

@ -809,6 +809,23 @@ EOT;
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', '');
}
}
/**

71
main/inc/lib/pear/HTML/QuickForm/file.php
Unescape View File

@ -266,4 +266,75 @@ class HTML_QuickForm_file extends HTML_QuickForm_input
return null;
}
}
/**
* @return string
*/
public function getElementJS()
{
$id = $this->getAttribute('id');
return '<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("'.$id.'").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>';
}
public function toHtml()
{
$js = '';
if (isset($this->_attributes['crop_image'])) {
$js = $this->getElementJS();
}
if ($this->_flagFrozen) {
return $this->getFrozenHtml();
} else {
return $js.$this->_getTabs() . '<input' . $this->_getAttrString($this->_attributes) . ' />';
}
} //end func toHtml
}

2
main/inc/lib/sessionmanager.lib.php
Unescape View File

@ -6899,7 +6899,7 @@ class SessionManager
$extra_field = new ExtraField('session');
$extra = $extra_field->addElements($form, $sessionId);
$form->addElement('html','</div>');
$form->addElement('html', '</div>');
$js = $extra['jquery_ready_content'];

66
main/session/session_add.php
Unescape View File

@ -25,57 +25,10 @@ $errorMsg = '';
// Crop picture plugin for session images
$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");
$("input:file").change(function() {
var oFReader = new FileReader();
oFReader.readAsDataURL(document.getElementById("extra_image").files[0]);
$("#extra_image").next("p").remove();
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>';
$interbreadcrumb[] = array(
'url' => 'session_list.php',
'name' => get_lang('SessionList'),
'name' => get_lang('SessionList')
);
function search_coachs($needle)
@ -191,23 +144,6 @@ $(function() {
});
</script>';
// @todo add an html element
$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->addButtonNext(get_lang('NextStep'));
if (!$formSent) {

64
main/session/session_edit.php
Unescape View File

@ -17,53 +17,6 @@ $formSent = 0;
// Crop picture plugin for session images
$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");
$("input:file").change(function() {
var oFReader = new FileReader();
oFReader.readAsDataURL(document.getElementById("extra_image").files[0]);
$("#extra_image").next("p").remove();
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>';
// Database Table Definitions
$tbl_user = Database::get_main_table(TABLE_MAIN_USER);
@ -171,23 +124,6 @@ $(function() {
});
</script>';
$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="previeImage" >
</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->addButtonUpdate(get_lang('ModifyThisSession'));
$formDefaults = $sessionInfo;

Write Preview
Loading…
Cancel
Save