text count component

text_cnt.bootstrap.js

+function ($) {

  /** Work Date
   *  - 2017.03.03
   *  - Jaekwang
   */

  /** 사용 방법
   * [required]
   *  - data-comp="cnt_letters"
   * [options]
   *  - 최대 글자 수  : maxlength="250"
   *  - 최대 글자 노출 : data-hide-maxlen="true"
   **/

  /** 유사 함수
   * - fstrap.js      : $.fn.textareaCnt
   * - fstarp.form.js : $.fn.textCnt [ duplicate ]
   **/

  /** 개선점
   * 1. cntFormat function을 사용하여 view를 그리는 법이 좋아보이지 않는다.
   * 2. 처음 셋팅하는 부분과 이벤트 바인딩후 callback에서의 점이 유사하여 공통으로 추출할 수 있을것 같다.
   * 4. min check 도 필요할까?
   * 5. fstrap.js의 $.fn.textareaCnt도 Cover할 수 있으면 좋겠다.
   **/

  // Event type & target

  var CntFormat = function(element, options) {
    this.$element = $(element);
    this.maxLen = this.$element.attr('maxlength');
    this.hideMaxlenData = Boolean(this.$element.data('hideMaxlen'));
    this.cnt = 0; // option ?

    this.initElement();

    this.$wrap = this.$element.closest('.sc-text-cnt-wrap')
    this.$cntView = this.$wrap.find('.sc-text-cnt')

    this.setEvent();
  };

  CntFormat.DEFAULTS = {
    EVENT_TYPE : 'change keyup keypress paste',
    EVENT_TARGET : '[data-comp^="cnt_letters"]'
  }

  // View formmat
  CntFormat.prototype.cntFormat = function() {
    var maxLen = this.hideMaxlen() ? '' : this.maxLen;
    return '(' + this.cnt + (maxLen ? '/' + maxLen : '') + ')';
  };

  // Show/Hide maxlength
  CntFormat.prototype.hideMaxlen = function () {
    return this.maxLen ? this.hideMaxlenData : true;
  };

  CntFormat.prototype.initElement = function() {
    this.$element
      .wrap('<div class="sc-text-cnt-wrap pos_re"></div>')
      .after('<span class="sc-text-cnt count abb5r10">'
      + this.cntFormat())
  };

  CntFormat.prototype.setEvent = function() {
    var _this = this;

    this.$element.on(CntFormat.DEFAULTS.EVENT_TYPE, function() {
      _this.cnt = $(this).val().replace(/\r(?!\n)|\n(?!\r)/g, '\r\n').length; // Chrome 기준

      _this.$cntView.text(_this.cntFormat());

      // 조건 : 입력글자수가 최대글자수를 넘긴 경우
      var isOver = _this.cnt > _this.maxLen;

      // Chrome 기준이기 때문에 IE에서는 문자를 더 입력될수 있어 에러를 노출 시켜야함
      _this.$wrap.toggleClass('has-error has-danger', isOver);
      _this.$cntView.css('color', (isOver) ? '#EE673F' : '#000000');
    })
  };

  function Plugin(option) {
    return this.each(function () {
      var $this   = $(this);
      var data    = $this.data('bs.cntformat');
      var options = typeof option == 'object' && option;

      //if (!data && option == 'destroy') return
      if (!data) $this.data('bs.cntforma', (data = new CntFormat(this, options)));
      if (typeof option == 'string') data[option]();
    })
  }

  $(document).find(CntFormat.DEFAULTS.EVENT_TARGET).each(Plugin);

  $.fn.cntLetters = Plugin;
  $.fn.cntLetters.Constructor = CntFormat;

}(jQuery);

text_cnt.v1.js

+function ($) {
  
  /** Work Date
   *  - 2017.03.03
   *  - Jaekwang
   */
  
  /** 사용 방법
   * [required]
   *  - data-comp="cnt_letters"
   * [options]
   *  - 최대 글자 수  : maxlength="250"
   *  - 최대 글자 노출 : data-hide-maxlen="true"
   **/
  
  /** 유사 함수
  * - fstrap.js      : $.fn.textareaCnt
  * - fstarp.form.js : $.fn.textCnt [ duplicate ]
  **/
  
  /** 개선점
   * 1. cntFormat function을 사용하여 view를 그리는 법이 좋아보이지 않는다.
   * 2. 처음 셋팅하는 부분과 이벤트 바인딩후 callback에서의 점이 유사하여 공통으로 추출할 수 있을것 같다.
   * 4. min check 도 필요할까?
   * 5. fstrap.js의 $.fn.textareaCnt도 Cover할 수 있으면 좋겠다.
   **/
  
  // Event type & target
  var EVENT_TYPE   = 'change keyup keypress paste'
    , EVENT_TARGET = '[data-comp^="cnt_letters"]';
  
  // View formmat
  var cntFormat = function(cnt, maxLen) {
        return '(' + cnt + (maxLen ? '/' + maxLen : '') + ')';
      };
  
  // Show/Hide maxlength
  var hideMaxlen = function ($target) {
    return $target.attr('maxlength') ? Boolean($target.data('hideMaxlen')) : true;
  };
  
  var initEvent = function(_this) {
  
    var ele = (_this) ? _this : EVENT_TARGET;

    // textarea별로 각기 다른 maxlength 갖기 때문에 Loop 활용하여 적용
    _.each($(ele), function (target) {
    
      var $self = $(target)
        , maxLen = $self.attr('maxlength')
        , cnt = _.size($self.val()) || 0;
    
      // 마크업 세팅
      $self
        .wrap('<div class="sc-text-cnt-wrap pos_re"></div>')
        .after('<span class="sc-text-cnt count abb5r10">'
          + (hideMaxlen($self) ? cntFormat(cnt) : cntFormat(cnt, maxLen)) + '</span>');
    
    });
  };
  

  var setEvent = function(_this) {
  
    var ele = (_this) ? _this : EVENT_TARGET;

    // 이벤트 바인딩
    $(document).on(EVENT_TYPE, ele, function (e) {
    
      var $self = $(e.target)
        , $wrap = $self.closest('.sc-text-cnt-wrap')
        , maxLen = $self.attr('maxlength')
        , $cntView = $wrap.find('.sc-text-cnt')
        , cnt = $self.val().replace(/\r(?!\n)|\n(?!\r)/g, '\r\n').length; // Chrome 기준
      
      $cntView.text(hideMaxlen($self) ? cntFormat(cnt) : cntFormat(cnt, maxLen));
    
      // 조건 : 입력글자수가 최대글자수를 넘긴 경우
      var isOver = cnt > maxLen;
    
      // Chrome 기준이기 때문에 IE에서는 문자를 더 입력될수 있어 에러를 노출 시켜야함
      $wrap.toggleClass('has-error has-danger', isOver);
      $cntView.css('color', (isOver) ? '#EE673F' : '#000000');
      
    });
  };
  
  var createEvent = function(_this) {
    initEvent(_this);
    setEvent(_this);
  };
  
  createEvent();
  
  $.fn.cntLetters = function() {
    createEvent(this);
  }
  
}(jQuery);

text_cnt.v2.js

+function ($) {
  
  /** Work Date
   *  - 2017.03.03
   *  - Jaekwang
   */
  
  /** 사용 방법
   * [required]
   *  - data-comp="cnt_letters"
   * [options]
   *  - 최대 글자 수  : maxlength="250"
   *  - 최대 글자 노출 : data-hide-maxlen="true"
   **/
  
  /** 유사 함수
  * - fstrap.js      : $.fn.textareaCnt
  * - fstarp.form.js : $.fn.textCnt [ duplicate ]
  **/
  
  /** 개선점
   * 1. cntFormat function을 사용하여 view를 그리는 법이 좋아보이지 않는다.
   * 2. 처음 셋팅하는 부분과 이벤트 바인딩후 callback에서의 점이 유사하여 공통으로 추출할 수 있을것 같다.
   * 4. min check 도 필요할까?
   * 5. fstrap.js의 $.fn.textareaCnt도 Cover할 수 있으면 좋겠다.
   **/
  
  // Event type & target
  var EVENT_TYPE   = 'change keyup keypress paste'
    , EVENT_TARGET = '[data-comp^="cnt_letters"]';
  
  // View formmat
  var cntFormat = function(cnt, maxLen) {
    return '(' + cnt + (maxLen ? '/' + maxLen : '') + ')';
  };
  
  // Show/Hide maxlength
  var hideMaxlen = function ($target) {
    return $target.attr('maxlength') ? Boolean($target.data('hideMaxlen')) : true;
  };
  
  var initEvent = function($self) {
    var maxLen = $self.attr('maxlength')
      , cnt = _.size($self.val()) || 0;
    
    $self
      .wrap('<div class="sc-text-cnt-wrap pos_re"></div>')
      .after('<span class="sc-text-cnt count abb5r10">'
        + (hideMaxlen($self) ? cntFormat(cnt) : cntFormat(cnt, maxLen)) + '</span>');
  };

  var setEvent = function($self) {
    if ($self.data('setEvent')) {
      return;
    }

    var $wrap = $self.closest('.sc-text-cnt-wrap')
      , maxLen = $self.attr('maxlength')
      , $cntView = $wrap.find('.sc-text-cnt')
      , cnt = 0;

    $self.data('setEvent', true);

    $self.on(EVENT_TYPE, function() {
      cnt = $self.val().replace(/\r(?!\n)|\n(?!\r)/g, '\r\n').length; // Chrome 기준

      $cntView.text(hideMaxlen($self) ? cntFormat(cnt) : cntFormat(cnt, maxLen));

      // 조건 : 입력글자수가 최대글자수를 넘긴 경우
      var isOver = cnt > maxLen;

      // Chrome 기준이기 때문에 IE에서는 문자를 더 입력될수 있어 에러를 노출 시켜야함
      $wrap.toggleClass('has-error has-danger', isOver);
      $cntView.css('color', (isOver) ? '#EE673F' : '#000000');
    })
  };

  var createEvent = function() {
    return $(this).each(function() {
      initEvent($(this));
      setEvent($(this));
    })
  };
  
  $(document).find(EVENT_TARGET).each(createEvent);
  
  $.fn.cntLetters = createEvent;
  
}(jQuery);