| OLD | NEW |
|---|
| (Empty) | |
| 1 <!-- |
| 2 Copyright 2013 The Polymer Authors. All rights reserved. |
| 3 Use of this source code is governed by a BSD-style |
| 4 license that can be found in the LICENSE file. |
| 5 --> |
| 6 <!-- |
| 7 /** |
| 8 * @module Polymer UI Elements |
| 9 */ |
| 10 /** |
| 11 * polymer-ui-arrow is styled to look like an arrow. |
| 12 * |
| 13 * Example: |
| 14 * |
| 15 * <polymer-ui-arrow direction="up" size="20"></polymer-ui-arrow> |
| 16 * |
| 17 * @class polymer-ui-arrow |
| 18 */ |
| 19 --> |
| 20 <link rel="import" href="../polymer/polymer.html"> |
| 21 |
| 22 <polymer-element name="polymer-ui-arrow" attributes="direction size color border
Color borderWidth"> |
| 23 <template> |
| 24 <link rel="stylesheet" href="polymer-ui-arrow.css"> |
| 25 <div id="outer" class="arrow arrow-outer"></div> |
| 26 <div id="inner" class="arrow arrow-inner"></div> |
| 27 </template> |
| 28 <script> |
| 29 Polymer('polymer-ui-arrow', { |
| 30 borders: { |
| 31 up: 'Bottom', |
| 32 down: 'Top', |
| 33 left: 'Right', |
| 34 right: 'Left' |
| 35 }, |
| 36 tops: { |
| 37 up: 1, |
| 38 down: -1, |
| 39 left: 0, |
| 40 right: 0 |
| 41 }, |
| 42 lefts: { |
| 43 up: 0, |
| 44 down: 0, |
| 45 left: 1, |
| 46 right: -1 |
| 47 }, |
| 48 /** |
| 49 * Direction of the arrow. Possible values are 'up', 'down', 'left' |
| 50 * and 'right'. |
| 51 * |
| 52 * @attribute direction |
| 53 * @type string |
| 54 * @default 'up' |
| 55 */ |
| 56 direction: 'up', |
| 57 /** |
| 58 * Size of the arrow. |
| 59 * |
| 60 * @attribute size |
| 61 * @type number |
| 62 * @default 10 |
| 63 */ |
| 64 size: 10, |
| 65 /** |
| 66 * Color of the arrow. |
| 67 * |
| 68 * @attribute color |
| 69 * @type string |
| 70 * @default '#fff' |
| 71 */ |
| 72 color: '#fff', |
| 73 /** |
| 74 * Border color. |
| 75 * |
| 76 * @attribute borderColor |
| 77 * @type string |
| 78 * @default '#ccc' |
| 79 */ |
| 80 borderColor: '#ccc', |
| 81 /** |
| 82 * Arrow border width. |
| 83 * |
| 84 * @attribute borderWidth |
| 85 * @type number |
| 86 * @default 1 |
| 87 */ |
| 88 borderWidth: 1, |
| 89 ready: function() { |
| 90 this.asyncUpdate(); |
| 91 }, |
| 92 directionChanged: function() { |
| 93 this.asyncUpdate(); |
| 94 }, |
| 95 sizeChanged: function() { |
| 96 this.asyncUpdate(); |
| 97 }, |
| 98 colorChanged: function() { |
| 99 this.asyncUpdate(); |
| 100 }, |
| 101 borderColorChanged: function() { |
| 102 this.asyncUpdate(); |
| 103 }, |
| 104 borderWidthChanged: function() { |
| 105 this.asyncUpdate(); |
| 106 }, |
| 107 asyncUpdate: function() { |
| 108 this.updateJob = this.job(this.updateJob, this.update, 1); |
| 109 }, |
| 110 update: function() { |
| 111 var os = this.$.outer.style; |
| 112 var is = this.$.inner.style; |
| 113 os.borderWidth = this.size + 'px'; |
| 114 is.borderWidth = this.size + 'px'; |
| 115 os.borderColor = 'transparent'; |
| 116 is.borderColor = 'transparent'; |
| 117 var bc = 'border' + this.borders[this.direction] + 'Color'; |
| 118 os[bc] = this.borderColor; |
| 119 is[bc] = this.color; |
| 120 is.top = this.tops[this.direction] * this.borderWidth + 'px'; |
| 121 is.left = this.lefts[this.direction] * this.borderWidth + 'px'; |
| 122 } |
| 123 }); |
| 124 </script> |
| 125 </polymer-element> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 175443005:
[polymer] import all elements (Closed)
Base URL: https://dart.googlecode.com/svn/branches/bleeding_edge/dart