| OLD | NEW |
|---|
| (Empty) | |
| 1 // Generated Dart class from HTML template. |
| 2 // DO NOT EDIT. |
| 3 |
| 4 class FlatPadUI { |
| 5 Map<String, Object> _scopes; |
| 6 Element _fragment; |
| 7 |
| 8 |
| 9 // Elements bound to a variable: |
| 10 var keySeven; |
| 11 var keyEight; |
| 12 var keyNine; |
| 13 var keyPlus; |
| 14 var keyMinus; |
| 15 var keyFour; |
| 16 var keyFive; |
| 17 var keySix; |
| 18 var keyStar; |
| 19 var keySlash; |
| 20 var keyOne; |
| 21 var keyTwo; |
| 22 var keyThree; |
| 23 var keyEqual; |
| 24 var keyClear; |
| 25 var keyZero; |
| 26 var keyDot; |
| 27 |
| 28 FlatPadUI() : _scopes = new Map<String, Object>() { |
| 29 // Insure stylesheet for template exist in the document. |
| 30 add_calcui_templatesStyles(); |
| 31 |
| 32 _fragment = new DocumentFragment(); |
| 33 var e0 = new Element.html('<div class="calc-pad"></div>'); |
| 34 _fragment.elements.add(e0); |
| 35 var e1 = new Element.html('<div class="calc-row"></div>'); |
| 36 e0.elements.add(e1); |
| 37 keySeven = new Element.html('<span class="calc-num">7</span>'); |
| 38 e1.elements.add(keySeven); |
| 39 keyEight = new Element.html('<span class="calc-num">8</span>'); |
| 40 e1.elements.add(keyEight); |
| 41 keyNine = new Element.html('<span class="calc-num">9</span>'); |
| 42 e1.elements.add(keyNine); |
| 43 keyPlus = new Element.html('<div class="op-plus-base op-plus"></div>'); |
| 44 e1.elements.add(keyPlus); |
| 45 keyMinus = new Element.html('<div class="op-minus-base op-minus"></div>'); |
| 46 e1.elements.add(keyMinus); |
| 47 var e2 = new Element.html('<div class="calc-row"></div>'); |
| 48 e0.elements.add(e2); |
| 49 keyFour = new Element.html('<span class="calc-num">4</span>'); |
| 50 e2.elements.add(keyFour); |
| 51 keyFive = new Element.html('<span class="calc-num">5</span>'); |
| 52 e2.elements.add(keyFive); |
| 53 keySix = new Element.html('<span class="calc-num">6</span>'); |
| 54 e2.elements.add(keySix); |
| 55 keyStar = new Element.html('<div class="op-mult-base op-mult"></div>'); |
| 56 e2.elements.add(keyStar); |
| 57 keySlash = new Element.html('<div class="op-div-base op-div"></div>'); |
| 58 e2.elements.add(keySlash); |
| 59 var e3 = new Element.html('<div class="calc-row"></div>'); |
| 60 e0.elements.add(e3); |
| 61 keyOne = new Element.html('<span class="calc-num">1</span>'); |
| 62 e3.elements.add(keyOne); |
| 63 keyTwo = new Element.html('<span class="calc-num">2</span>'); |
| 64 e3.elements.add(keyTwo); |
| 65 keyThree = new Element.html('<span class="calc-num">3</span>'); |
| 66 e3.elements.add(keyThree); |
| 67 keyEqual = new Element.html('<div class="op-equal-base op-equal"></div>'); |
| 68 e3.elements.add(keyEqual); |
| 69 keyClear = new Element.html('<div class="op-arrow-base op-arrow"></div>'); |
| 70 e3.elements.add(keyClear); |
| 71 var e4 = new Element.html('<div class="calc-row"></div>'); |
| 72 e0.elements.add(e4); |
| 73 keyZero = new Element.html('<span class="calc-num">0</span>'); |
| 74 e4.elements.add(keyZero); |
| 75 keyDot = new Element.html('<span class="calc-period"></span>'); |
| 76 e4.elements.add(keyDot); |
| 77 var e5 = new Element.html('<span style="font-size:9pt;"> </span>'
); |
| 78 keyDot.elements.add(e5); |
| 79 var e6 = new Text('.'); |
| 80 keyDot.elements.add(e6); |
| 81 var e7 = new Element.html('<span style="font-size:9pt;"> </span>'
); |
| 82 keyDot.elements.add(e7); |
| 83 } |
| 84 |
| 85 Element get root() => _fragment; |
| 86 |
| 87 // CSS class selectors for this template. |
| 88 static String get calcPad() => "calc-pad"; |
| 89 static String get calcRow() => "calc-row"; |
| 90 static String get calcNum() => "calc-num"; |
| 91 static String get calcPeriod() => "calc-period"; |
| 92 static String get calcOpButton() => "calc-op-button"; |
| 93 static String get calcNumHover() => "calc-num-hover"; |
| 94 static String get calcNumActive() => "calc-num-active"; |
| 95 static String get calcPeriodHover() => "calc-period-hover"; |
| 96 static String get calcPeriodActive() => "calc-period-active"; |
| 97 static String get calcPeriodError() => "calc-period-error"; |
| 98 static String get opPlusBase() => "op-plus-base"; |
| 99 static String get opPlus() => "op-plus"; |
| 100 static String get opPlusHover() => "op-plus-hover"; |
| 101 static String get opPlusActive() => "op-plus-active"; |
| 102 static String get opMinusBase() => "op-minus-base"; |
| 103 static String get opMinus() => "op-minus"; |
| 104 static String get opMinusHover() => "op-minus-hover"; |
| 105 static String get opMinusActive() => "op-minus-active"; |
| 106 static String get opMultBase() => "op-mult-base"; |
| 107 static String get opMult() => "op-mult"; |
| 108 static String get opMultHover() => "op-mult-hover"; |
| 109 static String get opMultActive() => "op-mult-active"; |
| 110 static String get opDivBase() => "op-div-base"; |
| 111 static String get opDiv() => "op-div"; |
| 112 static String get opDivHover() => "op-div-hover"; |
| 113 static String get opDivActive() => "op-div-active"; |
| 114 static String get opEqualBase() => "op-equal-base"; |
| 115 static String get opEqual() => "op-equal"; |
| 116 static String get opEqualHover() => "op-equal-hover"; |
| 117 static String get opEqualActive() => "op-equal-active"; |
| 118 static String get opArrowBase() => "op-arrow-base"; |
| 119 static String get opArrow() => "op-arrow"; |
| 120 static String get opArrowHover() => "op-arrow-hover"; |
| 121 static String get opArrowActive() => "op-arrow-active"; |
| 122 |
| 123 // Injection functions: |
| 124 // Each functions: |
| 125 |
| 126 // With functions: |
| 127 |
| 128 // CSS for this template. |
| 129 static final String stylesheet = ''' |
| 130 |
| 131 .calc-pad { |
| 132 background-color: #222; |
| 133 width: 241px; |
| 134 height: 168px; |
| 135 padding-top: 4px; |
| 136 padding-bottom: 4px; |
| 137 cursor: default; |
| 138 } |
| 139 |
| 140 .calc-row { |
| 141 color: #ffffff; |
| 142 font-size: 25pt; |
| 143 font-family: arial; |
| 144 font-weight: bold; |
| 145 padding-top: 2px; |
| 146 padding-left: 12px; |
| 147 } |
| 148 |
| 149 .calc-num { |
| 150 padding-left: 8px; |
| 151 padding-right: 8px; |
| 152 margin-right: 11px; |
| 153 cursor: pointer; |
| 154 } |
| 155 |
| 156 .calc-period { |
| 157 padding-left: 7px; |
| 158 padding-right: 7px; |
| 159 margin-right: 11px; |
| 160 cursor: pointer; |
| 161 font-size: 24pt; |
| 162 } |
| 163 |
| 164 .calc-op-button { |
| 165 padding-left: 12px; |
| 166 padding-right: 19px; |
| 167 color: #808080; |
| 168 font-size: 20pt; |
| 169 vertical-align: middle; |
| 170 } |
| 171 |
| 172 .calc-num:hover { |
| 173 width: 100px; |
| 174 height: 100px; |
| 175 background: #d3d3d3; |
| 176 -moz-border-radius: 50px; |
| 177 -webkit-border-radius: 50px; |
| 178 border-radius: 50px; |
| 179 color: #000; |
| 180 } |
| 181 |
| 182 .calc-num-hover { |
| 183 width: 100px; |
| 184 height: 100px; |
| 185 background: #d3d3d3; |
| 186 -moz-border-radius: 50px; |
| 187 -webkit-border-radius: 50px; |
| 188 border-radius: 50px; |
| 189 color: #000; |
| 190 } |
| 191 |
| 192 .calc-num:active { |
| 193 width: 100px; |
| 194 height: 100px; |
| 195 background: #778899; |
| 196 -moz-border-radius: 50px; |
| 197 -webkit-border-radius: 50px; |
| 198 border-radius: 50px; |
| 199 color: #ffffff; |
| 200 } |
| 201 |
| 202 .calc-num-active { |
| 203 width: 100px; |
| 204 height: 100px; |
| 205 background: #778899; |
| 206 -moz-border-radius: 50px; |
| 207 -webkit-border-radius: 50px; |
| 208 border-radius: 50px; |
| 209 color: #ffffff; |
| 210 } |
| 211 |
| 212 .calc-period:hover { |
| 213 width: 100px; |
| 214 height: 100px; |
| 215 background: #d3d3d3; |
| 216 -moz-border-radius: 50px; |
| 217 -webkit-border-radius: 50px; |
| 218 border-radius: 50px; |
| 219 color: #000; |
| 220 } |
| 221 |
| 222 .calc-period-hover { |
| 223 width: 100px; |
| 224 height: 100px; |
| 225 background: #d3d3d3; |
| 226 -moz-border-radius: 50px; |
| 227 -webkit-border-radius: 50px; |
| 228 border-radius: 50px; |
| 229 color: #000; |
| 230 } |
| 231 |
| 232 .calc-period:active { |
| 233 width: 100px; |
| 234 height: 100px; |
| 235 background: #778899; |
| 236 -moz-border-radius: 50px; |
| 237 -webkit-border-radius: 50px; |
| 238 border-radius: 50px; |
| 239 color: #ffffff; |
| 240 } |
| 241 |
| 242 .calc-period-active { |
| 243 width: 100px; |
| 244 height: 100px; |
| 245 background: #778899; |
| 246 -moz-border-radius: 50px; |
| 247 -webkit-border-radius: 50px; |
| 248 border-radius: 50px; |
| 249 color: #ffffff; |
| 250 } |
| 251 |
| 252 .calc-period-error { |
| 253 width: 100px; |
| 254 height: 100px; |
| 255 background: #cd5c5c; |
| 256 -moz-border-radius: 50px; |
| 257 -webkit-border-radius: 50px; |
| 258 border-radius: 50px; |
| 259 color: #b22222; |
| 260 } |
| 261 |
| 262 .op-plus-base { |
| 263 width: 35px; |
| 264 height: 35px; |
| 265 position: absolute; |
| 266 top: 185px; |
| 267 left: 158px; |
| 268 } |
| 269 |
| 270 .op-plus { |
| 271 background-image: url(plus.png); |
| 272 background-repeat: no-repeat; |
| 273 } |
| 274 |
| 275 .op-plus:hover { |
| 276 background-image: url(plus_black.png); |
| 277 background-repeat: no-repeat; |
| 278 background-color: #d3d3d3; |
| 279 -moz-border-radius: 50px; |
| 280 -webkit-border-radius: 20px; |
| 281 border-radius: 20px; |
| 282 background-position: center; |
| 283 } |
| 284 |
| 285 .op-plus-hover { |
| 286 background-image: url(plus_black.png); |
| 287 background-repeat: no-repeat; |
| 288 background-color: #d3d3d3; |
| 289 -moz-border-radius: 50px; |
| 290 -webkit-border-radius: 20px; |
| 291 border-radius: 20px; |
| 292 background-position: center; |
| 293 } |
| 294 |
| 295 .op-plus:active { |
| 296 background-image: url(plus_white.png); |
| 297 background-repeat: no-repeat; |
| 298 background-color: #778899; |
| 299 -moz-border-radius: 50px; |
| 300 -webkit-border-radius: 20px; |
| 301 border-radius: 20px; |
| 302 background-position: center; |
| 303 } |
| 304 |
| 305 .op-plus-active { |
| 306 background-image: url(plus_white.png); |
| 307 background-repeat: no-repeat; |
| 308 background-color: #778899; |
| 309 -moz-border-radius: 50px; |
| 310 -webkit-border-radius: 20px; |
| 311 border-radius: 20px; |
| 312 background-position: center; |
| 313 } |
| 314 |
| 315 .op-minus-base { |
| 316 width: 35px; |
| 317 height: 35px; |
| 318 position: absolute; |
| 319 top: 185px; |
| 320 left: 198px; |
| 321 } |
| 322 |
| 323 .op-minus { |
| 324 background-image: url(minus.png); |
| 325 background-repeat: no-repeat; |
| 326 } |
| 327 |
| 328 .op-minus:hover { |
| 329 background-image: url(minus_black.png); |
| 330 background-repeat: no-repeat; |
| 331 background-color: #d3d3d3; |
| 332 -moz-border-radius: 50px; |
| 333 -webkit-border-radius: 20px; |
| 334 border-radius: 20px; |
| 335 background-position: center; |
| 336 } |
| 337 |
| 338 .op-minus-hover { |
| 339 background-image: url(minus_black.png); |
| 340 background-repeat: no-repeat; |
| 341 background-color: #d3d3d3; |
| 342 -moz-border-radius: 50px; |
| 343 -webkit-border-radius: 20px; |
| 344 border-radius: 20px; |
| 345 background-position: center; |
| 346 } |
| 347 |
| 348 .op-minus:active { |
| 349 background-image: url(minus_white.png); |
| 350 background-repeat: no-repeat; |
| 351 background-color: #778899; |
| 352 -moz-border-radius: 50px; |
| 353 -webkit-border-radius: 20px; |
| 354 border-radius: 20px; |
| 355 background-position: center; |
| 356 } |
| 357 |
| 358 .op-minus-active { |
| 359 background-image: url(minus_white.png); |
| 360 background-repeat: no-repeat; |
| 361 background-color: #778899; |
| 362 -moz-border-radius: 50px; |
| 363 -webkit-border-radius: 20px; |
| 364 border-radius: 20px; |
| 365 background-position: center; |
| 366 } |
| 367 |
| 368 .op-mult-base { |
| 369 width: 35px; |
| 370 height: 35px; |
| 371 position: absolute; |
| 372 top: 228px; |
| 373 left: 158px; |
| 374 } |
| 375 |
| 376 .op-mult { |
| 377 background-image: url(mult.png); |
| 378 background-repeat: no-repeat; |
| 379 } |
| 380 |
| 381 .op-mult:hover { |
| 382 background-image: url(mult_black.png); |
| 383 background-repeat: no-repeat; |
| 384 background-color: #d3d3d3; |
| 385 -moz-border-radius: 50px; |
| 386 -webkit-border-radius: 20px; |
| 387 border-radius: 20px; |
| 388 background-position: center; |
| 389 } |
| 390 |
| 391 .op-mult-hover { |
| 392 background-image: url(mult_black.png); |
| 393 background-repeat: no-repeat; |
| 394 background-color: #d3d3d3; |
| 395 -moz-border-radius: 50px; |
| 396 -webkit-border-radius: 20px; |
| 397 border-radius: 20px; |
| 398 background-position: center; |
| 399 } |
| 400 |
| 401 .op-mult:active { |
| 402 background-image: url(mult_white.png); |
| 403 background-repeat: no-repeat; |
| 404 background-color: #778899; |
| 405 -moz-border-radius: 50px; |
| 406 -webkit-border-radius: 20px; |
| 407 border-radius: 20px; |
| 408 background-position: center; |
| 409 } |
| 410 |
| 411 .op-mult-active { |
| 412 background-image: url(mult_white.png); |
| 413 background-repeat: no-repeat; |
| 414 background-color: #778899; |
| 415 -moz-border-radius: 50px; |
| 416 -webkit-border-radius: 20px; |
| 417 border-radius: 20px; |
| 418 background-position: center; |
| 419 } |
| 420 |
| 421 .op-div-base { |
| 422 width: 35px; |
| 423 height: 35px; |
| 424 position: absolute; |
| 425 top: 228px; |
| 426 left: 198px; |
| 427 } |
| 428 |
| 429 .op-div { |
| 430 background-image: url(div.png); |
| 431 background-repeat: no-repeat; |
| 432 } |
| 433 |
| 434 .op-div:hover { |
| 435 background-image: url(div_black.png); |
| 436 background-repeat: no-repeat; |
| 437 background-color: #d3d3d3; |
| 438 -moz-border-radius: 50px; |
| 439 -webkit-border-radius: 20px; |
| 440 border-radius: 20px; |
| 441 background-position: center; |
| 442 } |
| 443 |
| 444 .op-div-hover { |
| 445 background-image: url(div_black.png); |
| 446 background-repeat: no-repeat; |
| 447 background-color: #d3d3d3; |
| 448 -moz-border-radius: 50px; |
| 449 -webkit-border-radius: 20px; |
| 450 border-radius: 20px; |
| 451 background-position: center; |
| 452 } |
| 453 |
| 454 .op-div:active { |
| 455 background-image: url(div_white.png); |
| 456 background-repeat: no-repeat; |
| 457 background-color: #778899; |
| 458 -moz-border-radius: 50px; |
| 459 -webkit-border-radius: 20px; |
| 460 border-radius: 20px; |
| 461 background-position: center; |
| 462 } |
| 463 |
| 464 .op-div-active { |
| 465 background-image: url(div_white.png); |
| 466 background-repeat: no-repeat; |
| 467 background-color: #778899; |
| 468 -moz-border-radius: 50px; |
| 469 -webkit-border-radius: 20px; |
| 470 border-radius: 20px; |
| 471 background-position: center; |
| 472 } |
| 473 |
| 474 .op-equal-base { |
| 475 width: 35px; |
| 476 height: 35px; |
| 477 position: absolute; |
| 478 top: 268px; |
| 479 left: 158px; |
| 480 } |
| 481 |
| 482 .op-equal { |
| 483 background-image: url(equal.png); |
| 484 background-repeat: no-repeat; |
| 485 } |
| 486 |
| 487 .op-equal:hover { |
| 488 background-image: url(equal_black.png); |
| 489 background-repeat: no-repeat; |
| 490 background-color: #d3d3d3; |
| 491 -moz-border-radius: 50px; |
| 492 -webkit-border-radius: 20px; |
| 493 border-radius: 20px; |
| 494 background-position: center; |
| 495 } |
| 496 |
| 497 .op-equal-hover { |
| 498 background-image: url(equal_black.png); |
| 499 background-repeat: no-repeat; |
| 500 background-color: #d3d3d3; |
| 501 -moz-border-radius: 50px; |
| 502 -webkit-border-radius: 20px; |
| 503 border-radius: 20px; |
| 504 background-position: center; |
| 505 } |
| 506 |
| 507 .op-equal:active { |
| 508 background-image: url(equal_white.png); |
| 509 background-repeat: no-repeat; |
| 510 background-color: #778899; |
| 511 -moz-border-radius: 50px; |
| 512 -webkit-border-radius: 20px; |
| 513 border-radius: 20px; |
| 514 background-position: center; |
| 515 } |
| 516 |
| 517 .op-equal-active { |
| 518 background-image: url(equal_white.png); |
| 519 background-repeat: no-repeat; |
| 520 background-color: #778899; |
| 521 -moz-border-radius: 50px; |
| 522 -webkit-border-radius: 20px; |
| 523 border-radius: 20px; |
| 524 background-position: center; |
| 525 } |
| 526 |
| 527 .op-arrow-base { |
| 528 width: 35px; |
| 529 height: 35px; |
| 530 position: absolute; |
| 531 top: 268px; |
| 532 left: 198px; |
| 533 } |
| 534 |
| 535 .op-arrow { |
| 536 background-image: url(arrow.png); |
| 537 background-repeat: no-repeat; |
| 538 } |
| 539 |
| 540 .op-arrow:hover { |
| 541 background-image: url(arrow_black.png); |
| 542 background-repeat: no-repeat; |
| 543 background-color: #d3d3d3; |
| 544 -moz-border-radius: 50px; |
| 545 -webkit-border-radius: 20px; |
| 546 border-radius: 20px; |
| 547 background-position: center; |
| 548 } |
| 549 |
| 550 .op-arrow-hover { |
| 551 background-image: url(arrow_black.png); |
| 552 background-repeat: no-repeat; |
| 553 background-color: #d3d3d3; |
| 554 -moz-border-radius: 50px; |
| 555 -webkit-border-radius: 20px; |
| 556 border-radius: 20px; |
| 557 background-position: center; |
| 558 } |
| 559 |
| 560 .op-arrow:active { |
| 561 background-image: url(arrow_white.png); |
| 562 background-repeat: no-repeat; |
| 563 background-color: #778899; |
| 564 -moz-border-radius: 50px; |
| 565 -webkit-border-radius: 20px; |
| 566 border-radius: 20px; |
| 567 background-position: center; |
| 568 } |
| 569 |
| 570 .op-arrow-active { |
| 571 background-image: url(arrow_white.png); |
| 572 background-repeat: no-repeat; |
| 573 background-color: #778899; |
| 574 -moz-border-radius: 50px; |
| 575 -webkit-border-radius: 20px; |
| 576 border-radius: 20px; |
| 577 background-position: center; |
| 578 } |
| 579 |
| 580 '''; |
| 581 |
| 582 // Stylesheet class selectors: |
| 583 String safeHTML(String html) { |
| 584 // TODO(terry): Escaping for XSS vulnerabilities TBD. |
| 585 return html; |
| 586 } |
| 587 } |
| 588 class ButtonPadUI { |
| 589 Map<String, Object> _scopes; |
| 590 Element _fragment; |
| 591 |
| 592 |
| 593 // Elements bound to a variable: |
| 594 var keySeven; |
| 595 var keyEight; |
| 596 var keyNine; |
| 597 var keyPlus; |
| 598 var keyMinus; |
| 599 var keyFour; |
| 600 var keyFive; |
| 601 var keySix; |
| 602 var keyStar; |
| 603 var keySlash; |
| 604 var keyOne; |
| 605 var keyTwo; |
| 606 var keyThree; |
| 607 var keyEqual; |
| 608 var keyClear; |
| 609 var keyZero; |
| 610 var keyDot; |
| 611 |
| 612 ButtonPadUI() : _scopes = new Map<String, Object>() { |
| 613 // Insure stylesheet for template exist in the document. |
| 614 add_calcui_templatesStyles(); |
| 615 |
| 616 _fragment = new DocumentFragment(); |
| 617 var e0 = new Element.html('<div class="button-pad"></div>'); |
| 618 _fragment.elements.add(e0); |
| 619 var e1 = new Element.html('<div class="button-row"></div>'); |
| 620 e0.elements.add(e1); |
| 621 keySeven = new Element.html('<span class="button-num">7</span>'); |
| 622 e1.elements.add(keySeven); |
| 623 keyEight = new Element.html('<span class="button-num">8</span>'); |
| 624 e1.elements.add(keyEight); |
| 625 keyNine = new Element.html('<span class="button-num">9</span>'); |
| 626 e1.elements.add(keyNine); |
| 627 keyPlus = new Element.html('<div class="buttonop-plus-base buttonop-plus"></
div>'); |
| 628 e1.elements.add(keyPlus); |
| 629 keyMinus = new Element.html('<div class="buttonop-minus-base buttonop-minus"
></div>'); |
| 630 e1.elements.add(keyMinus); |
| 631 var e2 = new Element.html('<div class="button-row"></div>'); |
| 632 e0.elements.add(e2); |
| 633 keyFour = new Element.html('<span class="button-num">4</span>'); |
| 634 e2.elements.add(keyFour); |
| 635 keyFive = new Element.html('<span class="button-num">5</span>'); |
| 636 e2.elements.add(keyFive); |
| 637 keySix = new Element.html('<span class="button-num">6</span>'); |
| 638 e2.elements.add(keySix); |
| 639 keyStar = new Element.html('<div class="buttonop-mult-base buttonop-mult"></
div>'); |
| 640 e2.elements.add(keyStar); |
| 641 keySlash = new Element.html('<div class="buttonop-div-base buttonop-div"></d
iv>'); |
| 642 e2.elements.add(keySlash); |
| 643 var e3 = new Element.html('<div class="button-row"></div>'); |
| 644 e0.elements.add(e3); |
| 645 keyOne = new Element.html('<span class="button-num">1</span>'); |
| 646 e3.elements.add(keyOne); |
| 647 keyTwo = new Element.html('<span class="button-num">2</span>'); |
| 648 e3.elements.add(keyTwo); |
| 649 keyThree = new Element.html('<span class="button-num">3</span>'); |
| 650 e3.elements.add(keyThree); |
| 651 keyEqual = new Element.html('<div class="buttonop-equal-base buttonop-equal"
></div>'); |
| 652 e3.elements.add(keyEqual); |
| 653 keyClear = new Element.html('<div class="buttonop-arrow-base buttonop-arrow"
></div>'); |
| 654 e3.elements.add(keyClear); |
| 655 var e4 = new Element.html('<div style="padding-top: 1px;" class="button-row"
></div>'); |
| 656 e0.elements.add(e4); |
| 657 keyZero = new Element.html('<span class="button-num">0</span>'); |
| 658 e4.elements.add(keyZero); |
| 659 keyDot = new Element.html('<span class="button-period"></span>'); |
| 660 e4.elements.add(keyDot); |
| 661 var e5 = new Element.html('<span style="font-size:9pt;"> </span>'
); |
| 662 keyDot.elements.add(e5); |
| 663 var e6 = new Text('.'); |
| 664 keyDot.elements.add(e6); |
| 665 var e7 = new Element.html('<span style="font-size:9pt;"> </span>'
); |
| 666 keyDot.elements.add(e7); |
| 667 } |
| 668 |
| 669 Element get root() => _fragment; |
| 670 |
| 671 // CSS class selectors for this template. |
| 672 static String get buttonPad() => "button-pad"; |
| 673 static String get buttonRow() => "button-row"; |
| 674 static String get buttonNum() => "button-num"; |
| 675 static String get buttonPeriod() => "button-period"; |
| 676 static String get buttonNumHover() => "button-num-hover"; |
| 677 static String get buttonNumActive() => "button-num-active"; |
| 678 static String get buttonPeriodHover() => "button-period-hover"; |
| 679 static String get buttonPeriodActive() => "button-period-active"; |
| 680 static String get buttonPeriodError() => "button-period-error"; |
| 681 static String get buttonopPlusBase() => "buttonop-plus-base"; |
| 682 static String get buttonopPlus() => "buttonop-plus"; |
| 683 static String get buttonopPlusHover() => "buttonop-plus-hover"; |
| 684 static String get buttonopPlusActive() => "buttonop-plus-active"; |
| 685 static String get buttonopMinusBase() => "buttonop-minus-base"; |
| 686 static String get buttonopMinus() => "buttonop-minus"; |
| 687 static String get buttonopMinusHover() => "buttonop-minus-hover"; |
| 688 static String get buttonopMinusActive() => "buttonop-minus-active"; |
| 689 static String get buttonopMultBase() => "buttonop-mult-base"; |
| 690 static String get buttonopMult() => "buttonop-mult"; |
| 691 static String get buttonopMultHover() => "buttonop-mult-hover"; |
| 692 static String get buttonopMultActive() => "buttonop-mult-active"; |
| 693 static String get buttonopDivBase() => "buttonop-div-base"; |
| 694 static String get buttonopDiv() => "buttonop-div"; |
| 695 static String get buttonopDivHover() => "buttonop-div-hover"; |
| 696 static String get buttonopDivActive() => "buttonop-div-active"; |
| 697 static String get buttonopEqualBase() => "buttonop-equal-base"; |
| 698 static String get buttonopEqual() => "buttonop-equal"; |
| 699 static String get buttonopEqualHover() => "buttonop-equal-hover"; |
| 700 static String get buttonopEqualActive() => "buttonop-equal-active"; |
| 701 static String get buttonopArrowBase() => "buttonop-arrow-base"; |
| 702 static String get buttonopArrow() => "buttonop-arrow"; |
| 703 static String get buttonopArrowHover() => "buttonop-arrow-hover"; |
| 704 static String get buttonopArrowActive() => "buttonop-arrow-active"; |
| 705 |
| 706 // Injection functions: |
| 707 // Each functions: |
| 708 |
| 709 // With functions: |
| 710 |
| 711 // CSS for this template. |
| 712 static final String stylesheet = ''' |
| 713 |
| 714 .button-pad { |
| 715 background-color: #F4F4F4; |
| 716 width: 241px; |
| 717 height: 168px; |
| 718 padding-top: 8px; |
| 719 padding-bottom: 4px; |
| 720 cursor: default; |
| 721 } |
| 722 |
| 723 .button-row { |
| 724 color: #444; |
| 725 font-size: 16pt; |
| 726 font-family: arial; |
| 727 font-weight: bold; |
| 728 padding-bottom: 10px; |
| 729 padding-left: 12px; |
| 730 margin-top: 5px; |
| 731 } |
| 732 |
| 733 .button-num { |
| 734 padding-left: 12px; |
| 735 padding-right: 12px; |
| 736 margin-right: 6px; |
| 737 cursor: pointer; |
| 738 border: 1px solid #808080; |
| 739 padding-top: 5px; |
| 740 padding-bottom: 6px; |
| 741 background-color: #FCFCFC; |
| 742 -moz-box-shadow: 1px 1px 1px 1px #ccc; |
| 743 -webkit-box-shadow: 1px 1px 1px 1px #ccc; |
| 744 box-shadow: 1px 1px 1px 1px #ccc; |
| 745 -moz-border-radius: 3px; |
| 746 -webkit-border-radius: 3px; |
| 747 border-radius: 3px; |
| 748 } |
| 749 |
| 750 .button-period { |
| 751 padding-left: 9px; |
| 752 padding-right: 8px; |
| 753 margin-right: 6px; |
| 754 cursor: pointer; |
| 755 border: 1px solid #808080; |
| 756 padding-top: 5px; |
| 757 padding-bottom: 6px; |
| 758 background-color: #FCFCFC; |
| 759 -moz-box-shadow: 1px 1px 1px 1px #ccc; |
| 760 -webkit-box-shadow: 1px 1px 1px 1px #ccc; |
| 761 box-shadow: 1px 1px 1px 1px #ccc; |
| 762 -moz-border-radius: 3px; |
| 763 -webkit-border-radius: 3px; |
| 764 border-radius: 3px; |
| 765 } |
| 766 |
| 767 .button-num:hover { |
| 768 width: 100px; |
| 769 height: 100px; |
| 770 background: #d3d3d3; |
| 771 color: #000; |
| 772 } |
| 773 |
| 774 .button-num-hover { |
| 775 width: 100px; |
| 776 height: 100px; |
| 777 background: #d3d3d3; |
| 778 color: #000; |
| 779 } |
| 780 |
| 781 .button-num:active { |
| 782 width: 100px; |
| 783 height: 100px; |
| 784 background: #778899; |
| 785 color: #ffffff; |
| 786 } |
| 787 |
| 788 .button-num-active { |
| 789 width: 100px; |
| 790 height: 100px; |
| 791 background: #778899; |
| 792 color: #ffffff; |
| 793 } |
| 794 |
| 795 .button-period:hover { |
| 796 width: 100px; |
| 797 height: 100px; |
| 798 background: #d3d3d3; |
| 799 color: #000; |
| 800 } |
| 801 |
| 802 .button-period-hover { |
| 803 width: 100px; |
| 804 height: 100px; |
| 805 background: #d3d3d3; |
| 806 color: #000; |
| 807 } |
| 808 |
| 809 .button-period:active { |
| 810 width: 100px; |
| 811 height: 100px; |
| 812 background: #778899; |
| 813 color: #ffffff; |
| 814 } |
| 815 |
| 816 .button-period-active { |
| 817 width: 100px; |
| 818 height: 100px; |
| 819 background: #778899; |
| 820 color: #ffffff; |
| 821 } |
| 822 |
| 823 .button-period-error { |
| 824 width: 100px; |
| 825 height: 100px; |
| 826 background: #cd5c5c; |
| 827 color: #b22222; |
| 828 } |
| 829 |
| 830 .buttonop-plus-base { |
| 831 width: 35px; |
| 832 height: 35px; |
| 833 position: absolute; |
| 834 top: 185px; |
| 835 left: 158px; |
| 836 } |
| 837 |
| 838 .buttonop-plus { |
| 839 background-image: url(plus.png); |
| 840 background-repeat: no-repeat; |
| 841 background-color: #DDD; |
| 842 border: 1px solid #808080; |
| 843 -moz-box-shadow: 1px 1px 1px 1px #CCC; |
| 844 -webkit-box-shadow: 1px 1px 1px 1px #CCC; |
| 845 box-shadow: 1px 1px 1px 1px #CCC; |
| 846 -moz-border-radius: 3px; |
| 847 -webkit-border-radius: 3px; |
| 848 border-radius: 3px; |
| 849 } |
| 850 |
| 851 .buttonop-plus:hover { |
| 852 background-image: url(plus_black.png); |
| 853 background-repeat: no-repeat; |
| 854 background-color: #EEE; |
| 855 background-position: center; |
| 856 } |
| 857 |
| 858 .buttonop-plus-hover { |
| 859 background-image: url(plus_black.png); |
| 860 background-repeat: no-repeat; |
| 861 background-color: #EEE; |
| 862 background-position: center; |
| 863 } |
| 864 |
| 865 .buttonop-plus:active { |
| 866 background-image: url(plus_white.png); |
| 867 background-repeat: no-repeat; |
| 868 background-color: #778899; |
| 869 background-position: center; |
| 870 } |
| 871 |
| 872 .buttonop-plus-active { |
| 873 background-image: url(plus_white.png); |
| 874 background-repeat: no-repeat; |
| 875 background-color: #778899; |
| 876 background-position: center; |
| 877 } |
| 878 |
| 879 .buttonop-minus-base { |
| 880 width: 35px; |
| 881 height: 35px; |
| 882 position: absolute; |
| 883 top: 185px; |
| 884 left: 201px; |
| 885 } |
| 886 |
| 887 .buttonop-minus { |
| 888 background-image: url(minus.png); |
| 889 background-repeat: no-repeat; |
| 890 background-color: #DDD; |
| 891 border: 1px solid #808080; |
| 892 -moz-box-shadow: 1px 1px 1px 1px #CCC; |
| 893 -webkit-box-shadow: 1px 1px 1px 1px #CCC; |
| 894 box-shadow: 1px 1px 1px 1px #CCC; |
| 895 -moz-border-radius: 3px; |
| 896 -webkit-border-radius: 3px; |
| 897 border-radius: 3px; |
| 898 } |
| 899 |
| 900 .buttonop-minus:hover { |
| 901 background-image: url(minus_black.png); |
| 902 background-repeat: no-repeat; |
| 903 background-color: #EEE; |
| 904 background-position: center; |
| 905 } |
| 906 |
| 907 .buttonop-minus-hover { |
| 908 background-image: url(minus_black.png); |
| 909 background-repeat: no-repeat; |
| 910 background-color: #EEE; |
| 911 background-position: center; |
| 912 } |
| 913 |
| 914 .buttonop-minus:active { |
| 915 background-image: url(minus_white.png); |
| 916 background-repeat: no-repeat; |
| 917 background-color: #778899; |
| 918 background-position: center; |
| 919 } |
| 920 |
| 921 .buttonop-minus-active { |
| 922 background-image: url(minus_white.png); |
| 923 background-repeat: no-repeat; |
| 924 background-color: #778899; |
| 925 background-position: center; |
| 926 } |
| 927 |
| 928 .buttonop-mult-base { |
| 929 width: 35px; |
| 930 height: 35px; |
| 931 position: absolute; |
| 932 top: 225px; |
| 933 left: 158px; |
| 934 } |
| 935 |
| 936 .buttonop-mult { |
| 937 background-image: url(mult.png); |
| 938 background-repeat: no-repeat; |
| 939 background-color: #DDD; |
| 940 border: 1px solid #808080; |
| 941 -moz-box-shadow: 1px 1px 1px 1px #CCC; |
| 942 -webkit-box-shadow: 1px 1px 1px 1px #CCC; |
| 943 box-shadow: 1px 1px 1px 1px #CCC; |
| 944 -moz-border-radius: 3px; |
| 945 -webkit-border-radius: 3px; |
| 946 border-radius: 3px; |
| 947 } |
| 948 |
| 949 .buttonop-mult:hover { |
| 950 background-image: url(mult_black.png); |
| 951 background-repeat: no-repeat; |
| 952 background-color: #EEE; |
| 953 background-position: center; |
| 954 } |
| 955 |
| 956 .buttonop-mult-hover { |
| 957 background-image: url(mult_black.png); |
| 958 background-repeat: no-repeat; |
| 959 background-color: #EEE; |
| 960 background-position: center; |
| 961 } |
| 962 |
| 963 .buttonop-mult:active { |
| 964 background-image: url(mult_white.png); |
| 965 background-repeat: no-repeat; |
| 966 background-color: #778899; |
| 967 background-position: center; |
| 968 } |
| 969 |
| 970 .buttonop-mult-active { |
| 971 background-image: url(mult_white.png); |
| 972 background-repeat: no-repeat; |
| 973 background-color: #778899; |
| 974 background-position: center; |
| 975 } |
| 976 |
| 977 .buttonop-div-base { |
| 978 width: 35px; |
| 979 height: 35px; |
| 980 position: absolute; |
| 981 top: 225px; |
| 982 left: 201px; |
| 983 } |
| 984 |
| 985 .buttonop-div { |
| 986 background-image: url(div.png); |
| 987 background-repeat: no-repeat; |
| 988 background-color: #DDD; |
| 989 border: 1px solid #808080; |
| 990 -moz-box-shadow: 1px 1px 1px 1px #CCC; |
| 991 -webkit-box-shadow: 1px 1px 1px 1px #CCC; |
| 992 box-shadow: 1px 1px 1px 1px #CCC; |
| 993 -moz-border-radius: 3px; |
| 994 -webkit-border-radius: 3px; |
| 995 border-radius: 3px; |
| 996 } |
| 997 |
| 998 .buttonop-div:hover { |
| 999 background-image: url(div_black.png); |
| 1000 background-repeat: no-repeat; |
| 1001 background-color: #EEE; |
| 1002 background-position: center; |
| 1003 } |
| 1004 |
| 1005 .buttonop-div-hover { |
| 1006 background-image: url(div_black.png); |
| 1007 background-repeat: no-repeat; |
| 1008 background-color: #EEE; |
| 1009 background-position: center; |
| 1010 } |
| 1011 |
| 1012 .buttonop-div:active { |
| 1013 background-image: url(div_white.png); |
| 1014 background-repeat: no-repeat; |
| 1015 background-color: #778899; |
| 1016 background-position: center; |
| 1017 } |
| 1018 |
| 1019 .buttonop-div-active { |
| 1020 background-image: url(div_white.png); |
| 1021 background-repeat: no-repeat; |
| 1022 background-color: #778899; |
| 1023 background-position: center; |
| 1024 } |
| 1025 |
| 1026 .buttonop-equal-base { |
| 1027 width: 35px; |
| 1028 height: 35px; |
| 1029 position: absolute; |
| 1030 top: 266px; |
| 1031 left: 158px; |
| 1032 } |
| 1033 |
| 1034 .buttonop-equal { |
| 1035 background-image: url(equal.png); |
| 1036 background-repeat: no-repeat; |
| 1037 background-color: #DDD; |
| 1038 border: 1px solid #808080; |
| 1039 -moz-box-shadow: 1px 1px 1px 1px #CCC; |
| 1040 -webkit-box-shadow: 1px 1px 1px 1px #CCC; |
| 1041 box-shadow: 1px 1px 1px 1px #CCC; |
| 1042 -moz-border-radius: 3px; |
| 1043 -webkit-border-radius: 3px; |
| 1044 border-radius: 3px; |
| 1045 } |
| 1046 |
| 1047 .buttonop-equal:hover { |
| 1048 background-image: url(equal_black.png); |
| 1049 background-repeat: no-repeat; |
| 1050 background-color: #EEE; |
| 1051 background-position: center; |
| 1052 } |
| 1053 |
| 1054 .buttonop-equal-hover { |
| 1055 background-image: url(equal_black.png); |
| 1056 background-repeat: no-repeat; |
| 1057 background-color: #EEE; |
| 1058 background-position: center; |
| 1059 } |
| 1060 |
| 1061 .buttonop-equal:active { |
| 1062 background-image: url(equal_white.png); |
| 1063 background-repeat: no-repeat; |
| 1064 background-color: #778899; |
| 1065 background-position: center; |
| 1066 } |
| 1067 |
| 1068 .buttonop-equal-active { |
| 1069 background-image: url(equal_white.png); |
| 1070 background-repeat: no-repeat; |
| 1071 background-color: #778899; |
| 1072 background-position: center; |
| 1073 } |
| 1074 |
| 1075 .buttonop-arrow-base { |
| 1076 width: 35px; |
| 1077 height: 35px; |
| 1078 position: absolute; |
| 1079 top: 266px; |
| 1080 left: 201px; |
| 1081 } |
| 1082 |
| 1083 .buttonop-arrow { |
| 1084 background-image: url(arrow.png); |
| 1085 background-repeat: no-repeat; |
| 1086 background-color: #DDD; |
| 1087 border: 1px solid #808080; |
| 1088 -moz-box-shadow: 1px 1px 1px 1px #CCC; |
| 1089 -webkit-box-shadow: 1px 1px 1px 1px #CCC; |
| 1090 box-shadow: 1px 1px 1px 1px #CCC; |
| 1091 -moz-border-radius: 3px; |
| 1092 -webkit-border-radius: 3px; |
| 1093 border-radius: 3px; |
| 1094 } |
| 1095 |
| 1096 .buttonop-arrow:hover { |
| 1097 background-image: url(arrow_black.png); |
| 1098 background-repeat: no-repeat; |
| 1099 background-color: #EEE; |
| 1100 background-position: center; |
| 1101 } |
| 1102 |
| 1103 .buttonop-arrow-hover { |
| 1104 background-image: url(arrow_black.png); |
| 1105 background-repeat: no-repeat; |
| 1106 background-color: #EEE; |
| 1107 background-position: center; |
| 1108 } |
| 1109 |
| 1110 .buttonop-arrow:active { |
| 1111 background-image: url(arrow_white.png); |
| 1112 background-repeat: no-repeat; |
| 1113 background-color: #778899; |
| 1114 background-position: center; |
| 1115 } |
| 1116 |
| 1117 .buttonop-arrow-active { |
| 1118 background-image: url(arrow_white.png); |
| 1119 background-repeat: no-repeat; |
| 1120 background-color: #778899; |
| 1121 background-position: center; |
| 1122 } |
| 1123 |
| 1124 '''; |
| 1125 |
| 1126 // Stylesheet class selectors: |
| 1127 String safeHTML(String html) { |
| 1128 // TODO(terry): Escaping for XSS vulnerabilities TBD. |
| 1129 return html; |
| 1130 } |
| 1131 } |
| 1132 class SettingsDialog { |
| 1133 Map<String, Object> _scopes; |
| 1134 Element _fragment; |
| 1135 |
| 1136 |
| 1137 // Elements bound to a variable: |
| 1138 var settings; |
| 1139 var settingsDialog; |
| 1140 var simpleTitle; |
| 1141 var simple; |
| 1142 var buttonTitle; |
| 1143 var buttons; |
| 1144 |
| 1145 SettingsDialog() : _scopes = new Map<String, Object>() { |
| 1146 // Insure stylesheet for template exist in the document. |
| 1147 add_calcui_templatesStyles(); |
| 1148 |
| 1149 _fragment = new DocumentFragment(); |
| 1150 var e0 = new Element.html('<div></div>'); |
| 1151 _fragment.elements.add(e0); |
| 1152 settings = new Element.html('<div class="setting-glyph"></div>'); |
| 1153 e0.elements.add(settings); |
| 1154 settingsDialog = new Element.html('<div class="dialog" style="visibility: hi
dden;"></div>'); |
| 1155 e0.elements.add(settingsDialog); |
| 1156 var e1 = new Element.html('<div class="dlg-area"></div>'); |
| 1157 settingsDialog.elements.add(e1); |
| 1158 var e2 = new Element.html('<div class="dlg-subtitle">Theme:</div>'); |
| 1159 e1.elements.add(e2); |
| 1160 simpleTitle = new Element.html('<div style="cursor: pointer;"></div>'); |
| 1161 e1.elements.add(simpleTitle); |
| 1162 simple = new Element.html('<input class="dlg-item" name="theme" type="radio"
></input>'); |
| 1163 simpleTitle.elements.add(simple); |
| 1164 var e3 = new Element.html('<span>Simple</span>'); |
| 1165 simpleTitle.elements.add(e3); |
| 1166 buttonTitle = new Element.html('<div style="cursor: pointer;"></div>'); |
| 1167 e1.elements.add(buttonTitle); |
| 1168 buttons = new Element.html('<input class="dlg-item" name="theme" type="radio
"></input>'); |
| 1169 buttonTitle.elements.add(buttons); |
| 1170 var e4 = new Element.html('<span>Buttons</span>'); |
| 1171 buttonTitle.elements.add(e4); |
| 1172 } |
| 1173 |
| 1174 Element get root() => _fragment; |
| 1175 |
| 1176 // CSS class selectors for this template. |
| 1177 static String get settingGlyph() => "setting-glyph"; |
| 1178 static String get dialog() => "dialog"; |
| 1179 static String get dlgArea() => "dlg-area"; |
| 1180 static String get dlgItem() => "dlg-item"; |
| 1181 static String get dlgSubtitle() => "dlg-subtitle"; |
| 1182 static String get expressionInput() => "expression-input"; |
| 1183 |
| 1184 // Injection functions: |
| 1185 // Each functions: |
| 1186 |
| 1187 // With functions: |
| 1188 |
| 1189 // CSS for this template. |
| 1190 static final String stylesheet = ''' |
| 1191 |
| 1192 .setting-glyph { |
| 1193 position: absolute; |
| 1194 left: 239px; |
| 1195 top: 10px; |
| 1196 background-image: url(settings.png); |
| 1197 background-repeat: no-repeat; |
| 1198 width: 2px; |
| 1199 height: 20px; |
| 1200 z-index: 1000; |
| 1201 padding-left: 2px; |
| 1202 padding-right: 2px; |
| 1203 background-color: transparent; |
| 1204 border-color: transparent; |
| 1205 border-style: solid; |
| 1206 border-top-width: 1px; |
| 1207 border-left-width: 0px; |
| 1208 border-right-width: 3px; |
| 1209 border-bottom-width: 2px; |
| 1210 cursor: pointer; |
| 1211 } |
| 1212 |
| 1213 .setting-glyph:hover { |
| 1214 background-color: #333 !important; |
| 1215 } |
| 1216 |
| 1217 .dialog { |
| 1218 font-size: 10pt; |
| 1219 font-weight: normal; |
| 1220 margin-top: 26px; |
| 1221 position: absolute; |
| 1222 left: 14px; |
| 1223 background-color: #d3d3d3; |
| 1224 width: 227px; |
| 1225 padding-bottom: 3px; |
| 1226 border: 1px solid #000; |
| 1227 } |
| 1228 |
| 1229 .dlg-area { |
| 1230 margin-left: 25px; |
| 1231 } |
| 1232 |
| 1233 .dlg-item { |
| 1234 margin-left: 10px; |
| 1235 cursor: pointer; |
| 1236 } |
| 1237 |
| 1238 .dlg-subtitle { |
| 1239 font-weight: bold; |
| 1240 margin-top: 3px; |
| 1241 } |
| 1242 |
| 1243 .expression-input { |
| 1244 width: 205px; |
| 1245 font-family: arial; |
| 1246 font-weight: bold; |
| 1247 } |
| 1248 |
| 1249 '''; |
| 1250 |
| 1251 // Stylesheet class selectors: |
| 1252 String safeHTML(String html) { |
| 1253 // TODO(terry): Escaping for XSS vulnerabilities TBD. |
| 1254 return html; |
| 1255 } |
| 1256 } |
| 1257 class TapeUI { |
| 1258 Map<String, Object> _scopes; |
| 1259 Element _fragment; |
| 1260 |
| 1261 |
| 1262 // Elements bound to a variable: |
| 1263 var tape; |
| 1264 |
| 1265 TapeUI() : _scopes = new Map<String, Object>() { |
| 1266 // Insure stylesheet for template exist in the document. |
| 1267 add_calcui_templatesStyles(); |
| 1268 |
| 1269 _fragment = new DocumentFragment(); |
| 1270 tape = new Element.html('<div class="calculator-tape"></div>'); |
| 1271 _fragment.elements.add(tape); |
| 1272 } |
| 1273 |
| 1274 String lineBreak() { |
| 1275 return '''<div class="clear-line"></div>'''; |
| 1276 } |
| 1277 |
| 1278 String clearCalculation() { |
| 1279 return '''<div class="clear-calc"></div>'''; |
| 1280 } |
| 1281 |
| 1282 String firstOp(displayedOp, number) { |
| 1283 return '''<span style="font-family: courier;">${displayedOp}</span>${number}
'''; |
| 1284 } |
| 1285 |
| 1286 String displayOpAndNumber(opAsStr, number) { |
| 1287 return '''<div id="activeInput" class="alignleft"><span style="font-family:
courier;">${opAsStr}</span>${number}</div>'''; |
| 1288 } |
| 1289 |
| 1290 String displayOp(opAsStr) { |
| 1291 return '''<div id="activeInput" class="alignleft"><span style="font-family:
courier;">${opAsStr}</span></div>'''; |
| 1292 } |
| 1293 |
| 1294 String displayEqual() { |
| 1295 return '''<div class="alignleft"><span style="font-family: courier;"> &
nbsp;</span></div>'''; |
| 1296 } |
| 1297 |
| 1298 String alignSubTotal() { |
| 1299 return '''<div class="alignright"></div>'''; |
| 1300 } |
| 1301 |
| 1302 String displayTotal(formattedTotal) { |
| 1303 return '''<div class="alignright">= ${formattedTotal}</div>'''; |
| 1304 } |
| 1305 |
| 1306 String displayActiveTotal() { |
| 1307 return '''<div id="activeTotal" class="alignright"></div>'''; |
| 1308 } |
| 1309 |
| 1310 String displayError(err) { |
| 1311 return '''<div class="error">${err}</div>'''; |
| 1312 } |
| 1313 |
| 1314 String replaceActiveOp(value) { |
| 1315 return '''<div class="alignleft">${value}</div>'''; |
| 1316 } |
| 1317 |
| 1318 String replaceActiveTotal(value) { |
| 1319 return '''<div class="alignright">${value}</div>'''; |
| 1320 } |
| 1321 |
| 1322 Element get root() => _fragment; |
| 1323 |
| 1324 // CSS class selectors for this template. |
| 1325 static String get calculatorTape() => "calculator-tape"; |
| 1326 static String get alignleft() => "alignleft"; |
| 1327 static String get alignright() => "alignright"; |
| 1328 static String get clearLine() => "clear-line"; |
| 1329 static String get clearCalc() => "clear-calc"; |
| 1330 static String get error() => "error"; |
| 1331 static String get total() => "total"; |
| 1332 |
| 1333 // Injection functions: |
| 1334 // Each functions: |
| 1335 |
| 1336 // With functions: |
| 1337 |
| 1338 // CSS for this template. |
| 1339 static final String stylesheet = ''' |
| 1340 |
| 1341 .calculator-tape { |
| 1342 height: 7em; |
| 1343 font-size: 18pt; |
| 1344 color: #000; |
| 1345 background-color: #ffffff; |
| 1346 width: 229px; |
| 1347 border: 1px #000 solid; |
| 1348 font-family: arial; |
| 1349 font-weight: bolder; |
| 1350 padding-right: 2px; |
| 1351 padding-left: 8px; |
| 1352 overflow-y: auto; |
| 1353 } |
| 1354 |
| 1355 .calculator-tape::-webkit-scrollbar { |
| 1356 width: 0px; |
| 1357 } |
| 1358 |
| 1359 .alignleft { |
| 1360 float: left; |
| 1361 } |
| 1362 |
| 1363 .alignright { |
| 1364 float: right; |
| 1365 color: #d3d3d3; |
| 1366 padding-right: 4px; |
| 1367 } |
| 1368 |
| 1369 .clear-line { |
| 1370 clear: both; |
| 1371 } |
| 1372 |
| 1373 .clear-calc { |
| 1374 clear: both; |
| 1375 border-bottom: 1px solid #d3d3d3; |
| 1376 margin-bottom: 5px; |
| 1377 height: 5px; |
| 1378 } |
| 1379 |
| 1380 .error { |
| 1381 clear: both; |
| 1382 background-color: #ff0000; |
| 1383 color: #ffffff; |
| 1384 margin-bottom: 5px; |
| 1385 font-size: 10pt; |
| 1386 } |
| 1387 |
| 1388 .total { |
| 1389 clear: both; |
| 1390 border-bottom: 1px solid #d3d3d3; |
| 1391 margin-bottom: 5px; |
| 1392 } |
| 1393 |
| 1394 '''; |
| 1395 |
| 1396 // Stylesheet class selectors: |
| 1397 String safeHTML(String html) { |
| 1398 // TODO(terry): Escaping for XSS vulnerabilities TBD. |
| 1399 return html; |
| 1400 } |
| 1401 } |
| 1402 |
| 1403 |
| 1404 // Inject all templates stylesheet once into the head. |
| 1405 bool calcui_stylesheet_added = false; |
| 1406 void add_calcui_templatesStyles() { |
| 1407 if (!calcui_stylesheet_added) { |
| 1408 StringBuffer styles = new StringBuffer(); |
| 1409 |
| 1410 // All templates stylesheet. |
| 1411 styles.add(FlatPadUI.stylesheet); |
| 1412 styles.add(ButtonPadUI.stylesheet); |
| 1413 styles.add(SettingsDialog.stylesheet); |
| 1414 styles.add(TapeUI.stylesheet); |
| 1415 |
| 1416 calcui_stylesheet_added = true; |
| 1417 document.head.elements.add(new Element.html('<style>${styles.toString()}</st
yle>')); |
| 1418 } |
| 1419 } |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 10010009:
Calculator App for ChromeOS with fixes for templates/CSS to support this application. (Closed)
Base URL: https://dart.googlecode.com/svn/branches/bleeding_edge/dart
