rbrindley: branch rbrindley/vmenus_revamp r4440 - in /team/rbrindley/vmenus_r...

[SVN commits to the Asterisk-GUI project]

Author: rbrindley
Date: Fri Jan 16 13:29:15 2009
New Revision: 4440

URL: http://svn.digium.com/svn-view/asterisk-gui?view=rev&rev=4440
Log:

- actions in list now span the full length instead of just length of the word
- added input field to implement click&change on .name(s) in the vmenu list
	- added html of the field
	- added autocomplete CSS class
	- added autocomplete() and result() calls when adding a new action to the list
	- added dblclick delegators for all possible vmenu edits
	- implemented dblclick delegator for ".vmenu_item:not(.new) .name span"
- now using 'children()' instead of 'find()' in areas where optimal
- included js libraries: jquery.autocomplete and astman


Modified:
    team/rbrindley/vmenus_revamp/config/js/menus2.js
    team/rbrindley/vmenus_revamp/config/menus2.html

Modified: team/rbrindley/vmenus_revamp/config/js/menus2.js
URL: http://svn.digium.com/svn-view/asterisk-gui/team/rbrindley/vmenus_revamp/config/js/menus2.js?view=diff&rev=4440&r1=4439&r2=4440
==============================================================================
--- team/rbrindley/vmenus_revamp/config/js/menus2.js (original)
+++ team/rbrindley/vmenus_revamp/config/js/menus2.js Fri Jan 16 13:29:15 2009
@@ -35,9 +35,26 @@
 	var action = actions[action_id];
 
 	new_vmenu.children('.command').html(action.command);
-	new_vmenu.children('.name').html(action.name);
+	new_vmenu.find('.name > span').html(action.name);
+	new_vmenu.find('.name > input')
+		.attr('value', action.name)
+		.autocomplete(actions, {
+			formatItem: function(item) {
+				return item.name;
+			},
+			mustMatch: true,
+			selectFirst: true,
+			width: 150
+		})
+		.result( function (e) {
+			$(e.target).siblings().andSelf()
+				.toggle();
+			$(e.target).siblings('span')
+				.html($(e.target).attr('value'));
+		});
+	vmenu.append(new_vmenu);
+	new_vmenu.fadeIn('slow');
 	new_vmenu.removeClass('template');
-	vmenu.append(new_vmenu);
 
 	updateVmenu();
  }

Modified: team/rbrindley/vmenus_revamp/config/menus2.html
URL: http://svn.digium.com/svn-view/asterisk-gui/team/rbrindley/vmenus_revamp/config/menus2.html?view=diff&rev=4440&r1=4439&r2=4440
==============================================================================
--- team/rbrindley/vmenus_revamp/config/menus2.html (original)
+++ team/rbrindley/vmenus_revamp/config/menus2.html Fri Jan 16 13:29:15 2009
@@ -102,6 +102,7 @@
 }
 
 #actions_list a span {
+	display: inline-block;
 	width: 100%;
 }
 
@@ -201,6 +202,10 @@
 }
 
 .template {
+	display: none;
+}
+
+input.autocomplete {
 	display: none;
 }
 
@@ -240,7 +245,10 @@
 				<div class="vmenu_item template">
 					<span class="command"></span>
 					<span class="number"></span>
-					<span class="name"></span>
+					<span class="name">
+						<span></span>
+						<input class="autocomplete" type="text" />
+					</span>
 				</div>
 				<div class="vmenu_item new">
 					<span class="command" title="Click here to utilize the Custom action and write your own command.">&lt;click to edit&gt;</span>
@@ -255,11 +263,13 @@
 
 <!-- load Javascript -->
 <script type="text/javascript" src="js/jquery.js"></script>
+<script type="text/javascript" src="js/jquery.autocomplete.js"></script>
 <script type="text/javascript" src="js/jquery.delegate-1.1.js"></script>
 <script type="text/javascript" src="js/jquery.ui.core.js"></script>
 <script type="text/javascript" src="js/jquery.ui.tabs.js"></script>
 <script type="text/javascript" src="js/jquery.ui.draggable.js"></script>
 <script type="text/javascript" src="js/jquery.ui.sortable.js"></script>
+<script type="text/javascript" src="js/astman.js"></script>
 <script type="text/javascript" src="js/menus2.js"></script>
 <script type="text/javascript">
 	var actions = new Array(
@@ -383,6 +393,21 @@
 				window.clearTimeout(clickTimer);
 				addAction($(e.target).parents('.action').find('input.id').attr('value'));
 		});
+		
+		$('#vmenus_edit_container')
+			.delegate('dblclick','.vmenu_item:not(.new) .name span', function (e) {
+				$(e.target).parent()
+					.children().toggle().end()
+					.children('input')
+						.focus()
+						.select();
+			})
+			.delegate('dblclick','.vmenu_item:not(.new) .command', function (e) {
+			})
+			.delegate('click','.vmenu .new .name', function (e) {
+			})
+			.delegate('click','.vmenu .new .command', function (e) {
+		});
 
 		//generate the actions list
 		action_template = $('#actions_list > .template');
@@ -405,11 +430,35 @@
 				var action = actions[id];
 
 				var vmenu = vmenu_template.clone();
-				vmenu.find('.command').html(action.command);
-				vmenu.find('.name').html(action.name);
-				vmenu.removeClass('template');
-
-				$(ui.item).html(vmenu.html()).removeClass('action').removeClass('ui-draggable').addClass('vmenu_item');
+				vmenu.children('.command').html(action.command);
+				vmenu.find('.name > span').html(action.name);
+
+				$(ui.item).html(vmenu.html())
+					.removeClass('action')
+					.removeClass('ui-draggable')
+					.addClass('vmenu_item');
+				/* since we aren't appending, but copying vmenu
+				*  we have to place the eventhandlers after the
+				*  copy.                                        */
+				$(ui.item).find('.name > input')
+					.attr('value', action.name)
+					.autocomplete(actions, {
+						formatItem: function(item) {
+							return item.name;
+						},
+						mustMatch: true,
+						selectFirst: true,
+						width: 150
+					})
+					.result( function (e) {
+						$(e.target).siblings().andSelf()
+							.toggle();
+						$(e.target).siblings('span')
+							.html($(e.target).attr('value'));
+					});
+				$(ui.item)
+					.hide().fadeIn('slow')
+					.removeClass('template');
 
 				updateVmenu();
 			},