Moumi/webapps/totsys/common/js/jquery.custom.indicator.js

/**
 * jquery.customIndicator.js
 *
 * @version 1.0
 * @author youngjun cho
 * @description indicator
 * @date 2014.10.08
 *
 */

"use strict";

(function ($) {

    $.customIndicator = {
        defaults : {
            /**
             * fixFormTable 옵션
             */
            indicator : true  // true : indicator 사용 , false : indicator 미사용
            , debug : false    // true : console.log 로 debug 메세지 출력, false : debug 메세지 출력 안함.
            , indicatorObj : "#custom_indicator"    // indicator's DOM.
            , indicatorBackgroundColor : "#FFFFFF"  // indicator 배경색 : transparent, #000000, #FFFFFF, ...
            , indicatorBackgroundZIndex : 1000  // indicator 배경 z-index
            , indicatorBackgroundOpacity : 0.1  // indicator 배경 opacity : 1.0, 0.5
            , indicatorWidth : "230px"          // indicator 전경 width
            , indicatorHeight : "32px"          // indicator 전경 height
            , indicatorTop : "50%"              // indicator 전경 top
            , indicatorLeft : "50%"             // indicator 전경 left
            , indicatorMargin : "-16px 0 0 -115px"  // indicator 전경 margin
            , indicatorPadding : "10px 0 10px 0"    // indicator 전경 padding
            , indicatorZindex : 1001                // indicator 전경 z-index
            , indicatorImageUrl : "/totsys/common/js/img/ajax-loader1.gif"  // indicator 전경 이미지
            , indicatorColor : "#000000"  // indicator 전경 배경색 transparent, #000000, #FFFFFF, ...
            , indicatorOpacity : 0.5        // indicator 전경 opacity
            , indicatorFontColor : "#FFFFFF"    // indicator 전경 폰트색상
            , indicatorFontWeight : "bold"      // indicator 전경 폰트스타일
            , indicatorFontFamily : "dotum"     // indicator 전경 폰트종류
            , indicatorFontSize : "13px"        // indicator 전경 폰트크기
            , indicatorText : "처리중입니다..."       // indicator 전경 텍스트
        },
        checkIndicator : function(target) {
            /**
             * indicator element 가 존재하는지 체크.
             */
            var isExistIndicator = false;
            try {
                if($.customIndicator.defaults.indicator === true) {
                    isExistIndicator = $("#custom_indicator", target).length > 0 ? true : false;
                }
            } catch(e) {
                $.customIndicator._log("checkIndicator", "Exception : " + e);
            }
            return isExistIndicator;
        },
        show : function(target) {
            /**
             * indicator element 를 body 에 추가하고, show.
             */
            try {
                if($.customIndicator.defaults.indicator === true) {
                    if ($.customIndicator.checkIndicator(target) === false) {
                        var ajaxIndicatorHtml = "";

                        // start : indicator 레이어 영역 전체
                        ajaxIndicatorHtml = ajaxIndicatorHtml + "<div id='"+$.customIndicator.defaults.indicatorObj.replace("#","")+"' style='display: none; position: absolute; z-index: "+$.customIndicator.defaults.indicatorBackgroundZIndex+"; top: 0; left: 0; width: 100%; height: 100%; '>";

                        // start : 배경 영역
                        ajaxIndicatorHtml = ajaxIndicatorHtml + "   <div style='position: absolute; z-index: "+$.customIndicator.defaults.indicatorBackgroundZIndex+"; top: 0; left: 0; width: 100%; height: 100%; background-color: "+$.customIndicator.defaults.indicatorBackgroundColor+"; opacity: "+$.customIndicator.defaults.indicatorBackgroundOpacity+"; filter:Alpha(opacity="+($.customIndicator.defaults.indicatorBackgroundOpacity * 100)+");'>";
                        ajaxIndicatorHtml = ajaxIndicatorHtml + "   </div>";    // end : 배경 영역

                        // start : 전경 영역
                        ajaxIndicatorHtml = ajaxIndicatorHtml + "   <div style='position: absolute; display: inline-block; width: "+$.customIndicator.defaults.indicatorWidth+"; height: "+$.customIndicator.defaults.indicatorHeight+"; top: "+$.customIndicator.defaults.indicatorTop+"; left: "+$.customIndicator.defaults.indicatorLeft+"; margin: "+$.customIndicator.defaults.indicatorMargin+"; padding: "+$.customIndicator.defaults.indicatorPadding+"; text-align: center; z-index: "+$.customIndicator.defaults.indicatorZindex+"; background-color: "+$.customIndicator.defaults.indicatorColor+"; opacity: "+$.customIndicator.defaults.indicatorOpacity+"; filter:Alpha(opacity="+($.customIndicator.defaults.indicatorOpacity * 100)+"); color: "+$.customIndicator.defaults.indicatorFontColor+"; font-weight: "+$.customIndicator.defaults.indicatorFontWeight+"; font-family: "+$.customIndicator.defaults.indicatorFontFamily+"; font-size: "+$.customIndicator.defaults.indicatorFontSize+";'>";
                        ajaxIndicatorHtml = ajaxIndicatorHtml + "       <img src='"+$.customIndicator.defaults.indicatorImageUrl+"'>&nbsp;"+$.customIndicator.defaults.indicatorText+"";
                        ajaxIndicatorHtml = ajaxIndicatorHtml + "   </div>";    // end : 전경 영역

                        ajaxIndicatorHtml = ajaxIndicatorHtml + "</div>";   // end : indicator 레이어 영역 전체

                        //$("body", target).append(ajaxIndicatorHtml);
                        target.$("body").append(ajaxIndicatorHtml);
                        target.$($.customIndicator.defaults.indicatorObj).show();
                    } else {
                        target.$($.customIndicator.defaults.indicatorObj).show();
                    }
                }
            } catch(e) {
                $.customIndicator._log("showIndicator", "Exception : " + e);
            }
        },
        hide : function(target) {
            /**
             * indicator element 를 hide.
             */
            try {
                //target.$($.fixFormTable.defaults.indicatorObj).hide();
                target.$($.customIndicator.defaults.indicatorObj).fadeOut();
            } catch(e) {
                $.customIndicator._log("hideIndicator", "Exception : " + e);
            }
        },
        _log : function(_position, _msg) {
            /**
             * console.log 출력 함수.
             */
            try {
                if ($.customIndicator.defaults.debug === true) {
                    var logMsg = "====> [:: jquery.customIndicator.js ::] " + _position + ", " + _msg;

                    if (typeof console == "object") {
                        console.log(logMsg);
                    } else {
                        alert(logMsg);  // console.log 를 지원하지 않는 브라우저 (IE8 이하)
                    }
                }
            } catch(e) {}
        }
    };

})(jQuery);