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

371 строка
7.7 KiB
XML

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