From cc9dfd004330f496987aa410cf254df5bfa2b9ed Mon Sep 17 00:00:00 2001
From: Hadi Nategh <hn@stylite.de>
Date: Wed, 1 Oct 2014 14:19:36 +0000
Subject: [PATCH] Implement dropdown list style for file upload

---
 etemplate/js/et2_widget_file.js            | 51 ++++++++++++++++++++--
 etemplate/templates/default/etemplate2.css | 19 ++++++++
 2 files changed, 67 insertions(+), 3 deletions(-)

diff --git a/etemplate/js/et2_widget_file.js b/etemplate/js/et2_widget_file.js
index 0ea297aa36..b33884a2eb 100644
--- a/etemplate/js/et2_widget_file.js
+++ b/etemplate/js/et2_widget_file.js
@@ -78,7 +78,13 @@ var et2_file = et2_inputWidget.extend(
 			"type": "string",
 			"default": "Choose file...",
 			"description": "String caption to be displayed on file upload span"
-		}
+		},
+		progress_dropdownlist: {
+			"name": "List on files in progress like dropdown",
+			"type": "boolean",
+			"default": false,
+			"description": "Style list of files in uploading progress like dropdown list with a total upload progress indicator"
+		},
 	},
 
 	asyncOptions: {},
@@ -419,7 +425,13 @@ var et2_file = et2_inputWidget.extend(
 				.css('cursor', 'default');
 
 		event.data = this;
-
+		
+		//Add dropdown_progress
+		if (this.options.progress_dropdownlist)
+		{
+			this._build_progressDropDownList();
+		}
+		
 		// Callback
 		if(this.options.onStart) return et2_call(this.options.onStart, event, file_count);
 		return true;
@@ -457,8 +469,41 @@ var et2_file = et2_inputWidget.extend(
 			// Fire legacy change action when done
 			this.change(this.input);
 		}
+		
+		//Remove progress_dropDown_fileList class and unbind the click handler from body
+		if (this.options.progress_dropdownlist)
+		{
+			this.progress.removeClass("progress_dropDown_fileList");
+			jQuery(this.node).find('span').removeClass('totalProgress_loader');
+			jQuery('body').off('click');
+		}	
+	},
+	
+	/**
+	 * Build up dropdown progress with total count indicator
+	 * 
+	 * @todo Implement totalProgress bar instead of ajax-loader, in order to show how much percent of uploading is completed
+	 */
+	_build_progressDropDownList: function ()
+	{
+		this.progress.addClass("progress_dropDown_fileList");
+		
+		//Add uploading indicator and bind hover handler on it
+		jQuery(this.node).find('span')
+				.addClass('totalProgress_loader')
+				.hover(function(){
+					jQuery('.progress_dropDown_fileList').show();
+		});
+		
+		//Bind click handler to dismiss the dropdown while uploading
+		jQuery('body').on('click', function(event){
+			if (event.target.className != 'remove')
+			{
+				jQuery('.progress_dropDown_fileList').hide();
+			}	
+		});
+		
 	},
-
 	
 	/**
 	 * Creates the elements used for displaying the file, and it's upload status, and
diff --git a/etemplate/templates/default/etemplate2.css b/etemplate/templates/default/etemplate2.css
index fb7e2c4a50..a9b41c5b85 100644
--- a/etemplate/templates/default/etemplate2.css
+++ b/etemplate/templates/default/etemplate2.css
@@ -480,6 +480,25 @@ div.et2_file {
 	margin-left: 8px;
 	margin-top: 0;
 }
+.et2_file .progress_dropDown_fileList {
+	background: white;
+	position: absolute;
+	border: 1px solid gray;
+	border-top: 0;
+	margin-top: 6px !important;
+	margin-left: 0 !important;
+	border-bottom-left-radius: 5px;
+	border-bottom-right-radius: 5px;
+	max-height: 300px;
+	width: 181px !important;
+	z-index: 201 !important;
+	box-shadow: 6px 6px 9px gray;
+}
+.et2_file .totalProgress_loader {
+	background-repeat: no-repeat;
+	background-image: url('images/ajax-loader.gif');
+}
+
 .et2_file .progress {
   width: 300px;
   max-height: 6em;