gecko-dev/layout/xul/grid/examples/dynamicgrid.xul

<?xml version="1.0"?> 
<!-- This Source Code Form is subject to the terms of the Mozilla Public
   - License, v. 2.0. If a copy of the MPL was not distributed with this
   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->


<?xml-stylesheet href="chrome://global/skin/" type="text/css"?> 
<?xml-stylesheet href="gridsample.css" type="text/css"?> 

<!DOCTYPE window> 


<window orient="vertical" 
        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
		onload="start()"> 

<script>

   var selected;
   var count = 0;

   function isCell(box)
   {
     if (box.localName == "row" || 
	     box.localName == "column" ||
		 box.localName == "rows" ||
		 box.localName == "columns" ||
		 box.localName == "grid")
		 return false;

	 return true;
   }

   function start()
   {
      selectIt(window.document.getElementById("rows"));
   }

   function selectIt(box)
   {
     if (!box)
	   return;

     var a = box.getAttribute("selected");
	 if (a != "true") {
	   box.setAttribute("selected","true");
  	   if (selected)
	      selected.setAttribute("selected","false");

	   selected = box;
     }
   }

   function addCellSelectionHandle(box)
   {
	 box.setAttribute("oncommand", "selectIt(this);");
   }

   function addRowColumnSelectionHandle(box)
   {
	 box.setAttribute("onclick", "selectIt(this);");
   }

   function createButton(str)
   {
	 var b = document.createElement("button");
	 b.setAttribute("label", str+count);
	 count++;
	 addCellSelectionHandle(b);
	 return b;
   }

   function createRow()
   {
	 var b = document.createElement("row");
 	 b.setAttribute("dynamic","true");

	 addRowColumnSelectionHandle(b);
	 return b;
   }

   function createColumn()
   {
	 var b = document.createElement("column");
	 b.setAttribute("dynamic","true");
	 addRowColumnSelectionHandle(b);
	 return b;
   }

   function createText(str)
   {
	 var text = document.createElement("text");
	 text.setAttribute("value", str+count);
	 count++;
	 text.setAttribute("style", "font-size: 40pt");
	 addCellSelectionHandle(text);
	 return text;
   }

   function appendElement(element, prepend)
   {
     if (!selected)
	    return;

     setUserAttribute(element);

	 if (selected.localName == "rows") 
	   appendRow(false);
     else if (selected.localName == "columns")
	   appendColumn(false);

	 if (selected.localName == "row" || selected.localName == "column" ) { // is row or column
		 selected.appendChild(element); 
	 } else {
		  var parent = selected.parentNode;
		  if (prepend)
		    parent.insertBefore(element, selected);	 
		  else {
		    var next = selected.nextSibling;
			if (next)
		      parent.insertBefore(element,next);
			else
			  parent.appendChild(element);
		  }
	 }
     
	 selectIt(element);
   }

   function getRows(box)
   {
      return window.document.getElementById("rows");
   }

   function getColumns(box)
   {
      return window.document.getElementById("columns");
   }

   function setUserAttribute(element)
   {
   	 var attributeBox = document.getElementById("attributebox");
	 var valueBox = document.getElementById("valuebox");
	 var attribute = attributeBox.value;
	 var value = valueBox.value;
	 if (attribute != "")
	   element.setAttribute(attribute,value);
   }

   function appendRowColumn(rowColumn, prepend)
   {
     if (!selected)
	    return;

     setUserAttribute(rowColumn); 

     var row = rowColumn;

	 // first see what we are adding.

	 if (isCell(selected)) { // if cell then select row/column
	   selectIt(selected.parentNode);
	 }

	 if (selected.localName == "row" || selected.localName == "rows")
	   if (row.localName == "column") {
	     selectIt(getColumns(selected)); 
		 dump("Selecting the column")
		 dump("Selected="+selected.localName);
		 }

	 if (selected.localName == "column" || selected.localName == "columns")
	   if (row.localName == "row")
	     selectIt(getRows(selected));

	 if (selected.localName == "rows" || selected.localName == "columns" ) 
	 { // if rows its easy
		 selected.appendChild(row); 
	 } else {
		  var parent = selected.parentNode;
		  if (prepend)
		    parent.insertBefore(row, selected);	 
		  else {
		    var next = selected.nextSibling;
			if (next)
		      parent.insertBefore(row,next);
			else
			  parent.appendChild(row);
		  }
	 }

     selectIt(row);
   }

 function appendRow(prepend)
 {
   var row = createRow();
   appendRowColumn(row,prepend);
 }


 function appendColumn(prepend)
 {
   var column = createColumn();
   appendRowColumn(column,prepend);
 }


 function selectRows()
 {
    var rows = getRows();
	if (rows.firstChild)
      selectIt(rows.firstChild);
	else
	  selectIt(rows);
 }


 function selectColumns()
 {
    var columns = getColumns();
	if (columns.firstChild)
      selectIt(columns.firstChild);
	else
	  selectIt(columns);
 }

 function nextElement()
 {
   if (!selected)
     return;

   selectIt(selected.nextSibling);
 }

 function previousElement()
 {
   if (!selected)
     return;

   selectIt(selected.previousSibling);
 }

 function selectRow()
 {
   if (!selected)
     return;

   if (selected.localName == "row")
     return;

   if (isCell(selected)) {
     if (selected.parentNode.localName == "row")
       selectIt(selected.parentNode);
   }
 }

 function selectColumn()
 {
   if (!selected)
     return;

   if (selected.localName == "column")
     return;

   if (isCell(selected)) {
     if (selected.parentNode.localName == "column")
       selectIt(selected.parentNode);
   }
 }

 function collapseGrid()
 {
	 var grid = document.getElementById("grid");
	 var collapsed = grid.getAttribute("collapsed");

	 if (collapsed == "")
	   grid.setAttribute("collapsed","true");
	 else
   	   grid.setAttribute("collapsed","");

 }

 function collapseElement()
 {
   if (selected) {
	 var collapsed = selected.getAttribute("collapsed");

	 if (collapsed == "")
	   selected.setAttribute("collapsed","true");
	 else
   	   selected.setAttribute("collapsed","");
	}
 }

</script>

    <hbox flex="1" style="border: 2px inset gray; overflow: auto">
	 <vbox flex="1">
	  <hbox>
		<grid id="grid" style="border: 2px solid red;">
		   <columns id="columns">
		   </columns>

		   <rows start="true" id="rows">
		   </rows>
		</grid>
	    <spacer flex="1"/>
      </hbox>
 	    <spacer flex="1"/>
	 </vbox>
    </hbox>

    <grid style="background-color: blue">
	   <columns>
             <column flex="1"/> 
             <column flex="1"/>
             <column flex="1"/>             
             <column flex="1"/>
 	   </columns>
	 <rows>
     
         <row>
		  <button label="append row" oncommand="appendRow(false);"/>
		  <button label="prepend row" oncommand="appendRow(true);"/>

		  <button label="append column" oncommand="appendColumn(false);"/>
		  <button label="prepend column" oncommand="appendColumn(true);"/>
		 </row>

        <row>

		 <button label="append button" oncommand="appendElement(createButton('button'),false);"/>
		 <button label="prepend button" oncommand="appendElement(createButton('button'),true);"/>

		 <button label="append text" oncommand="appendElement(createText('text'),false);"/>
		 <button label="prepend text" oncommand="appendElement(createText('text'),true);"/>

        </row>

		 <row>

 	     <button label="select rows" oncommand="selectRows()"/>
	     <button label="select columns" oncommand="selectColumns()"/>

		 <button label="next" oncommand="nextElement()"/>
		 <button label="previous" oncommand="previousElement()"/>

        </row>

	<hbox align="center">
 	     <button label="collapse/uncollapse grid" flex="1" oncommand="collapseGrid()"/>
 	     <button label="collapse/uncollapse element" flex="1" oncommand="collapseElement()"/>
        </hbox>



	<hbox>

         <text value="attribute"/>
		 <textbox id="attributebox" value="" flex="1"/>
         <text value="value"/>
		 <textbox id="valuebox" value="" flex="2"/>
        </hbox>


       </rows>
	</grid>

</window>