From dfe87bf1818770d454d899a7b938937acd0d2a49 Mon Sep 17 00:00:00 2001
From: Yung Han Khoe <yung@webgui-svn>
Date: Thu, 14 May 2009 13:51:56 +0000
Subject: [PATCH] adding a 'delete item' button on Carousel edit screen

---
 lib/WebGUI/Asset/Wobject/Carousel.pm    | 33 ++++++++++-----
 www/extras/wobject/Carousel/carousel.js | 53 +++++++++++++++++++++----
 2 files changed, 69 insertions(+), 17 deletions(-)

diff --git a/lib/WebGUI/Asset/Wobject/Carousel.pm b/lib/WebGUI/Asset/Wobject/Carousel.pm
index 955f01aec..01a5300d5 100644
--- a/lib/WebGUI/Asset/Wobject/Carousel.pm
+++ b/lib/WebGUI/Asset/Wobject/Carousel.pm
@@ -107,7 +107,8 @@ sub getEditForm {
         .'    <td class="formDescription"  valign="top" style="width: 180px;"><label for="item1">'
               .$i18n->get("items label").'</label><div class="wg-hoverhelp">'.$i18n->get("items description").'</div></td>'
         .'    <td id="items_td" valign="top" class="tableData">'
-        .'    <input type="button" value="Add item" onClick="javascript:addItem()"></button><br /><br />';
+        .'    <input type="button" value="Add item" onClick="javascript:addItem()"></input><br />'
+        ."    <br />\n";
 
     $tabform->getTab("properties")->raw($tableRowStart);
 
@@ -115,25 +116,37 @@ sub getEditForm {
         my @items = @{JSON->new->decode($self->getValue('items'))->{items}};
 
         foreach my $item (@items){
-            my $itemHTML = $i18n->get("id label").'<div class="wg-hoverhelp">'.$i18n->get("id description").'</div>: '
-                .'<input type="text" id="itemId'.$item->{sequenceNumber}.'" '
-                .'name="itemId_'.$item->{sequenceNumber}.'" value="'.$item->{itemId}.'">'
-                .'<textarea id="item'.$item->{sequenceNumber}.'" name="item_'.$item->{sequenceNumber}.'" '
+            my $itemNr = $item->{sequenceNumber};
+            my $itemHTML = "<div id='item_div".$itemNr."' name='item_div_".$itemNr."'>\n"
+                ."<span>\n"
+                .$i18n->get("id label").'<div class="wg-hoverhelp">'.$i18n->get("id description").'</div>: '
+                .'<input type="text" id="itemId'.$itemNr.'" '
+                .'name="itemId_'.$itemNr.'" value="'.$item->{itemId}.'">'
+                ."</span>\n"
+                ."<input type='button' id='deleteItem".$itemNr."' value='Delete this item'
+onClick='javascript:deleteItem(this.id)'></input>\n"
+                .'<textarea id="item'.$itemNr.'" name="item_'.$itemNr.'" '
                 .'class="carouselItemText" rows="#" cols="#" '
                 .'style="width: 500px; height: 80px;">'.$item->{text}."</textarea><br />\n";
             
             $itemHTML .= 
                 " <script type='text/javascript'>\n"
-                .'var myEditor'.$item->{sequenceNumber}.' '
-                .'= new YAHOO.widget.SimpleEditor("item'.$item->{sequenceNumber}.'", '
+                .'var myEditor'.$itemNr.' '
+                .'= new YAHOO.widget.SimpleEditor("item'.$itemNr.'", '
                 ."{height: '80px', width: '500px', handleSubmit: true});\n"
-                .'myEditor'.$item->{sequenceNumber}.".render()\n"
-                ."</script>\n";
+                .'myEditor'.$itemNr.".render()\n"
+                ."</script>\n"
+                ."</div>\n";
             $tabform->getTab("properties")->raw($itemHTML);
         }
     }
     else{
-        my $itemHTML = 'ID: <input type="text" id="itemId1" name="itemId_1" value="carousel_item_1">'
+        my $itemHTML = "<div id='item_div1' name='item_div_1'>\n"
+                ."<span>\n"
+                .$i18n->get("id label").'<div class="wg-hoverhelp">'.$i18n->get("id description").'</div>: '
+                .' <input type="text" id="itemId1" name="itemId_1" value="carousel_item_1">'
+                ."</span>\n"
+                ."<input type='button' id='deleteItem1' value='Delete this item' onClick='javascript:deleteItem(this.id)'></input>\n"
                 .'<textarea id="item1" name="item_1" class="carouselItemText" rows="#" cols="#" '
                 ."style='width: 500px; height: 80px;'></textarea><br />\n";
             
diff --git a/www/extras/wobject/Carousel/carousel.js b/www/extras/wobject/Carousel/carousel.js
index 7ccbd311a..168e4b412 100644
--- a/www/extras/wobject/Carousel/carousel.js
+++ b/www/extras/wobject/Carousel/carousel.js
@@ -1,5 +1,4 @@
-//YAHOO.util.Event.addListener(window, "load", function() {
-    function addItem () {
+function addItem () {
     var items_td = document.getElementById('items_td');
     var textAreas = items_td.getElementsByClassName('carouselItemText');
     var textAreaCount = textAreas.length;
@@ -12,6 +11,11 @@
 	handleSubmit: true
     };
 
+    var newItem_div = document.createElement('div');
+    newItem_div.id = 'item_div'+newItemNumber;
+    newItem_div.name = 'item_div_'+newItemNumber;
+    items_td.appendChild(newItem_div);
+
     var newItem_textarea = document.createElement('textarea');
     newItem_textarea.id = 'item'+newItemNumber;
     newItem_textarea.name = 'item_'+newItemNumber;
@@ -19,7 +23,7 @@
 
     var newItem_id_span = document.createElement('span');
     newItem_id_span.innerHTML = 'ID: <input type="text" id="newItem_id" name="itemId" value="">';
-    items_td.appendChild(newItem_id_span);
+    newItem_div.appendChild(newItem_id_span);
 
     var newItem_id = document.getElementById('newItem_id');
     newItem_id.type = 'text';
@@ -27,12 +31,47 @@
     newItem_id.name = 'itemId_'+newItemNumber;
     newItem_id.value = 'carousel_item_'+newItemNumber;
 
-    items_td.appendChild(newItem_textarea);
+    var newItem_deleteButton = document.createElement('input');
+    newItem_deleteButton.type = 'button';	
+    newItem_deleteButton.id = 'deleteItem'+newItemNumber;
+    newItem_deleteButton.value = 'Delete this item';
+    newItem_deleteButton.onclick = function(){deleteItem(this.id)};
+    newItem_div.appendChild(newItem_deleteButton);
+
+    newItem_div.appendChild(newItem_textarea);
 
     var newItem_break = document.createElement('br');
-    items_td.appendChild(newItem_break);
+    newItem_div.appendChild(newItem_break);
 
     var myEditor = new YAHOO.widget.SimpleEditor('item'+newItemNumber, myConfig);
     myEditor.render();
-    }
-//});
\ No newline at end of file
+}
+function resetItemIds() {
+    var items_td = document.getElementById('items_td');
+    var textAreas = items_td.getElementsByClassName('carouselItemText');
+    for (i=0;i<textAreas.length;i=i+1) {
+	var oldId = textAreas[i].id.substring(4);
+	var newId = i + 1;
+	if(newId != oldId){
+		var newTextareaId = 'item' + newId;
+		var newTextareaName = 'item_' + newId;
+		document.getElementById('item'+oldId).name = newTextareaName;
+		document.getElementById('item'+oldId).id = newTextareaId;
+
+		var newIdInputId = 'itemId' + newId;
+		var newIdInputName = 'itemId_' + newId;
+		document.getElementById('itemId'+oldId).name = newIdInputName;
+		document.getElementById('itemId'+oldId).id = newIdInputId;
+
+		var newDivId = 'item_div' + newId;
+		document.getElementById('item_div'+oldId).id = newDivId;
+		textAreas[i].id = newId;
+	}
+    }	
+}
+function deleteItem(deleteId){
+    var itemDiv = document.getElementById(deleteId).parentNode;
+    itemDiv.parentNode.removeChild(itemDiv);
+    resetItemIds();	
+}
+