WIP avatar widget:

- Implement upload and delete of contacts photo
- Add missing cropper stylesheet

addressbook/inc/class.addressbook_ui.inc.php

@@ -2936,6 +2936,35 @@ window.egw_LAB.wait(function() {
 		return $this->tmpl->exec('addressbook.addressbook_ui.search',$content,$sel_options,$readonlys,array(),2);
 	}
 
+	/**
+	 * Ajax method to update edited avatar photo via
+	 * avatar widget.
+	 *
+	 * @param int $contact_id
+	 * @param file string $file = null null means to delete
+	 */
+	function ajax_update_photo ($contact_id, $file= null)
+	{
+		$response = Api\Json\Response::get();
+		$contact = $this->read($contact_id);
+		if ($file)
+		{
+			$filteredFile=substr($file, strpos($file, ",")+1);
+			$decoded = base64_decode($filteredFile);
+		}
+		$contact ['jpegphoto'] = is_null($file)? $file: $decoded;
+
+		$success = $this->save($contact);
+		if (!$success)
+		{
+			$response->alert($message);
+		}
+		else
+		{
+			$response->data(true);
+		}
+	}
+
 	/**
 	 * download photo of the given ($_GET['contact_id'] or $_GET['account_id']) contact
 	 */

api/js/etemplate/et2_widget_image.js

@@ -361,8 +361,7 @@ var et2_avatar = (function(){ "use strict"; return et2_image.extend(
 	set_contact_id: function(_contact_id)
 	{
 		var params = {
-			menuaction: 'addressbook.addressbook_ui.photo',
-			'etag' : ''
+			menuaction: 'addressbook.addressbook_ui.photo'
 		};
 		var id = 'contact_id';
 
@@ -457,6 +456,9 @@ var et2_avatar = (function(){ "use strict"; return et2_image.extend(
 								{
 									var canvas = jQuery('#_cropper_image').cropper('getCroppedCanvas');
 									self.image.attr('src', canvas.toDataURL("image/jpeg", 1.0));
+									egw.json('addressbook.addressbook_ui.ajax_update_photo', [self.options.contact_id, canvas.toDataURL('image/jpeg',1.0)], function(res){
+										if (res) egw.refresh('Avatar updated.', egw.app_name());
+									}).sendRequest();
 								}
 							},
 							title: _title||egw.lang('Input required'),
@@ -483,7 +485,13 @@ var et2_avatar = (function(){ "use strict"; return et2_image.extend(
 					et2_dialog.show_dialog(function(_btn){
 						if (_btn == et2_dialog.YES_BUTTON)
 						{
-							//TODO: send delete message to server
+							egw.json('addressbook.addressbook_ui.ajax_update_photo', [self.options.contact_id, null], function(res){
+								if (res)
+								{
+									self.image.attr('src','');
+									egw.refresh('Avatar Deleted.', egw.app_name());
+								}
+							}).sendRequest();
 						}
 					}, egw.lang('Delete this photo?'), 'Delete', null, et2_dialog.BUTTONS_YES_NO);
 				})
@@ -496,7 +504,7 @@ var et2_avatar = (function(){ "use strict"; return et2_image.extend(
 		// bind handler for activating actions on editable mask
 		eml.on({
 			mouseover:function(){eml.css('opacity','0.9');},
-			mouseout: function () {eml.css('opacity','0');}
+			mouseout: function (){eml.css('opacity','0');}
 		});
 	},
 
@@ -523,4 +531,25 @@ var et2_avatar = (function(){ "use strict"; return et2_image.extend(
 	}
 
 });}).call(this);
-et2_register_widget(et2_avatar, ["avatar"]);
+et2_register_widget(et2_avatar, ["avatar"]);
+
+jQuery.extend(et2_avatar,
+{
+	/**
+	 * Function runs after uplaod in avatar dialog is finished and it tries to
+	 * update image and cropper container.
+	 * 
+	 * @param {type} e
+	 * @returns {undefined}
+	 */
+	uploadAvatar_onFinish: function (e){
+		var file = e.data.resumable.files[0].file;
+		var reader = new FileReader();
+		reader.onload = function (e)
+		{
+			jQuery('#_cropper_image').attr('src', e.target.result);
+			jQuery('#_cropper_image').cropper('replace',e.target.result);
+		};
+		reader.readAsDataURL(file);
+	}
+});

api/templates/default/avatar_edit.xet

@@ -2,16 +2,15 @@
 <!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">
+	<template id="etemplate.avatar_edit" 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"/>
+					<file id='upload_photo' label="upload new photo" onFinishOne="et2_avatar.uploadAvatar_onFinish"/>
 				</hbox>
 			</hbox>
 		</vbox>

api/templates/default/etemplate2.css

@@ -14,7 +14,7 @@
 /*@import url("../../js/dhtmlxtree/codebase/dhtmlxtree.css");*/
 /*@import url("../../js/egw_action/test/skins/dhtmlxmenu_egw.css");*/
 /*@import url("../../js/etemplate/lib/jsdifflib/diffview.css");*/
-
+/*@import url("../../../vendor/bower-asset/cropper/dist/cropper.min.css");*/
 
 /**
  * Top level