openo-portal/portal-common/src/main/webapp/common/thirdparty/bootstrap-modal/js/bootstrap-modal.js

   1 /* ===========================================================\r
   2  * bootstrap-modal.js v2.2.5\r
   3  * ===========================================================\r
   4  * Copyright 2012 Jordan Schroter\r
   5  *\r
   6  * Licensed under the Apache License, Version 2.0 (the "License");\r
   7  * you may not use this file except in compliance with the License.\r
   8  * You may obtain a copy of the License at\r
   9  *\r
  10  * http://www.apache.org/licenses/LICENSE-2.0\r
  11  *\r
  12  * Unless required by applicable law or agreed to in writing, software\r
  13  * distributed under the License is distributed on an "AS IS" BASIS,\r
  14  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\r
  15  * See the License for the specific language governing permissions and\r
  16  * limitations under the License.\r
  17  * ========================================================== */\r
  18 \r
  19 \r
  20 !function ($) {\r
  21 \r
  22         "use strict"; // jshint ;_;\r
  23 \r
  24         /* MODAL CLASS DEFINITION\r
  25         * ====================== */\r
  26 \r
  27         var Modal = function (element, options) {\r
  28                 this.init(element, options);\r
  29         };\r
  30 \r
  31         Modal.prototype = {\r
  32 \r
  33                 constructor: Modal,\r
  34 \r
  35                 init: function (element, options) {\r
  36                         var that = this;\r
  37 \r
  38                         this.options = options;\r
  39 \r
  40                         this.$element = $(element)\r
  41                                 .delegate('[data-dismiss="modal"]', 'click.dismiss.modal', $.proxy(this.hide, this));\r
  42 \r
  43                         this.options.remote && this.$element.find('.modal-body').load(this.options.remote, function () {\r
  44                                 var e = $.Event('loaded');\r
  45                                 that.$element.trigger(e);\r
  46                         });\r
  47 \r
  48                         var manager = typeof this.options.manager === 'function' ?\r
  49                                 this.options.manager.call(this) : this.options.manager;\r
  50 \r
  51                         manager = manager.appendModal ?\r
  52                                 manager : $(manager).modalmanager().data('modalmanager');\r
  53 \r
  54                         manager.appendModal(this);\r
  55                 },\r
  56 \r
  57                 toggle: function () {\r
  58                         return this[!this.isShown ? 'show' : 'hide']();\r
  59                 },\r
  60 \r
  61                 show: function () {\r
  62                         var e = $.Event('show');\r
  63 \r
  64                         if (this.isShown) return;\r
  65 \r
  66                         this.$element.trigger(e);\r
  67 \r
  68                         if (e.isDefaultPrevented()) return;\r
  69 \r
  70                         this.escape();\r
  71 \r
  72                         this.tab();\r
  73 \r
  74                         this.options.loading && this.loading();\r
  75                 },\r
  76 \r
  77                 hide: function (e) {\r
  78                         e && e.preventDefault();\r
  79 \r
  80                         e = $.Event('hide');\r
  81 \r
  82                         this.$element.trigger(e);\r
  83 \r
  84                         if (!this.isShown || e.isDefaultPrevented()) return;\r
  85 \r
  86                         this.isShown = false;\r
  87 \r
  88                         this.escape();\r
  89 \r
  90                         this.tab();\r
  91 \r
  92                         this.isLoading && this.loading();\r
  93 \r
  94                         $(document).off('focusin.modal');\r
  95 \r
  96                         this.$element\r
  97                                 .removeClass('in')\r
  98                                 .removeClass('animated')\r
  99                                 .removeClass(this.options.attentionAnimation)\r
 100                                 .removeClass('modal-overflow')\r
 101                                 .attr('aria-hidden', true);\r
 102 \r
 103                         $.support.transition && this.$element.hasClass('fade') ?\r
 104                                 this.hideWithTransition() :\r
 105                                 this.hideModal();\r
 106                 },\r
 107 \r
 108                 layout: function () {\r
 109                         var prop = this.options.height ? 'height' : 'max-height',\r
 110                                 value = this.options.height || this.options.maxHeight;\r
 111 \r
 112                         if (this.options.width){\r
 113                                 this.$element.css('width', this.options.width);\r
 114 \r
 115                                 var that = this;\r
 116                                 this.$element.css('margin-left', function () {\r
 117                                         if (/%/ig.test(that.options.width)){\r
 118                                                 return -(parseInt(that.options.width) / 2) + '%';\r
 119                                         } else {\r
 120                                                 return -($(this).width() / 2) + 'px';\r
 121                                         }\r
 122                                 });\r
 123                         } else {\r
 124                                 this.$element.css('width', '');\r
 125                                 this.$element.css('margin-left', '');\r
 126                         }\r
 127 \r
 128                         this.$element.find('.modal-body')\r
 129                                 .css('overflow', '')\r
 130                                 .css(prop, '');\r
 131 \r
 132                         if (value){\r
 133                                 this.$element.find('.modal-body')\r
 134                                         .css('overflow', 'auto')\r
 135                                         .css(prop, value);\r
 136                         }\r
 137 \r
 138                         var modalOverflow = $(window).height() - 10 < this.$element.height();\r
 139             \r
 140                         if (modalOverflow || this.options.modalOverflow) {\r
 141                                 this.$element\r
 142                                         .css('margin-top', 0)\r
 143                                         .addClass('modal-overflow');\r
 144                         } else {\r
 145                                 this.$element\r
 146                                         .css('margin-top', 0 - this.$element.height() / 2)\r
 147                                         .removeClass('modal-overflow');\r
 148                         }\r
 149                 },\r
 150 \r
 151                 tab: function () {\r
 152                         var that = this;\r
 153 \r
 154                         if (this.isShown && this.options.consumeTab) {\r
 155                                 this.$element.on('keydown.tabindex.modal', '[data-tabindex]', function (e) {\r
 156                                 if (e.keyCode && e.keyCode == 9){\r
 157                                                 var elements = [],\r
 158                                                         tabindex = Number($(this).data('tabindex'));\r
 159 \r
 160                                                 that.$element.find('[data-tabindex]:enabled:visible:not([readonly])').each(function (ev) {\r
 161                                                         elements.push(Number($(this).data('tabindex')));\r
 162                                                 });\r
 163                                                 elements.sort(function(a,b){return a-b});\r
 164                                                 \r
 165                                                 var arrayPos = $.inArray(tabindex, elements);\r
 166                                                 if (!e.shiftKey){\r
 167                                                                 arrayPos < elements.length-1 ?\r
 168                                                                         that.$element.find('[data-tabindex='+elements[arrayPos+1]+']').focus() :\r
 169                                                                         that.$element.find('[data-tabindex='+elements[0]+']').focus();\r
 170                                                         } else {\r
 171                                                                 arrayPos == 0 ?\r
 172                                                                         that.$element.find('[data-tabindex='+elements[elements.length-1]+']').focus() :\r
 173                                                                         that.$element.find('[data-tabindex='+elements[arrayPos-1]+']').focus();\r
 174                                                         }\r
 175                                                 \r
 176                                                 e.preventDefault();\r
 177                                         }\r
 178                                 });\r
 179                         } else if (!this.isShown) {\r
 180                                 this.$element.off('keydown.tabindex.modal');\r
 181                         }\r
 182                 },\r
 183 \r
 184                 escape: function () {\r
 185                         var that = this;\r
 186                         if (this.isShown && this.options.keyboard) {\r
 187                                 if (!this.$element.attr('tabindex')) this.$element.attr('tabindex', -1);\r
 188 \r
 189                                 this.$element.on('keyup.dismiss.modal', function (e) {\r
 190                                         e.which == 27 && that.hide();\r
 191                                 });\r
 192                         } else if (!this.isShown) {\r
 193                                 this.$element.off('keyup.dismiss.modal')\r
 194                         }\r
 195                 },\r
 196 \r
 197                 hideWithTransition: function () {\r
 198                         var that = this\r
 199                                 , timeout = setTimeout(function () {\r
 200                                         that.$element.off($.support.transition.end);\r
 201                                         that.hideModal();\r
 202                                 }, 500);\r
 203 \r
 204                         this.$element.one($.support.transition.end, function () {\r
 205                                 clearTimeout(timeout);\r
 206                                 that.hideModal();\r
 207                         });\r
 208                 },\r
 209 \r
 210                 hideModal: function () {\r
 211                         var prop = this.options.height ? 'height' : 'max-height';\r
 212                         var value = this.options.height || this.options.maxHeight;\r
 213 \r
 214                         if (value){\r
 215                                 this.$element.find('.modal-body')\r
 216                                         .css('overflow', '')\r
 217                                         .css(prop, '');\r
 218                         }\r
 219 \r
 220                         this.$element\r
 221                                 .hide()\r
 222                                 .trigger('hidden');\r
 223                 },\r
 224 \r
 225                 removeLoading: function () {\r
 226                         this.$loading.remove();\r
 227                         this.$loading = null;\r
 228                         this.isLoading = false;\r
 229                 },\r
 230 \r
 231                 loading: function (callback) {\r
 232                         callback = callback || function () {};\r
 233 \r
 234                         var animate = this.$element.hasClass('fade') ? 'fade' : '';\r
 235 \r
 236                         if (!this.isLoading) {\r
 237                                 var doAnimate = $.support.transition && animate;\r
 238 \r
 239                                 this.$loading = $('<div class="loading-mask ' + animate + '">')\r
 240                                         .append(this.options.spinner)\r
 241                                         .appendTo(this.$element);\r
 242 \r
 243                                 if (doAnimate) this.$loading[0].offsetWidth; // force reflow\r
 244 \r
 245                                 this.$loading.addClass('in');\r
 246 \r
 247                                 this.isLoading = true;\r
 248 \r
 249                                 doAnimate ?\r
 250                                         this.$loading.one($.support.transition.end, callback) :\r
 251                                         callback();\r
 252 \r
 253                         } else if (this.isLoading && this.$loading) {\r
 254                                 this.$loading.removeClass('in');\r
 255 \r
 256                                 var that = this;\r
 257                                 $.support.transition && this.$element.hasClass('fade')?\r
 258                                         this.$loading.one($.support.transition.end, function () { that.removeLoading() }) :\r
 259                                         that.removeLoading();\r
 260 \r
 261                         } else if (callback) {\r
 262                                 callback(this.isLoading);\r
 263                         }\r
 264                 },\r
 265 \r
 266                 focus: function () {\r
 267                         var $focusElem = this.$element.find(this.options.focusOn);\r
 268 \r
 269                         $focusElem = $focusElem.length ? $focusElem : this.$element;\r
 270 \r
 271                         $focusElem.focus();\r
 272                 },\r
 273 \r
 274                 attention: function (){\r
 275                         // NOTE: transitionEnd with keyframes causes odd behaviour\r
 276 \r
 277                         if (this.options.attentionAnimation){\r
 278                                 this.$element\r
 279                                         .removeClass('animated')\r
 280                                         .removeClass(this.options.attentionAnimation);\r
 281 \r
 282                                 var that = this;\r
 283 \r
 284                                 setTimeout(function () {\r
 285                                         that.$element\r
 286                                                 .addClass('animated')\r
 287                                                 .addClass(that.options.attentionAnimation);\r
 288                                 }, 0);\r
 289                         }\r
 290 \r
 291 \r
 292                         this.focus();\r
 293                 },\r
 294 \r
 295 \r
 296                 destroy: function () {\r
 297                         var e = $.Event('destroy');\r
 298 \r
 299                         this.$element.trigger(e);\r
 300 \r
 301                         if (e.isDefaultPrevented()) return;\r
 302 \r
 303                         this.$element\r
 304                                 .off('.modal')\r
 305                                 .removeData('modal')\r
 306                                 .removeClass('in')\r
 307                                 .attr('aria-hidden', true);\r
 308                         \r
 309                         if (this.$parent !== this.$element.parent()) {\r
 310                                 this.$element.appendTo(this.$parent);\r
 311                         } else if (!this.$parent.length) {\r
 312                                 // modal is not part of the DOM so remove it.\r
 313                                 this.$element.remove();\r
 314                                 this.$element = null;\r
 315                         }\r
 316 \r
 317                         this.$element.trigger('destroyed');\r
 318                 }\r
 319         };\r
 320 \r
 321 \r
 322         /* MODAL PLUGIN DEFINITION\r
 323         * ======================= */\r
 324 \r
 325         $.fn.modal = function (option, args) {\r
 326                 return this.each(function () {\r
 327                         var $this = $(this),\r
 328                                 data = $this.data('modal'),\r
 329                                 options = $.extend({}, $.fn.modal.defaults, $this.data(), typeof option == 'object' && option);\r
 330 \r
 331                         if (!data) $this.data('modal', (data = new Modal(this, options)));\r
 332                         if (typeof option == 'string') data[option].apply(data, [].concat(args));\r
 333                         else if (options.show) data.show()\r
 334                 })\r
 335         };\r
 336 \r
 337         $.fn.modal.defaults = {\r
 338                 keyboard: true,\r
 339                 backdrop: true,\r
 340                 loading: false,\r
 341                 show: true,\r
 342                 width: null,\r
 343                 height: null,\r
 344                 maxHeight: null,\r
 345                 modalOverflow: false,\r
 346                 consumeTab: true,\r
 347                 focusOn: null,\r
 348                 replace: false,\r
 349                 resize: false,\r
 350                 attentionAnimation: 'shake',\r
 351                 manager: 'body',\r
 352                 spinner: '<div class="loading-spinner" style="width: 200px; margin-left: -100px;"><div class="progress progress-striped active"><div class="bar" style="width: 100%;"></div></div></div>',\r
 353                 backdropTemplate: '<div class="modal-backdrop" />'\r
 354         };\r
 355 \r
 356         $.fn.modal.Constructor = Modal;\r
 357 \r
 358 \r
 359         /* MODAL DATA-API\r
 360         * ============== */\r
 361 \r
 362         $(function () {\r
 363                 $(document).off('click.modal').on('click.modal.data-api', '[data-toggle="modal"]', function ( e ) {\r
 364                         var $this = $(this),\r
 365                                 href = $this.attr('href'),\r
 366                                 $target = $($this.attr('data-target') || (href && href.replace(/.*(?=#[^\s]+$)/, ''))), //strip for ie7\r
 367                                 option = $target.data('modal') ? 'toggle' : $.extend({ remote: !/#/.test(href) && href }, $target.data(), $this.data());\r
 368 \r
 369                         e.preventDefault();\r
 370                         $target\r
 371                                 .modal(option)\r
 372                                 .one('hide', function () {\r
 373                                         $this.focus();\r
 374                                 })\r
 375                 });\r
 376         });\r
 377 \r
 378 }(window.jQuery);\r