mirror of
https://github.com/EGroupware/egroupware.git
synced 2024-11-07 08:34:29 +01:00
WIP of implementing cropping avatar photo
This commit is contained in:
Hadi Nategh
parent
7de7af4cc1
commit
e231ac86cf
@ -15,6 +15,7 @@
|
||||
et2_core_interfaces;
|
||||
et2_core_baseWidget;
|
||||
expose;
|
||||
/vendor/bower-asset/cropper/dist/cropper.min.js;
|
||||
*/
|
||||
|
||||
/**
|
||||
@ -328,6 +329,12 @@ var et2_avatar = (function(){ "use strict"; return et2_image.extend(
|
||||
type: "boolean",
|
||||
default: false,
|
||||
description: "Make avatar widget editable to be able to crop profile picture or upload a new photo"
|
||||
},
|
||||
crop: {
|
||||
name: "Crop avatar",
|
||||
type: "boolean",
|
||||
default: false,
|
||||
description: "Create crop container and cropping feature"
|
||||
}
|
||||
},
|
||||
|
||||
@ -436,7 +443,36 @@ var et2_avatar = (function(){ "use strict"; return et2_image.extend(
|
||||
var edit = jQuery(document.createElement('div'))
|
||||
.addClass('emlEdit')
|
||||
.click(function(){
|
||||
// Todo
|
||||
var buttons = [
|
||||
{"button_id": 1,"text": 'save', id: 'save', image: 'check', "default":true},
|
||||
{"button_id": 0,"text": 'cancel', id: 'cancel', image: 'cancelled'}
|
||||
];
|
||||
var dialog = function(_title, _value, _buttons, _egw_or_appname)
|
||||
{
|
||||
return et2_createWidget("dialog",
|
||||
{
|
||||
callback: function(_buttons, _value)
|
||||
{
|
||||
if (_buttons == 'save')
|
||||
{
|
||||
var canvas = jQuery('#_cropper_image').cropper('getCroppedCanvas');
|
||||
self.image.attr('src', canvas.toDataURL("image/jpeg", 1.0));
|
||||
}
|
||||
},
|
||||
title: _title||egw.lang('Input required'),
|
||||
buttons: _buttons||et2_dialog.BUTTONS_OK_CANCEL,
|
||||
value: {
|
||||
content: _value
|
||||
},
|
||||
width: "90%",
|
||||
height:"90%",
|
||||
resizable: false,
|
||||
position:"top+10",
|
||||
template: egw.webserverUrl+'/api/templates/default/avatar_edit.xet?2'
|
||||
}, et2_dialog._create_parent(_egw_or_appname));
|
||||
};
|
||||
|
||||
dialog(egw.lang('Edit avatar'),{photo:self.options.contact_id},buttons);
|
||||
})
|
||||
.appendTo(eml);
|
||||
|
||||
@ -474,6 +510,16 @@ var et2_avatar = (function(){ "use strict"; return et2_image.extend(
|
||||
{
|
||||
this._buildEditableLayer();
|
||||
}
|
||||
if (this.options.crop)
|
||||
{
|
||||
var cropped = jQuery(this.image).cropper({
|
||||
aspectRatio: 1/1,
|
||||
crop: function (e){
|
||||
console.log (e);
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
});}).call(this);
|
||||
|
||||
22
api/templates/default/avatar_edit.xet
Normal file
22
api/templates/default/avatar_edit.xet
Normal file
@ -0,0 +1,22 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE overlay PUBLIC "-//Stylite AG//eTemplate 2//EN" "http://www.egroupware.org/etemplate2.dtd">
|
||||
<!-- $Id$ -->
|
||||
<overlay>
|
||||
<template id="etemplate.dtd" template="" lang="" group="0" version="16.2">
|
||||
<vbox>
|
||||
|
||||
<avatar crop="true" id="cropper_image" contact_id="$cont[photo]" width ="200" height="auto"/>
|
||||
<hbox>
|
||||
<buttononly id="rotate_reset" label="Reset" image="" background_image="1" onclick="jQuery('#_cropper_image').cropper('reset');"/>
|
||||
<buttononly id="rotate_l" label="Rotate Left" image="recur" background_image="1" onclick="jQuery('#_cropper_image').cropper('rotate',-90);"/>
|
||||
<buttononly id="rotate_r" label= "Rotate Right" image="reload" background_image="1" onclick="jQuery('#_cropper_image').cropper('rotate',90);"/>
|
||||
<hbox>
|
||||
<file id='upload_photo' label="upload new photo"/>
|
||||
</hbox>
|
||||
</hbox>
|
||||
</vbox>
|
||||
<styles>
|
||||
|
||||
</styles>
|
||||
</template>
|
||||
</overlay>
|
||||
@ -31,6 +31,7 @@
|
||||
"bower-asset/fastclick":"1.0.*",
|
||||
"bower-asset/jquery-touchswipe": "1.6.*",
|
||||
"bower-asset/jquery-ui":"=1.11.2",
|
||||
"bower-asset/cropper":"2.3.*",
|
||||
"npm-asset/as-jqplot" : "1.0.*",
|
||||
"npm-asset/gridster":"0.5.*",
|
||||
"adldap2/adldap2": "=4.0.4"
|
||||
|
||||
62
composer.lock
generated
62
composer.lock
generated
@ -4,8 +4,8 @@
|
||||
"Read more about it at https://getcomposer.org/doc/01-basic-usage.md#composer-lock-the-lock-file",
|
||||
"This file is @generated automatically"
|
||||
],
|
||||
"hash": "9a74cc9727567f9100d4d1311228aede",
|
||||
"content-hash": "d6ed8efbe2b9261641cf2d9ca9f1d01b",
|
||||
"hash": "c53e37027e62153a377bb9adf13d2212",
|
||||
"content-hash": "5e2d4def7fa91436952c7aef101d4023",
|
||||
"packages": [
|
||||
{
|
||||
"name": "adldap2/adldap2",
|
||||
@ -57,6 +57,64 @@
|
||||
],
|
||||
"time": "2016-07-14 18:11:24"
|
||||
},
|
||||
{
|
||||
"name": "bower-asset/cropper",
|
||||
"version": "v2.3.4",
|
||||
"source": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/fengyuanchen/cropper.git",
|
||||
"reference": "30c58b29ee21010e17e58ebab165fbd84285c685"
|
||||
},
|
||||
"dist": {
|
||||
"type": "zip",
|
||||
"url": "https://api.github.com/repos/fengyuanchen/cropper/zipball/30c58b29ee21010e17e58ebab165fbd84285c685",
|
||||
"reference": "30c58b29ee21010e17e58ebab165fbd84285c685",
|
||||
"shasum": ""
|
||||
},
|
||||
"type": "bower-asset-library",
|
||||
"extra": {
|
||||
"bower-asset-main": [
|
||||
"dist/cropper.js",
|
||||
"dist/cropper.css"
|
||||
],
|
||||
"bower-asset-ignore": [
|
||||
"**/.*",
|
||||
"node_modules",
|
||||
"bower_components",
|
||||
"tests",
|
||||
"test",
|
||||
"examples",
|
||||
"assets",
|
||||
"demo",
|
||||
"docs",
|
||||
"gulpfile.js",
|
||||
"CONTRIBUTING.md",
|
||||
"ISSUE_TEMPLATE.md"
|
||||
]
|
||||
},
|
||||
"license": [
|
||||
"MIT"
|
||||
],
|
||||
"description": "A simple jQuery image cropping plugin.",
|
||||
"keywords": [
|
||||
"crop",
|
||||
"cropper",
|
||||
"cropping",
|
||||
"css",
|
||||
"development",
|
||||
"front-end",
|
||||
"html",
|
||||
"image",
|
||||
"javascript",
|
||||
"jquery",
|
||||
"move",
|
||||
"plugin",
|
||||
"rotate",
|
||||
"scale",
|
||||
"web",
|
||||
"zoom"
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "bower-asset/fastclick",
|
||||
"version": "v1.0.6",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user