FACEBOOK
XE가 1.5에서 1.7로 넘어오면서 정말 많은 부분이 바뀌었습니다.
PHP 하위 버전이나 제로보드 지원 관련 코드들이 전격 삭제되면서 반응 속도가 눈에 띄게 향상되었습니다.
특히, 관리자 페이지 레이아웃이 전격 수정되었는데, 예전의 칙칙한 디자인에서 깔끔하고 정돈된 디자인으로 바뀌었습니다.
▲ 깔쌈하게 바뀐 XE 1.7.x 관리자 페이지
이러한 깔끔하게 바뀐 디자인에 부응하여 자바스크립트 기본 함수도 많이 재정의(Override) 되었습니다. 특히, 기본 알림 함수인 Alert 함수가 Modal Layer 방식으로 바뀌었습니다.
alert() 함수를 호출하면 브라우저의 지원하는 기본 Alert 창이 아닌, 다음과 같은 모달창이 뜹니다.
▲ 재정의된 Alert 함수
이게 디자인적으로 기존 Alert창보다 나은지는 잘 모르겠지만, XE 개발자 입장에서는 별로 좋은 개선사항이 아닌것 같습니다.
아무리 FireBug 등 자바스크립트 디버깅 툴을 활용한다고 하더라도, Alert창으로 값을 띄워보면서 디버깅 하는 것이 유용할 때가 있습니다.
사실, 저도 한때 자바스크립트의 기본 사용자 Interaction 함수인 Alert, Confirm, Prompt등의 함수를 재정의하여 사용했던 적이 있었습다. (2000년도 경이었던가.)
당시 밀레니엄 알러트(-_-)라고, 지금 생각해 보면 참 쓰잘떼기 없는 걸 개발하갖고는 Happy CGI 같은 코드 공유 사이트에 업로드 한 적이 있었습니다.
기본 개념은 alert를 실행하면 기존 칙칙한 Alert창(IE의 Alert창은 얼마나 칙칙하던가!) 대신 무려 새 창을 띄워서 지정된 소리와 함께 이걸 화면에서 슬라이딩해서 보여준다거나 하는, 말 그대로 헛짓거리 하는 스크립트였다. 게다가 동작 속도도 느려 터졌고, 여러 개의 alert를 연달아 실행하면 오류가 발생하곤 하였습니다.
confirm이나 prompt등의 함수도 재정의를 시도했으나, 함수에서 값을 리턴해줄때까지 호출 쓰레드를 잡아 놓을 방법이 없어서 그냥 포기했었습니다.
XE에서 재정의된 Alert 함수의 가장 큰 문제점은 텍스트가 아닌, 객체나 오류를 표시하도록 전달했을 때 그 내용이 제대로 표시가 되지 않는다는 점입니다.
자바스크립트 디버깅을 할 때 alert의 인수로 객체를 전달했을 때 'undefind'나 'null', '[Object]'등의 메시지가 표시되면, 이를 통해 코드 중간점검을 할 수 있는 원리입니다.
그런데 alert 함수가 오버라이드 되면서 이런 기능이 먹통이 되어 버린 것입니다.
null 객체를 alert로 전달하면 아무 화면도 표시되지 않고, HTML코드를 전달하면 마크업을 그대로 보여주는 것이 아니라 화면에 표시를 해 버립니다. (<select>가 포함된 마크업을 alert로 표시했을 때 Alert창에 콤보박스가 나타났을 때의 당황스러움이란...-_-)
재정의된 Alert는 관리자 페이지에서만 적용되며, 일반 화면에서는 재정의되지 않고 원래 Alert창이 표시됩니다.
이 재정의를 해제하기 위해 역시 관리자 페이지 소스를 뒤져서 로드된 스크립트를 모두 역추척 하였고, 그중에 범인(!)이 숨어 있던 스크립트 파일을 찾을 수 있었습니다.
다음과 같은 조치를 취하면 XE 1.7.x에 적용된 Alert 재정의를 해제할 수 있습니다.
$msgBox = $('.x_modal._common');
$msgBox.on('change', '.site_selector', function(ev){
var sSiteSrl = $(this).val();
$.xeShowMenuSelector($container, sSiteSrl);
});
$.fn.xeMenuSearch = function(){
$(this).each(function(nIdx, el){
$(el).on('click', xeMenuSearch);
});
};
$('.module_search').xeMenuSearchHtml();
$('.moduleTrigger').xeMenuSearch();
});
//----------------menu selector end
/* [20130314|TUW] Alert 재정의 해제
jQuery(function($){
//_alert = alert;
try {
window.alert = function(){
return $.xeMsgBox.alert.apply($.xeMsgBox, arguments);
}
setTimeout(function(){$('div.message.info').fadeOut(1000);}, 2500);
}catch(e){}
});
*/
jQuery(function($){
$('#site,.x_modal._common').on('keydown', 'input', function(ev){
var $container, $btn;
if(ev.keyCode === 13){
$container = $(ev.target).parent();
while($container && !$container.hasClass('col')){
$btn = $container.find('button.x_btn-primary,button.x_btn-inverse');
if($btn.length>0){
// multi-lang field won't set the value until the input element is blured
if($(ev.target).hasClass('lang_code')) $(ev.target).blur();
ev.preventDefault();
$btn.click();
break;
}
$container = $container.parent();
}
}
});
});
function(){var b=a(this).val();a.xeShowMenuSelector(g,b)});a.fn.xeMenuSearch=function(){a(this).each(function(b,d){a(d).on("click",e)})};a(".module_search").xeMenuSearchHtml();a(".moduleTrigger").xeMenuSearch()});/*[20130314|TUW] Alert 재정의 해제 jQuery(function(a){try{window.alert=function(){return a.xeMsgBox.alert.apply(a.xeMsgBox,arguments)},setTimeout(function(){a("div.message.info").fadeOut(1E3)},2500)}catch(d){}});*/※ admin.js와 admin.min.js의 차이점은 단지 압축의 유무에 있으며, 관리자 설정에 따라 서로 다른 파일이 로드되므로 반드시 둘 다 수정해 주어야 합니다.
