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 };