fix carousel editor panel
This commit is contained in:
parent
55e6284dd1
commit
bd0911ac97
4 changed files with 293 additions and 249 deletions
|
|
@ -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;
|
||||
};
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue