first commit

assets/plugin/maxlength/bootstrap-maxlength.js

@@ -0,0 +1,501 @@
+(function ($) {
+  'use strict';
+  /**
+   * We need an event when the elements are destroyed
+   * because if an input is removed, we have to remove the
+   * maxlength object associated (if any).
+   * From:
+   * http://stackoverflow.com/questions/2200494/jquery-trigger-event-when-an-element-is-removed-from-the-dom
+   */
+  if (!$.event.special.destroyed) {
+    $.event.special.destroyed = {
+      remove: function (o) {
+        if (o.handler) {
+          o.handler();
+        }
+      }
+    };
+  }
+
+
+  $.fn.extend({
+    maxlength: function (options, callback) {
+      var documentBody = $('body'),
+        defaults = {
+          showOnReady: false, // true to always show when indicator is ready
+          alwaysShow: false, // if true the indicator it's always shown.
+          threshold: 10, // Represents how many chars left are needed to show up the counter
+          warningClass: 'label label-success',
+          limitReachedClass: 'label label-important label-danger',
+          separator: ' / ',
+          preText: '',
+          postText: '',
+          showMaxLength: true,
+          placement: 'bottom',
+          message: null, // an alternative way to provide the message text
+          showCharsTyped: true, // show the number of characters typed and not the number of characters remaining
+          validate: false, // if the browser doesn't support the maxlength attribute, attempt to type more than
+          // the indicated chars, will be prevented.
+          utf8: false, // counts using bytesize rather than length. eg: '£' is counted as 2 characters.
+          appendToParent: false, // append the indicator to the input field's parent instead of body
+          twoCharLinebreak: true,  // count linebreak as 2 characters to match IE/Chrome textarea validation. As well as DB storage.
+          allowOverMax: false  // false = use maxlength attribute and browswer functionality.
+          // true = removes maxlength attribute and replaces with 'data-bs-mxl'.
+          // Form submit validation is handled on your own.  when maxlength has been exceeded 'overmax' class added to element
+        };
+
+      if ($.isFunction(options) && !callback) {
+        callback = options;
+        options = {};
+      }
+      options = $.extend(defaults, options);
+
+      /**
+      * Return the length of the specified input.
+      *
+      * @param input
+      * @return {number}
+      */
+      function inputLength(input) {
+        var text = input.val();
+
+        if (options.twoCharLinebreak) {
+          // Count all line breaks as 2 characters
+          text = text.replace(/\r(?!\n)|\n(?!\r)/g, '\r\n');
+        } else {
+          // Remove all double-character (\r\n) linebreaks, so they're counted only once.
+          text = text.replace(new RegExp('\r?\n', 'g'), '\n');
+        }
+
+        var currentLength = 0;
+
+        if (options.utf8) {
+          currentLength = utf8Length(text);
+        } else {
+          currentLength = text.length;
+        }
+        return currentLength;
+      }
+
+      /**
+      * Truncate the text of the specified input.
+      *
+      * @param input
+      * @param limit
+      */
+      function truncateChars(input, maxlength) {
+        var text = input.val();
+        var newlines = 0;
+
+        if (options.twoCharLinebreak) {
+          text = text.replace(/\r(?!\n)|\n(?!\r)/g, '\r\n');
+
+          if (text.substr(text.length - 1) === '\n' && text.length % 2 === 1) {
+            newlines = 1;
+          }
+        }
+
+        input.val(text.substr(0, maxlength - newlines));
+      }
+
+      /**
+      * Return the length of the specified input in UTF8 encoding.
+      *
+      * @param input
+      * @return {number}
+      */
+      function utf8Length(string) {
+        var utf8length = 0;
+        for (var n = 0; n < string.length; n++) {
+          var c = string.charCodeAt(n);
+          if (c < 128) {
+            utf8length++;
+          }
+          else if ((c > 127) && (c < 2048)) {
+            utf8length = utf8length + 2;
+          }
+          else {
+            utf8length = utf8length + 3;
+          }
+        }
+        return utf8length;
+      }
+
+      /**
+       * Return true if the indicator should be showing up.
+       *
+       * @param input
+       * @param thereshold
+       * @param maxlength
+       * @return {number}
+       */
+      function charsLeftThreshold(input, thereshold, maxlength) {
+        var output = true;
+        if (!options.alwaysShow && (maxlength - inputLength(input) > thereshold)) {
+          output = false;
+        }
+        return output;
+      }
+
+      /**
+       * Returns how many chars are left to complete the fill up of the form.
+       *
+       * @param input
+       * @param maxlength
+       * @return {number}
+       */
+      function remainingChars(input, maxlength) {
+        var length = maxlength - inputLength(input);
+        return length;
+      }
+
+      /**
+       * When called displays the indicator.
+       *
+       * @param indicator
+       */
+      function showRemaining(currentInput, indicator) {
+        indicator.css({
+          display: 'block'
+        });
+        currentInput.trigger('maxlength.shown');
+      }
+
+      /**
+       * When called shows the indicator.
+       *
+       * @param indicator
+       */
+      function hideRemaining(currentInput, indicator) {
+        indicator.css({
+          display: 'none'
+        });
+        currentInput.trigger('maxlength.hidden');
+      }
+
+      /**
+      * This function updates the value in the indicator
+      *
+      * @param maxLengthThisInput
+      * @param typedChars
+      * @return String
+      */
+      function updateMaxLengthHTML(currentInputText, maxLengthThisInput, typedChars) {
+        var output = '';
+        if (options.message) {
+          if (typeof options.message === 'function') {
+            output = options.message(currentInputText, maxLengthThisInput);
+          } else {
+            output = options.message.replace('%charsTyped%', typedChars)
+              .replace('%charsRemaining%', maxLengthThisInput - typedChars)
+              .replace('%charsTotal%', maxLengthThisInput);
+          }
+        } else {
+          if (options.preText) {
+            output += options.preText;
+          }
+          if (!options.showCharsTyped) {
+            output += maxLengthThisInput - typedChars;
+          }
+          else {
+            output += typedChars;
+          }
+          if (options.showMaxLength) {
+            output += options.separator + maxLengthThisInput;
+          }
+          if (options.postText) {
+            output += options.postText;
+          }
+        }
+        return output;
+      }
+
+      /**
+       * This function updates the value of the counter in the indicator.
+       * Wants as parameters: the number of remaining chars, the element currently managed,
+       * the maxLength for the current input and the indicator generated for it.
+       *
+       * @param remaining
+       * @param currentInput
+       * @param maxLengthCurrentInput
+       * @param maxLengthIndicator
+       */
+      function manageRemainingVisibility(remaining, currentInput, maxLengthCurrentInput, maxLengthIndicator) {
+        if (maxLengthIndicator) {
+          maxLengthIndicator.html(updateMaxLengthHTML(currentInput.val(), maxLengthCurrentInput, (maxLengthCurrentInput - remaining)));
+
+          if (remaining > 0) {
+            if (charsLeftThreshold(currentInput, options.threshold, maxLengthCurrentInput)) {
+              showRemaining(currentInput, maxLengthIndicator.removeClass(options.limitReachedClass).addClass(options.warningClass));
+            } else {
+              hideRemaining(currentInput, maxLengthIndicator);
+            }
+          } else {
+            showRemaining(currentInput, maxLengthIndicator.removeClass(options.warningClass).addClass(options.limitReachedClass));
+          }
+        }
+
+        if (options.allowOverMax) {
+          // class to use for form validation on custom maxlength attribute
+          if (remaining < 0) {
+            currentInput.addClass('overmax');
+          } else {
+            currentInput.removeClass('overmax');
+          }
+        }
+      }
+
+      /**
+       * This function returns an object containing all the
+       * informations about the position of the current input
+       *
+       * @param currentInput
+       * @return object {bottom height left right top width}
+       *
+       */
+      function getPosition(currentInput) {
+        var el = currentInput[0];
+        return $.extend({}, (typeof el.getBoundingClientRect === 'function') ? el.getBoundingClientRect() : {
+          width: el.offsetWidth,
+          height: el.offsetHeight
+        }, currentInput.offset());
+      }
+
+      /**
+       * This function places the maxLengthIndicator at the
+       * top / bottom / left / right of the currentInput
+       *
+       * @param currentInput
+       * @param maxLengthIndicator
+       * @return null
+       *
+       */
+      function place(currentInput, maxLengthIndicator) {
+        var pos = getPosition(currentInput);
+
+        // Supports custom placement handler
+        if ($.type(options.placement) === 'function'){
+          options.placement(currentInput, maxLengthIndicator, pos);
+          return;
+        }
+
+        // Supports custom placement via css positional properties
+        if ($.isPlainObject(options.placement)){
+          placeWithCSS(options.placement, maxLengthIndicator);
+          return;
+        }
+
+        var inputOuter = currentInput.outerWidth(),
+          outerWidth = maxLengthIndicator.outerWidth(),
+          actualWidth = maxLengthIndicator.width(),
+          actualHeight = maxLengthIndicator.height();
+
+        // get the right position if the indicator is appended to the input's parent
+        if (options.appendToParent) {
+          pos.top -= currentInput.parent().offset().top;
+          pos.left -= currentInput.parent().offset().left;
+        }
+
+        switch (options.placement) {
+          case 'bottom':
+            maxLengthIndicator.css({ top: pos.top + pos.height, left: pos.left + pos.width / 2 - actualWidth / 2 });
+            break;
+          case 'top':
+            maxLengthIndicator.css({ top: pos.top - actualHeight, left: pos.left + pos.width / 2 - actualWidth / 2 });
+            break;
+          case 'left':
+            maxLengthIndicator.css({ top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left - actualWidth });
+            break;
+          case 'right':
+            maxLengthIndicator.css({ top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width });
+            break;
+          case 'bottom-right':
+            maxLengthIndicator.css({ top: pos.top + pos.height, left: pos.left + pos.width });
+            break;
+          case 'top-right':
+            maxLengthIndicator.css({ top: pos.top - actualHeight, left: pos.left + inputOuter });
+            break;
+          case 'top-left':
+            maxLengthIndicator.css({ top: pos.top - actualHeight, left: pos.left - outerWidth });
+            break;
+          case 'bottom-left':
+            maxLengthIndicator.css({ top: pos.top + currentInput.outerHeight(), left: pos.left - outerWidth });
+            break;
+          case 'centered-right':
+            maxLengthIndicator.css({ top: pos.top + (actualHeight / 2), left: pos.left + inputOuter - outerWidth - 3 });
+            break;
+
+            // Some more options for placements
+          case 'bottom-right-inside':
+            maxLengthIndicator.css({ top: pos.top + pos.height, left: pos.left + pos.width - outerWidth });
+            break;
+          case 'top-right-inside':
+            maxLengthIndicator.css({ top: pos.top - actualHeight, left: pos.left + inputOuter - outerWidth });
+            break;
+          case 'top-left-inside':
+            maxLengthIndicator.css({ top: pos.top - actualHeight, left: pos.left });
+            break;
+          case 'bottom-left-inside':
+            maxLengthIndicator.css({ top: pos.top + currentInput.outerHeight(), left: pos.left });
+            break;
+        }
+      }
+
+      /**
+       * This function places the maxLengthIndicator based on placement config object.
+       *
+       * @param {object} placement
+       * @param {$} maxLengthIndicator
+       * @return null
+       *
+       */
+      function placeWithCSS(placement, maxLengthIndicator) {
+        if (!placement || !maxLengthIndicator){
+          return;
+        }
+
+        var POSITION_KEYS = [
+          'top',
+          'bottom',
+          'left',
+          'right',
+          'position'
+        ];
+
+        var cssPos = {};
+
+        // filter css properties to position
+        $.each(POSITION_KEYS, function (i, key) {
+          var val = options.placement[key];
+          if (typeof val !== 'undefined'){
+            cssPos[key] = val;
+          }
+        });
+
+        maxLengthIndicator.css(cssPos);
+
+        return;
+      }
+
+      /**
+       * This function retrieves the maximum length of currentInput
+       *
+       * @param currentInput
+       * @return {number}
+       *
+       */
+      function getMaxLength(currentInput) {
+        var attr = 'maxlength';
+        if (options.allowOverMax) {
+          attr = 'data-bs-mxl';
+        }
+        return currentInput.attr(attr) || currentInput.attr('size');
+      }
+
+      return this.each(function () {
+
+        var currentInput = $(this),
+          maxLengthCurrentInput,
+          maxLengthIndicator;
+
+        $(window).resize(function () {
+          if (maxLengthIndicator) {
+            place(currentInput, maxLengthIndicator);
+          }
+        });
+
+        if (options.allowOverMax) {
+          $(this).attr('data-bs-mxl', $(this).attr('maxlength'));
+          $(this).removeAttr('maxlength');
+        }
+
+        function firstInit() {
+          var maxlengthContent = updateMaxLengthHTML(currentInput.val(), maxLengthCurrentInput, '0');
+          maxLengthCurrentInput = getMaxLength(currentInput);
+
+          if (!maxLengthIndicator) {
+            maxLengthIndicator = $('<span class="bootstrap-maxlength"></span>').css({
+              display: 'none',
+              position: 'absolute',
+              whiteSpace: 'nowrap',
+              zIndex: 1099
+            }).html(maxlengthContent);
+          }
+
+          // We need to detect resizes if we are dealing with a textarea:
+          if (currentInput.is('textarea')) {
+            currentInput.data('maxlenghtsizex', currentInput.outerWidth());
+            currentInput.data('maxlenghtsizey', currentInput.outerHeight());
+
+            currentInput.mouseup(function () {
+              if (currentInput.outerWidth() !== currentInput.data('maxlenghtsizex') || currentInput.outerHeight() !== currentInput.data('maxlenghtsizey')) {
+                place(currentInput, maxLengthIndicator);
+              }
+
+              currentInput.data('maxlenghtsizex', currentInput.outerWidth());
+              currentInput.data('maxlenghtsizey', currentInput.outerHeight());
+            });
+          }
+
+          if (options.appendToParent) {
+            currentInput.parent().append(maxLengthIndicator);
+            currentInput.parent().css('position', 'relative');
+          } else {
+            documentBody.append(maxLengthIndicator);
+          }
+
+          var remaining = remainingChars(currentInput, getMaxLength(currentInput));
+          manageRemainingVisibility(remaining, currentInput, maxLengthCurrentInput, maxLengthIndicator);
+          place(currentInput, maxLengthIndicator);
+        }
+
+        if (options.showOnReady) {
+          currentInput.ready(function () {
+            firstInit();
+          });
+        } else {
+          currentInput.focus(function () {
+            firstInit();
+          });
+        }
+
+        currentInput.on('maxlength.reposition', function () {
+          place(currentInput, maxLengthIndicator);
+        });
+
+
+        currentInput.on('destroyed', function () {
+          if (maxLengthIndicator) {
+            maxLengthIndicator.remove();
+          }
+        });
+
+        currentInput.on('blur', function () {
+          if (maxLengthIndicator && !options.showOnReady) {
+            maxLengthIndicator.remove();
+          }
+        });
+
+        currentInput.on('input', function () {
+          var maxlength = getMaxLength(currentInput),
+            remaining = remainingChars(currentInput, maxlength),
+            output = true;
+
+          if (options.validate && remaining < 0) {
+            truncateChars(currentInput, maxlength);
+            output = false;
+          } else {
+            manageRemainingVisibility(remaining, currentInput, maxLengthCurrentInput, maxLengthIndicator);
+          }
+
+          //reposition the indicator if placement "bottom-right-inside" & "top-right-inside" is used
+          if (options.placement === 'bottom-right-inside' || options.placement === 'top-right-inside') {
+            place(currentInput, maxLengthIndicator);
+          }
+
+          return output;
+        });
+      });
+    }
+  });
+}(jQuery));

assets/plugin/maxlength/bootstrap-maxlength.min.js

@@ -0,0 +1,10 @@
+/* ========================================================== 
+ * 
+ * bootstrap-maxlength.js v 1.6.0 
+ * Copyright 2015 Maurizio Napoleoni @mimonap
+ * Licensed under MIT License
+ * URL: https://github.com/mimo84/bootstrap-maxlength/blob/master/LICENSE
+ *
+ * ========================================================== */
+
+!function(a){"use strict";a.event.special.destroyed||(a.event.special.destroyed={remove:function(a){a.handler&&a.handler()}}),a.fn.extend({maxlength:function(b,c){function d(a){var c=a.val();c=b.twoCharLinebreak?c.replace(/\r(?!\n)|\n(?!\r)/g,"\r\n"):c.replace(new RegExp("\r?\n","g"),"\n");var d=0;return d=b.utf8?f(c):c.length}function e(a,c){var d=a.val(),e=0;b.twoCharLinebreak&&(d=d.replace(/\r(?!\n)|\n(?!\r)/g,"\r\n"),"\n"===d.substr(d.length-1)&&d.length%2===1&&(e=1)),a.val(d.substr(0,c-e))}function f(a){for(var b=0,c=0;c<a.length;c++){var d=a.charCodeAt(c);128>d?b++:b+=d>127&&2048>d?2:3}return b}function g(a,c,e){var f=!0;return!b.alwaysShow&&e-d(a)>c&&(f=!1),f}function h(a,b){var c=b-d(a);return c}function i(a,b){b.css({display:"block"}),a.trigger("maxlength.shown")}function j(a,b){b.css({display:"none"}),a.trigger("maxlength.hidden")}function k(a,c,d){var e="";return b.message?e="function"==typeof b.message?b.message(a,c):b.message.replace("%charsTyped%",d).replace("%charsRemaining%",c-d).replace("%charsTotal%",c):(b.preText&&(e+=b.preText),e+=b.showCharsTyped?d:c-d,b.showMaxLength&&(e+=b.separator+c),b.postText&&(e+=b.postText)),e}function l(a,c,d,e){e&&(e.html(k(c.val(),d,d-a)),a>0?g(c,b.threshold,d)?i(c,e.removeClass(b.limitReachedClass).addClass(b.warningClass)):j(c,e):i(c,e.removeClass(b.warningClass).addClass(b.limitReachedClass))),b.allowOverMax&&(0>a?c.addClass("overmax"):c.removeClass("overmax"))}function m(b){var c=b[0];return a.extend({},"function"==typeof c.getBoundingClientRect?c.getBoundingClientRect():{width:c.offsetWidth,height:c.offsetHeight},b.offset())}function n(c,d){var e=m(c);if("function"===a.type(b.placement))return void b.placement(c,d,e);if(a.isPlainObject(b.placement))return void o(b.placement,d);var f=c.outerWidth(),g=d.outerWidth(),h=d.width(),i=d.height();switch(b.appendToParent&&(e.top-=c.parent().offset().top,e.left-=c.parent().offset().left),b.placement){case"bottom":d.css({top:e.top+e.height,left:e.left+e.width/2-h/2});break;case"top":d.css({top:e.top-i,left:e.left+e.width/2-h/2});break;case"left":d.css({top:e.top+e.height/2-i/2,left:e.left-h});break;case"right":d.css({top:e.top+e.height/2-i/2,left:e.left+e.width});break;case"bottom-right":d.css({top:e.top+e.height,left:e.left+e.width});break;case"top-right":d.css({top:e.top-i,left:e.left+f});break;case"top-left":d.css({top:e.top-i,left:e.left-g});break;case"bottom-left":d.css({top:e.top+c.outerHeight(),left:e.left-g});break;case"centered-right":d.css({top:e.top+i/2,left:e.left+f-g-3});break;case"bottom-right-inside":d.css({top:e.top+e.height,left:e.left+e.width-g});break;case"top-right-inside":d.css({top:e.top-i,left:e.left+f-g});break;case"top-left-inside":d.css({top:e.top-i,left:e.left});break;case"bottom-left-inside":d.css({top:e.top+c.outerHeight(),left:e.left})}}function o(c,d){if(c&&d){var e=["top","bottom","left","right","position"],f={};a.each(e,function(a,c){var d=b.placement[c];"undefined"!=typeof d&&(f[c]=d)}),d.css(f)}}function p(a){var c="maxlength";return b.allowOverMax&&(c="data-bs-mxl"),a.attr(c)||a.attr("size")}var q=a("body"),r={showOnReady:!1,alwaysShow:!1,threshold:10,warningClass:"label label-success",limitReachedClass:"label label-important label-danger",separator:" / ",preText:"",postText:"",showMaxLength:!0,placement:"bottom",message:null,showCharsTyped:!0,validate:!1,utf8:!1,appendToParent:!1,twoCharLinebreak:!0,allowOverMax:!1};return a.isFunction(b)&&!c&&(c=b,b={}),b=a.extend(r,b),this.each(function(){function c(){var c=k(g.val(),d,"0");d=p(g),f||(f=a('<span class="bootstrap-maxlength"></span>').css({display:"none",position:"absolute",whiteSpace:"nowrap",zIndex:1099}).html(c)),g.is("textarea")&&(g.data("maxlenghtsizex",g.outerWidth()),g.data("maxlenghtsizey",g.outerHeight()),g.mouseup(function(){(g.outerWidth()!==g.data("maxlenghtsizex")||g.outerHeight()!==g.data("maxlenghtsizey"))&&n(g,f),g.data("maxlenghtsizex",g.outerWidth()),g.data("maxlenghtsizey",g.outerHeight())})),b.appendToParent?(g.parent().append(f),g.parent().css("position","relative")):q.append(f);var e=h(g,p(g));l(e,g,d,f),n(g,f)}var d,f,g=a(this);a(window).resize(function(){f&&n(g,f)}),b.allowOverMax&&(a(this).attr("data-bs-mxl",a(this).attr("maxlength")),a(this).removeAttr("maxlength")),b.showOnReady?g.ready(function(){c()}):g.focus(function(){c()}),g.on("maxlength.reposition",function(){n(g,f)}),g.on("destroyed",function(){f&&f.remove()}),g.on("blur",function(){f&&!b.showOnReady&&f.remove()}),g.on("input",function(){var a=p(g),c=h(g,a),i=!0;return b.validate&&0>c?(e(g,a),i=!1):l(c,g,d,f),("bottom-right-inside"===b.placement||"top-right-inside"===b.placement)&&n(g,f),i})})}})}(jQuery);