jui.defineUI("ui.notify", [ "jquery" ], function($) { var DEF_PADDING = 12; /** * @class ui.notify * Notify component that provides an alarm function for when a serious problem or event occurs * * @extends core * @alias Notify * @requires jquery * */ var UI = function() { var $container = null, paddingPos = null; this.init = function() { var opts = this.options; var padding = (typeof(opts.padding) == "object") ? DEF_PADDING : opts.padding; var paddingObj = { "top": { top: padding, bottom: "auto", left: padding, right: padding }, "top-right": { top: padding, bottom: "auto", left: "auto", right: padding }, "top-left": { top: padding, bottom: "auto", left: padding, right: "auto" }, "bottom": { top: "auto", bottom: padding, left: padding, right: padding }, "bottom-right": { top: "auto", bottom: padding, left: "auto", right: padding }, "bottom-left": { top: "auto", bottom: padding, left: padding, right: padding } }; paddingPos = paddingObj[opts.position]; // 패딩 값이 수치가 아니라 객체일 경우 if(typeof(opts.padding) == "object") { paddingPos = $.extend(paddingPos, opts.padding); } // 알림 메시지 대상 스타일 설정 if(this.selector != "body") { $(this.selector).css("position", "relative"); } // 기본 스타일 설정 $container = $("<div></div>").css($.extend({ position: "absolute", "z-index": 3000 }, paddingPos)); $(this.root).append($container); return this; } /** * @method add * Adds a notice message. The value passed is the data object shown by the notice template * * @param {Object} data * @param {Integer} timeout */ this.add = function(data, timeout) { var self = this, opts = this.options, delay = (!isNaN(timeout)) ? timeout : opts.timeout, scrollTop = $(this.root).scrollTop(); var $alarm = $(this.tpl.item(data)).css({ "margin-bottom": opts.distance }); // 포지션 예외 처리 if(opts.position == "top" || opts.position == "bottom") { $alarm.outerWidth( $container.width() - ((typeof(opts.padding) == "object" && opts.padding.right) ? opts.padding.right : DEF_PADDING) * 3 ); } // 추가 if(isTop()) { $container.css("top", scrollTop + paddingPos.top); $container.prepend($alarm); } else { $container.css("bottom", -(scrollTop - paddingPos.bottom)); $container.append($alarm); } // 보이기 효과 var alpha = $alarm.css("opacity"); $alarm .css({ opacity: 0 }) .animate({ opacity: alpha }, opts.showDuration, opts.showEasing, function() { self.emit("show", [ data ]); }); // 선택 이벤트 this.addEvent($alarm, "click", function(e) { self.emit("select", [ data, e ]); remove(); return false; }); // 숨기기 효과 if(delay > 0) { setTimeout(remove, delay); } function remove() { if($alarm == null) return; $alarm.animate({ opacity: 0 }, opts.hideDuration, opts.hideEasing); $alarm.slideUp(opts.hideEasing, function() { self.emit("hide", [ data ]); $alarm.remove(); $alarm = null; }); } function isTop() { return (opts.position.indexOf("top-") != -1) ? true : false; } } /** * @method reset * Removes all notice messages that are enabled */ this.reset = function() { $container.empty(); } } UI.setup = function() { return { /** * @cfg {"top"/"top-lefet"/"top-right"/"bottom"/"bottom-left"/"bottom-right"} [position="top-right"] * Designates the location where a notice message is added */ position: "top-right", /** * @cfg {Integer} [padding=12] * Determines the margin value of a notice message (the margin value may be in object form rather than a numeric value) */ padding: DEF_PADDING, /** * @cfg {Integer} [distance=5] * Determines each margin value when there are multiple notice messages */ distance: 5, /** * @cfg {Integer} [timeout=3000] * Determines the duration for which a notice message is displayed (the message does not disappear when the value is 0) */ timeout: 3000, /** * @cfg {Integer} [showDuration=500] * Determines the duration of an effect when a notice message is shown */ showDuration: 500, /** * @cfg {Integer} [hideDuration=500] * Determines the duration of an effect when a notice message disappears */ hideDuration: 500, /** * @cfg {String} [showEasing="swing"] * Determines an effect when a notice message is shown (see CSS3 specifications) */ showEasing: "swing", /** * @cfg {String} [hideEasing="linear"] * Determines an effect when a notice message disappears (see CSS3 specifications) */ hideEasing: "linear" }; /** * @event select * Event that occurs when a notice message is clicked * * @param {Object} data * @param {EventObject} e The event object */ /** * @event show * Event that occurs when a notice message is shown * * @param {Object} data */ /** * @event hide * Event that occurs when a notice message is hidden * * @param {Object} data */ } return UI; });