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

Added a crop Button to live preview

Browse Source
1.10.x
José Loguercio 9 years ago
parent 9545d1d475
commit 6ef01d199c
5 changed files with 86 additions and 22 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. 4
      app/Resources/public/css/base.css
  2. 26
      main/admin/user_add.php
  3. 26
      main/admin/user_edit.php
  4. 26
      main/auth/profile.php
  5. 26
      main/course_info/infocours.php

4
app/Resources/public/css/base.css
Unescape View File

@ -1357,9 +1357,9 @@ div.attendance-calendar-add div.row div.formw,div.attendance-calendar-edit div.r
a.unread {
font-weight:bold;
}
.cropCanvas {
.cropCanvas > img {
max-width: 300px;
max-height: 150px;
max-height: 200px;
}
/*SOCIAL TOOL*/

26
main/admin/user_add.php
Unescape View File

@ -48,24 +48,28 @@ $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) {
document.getElementById("previewImage").src = oFREvent.target.result;
$image.attr("src", this.result);
$("#labelCropImage").html("'.get_lang('Preview').'");
$("#cropImage").addClass("thumbnail");
$cropButton.removeClass("hidden");
// Destroy cropper
$image.cropper("destroy");
// Replace url
$image.attr("src", this.result);
$image.cropper({
aspectRatio: 1 / 1,
responsive : true,
center : false,
guides : false,
movable: false,
zoomable: false,
rotatable: false,
@ -77,6 +81,15 @@ $(document).ready(function() {
});
};
});
$("#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>';
@ -187,6 +200,9 @@ $form->addHtml(''
. '<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>'
. '');

26
main/admin/user_edit.php
Unescape View File

@ -74,24 +74,28 @@ $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) {
document.getElementById("previewImage").src = oFREvent.target.result;
$image.attr("src", this.result);
$("#labelCropImage").html("'.get_lang('Preview').'");
$("#cropImage").addClass("thumbnail");
$cropButton.removeClass("hidden");
// Destroy cropper
$image.cropper("destroy");
// Replace url
$image.attr("src", this.result);
$image.cropper({
aspectRatio: 1 / 1,
responsive : true,
center : false,
guides : false,
movable: false,
zoomable: false,
rotatable: false,
@ -103,6 +107,15 @@ $(document).ready(function() {
});
};
});
$("#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>';
@ -203,6 +216,9 @@ $form->addHtml(''
. '<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>'
. '');

26
main/auth/profile.php
Unescape View File

@ -37,24 +37,28 @@ $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_form").files[0]);
oFReader.onload = function (oFREvent) {
document.getElementById("previewImage").src = oFREvent.target.result;
$image.attr("src", this.result);
$("#labelCropImage").html("'.get_lang('Preview').'");
$("#cropImage").addClass("thumbnail");
$cropButton.removeClass("hidden");
// Destroy cropper
$image.cropper("destroy");
// Replace url
$image.attr("src", this.result);
$image.cropper({
aspectRatio: 1 / 1,
responsive : true,
center : false,
guides : false,
movable: false,
zoomable: false,
rotatable: false,
@ -66,6 +70,15 @@ $(document).ready(function() {
});
};
});
$("#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;
});
});
function confirmation(name) {
@ -252,6 +265,9 @@ if (is_profile_editable() && api_get_setting('profile', 'picture') == 'true') {
. '<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>'
. '');

26
main/course_info/infocours.php
Unescape View File

@ -52,24 +52,28 @@ $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) {
document.getElementById("previewImage").src = oFREvent.target.result;
$image.attr("src", this.result);
$("#labelCropImage").html("'.get_lang('Preview').'");
$("#cropImage").addClass("thumbnail");
$cropButton.removeClass("hidden");
// Destroy cropper
$image.cropper("destroy");
// Replace url
$image.attr("src", this.result);
$image.cropper({
aspectRatio: 4 / 3,
responsive : true,
center : false,
guides : false,
movable: false,
zoomable: false,
rotatable: false,
@ -81,6 +85,15 @@ $(document).ready(function() {
});
};
});
$("#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>';
@ -181,6 +194,9 @@ $form->addHtml(''
. '<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>'
. '');

Write Preview
Loading…
Cancel
Save