diff options
Diffstat (limited to 'layout/xul/grid/examples/dynamicgrid.xul')
| -rw-r--r-- | layout/xul/grid/examples/dynamicgrid.xul | 370 |
1 files changed, 370 insertions, 0 deletions
diff --git a/layout/xul/grid/examples/dynamicgrid.xul b/layout/xul/grid/examples/dynamicgrid.xul new file mode 100644 index 000000000..d718df5f9 --- /dev/null +++ b/layout/xul/grid/examples/dynamicgrid.xul @@ -0,0 +1,370 @@ +<?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> |