WIP of implementing cropping avatar photo

api/js/etemplate/et2_widget_image.js

@@ -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);

api/templates/default/avatar_edit.xet

@@ -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>

composer.json

@@ -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"

composer.lock

@@ -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",
+    "hash": "c53e37027e62153a377bb9adf13d2212",
-    "content-hash": "d6ed8efbe2b9261641cf2d9ca9f1d01b",
+    "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",