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

Unified Diff: third_party/polymer/components/paper-input/paper-input.html

Issue 592603004: Revert "Polymer elements added to third_party/polymer." (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Created 6 years, 3 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: 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">&nbsp;</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 += '&nbsp';
- }
- 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>
« no previous file with comments | « third_party/polymer/components/paper-input/paper-input.css ('k') | third_party/polymer/components/paper-item/.bower.json » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698