| OLD | NEW |
| (Empty) |
| 1 | |
| 2 (function() { | |
| 3 | |
| 4 var proto = { | |
| 5 | |
| 6 /** | |
| 7 * A simple string label for the tooltip to display. To display a rich | |
| 8 * HTML tooltip instead, omit `label` and include the `tip` attribute | |
| 9 * on a child node of `core-tooltip`. | |
| 10 * | |
| 11 * @attribute label | |
| 12 * @type string | |
| 13 * @default null | |
| 14 */ | |
| 15 label: null, | |
| 16 | |
| 17 eventDelegates: { | |
| 18 'core-resize': 'positionChanged' | |
| 19 }, | |
| 20 | |
| 21 computed: { | |
| 22 // Indicates whether the tooltip has a set label propety or | |
| 23 // an element with the `tip` attribute. | |
| 24 hasTooltipContent: 'label || !!tipElement' | |
| 25 }, | |
| 26 | |
| 27 publish: { | |
| 28 /** | |
| 29 * Forces the tooltip to display. If `disabled` is set, this property is
ignored. | |
| 30 * | |
| 31 * @attribute show | |
| 32 * @type boolean | |
| 33 * @default false | |
| 34 */ | |
| 35 show: {value: false, reflect: true}, | |
| 36 | |
| 37 /** | |
| 38 * Positions the tooltip to the top, right, bottom, left of its content. | |
| 39 * | |
| 40 * @attribute position | |
| 41 * @type string | |
| 42 * @default 'bottom' | |
| 43 */ | |
| 44 position: {value: 'bottom', reflect: true}, | |
| 45 | |
| 46 /** | |
| 47 * If true, the tooltip an arrow pointing towards the content. | |
| 48 * | |
| 49 * @attribute noarrow | |
| 50 * @type boolean | |
| 51 * @default false | |
| 52 */ | |
| 53 noarrow: {value: false, reflect: true} | |
| 54 }, | |
| 55 | |
| 56 /** | |
| 57 * Customizes the attribute used to specify which content | |
| 58 * is the rich HTML tooltip. | |
| 59 * | |
| 60 * @attribute tipAttribute | |
| 61 * @type string | |
| 62 * @default 'tip' | |
| 63 */ | |
| 64 tipAttribute: 'tip', | |
| 65 | |
| 66 attached: function() { | |
| 67 this.updatedChildren(); | |
| 68 this.resizableAttachedHandler(); | |
| 69 }, | |
| 70 | |
| 71 detached: function() { | |
| 72 this.resizableDetachedHandler(); | |
| 73 }, | |
| 74 | |
| 75 updatedChildren: function () { | |
| 76 this.tipElement = null; | |
| 77 | |
| 78 for (var i = 0, el; el = this.$.c.getDistributedNodes()[i]; ++i) { | |
| 79 if (el.hasAttribute && el.hasAttribute('tip')) { | |
| 80 this.tipElement = el; | |
| 81 break; | |
| 82 } | |
| 83 } | |
| 84 | |
| 85 // Job ensures we're not double calling setPosition() on DOM attach. | |
| 86 this.job('positionJob', this.setPosition); | |
| 87 | |
| 88 // Monitor children to re-position tooltip when light dom changes. | |
| 89 this.onMutation(this, this.updatedChildren); | |
| 90 }, | |
| 91 | |
| 92 labelChanged: function(oldVal, newVal) { | |
| 93 this.job('positionJob', this.setPosition); | |
| 94 }, | |
| 95 | |
| 96 positionChanged: function(oldVal, newVal) { | |
| 97 this.job('positionJob', this.setPosition); | |
| 98 }, | |
| 99 | |
| 100 setPosition: function() { | |
| 101 var controlWidth = this.clientWidth; | |
| 102 var controlHeight = this.clientHeight; | |
| 103 var toolTipWidth = this.$.tooltip.clientWidth; | |
| 104 var toolTipHeight = this.$.tooltip.clientHeight; | |
| 105 | |
| 106 switch (this.position) { | |
| 107 case 'top': | |
| 108 case 'bottom': | |
| 109 this.$.tooltip.style.left = (controlWidth - toolTipWidth) / 2 + 'px'
; | |
| 110 this.$.tooltip.style.top = null; | |
| 111 break; | |
| 112 case 'left': | |
| 113 case 'right': | |
| 114 this.$.tooltip.style.left = null; | |
| 115 this.$.tooltip.style.top = (controlHeight - toolTipHeight) / 2 + 'px
'; | |
| 116 break; | |
| 117 } | |
| 118 } | |
| 119 | |
| 120 }; | |
| 121 | |
| 122 Polymer.mixin2(proto, Polymer.CoreFocusable); | |
| 123 Polymer.mixin(proto, Polymer.CoreResizable); | |
| 124 Polymer('core-tooltip',proto); | |
| 125 })(); | |
| 126 | |
| OLD | NEW |