1<!--
2Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
3This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE
4The complete set of authors may be found at http://polymer.github.io/AUTHORS
5The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
6Code distributed by Google as part of the polymer project is also
7subject to an additional IP rights grant found at http://polymer.github.io/PATENTS
8-->
9
10<!--
11
12Material Design: <a href="http://www.google.com/design/spec/components/text-fields.html#text-fields-character-counter">Character counter</a>
13
14`paper-char-counter` adds a character counter for paper input fields with a character restriction in place.
15
16Example:
17
18    <paper-input-decorator>
19      <input id="input1" is="core-input" maxlength="5">
20      <paper-char-counter class="footer" target="input1"></paper-char-counter>
21    </paper-input-decorator>
22
23Theming
24-------
25
26`paper-char-counter` uses `paper-input-decorator`'s error `core-style` for global theming.
27
28@group Paper Elements
29@element paper-char-counter
30@homepage github.io
31-->
32<link href="../polymer/polymer.html" rel="import">
33<link href="../core-style/core-style.html" rel="import">
34
35<core-style id="paper-char-counter">
36:host(.invalid) {
37  color: {{g.paperInput.invalidColor}};
38}
39</core-style>
40
41<polymer-element name="paper-char-counter">
42
43<template>
44
45  <style>
46    :host {
47      display: inline-block;
48      float: right;
49      color: #757575;
50      font-size: 0.75em;
51      padding: 0.5em 0 0.5em 0.5em;
52    }
53  </style>
54
55  <core-style ref="paper-char-counter"></core-style>
56
57  <div class="counter-text" aria-hidden="true" hidden?="{{!showCounter || !_maxChars}}">
58    <span>{{_charCount}} / {{_maxChars}}</span>
59  </div>
60
61</template>
62
63<script>
64
65  Polymer({
66
67    publish: {
68      /**
69       * The id of the textinput or textarea that should be monitored.
70       *
71       * @attribute target
72       * @type string
73       * @default null
74       */
75      target: null,
76
77      /**
78       * If false, don't show the character counter. Used in conjunction with
79       * `paper-input-decorator's` `error` field.
80       *
81       * @attribute showCounter
82       * @type boolean
83       * @default true
84       */
85      showCounter: true
86    },
87
88    /* Number of characters in the current input */
89    _charCount: 0,
90
91    /* Equal to the target element's maxLength attribute. */
92    _maxChars: 0,
93
94    /* True if the number of characters in the input exceeds _maxChars */
95    _isCounterInvalid: false,
96
97    ready: function() {
98      if (!this.target)
99        return;
100      var targetElement = document.getElementById(this.target);
101      this._maxChars = targetElement.maxLength;
102      targetElement.addEventListener('input', this.inputAction.bind(this));
103		},
104
105    inputAction: function(e) {
106      this._charCount = e.target.value.length;
107      this._isCounterInvalid = this._maxChars && this._charCount >= this._maxChars;
108    },
109
110    _isCounterInvalidChanged: function() {
111      debugger
112      this.classList.toggle('invalid', this._isCounterInvalid);
113      this.fire('char-counter-error',
114                {"hasError": this._isCounterInvalid,
115                 "hideErrorIcon": this.showCounter});
116    }
117  });
118
119</script>
120
121</polymer-element>
122