sco.modal.js 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190
  1. /* ==========================================================
  2. * sco.modal.js
  3. * http://github.com/terebentina/sco.js
  4. * ==========================================================
  5. * Copyright 2013 Dan Caragea.
  6. *
  7. * Licensed under the Apache License, Version 2.0 (the "License");
  8. * you may not use this file except in compliance with the License.
  9. * You may obtain a copy of the License at
  10. *
  11. * http://apache.org/licenses/LICENSE-2.0
  12. *
  13. * Unless required by applicable law or agreed to in writing, software
  14. * distributed under the License is distributed on an "AS IS" BASIS,
  15. * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  16. * See the License for the specific language governing permissions and
  17. * limitations under the License.
  18. * ========================================================== */
  19. /*jshint laxcomma:true, sub:true, browser:true, jquery:true, devel:true, eqeqeq:false */
  20. /*global Spinner:true */
  21. ;(function($, undefined) {
  22. "use strict";
  23. var pluginName = 'scojs_modal';
  24. function Modal(options) {
  25. this.options = $.extend({}, $.fn[pluginName].defaults, options);
  26. this.$modal = $(this.options.target).attr('class', 'modal fade').hide();
  27. var self = this;
  28. function init() {
  29. if (self.options.title === '') {
  30. self.options.title = ' ';
  31. }
  32. };
  33. init();
  34. }
  35. $.extend(Modal.prototype, {
  36. show: function() {
  37. var self = this
  38. ,$backdrop;
  39. if (!this.options.nobackdrop) {
  40. $backdrop = $('.modal-backdrop');
  41. }
  42. if (!this.$modal.length) {
  43. this.$modal = $('<div class="modal fade" id="' + this.options.target.substr(1) + '"><div class="modal-header"><a class="close" href="#" data-dismiss="modal">×</a><h3>&nbsp;</h3></div><div class="inner"/></div>').appendTo(this.options.appendTo).hide();
  44. }
  45. this.$modal.find('.modal-header h3').html(this.options.title);
  46. if (this.options.cssclass !== undefined) {
  47. this.$modal.attr('class', 'modal fade ' + this.options.cssclass);
  48. }
  49. if (this.options.width !== undefined) {
  50. this.$modal.width(this.options.width);
  51. }
  52. if (this.options.left !== undefined) {
  53. this.$modal.css({'left': this.options.left});
  54. }
  55. if (this.options.height !== undefined) {
  56. this.$modal.height(this.options.height);
  57. }
  58. if (this.options.top !== undefined) {
  59. this.$modal.css({'top': this.options.top});
  60. }
  61. if (this.options.keyboard) {
  62. this.escape();
  63. }
  64. if (!this.options.nobackdrop) {
  65. if (!$backdrop.length) {
  66. $backdrop = $('<div class="modal-backdrop fade" />').appendTo(this.options.appendTo);
  67. }
  68. $backdrop[0].offsetWidth; // force reflow
  69. $backdrop.addClass('in');
  70. }
  71. this.$modal.off('close.' + pluginName).on('close.' + pluginName, function() {
  72. self.close.call(self);
  73. });
  74. if (this.options.remote !== undefined && this.options.remote != '' && this.options.remote !== '#') {
  75. var spinner;
  76. if (typeof Spinner == 'function') {
  77. spinner = new Spinner({color: '#3d9bce'}).spin(this.$modal[0]);
  78. }
  79. this.$modal.find('.inner').load(this.options.remote, function() {
  80. if (spinner) {
  81. spinner.stop();
  82. }
  83. if (self.options.cache) {
  84. self.options.content = $(this).html();
  85. delete self.options.remote;
  86. }
  87. });
  88. } else {
  89. this.$modal.find('.inner').html(this.options.content);
  90. }
  91. this.$modal.show().addClass('in');
  92. return this;
  93. }
  94. ,close: function() {
  95. this.$modal.hide().off('.' + pluginName).find('.inner').html('');
  96. if (this.options.cssclass !== undefined) {
  97. this.$modal.removeClass(this.options.cssclass);
  98. }
  99. $(document).off('keyup.' + pluginName);
  100. $('.modal-backdrop').remove();
  101. if (typeof this.options.onClose === 'function') {
  102. this.options.onClose.call(this, this.options);
  103. }
  104. return this;
  105. }
  106. ,destroy: function() {
  107. this.$modal.remove();
  108. $(document).off('keyup.' + pluginName);
  109. $('.modal-backdrop').remove();
  110. this.$modal = null;
  111. return this;
  112. }
  113. ,escape: function() {
  114. var self = this;
  115. $(document).on('keyup.' + pluginName, function(e) {
  116. if (e.which == 27) {
  117. self.close();
  118. }
  119. });
  120. }
  121. });
  122. $.fn[pluginName] = function(options) {
  123. return this.each(function() {
  124. var obj;
  125. if (!(obj = $.data(this, pluginName))) {
  126. var $this = $(this)
  127. ,data = $this.data()
  128. ,opts = $.extend({}, options, data)
  129. ;
  130. if ($this.attr('href') !== '' && $this.attr('href') != '#') {
  131. opts.remote = $this.attr('href');
  132. }
  133. obj = new Modal(opts);
  134. $.data(this, pluginName, obj);
  135. }
  136. obj.show();
  137. });
  138. };
  139. $[pluginName] = function(options) {
  140. return new Modal(options);
  141. };
  142. $.fn[pluginName].defaults = {
  143. title: '&nbsp;' // modal title
  144. ,target: '#modal' // the modal id. MUST be an id for now.
  145. ,content: '' // the static modal content (in case it's not loaded via ajax)
  146. ,appendTo: 'body' // where should the modal be appended to (default to document.body). Added for unit tests, not really needed in real life.
  147. ,cache: false // should we cache the output of the ajax calls so that next time they're shown from cache?
  148. ,keyboard: false
  149. ,nobackdrop: false
  150. };
  151. $(document).on('click.' + pluginName, '[data-trigger="modal"]', function() {
  152. $(this)[pluginName]();
  153. if ($(this).is('a')) {
  154. return false;
  155. }
  156. }).on('click.' + pluginName, '[data-dismiss="modal"]', function(e) {
  157. e.preventDefault();
  158. $(this).closest('.modal').trigger('close');
  159. });
  160. })(jQuery);