[JavaScript] X-editable; 튜토리얼

* X-editable을 사용하면 전통적인 FORM 엘러먼트와 INPUT 엘러먼트의 제약을 벗어나서 A 엘러먼트와 JavaScript만으로 다양한 사용자 입력을 수용할 수 있다.

* 먼저 HTML 상에서 X-editable를 적용할 A 엘러먼트를 작성한다. data-type의 값으로 text, textarea, select, date, checklist 등 다양한 타입을 지원한다. select2 타입은 v1.4.1 버전에서 임의로 setValue() 메써드를 사용시 오류가 발생하는 버그가 있어 select 타입 사용을 권장한다.
<a id="someField" class="someForm" data-type="text">

* v1.4.1 버전부터 모드가 통합되면서 사전에 inline 모드를 적용하는 설정이 필요하다.
$.fn.editable.defaults.mode = 'inline';

* 앞서 작성한 엘러먼트에 X-editable을 적용한다. validate 옵션으로 유효성 검사를 수행할 수 있다. 메써드에서 1개 이상의 문자열을 반환하면 유효성 검사에 실패한 것으로 간주한다. 유효성 검사를 위한 API는 따로 제공되지 않는다.
$('#someField').editable({
  emptytext : '미입력',
  validate : function(value) {
    if (!isValid(value)) {
      return "유효하지 않은 입력입니다.";
    }
  }
});

* X-editable은 아직 값에 대한 change 이벤트를 제공하지 않아 값이 변했을 때 원하는 동작을 수행할 수 없다. 하지만 validate 옵션에 원하는 동작을 작성하면 change 이벤트와 동일한 효과를 가질 수 있다.

* 적용된 필드에 특정 값을 담을 수 있다.
$('#someField').editable('setValue', someValue);

* 동일한 클래스명을 가진 적용된 필드에 한꺼번에 특정 값을 담을 수 있다. 아래와 같이 초기화할 수 있다.
$('.someForm').editable('setValue', '');

* 동일한 클래스명을 가진 적용된 필드들의 값을 하나의 오브젝트에 담을 수 있다.
var someObject = $('.someForm').editable('getValue');

* type 옵션으로 select2를 설정하면 getValue 메써드 호출시 약간 다른 접근이 필요하다. 아래와 같이 엘러먼트 id를 추가적으로 명시해줘야 한다.

$('#someField').editable('getValue'); (X)
$('#someField').editable('getValue').orderCurrencyCd; (O)

* 오브젝트로 변환된 필드 값들은 오브젝트를 $.ajax() 메써드의 data 옵션에 전달하는 방법으로 서버에 사용자 입력 데이터를 전달할 수 있다.
data : JSON.stringify(someObject),
dataType : 'json'

* 유효성 검사를 위한 메써드는 아래와 같이 작성할 수 있다. 주로 정규식이 사용된다. 정규식은 jquery.validate.js 및 additional-methods.js의 소스코드를 참고해서 작성했다.
function isRequired(value) {
    return $.trim(value).length > 0;
}

function isEmail(value) {
    return /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))$/i.test(value);
}

function isNumber(value) {
    return /^-?(?:\d+|\d{1,3}(?:,\d{3})+)?(?:\.\d+)?$/.test(value);
}

function isDigits(value) {
    return /^\d+$/.test(value);
}

* 각 필드의 validate 옵션을 활성화했다면 클래스 단위의 일괄 유효성 검사가 가능하다. 반환된 객체에는 유효성 검사 결과 메시지들이 오브젝트로 저장된다.
var messages = $('.someForm').editable('validate');

* 유효성 검사가 성공적으로 끝났다면 반환된 객체의 크기는 0이 되며 아래와 같이 유효성 검사 결과를 출력하는 로직을 작성할 수 있다.(_.size(), _.map() 메써드는 Underscore.js, .first() 메써드는 Sugar.js, bootbox.alert() 메써드는 Bootbox.js가 제공하는 메써드이다.)
if (_.size(messages) != 0) {
    var message = _.map(messages, function(message) {
        return message;
    }).first();
    bootbox.alert(message, '확인');
    return;
}

* X-editable 사용시 화면에 보이지 않는 hidden 속성을 가진 필드는 어떻게 처리할까 고민하다 Bootstrap의 modal 클래스 속성을 활용하여 hidden 속성과 동일한 효과를 주도록 코드를 작성했다.
<div class="modal hide">
    <a id="hiddenField" class="hiddenForm" data-type="text"></a>
</div>