oqapi/webgui
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

adding a 'delete item' button on Carousel edit screen

Browse source
This commit is contained in:
Yung Han Khoe 2009-05-14 13:51:56 +00:00
parent 3f009f8bc3
commit dfe87bf181
2 changed files with 69 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

33
lib/WebGUI/Asset/Wobject/Carousel.pm
View file

@ -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";

53
www/extras/wobject/Carousel/carousel.js
View file

@ -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();
}
//});
}
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();
}