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

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

Issue 1162563004: Upgrade to 1.0 and switch clients to dom-repeat where needed. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Fix a layout import and remove the gzipped webanimation in reproduce.sh Created 5 years, 7 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/v0_8/components/paper-input/paper-input-char-counter.html
diff --git a/third_party/polymer/v0_8/components/paper-input/paper-input-char-counter.html b/third_party/polymer/v0_8/components/paper-input/paper-input-char-counter.html
index 38c3c77beb3f2ef807e3f89ab6dd10ddf84d9c53..566f8c63ff82e6de5de06cc60968c1afe4204f5b 100644
--- a/third_party/polymer/v0_8/components/paper-input/paper-input-char-counter.html
+++ b/third_party/polymer/v0_8/components/paper-input/paper-input-char-counter.html
@@ -10,9 +10,24 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../paper-styles/paper-styles.html">
+<link rel="import" href="paper-input-addon-behavior.html">
<!--
-`<paper-input-char-counter>` is a character counter for use with `<paper-input-container>`.
+`<paper-input-char-counter>` is a character counter for use with `<paper-input-container>`. It
+shows the number of characters entered in the input and the max length if it is specified.
+
+ <paper-input-container>
+ <input is="iron-input" maxlength="20">
+ <paper-input-char-counter></paper-input-char-counter>
+ </paper-input-container>
+
+### Styling
+
+The following mixin is available for styling:
+
+Custom property | Description | Default
+----------------|-------------|----------
+`--paper-input-char-counter` | Mixin applied to the element | `{}`
-->
<dom-module id="paper-input-char-counter">
@@ -22,17 +37,15 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
display: inline-block;
float: right;
- mixin(--paper-input-container-add-on);
- mixin(--paper-input-container-add-on-font);
-
- mixin(--paper-input-char-counter);
+ @apply(--paper-font-caption);
+ @apply(--paper-input-char-counter);
}
</style>
<template>
- <span>[[charCounter]]</span>
+ <span>[[_charCounterStr]]</span>
</template>
@@ -46,48 +59,33 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
is: 'paper-input-char-counter',
- enableCustomStyleProperties: true,
-
- hostAttributes: {
- 'add-on': ''
- },
+ behaviors: [
+ Polymer.PaperInputAddonBehavior
+ ],
properties: {
- /**
- * The associated input element.
- */
- inputElement: {
- type: Object
- },
-
- /**
- * The current value of the input element.
- */
- value: {
- type: String
- },
-
- /**
- * The character counter string.
- */
- charCounter: {
- computed: '_computeCharCounter(inputElement,value)',
- type: String
+ _charCounterStr: {
+ type: String,
+ value: '0'
}
},
- attached: function() {
- this.fire('addon-attached');
- },
+ update: function(state) {
+ if (!state.inputElement) {
+ return;
+ }
+
+ state.value = state.value || '';
+
+ // Account for the textarea's new lines.
+ var str = state.value.replace(/(\r\n|\n|\r)/g, '--').length;
- _computeCharCounter: function(inputElement,value) {
- var str = value.length;
- if (inputElement.hasAttribute('maxlength')) {
- str += '/' + inputElement.maxLength;
+ if (state.inputElement.hasAttribute('maxlength')) {
+ str += '/' + state.inputElement.getAttribute('maxlength');
}
- return str;
+ this._charCounterStr = str;
}
});

Powered by Google App Engine
This is Rietveld 408576698