우리는 그동안 '띵~' 하면서 뜨는 대화상자(자바스크립트 Alert)를 지겹도록 보아왔다. 보다 인간다운 컴퓨터 인터페이스 디자인을 연구하는 회사인 Humanized에 따르면, 대부분의 사용자들이 팝업되는 대화상자의 메시지를 제대로 읽지 않고 닫아버린다고 한다. 이것은 무서운 결과를 초래할 수도 있다고 경고하고 있다. 그들은 메시지를 조금 더 효율적으로 전달 할 수 있도록 '투명 메시지(The transparent message)'라는 자바스크립트 라이브러리를 공개하였다. 아래의 링크를 클릭해 보자.
alert('안녕하세요!')
alert('The Web is still changing!!')
이 라이브러리는 브라우저에서 기본으로 제공하는 자바스크립트 함수인 alert을 오버라이드(override)하여 사용하기 때문에 별도의 추가작업을 하지 않아도 대화상자를 투명 메시지로 교체 할 수 있다. humanized가 공개한 자바스크립트 소스는 MochiKit 프레임웍을 기반으로 제작되어 있어서 Prototype 과 Scriptaculous 프레임웍 기반으로 변환하였다. 추후 confirm과 prompt함수까지 오버라이드해 볼 생각이다.
/**
* Prototype base Transparent Message.
* @copyright Humanized, Inc.
* @license Attribution-NonCommercial-ShareAlike 2.5
* @author1 Aza Raskin <aza@humanized.com>
* @author2 Firejune <to@firejune.com>
*
* <style>
* .humanized_msg{
* position: absolute; left: 25%; width: 50%;
* color: white; background-color: #8CC63F;
* font-size: 36pt; text-align: center;
* }
*
* .humanized_msg .round{
* border-left: solid 2px white; border-right: solid 2px white;
* font-size: 1px; height: 2px;
* }
*
* .humanized_msg p{ padding: .3em; display: inline;}
* </style>
*/
var transMsg = Class.create();
transMsg.prototype = {
initialize: function(options){
this.options = Object.extend({
opacity: 0.9,
offset: -150,
foramt: '<div class="round"></div><p>%s</p><div class="round"></div>',
effect: null,
currMsg: ""
}, options || {});
this.hideEvents = ['mousedown', 'keydown', 'mouseout'];
this.mouseAction = this.hideMessage.bindAsEventListener(this);
},
loadEvents: function(){
var unload = this.unloadEvents.bindAsEventListener(this);
for(var i=0; i < this.hideEvents.length; i++){
Event.observe(document.body, this.hideEvents[i], this.mouseAction);
}
Event.observe(window, 'unload', unload);
},
unloadEvents: function(){
for(var i=0; i < this.hideEvents.length; i++){
Event.stopObserving(document.body, this.hideEvents[i], this.mouseAction);
}
//Element.remove(this.element);
},
createMessage: function(){
this.element = document.createElement('DIV');
this.element.className = 'humanized_msg';
Element.hide(this.element);
if(Prototype.Browser.Gecko){
Element.setStyle(this.element, {position:'fixed'});
}
document.body.appendChild(this.element);
this.loadEvents();
},
hideMessage: function(){
if (Element.getOpacity(this.element) >= this.options.opacity){
this.options.effect = new Effect.Fade(this.element, {duration:0.5});
}
},
popMessage:function(message){
Sound.play('spsacem');
$(this.element).innerHTML = this.options.foramt.replace("%s", message);
this.options.currMsg = message;
Element.show(this.element);
var height = Element.getHeight(this.element);
var top = Position.scrollY()+(Position.getPageSize().window.height/2)-(height/2)+this.options.offset;
if(Prototype.Browser.Gecko){
top = (Position.getPageSize().window.height/2)-(height/2)+this.options.offset;
}
Element.setStyle(this.element, {top:top+'px'});
Element.setOpacity(this.element, this.options.opacity);
},
showMessage:function(message){
if(typeof this.element != 'object'){
this.createMessage();
}
this.options.effect = this.options.effect? this.options.effect : '';
if(this.options.effect != 'null' && this.options.effect.state == "running"){
this.options.effect.options.afterFinish = function(){
this.popMessage(message);
}.bind(this);
} else {
this.popMessage(message);
}
}
};
transMsg = new transMsg(); // Transparent message initialize
function alert(message) {
transMsg.showMessage(message);
};
alert을 override하는 자바스크립트 메시지 - Firejune Blog
