diff options
| author | Mitch Riedstra <Mitch@riedstra.us> | 2017-10-24 16:59:48 -0400 |
|---|---|---|
| committer | Mitch Riedstra <Mitch@riedstra.us> | 2017-10-24 16:59:48 -0400 |
| commit | 3e8b34be2fdeccf16c8b46f1ee518f970853768d (patch) | |
| tree | abcb7d0cb260790a2b4a746e3959f2e7ee3a33f7 /app/dispatch/static/materialize/js/character_counter.js | |
| parent | 4ee5893fd9c82228c62306fc7f5babdfc602e4c4 (diff) | |
| download | dispatch-tracker-3e8b34be2fdeccf16c8b46f1ee518f970853768d.tar.gz dispatch-tracker-3e8b34be2fdeccf16c8b46f1ee518f970853768d.tar.xz | |
Adding in materialize source and templates
Diffstat (limited to 'app/dispatch/static/materialize/js/character_counter.js')
| -rw-r--r-- | app/dispatch/static/materialize/js/character_counter.js | 72 |
1 files changed, 72 insertions, 0 deletions
diff --git a/app/dispatch/static/materialize/js/character_counter.js b/app/dispatch/static/materialize/js/character_counter.js new file mode 100644 index 0000000..5a36cdf --- /dev/null +++ b/app/dispatch/static/materialize/js/character_counter.js @@ -0,0 +1,72 @@ +(function ($) {
+
+ $.fn.characterCounter = function(){
+ return this.each(function(){
+ var $input = $(this);
+ var $counterElement = $input.parent().find('span[class="character-counter"]');
+
+ // character counter has already been added appended to the parent container
+ if ($counterElement.length) {
+ return;
+ }
+
+ var itHasLengthAttribute = $input.attr('data-length') !== undefined;
+
+ if(itHasLengthAttribute){
+ $input.on('input', updateCounter);
+ $input.on('focus', updateCounter);
+ $input.on('blur', removeCounterElement);
+
+ addCounterElement($input);
+ }
+
+ });
+ };
+
+ function updateCounter(){
+ var maxLength = +$(this).attr('data-length'),
+ actualLength = +$(this).val().length,
+ isValidLength = actualLength <= maxLength;
+
+ $(this).parent().find('span[class="character-counter"]')
+ .html( actualLength + '/' + maxLength);
+
+ addInputStyle(isValidLength, $(this));
+ }
+
+ function addCounterElement($input) {
+ var $counterElement = $input.parent().find('span[class="character-counter"]');
+
+ if ($counterElement.length) {
+ return;
+ }
+
+ $counterElement = $('<span/>')
+ .addClass('character-counter')
+ .css('float','right')
+ .css('font-size','12px')
+ .css('height', 1);
+
+ $input.parent().append($counterElement);
+ }
+
+ function removeCounterElement(){
+ $(this).parent().find('span[class="character-counter"]').html('');
+ }
+
+ function addInputStyle(isValidLength, $input){
+ var inputHasInvalidClass = $input.hasClass('invalid');
+ if (isValidLength && inputHasInvalidClass) {
+ $input.removeClass('invalid');
+ }
+ else if(!isValidLength && !inputHasInvalidClass){
+ $input.removeClass('valid');
+ $input.addClass('invalid');
+ }
+ }
+
+ $(document).ready(function(){
+ $('input, textarea').characterCounter();
+ });
+
+}( jQuery ));
|