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

[SVN commits to the Asterisk-GUI project]

Author: rbrindley
Date: Tue Jan 13 16:31:37 2009
New Revision: 4423

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

- created a hidden input field to carry each action's array id
- expanded addAction to properly display a vmenu_item's html
- created and implemented updateVmenu to maintain even/odd styling, item numbering and relocate the 'new' vmenu_item
- created the clone class for draggable/sortable placeholders
- cleaned the vmenu_item template
- expanded the vmenu sortable call to include the proper items, placeholder, receive and stop arguments
- implemented receive and stop callback functions to handle changes to the sortable vmenu


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=4423&r1=4422&r2=4423
==============================================================================
--- team/rbrindley/vmenus_revamp/config/js/menus2.js (original)
+++ team/rbrindley/vmenus_revamp/config/js/menus2.js Tue Jan 13 16:31:37 2009
@@ -19,19 +19,42 @@
  *
  */
 
- function loadAction(action) {
+ function loadAction(action, i) {
 	var html = action_template.clone();
 
 	html.find('span.name').html(action.name);
 	html.children('.info').html(action.desc);
+	html.children('input.id').attr('value',i);
 	html.removeClass('template');
 	html.appendTo('#actions_list');
  }
 
- function addAction(action) {
+ function addAction(action_id) {
 	var vmenu = $(selected).find('.vmenu');
-	var new_tmp = vmenu.children(':last').remove();
+	var new_vmenu = vmenu_template.clone();
+	var action = actions[action_id];
 
-	vmenu.append(action);
-	vmenu.append(new_tmp);
+	new_vmenu.find('.command').html(action.command);
+	new_vmenu.find('.name').html(action.name);
+	new_vmenu.removeClass('template');
+	vmenu.append(new_vmenu);
+
+	updateVmenu();
  }
+
+ function updateVmenu() {
+	var vmenu = $(selected).find('.vmenu');
+	vmenu.find('.new').remove().appendTo(vmenu);
+	var i = 1;
+	vmenu.find('.vmenu_item:odd').each( function() {
+		$(this).removeClass('even').addClass('odd');
+		$(this).find('.number').html(i+'. ');
+		i=i+2;
+	});
+	var i = 0;
+	vmenu.find('.vmenu_item:even').each( function() {
+		$(this).removeClass('odd').addClass('even');
+		$(this).find('.number').html(i+'. ');
+		i=i+2;
+	});
+ }

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=4423&r1=4422&r2=4423
==============================================================================
--- team/rbrindley/vmenus_revamp/config/menus2.html (original)
+++ team/rbrindley/vmenus_revamp/config/menus2.html Tue Jan 13 16:31:37 2009
@@ -204,6 +204,10 @@
 	display: none;
 }
 
+.clone {
+	border: 1px dotted #ef8700;
+}
+
 </style>
 <!-- end load CSS -->
 </head>
@@ -216,6 +220,7 @@
 		<div class="action template">
 			<a href="#"><span class="name" title="Click to view more information. Double-click or drag to add this action."></span></a>
 			<div class="info"></div>
+			<input type="hidden" class="id" value="" />
 		</div>
 	</div>
 </div>
@@ -233,14 +238,14 @@
 			<span class="save_cancel"><span class="save">Save</span><span class="cancel">Cancel</span></span>
 			<span class="extension">Extension: <input type="text" value="6000" /></span>
 			<div class="vmenu">
-				<div class="vmenu_item odd">
-					<span class="command">Answer()</span>
-					<span class="number">1. </span>
-					<span class="name">Answer</span>
+				<div class="vmenu_item template">
+					<span class="command"></span>
+					<span class="number"></span>
+					<span class="name"></span>
 				</div>
-				<div class="vmenu_item even new">
+				<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>
-					<span class="number">2. </span>
+					<span class="number">&nbsp;</span>
 					<span class="name" title="Click here to insert an action.">&lt;new&gt;</span>
 				</div>
 			</div>
@@ -373,13 +378,13 @@
 			})
 			.delegate('dblclick','.action', function (e) {
 				window.clearTimeout(clickTimer);
-				addAction($(e.target).parents('.action').clone());
+				addAction($(e.target).parents('.action').find('input.id').attr('value'));
 		});
 
 		//generate the actions list
 		action_template = $('#actions_list > .template');
 		for (var i=0; i<actions.length; i++) {
-			loadAction(actions[i]);
+			loadAction(actions[i], i);
 		}
 		$('#actions_list div.action:odd').removeClass('even').addClass('odd');
 		$('#actions_list div.action:even').removeClass('odd').addClass('even');
@@ -389,11 +394,32 @@
 			connectToSortable: '.vmenu',
 			helper: 'clone'
 		});
-		$('.vmenu').sortable();
+		$('.vmenu').sortable({
+			items: '> :not(.new)',
+			placeholder: 'clone',
+			receive: function (e, ui) {
+				var id = $(ui.item).find('input.id').attr('value');
+				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');
+
+				updateVmenu();
+			},
+			stop: updateVmenu
+		});
+
+		//load vmenu_template
+		vmenu_template = $('.vmenu .template');
 	});
 
 	/* many variables only need to be pulled from html once. */
 	var action_template;	//html template for actions
+	var vmenu_template;	//html template for vmenus
 	var clickTimer;		//single click timer
 	var clickObj;		//single click object
 	var selected;		//the selected tab id