1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/layout/xul/grid/examples/dynamicgrid.xul Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,370 @@
1.4 +<?xml version="1.0"?>
1.5 +<!-- This Source Code Form is subject to the terms of the Mozilla Public
1.6 + - License, v. 2.0. If a copy of the MPL was not distributed with this
1.7 + - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
1.8 +
1.9 +
1.10 +<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
1.11 +<?xml-stylesheet href="gridsample.css" type="text/css"?>
1.12 +
1.13 +<!DOCTYPE window>
1.14 +
1.15 +
1.16 +<window orient="vertical"
1.17 + xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
1.18 + onload="start()">
1.19 +
1.20 +<script>
1.21 +
1.22 + var selected;
1.23 + var count = 0;
1.24 +
1.25 + function isCell(box)
1.26 + {
1.27 + if (box.localName == "row" ||
1.28 + box.localName == "column" ||
1.29 + box.localName == "rows" ||
1.30 + box.localName == "columns" ||
1.31 + box.localName == "grid")
1.32 + return false;
1.33 +
1.34 + return true;
1.35 + }
1.36 +
1.37 + function start()
1.38 + {
1.39 + selectIt(window.document.getElementById("rows"));
1.40 + }
1.41 +
1.42 + function selectIt(box)
1.43 + {
1.44 + if (!box)
1.45 + return;
1.46 +
1.47 + var a = box.getAttribute("selected");
1.48 + if (a != "true") {
1.49 + box.setAttribute("selected","true");
1.50 + if (selected)
1.51 + selected.setAttribute("selected","false");
1.52 +
1.53 + selected = box;
1.54 + }
1.55 + }
1.56 +
1.57 + function addCellSelectionHandle(box)
1.58 + {
1.59 + box.setAttribute("oncommand", "selectIt(this);");
1.60 + }
1.61 +
1.62 + function addRowColumnSelectionHandle(box)
1.63 + {
1.64 + box.setAttribute("onclick", "selectIt(this);");
1.65 + }
1.66 +
1.67 + function createButton(str)
1.68 + {
1.69 + var b = document.createElement("button");
1.70 + b.setAttribute("label", str+count);
1.71 + count++;
1.72 + addCellSelectionHandle(b);
1.73 + return b;
1.74 + }
1.75 +
1.76 + function createRow()
1.77 + {
1.78 + var b = document.createElement("row");
1.79 + b.setAttribute("dynamic","true");
1.80 +
1.81 + addRowColumnSelectionHandle(b);
1.82 + return b;
1.83 + }
1.84 +
1.85 + function createColumn()
1.86 + {
1.87 + var b = document.createElement("column");
1.88 + b.setAttribute("dynamic","true");
1.89 + addRowColumnSelectionHandle(b);
1.90 + return b;
1.91 + }
1.92 +
1.93 + function createText(str)
1.94 + {
1.95 + var text = document.createElement("text");
1.96 + text.setAttribute("value", str+count);
1.97 + count++;
1.98 + text.setAttribute("style", "font-size: 40pt");
1.99 + addCellSelectionHandle(text);
1.100 + return text;
1.101 + }
1.102 +
1.103 + function appendElement(element, prepend)
1.104 + {
1.105 + if (!selected)
1.106 + return;
1.107 +
1.108 + setUserAttribute(element);
1.109 +
1.110 + if (selected.localName == "rows")
1.111 + appendRow(false);
1.112 + else if (selected.localName == "columns")
1.113 + appendColumn(false);
1.114 +
1.115 + if (selected.localName == "row" || selected.localName == "column" ) { // is row or column
1.116 + selected.appendChild(element);
1.117 + } else {
1.118 + var parent = selected.parentNode;
1.119 + if (prepend)
1.120 + parent.insertBefore(element, selected);
1.121 + else {
1.122 + var next = selected.nextSibling;
1.123 + if (next)
1.124 + parent.insertBefore(element,next);
1.125 + else
1.126 + parent.appendChild(element);
1.127 + }
1.128 + }
1.129 +
1.130 + selectIt(element);
1.131 + }
1.132 +
1.133 + function getRows(box)
1.134 + {
1.135 + return window.document.getElementById("rows");
1.136 + }
1.137 +
1.138 + function getColumns(box)
1.139 + {
1.140 + return window.document.getElementById("columns");
1.141 + }
1.142 +
1.143 + function setUserAttribute(element)
1.144 + {
1.145 + var attributeBox = document.getElementById("attributebox");
1.146 + var valueBox = document.getElementById("valuebox");
1.147 + var attribute = attributeBox.value;
1.148 + var value = valueBox.value;
1.149 + if (attribute != "")
1.150 + element.setAttribute(attribute,value);
1.151 + }
1.152 +
1.153 + function appendRowColumn(rowColumn, prepend)
1.154 + {
1.155 + if (!selected)
1.156 + return;
1.157 +
1.158 + setUserAttribute(rowColumn);
1.159 +
1.160 + var row = rowColumn;
1.161 +
1.162 + // first see what we are adding.
1.163 +
1.164 + if (isCell(selected)) { // if cell then select row/column
1.165 + selectIt(selected.parentNode);
1.166 + }
1.167 +
1.168 + if (selected.localName == "row" || selected.localName == "rows")
1.169 + if (row.localName == "column") {
1.170 + selectIt(getColumns(selected));
1.171 + dump("Selecting the column")
1.172 + dump("Selected="+selected.localName);
1.173 + }
1.174 +
1.175 + if (selected.localName == "column" || selected.localName == "columns")
1.176 + if (row.localName == "row")
1.177 + selectIt(getRows(selected));
1.178 +
1.179 + if (selected.localName == "rows" || selected.localName == "columns" )
1.180 + { // if rows its easy
1.181 + selected.appendChild(row);
1.182 + } else {
1.183 + var parent = selected.parentNode;
1.184 + if (prepend)
1.185 + parent.insertBefore(row, selected);
1.186 + else {
1.187 + var next = selected.nextSibling;
1.188 + if (next)
1.189 + parent.insertBefore(row,next);
1.190 + else
1.191 + parent.appendChild(row);
1.192 + }
1.193 + }
1.194 +
1.195 + selectIt(row);
1.196 + }
1.197 +
1.198 + function appendRow(prepend)
1.199 + {
1.200 + var row = createRow();
1.201 + appendRowColumn(row,prepend);
1.202 + }
1.203 +
1.204 +
1.205 + function appendColumn(prepend)
1.206 + {
1.207 + var column = createColumn();
1.208 + appendRowColumn(column,prepend);
1.209 + }
1.210 +
1.211 +
1.212 + function selectRows()
1.213 + {
1.214 + var rows = getRows();
1.215 + if (rows.firstChild)
1.216 + selectIt(rows.firstChild);
1.217 + else
1.218 + selectIt(rows);
1.219 + }
1.220 +
1.221 +
1.222 + function selectColumns()
1.223 + {
1.224 + var columns = getColumns();
1.225 + if (columns.firstChild)
1.226 + selectIt(columns.firstChild);
1.227 + else
1.228 + selectIt(columns);
1.229 + }
1.230 +
1.231 + function nextElement()
1.232 + {
1.233 + if (!selected)
1.234 + return;
1.235 +
1.236 + selectIt(selected.nextSibling);
1.237 + }
1.238 +
1.239 + function previousElement()
1.240 + {
1.241 + if (!selected)
1.242 + return;
1.243 +
1.244 + selectIt(selected.previousSibling);
1.245 + }
1.246 +
1.247 + function selectRow()
1.248 + {
1.249 + if (!selected)
1.250 + return;
1.251 +
1.252 + if (selected.localName == "row")
1.253 + return;
1.254 +
1.255 + if (isCell(selected)) {
1.256 + if (selected.parentNode.localName == "row")
1.257 + selectIt(selected.parentNode);
1.258 + }
1.259 + }
1.260 +
1.261 + function selectColumn()
1.262 + {
1.263 + if (!selected)
1.264 + return;
1.265 +
1.266 + if (selected.localName == "column")
1.267 + return;
1.268 +
1.269 + if (isCell(selected)) {
1.270 + if (selected.parentNode.localName == "column")
1.271 + selectIt(selected.parentNode);
1.272 + }
1.273 + }
1.274 +
1.275 + function collapseGrid()
1.276 + {
1.277 + var grid = document.getElementById("grid");
1.278 + var collapsed = grid.getAttribute("collapsed");
1.279 +
1.280 + if (collapsed == "")
1.281 + grid.setAttribute("collapsed","true");
1.282 + else
1.283 + grid.setAttribute("collapsed","");
1.284 +
1.285 + }
1.286 +
1.287 + function collapseElement()
1.288 + {
1.289 + if (selected) {
1.290 + var collapsed = selected.getAttribute("collapsed");
1.291 +
1.292 + if (collapsed == "")
1.293 + selected.setAttribute("collapsed","true");
1.294 + else
1.295 + selected.setAttribute("collapsed","");
1.296 + }
1.297 + }
1.298 +
1.299 +</script>
1.300 +
1.301 + <hbox flex="1" style="border: 2px inset gray; overflow: auto">
1.302 + <vbox flex="1">
1.303 + <hbox>
1.304 + <grid id="grid" style="border: 2px solid red;">
1.305 + <columns id="columns">
1.306 + </columns>
1.307 +
1.308 + <rows start="true" id="rows">
1.309 + </rows>
1.310 + </grid>
1.311 + <spacer flex="1"/>
1.312 + </hbox>
1.313 + <spacer flex="1"/>
1.314 + </vbox>
1.315 + </hbox>
1.316 +
1.317 + <grid style="background-color: blue">
1.318 + <columns>
1.319 + <column flex="1"/>
1.320 + <column flex="1"/>
1.321 + <column flex="1"/>
1.322 + <column flex="1"/>
1.323 + </columns>
1.324 + <rows>
1.325 +
1.326 + <row>
1.327 + <button label="append row" oncommand="appendRow(false);"/>
1.328 + <button label="prepend row" oncommand="appendRow(true);"/>
1.329 +
1.330 + <button label="append column" oncommand="appendColumn(false);"/>
1.331 + <button label="prepend column" oncommand="appendColumn(true);"/>
1.332 + </row>
1.333 +
1.334 + <row>
1.335 +
1.336 + <button label="append button" oncommand="appendElement(createButton('button'),false);"/>
1.337 + <button label="prepend button" oncommand="appendElement(createButton('button'),true);"/>
1.338 +
1.339 + <button label="append text" oncommand="appendElement(createText('text'),false);"/>
1.340 + <button label="prepend text" oncommand="appendElement(createText('text'),true);"/>
1.341 +
1.342 + </row>
1.343 +
1.344 + <row>
1.345 +
1.346 + <button label="select rows" oncommand="selectRows()"/>
1.347 + <button label="select columns" oncommand="selectColumns()"/>
1.348 +
1.349 + <button label="next" oncommand="nextElement()"/>
1.350 + <button label="previous" oncommand="previousElement()"/>
1.351 +
1.352 + </row>
1.353 +
1.354 + <hbox align="center">
1.355 + <button label="collapse/uncollapse grid" flex="1" oncommand="collapseGrid()"/>
1.356 + <button label="collapse/uncollapse element" flex="1" oncommand="collapseElement()"/>
1.357 + </hbox>
1.358 +
1.359 +
1.360 +
1.361 + <hbox>
1.362 +
1.363 + <text value="attribute"/>
1.364 + <textbox id="attributebox" value="" flex="1"/>
1.365 + <text value="value"/>
1.366 + <textbox id="valuebox" value="" flex="2"/>
1.367 + </hbox>
1.368 +
1.369 +
1.370 + </rows>
1.371 + </grid>
1.372 +
1.373 +</window>
