From 6b593b829b89522d6042a2028a11761b10e52861 Mon Sep 17 00:00:00 2001
From: Hadi Nategh <hnategh@gmail.com>
Date: Mon, 11 Jul 2016 17:22:26 +0200
Subject: [PATCH] Implement new representation for et2_selectbox widget of
 multi tags with limited single row

---
 api/js/etemplate/et2_widget_selectbox.js | 38 ++++++++++++++++++++++++
 api/templates/default/etemplate2.css     | 30 ++++++++++++++++++-
 2 files changed, 67 insertions(+), 1 deletion(-)

diff --git a/api/js/etemplate/et2_widget_selectbox.js b/api/js/etemplate/et2_widget_selectbox.js
index e62487aa0d..a520c42166 100644
--- a/api/js/etemplate/et2_widget_selectbox.js
+++ b/api/js/etemplate/et2_widget_selectbox.js
@@ -708,6 +708,44 @@ var et2_selectbox = (function(){ "use strict"; return et2_inputWidget.extend(
 				width: _width || size.w + "px"
 			})
 			.change(this.onchange);
+
+			// multi selection with limited show line of single row
+			if (this.options.multiple && this.options.rows == 1 && this.options.height)
+			{
+				var $chosen_div = jQuery(this.input.siblings());
+				var self = this;
+
+				/**
+				 * A function to set counter for multi tags limited for single row
+				 * @returns {undefined}
+				 */
+				var _update_item_counter = function ()
+				{
+					$chosen_div.find('ul.chzn-choices').attr('data-after',self.getValue().length);
+				};
+
+				// Update the item counter
+				_update_item_counter();
+				// Initialize the single row class
+				$chosen_div.toggleClass('et2_selectbox_single_row', true);
+
+				// bind hover actions
+				$chosen_div
+					.off()
+					.hover(
+						//mouseIn
+						function(e){
+							jQuery(this).toggleClass('et2_selectbox_multi_row', true);
+							jQuery(this).toggleClass('et2_selectbox_single_row', false);
+						},
+						//mouseOut
+						function(e){
+							jQuery(this).toggleClass('et2_selectbox_multi_row', false);
+							jQuery(this).toggleClass('et2_selectbox_single_row', true);
+							_update_item_counter();
+						}
+				);
+			}
 		}
 	},
 
diff --git a/api/templates/default/etemplate2.css b/api/templates/default/etemplate2.css
index 816ad4b4f4..cb2ec841a7 100644
--- a/api/templates/default/etemplate2.css
+++ b/api/templates/default/etemplate2.css
@@ -2727,4 +2727,32 @@ tr.dialogHeader2 td {padding-top:15px;}
 	min-height: 20px;
 	min-width: 160px;
 }
-.nextmatch_header_row .et2_selectbox.select-cat.chzn-container .chzn-results {max-height: 340px;}
\ No newline at end of file
+.nextmatch_header_row .et2_selectbox.select-cat.chzn-container .chzn-results {max-height: 340px;}
+
+/* Implementation for et2_selectbox mulit tags with single row*/
+.et2_selectbox_multi_row ul.chzn-choices {
+	height: auto;
+}
+.nextmatch_header_row .et2_selectbox.chzn-container-multi { margin-top: 1px;}
+.et2_selectbox_single_row ul.chzn-choices {
+	height: 24px !important;
+}
+.et2_selectbox_single_row ul.chzn-choices:after {
+    content: attr(data-after);
+    width: 30px;
+    background: #fafafa;
+    z-index: 10000;
+    position: absolute;
+    right: 0;
+    height: 100%;
+    background-position: center;
+    background-size: 6px;
+    background-repeat: no-repeat;
+    border-left: dotted 1px silver;
+    font-size: 10pt;
+    font-weight: bold;
+    color: #888888;
+    text-align: center;
+    padding-top: 2px;
+	box-shadow: 0px 0px 10px 2px #888888;
+}
\ No newline at end of file