The Tor Browser / file comparison
comparison: layout/xul/grid/examples/dynamicgrid.xul
layout/xul/grid/examples/dynamicgrid.xul
- branch
- TOR_BUG_3246
- changeset 6
- 8bccb770b82d
equal
deleted
inserted
replaced
| -1:000000000000 | 0:93a582f1c303 |
|---|---|
| 1 <?xml version="1.0"?> | |
| 2 <!-- This Source Code Form is subject to the terms of the Mozilla Public | |
| 3 - License, v. 2.0. If a copy of the MPL was not distributed with this | |
| 4 - file, You can obtain one at http://mozilla.org/MPL/2.0/. --> | |
| 5 | |
| 6 | |
| 7 <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> | |
| 8 <?xml-stylesheet href="gridsample.css" type="text/css"?> | |
| 9 | |
| 10 <!DOCTYPE window> | |
| 11 | |
| 12 | |
| 13 <window orient="vertical" | |
| 14 xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" | |
| 15 onload="start()"> | |
| 16 | |
| 17 <script> | |
| 18 | |
| 19 var selected; | |
| 20 var count = 0; | |
| 21 | |
| 22 function isCell(box) | |
| 23 { | |
| 24 if (box.localName == "row" || | |
| 25 box.localName == "column" || | |
| 26 box.localName == "rows" || | |
| 27 box.localName == "columns" || | |
| 28 box.localName == "grid") | |
| 29 return false; | |
| 30 | |
| 31 return true; | |
| 32 } | |
| 33 | |
| 34 function start() | |
| 35 { | |
| 36 selectIt(window.document.getElementById("rows")); | |
| 37 } | |
| 38 | |
| 39 function selectIt(box) | |
| 40 { | |
| 41 if (!box) | |
| 42 return; | |
| 43 | |
| 44 var a = box.getAttribute("selected"); | |
| 45 if (a != "true") { | |
| 46 box.setAttribute("selected","true"); | |
| 47 if (selected) | |
| 48 selected.setAttribute("selected","false"); | |
| 49 | |
| 50 selected = box; | |
| 51 } | |
| 52 } | |
| 53 | |
| 54 function addCellSelectionHandle(box) | |
| 55 { | |
| 56 box.setAttribute("oncommand", "selectIt(this);"); | |
| 57 } | |
| 58 | |
| 59 function addRowColumnSelectionHandle(box) | |
| 60 { | |
| 61 box.setAttribute("onclick", "selectIt(this);"); | |
| 62 } | |
| 63 | |
| 64 function createButton(str) | |
| 65 { | |
| 66 var b = document.createElement("button"); | |
| 67 b.setAttribute("label", str+count); | |
| 68 count++; | |
| 69 addCellSelectionHandle(b); | |
| 70 return b; | |
| 71 } | |
| 72 | |
| 73 function createRow() | |
| 74 { | |
| 75 var b = document.createElement("row"); | |
| 76 b.setAttribute("dynamic","true"); | |
| 77 | |
| 78 addRowColumnSelectionHandle(b); | |
| 79 return b; | |
| 80 } | |
| 81 | |
| 82 function createColumn() | |
| 83 { | |
| 84 var b = document.createElement("column"); | |
| 85 b.setAttribute("dynamic","true"); | |
| 86 addRowColumnSelectionHandle(b); | |
| 87 return b; | |
| 88 } | |
| 89 | |
| 90 function createText(str) | |
| 91 { | |
| 92 var text = document.createElement("text"); | |
| 93 text.setAttribute("value", str+count); | |
| 94 count++; | |
| 95 text.setAttribute("style", "font-size: 40pt"); | |
| 96 addCellSelectionHandle(text); | |
| 97 return text; | |
| 98 } | |
| 99 | |
| 100 function appendElement(element, prepend) | |
| 101 { | |
| 102 if (!selected) | |
| 103 return; | |
| 104 | |
| 105 setUserAttribute(element); | |
| 106 | |
| 107 if (selected.localName == "rows") | |
| 108 appendRow(false); | |
| 109 else if (selected.localName == "columns") | |
| 110 appendColumn(false); | |
| 111 | |
| 112 if (selected.localName == "row" || selected.localName == "column" ) { // is row or column | |
| 113 selected.appendChild(element); | |
| 114 } else { | |
| 115 var parent = selected.parentNode; | |
| 116 if (prepend) | |
| 117 parent.insertBefore(element, selected); | |
| 118 else { | |
| 119 var next = selected.nextSibling; | |
| 120 if (next) | |
| 121 parent.insertBefore(element,next); | |
| 122 else | |
| 123 parent.appendChild(element); | |
| 124 } | |
| 125 } | |
| 126 | |
| 127 selectIt(element); | |
| 128 } | |
| 129 | |
| 130 function getRows(box) | |
| 131 { | |
| 132 return window.document.getElementById("rows"); | |
| 133 } | |
| 134 | |
| 135 function getColumns(box) | |
| 136 { | |
| 137 return window.document.getElementById("columns"); | |
| 138 } | |
| 139 | |
| 140 function setUserAttribute(element) | |
| 141 { | |
| 142 var attributeBox = document.getElementById("attributebox"); | |
| 143 var valueBox = document.getElementById("valuebox"); | |
| 144 var attribute = attributeBox.value; | |
| 145 var value = valueBox.value; | |
| 146 if (attribute != "") | |
| 147 element.setAttribute(attribute,value); | |
| 148 } | |
| 149 | |
| 150 function appendRowColumn(rowColumn, prepend) | |
| 151 { | |
| 152 if (!selected) | |
| 153 return; | |
| 154 | |
| 155 setUserAttribute(rowColumn); | |
| 156 | |
| 157 var row = rowColumn; | |
| 158 | |
| 159 // first see what we are adding. | |
| 160 | |
| 161 if (isCell(selected)) { // if cell then select row/column | |
| 162 selectIt(selected.parentNode); | |
| 163 } | |
| 164 | |
| 165 if (selected.localName == "row" || selected.localName == "rows") | |
| 166 if (row.localName == "column") { | |
| 167 selectIt(getColumns(selected)); | |
| 168 dump("Selecting the column") | |
| 169 dump("Selected="+selected.localName); | |
| 170 } | |
| 171 | |
| 172 if (selected.localName == "column" || selected.localName == "columns") | |
| 173 if (row.localName == "row") | |
| 174 selectIt(getRows(selected)); | |
| 175 | |
| 176 if (selected.localName == "rows" || selected.localName == "columns" ) | |
| 177 { // if rows its easy | |
| 178 selected.appendChild(row); | |
| 179 } else { | |
| 180 var parent = selected.parentNode; | |
| 181 if (prepend) | |
| 182 parent.insertBefore(row, selected); | |
| 183 else { | |
| 184 var next = selected.nextSibling; | |
| 185 if (next) | |
| 186 parent.insertBefore(row,next); | |
| 187 else | |
| 188 parent.appendChild(row); | |
| 189 } | |
| 190 } | |
| 191 | |
| 192 selectIt(row); | |
| 193 } | |
| 194 | |
| 195 function appendRow(prepend) | |
| 196 { | |
| 197 var row = createRow(); | |
| 198 appendRowColumn(row,prepend); | |
| 199 } | |
| 200 | |
| 201 | |
| 202 function appendColumn(prepend) | |
| 203 { | |
| 204 var column = createColumn(); | |
| 205 appendRowColumn(column,prepend); | |
| 206 } | |
| 207 | |
| 208 | |
| 209 function selectRows() | |
| 210 { | |
| 211 var rows = getRows(); | |
| 212 if (rows.firstChild) | |
| 213 selectIt(rows.firstChild); | |
| 214 else | |
| 215 selectIt(rows); | |
| 216 } | |
| 217 | |
| 218 | |
| 219 function selectColumns() | |
| 220 { | |
| 221 var columns = getColumns(); | |
| 222 if (columns.firstChild) | |
| 223 selectIt(columns.firstChild); | |
| 224 else | |
| 225 selectIt(columns); | |
| 226 } | |
| 227 | |
| 228 function nextElement() | |
| 229 { | |
| 230 if (!selected) | |
| 231 return; | |
| 232 | |
| 233 selectIt(selected.nextSibling); | |
| 234 } | |
| 235 | |
| 236 function previousElement() | |
| 237 { | |
| 238 if (!selected) | |
| 239 return; | |
| 240 | |
| 241 selectIt(selected.previousSibling); | |
| 242 } | |
| 243 | |
| 244 function selectRow() | |
| 245 { | |
| 246 if (!selected) | |
| 247 return; | |
| 248 | |
| 249 if (selected.localName == "row") | |
| 250 return; | |
| 251 | |
| 252 if (isCell(selected)) { | |
| 253 if (selected.parentNode.localName == "row") | |
| 254 selectIt(selected.parentNode); | |
| 255 } | |
| 256 } | |
| 257 | |
| 258 function selectColumn() | |
| 259 { | |
| 260 if (!selected) | |
| 261 return; | |
| 262 | |
| 263 if (selected.localName == "column") | |
| 264 return; | |
| 265 | |
| 266 if (isCell(selected)) { | |
| 267 if (selected.parentNode.localName == "column") | |
| 268 selectIt(selected.parentNode); | |
| 269 } | |
| 270 } | |
| 271 | |
| 272 function collapseGrid() | |
| 273 { | |
| 274 var grid = document.getElementById("grid"); | |
| 275 var collapsed = grid.getAttribute("collapsed"); | |
| 276 | |
| 277 if (collapsed == "") | |
| 278 grid.setAttribute("collapsed","true"); | |
| 279 else | |
| 280 grid.setAttribute("collapsed",""); | |
| 281 | |
| 282 } | |
| 283 | |
| 284 function collapseElement() | |
| 285 { | |
| 286 if (selected) { | |
| 287 var collapsed = selected.getAttribute("collapsed"); | |
| 288 | |
| 289 if (collapsed == "") | |
| 290 selected.setAttribute("collapsed","true"); | |
| 291 else | |
| 292 selected.setAttribute("collapsed",""); | |
| 293 } | |
| 294 } | |
| 295 | |
| 296 </script> | |
| 297 | |
| 298 <hbox flex="1" style="border: 2px inset gray; overflow: auto"> | |
| 299 <vbox flex="1"> | |
| 300 <hbox> | |
| 301 <grid id="grid" style="border: 2px solid red;"> | |
| 302 <columns id="columns"> | |
| 303 </columns> | |
| 304 | |
| 305 <rows start="true" id="rows"> | |
| 306 </rows> | |
| 307 </grid> | |
| 308 <spacer flex="1"/> | |
| 309 </hbox> | |
| 310 <spacer flex="1"/> | |
| 311 </vbox> | |
| 312 </hbox> | |
| 313 | |
| 314 <grid style="background-color: blue"> | |
| 315 <columns> | |
| 316 <column flex="1"/> | |
| 317 <column flex="1"/> | |
| 318 <column flex="1"/> | |
| 319 <column flex="1"/> | |
| 320 </columns> | |
| 321 <rows> | |
| 322 | |
| 323 <row> | |
| 324 <button label="append row" oncommand="appendRow(false);"/> | |
| 325 <button label="prepend row" oncommand="appendRow(true);"/> | |
| 326 | |
| 327 <button label="append column" oncommand="appendColumn(false);"/> | |
| 328 <button label="prepend column" oncommand="appendColumn(true);"/> | |
| 329 </row> | |
| 330 | |
| 331 <row> | |
| 332 | |
| 333 <button label="append button" oncommand="appendElement(createButton('button'),false);"/> | |
| 334 <button label="prepend button" oncommand="appendElement(createButton('button'),true);"/> | |
| 335 | |
| 336 <button label="append text" oncommand="appendElement(createText('text'),false);"/> | |
| 337 <button label="prepend text" oncommand="appendElement(createText('text'),true);"/> | |
| 338 | |
| 339 </row> | |
| 340 | |
| 341 <row> | |
| 342 | |
| 343 <button label="select rows" oncommand="selectRows()"/> | |
| 344 <button label="select columns" oncommand="selectColumns()"/> | |
| 345 | |
| 346 <button label="next" oncommand="nextElement()"/> | |
| 347 <button label="previous" oncommand="previousElement()"/> | |
| 348 | |
| 349 </row> | |
| 350 | |
| 351 <hbox align="center"> | |
| 352 <button label="collapse/uncollapse grid" flex="1" oncommand="collapseGrid()"/> | |
| 353 <button label="collapse/uncollapse element" flex="1" oncommand="collapseElement()"/> | |
| 354 </hbox> | |
| 355 | |
| 356 | |
| 357 | |
| 358 <hbox> | |
| 359 | |
| 360 <text value="attribute"/> | |
| 361 <textbox id="attributebox" value="" flex="1"/> | |
| 362 <text value="value"/> | |
| 363 <textbox id="valuebox" value="" flex="2"/> | |
| 364 </hbox> | |
| 365 | |
| 366 | |
| 367 </rows> | |
| 368 </grid> | |
| 369 | |
| 370 </window> |
