bootstrap-dialog.js 43 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277
  1. /* global define */
  2. /* ================================================
  3. * Make use of Bootstrap's modal more monkey-friendly.
  4. *
  5. * For Bootstrap 3.
  6. *
  7. * javanoob@hotmail.com
  8. *
  9. * https://github.com/nakupanda/bootstrap3-dialog
  10. *
  11. * Licensed under The MIT License.
  12. * ================================================ */
  13. (function(root, factory) {
  14. "use strict";
  15. // CommonJS module is defined
  16. if (typeof module !== 'undefined' && module.exports) {
  17. module.exports = factory(require('jquery'), require('bootstrap'));
  18. }
  19. // AMD module is defined
  20. else if (typeof define === "function" && define.amd) {
  21. define("bootstrap-dialog", ["jquery"], function($) {
  22. return factory($);
  23. });
  24. } else {
  25. // planted over the root!
  26. root.BootstrapDialog = factory(root.jQuery);
  27. }
  28. }(this, function($) {
  29. "use strict";
  30. /* ================================================
  31. * Definition of BootstrapDialogModal.
  32. * Extend Bootstrap Modal and override some functions.
  33. * BootstrapDialogModal === Modified Modal.
  34. * ================================================ */
  35. var Modal = $.fn.modal.Constructor;
  36. var BootstrapDialogModal = function(element, options) {
  37. Modal.call(this, element, options);
  38. };
  39. BootstrapDialogModal.getModalVersion = function() {
  40. var version = null;
  41. if (typeof $.fn.modal.Constructor.VERSION === 'undefined') {
  42. version = 'v3.1';
  43. } else if (/3\.2\.\d+/.test($.fn.modal.Constructor.VERSION)) {
  44. version = 'v3.2';
  45. } else if (/3\.3\.[1,2]/.test($.fn.modal.Constructor.VERSION)) {
  46. version = 'v3.3'; // v3.3.1, v3.3.2
  47. } else {
  48. version = 'v3.3.4';
  49. }
  50. return version;
  51. };
  52. BootstrapDialogModal.ORIGINAL_BODY_PADDING = $('body').css('padding-right') || 0;
  53. BootstrapDialogModal.METHODS_TO_OVERRIDE = {};
  54. BootstrapDialogModal.METHODS_TO_OVERRIDE['v3.1'] = {};
  55. BootstrapDialogModal.METHODS_TO_OVERRIDE['v3.2'] = {
  56. hide: function(e) {
  57. if (e) {
  58. e.preventDefault();
  59. }
  60. e = $.Event('hide.bs.modal');
  61. this.$element.trigger(e);
  62. if (!this.isShown || e.isDefaultPrevented()) {
  63. return;
  64. }
  65. this.isShown = false;
  66. // Remove css class 'modal-open' when the last opened dialog is closing.
  67. var openedDialogs = this.getGlobalOpenedDialogs();
  68. if (openedDialogs.length === 0) {
  69. this.$body.removeClass('modal-open');
  70. }
  71. this.resetScrollbar();
  72. this.escape();
  73. $(document).off('focusin.bs.modal');
  74. this.$element
  75. .removeClass('in')
  76. .attr('aria-hidden', true)
  77. .off('click.dismiss.bs.modal');
  78. $.support.transition && this.$element.hasClass('fade') ?
  79. this.$element
  80. .one('bsTransitionEnd', $.proxy(this.hideModal, this))
  81. .emulateTransitionEnd(300) :
  82. this.hideModal();
  83. }
  84. };
  85. BootstrapDialogModal.METHODS_TO_OVERRIDE['v3.3'] = {
  86. /**
  87. * Overrided.
  88. *
  89. * @returns {undefined}
  90. */
  91. setScrollbar: function() {
  92. var bodyPad = BootstrapDialogModal.ORIGINAL_BODY_PADDING;
  93. if (this.bodyIsOverflowing) {
  94. this.$body.css('padding-right', bodyPad + this.scrollbarWidth);
  95. }
  96. },
  97. /**
  98. * Overrided.
  99. *
  100. * @returns {undefined}
  101. */
  102. resetScrollbar: function() {
  103. var openedDialogs = this.getGlobalOpenedDialogs();
  104. if (openedDialogs.length === 0) {
  105. this.$body.css('padding-right', BootstrapDialogModal.ORIGINAL_BODY_PADDING);
  106. }
  107. },
  108. /**
  109. * Overrided.
  110. *
  111. * @returns {undefined}
  112. */
  113. hideModal: function() {
  114. this.$element.hide();
  115. this.backdrop($.proxy(function() {
  116. var openedDialogs = this.getGlobalOpenedDialogs();
  117. if (openedDialogs.length === 0) {
  118. this.$body.removeClass('modal-open');
  119. }
  120. this.resetAdjustments();
  121. this.resetScrollbar();
  122. this.$element.trigger('hidden.bs.modal');
  123. }, this));
  124. }
  125. };
  126. BootstrapDialogModal.METHODS_TO_OVERRIDE['v3.3.4'] = $.extend({}, BootstrapDialogModal.METHODS_TO_OVERRIDE['v3.3']);
  127. BootstrapDialogModal.prototype = {
  128. constructor: BootstrapDialogModal,
  129. /**
  130. * New function, to get the dialogs that opened by BootstrapDialog.
  131. *
  132. * @returns {undefined}
  133. */
  134. getGlobalOpenedDialogs: function() {
  135. var openedDialogs = [];
  136. $.each(BootstrapDialog.dialogs, function(id, dialogInstance) {
  137. if (dialogInstance.isRealized() && dialogInstance.isOpened()) {
  138. openedDialogs.push(dialogInstance);
  139. }
  140. });
  141. return openedDialogs;
  142. }
  143. };
  144. // Add compatible methods.
  145. BootstrapDialogModal.prototype = $.extend(BootstrapDialogModal.prototype, Modal.prototype, BootstrapDialogModal.METHODS_TO_OVERRIDE[BootstrapDialogModal.getModalVersion()]);
  146. /* ================================================
  147. * Definition of BootstrapDialog.
  148. * ================================================ */
  149. var BootstrapDialog = function(options) {
  150. this.defaultOptions = $.extend(true, {
  151. id: BootstrapDialog.newGuid(),
  152. buttons: [],
  153. data: {},
  154. onshow: null,
  155. onshown: null,
  156. onhide: null,
  157. onhidden: null
  158. }, BootstrapDialog.defaultOptions);
  159. this.indexedButtons = {};
  160. this.registeredButtonHotkeys = {};
  161. this.draggableData = {
  162. isMouseDown: false,
  163. mouseOffset: {}
  164. };
  165. this.realized = false;
  166. this.opened = false;
  167. this.initOptions(options);
  168. this.holdThisInstance();
  169. };
  170. BootstrapDialog.BootstrapDialogModal = BootstrapDialogModal;
  171. /**
  172. * Some constants.
  173. */
  174. BootstrapDialog.NAMESPACE = 'bootstrap-dialog';
  175. BootstrapDialog.TYPE_DEFAULT = 'type-default';
  176. BootstrapDialog.TYPE_INFO = 'type-info';
  177. BootstrapDialog.TYPE_PRIMARY = 'type-primary';
  178. BootstrapDialog.TYPE_SUCCESS = 'type-success';
  179. BootstrapDialog.TYPE_WARNING = 'type-warning';
  180. BootstrapDialog.TYPE_DANGER = 'type-danger';
  181. BootstrapDialog.DEFAULT_TEXTS = {};
  182. BootstrapDialog.DEFAULT_TEXTS[BootstrapDialog.TYPE_DEFAULT] = 'Information';
  183. BootstrapDialog.DEFAULT_TEXTS[BootstrapDialog.TYPE_INFO] = 'Information';
  184. BootstrapDialog.DEFAULT_TEXTS[BootstrapDialog.TYPE_PRIMARY] = 'Information';
  185. BootstrapDialog.DEFAULT_TEXTS[BootstrapDialog.TYPE_SUCCESS] = 'Success';
  186. BootstrapDialog.DEFAULT_TEXTS[BootstrapDialog.TYPE_WARNING] = 'Warning';
  187. BootstrapDialog.DEFAULT_TEXTS[BootstrapDialog.TYPE_DANGER] = 'Danger';
  188. BootstrapDialog.DEFAULT_TEXTS['OK'] = 'OK';
  189. BootstrapDialog.DEFAULT_TEXTS['CANCEL'] = 'Cancel';
  190. BootstrapDialog.DEFAULT_TEXTS['CONFIRM'] = 'Confirmation';
  191. BootstrapDialog.SIZE_NORMAL = 'size-normal';
  192. BootstrapDialog.SIZE_SMALL = 'size-small';
  193. BootstrapDialog.SIZE_WIDE = 'size-wide'; // size-wide is equal to modal-lg
  194. BootstrapDialog.SIZE_LARGE = 'size-large';
  195. BootstrapDialog.BUTTON_SIZES = {};
  196. BootstrapDialog.BUTTON_SIZES[BootstrapDialog.SIZE_NORMAL] = '';
  197. BootstrapDialog.BUTTON_SIZES[BootstrapDialog.SIZE_SMALL] = '';
  198. BootstrapDialog.BUTTON_SIZES[BootstrapDialog.SIZE_WIDE] = '';
  199. BootstrapDialog.BUTTON_SIZES[BootstrapDialog.SIZE_LARGE] = 'btn-lg';
  200. BootstrapDialog.ICON_SPINNER = 'glyphicon glyphicon-asterisk';
  201. /**
  202. * Default options.
  203. */
  204. BootstrapDialog.defaultOptions = {
  205. type: BootstrapDialog.TYPE_PRIMARY,
  206. size: BootstrapDialog.SIZE_NORMAL,
  207. cssClass: '',
  208. title: null,
  209. message: null,
  210. nl2br: true,
  211. closable: true,
  212. closeByBackdrop: true,
  213. closeByKeyboard: true,
  214. spinicon: BootstrapDialog.ICON_SPINNER,
  215. autodestroy: true,
  216. draggable: false,
  217. animate: true,
  218. description: ''
  219. };
  220. /**
  221. * Config default options.
  222. */
  223. BootstrapDialog.configDefaultOptions = function(options) {
  224. BootstrapDialog.defaultOptions = $.extend(true, BootstrapDialog.defaultOptions, options);
  225. };
  226. /**
  227. * Open / Close all created dialogs all at once.
  228. */
  229. BootstrapDialog.dialogs = {};
  230. BootstrapDialog.openAll = function() {
  231. $.each(BootstrapDialog.dialogs, function(id, dialogInstance) {
  232. dialogInstance.open();
  233. });
  234. };
  235. BootstrapDialog.closeAll = function() {
  236. $.each(BootstrapDialog.dialogs, function(id, dialogInstance) {
  237. dialogInstance.close();
  238. });
  239. };
  240. /**
  241. * Move focus to next visible dialog.
  242. */
  243. BootstrapDialog.moveFocus = function() {
  244. var lastDialogInstance = null;
  245. $.each(BootstrapDialog.dialogs, function(id, dialogInstance) {
  246. lastDialogInstance = dialogInstance;
  247. });
  248. if (lastDialogInstance !== null && lastDialogInstance.isRealized()) {
  249. lastDialogInstance.getModal().focus();
  250. }
  251. };
  252. BootstrapDialog.METHODS_TO_OVERRIDE = {};
  253. BootstrapDialog.METHODS_TO_OVERRIDE['v3.1'] = {
  254. handleModalBackdropEvent: function() {
  255. this.getModal().on('click', {dialog: this}, function(event) {
  256. event.target === this && event.data.dialog.isClosable() && event.data.dialog.canCloseByBackdrop() && event.data.dialog.close();
  257. });
  258. return this;
  259. },
  260. /**
  261. * To make multiple opened dialogs look better.
  262. *
  263. * Will be removed in later version, after Bootstrap Modal >= 3.3.0, updating z-index is unnecessary.
  264. */
  265. updateZIndex: function() {
  266. var zIndexBackdrop = 1040;
  267. var zIndexModal = 1050;
  268. var dialogCount = 0;
  269. $.each(BootstrapDialog.dialogs, function(dialogId, dialogInstance) {
  270. dialogCount++;
  271. });
  272. var $modal = this.getModal();
  273. var $backdrop = $modal.data('bs.modal').$backdrop;
  274. $modal.css('z-index', zIndexModal + (dialogCount - 1) * 20);
  275. $backdrop.css('z-index', zIndexBackdrop + (dialogCount - 1) * 20);
  276. return this;
  277. },
  278. open: function() {
  279. !this.isRealized() && this.realize();
  280. this.getModal().modal('show');
  281. this.updateZIndex();
  282. return this;
  283. }
  284. };
  285. BootstrapDialog.METHODS_TO_OVERRIDE['v3.2'] = {
  286. handleModalBackdropEvent: BootstrapDialog.METHODS_TO_OVERRIDE['v3.1']['handleModalBackdropEvent'],
  287. updateZIndex: BootstrapDialog.METHODS_TO_OVERRIDE['v3.1']['updateZIndex'],
  288. open: BootstrapDialog.METHODS_TO_OVERRIDE['v3.1']['open']
  289. };
  290. BootstrapDialog.METHODS_TO_OVERRIDE['v3.3'] = {};
  291. BootstrapDialog.METHODS_TO_OVERRIDE['v3.3.4'] = $.extend({}, BootstrapDialog.METHODS_TO_OVERRIDE['v3.1']);
  292. BootstrapDialog.prototype = {
  293. constructor: BootstrapDialog,
  294. initOptions: function(options) {
  295. this.options = $.extend(true, this.defaultOptions, options);
  296. return this;
  297. },
  298. holdThisInstance: function() {
  299. BootstrapDialog.dialogs[this.getId()] = this;
  300. return this;
  301. },
  302. initModalStuff: function() {
  303. this.setModal(this.createModal())
  304. .setModalDialog(this.createModalDialog())
  305. .setModalContent(this.createModalContent())
  306. .setModalHeader(this.createModalHeader())
  307. .setModalBody(this.createModalBody())
  308. .setModalFooter(this.createModalFooter());
  309. this.getModal().append(this.getModalDialog());
  310. this.getModalDialog().append(this.getModalContent());
  311. this.getModalContent()
  312. .append(this.getModalHeader())
  313. .append(this.getModalBody())
  314. .append(this.getModalFooter());
  315. return this;
  316. },
  317. createModal: function() {
  318. var $modal = $('<div class="modal" tabindex="-1" role="dialog" aria-hidden="true"></div>');
  319. $modal.prop('id', this.getId()).attr('aria-labelledby', this.getId() + '_title');
  320. return $modal;
  321. },
  322. getModal: function() {
  323. return this.$modal;
  324. },
  325. setModal: function($modal) {
  326. this.$modal = $modal;
  327. return this;
  328. },
  329. createModalDialog: function() {
  330. return $('<div class="modal-dialog"></div>');
  331. },
  332. getModalDialog: function() {
  333. return this.$modalDialog;
  334. },
  335. setModalDialog: function($modalDialog) {
  336. this.$modalDialog = $modalDialog;
  337. return this;
  338. },
  339. createModalContent: function() {
  340. return $('<div class="modal-content"></div>');
  341. },
  342. getModalContent: function() {
  343. return this.$modalContent;
  344. },
  345. setModalContent: function($modalContent) {
  346. this.$modalContent = $modalContent;
  347. return this;
  348. },
  349. createModalHeader: function() {
  350. return $('<div class="modal-header"></div>');
  351. },
  352. getModalHeader: function() {
  353. return this.$modalHeader;
  354. },
  355. setModalHeader: function($modalHeader) {
  356. this.$modalHeader = $modalHeader;
  357. return this;
  358. },
  359. createModalBody: function() {
  360. return $('<div class="modal-body"></div>');
  361. },
  362. getModalBody: function() {
  363. return this.$modalBody;
  364. },
  365. setModalBody: function($modalBody) {
  366. this.$modalBody = $modalBody;
  367. return this;
  368. },
  369. createModalFooter: function() {
  370. return $('<div class="modal-footer"></div>');
  371. },
  372. getModalFooter: function() {
  373. return this.$modalFooter;
  374. },
  375. setModalFooter: function($modalFooter) {
  376. this.$modalFooter = $modalFooter;
  377. return this;
  378. },
  379. createDynamicContent: function(rawContent) {
  380. var content = null;
  381. if (typeof rawContent === 'function') {
  382. content = rawContent.call(rawContent, this);
  383. } else {
  384. content = rawContent;
  385. }
  386. if (typeof content === 'string') {
  387. content = this.formatStringContent(content);
  388. }
  389. return content;
  390. },
  391. formatStringContent: function(content) {
  392. if (this.options.nl2br) {
  393. return content.replace(/\r\n/g, '<br />').replace(/[\r\n]/g, '<br />');
  394. }
  395. return content;
  396. },
  397. setData: function(key, value) {
  398. this.options.data[key] = value;
  399. return this;
  400. },
  401. getData: function(key) {
  402. return this.options.data[key];
  403. },
  404. setId: function(id) {
  405. this.options.id = id;
  406. return this;
  407. },
  408. getId: function() {
  409. return this.options.id;
  410. },
  411. getType: function() {
  412. return this.options.type;
  413. },
  414. setType: function(type) {
  415. this.options.type = type;
  416. this.updateType();
  417. return this;
  418. },
  419. updateType: function() {
  420. if (this.isRealized()) {
  421. var types = [BootstrapDialog.TYPE_DEFAULT,
  422. BootstrapDialog.TYPE_INFO,
  423. BootstrapDialog.TYPE_PRIMARY,
  424. BootstrapDialog.TYPE_SUCCESS,
  425. BootstrapDialog.TYPE_WARNING,
  426. BootstrapDialog.TYPE_DANGER];
  427. this.getModal().removeClass(types.join(' ')).addClass(this.getType());
  428. }
  429. return this;
  430. },
  431. getSize: function() {
  432. return this.options.size;
  433. },
  434. setSize: function(size) {
  435. this.options.size = size;
  436. this.updateSize();
  437. return this;
  438. },
  439. updateSize: function() {
  440. if (this.isRealized()) {
  441. var dialog = this;
  442. // Dialog size
  443. this.getModal().removeClass(BootstrapDialog.SIZE_NORMAL)
  444. .removeClass(BootstrapDialog.SIZE_SMALL)
  445. .removeClass(BootstrapDialog.SIZE_WIDE)
  446. .removeClass(BootstrapDialog.SIZE_LARGE);
  447. this.getModal().addClass(this.getSize());
  448. // Smaller dialog.
  449. this.getModalDialog().removeClass('modal-sm');
  450. if (this.getSize() === BootstrapDialog.SIZE_SMALL) {
  451. this.getModalDialog().addClass('modal-sm');
  452. }
  453. // Wider dialog.
  454. this.getModalDialog().removeClass('modal-lg');
  455. if (this.getSize() === BootstrapDialog.SIZE_WIDE) {
  456. this.getModalDialog().addClass('modal-lg');
  457. }
  458. // Button size
  459. $.each(this.options.buttons, function(index, button) {
  460. var $button = dialog.getButton(button.id);
  461. var buttonSizes = ['btn-lg', 'btn-sm', 'btn-xs'];
  462. var sizeClassSpecified = false;
  463. if (typeof button['cssClass'] === 'string') {
  464. var btnClasses = button['cssClass'].split(' ');
  465. $.each(btnClasses, function(index, btnClass) {
  466. if ($.inArray(btnClass, buttonSizes) !== -1) {
  467. sizeClassSpecified = true;
  468. }
  469. });
  470. }
  471. if (!sizeClassSpecified) {
  472. $button.removeClass(buttonSizes.join(' '));
  473. $button.addClass(dialog.getButtonSize());
  474. }
  475. });
  476. }
  477. return this;
  478. },
  479. getCssClass: function() {
  480. return this.options.cssClass;
  481. },
  482. setCssClass: function(cssClass) {
  483. this.options.cssClass = cssClass;
  484. return this;
  485. },
  486. getTitle: function() {
  487. return this.options.title;
  488. },
  489. setTitle: function(title) {
  490. this.options.title = title;
  491. this.updateTitle();
  492. return this;
  493. },
  494. updateTitle: function() {
  495. if (this.isRealized()) {
  496. var title = this.getTitle() !== null ? this.createDynamicContent(this.getTitle()) : this.getDefaultText();
  497. this.getModalHeader().find('.' + this.getNamespace('title')).html('').append(title).prop('id', this.getId() + '_title');
  498. }
  499. return this;
  500. },
  501. getMessage: function() {
  502. return this.options.message;
  503. },
  504. setMessage: function(message) {
  505. this.options.message = message;
  506. this.updateMessage();
  507. return this;
  508. },
  509. updateMessage: function() {
  510. if (this.isRealized()) {
  511. var message = this.createDynamicContent(this.getMessage());
  512. this.getModalBody().find('.' + this.getNamespace('message')).html('').append(message);
  513. }
  514. return this;
  515. },
  516. isClosable: function() {
  517. return this.options.closable;
  518. },
  519. setClosable: function(closable) {
  520. this.options.closable = closable;
  521. this.updateClosable();
  522. return this;
  523. },
  524. setCloseByBackdrop: function(closeByBackdrop) {
  525. this.options.closeByBackdrop = closeByBackdrop;
  526. return this;
  527. },
  528. canCloseByBackdrop: function() {
  529. return this.options.closeByBackdrop;
  530. },
  531. setCloseByKeyboard: function(closeByKeyboard) {
  532. this.options.closeByKeyboard = closeByKeyboard;
  533. return this;
  534. },
  535. canCloseByKeyboard: function() {
  536. return this.options.closeByKeyboard;
  537. },
  538. isAnimate: function() {
  539. return this.options.animate;
  540. },
  541. setAnimate: function(animate) {
  542. this.options.animate = animate;
  543. return this;
  544. },
  545. updateAnimate: function() {
  546. if (this.isRealized()) {
  547. this.getModal().toggleClass('fade', this.isAnimate());
  548. }
  549. return this;
  550. },
  551. getSpinicon: function() {
  552. return this.options.spinicon;
  553. },
  554. setSpinicon: function(spinicon) {
  555. this.options.spinicon = spinicon;
  556. return this;
  557. },
  558. addButton: function(button) {
  559. this.options.buttons.push(button);
  560. return this;
  561. },
  562. addButtons: function(buttons) {
  563. var that = this;
  564. $.each(buttons, function(index, button) {
  565. that.addButton(button);
  566. });
  567. return this;
  568. },
  569. getButtons: function() {
  570. return this.options.buttons;
  571. },
  572. setButtons: function(buttons) {
  573. this.options.buttons = buttons;
  574. this.updateButtons();
  575. return this;
  576. },
  577. /**
  578. * If there is id provided for a button option, it will be in dialog.indexedButtons list.
  579. *
  580. * In that case you can use dialog.getButton(id) to find the button.
  581. *
  582. * @param {type} id
  583. * @returns {undefined}
  584. */
  585. getButton: function(id) {
  586. if (typeof this.indexedButtons[id] !== 'undefined') {
  587. return this.indexedButtons[id];
  588. }
  589. return null;
  590. },
  591. getButtonSize: function() {
  592. if (typeof BootstrapDialog.BUTTON_SIZES[this.getSize()] !== 'undefined') {
  593. return BootstrapDialog.BUTTON_SIZES[this.getSize()];
  594. }
  595. return '';
  596. },
  597. updateButtons: function() {
  598. if (this.isRealized()) {
  599. if (this.getButtons().length === 0) {
  600. this.getModalFooter().hide();
  601. } else {
  602. this.getModalFooter().show().find('.' + this.getNamespace('footer')).html('').append(this.createFooterButtons());
  603. }
  604. }
  605. return this;
  606. },
  607. isAutodestroy: function() {
  608. return this.options.autodestroy;
  609. },
  610. setAutodestroy: function(autodestroy) {
  611. this.options.autodestroy = autodestroy;
  612. },
  613. getDescription: function() {
  614. return this.options.description;
  615. },
  616. setDescription: function(description) {
  617. this.options.description = description;
  618. return this;
  619. },
  620. getDefaultText: function() {
  621. return BootstrapDialog.DEFAULT_TEXTS[this.getType()];
  622. },
  623. getNamespace: function(name) {
  624. return BootstrapDialog.NAMESPACE + '-' + name;
  625. },
  626. createHeaderContent: function() {
  627. var $container = $('<div></div>');
  628. $container.addClass(this.getNamespace('header'));
  629. // title
  630. $container.append(this.createTitleContent());
  631. // Close button
  632. $container.prepend(this.createCloseButton());
  633. return $container;
  634. },
  635. createTitleContent: function() {
  636. var $title = $('<div></div>');
  637. $title.addClass(this.getNamespace('title'));
  638. return $title;
  639. },
  640. createCloseButton: function() {
  641. var $container = $('<div></div>');
  642. $container.addClass(this.getNamespace('close-button'));
  643. var $icon = $('<button class="close">&times;</button>');
  644. $container.append($icon);
  645. $container.on('click', {dialog: this}, function(event) {
  646. event.data.dialog.close();
  647. });
  648. return $container;
  649. },
  650. createBodyContent: function() {
  651. var $container = $('<div></div>');
  652. $container.addClass(this.getNamespace('body'));
  653. // Message
  654. $container.append(this.createMessageContent());
  655. return $container;
  656. },
  657. createMessageContent: function() {
  658. var $message = $('<div></div>');
  659. $message.addClass(this.getNamespace('message'));
  660. return $message;
  661. },
  662. createFooterContent: function() {
  663. var $container = $('<div></div>');
  664. $container.addClass(this.getNamespace('footer'));
  665. return $container;
  666. },
  667. createFooterButtons: function() {
  668. var that = this;
  669. var $container = $('<div></div>');
  670. $container.addClass(this.getNamespace('footer-buttons'));
  671. this.indexedButtons = {};
  672. $.each(this.options.buttons, function(index, button) {
  673. if (!button.id) {
  674. button.id = BootstrapDialog.newGuid();
  675. }
  676. var $button = that.createButton(button);
  677. that.indexedButtons[button.id] = $button;
  678. $container.append($button);
  679. });
  680. return $container;
  681. },
  682. createButton: function(button) {
  683. var $button = $('<button class="btn"></button>');
  684. $button.prop('id', button.id);
  685. $button.data('button', button);
  686. // Icon
  687. if (typeof button.icon !== 'undefined' && $.trim(button.icon) !== '') {
  688. $button.append(this.createButtonIcon(button.icon));
  689. }
  690. // Label
  691. if (typeof button.label !== 'undefined') {
  692. $button.append(button.label);
  693. }
  694. // Css class
  695. if (typeof button.cssClass !== 'undefined' && $.trim(button.cssClass) !== '') {
  696. $button.addClass(button.cssClass);
  697. } else {
  698. $button.addClass('btn-default');
  699. }
  700. // Hotkey
  701. if (typeof button.hotkey !== 'undefined') {
  702. this.registeredButtonHotkeys[button.hotkey] = $button;
  703. }
  704. // Button on click
  705. $button.on('click', {dialog: this, $button: $button, button: button}, function(event) {
  706. var dialog = event.data.dialog;
  707. var $button = event.data.$button;
  708. var button = $button.data('button');
  709. if (typeof button.action === 'function') {
  710. button.action.call($button, dialog, event);
  711. }
  712. if (button.autospin) {
  713. $button.toggleSpin(true);
  714. }
  715. });
  716. // Dynamically add extra functions to $button
  717. this.enhanceButton($button);
  718. return $button;
  719. },
  720. /**
  721. * Dynamically add extra functions to $button
  722. *
  723. * Using '$this' to reference 'this' is just for better readability.
  724. *
  725. * @param {type} $button
  726. * @returns {_L13.BootstrapDialog.prototype}
  727. */
  728. enhanceButton: function($button) {
  729. $button.dialog = this;
  730. // Enable / Disable
  731. $button.toggleEnable = function(enable) {
  732. var $this = this;
  733. if (typeof enable !== 'undefined') {
  734. $this.prop("disabled", !enable).toggleClass('disabled', !enable);
  735. } else {
  736. $this.prop("disabled", !$this.prop("disabled"));
  737. }
  738. return $this;
  739. };
  740. $button.enable = function() {
  741. var $this = this;
  742. $this.toggleEnable(true);
  743. return $this;
  744. };
  745. $button.disable = function() {
  746. var $this = this;
  747. $this.toggleEnable(false);
  748. return $this;
  749. };
  750. // Icon spinning, helpful for indicating ajax loading status.
  751. $button.toggleSpin = function(spin) {
  752. var $this = this;
  753. var dialog = $this.dialog;
  754. var $icon = $this.find('.' + dialog.getNamespace('button-icon'));
  755. if (typeof spin === 'undefined') {
  756. spin = !($button.find('.icon-spin').length > 0);
  757. }
  758. if (spin) {
  759. $icon.hide();
  760. $button.prepend(dialog.createButtonIcon(dialog.getSpinicon()).addClass('icon-spin'));
  761. } else {
  762. $icon.show();
  763. $button.find('.icon-spin').remove();
  764. }
  765. return $this;
  766. };
  767. $button.spin = function() {
  768. var $this = this;
  769. $this.toggleSpin(true);
  770. return $this;
  771. };
  772. $button.stopSpin = function() {
  773. var $this = this;
  774. $this.toggleSpin(false);
  775. return $this;
  776. };
  777. return this;
  778. },
  779. createButtonIcon: function(icon) {
  780. var $icon = $('<span></span>');
  781. $icon.addClass(this.getNamespace('button-icon')).addClass(icon);
  782. return $icon;
  783. },
  784. /**
  785. * Invoke this only after the dialog is realized.
  786. *
  787. * @param {type} enable
  788. * @returns {undefined}
  789. */
  790. enableButtons: function(enable) {
  791. $.each(this.indexedButtons, function(id, $button) {
  792. $button.toggleEnable(enable);
  793. });
  794. return this;
  795. },
  796. /**
  797. * Invoke this only after the dialog is realized.
  798. *
  799. * @returns {undefined}
  800. */
  801. updateClosable: function() {
  802. if (this.isRealized()) {
  803. // Close button
  804. this.getModalHeader().find('.' + this.getNamespace('close-button')).toggle(this.isClosable());
  805. }
  806. return this;
  807. },
  808. /**
  809. * Set handler for modal event 'show.bs.modal'.
  810. * This is a setter!
  811. */
  812. onShow: function(onshow) {
  813. this.options.onshow = onshow;
  814. return this;
  815. },
  816. /**
  817. * Set handler for modal event 'shown.bs.modal'.
  818. * This is a setter!
  819. */
  820. onShown: function(onshown) {
  821. this.options.onshown = onshown;
  822. return this;
  823. },
  824. /**
  825. * Set handler for modal event 'hide.bs.modal'.
  826. * This is a setter!
  827. */
  828. onHide: function(onhide) {
  829. this.options.onhide = onhide;
  830. return this;
  831. },
  832. /**
  833. * Set handler for modal event 'hidden.bs.modal'.
  834. * This is a setter!
  835. */
  836. onHidden: function(onhidden) {
  837. this.options.onhidden = onhidden;
  838. return this;
  839. },
  840. isRealized: function() {
  841. return this.realized;
  842. },
  843. setRealized: function(realized) {
  844. this.realized = realized;
  845. return this;
  846. },
  847. isOpened: function() {
  848. return this.opened;
  849. },
  850. setOpened: function(opened) {
  851. this.opened = opened;
  852. return this;
  853. },
  854. handleModalEvents: function() {
  855. this.getModal().on('show.bs.modal', {dialog: this}, function(event) {
  856. var dialog = event.data.dialog;
  857. dialog.setOpened(true);
  858. if (dialog.isModalEvent(event) && typeof dialog.options.onshow === 'function') {
  859. var openIt = dialog.options.onshow(dialog);
  860. if (openIt === false) {
  861. dialog.setOpened(false);
  862. }
  863. return openIt;
  864. }
  865. });
  866. this.getModal().on('shown.bs.modal', {dialog: this}, function(event) {
  867. var dialog = event.data.dialog;
  868. dialog.isModalEvent(event) && typeof dialog.options.onshown === 'function' && dialog.options.onshown(dialog);
  869. });
  870. this.getModal().on('hide.bs.modal', {dialog: this}, function(event) {
  871. var dialog = event.data.dialog;
  872. dialog.setOpened(false);
  873. if (dialog.isModalEvent(event) && typeof dialog.options.onhide === 'function') {
  874. var hideIt = dialog.options.onhide(dialog);
  875. if (hideIt === false) {
  876. dialog.setOpened(true);
  877. }
  878. return hideIt;
  879. }
  880. });
  881. this.getModal().on('hidden.bs.modal', {dialog: this}, function(event) {
  882. var dialog = event.data.dialog;
  883. dialog.isModalEvent(event) && typeof dialog.options.onhidden === 'function' && dialog.options.onhidden(dialog);
  884. if (dialog.isAutodestroy()) {
  885. delete BootstrapDialog.dialogs[dialog.getId()];
  886. $(this).remove();
  887. }
  888. BootstrapDialog.moveFocus();
  889. });
  890. // Backdrop, I did't find a way to change bs3 backdrop option after the dialog is popped up, so here's a new wheel.
  891. this.handleModalBackdropEvent();
  892. // ESC key support
  893. this.getModal().on('keyup', {dialog: this}, function(event) {
  894. event.which === 27 && event.data.dialog.isClosable() && event.data.dialog.canCloseByKeyboard() && event.data.dialog.close();
  895. });
  896. // Button hotkey
  897. this.getModal().on('keyup', {dialog: this}, function(event) {
  898. var dialog = event.data.dialog;
  899. if (typeof dialog.registeredButtonHotkeys[event.which] !== 'undefined') {
  900. var $button = $(dialog.registeredButtonHotkeys[event.which]);
  901. !$button.prop('disabled') && $button.focus().trigger('click');
  902. }
  903. });
  904. return this;
  905. },
  906. handleModalBackdropEvent: function() {
  907. this.getModal().on('click', {dialog: this}, function(event) {
  908. $(event.target).hasClass('modal-backdrop') && event.data.dialog.isClosable() && event.data.dialog.canCloseByBackdrop() && event.data.dialog.close();
  909. });
  910. return this;
  911. },
  912. isModalEvent: function(event) {
  913. return typeof event.namespace !== 'undefined' && event.namespace === 'bs.modal';
  914. },
  915. makeModalDraggable: function() {
  916. if (this.options.draggable) {
  917. this.getModalHeader().addClass(this.getNamespace('draggable')).on('mousedown', {dialog: this}, function(event) {
  918. var dialog = event.data.dialog;
  919. dialog.draggableData.isMouseDown = true;
  920. var dialogOffset = dialog.getModalDialog().offset();
  921. dialog.draggableData.mouseOffset = {
  922. top: event.clientY - dialogOffset.top,
  923. left: event.clientX - dialogOffset.left
  924. };
  925. });
  926. this.getModal().on('mouseup mouseleave', {dialog: this}, function(event) {
  927. event.data.dialog.draggableData.isMouseDown = false;
  928. });
  929. $('body').on('mousemove', {dialog: this}, function(event) {
  930. var dialog = event.data.dialog;
  931. if (!dialog.draggableData.isMouseDown) {
  932. return;
  933. }
  934. dialog.getModalDialog().offset({
  935. top: event.clientY - dialog.draggableData.mouseOffset.top,
  936. left: event.clientX - dialog.draggableData.mouseOffset.left
  937. });
  938. });
  939. }
  940. return this;
  941. },
  942. realize: function() {
  943. this.initModalStuff();
  944. this.getModal().addClass(BootstrapDialog.NAMESPACE)
  945. .addClass(this.getCssClass());
  946. this.updateSize();
  947. if (this.getDescription()) {
  948. this.getModal().attr('aria-describedby', this.getDescription());
  949. }
  950. this.getModalFooter().append(this.createFooterContent());
  951. this.getModalHeader().append(this.createHeaderContent());
  952. this.getModalBody().append(this.createBodyContent());
  953. this.getModal().data('bs.modal', new BootstrapDialogModal(this.getModal(), {
  954. backdrop: 'static',
  955. keyboard: false,
  956. show: false
  957. }));
  958. this.makeModalDraggable();
  959. this.handleModalEvents();
  960. this.setRealized(true);
  961. this.updateButtons();
  962. this.updateType();
  963. this.updateTitle();
  964. this.updateMessage();
  965. this.updateClosable();
  966. this.updateAnimate();
  967. this.updateSize();
  968. return this;
  969. },
  970. open: function() {
  971. !this.isRealized() && this.realize();
  972. this.getModal().modal('show');
  973. return this;
  974. },
  975. close: function() {
  976. this.getModal().modal('hide');
  977. return this;
  978. }
  979. };
  980. // Add compatible methods.
  981. BootstrapDialog.prototype = $.extend(BootstrapDialog.prototype, BootstrapDialog.METHODS_TO_OVERRIDE[BootstrapDialogModal.getModalVersion()]);
  982. /**
  983. * RFC4122 version 4 compliant unique id creator.
  984. *
  985. * Added by https://github.com/tufanbarisyildirim/
  986. *
  987. * @returns {String}
  988. */
  989. BootstrapDialog.newGuid = function() {
  990. return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
  991. var r = Math.random() * 16 | 0, v = c === 'x' ? r : (r & 0x3 | 0x8);
  992. return v.toString(16);
  993. });
  994. };
  995. /* ================================================
  996. * For lazy people
  997. * ================================================ */
  998. /**
  999. * Shortcut function: show
  1000. *
  1001. * @param {type} options
  1002. * @returns the created dialog instance
  1003. */
  1004. BootstrapDialog.show = function(options) {
  1005. return new BootstrapDialog(options).open();
  1006. };
  1007. /**
  1008. * Alert window
  1009. *
  1010. * @returns the created dialog instance
  1011. */
  1012. BootstrapDialog.alert = function() {
  1013. var options = {};
  1014. var defaultOptions = {
  1015. type: BootstrapDialog.TYPE_PRIMARY,
  1016. title: null,
  1017. message: null,
  1018. closable: false,
  1019. draggable: false,
  1020. buttonLabel: BootstrapDialog.DEFAULT_TEXTS.OK,
  1021. callback: null
  1022. };
  1023. if (typeof arguments[0] === 'object' && arguments[0].constructor === {}.constructor) {
  1024. options = $.extend(true, defaultOptions, arguments[0]);
  1025. } else {
  1026. options = $.extend(true, defaultOptions, {
  1027. message: arguments[0],
  1028. callback: typeof arguments[1] !== 'undefined' ? arguments[1] : null
  1029. });
  1030. }
  1031. return new BootstrapDialog({
  1032. type: options.type,
  1033. title: options.title,
  1034. message: options.message,
  1035. closable: options.closable,
  1036. draggable: options.draggable,
  1037. data: {
  1038. callback: options.callback
  1039. },
  1040. onhide: function(dialog) {
  1041. !dialog.getData('btnClicked') && dialog.isClosable() && typeof dialog.getData('callback') === 'function' && dialog.getData('callback')(false);
  1042. },
  1043. buttons: [{
  1044. label: options.buttonLabel,
  1045. action: function(dialog) {
  1046. dialog.setData('btnClicked', true);
  1047. typeof dialog.getData('callback') === 'function' && dialog.getData('callback')(true);
  1048. dialog.close();
  1049. }
  1050. }]
  1051. }).open();
  1052. };
  1053. /**
  1054. * Confirm window
  1055. *
  1056. * @returns the created dialog instance
  1057. */
  1058. BootstrapDialog.confirm = function() {
  1059. var options = {};
  1060. var defaultOptions = {
  1061. type: BootstrapDialog.TYPE_PRIMARY,
  1062. title: null,
  1063. message: null,
  1064. closable: false,
  1065. draggable: false,
  1066. btnCancelLabel: BootstrapDialog.DEFAULT_TEXTS.CANCEL,
  1067. btnOKLabel: BootstrapDialog.DEFAULT_TEXTS.OK,
  1068. btnOKClass: null,
  1069. callback: null
  1070. };
  1071. if (typeof arguments[0] === 'object' && arguments[0].constructor === {}.constructor) {
  1072. options = $.extend(true, defaultOptions, arguments[0]);
  1073. } else {
  1074. options = $.extend(true, defaultOptions, {
  1075. message: arguments[0],
  1076. closable: false,
  1077. buttonLabel: BootstrapDialog.DEFAULT_TEXTS.OK,
  1078. callback: typeof arguments[1] !== 'undefined' ? arguments[1] : null
  1079. });
  1080. }
  1081. if (options.btnOKClass === null) {
  1082. options.btnOKClass = ['btn', options.type.split('-')[1]].join('-');
  1083. }
  1084. return new BootstrapDialog({
  1085. type: options.type,
  1086. title: options.title,
  1087. message: options.message,
  1088. closable: options.closable,
  1089. draggable: options.draggable,
  1090. data: {
  1091. callback: options.callback
  1092. },
  1093. buttons: [{
  1094. label: options.btnCancelLabel,
  1095. action: function(dialog) {
  1096. typeof dialog.getData('callback') === 'function' && dialog.getData('callback')(false);
  1097. dialog.close();
  1098. }
  1099. }, {
  1100. label: options.btnOKLabel,
  1101. cssClass: options.btnOKClass,
  1102. action: function(dialog) {
  1103. typeof dialog.getData('callback') === 'function' && dialog.getData('callback')(true);
  1104. dialog.close();
  1105. }
  1106. }]
  1107. }).open();
  1108. };
  1109. /**
  1110. * Warning window
  1111. *
  1112. * @param {type} message
  1113. * @returns the created dialog instance
  1114. */
  1115. BootstrapDialog.warning = function(message, callback) {
  1116. return new BootstrapDialog({
  1117. type: BootstrapDialog.TYPE_WARNING,
  1118. message: message
  1119. }).open();
  1120. };
  1121. /**
  1122. * Danger window
  1123. *
  1124. * @param {type} message
  1125. * @returns the created dialog instance
  1126. */
  1127. BootstrapDialog.danger = function(message, callback) {
  1128. return new BootstrapDialog({
  1129. type: BootstrapDialog.TYPE_DANGER,
  1130. message: message
  1131. }).open();
  1132. };
  1133. /**
  1134. * Success window
  1135. *
  1136. * @param {type} message
  1137. * @returns the created dialog instance
  1138. */
  1139. BootstrapDialog.success = function(message, callback) {
  1140. return new BootstrapDialog({
  1141. type: BootstrapDialog.TYPE_SUCCESS,
  1142. message: message
  1143. }).open();
  1144. };
  1145. return BootstrapDialog;
  1146. }));