1 //require ScrollHelper.js  2 function DialogHelper() {  3     var _this = this;  4     var doc = window.document;  5     _this.maskDiv = null;  6     _this.contentDiv = null;  7     var options = {  8         opacity: 0.4  9     }; 10  11     this.popup = function (contentdiv, optionArg) { 12         if (optionArg) { 13             for (var prop in optionArg) { 14                 options[prop] = optionArg[prop]; 15             } 16         } 17  18         _this.contentDiv = contentdiv || _this.contentDiv; 19  20         _this.maskDiv = $(‘<div>‘); 21         _this.maskDiv.addClass(‘MaskDiv‘); 22         _this.maskDiv.css({ 23             ‘filter‘: "Alpha(opacity=" + ( options.opacity - "0" ) * 100 + ");", 24             ‘opacity‘: options.opacity, 25             ‘display‘: ‘block‘ 26         }); 27  28         $(doc.body).append(_this.maskDiv); 29  30         if (_this.contentDiv) { 31             $(doc.body).append(_this.contentDiv); 32             _this.contentDiv.show(); 33             _this.contentDiv.draggable({ 34                 containment: "document", 35                 cursor: ‘move‘, 36                 handle: ".Dialog_Head" 37             }); 38             $(_this.maskDiv).on("mousemove", function() { 39                 $("body").preventScroll(); 40             }); 41             $(_this.maskDiv).on("mouseout", function() { 42                 $("body").liveScroll(); 43             }); 44             if ($(".cke").length == 0 && $(".Dialog_Body").length > 0) { 45                 $(".Dialog_Body").preventOuterScroll(); 46             } 47         } 48     }; 49  50     this.remove = function () { 51         if (_this.contentDiv) { 52             _this.contentDiv.remove(); 53         } 54         if (_this.maskDiv) { 55             _this.maskDiv.remove(); 56         } 57         $("body").liveScroll(); 58     }; 59  60     this.formatPercentNumber = function (value, whole) { 61         if (isNaN(value) && typeof value =http://www.mamicode.com/=="string") { 62             if (value.indexOf("%") !== -1) { 63                 value = http://www.mamicode.com/(value.replace("%", "") / 100) * whole; 64             } else if (value.indexOf("px") !== -1) { 65                 value = http://www.mamicode.com/value.replace("px", ""); 66             } 67         } 68         return Math.ceil(value); 69     }; 70  71     this.position = function (dialog, dialogBody, minusHeight) { 72         dialog = dialog || $(".ShowDialogDiv"); 73         if (dialog[0]) { 74             var clientWidth = document.documentElement.clientWidth; 75             var clientHeight = document.documentElement.clientHeight; 76             var width = _this.formatPercentNumber(dialog.data("position").width, clientWidth) || dialog.width(); 77             var height = _this.formatPercentNumber(dialog.data("position").height, clientHeight) || dialog.height(); 78             width = width < 300 ? 300 : width; 79             height = height < 450 ? 450 : height; 80             $(dialog).css({ 81                 "width": width + "px", 82                 "height": height + "px", 83                 "top": Math.ceil((clientHeight - height) / 2) + "px", 84                 "left": Math.ceil((clientWidth - width) / 2) + "px" 85             }); 86             dialogBody = dialogBody || $(".Dialog_Body"); 87             if (dialogBody[0]) { 88                 minusHeight = minusHeight || ($(".Dialog_Head").outerHeight() + $(".Dialog_Foot").outerHeight()); 89                 var dialogBodyHeight = height - minusHeight; 90                 dialogBody.height(dialogBodyHeight); 91             } 92         } 93     } 94 } 95  96 var createDialogTemplate = function (optionArg, contentHtml, saveBtnClickHandler) { 97     var options = { 98         "Action": "", 99         "Title": "",100         "Width": "50%",101         "Height": "50%"102     };103     if (optionArg) {104         for (var prop in optionArg) {105             options[prop] = optionArg[prop];106         }107     }108     var newDialog = $("<div class=‘ShowDialogDiv‘ id=‘Dialog_" + options.Title + "‘>");109     var DialogHead = $("<div class=‘Dialog_Head‘>").appendTo(newDialog);110     $("<span class=‘HeadLabel‘>").html(options.Action + " " + options.Title).appendTo(DialogHead);111     var DialogClose = $("<span class=‘DialogClose‘>").appendTo(DialogHead);112     var DialogBody = $("<div class=‘Dialog_Body‘>").html(contentHtml).appendTo(newDialog);113     var DialogFoot = $("<div class=‘Dialog_Foot‘>").appendTo(newDialog);114     var newDiv = $("<div class=‘Right‘>").appendTo(DialogFoot);115     var ActionCancelDiv = $("<div class=‘ActionButtonContainer‘ title=‘Cancel‘>").appendTo(newDiv);116     DialogClose.on("click", function() {117         dialogHelper.remove();118     });119     ActionCancelDiv.on("click", function() {120         dialogHelper.remove();121     });122     var newA = $("<div class=‘ActionButton‘ id=‘ActionButtonCancel‘>").appendTo(ActionCancelDiv);123     $("<div class=‘Icon Cancel‘>").appendTo(newA);124     $("<div class=‘Title IconTitle‘>").html("Cancel").appendTo(newA);125     var ActionSaveDiv = $("<div class=‘ActionButtonContainer‘ title=‘Save‘>").appendTo(newDiv);126     var newB = $("<div class=‘ActionButton ActionButtonAttention‘ id=‘ActionButtonSave‘>").appendTo(ActionSaveDiv);127     newB.on(‘click‘, function () {128         if (typeof saveBtnClickHandler == "function") {129             saveBtnClickHandler();130         }131     });132     $("<div class=‘Icon Save‘>").appendTo(newB);133     $("<div class=‘Title IconTitle SaveButton‘>").html("Save").appendTo(newB);134     var minusHeight = DialogHead.outerHeight() + DialogFoot.outerHeight();135     newDialog.data("position", {136         width: options.Width,137         height: options.Height138     });139     dialogHelper.position(newDialog, DialogBody, minusHeight);140     return newDialog;141 };142 143 var changeDialogLayout = function(optionArg, dialogObj) {144     var options = {145         "Width": "70%",146         "Height": "90%"147     };148     if (optionArg) {149         for (var prop in optionArg) {150             options[prop] = optionArg[prop];151         }152     }153     var DialogBody = $(dialogObj).find(".Dialog_Body");154     var DialogHead = $(dialogObj).find(".Dialog_Head");155     var DialogFoot = $(dialogObj).find(".Dialog_Foot");156     var other =  Math.round(DialogBody.css("padding-top").replace(/[a-z]/ig, "")) + Math.round(DialogBody.css("padding-bottom").replace(/[a-z]/ig, ""));157     var minusHeight = DialogHead.outerHeight() + DialogFoot.outerHeight() + other;158     dialogObj.data("position", {159         width: options.Width,160         height: options.Height161     });162     dialogHelper.position(dialogObj, DialogBody, minusHeight);163 };