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