Index: third_party/polymer/components/paper-input/paper-input.html |
diff --git a/third_party/polymer/components/paper-input/paper-input.html b/third_party/polymer/components/paper-input/paper-input.html |
deleted file mode 100644 |
index 613cca64af7bfdaf30c510f334a0fdc569a6d07f..0000000000000000000000000000000000000000 |
--- a/third_party/polymer/components/paper-input/paper-input.html |
+++ /dev/null |
@@ -1,433 +0,0 @@ |
-<!-- |
-Copyright (c) 2014 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 |
-The complete set of authors may be found at http://polymer.github.io/AUTHORS |
-The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS |
-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 |
---> |
- |
-<!-- |
-`paper-input` is a single- or multi-line text field where user can enter input. |
-It can optionally have a label. |
- |
-Example: |
- |
- <paper-input label="Your Name"></paper-input> |
- <paper-input multiline label="Enter multiple lines here"></paper-input> |
- |
-Theming |
--------- |
- |
-Set `CoreStyle.g.paperInput.focusedColor` and `CoreStyle.g.paperInput.invalidColor` to theme |
-the focused and invalid states. |
- |
-@group Paper Elements |
-@element paper-input |
-@extends core-input |
-@homepage github.io |
---> |
-<link href="../polymer/polymer.html" rel="import"> |
-<link href="../core-input/core-input.html" rel="import"> |
-<link href="../core-style/core-style.html" rel="import"> |
- |
-<core-style id="paper-input"> |
- |
-#label.focused, |
-#floatedLabel.focused { |
- color: {{g.paperInput.focusedColor}}; |
-} |
- |
-#underlineHighlight.focused, |
-#caretInner { |
- background-color: {{g.paperInput.focusedColor}}; |
-} |
- |
-#error, |
-:host(.invalid) #label.focused, |
-:host(.invalid) #floatedLabel.focused { |
- color: {{g.paperInput.invalidColor}}; |
-} |
-:host(.invalid) #underlineHighlight.focused, |
-:host(.invalid) #caretInner { |
- background-color: {{g.paperInput.invalidColor}}; |
-} |
- |
-</core-style> |
- |
-<polymer-element name="paper-input" extends="core-input" attributes="label floatingLabel maxRows error" on-down="{{downAction}}" on-up="{{upAction}}"> |
- |
- <template> |
- |
- <link href="paper-input.css" rel="stylesheet"> |
- |
- <core-style ref="paper-input"></core-style> |
- |
- <div id="floatedLabel" class="hidden" hidden?="{{!floatingLabel}}"><span id="floatedLabelSpan">{{label}}</span></div> |
- |
- <div id="container" on-transitionend="{{transitionEndAction}}" on-webkitTransitionEnd="{{transitionEndAction}}"> |
- |
- <div id="label"><span id="labelSpan">{{label}}</span></div> |
- |
- <div id="inputContainer"> |
- |
- <div id="inputClone"> |
- <span id="inputCloneSpan" aria-hidden="true"> </span> |
- </div> |
- |
- <template if="{{multiline}}"> |
- <div id="minInputHeight"></div> |
- <div id="maxInputHeight"></div> |
- </template> |
- |
- <shadow></shadow> |
- |
- </div> |
- |
- <div id="underlineContainer"> |
- <div id="underline"></div> |
- <div id="underlineHighlight" class="focusedColor"></div> |
- </div> |
- |
- <div id="caret"> |
- <div id="caretInner" class="focusedColor"></div> |
- </div> |
- |
- </div> |
- |
- <div id="errorContainer"> |
- <div id="error" role="alert" aria-hidden="{{!invalid}}">{{error || validationMessage}}</div> |
- <div id="errorIcon"></div> |
- </div> |
- |
- </template> |
- |
- <script> |
- |
- (function() { |
- |
- var paperInput = CoreStyle.g.paperInput = CoreStyle.g.paperInput || {}; |
- paperInput.focusedColor = '#4059a9'; |
- paperInput.invalidColor = '#d34336'; |
- |
- Polymer('paper-input', { |
- |
- /** |
- * The label for this input. It normally appears as grey text inside |
- * the text input and disappears once the user enters text. |
- * |
- * @attribute label |
- * @type string |
- * @default '' |
- */ |
- label: '', |
- |
- /** |
- * If true, the label will "float" above the text input once the |
- * user enters text instead of disappearing. |
- * |
- * @attribute floatingLabel |
- * @type boolean |
- * @default false |
- */ |
- floatingLabel: false, |
- |
- /** |
- * (multiline only) If set to a non-zero value, the height of this |
- * text input will grow with the value changes until it is maxRows |
- * rows tall. If the maximum size does not fit the value, the text |
- * input will scroll internally. |
- * |
- * @attribute maxRows |
- * @type number |
- * @default 0 |
- */ |
- maxRows: 0, |
- |
- /** |
- * The message to display if the input value fails validation. If this |
- * is unset or the empty string, a default message is displayed depending |
- * on the type of validation error. |
- * |
- * @attribute error |
- * @type string |
- */ |
- error: '', |
- |
- focused: false, |
- pressed: false, |
- |
- attached: function() { |
- if (this.multiline) { |
- this.resizeInput(); |
- window.requestAnimationFrame(function() { |
- this.$.underlineContainer.classList.add('animating'); |
- }.bind(this)); |
- } |
- }, |
- |
- resizeInput: function() { |
- var height = this.$.inputClone.getBoundingClientRect().height; |
- var bounded = this.maxRows > 0 || this.rows > 0; |
- if (bounded) { |
- var minHeight = this.$.minInputHeight.getBoundingClientRect().height; |
- var maxHeight = this.$.maxInputHeight.getBoundingClientRect().height; |
- height = Math.max(minHeight, Math.min(height, maxHeight)); |
- } |
- this.$.inputContainer.style.height = height + 'px'; |
- this.$.underlineContainer.style.top = height + 'px'; |
- }, |
- |
- prepareLabelTransform: function() { |
- var toRect = this.$.floatedLabelSpan.getBoundingClientRect(); |
- var fromRect = this.$.labelSpan.getBoundingClientRect(); |
- if (toRect.width !== 0) { |
- this.$.label.cachedTransform = 'scale(' + (toRect.width / fromRect.width) + ') ' + |
- 'translateY(' + (toRect.bottom - fromRect.bottom) + 'px)'; |
- } |
- }, |
- |
- toggleLabel: function(force) { |
- var v = force !== undefined ? force : this.inputValue; |
- |
- if (!this.floatingLabel) { |
- this.$.label.classList.toggle('hidden', v); |
- } |
- |
- if (this.floatingLabel && !this.focused) { |
- this.$.label.classList.toggle('hidden', v); |
- this.$.floatedLabel.classList.toggle('hidden', !v); |
- } |
- }, |
- |
- rowsChanged: function() { |
- if (this.multiline && !isNaN(parseInt(this.rows))) { |
- this.$.minInputHeight.innerHTML = ''; |
- for (var i = 0; i < this.rows; i++) { |
- this.$.minInputHeight.appendChild(document.createElement('br')); |
- } |
- this.resizeInput(); |
- } |
- }, |
- |
- maxRowsChanged: function() { |
- if (this.multiline && !isNaN(parseInt(this.maxRows))) { |
- this.$.maxInputHeight.innerHTML = ''; |
- for (var i = 0; i < this.maxRows; i++) { |
- this.$.maxInputHeight.appendChild(document.createElement('br')); |
- } |
- this.resizeInput(); |
- } |
- }, |
- |
- inputValueChanged: function() { |
- this.super(); |
- |
- if (this.multiline) { |
- var escaped = this.inputValue.replace(/\n/gm, '<br>'); |
- if (!escaped || escaped.lastIndexOf('<br>') === escaped.length - 4) { |
- escaped += ' '; |
- } |
- this.$.inputCloneSpan.innerHTML = escaped; |
- this.resizeInput(); |
- } |
- |
- this.toggleLabel(); |
- }, |
- |
- labelChanged: function() { |
- if (this.floatingLabel && this.$.floatedLabel && this.$.label) { |
- // If the element is created programmatically, labelChanged is called before |
- // binding. Run the measuring code in async so the DOM is ready. |
- this.async(function() { |
- this.prepareLabelTransform(); |
- }); |
- } |
- }, |
- |
- placeholderChanged: function() { |
- this.label = this.placeholder; |
- }, |
- |
- inputFocusAction: function() { |
- if (!this.pressed) { |
- if (this.floatingLabel) { |
- this.$.floatedLabel.classList.remove('hidden'); |
- this.$.floatedLabel.classList.add('focused'); |
- this.$.floatedLabel.classList.add('focusedColor'); |
- } |
- this.$.label.classList.add('hidden'); |
- this.$.underlineHighlight.classList.add('focused'); |
- this.$.caret.classList.add('focused'); |
- |
- this.super(arguments); |
- } |
- this.focused = true; |
- }, |
- |
- shouldFloatLabel: function() { |
- // if type = number, the input value is the empty string until a valid number |
- // is entered so we must do some hacks here |
- return this.inputValue || (this.type === 'number' && !this.validity.valid); |
- }, |
- |
- inputBlurAction: function() { |
- this.super(arguments); |
- |
- this.$.underlineHighlight.classList.remove('focused'); |
- this.$.caret.classList.remove('focused'); |
- |
- if (this.floatingLabel) { |
- this.$.floatedLabel.classList.remove('focused'); |
- this.$.floatedLabel.classList.remove('focusedColor'); |
- if (!this.shouldFloatLabel()) { |
- this.$.floatedLabel.classList.add('hidden'); |
- } |
- } |
- |
- // type = number hack. see core-input for more info |
- if (!this.shouldFloatLabel()) { |
- this.$.label.classList.remove('hidden'); |
- this.$.label.classList.add('animating'); |
- this.async(function() { |
- this.$.label.style.webkitTransform = 'none'; |
- this.$.label.style.transform = 'none'; |
- }); |
- } |
- |
- this.focused = false; |
- }, |
- |
- downAction: function(e) { |
- if (this.disabled) { |
- return; |
- } |
- |
- if (this.focused) { |
- return; |
- } |
- |
- this.pressed = true; |
- var rect = this.$.underline.getBoundingClientRect(); |
- var right = e.x - rect.left; |
- this.$.underlineHighlight.style.webkitTransformOriginX = right + 'px'; |
- this.$.underlineHighlight.style.transformOriginX = right + 'px'; |
- this.$.underlineHighlight.classList.remove('focused'); |
- this.underlineAsync = this.async(function() { |
- this.$.underlineHighlight.classList.add('pressed'); |
- }, null, 200); |
- |
- // No caret animation if there is text in the input. |
- if (!this.inputValue) { |
- this.$.caret.classList.remove('focused'); |
- } |
- }, |
- |
- upAction: function(e) { |
- if (this.disabled) { |
- return; |
- } |
- |
- if (!this.pressed) { |
- return; |
- } |
- |
- // if a touchevent caused the up, the synthentic mouseevents will blur |
- // the input, make sure to prevent those from being generated. |
- if (e._source === 'touch') { |
- e.preventDefault(); |
- } |
- |
- if (this.underlineAsync) { |
- clearTimeout(this.underlineAsync); |
- this.underlineAsync = null; |
- } |
- |
- // Focus the input here to bring up the virtual keyboard. |
- this.$.input.focus(); |
- this.pressed = false; |
- this.animating = true; |
- |
- this.$.underlineHighlight.classList.remove('pressed'); |
- this.$.underlineHighlight.classList.add('animating'); |
- this.async(function() { |
- this.$.underlineHighlight.classList.add('focused'); |
- }); |
- |
- // No caret animation if there is text in the input. |
- if (!this.inputValue) { |
- this.$.caret.classList.add('animating'); |
- this.async(function() { |
- this.$.caret.classList.add('focused'); |
- }, null, 100); |
- } |
- |
- if (this.floatingLabel) { |
- this.$.label.classList.add('focusedColor'); |
- this.$.label.classList.add('animating'); |
- if (!this.$.label.cachedTransform) { |
- this.prepareLabelTransform(); |
- } |
- this.$.label.style.webkitTransform = this.$.label.cachedTransform; |
- this.$.label.style.transform = this.$.label.cachedTransform; |
- } |
- }, |
- |
- keydownAction: function() { |
- this.super(); |
- |
- // more type = number hacks. see core-input for more info |
- if (this.type === 'number') { |
- this.async(function() { |
- if (!this.inputValue) { |
- this.toggleLabel(!this.validity.valid); |
- } |
- }); |
- } |
- }, |
- |
- keypressAction: function() { |
- if (this.animating) { |
- this.transitionEndAction(); |
- } |
- }, |
- |
- transitionEndAction: function(e) { |
- this.animating = false; |
- if (this.pressed) { |
- return; |
- } |
- |
- if (this.focused) { |
- |
- if (this.floatingLabel || this.inputValue) { |
- this.$.label.classList.add('hidden'); |
- } |
- |
- if (this.floatingLabel) { |
- this.$.label.classList.remove('focusedColor'); |
- this.$.label.classList.remove('animating'); |
- this.$.floatedLabel.classList.remove('hidden'); |
- this.$.floatedLabel.classList.add('focused'); |
- this.$.floatedLabel.classList.add('focusedColor'); |
- } |
- |
- this.async(function() { |
- this.$.underlineHighlight.classList.remove('animating'); |
- this.$.caret.classList.remove('animating'); |
- }, null, 100); |
- |
- } else { |
- |
- this.$.label.classList.remove('animating'); |
- |
- } |
- } |
- |
- }); |
- |
- }()); |
- |
- </script> |
- |
-</polymer-element> |