Pastie now auto-senses if line-wrap is a bad or good idea. Feedback?
## mark a section (Learn more)
var menuGroupName = '', listofusers = [], listofusers2 = []; var myBuildUrl = function(datatable,record) { var url = ''; var cols = datatable.getColumnSet().keys; for (var i = 0; i < cols.length; i++) { if (cols[i].isPrimaryKey) { url += '&' + cols[i].key + '=' + escape(record.getData(cols[i].key)); } } return url; }; var myLangEditor = new YAHOO.widget.DropdownCellEditor(); var requestLangs = YAHOO.util.Connect.asyncRequest('POST','<?php echo ROOT_URL.DS; ?>system/lib/menus/datatable.php', { success: function(o){ var r = YAHOO.lang.JSON.parse(o.responseText); myLangEditor.dropdownOptions = r.data; myLangEditor.asyncSubmitter = function (callback, newValue) { var record = this.getRecord(), column = this.getColumn(), oldValue = this.value, datatable = this.getDataTable(); YAHOO.util.Connect.asyncRequest( 'POST', '<?php echo ROOT_URL.DS; ?>system/lib/menus/datatable.php', { success:function(o) { var r = YAHOO.lang.JSON.parse(o.responseText); if (r.replyCode == 201) { callback(true, r.data); } else { alert(r.replyText); callback(); } }, failure:function(o) { alert(o.statusText); callback(); }, scope:this }, 'action=groupCellEdit&column=' + column.key + '&newValue=' + escape(newValue) + '&oldValue=' + escape(oldValue) + myBuildUrl(datatable,record) ); }; myLangEditor.render(); } }, 'action=getLangs' ); var GroupUsergroupsEditor = new YAHOO.widget.DropdownCellEditor(); var requestGroupUsergroups = YAHOO.util.Connect.asyncRequest('POST','<?php echo ROOT_URL.DS; ?>system/lib/menus/datatable.php', { success: function(o){ var r = YAHOO.lang.JSON.parse(o.responseText); listofusers = r.data; listofusers.unshift({label:'Everybody',value:0}); GroupUsergroupsEditor.dropdownOptions = listofusers; GroupUsergroupsEditor.asyncSubmitter = function (callback, newValue) { var record = this.getRecord(), column = this.getColumn(), oldValue = this.value, datatable = this.getDataTable(); YAHOO.util.Connect.asyncRequest( 'POST', '<?php echo ROOT_URL.DS; ?>system/lib/menus/datatable.php', { success:function(o) { var r = YAHOO.lang.JSON.parse(o.responseText); if (r.replyCode == 201) { callback(true, r.data); } else { alert(r.replyText); callback(); } }, failure:function(o) { alert(o.statusText); callback(); }, scope:this }, 'action=groupCellEdit&column=' + column.key + '&newValue=' + escape(newValue) + '&oldValue=' + escape(oldValue) + myBuildUrl(datatable,record) ); }; GroupUsergroupsEditor.render(); } }, 'action=getUsergroups' ); var MenuUsergroupsEditor = new YAHOO.widget.DropdownCellEditor(); var requestMenuUsergroups = YAHOO.util.Connect.asyncRequest('POST','<?php echo ROOT_URL.DS; ?>system/lib/menus/datatable.php', { success: function(o){ var r = YAHOO.lang.JSON.parse(o.responseText); listofusers2 = r.data; listofusers2.unshift({label:'Everybody',value:0}); MenuUsergroupsEditor.dropdownOptions = listofusers2; MenuUsergroupsEditor.asyncSubmitter = function (callback, newValue) { var record = this.getRecord(), column = this.getColumn(), oldValue = this.value, datatable = this.getDataTable(); YAHOO.util.Connect.asyncRequest( 'POST', '<?php echo ROOT_URL.DS; ?>system/lib/menus/datatable.php', { success:function(o) { var r = YAHOO.lang.JSON.parse(o.responseText); if (r.replyCode == 201) { callback(true, r.data); } else { alert(r.replyText); callback(); } }, failure:function(o) { alert(o.statusText); callback(); }, scope:this }, 'action=menuCellEdit&column=' + column.key + '&newValue=' + escape(newValue) + '&oldValue=' + escape(oldValue) + myBuildUrl(datatable,record) ); }; MenuUsergroupsEditor.render(); } }, 'action=getUsergroups' ); ///////////////////////////////////////////////////////////////////////////////////////////////////// YAHOO.namespace("example.container"); var formatPublished = function(elCell, oRecord, col , data){ var cellContent; cellContent = '<a href="javascript:void(0);" style="color:#009900; text-decoration:underline;">Yes</a>'; if (oRecord.getData('published') < 1) { cellContent = '<a href="javascript:void(0);" style="color:#990000; text-decoration:underline;">No</a>'; } elCell.innerHTML = cellContent; }; var formatOrientation = function(elCell, oRecord, col, data){ var cellContent; if (oRecord.getData('orientation') =='V') { cellContent = '<a href="javascript:void(0);" style="color:#06C; text-decoration:underline;">Vertical</a>'; } if (oRecord.getData('orientation') =='H') { cellContent = '<a href="javascript:void(0);" style="color:#06C; text-decoration:underline;">Horizontal</a>'; } elCell.innerHTML = cellContent; }; function changeMenuRank(pos,id,direction){ //alert('pos: ' + pos +' id:' + id + ' up: '+direction); YAHOO.util.Connect.asyncRequest( 'POST', '<?php echo ROOT_URL.DS; ?>system/lib/menus/datatable.php', { success:function(o) { var r = YAHOO.lang.JSON.parse(o.responseText); var data = r.data; if (r.replyCode == 201) { //alert('CALLBACK\nsource: datatable.php\ngroupid: ' +data[0] + '\nid:' + data[1] + '\ncurrank: ' + data[2] + '\nnewrank: ' + data[3] ); loadMenuTable(data[0]); var handlehide = function(){ YAHOO.example.container.simpledialog1.hide(); }; YAHOO.example.container.simpledialog1 = new YAHOO.widget.SimpleDialog("simpledialog1", { width: "300px", fixedcenter: true, visible: false, draggable: false, close: true, text: "Table reordered", icon: YAHOO.widget.SimpleDialog.ICON_INFO, constraintoviewport: true, buttons: [ { text:"OK", handler:handlehide } ] } ); YAHOO.example.container.simpledialog1.setHeader("Table reordering"); YAHOO.example.container.simpledialog1.render("container"); YAHOO.example.container.simpledialog1.show(); //alert(r.data); } else { alert(r.replyText); } }, failure:function(o) { alert(o.statusText); }, scope:this }, 'action=menuRank&newpos=' + pos + '&id=' + id + '&goingup=' + direction ); } ////////////////////////////////////////////////////////////////////////////// // // BUTTONS // ////////////////////////////////////////////////////////////////////////////// function loadMenuTable(groupid){ //YAHOO.util.Event.addListener(window, "load", function() { YAHOO.example.ReorderRows = function() { var groupname=''; var Dom = YAHOO.util.Dom, Event = YAHOO.util.Event, DDM = YAHOO.util.DragDropMgr, myColumnDefs = [ {key:'id', isPrimaryKey:true, hidden:true}, {key:'delete', label:'', className:'delete-button'}, {key:"rank", className:'centered', label:''}, { key:'groupid', className:'centered',formatter: function (cell, rec, col, data) { cell.innerHTML = data; } }, {key:"caption", className:'fat', label:"Caption", editor: new YAHOO.widget.TextboxCellEditor()}, {key:'usergroupid', label:'Usergroup', className:'centered',editor:MenuUsergroupsEditor}, {key:"link", className:'clink', label:"Link"}, {key:"alt", className:'calt', label:"Alt", editor: new YAHOO.widget.TextboxCellEditor()}, { key:"published", className:'centeredpub', formatter:formatPublished, label:"Published", editor: new YAHOO.widget.RadioCellEditor({ radioOptions:[{label:"Yes", value:1}, {label:"No", value:0}], asyncSubmitter: function (callback, newValue) { var record = this.getRecord(), column = this.getColumn(), oldValue = this.value, datatable = this.getDataTable(); YAHOO.util.Connect.asyncRequest( 'POST', '<?php echo ROOT_URL.DS; ?>system/lib/menus/datatable.php', { success:function(o) { var r = YAHOO.lang.JSON.parse(o.responseText); if (r.replyCode == 201) { callback(true, r.data); } else { alert(r.replyText); callback(); } }, failure:function(o) { alert(o.statusText); callback(); }, scope:this }, 'action=menuCellEdit&column=' + column.key + '&newValue=' + escape(newValue) + '&oldValue=' + escape(oldValue) + myBuildUrl(datatable,record) ); }})} ]; var myDataSource = new YAHOO.util.XHRDataSource( "<?php echo ROOT_URL.DS; ?>system/lib/menus/getmenubuttons.php?groupid="+groupid, {responseSchema: {resultNode: "button" ,fields: ["id","groupid","usergroupid",{key:"rank",parser:'number'},"caption","link","alt","published"]}} ); var myDataTable = new YAHOO.widget.DataTable("datatable2", myColumnDefs, myDataSource, {caption: 'Menu buttons'+menuGroupName}); // var myDTDrags = {}; ////////////////////////////////////////////////////////////////////////////// // Custom drag and drop class ////////////////////////////////////////////////////////////////////////////// YAHOO.example.DDRows = function(id, sGroup, config) { YAHOO.example.DDRows.superclass.constructor.call(this, id, sGroup, config); Dom.addClass(this.getDragEl(),"custom-class"); this.goingUp = false; this.lastY = 0; }; ////////////////////////////////////////////////////////////////////////////// // DDRows extends DDProxy ////////////////////////////////////////////////////////////////////////////// YAHOO.extend(YAHOO.example.DDRows, YAHOO.util.DDProxy, { proxyEl: null, srcEl:null, srcData:null, srcIndex: null, tmpIndex:null, startDrag: function(x, y) { var proxyEl = this.proxyEl = this.getDragEl(), srcEl = this.srcEl = this.getEl(); this.srcData = myDataTable.getRecord(this.srcEl).getData(); this.srcIndex = srcEl.sectionRowIndex; // Make the proxy look like the source element Dom.setStyle(srcEl, "visibility", "hidden"); proxyEl.innerHTML = "<table><tbody>"+srcEl.innerHTML+"</tbody></table>"; }, endDrag: function(x,y) { var position, srcEl = this.srcEl; Dom.setStyle(this.proxyEl, "visibility", "hidden"); Dom.setStyle(srcEl, "visibility", ""); // *********************************************************** // // Function that does the ordering of the menu buttons table // // *********************************************************** var direction = this.goingUp; var id = myDataTable.getRecord(this.tmpIndex).getData('id'); var pos = this.tmpIndex; var funcChange = changeMenuRank(pos,id,direction); }, onDrag: function(e) { // Keep track of the direction of the drag for use during onDragOver var y = Event.getPageY(e); if (y < this.lastY) { this.goingUp = true; } else if (y > this.lastY) { this.goingUp = false; } this.lastY = y; }, onDragOver: function(e, id) { // Reorder rows as user drags var srcIndex = this.srcIndex, destEl = Dom.get(id), destIndex = destEl.sectionRowIndex, tmpIndex = this.tmpIndex; if (destEl.nodeName.toLowerCase() === "tr") { if(tmpIndex !== null) { myDataTable.deleteRow(tmpIndex); } else { myDataTable.deleteRow(this.srcIndex); } myDataTable.addRow(this.srcData, destIndex); this.tmpIndex = destIndex; DDM.refreshCache(); } } }); ////////////////////////////////////////////////////////////////////////////// // Create DDRows instances when DataTable is initialized ////////////////////////////////////////////////////////////////////////////// myDataTable.subscribe("initEvent", function() { var i, id, allRows = this.getTbodyEl().rows; for(i=0; i<allRows.length; i++) { id = allRows[i].id; // Clean up any existing Drag instances if (myDTDrags[id]) { myDTDrags[id].unreg(); delete myDTDrags[id]; } // Create a Drag instance for each row myDTDrags[id] = new YAHOO.example.DDRows(id); } }); ////////////////////////////////////////////////////////////////////////////// // Create DDRows instances when new row is added ////////////////////////////////////////////////////////////////////////////// myDataTable.subscribe("rowAddEvent",function(e){ var id = e.record.getId(); myDTDrags[id] = new YAHOO.example.DDRows(id); }); myDataTable.subscribe("cellClickEvent", myDataTable.onEventShowCellEditor); var oButtonMenu = new YAHOO.widget.Button( "addButton", // Source element id { checked: false, // Attribute override label: "Add Button" } ); }(); //}); } ////////////////////////////////////////////////////////////////////////////// // // GROUPS // ////////////////////////////////////////////////////////////////////////////// YAHOO.util.Event.addListener(window, "load", function() { YAHOO.example.ReorderRows = function() { var Dom = YAHOO.util.Dom, Event = YAHOO.util.Event, DDM = YAHOO.util.DragDropMgr, myColumnDefs = [ { key: 'id', label:'', isPrimaryKey:true, className:'view-buttons', formatter: function (cell, rec, col, data) { cell.innerHTML = '<a href="javascript:void(0);" onClick="javascript:loadMenuTable('+data+');"><img src="<?php echo ROOT_URL.DS; ?>system/gfx/menubtn.png" border="0" /></a>'; } }, {key:"rank", label:'', className:'centered'}, {key:"name", label:"Groupname", className:'fat'}, {key:'grouptitle', label:'Grouptitle', editor: new YAHOO.widget.TextboxCellEditor({ asyncSubmitter: function (callback, newValue) { var record = this.getRecord(), column = this.getColumn(), oldValue = this.value, datatable = this.getDataTable(); YAHOO.util.Connect.asyncRequest( 'POST', '<?php echo ROOT_URL.DS; ?>system/lib/menus/datatable.php', { success:function(o) { var r = YAHOO.lang.JSON.parse(o.responseText); if (r.replyCode == 201) { callback(true, r.data); } else { alert(r.replyText); callback(); } }, failure:function(o) { alert(o.statusText); callback(); }, scope:this }, 'action=groupCellEdit&column=' + column.key + '&newValue=' + escape(newValue) + '&oldValue=' + escape(oldValue) + myBuildUrl(datatable,record) ); } })}, {key:"lang", label:'Language', className:'centered', editor: myLangEditor}, { key:"orientation", label:'Orientation', className:'centered', formatter:formatOrientation, editor: new YAHOO.widget.RadioCellEditor({ radioOptions:[{label:"Horizontal", value:'H'}, {label:"Vertical", value:'V'}], asyncSubmitter: function (callback, newValue) { var record = this.getRecord(), column = this.getColumn(), oldValue = this.value, datatable = this.getDataTable(); YAHOO.util.Connect.asyncRequest( 'POST', '<?php echo ROOT_URL.DS; ?>system/lib/menus/datatable.php', { success:function(o) { var r = YAHOO.lang.JSON.parse(o.responseText); if (r.replyCode == 201) { callback(true, r.data); } else { alert(r.replyText); callback(); } }, failure:function(o) { alert(o.statusText); callback(); }, scope:this }, 'action=groupCellEdit&column=' + column.key + '&newValue=' + escape(newValue) + '&oldValue=' + escape(oldValue) + myBuildUrl(datatable,record) ); }}) }, {key:"space", label:'Space', className:'centered'}, { key:'usergroupid', label:'Usergroup', /*formatter: function(cell, rec, col, data){ var posnum = rec.getData('usergroupid'); cell.innerHTML = listofusers[posnum].label; },*/ editor:GroupUsergroupsEditor, className:'centered' }, { key:"published", className:'centeredpub', formatter:formatPublished, label:"Published", editor: new YAHOO.widget.RadioCellEditor({ radioOptions:[{label:"Yes", value:1}, {label:"No", value:0}], asyncSubmitter: function (callback, newValue) { var record = this.getRecord(), column = this.getColumn(), oldValue = this.value, datatable = this.getDataTable(); YAHOO.util.Connect.asyncRequest( 'POST', '<?php echo ROOT_URL.DS; ?>system/lib/menus/datatable.php', { success:function(o) { var r = YAHOO.lang.JSON.parse(o.responseText); if (r.replyCode == 201) { callback(true, r.data); } else { alert(r.replyText); callback(); } }, failure:function(o) { alert(o.statusText); callback(); }, scope:this }, 'action=groupCellEdit&column=' + column.key + '&newValue=' + escape(newValue) + '&oldValue=' + escape(oldValue) + myBuildUrl(datatable,record) ); } })} ]; var myDataSource = new YAHOO.util.XHRDataSource( "<?php echo ROOT_URL.DS; ?>system/lib/menus/getmenugroups.php", {responseSchema: {resultNode: "group" ,fields: ["id","usergroup","usergroupid","name","grouptitle",{key:"rank",parser:'number'},"lang","orientation","published"]}} ); var myDataTable = new YAHOO.widget.DataTable("datatable", myColumnDefs, myDataSource, {caption: 'Menu groups'}); var myDTDrags = {}; ////////////////////////////////////////////////////////////////////////////// // Custom drag and drop class ////////////////////////////////////////////////////////////////////////////// YAHOO.example.DDRows = function(id, sGroup, config) { YAHOO.example.DDRows.superclass.constructor.call(this, id, sGroup, config); Dom.addClass(this.getDragEl(),"custom-class"); this.goingUp = false; this.lastY = 0; }; ////////////////////////////////////////////////////////////////////////////// // DDRows extends DDProxy ////////////////////////////////////////////////////////////////////////////// YAHOO.extend(YAHOO.example.DDRows, YAHOO.util.DDProxy, { proxyEl: null, srcEl:null, srcData:null, srcIndex: null, tmpIndex:null, startDrag: function(x, y) { var proxyEl = this.proxyEl = this.getDragEl(), srcEl = this.srcEl = this.getEl(); this.srcData = myDataTable.getRecord(this.srcEl).getData(); this.srcIndex = srcEl.sectionRowIndex; // Make the proxy look like the source element Dom.setStyle(srcEl, "visibility", "hidden"); proxyEl.innerHTML = "<table><tbody>"+srcEl.innerHTML+"</tbody></table>"; }, endDrag: function(x,y) { var position, srcEl = this.srcEl; Dom.setStyle(this.proxyEl, "visibility", "hidden"); Dom.setStyle(srcEl, "visibility", ""); }, onDrag: function(e) { // Keep track of the direction of the drag for use during onDragOver var y = Event.getPageY(e); if (y < this.lastY) { this.goingUp = true; } else if (y > this.lastY) { this.goingUp = false; } this.lastY = y; }, onDragOver: function(e, id) { // Reorder rows as user drags var srcIndex = this.srcIndex, destEl = Dom.get(id), destIndex = destEl.sectionRowIndex, tmpIndex = this.tmpIndex; if (destEl.nodeName.toLowerCase() === "tr") { if(tmpIndex !== null) { myDataTable.deleteRow(tmpIndex); } else { myDataTable.deleteRow(this.srcIndex); } myDataTable.addRow(this.srcData, destIndex); this.tmpIndex = destIndex; DDM.refreshCache(); } } }); ////////////////////////////////////////////////////////////////////////////// // Create DDRows instances when DataTable is initialized ////////////////////////////////////////////////////////////////////////////// myDataTable.subscribe("initEvent", function() { var i, id, allRows = this.getTbodyEl().rows; for(i=0; i<allRows.length; i++) { id = allRows[i].id; // Clean up any existing Drag instances if (myDTDrags[id]) { myDTDrags[id].unreg(); delete myDTDrags[id]; } // Create a Drag instance for each row myDTDrags[id] = new YAHOO.example.DDRows(id); } }); ////////////////////////////////////////////////////////////////////////////// // Create DDRows instances when new row is added ////////////////////////////////////////////////////////////////////////////// myDataTable.subscribe("rowAddEvent",function(e){ var id = e.record.getId(); myDTDrags[id] = new YAHOO.example.DDRows(id); }); myDataTable.subscribe("cellClickEvent", myDataTable.onEventShowCellEditor); var oButtonGroup = new YAHOO.widget.Button( "addGroup", // Source element id { checked: false, // Attribute override label: "Add Group" } ); var onButtonClick = function (e) { alert("doSomething"); }; oButtonGroup.on("click", onButtonClick); }(); });
This paste will be private.
From the Design Piracy series on my blog: