bootstrap-dialog.js 33 KB

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