The Tor Browser: layout/xul/grid/examples/dynamicgrid.xul@141e0f1194b1 (annotated)

layout/xul/grid/examples/dynamicgrid.xul@141e0f1194b1 (annotated)

layout/xul/grid/examples/dynamicgrid.xul

Wed, 31 Dec 2014 07:16:47 +0100

author: Michael Schloh von Bennewitz <michael@schloh.com>
date: Wed, 31 Dec 2014 07:16:47 +0100
branch: TOR_BUG_9701
changeset 3: 141e0f1194b1
permissions: -rw-r--r--

Revert simplistic fix pending revisit of Mozilla integration attempt.

 <?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>

The Tor Browser / annotate

layout/xul/grid/examples/dynamicgrid.xul@141e0f1194b1 (annotated)

layout/xul/grid/examples/dynamicgrid.xul