Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(84)

Unified Diff: polymer_1.0.4/bower_components/paper-tooltip/paper-tooltip.html

Issue 1264073002: Update polymer 1.0 install to pick up newly added elements. (Closed) Base URL: https://chromium.googlesource.com/infra/third_party/npm_modules.git@master
Patch Set: Update bower file to match actual versions. Created 5 years, 5 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
Index: polymer_1.0.4/bower_components/paper-tooltip/paper-tooltip.html
diff --git a/polymer_1.0.4/bower_components/paper-tooltip/paper-tooltip.html b/polymer_1.0.4/bower_components/paper-tooltip/paper-tooltip.html
new file mode 100644
index 0000000000000000000000000000000000000000..3bdd4a0d2bec1d98fedd8b5ea7131f2bb132faa7
--- /dev/null
+++ b/polymer_1.0.4/bower_components/paper-tooltip/paper-tooltip.html
@@ -0,0 +1,210 @@
+<!--
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+
+
+<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../neon-animation/neon-animation-runner-behavior.html">
+<link rel="import" href="../neon-animation/animations/fade-in-animation.html">
+<link rel="import" href="../neon-animation/animations/fade-out-animation.html">
+<!--
+
+`<paper-tooltip>` is a label that appears on hover and focus when the user
+hovers over an element with the cursor or with the keyboard. It will be centered
+to an anchor element specified in the `for` attribute, or, if that doesn't exist,
+centered to the parent node containing it.
+
+Example:
+
+ <div style="display:inline-block">
+ <button>Click me!</button>
+ <paper-tooltip>Tooltip text</paper-tooltip>
+ </div>
+
+ <div>
+ <button id="btn">Click me!</button>
+ <paper-tooltip for="btn">Tooltip text</paper-tooltip>
+ </div>
+
+### Styling
+
+The following custom properties and mixins are available for styling:
+
+Custom property | Description | Default
+----------------|-------------|----------
+`--paper-tooltip-background` | The background color of the tooltip | `#616161`
+`--paper-tooltip-opacity` | The opacity of the tooltip | `0.9`
+`--paper-tooltip-text-color` | The text color of the tooltip | `white`
+`--paper-tooltip` | Mixin applied to the tooltip | `{}`
+
+@group Paper Elements
+@element paper-tooltip
+@demo demo/index.html
+-->
+
+<dom-module id="paper-tooltip">
+ <style>
+ :host {
+ display: block;
+ position: absolute;
+ outline: none;
+ }
+
+ #tooltip {
+ outline: none;
+ @apply(--paper-font-common-base);
+ font-size: 10px;
+
+ background-color: var(--paper-tooltip-background, #616161);
+ opacity: var(--paper-tooltip-opacity, 0.9);
+ color: var(--paper-tooltip-text-color, white);
+
+ padding: 8px;
+ border-radius: 2px;
+ z-index: 1002;
+
+ @apply(--paper-tooltip);
+ }
+ </style>
+ <template>
+ <div id="tooltip" hidden>
+ <content></content>
+ </div>
+ </template>
+ <script>
+ Polymer({
+ is: 'paper-tooltip',
+
+ hostAttributes: {
+ role: 'tooltip',
+ tabindex: -1
+ },
+
+ behaviors: [
+ Polymer.NeonAnimationRunnerBehavior
+ ],
+
+ properties: {
+ /**
+ * The id of the element that the tooltip is anchored to. This element
+ * must be a sibling of the tooltip.
+ */
+ for: {
+ type: String
+ },
+
+ /**
+ * The spacing between the top of the tooltip and the element it is
+ * anchored to.
+ */
+ marginTop: {
+ type: Number,
+ value: 14
+ },
+
+ animationConfig: {
+ type: Object,
+ value: function() {
+ return {
+ 'entry': [{
+ name: 'fade-in-animation',
+ node: this,
+ timing: {delay: 500}
+ }],
+ 'exit': [{
+ name: 'fade-out-animation',
+ node: this
+ }]
+ }
+ }
+ },
+
+ _showing: {
+ type: Boolean,
+ value: false
+ }
+ },
+
+ listeners: {
+ 'neon-animation-finish': '_onAnimationFinish'
+ },
+
+ /**
+ * Returns the target element that this tooltip is anchored to. It is
+ * either the element given by the `for` attribute, or the immediate parent
+ * of the tooltip.
+ */
+ get target () {
+ var ownerRoot = Polymer.dom(this).getOwnerRoot();
+ var parentNode = Polymer.dom(this).parentNode;
+ var target;
+
+ if (this.for) {
+ target = parentNode.querySelector('#' + this.for);
+ } else if (parentNode.nodeType == 11) { // DOCUMENT_FRAGMENT_NODE
+ target = ownerRoot.host;
+ } else {
+ target = parentNode;
+ }
+
+ return target;
+ },
+
+ attached: function() {
+ this._target = this.target;
+
+ this.listen(this._target, 'mouseenter', 'show');
+ this.listen(this._target, 'focus', 'show');
+ this.listen(this._target, 'mouseleave', 'hide');
+ this.listen(this._target, 'blur', 'hide');
+ },
+
+ detached: function() {
+ if (this._target) {
+ this.unlisten(this._target, 'mouseenter', 'show');
+ this.unlisten(this._target, 'focus', 'show');
+ this.unlisten(this._target, 'mouseleave', 'hide');
+ this.unlisten(this._target, 'blur', 'hide');
+ }
+ },
+
+ show: function() {
+ this.$.tooltip.hidden = false;
+ this._setPosition();
+ this._showing = true;
+
+ this.playAnimation('entry');
+ },
+
+ hide: function() {
+ this._showing = false;
+ this.playAnimation('exit');
+ },
+
+ _setPosition: function() {
+ if (!this._target)
+ return;
+
+ var parentRect = this.offsetParent.getBoundingClientRect();
+ var targetRect = this._target.getBoundingClientRect();
+ var thisRect = this.getBoundingClientRect();
+
+ var centerOffset = (targetRect.width - thisRect.width) / 2;
+
+ this.style.left = targetRect.left - parentRect.left + centerOffset + 'px';
+ this.style.top = targetRect.top - parentRect.top + targetRect.height + this.marginTop + 'px';
+ },
+
+ _onAnimationFinish: function() {
+ if (!this._showing) {
+ this.$.tooltip.hidden = true;
+ }
+ },
+ })
+ </script>
+</dom-module>
« no previous file with comments | « polymer_1.0.4/bower_components/paper-tooltip/index.html ('k') | polymer_1.0.4/bower_components/paper-tooltip/test/basic.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698