DialogHelper

  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 === "string") {
 62             if (value.indexOf("%") !== -1) {
 63                 value = (value.replace("%", "") / 100) * whole;
 64             } else if (value.indexOf("px") !== -1) {
 65                 value = 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.Height
138     });
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.Height
161     });
162     dialogHelper.position(dialogObj, DialogBody, minusHeight);
163 };