use selectable widget to multiple-select mid menu items to have actions

This commit is contained in:
jessica 2010-08-26 20:16:14 -07:00 committed by unknown
parent 7d18462d76
commit 9dbca71434
2 changed files with 47 additions and 33 deletions

View File

@ -1,6 +1,4 @@
$(document).ready(function() {
$(document).ready(function() {
$("#accordion_menu").accordion({
autoHeight: false,
collapsible: true,
@ -12,8 +10,29 @@ $(document).ready(function() {
ui.newHeader.find("#arrow_icon").removeClass("close").addClass("open");
}
});
$("#accordion_menu").show();
$("#midmenu_container").selectable({
selecting: function(event, ui) {
if(ui.selecting.id.indexOf("midmenuItem") != -1) {
var $t = $("#"+ui.selecting.id);
$t.find("#content").addClass("selected");
var id =$t.data("id");
selectedItemIds[id] = null;
var toRightPanelFn = $t.data("toRightPanelFn");
toRightPanelFn($t);
}
},
unselecting: function(event, ui) {
if(ui.unselecting.id.indexOf("midmenuItem") != -1) {
$("#"+ui.unselecting.id).find("#content").removeClass("selected");
var itemId =$("#"+ui.unselecting.id).data("id");
delete selectedItemIds[itemId];
}
}
});
var $rightPanel = $("#right_panel");
var $addLink = $("#add_link");
@ -24,9 +43,11 @@ $(document).ready(function() {
var $midmenuItemVm = $("#midmenu_item_vm");
var $actionListItem = $("#action_list_item");
var selectedItemIds = {};
$("#leftmenu_instance_group_header").bind("click", function(event) {
var $arrowIcon = $(this).find("#arrow_icon");
clickInstanceGroupHeader($arrowIcon);
clickInstanceGroupHeader($arrowIcon, selectedItemIds);
return false;
});

View File

@ -1,4 +1,4 @@
function clickInstanceGroupHeader($arrowIcon) {
function clickInstanceGroupHeader($arrowIcon, selectedItemIds) {
//***** VM Detail (begin) ******************************************************************************
var $vmPopup
var $rightPanelHeader;
@ -14,9 +14,7 @@ function clickInstanceGroupHeader($arrowIcon) {
var $actionListItem = $("#action_list_item");
var noGroupName = "(no group name)";
//var selectedItemType;
var selectedItemIds = {};
var actionMap = {
stopVirtualMachine: {
label: "Stop",
@ -50,6 +48,7 @@ function clickInstanceGroupHeader($arrowIcon) {
function setMidmenuItemVm(instance, $midmenuItemVm1) {
$midmenuItemVm1.data("jsonObj", instance);
$midmenuItemVm1.data("toRightPanelFn", vmMidmenuItemToRightPanel);
$midmenuItemVm1.attr("id", ("midmenuItemVm_"+instance.id));
$midmenuItemVm1.data("id", instance.id);
var vmName = getVmName(instance.name, instance.displayname);
@ -57,28 +56,8 @@ function clickInstanceGroupHeader($arrowIcon) {
$midmenuItemVm1.find("#ip_address").text(instance.ipaddress);
updateVirtualMachineStateInMidMenu(instance.state, $midmenuItemVm1);
$midmenuItemVm1.bind("click", function(event) {
var $t = $(this);
var id = $t.data("id");
$t.find("#content").addClass("selected");
if(!(id in selectedItemIds))
selectedItemIds[id] = null;
if($t.find("#info_icon").css("display") != "none") {
$rightPanelContent.find("#after_action_info").text($t.data("afterActionInfo"));
if($t.find("#info_icon").hasClass("error"))
$rightPanelContent.find("#after_action_info_container").addClass("errorbox");
else
$rightPanelContent.find("#after_action_info_container").removeClass("errorbox");
$rightPanelContent.find("#after_action_info_container").show();
}
else {
$rightPanelContent.find("#after_action_info").text("");
$rightPanelContent.find("#after_action_info_container").hide();
}
var jsonObj = $t.data("jsonObj");
vmJsonToRightPanel(jsonObj);
var $t = $(this);
vmMidmenuItemToRightPanel($t);
return false;
});
}
@ -99,7 +78,21 @@ function clickInstanceGroupHeader($arrowIcon) {
$rightPanelContent.find("#iso").hide();
}
function vmJsonToRightPanel(jsonObj) {
function vmMidmenuItemToRightPanel($t) {
if($t.find("#info_icon").css("display") != "none") {
$rightPanelContent.find("#after_action_info").text($t.data("afterActionInfo"));
if($t.find("#info_icon").hasClass("error"))
$rightPanelContent.find("#after_action_info_container").addClass("errorbox");
else
$rightPanelContent.find("#after_action_info_container").removeClass("errorbox");
$rightPanelContent.find("#after_action_info_container").show();
}
else {
$rightPanelContent.find("#after_action_info").text("");
$rightPanelContent.find("#after_action_info_container").hide();
}
var jsonObj = $t.data("jsonObj");
var vmName = getVmName(jsonObj.name, jsonObj.displayname);
$rightPanelHeader.find("#vm_name").text(vmName);
updateVirtualMachineStateInRightPanel(jsonObj.state);
@ -199,7 +192,7 @@ function clickInstanceGroupHeader($arrowIcon) {
var label = $t.data("label");
var isAsyncJob = $t.data("isAsyncJob");
var asyncJobResponse = $t.data("asyncJobResponse");
var jobIdMap = {};
var jobIdMap = {};
for(var id in selectedItemIds) {
var midmenuItem = $("#midmenuItemVm_"+id);
midmenuItem.find("#content").removeClass("selected").addClass("adding");