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

Side by Side 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, 6 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 unified diff | Download patch
OLDNEW
1 <!-- 1 <!--
2 @license 2 @license
3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
4 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt 4 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt
5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt 5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
6 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt 6 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt
7 Code distributed by Google as part of the polymer project is also 7 Code distributed by Google as part of the polymer project is also
8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt 8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt
9 --> 9 -->
10 10
11 <link rel="import" href="../polymer/polymer.html"> 11 <link rel="import" href="../polymer/polymer.html">
12 <link rel="import" href="../paper-styles/paper-styles.html"> 12 <link rel="import" href="../paper-styles/paper-styles.html">
13 <link rel="import" href="paper-input-addon-behavior.html">
13 14
14 <!-- 15 <!--
15 `<paper-input-char-counter>` is a character counter for use with `<paper-input-c ontainer>`. 16 `<paper-input-char-counter>` is a character counter for use with `<paper-input-c ontainer>`. It
17 shows the number of characters entered in the input and the max length if it is specified.
18
19 <paper-input-container>
20 <input is="iron-input" maxlength="20">
21 <paper-input-char-counter></paper-input-char-counter>
22 </paper-input-container>
23
24 ### Styling
25
26 The following mixin is available for styling:
27
28 Custom property | Description | Default
29 ----------------|-------------|----------
30 `--paper-input-char-counter` | Mixin applied to the element | `{}`
16 --> 31 -->
17 <dom-module id="paper-input-char-counter"> 32 <dom-module id="paper-input-char-counter">
18 33
19 <style> 34 <style>
20 35
21 :host { 36 :host {
22 display: inline-block; 37 display: inline-block;
23 float: right; 38 float: right;
24 39
25 mixin(--paper-input-container-add-on); 40 @apply(--paper-font-caption);
26 mixin(--paper-input-container-add-on-font); 41 @apply(--paper-input-char-counter);
27
28 mixin(--paper-input-char-counter);
29 } 42 }
30 43
31 </style> 44 </style>
32 45
33 <template> 46 <template>
34 47
35 <span>[[charCounter]]</span> 48 <span>[[_charCounterStr]]</span>
36 49
37 </template> 50 </template>
38 51
39 </dom-module> 52 </dom-module>
40 53
41 <script> 54 <script>
42 55
43 (function() { 56 (function() {
44 57
45 Polymer({ 58 Polymer({
46 59
47 is: 'paper-input-char-counter', 60 is: 'paper-input-char-counter',
48 61
49 enableCustomStyleProperties: true, 62 behaviors: [
50 63 Polymer.PaperInputAddonBehavior
51 hostAttributes: { 64 ],
52 'add-on': ''
53 },
54 65
55 properties: { 66 properties: {
56 67
57 /** 68 _charCounterStr: {
58 * The associated input element. 69 type: String,
59 */ 70 value: '0'
60 inputElement: {
61 type: Object
62 },
63
64 /**
65 * The current value of the input element.
66 */
67 value: {
68 type: String
69 },
70
71 /**
72 * The character counter string.
73 */
74 charCounter: {
75 computed: '_computeCharCounter(inputElement,value)',
76 type: String
77 } 71 }
78 72
79 }, 73 },
80 74
81 attached: function() { 75 update: function(state) {
82 this.fire('addon-attached'); 76 if (!state.inputElement) {
83 }, 77 return;
78 }
84 79
85 _computeCharCounter: function(inputElement,value) { 80 state.value = state.value || '';
86 var str = value.length; 81
87 if (inputElement.hasAttribute('maxlength')) { 82 // Account for the textarea's new lines.
88 str += '/' + inputElement.maxLength; 83 var str = state.value.replace(/(\r\n|\n|\r)/g, '--').length;
84
85 if (state.inputElement.hasAttribute('maxlength')) {
86 str += '/' + state.inputElement.getAttribute('maxlength');
89 } 87 }
90 return str; 88 this._charCounterStr = str;
91 } 89 }
92 90
93 }); 91 });
94 92
95 })(); 93 })();
96 94
97 </script> 95 </script>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698