fix carousel editor panel

This commit is contained in:
Doug Bell 2010-09-02 09:21:53 -05:00
parent 55e6284dd1
commit bd0911ac97
4 changed files with 293 additions and 249 deletions

View file

@ -1,77 +1,107 @@
function addItem () {
var items_td = document.getElementById('items_td');
var textAreas = items_td.getElementsByClassName('carouselItemText');
var textAreaCount = textAreas.length;
var newItemNumber = textAreaCount + 1;
var Dom = YAHOO.util.Dom;
var myConfig = {
height: '80px',
width: '500px',
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;
newItem_textarea.className = 'carouselItemText';
var newItem_id_span = document.createElement('span');
newItem_id_span.innerHTML = 'ID: <input type="text" id="newItem_id" name="itemId" value="">';
newItem_div.appendChild(newItem_id_span);
var newItem_id = document.getElementById('newItem_id');
newItem_id.type = 'text';
newItem_id.id = 'itemId'+newItemNumber;
newItem_id.name = 'itemId_'+newItemNumber;
newItem_id.value = 'carousel_item_'+newItemNumber;
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');
newItem_div.appendChild(newItem_break);
var myEditor = new YAHOO.widget.SimpleEditor('item'+newItemNumber, myConfig);
myEditor.render();
if ( typeof WebGUI == 'undefined' ) {
WebGUI = {};
}
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();
if ( typeof WebGUI.Carousel == 'undefined' ) {
WebGUI.Carousel = {};
}
WebGUI.Carousel.Editor
= function ( id, mceConfig, items, i18n ) {
this.id = id;
this.mceConfig = mceConfig;
this.items = items;
this.i18n = i18n;
// Initialize a tabview
this.tabView = new YAHOO.widget.TabView( this.id, {
orientation : "left"
} );
// Add a tab for each item
for ( var i = 0; i < this.items.length; i++ ) {
this.addTab( this.items[i] );
}
// We're new!
if ( this.items.length == 0 ) {
this.addTab( );
}
// Find the form and eventize it!
var form = document.getElementById( this.id );
while ( form.tagName != "FORM" ) {
form = form.parentNode;
}
YAHOO.util.Event.on( form, 'submit', this.handleSubmit, this, true );
};
WebGUI.Carousel.Editor.prototype.addTab
= function ( data ) {
var num = this.tabView.get('tabs').length + 1;
if ( !data ) {
data = { text : "", itemId : 'carousel_item_' + num };
}
var tab = new YAHOO.widget.Tab( {
label : num,
content : ''
} );
this.tabView.addTab( tab );
this.tabView.selectTab( num - 1 );
var el = tab.get('contentEl');
var delBtn = document.createElement( 'input' );
delBtn.type = "button";
delBtn.style.cssFloat = "right";
delBtn.value = this.i18n['delete'];
YAHOO.util.Event.on( delBtn, "click", function(){
this.tabView.removeTab( tab );
}, this, true );
el.appendChild( delBtn );
var input = document.createElement( 'input' );
input.type = "text";
input.value = data.itemId;
el.appendChild( document.createTextNode( "ID: " ) );
el.appendChild( input );
var ta = document.createElement( 'textarea' );
ta.className = "carouselInput";
ta.name = "carouselInput" + num;
ta.id = ta.name;
ta.style.height = "300px";
ta.appendChild( document.createTextNode( data.text ) );
el.appendChild( ta );
var conf = this.mceConfig;
conf.mode = "exact";
conf.elements = ta.name;
tinyMCE.init( conf );
};
WebGUI.Carousel.Editor.prototype.handleSubmit
= function ( ) {
var tabs = this.tabView.get('tabs');
var items = [];
for ( var i = 0; i < tabs.length; i++ ) {
var item = { };
var tab = tabs[i];
var elem = tab.get('contentEl');
var id = elem.getElementsByTagName( 'input' )[1];
item.itemId = id.value;
var text = elem.getElementsByTagName( 'textarea' )[0];
item.text = text.value;
item.sequenceNumber = i;
items.push( item );
}
var json = YAHOO.lang.JSON.stringify( items );
document.getElementById( 'items_formId' ).value = json;
};