From 84da56ede8fbc253cbc0dc2bea639329cbbb8a81 Mon Sep 17 00:00:00 2001
From: Hadi Nategh <hnategh@gmail.com>
Date: Wed, 7 Sep 2016 17:27:47 +0200
Subject: [PATCH] WIP avatar widget: - Implement editable option to be able to
 do some action on hover over

---
 api/js/etemplate/et2_widget_image.js | 62 ++++++++++++++++++++++++++++
 api/templates/default/etemplate2.css | 42 +++++++++++++++++++
 2 files changed, 104 insertions(+)

diff --git a/api/js/etemplate/et2_widget_image.js b/api/js/etemplate/et2_widget_image.js
index 874625117f..a8e523b5b6 100644
--- a/api/js/etemplate/et2_widget_image.js
+++ b/api/js/etemplate/et2_widget_image.js
@@ -322,6 +322,12 @@ var et2_avatar = (function(){ "use strict"; return et2_image.extend(
 			type: "string",
 			default: "circle",
 			description: "Define the shape of frame that avatar will be shown inside it. it can get {circle,rectangle} values which default value is cicle."
+		},
+		editable: {
+			name: "Edit avatar",
+			type: "boolean",
+			default: false,
+			description: "Make avatar widget editable to be able to crop profile picture or upload a new photo"
 		}
 	},
 
@@ -412,6 +418,62 @@ var et2_avatar = (function(){ "use strict"; return et2_image.extend(
 			this.image.addClass('et2_clickable');
 			this.set_href(_values["href"]);
 		}
+	},
+
+	/**
+	 * Build Editable Mask Layer (EML) in order to show edit/delete actions
+	 * on top of profile picture.
+	 */
+	_buildEditableLayer: function ()
+	{
+		var self = this;
+		// editable mask layer (eml)
+		var eml = jQuery(document.createElement('div'))
+				.addClass('eml')
+				.insertAfter(this.image);
+
+		// edit button
+		var edit = jQuery(document.createElement('div'))
+				.addClass('emlEdit')
+				.click(function(){
+					// Todo
+				})
+				.appendTo(eml);
+
+		// delete button
+		var del = jQuery(document.createElement('div'))
+				.addClass('emlDelete')
+				.click(function(){
+					et2_dialog.show_dialog(function(_btn){
+						if (_btn == et2_dialog.YES_BUTTON)
+						{
+							//TODO: send delete message to server
+						}
+					}, egw.lang('Delete this photo?'), 'Delete', null, et2_dialog.BUTTONS_YES_NO);
+				})
+				.appendTo(eml);
+		// invisible the mask
+		eml.css('opacity','0');
+
+		eml.parent().css('position', "relative");
+
+		// bind handler for activating actions on editable mask
+		eml.on({
+			mouseover:function(){eml.css('opacity','0.9');},
+			mouseout: function () {eml.css('opacity','0');}
+		});
+	},
+
+	/**
+	 * We need to build the Editable Mask Layer after widget gets loaded
+	 */
+	doLoadingFinished: function ()
+	{
+		this._super.apply(this,arguments);
+		if (this.options.editable)
+		{
+			this._buildEditableLayer();
+		}
 	}
 
 });}).call(this);
diff --git a/api/templates/default/etemplate2.css b/api/templates/default/etemplate2.css
index 3fe078fa5f..9b2cd28831 100644
--- a/api/templates/default/etemplate2.css
+++ b/api/templates/default/etemplate2.css
@@ -2751,4 +2751,46 @@ tr.dialogHeader2 td {padding-top:15px;}
     text-align: center;
     padding-top: 2px;
 	box-shadow: 0px 0px 10px 2px #888888;
+}
+
+.et2_avatar {
+
+}
+
+div.eml {
+	position:absolute;
+	height: 100%;
+	width: 100%;
+	display: block;
+	background: white;
+	opacity:0.9;
+	top:0;
+	left:0;
+}
+
+div.eml div.emlEdit {
+	background-image: url(../../../pixelegg/images/edit.png);
+    background-position: center;
+    width: 100%;
+    height: 50%;
+    display: inline-block;
+    background-size: 30%;
+    background-repeat: no-repeat;
+	opacity:0.5;
+}
+
+div.eml div.emlDelete {
+	background-image: url(../../../pixelegg/images/delete.png);
+    background-position: center;
+    width: 100%;
+    height: 50%;
+    display: inline-block;
+    background-size: 30%;
+    background-repeat: no-repeat;
+	opacity:0.5;
+}
+
+div.eml div.emlDelete:hover, div.eml div.emlEdit:hover  {
+	opacity:1;
+	filter:contrast(9);
 }
\ No newline at end of file