PumpkinHouseWeb/Scripts/dialog.js

   1 function find(targetOrSelector) {\r
   2     if (typeof targetOrSelector === 'string') {\r
   3         return $(targetOrSelector);\r
   4     }\r
   5     else return targetOrSelector;\r
   6 }\r
   7 \r
   8 (function ($) {\r
   9     $.extend($.fn, {\r
  10         mDialog: function (options) {\r
  11             // if nothing is selected, return nothing; can't chain anyway\r
  12                     if (!this.length) {\r
  13                             options && options.debug && window.console && console.warn( "nothing selected, can't validate, returning nothing" );\r
  14                             return;\r
  15                     }\r
  16             \r
  17             var defaults = {\r
  18                 width: 400,\r
  19                 height: 200,\r
  20                 modal: true,\r
  21                 autoOpen: true, \r
  22                 closeBtnClass: 'close',\r
  23                 borderWidth: 10,\r
  24                 showCloseBtn: true,\r
  25                 position_x: 'center',\r
  26                 position_y: 'center'\r
  27             }\r
  28 \r
  29             var settings = $.extend( true, {}, defaults, options );\r
  30 \r
  31             content = $('<div></div>').append(this);\r
  32             var dialog = $('#normalDialogTemplate').tmpl({ message: content.html() });\r
  33             this.dialog = dialog;\r
  34             dialog.settings = settings;\r
  35 \r
  36             var target = dialog.find('messageBoxCon');\r
  37             dialog.css('width', settings.width).css('height', settings.height);\r
  38             dialog.css('z-index', 2001);\r
  39             $('.messageBoxConBg', dialog).css('width', settings.width + settings.borderWidth * 2)\r
  40                 .css('height', settings.height + settings.borderWidth * 2)\r
  41                 .css('left', settings.borderWidth * -1).css('top', settings.borderWidth * -1);\r
  42             var margin = settings.borderWidth;\r
  43             if (margin < 0) margin = 0;\r
  44             $('.messageDialog', dialog).css('margin', margin);\r
  45             centerDialogForIE9(dialog);\r
  46 \r
  47             $(document.body).append(dialog);\r
  48             if (settings.modal) {\r
  49                 var overlay = $('<div id="overlay"></div>');\r
  50                 $(document.body).append(overlay);\r
  51                 dialog.overlay = overlay;\r
  52             }\r
  53 \r
  54             if (settings.autoOpen) {\r
  55                 dialog.showDialog();\r
  56             }\r
  57 \r
  58             var closeBtn = dialog.find('.close');\r
  59             if (settings.showCloseBtn) {\r
  60                 closeBtn.show();\r
  61             }\r
  62             else {\r
  63                 closeBtn.hide();\r
  64             }\r
  65             if (settings.closeBtnClass) {\r
  66                 closeBtn.addClass(settings.closeBtnClass)\r
  67             }\r
  68 \r
  69             closeBtn.on('click', function () {\r
  70                 dialog.closeDialog();\r
  71             });\r
  72 \r
  73             return dialog;\r
  74         },\r
  75         showDialog: function() {\r
  76             var top;\r
  77             var left;\r
  78             switch (this.settings.position_x) {\r
  79                 case 'center': \r
  80                     left = ($(window).width() - this.width()) / 2;\r
  81                     break;\r
  82                 case 'left':\r
  83                     left = 0;\r
  84                     break;\r
  85                 case 'right':\r
  86                     left = $(window).width() - this.width();\r
  87                     break;\r
  88             }\r
  89 \r
  90             switch (this.settings.position_y) {\r
  91                 case 'center':\r
  92                     top = ($(window).height() - this.height()) / 2;\r
  93                     break;\r
  94                 case 'top':\r
  95                     top = 0;\r
  96                     break;\r
  97                 case 'bottom':\r
  98                     top = $(window).height() - this.height();\r
  99                     break;\r
 100             }\r
 101             this.css('top', top).css('left', left);\r
 102             this.show();\r
 103             centerDialogForIE9(this.dialog);\r
 104             var overlay = this.overlay;\r
 105             if (overlay) {\r
 106                 overlay.css('top', 0).css('left', 0);\r
 107                 overlay.show();\r
 108             }     \r
 109         },\r
 110         closeDialog: function() {\r
 111             this.hide();\r
 112             var overlay = this.overlay;\r
 113             if (overlay) {\r
 114                 overlay.hide();\r
 115             }    \r
 116         },\r
 117         destroyDialog: function() {\r
 118             var overlay = this.overlay;\r
 119             if (overlay) {\r
 120                 overlay.remove();\r
 121             }\r
 122             this.remove();\r
 123         }\r
 124     });\r
 125 })(jQuery);\r