bootstrap-dialog.js 33 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033
  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')(root));
  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. var BootstrapDialog = function(options) {
  31. this.defaultOptions = $.extend(true, {
  32. id: BootstrapDialog.newGuid(),
  33. buttons: [],
  34. data: {},
  35. onshow: null,
  36. onshown: null,
  37. onhide: null,
  38. onhidden: null
  39. }, BootstrapDialog.defaultOptions);
  40. this.indexedButtons = {};
  41. this.registeredButtonHotkeys = {};
  42. this.draggableData = {
  43. isMouseDown: false,
  44. mouseOffset: {}
  45. };
  46. this.realized = false;
  47. this.opened = false;
  48. this.initOptions(options);
  49. this.holdThisInstance();
  50. };
  51. /**
  52. * Some constants.
  53. */
  54. BootstrapDialog.NAMESPACE = 'bootstrap-dialog';
  55. BootstrapDialog.TYPE_DEFAULT = 'type-default';
  56. BootstrapDialog.TYPE_INFO = 'type-info';
  57. BootstrapDialog.TYPE_PRIMARY = 'type-primary';
  58. BootstrapDialog.TYPE_SUCCESS = 'type-success';
  59. BootstrapDialog.TYPE_WARNING = 'type-warning';
  60. BootstrapDialog.TYPE_DANGER = 'type-danger';
  61. BootstrapDialog.DEFAULT_TEXTS = {};
  62. BootstrapDialog.DEFAULT_TEXTS[BootstrapDialog.TYPE_DEFAULT] = 'Information';
  63. BootstrapDialog.DEFAULT_TEXTS[BootstrapDialog.TYPE_INFO] = 'Information';
  64. BootstrapDialog.DEFAULT_TEXTS[BootstrapDialog.TYPE_PRIMARY] = 'Information';
  65. BootstrapDialog.DEFAULT_TEXTS[BootstrapDialog.TYPE_SUCCESS] = 'Success';
  66. BootstrapDialog.DEFAULT_TEXTS[BootstrapDialog.TYPE_WARNING] = 'Warning';
  67. BootstrapDialog.DEFAULT_TEXTS[BootstrapDialog.TYPE_DANGER] = 'Danger';
  68. BootstrapDialog.SIZE_NORMAL = 'size-normal';
  69. BootstrapDialog.SIZE_LARGE = 'size-large';
  70. BootstrapDialog.BUTTON_SIZES = {};
  71. BootstrapDialog.BUTTON_SIZES[BootstrapDialog.SIZE_NORMAL] = '';
  72. BootstrapDialog.BUTTON_SIZES[BootstrapDialog.SIZE_LARGE] = 'btn-lg';
  73. BootstrapDialog.ICON_SPINNER = 'glyphicon glyphicon-asterisk';
  74. BootstrapDialog.ZINDEX_BACKDROP = 1040;
  75. BootstrapDialog.ZINDEX_MODAL = 1050;
  76. /**
  77. * Default options.
  78. */
  79. BootstrapDialog.defaultOptions = {
  80. type: BootstrapDialog.TYPE_PRIMARY,
  81. size: BootstrapDialog.SIZE_NORMAL,
  82. cssClass: '',
  83. title: null,
  84. message: null,
  85. nl2br: true,
  86. closable: true,
  87. closeByBackdrop: true,
  88. closeByKeyboard: true,
  89. spinicon: BootstrapDialog.ICON_SPINNER,
  90. autodestroy: true,
  91. draggable: false,
  92. animate: true
  93. };
  94. /**
  95. * Config default options.
  96. */
  97. BootstrapDialog.configDefaultOptions = function(options) {
  98. BootstrapDialog.defaultOptions = $.extend(true, BootstrapDialog.defaultOptions, options);
  99. };
  100. /**
  101. * Open / Close all created dialogs all at once.
  102. */
  103. BootstrapDialog.dialogs = {};
  104. BootstrapDialog.openAll = function() {
  105. $.each(BootstrapDialog.dialogs, function(id, dialogInstance) {
  106. dialogInstance.open();
  107. });
  108. };
  109. BootstrapDialog.closeAll = function() {
  110. $.each(BootstrapDialog.dialogs, function(id, dialogInstance) {
  111. dialogInstance.close();
  112. });
  113. };
  114. /**
  115. * Move focus to next visible dialog.
  116. */
  117. BootstrapDialog.moveFocus = function() {
  118. var lastDialogInstance = null;
  119. $.each(BootstrapDialog.dialogs, function(id, dialogInstance) {
  120. lastDialogInstance = dialogInstance;
  121. });
  122. if (lastDialogInstance !== null && lastDialogInstance.isRealized()) {
  123. lastDialogInstance.getModal().focus();
  124. }
  125. };
  126. /**
  127. * Show scrollbar if the last visible dialog needs one.
  128. */
  129. BootstrapDialog.showScrollbar = function() {
  130. var lastDialogInstance = null;
  131. $.each(BootstrapDialog.dialogs, function(id, dialogInstance) {
  132. lastDialogInstance = dialogInstance;
  133. });
  134. if (lastDialogInstance !== null && lastDialogInstance.isRealized() && lastDialogInstance.isOpened()) {
  135. var bsModal = lastDialogInstance.getModal().data('bs.modal');
  136. bsModal.checkScrollbar();
  137. $('body').addClass('modal-open');
  138. bsModal.setScrollbar();
  139. }
  140. };
  141. BootstrapDialog.prototype = {
  142. constructor: BootstrapDialog,
  143. initOptions: function(options) {
  144. this.options = $.extend(true, this.defaultOptions, options);
  145. return this;
  146. },
  147. holdThisInstance: function() {
  148. BootstrapDialog.dialogs[this.getId()] = this;
  149. return this;
  150. },
  151. initModalStuff: function() {
  152. this.setModal(this.createModal())
  153. .setModalDialog(this.createModalDialog())
  154. .setModalContent(this.createModalContent())
  155. .setModalHeader(this.createModalHeader())
  156. .setModalBody(this.createModalBody())
  157. .setModalFooter(this.createModalFooter());
  158. this.getModal().append(this.getModalDialog());
  159. this.getModalDialog().append(this.getModalContent());
  160. this.getModalContent()
  161. .append(this.getModalHeader())
  162. .append(this.getModalBody())
  163. .append(this.getModalFooter());
  164. return this;
  165. },
  166. createModal: function() {
  167. var $modal = $('<div class="modal" tabindex="-1"></div>');
  168. $modal.prop('id', this.getId());
  169. return $modal;
  170. },
  171. getModal: function() {
  172. return this.$modal;
  173. },
  174. setModal: function($modal) {
  175. this.$modal = $modal;
  176. return this;
  177. },
  178. createModalDialog: function() {
  179. return $('<div class="modal-dialog"></div>');
  180. },
  181. getModalDialog: function() {
  182. return this.$modalDialog;
  183. },
  184. setModalDialog: function($modalDialog) {
  185. this.$modalDialog = $modalDialog;
  186. return this;
  187. },
  188. createModalContent: function() {
  189. return $('<div class="modal-content"></div>');
  190. },
  191. getModalContent: function() {
  192. return this.$modalContent;
  193. },
  194. setModalContent: function($modalContent) {
  195. this.$modalContent = $modalContent;
  196. return this;
  197. },
  198. createModalHeader: function() {
  199. return $('<div class="modal-header"></div>');
  200. },
  201. getModalHeader: function() {
  202. return this.$modalHeader;
  203. },
  204. setModalHeader: function($modalHeader) {
  205. this.$modalHeader = $modalHeader;
  206. return this;
  207. },
  208. createModalBody: function() {
  209. return $('<div class="modal-body"></div>');
  210. },
  211. getModalBody: function() {
  212. return this.$modalBody;
  213. },
  214. setModalBody: function($modalBody) {
  215. this.$modalBody = $modalBody;
  216. return this;
  217. },
  218. createModalFooter: function() {
  219. return $('<div class="modal-footer"></div>');
  220. },
  221. getModalFooter: function() {
  222. return this.$modalFooter;
  223. },
  224. setModalFooter: function($modalFooter) {
  225. this.$modalFooter = $modalFooter;
  226. return this;
  227. },
  228. createDynamicContent: function(rawContent) {
  229. var content = null;
  230. if (typeof rawContent === 'function') {
  231. content = rawContent.call(rawContent, this);
  232. } else {
  233. content = rawContent;
  234. }
  235. if (typeof content === 'string') {
  236. content = this.formatStringContent(content);
  237. }
  238. return content;
  239. },
  240. formatStringContent: function(content) {
  241. if (this.options.nl2br) {
  242. return content.replace(/\r\n/g, '<br />').replace(/[\r\n]/g, '<br />');
  243. }
  244. return content;
  245. },
  246. setData: function(key, value) {
  247. this.options.data[key] = value;
  248. return this;
  249. },
  250. getData: function(key) {
  251. return this.options.data[key];
  252. },
  253. setId: function(id) {
  254. this.options.id = id;
  255. return this;
  256. },
  257. getId: function() {
  258. return this.options.id;
  259. },
  260. getType: function() {
  261. return this.options.type;
  262. },
  263. setType: function(type) {
  264. this.options.type = type;
  265. this.updateType();
  266. return this;
  267. },
  268. updateType: function() {
  269. if (this.isRealized()) {
  270. var types = [BootstrapDialog.TYPE_DEFAULT,
  271. BootstrapDialog.TYPE_INFO,
  272. BootstrapDialog.TYPE_PRIMARY,
  273. BootstrapDialog.TYPE_SUCCESS,
  274. BootstrapDialog.TYPE_WARNING,
  275. BootstrapDialog.TYPE_DANGER];
  276. this.getModal().removeClass(types.join(' ')).addClass(this.getType());
  277. }
  278. return this;
  279. },
  280. getSize: function() {
  281. return this.options.size;
  282. },
  283. setSize: function(size) {
  284. this.options.size = size;
  285. return this;
  286. },
  287. getCssClass: function() {
  288. return this.options.cssClass;
  289. },
  290. setCssClass: function(cssClass) {
  291. this.options.cssClass = cssClass;
  292. return this;
  293. },
  294. getTitle: function() {
  295. return this.options.title;
  296. },
  297. setTitle: function(title) {
  298. this.options.title = title;
  299. this.updateTitle();
  300. return this;
  301. },
  302. updateTitle: function() {
  303. if (this.isRealized()) {
  304. var title = this.getTitle() !== null ? this.createDynamicContent(this.getTitle()) : this.getDefaultText();
  305. this.getModalHeader().find('.' + this.getNamespace('title')).html('').append(title);
  306. }
  307. return this;
  308. },
  309. getMessage: function() {
  310. return this.options.message;
  311. },
  312. setMessage: function(message) {
  313. this.options.message = message;
  314. this.updateMessage();
  315. return this;
  316. },
  317. updateMessage: function() {
  318. if (this.isRealized()) {
  319. var message = this.createDynamicContent(this.getMessage());
  320. this.getModalBody().find('.' + this.getNamespace('message')).html('').append(message);
  321. }
  322. return this;
  323. },
  324. isClosable: function() {
  325. return this.options.closable;
  326. },
  327. setClosable: function(closable) {
  328. this.options.closable = closable;
  329. this.updateClosable();
  330. return this;
  331. },
  332. setCloseByBackdrop: function(closeByBackdrop) {
  333. this.options.closeByBackdrop = closeByBackdrop;
  334. return this;
  335. },
  336. canCloseByBackdrop: function() {
  337. return this.options.closeByBackdrop;
  338. },
  339. setCloseByKeyboard: function(closeByKeyboard) {
  340. this.options.closeByKeyboard = closeByKeyboard;
  341. return this;
  342. },
  343. canCloseByKeyboard: function() {
  344. return this.options.closeByKeyboard;
  345. },
  346. isAnimate: function() {
  347. return this.options.animate;
  348. },
  349. setAnimate: function(animate) {
  350. this.options.animate = animate;
  351. return this;
  352. },
  353. updateAnimate: function() {
  354. if (this.isRealized()) {
  355. this.getModal().toggleClass('fade', this.isAnimate());
  356. }
  357. return this;
  358. },
  359. getSpinicon: function() {
  360. return this.options.spinicon;
  361. },
  362. setSpinicon: function(spinicon) {
  363. this.options.spinicon = spinicon;
  364. return this;
  365. },
  366. addButton: function(button) {
  367. this.options.buttons.push(button);
  368. return this;
  369. },
  370. addButtons: function(buttons) {
  371. var that = this;
  372. $.each(buttons, function(index, button) {
  373. that.addButton(button);
  374. });
  375. return this;
  376. },
  377. getButtons: function() {
  378. return this.options.buttons;
  379. },
  380. setButtons: function(buttons) {
  381. this.options.buttons = buttons;
  382. this.updateButtons();
  383. return this;
  384. },
  385. /**
  386. * If there is id provided for a button option, it will be in dialog.indexedButtons list.
  387. *
  388. * In that case you can use dialog.getButton(id) to find the button.
  389. *
  390. * @param {type} id
  391. * @returns {undefined}
  392. */
  393. getButton: function(id) {
  394. if (typeof this.indexedButtons[id] !== 'undefined') {
  395. return this.indexedButtons[id];
  396. }
  397. return null;
  398. },
  399. getButtonSize: function() {
  400. if (typeof BootstrapDialog.BUTTON_SIZES[this.getSize()] !== 'undefined') {
  401. return BootstrapDialog.BUTTON_SIZES[this.getSize()];
  402. }
  403. return '';
  404. },
  405. updateButtons: function() {
  406. if (this.isRealized()) {
  407. if (this.getButtons().length === 0) {
  408. this.getModalFooter().hide();
  409. } else {
  410. this.getModalFooter().find('.' + this.getNamespace('footer')).html('').append(this.createFooterButtons());
  411. }
  412. }
  413. return this;
  414. },
  415. isAutodestroy: function() {
  416. return this.options.autodestroy;
  417. },
  418. setAutodestroy: function(autodestroy) {
  419. this.options.autodestroy = autodestroy;
  420. },
  421. getDefaultText: function() {
  422. return BootstrapDialog.DEFAULT_TEXTS[this.getType()];
  423. },
  424. getNamespace: function(name) {
  425. return BootstrapDialog.NAMESPACE + '-' + name;
  426. },
  427. createHeaderContent: function() {
  428. var $container = $('<div></div>');
  429. $container.addClass(this.getNamespace('header'));
  430. // title
  431. $container.append(this.createTitleContent());
  432. // Close button
  433. $container.prepend(this.createCloseButton());
  434. return $container;
  435. },
  436. createTitleContent: function() {
  437. var $title = $('<div></div>');
  438. $title.addClass(this.getNamespace('title'));
  439. return $title;
  440. },
  441. createCloseButton: function() {
  442. var $container = $('<div></div>');
  443. $container.addClass(this.getNamespace('close-button'));
  444. var $icon = $('<button class="close">&times;</button>');
  445. $container.append($icon);
  446. $container.on('click', {dialog: this}, function(event) {
  447. event.data.dialog.close();
  448. });
  449. return $container;
  450. },
  451. createBodyContent: function() {
  452. var $container = $('<div></div>');
  453. $container.addClass(this.getNamespace('body'));
  454. // Message
  455. $container.append(this.createMessageContent());
  456. return $container;
  457. },
  458. createMessageContent: function() {
  459. var $message = $('<div></div>');
  460. $message.addClass(this.getNamespace('message'));
  461. return $message;
  462. },
  463. createFooterContent: function() {
  464. var $container = $('<div></div>');
  465. $container.addClass(this.getNamespace('footer'));
  466. return $container;
  467. },
  468. createFooterButtons: function() {
  469. var that = this;
  470. var $container = $('<div></div>');
  471. $container.addClass(this.getNamespace('footer-buttons'));
  472. this.indexedButtons = {};
  473. $.each(this.options.buttons, function(index, button) {
  474. if (!button.id) {
  475. button.id = BootstrapDialog.newGuid();
  476. }
  477. var $button = that.createButton(button);
  478. that.indexedButtons[button.id] = $button;
  479. $container.append($button);
  480. });
  481. return $container;
  482. },
  483. createButton: function(button) {
  484. var $button = $('<button class="btn"></button>');
  485. $button.addClass(this.getButtonSize());
  486. $button.prop('id', button.id);
  487. // Icon
  488. if (typeof button.icon !== 'undefined' && $.trim(button.icon) !== '') {
  489. $button.append(this.createButtonIcon(button.icon));
  490. }
  491. // Label
  492. if (typeof button.label !== 'undefined') {
  493. $button.append(button.label);
  494. }
  495. // Css class
  496. if (typeof button.cssClass !== 'undefined' && $.trim(button.cssClass) !== '') {
  497. $button.addClass(button.cssClass);
  498. } else {
  499. $button.addClass('btn-default');
  500. }
  501. // Hotkey
  502. if (typeof button.hotkey !== 'undefined') {
  503. this.registeredButtonHotkeys[button.hotkey] = $button;
  504. }
  505. // Button on click
  506. $button.on('click', {dialog: this, $button: $button, button: button}, function(event) {
  507. var dialog = event.data.dialog;
  508. var $button = event.data.$button;
  509. var button = event.data.button;
  510. if (typeof button.action === 'function') {
  511. button.action.call($button, dialog);
  512. }
  513. if (button.autospin) {
  514. $button.toggleSpin(true);
  515. }
  516. });
  517. // Dynamically add extra functions to $button
  518. this.enhanceButton($button);
  519. return $button;
  520. },
  521. /**
  522. * Dynamically add extra functions to $button
  523. *
  524. * Using '$this' to reference 'this' is just for better readability.
  525. *
  526. * @param {type} $button
  527. * @returns {_L13.BootstrapDialog.prototype}
  528. */
  529. enhanceButton: function($button) {
  530. $button.dialog = this;
  531. // Enable / Disable
  532. $button.toggleEnable = function(enable) {
  533. var $this = this;
  534. if (typeof enable !== 'undefined') {
  535. $this.prop("disabled", !enable).toggleClass('disabled', !enable);
  536. } else {
  537. $this.prop("disabled", !$this.prop("disabled"));
  538. }
  539. return $this;
  540. };
  541. $button.enable = function() {
  542. var $this = this;
  543. $this.toggleEnable(true);
  544. return $this;
  545. };
  546. $button.disable = function() {
  547. var $this = this;
  548. $this.toggleEnable(false);
  549. return $this;
  550. };
  551. // Icon spinning, helpful for indicating ajax loading status.
  552. $button.toggleSpin = function(spin) {
  553. var $this = this;
  554. var dialog = $this.dialog;
  555. var $icon = $this.find('.' + dialog.getNamespace('button-icon'));
  556. if (typeof spin === 'undefined') {
  557. spin = !($button.find('.icon-spin').length > 0);
  558. }
  559. if (spin) {
  560. $icon.hide();
  561. $button.prepend(dialog.createButtonIcon(dialog.getSpinicon()).addClass('icon-spin'));
  562. } else {
  563. $icon.show();
  564. $button.find('.icon-spin').remove();
  565. }
  566. return $this;
  567. };
  568. $button.spin = function() {
  569. var $this = this;
  570. $this.toggleSpin(true);
  571. return $this;
  572. };
  573. $button.stopSpin = function() {
  574. var $this = this;
  575. $this.toggleSpin(false);
  576. return $this;
  577. };
  578. return this;
  579. },
  580. createButtonIcon: function(icon) {
  581. var $icon = $('<span></span>');
  582. $icon.addClass(this.getNamespace('button-icon')).addClass(icon);
  583. return $icon;
  584. },
  585. /**
  586. * Invoke this only after the dialog is realized.
  587. *
  588. * @param {type} enable
  589. * @returns {undefined}
  590. */
  591. enableButtons: function(enable) {
  592. $.each(this.indexedButtons, function(id, $button) {
  593. $button.toggleEnable(enable);
  594. });
  595. return this;
  596. },
  597. /**
  598. * Invoke this only after the dialog is realized.
  599. *
  600. * @returns {undefined}
  601. */
  602. updateClosable: function() {
  603. if (this.isRealized()) {
  604. // Close button
  605. this.getModalHeader().find('.' + this.getNamespace('close-button')).toggle(this.isClosable());
  606. }
  607. return this;
  608. },
  609. /**
  610. * Set handler for modal event 'show.bs.modal'.
  611. * This is a setter!
  612. */
  613. onShow: function(onshow) {
  614. this.options.onshow = onshow;
  615. return this;
  616. },
  617. /**
  618. * Set handler for modal event 'shown.bs.modal'.
  619. * This is a setter!
  620. */
  621. onShown: function(onshown) {
  622. this.options.onshown = onshown;
  623. return this;
  624. },
  625. /**
  626. * Set handler for modal event 'hide.bs.modal'.
  627. * This is a setter!
  628. */
  629. onHide: function(onhide) {
  630. this.options.onhide = onhide;
  631. return this;
  632. },
  633. /**
  634. * Set handler for modal event 'hidden.bs.modal'.
  635. * This is a setter!
  636. */
  637. onHidden: function(onhidden) {
  638. this.options.onhidden = onhidden;
  639. return this;
  640. },
  641. isRealized: function() {
  642. return this.realized;
  643. },
  644. setRealized: function(realized) {
  645. this.realized = realized;
  646. return this;
  647. },
  648. isOpened: function() {
  649. return this.opened;
  650. },
  651. setOpened: function(opened) {
  652. this.opened = opened;
  653. return this;
  654. },
  655. handleModalEvents: function() {
  656. this.getModal().on('show.bs.modal', {dialog: this}, function(event) {
  657. var dialog = event.data.dialog;
  658. if (typeof dialog.options.onshow === 'function') {
  659. return dialog.options.onshow(dialog);
  660. }
  661. });
  662. this.getModal().on('shown.bs.modal', {dialog: this}, function(event) {
  663. var dialog = event.data.dialog;
  664. typeof dialog.options.onshown === 'function' && dialog.options.onshown(dialog);
  665. });
  666. this.getModal().on('hide.bs.modal', {dialog: this}, function(event) {
  667. var dialog = event.data.dialog;
  668. if (typeof dialog.options.onhide === 'function') {
  669. return dialog.options.onhide(dialog);
  670. }
  671. });
  672. this.getModal().on('hidden.bs.modal', {dialog: this}, function(event) {
  673. var dialog = event.data.dialog;
  674. typeof dialog.options.onhidden === 'function' && dialog.options.onhidden(dialog);
  675. dialog.isAutodestroy() && $(this).remove();
  676. BootstrapDialog.moveFocus();
  677. });
  678. // Backdrop, I did't find a way to change bs3 backdrop option after the dialog is popped up, so here's a new wheel.
  679. this.getModal().on('click', {dialog: this}, function(event) {
  680. event.target === this && event.data.dialog.isClosable() && event.data.dialog.canCloseByBackdrop() && event.data.dialog.close();
  681. });
  682. // ESC key support
  683. this.getModal().on('keyup', {dialog: this}, function(event) {
  684. event.which === 27 && event.data.dialog.isClosable() && event.data.dialog.canCloseByKeyboard() && event.data.dialog.close();
  685. });
  686. // Button hotkey
  687. this.getModal().on('keyup', {dialog: this}, function(event) {
  688. var dialog = event.data.dialog;
  689. if (typeof dialog.registeredButtonHotkeys[event.which] !== 'undefined') {
  690. var $button = $(dialog.registeredButtonHotkeys[event.which]);
  691. !$button.prop('disabled') && $button.focus().trigger('click');
  692. }
  693. });
  694. return this;
  695. },
  696. makeModalDraggable: function() {
  697. if (this.options.draggable) {
  698. this.getModalHeader().addClass(this.getNamespace('draggable')).on('mousedown', {dialog: this}, function(event) {
  699. var dialog = event.data.dialog;
  700. dialog.draggableData.isMouseDown = true;
  701. var dialogOffset = dialog.getModalContent().offset();
  702. dialog.draggableData.mouseOffset = {
  703. top: event.clientY - dialogOffset.top,
  704. left: event.clientX - dialogOffset.left
  705. };
  706. });
  707. this.getModal().on('mouseup mouseleave', {dialog: this}, function(event) {
  708. event.data.dialog.draggableData.isMouseDown = false;
  709. });
  710. $('body').on('mousemove', {dialog: this}, function(event) {
  711. var dialog = event.data.dialog;
  712. if (!dialog.draggableData.isMouseDown) {
  713. return;
  714. }
  715. dialog.getModalContent().offset({
  716. top: event.clientY - dialog.draggableData.mouseOffset.top,
  717. left: event.clientX - dialog.draggableData.mouseOffset.left
  718. });
  719. });
  720. }
  721. return this;
  722. },
  723. /**
  724. * To make multiple opened dialogs look better.
  725. */
  726. updateZIndex: function() {
  727. var dialogCount = 0;
  728. $.each(BootstrapDialog.dialogs, function(dialogId, dialogInstance) {
  729. dialogCount++;
  730. });
  731. if (dialogCount > 1) {
  732. var $modal = this.getModal();
  733. var $backdrop = $modal.data('bs.modal').$backdrop;
  734. $modal.css('z-index', BootstrapDialog.ZINDEX_MODAL + (dialogCount - 1) * 20);
  735. $backdrop.css('z-index', BootstrapDialog.ZINDEX_BACKDROP + (dialogCount - 1) * 20);
  736. }
  737. return this;
  738. },
  739. realize: function() {
  740. this.initModalStuff();
  741. this.getModal().addClass(BootstrapDialog.NAMESPACE)
  742. .addClass(this.getSize())
  743. .addClass(this.getCssClass());
  744. this.getModalFooter().append(this.createFooterContent());
  745. this.getModalHeader().append(this.createHeaderContent());
  746. this.getModalBody().append(this.createBodyContent());
  747. this.getModal().modal({
  748. backdrop: 'static',
  749. keyboard: false,
  750. show: false
  751. });
  752. this.makeModalDraggable();
  753. this.handleModalEvents();
  754. this.setRealized(true);
  755. this.updateButtons();
  756. this.updateType();
  757. this.updateTitle();
  758. this.updateMessage();
  759. this.updateClosable();
  760. this.updateAnimate();
  761. return this;
  762. },
  763. open: function() {
  764. !this.isRealized() && this.realize();
  765. this.getModal().modal('show');
  766. this.updateZIndex();
  767. this.setOpened(true);
  768. return this;
  769. },
  770. close: function() {
  771. this.getModal().modal('hide');
  772. if (this.isAutodestroy()) {
  773. delete BootstrapDialog.dialogs[this.getId()];
  774. }
  775. this.setOpened(false);
  776. // Show scrollbar if the last visible dialog needs one.
  777. BootstrapDialog.showScrollbar();
  778. return this;
  779. }
  780. };
  781. /**
  782. * RFC4122 version 4 compliant unique id creator.
  783. *
  784. * Added by https://github.com/tufanbarisyildirim/
  785. *
  786. * @returns {String}
  787. */
  788. BootstrapDialog.newGuid = function() {
  789. return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
  790. var r = Math.random() * 16 | 0, v = c === 'x' ? r : (r & 0x3 | 0x8);
  791. return v.toString(16);
  792. });
  793. };
  794. /* ================================================
  795. * For lazy people
  796. * ================================================ */
  797. /**
  798. * Shortcut function: show
  799. *
  800. * @param {type} options
  801. * @returns the created dialog instance
  802. */
  803. BootstrapDialog.show = function(options) {
  804. return new BootstrapDialog(options).open();
  805. };
  806. /**
  807. * Alert window
  808. *
  809. * @returns the created dialog instance
  810. */
  811. BootstrapDialog.alert = function() {
  812. var options = {};
  813. var defaultOptions = {
  814. type: BootstrapDialog.TYPE_PRIMARY,
  815. title: null,
  816. message: null,
  817. closable: true,
  818. buttonLabel: 'OK',
  819. callback: null
  820. };
  821. if (typeof arguments[0] === 'object' && arguments[0].constructor === {}.constructor) {
  822. options = $.extend(true, defaultOptions, arguments[0]);
  823. } else {
  824. options = $.extend(true, defaultOptions, {
  825. message: arguments[0],
  826. closable: false,
  827. buttonLabel: 'OK',
  828. callback: typeof arguments[1] !== 'undefined' ? arguments[1] : null
  829. });
  830. }
  831. return new BootstrapDialog({
  832. type: options.type,
  833. title: options.title,
  834. message: options.message,
  835. closable: options.closable,
  836. data: {
  837. callback: options.callback
  838. },
  839. onhide: function(dialog) {
  840. !dialog.getData('btnClicked') && dialog.isClosable() && typeof dialog.getData('callback') === 'function' && dialog.getData('callback')(false);
  841. },
  842. buttons: [{
  843. label: options.buttonLabel,
  844. action: function(dialog) {
  845. dialog.setData('btnClicked', true);
  846. typeof dialog.getData('callback') === 'function' && dialog.getData('callback')(true);
  847. dialog.close();
  848. }
  849. }]
  850. }).open();
  851. };
  852. /**
  853. * Confirm window
  854. *
  855. * @param {type} message
  856. * @param {type} callback
  857. * @returns the created dialog instance
  858. */
  859. BootstrapDialog.confirm = function(message, callback) {
  860. return new BootstrapDialog({
  861. title: 'Confirmation',
  862. message: message,
  863. closable: false,
  864. data: {
  865. 'callback': callback
  866. },
  867. buttons: [{
  868. label: 'Cancel',
  869. action: function(dialog) {
  870. typeof dialog.getData('callback') === 'function' && dialog.getData('callback')(false);
  871. dialog.close();
  872. }
  873. }, {
  874. label: 'OK',
  875. cssClass: 'btn-primary',
  876. action: function(dialog) {
  877. typeof dialog.getData('callback') === 'function' && dialog.getData('callback')(true);
  878. dialog.close();
  879. }
  880. }]
  881. }).open();
  882. };
  883. /**
  884. * Warning window
  885. *
  886. * @param {type} message
  887. * @returns the created dialog instance
  888. */
  889. BootstrapDialog.warning = function(message, callback) {
  890. return new BootstrapDialog({
  891. type: BootstrapDialog.TYPE_WARNING,
  892. message: message
  893. }).open();
  894. };
  895. /**
  896. * Danger window
  897. *
  898. * @param {type} message
  899. * @returns the created dialog instance
  900. */
  901. BootstrapDialog.danger = function(message, callback) {
  902. return new BootstrapDialog({
  903. type: BootstrapDialog.TYPE_DANGER,
  904. message: message
  905. }).open();
  906. };
  907. /**
  908. * Success window
  909. *
  910. * @param {type} message
  911. * @returns the created dialog instance
  912. */
  913. BootstrapDialog.success = function(message, callback) {
  914. return new BootstrapDialog({
  915. type: BootstrapDialog.TYPE_SUCCESS,
  916. message: message
  917. }).open();
  918. };
  919. return BootstrapDialog;
  920. }));