Skip to content

Instantly share code, notes, and snippets.

@Jae-kwang
Created March 9, 2017 01:54
Show Gist options
  • Save Jae-kwang/2ad5b7bc685c1d1dcd13ac11a4d18f59 to your computer and use it in GitHub Desktop.
Save Jae-kwang/2ad5b7bc685c1d1dcd13ac11a4d18f59 to your computer and use it in GitHub Desktop.
text count component
+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);
+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);
+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);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment