bootstrap-dialog.js 33 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035
  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. });
  677. // Backdrop, I did't find a way to change bs3 backdrop option after the dialog is popped up, so here's a new wheel.
  678. this.getModal().on('mouseup', {dialog: this}, function(event) {
  679. event.target === this && event.data.dialog.isClosable() && event.data.dialog.canCloseByBackdrop() && event.data.dialog.close();
  680. });
  681. // ESC key support
  682. this.getModal().on('keyup', {dialog: this}, function(event) {
  683. event.which === 27 && event.data.dialog.isClosable() && event.data.dialog.canCloseByKeyboard() && event.data.dialog.close();
  684. });
  685. // Button hotkey
  686. this.getModal().on('keyup', {dialog: this}, function(event) {
  687. var dialog = event.data.dialog;
  688. if (typeof dialog.registeredButtonHotkeys[event.which] !== 'undefined') {
  689. var $button = $(dialog.registeredButtonHotkeys[event.which]);
  690. !$button.prop('disabled') && $button.focus().trigger('click');
  691. }
  692. });
  693. return this;
  694. },
  695. makeModalDraggable: function() {
  696. if (this.options.draggable) {
  697. this.getModalHeader().addClass(this.getNamespace('draggable')).on('mousedown', {dialog: this}, function(event) {
  698. var dialog = event.data.dialog;
  699. dialog.draggableData.isMouseDown = true;
  700. var dialogOffset = dialog.getModalContent().offset();
  701. dialog.draggableData.mouseOffset = {
  702. top: event.clientY - dialogOffset.top,
  703. left: event.clientX - dialogOffset.left
  704. };
  705. });
  706. this.getModal().on('mouseup mouseleave', {dialog: this}, function(event) {
  707. event.data.dialog.draggableData.isMouseDown = false;
  708. });
  709. $('body').on('mousemove', {dialog: this}, function(event) {
  710. var dialog = event.data.dialog;
  711. if (!dialog.draggableData.isMouseDown) {
  712. return;
  713. }
  714. dialog.getModalContent().offset({
  715. top: event.clientY - dialog.draggableData.mouseOffset.top,
  716. left: event.clientX - dialog.draggableData.mouseOffset.left
  717. });
  718. });
  719. }
  720. return this;
  721. },
  722. /**
  723. * To make multiple opened dialogs look better.
  724. */
  725. updateZIndex: function() {
  726. var dialogCount = 0;
  727. $.each(BootstrapDialog.dialogs, function(dialogId, dialogInstance) {
  728. dialogCount++;
  729. });
  730. if (dialogCount > 1) {
  731. var $modal = this.getModal();
  732. var $backdrop = $modal.data('bs.modal').$backdrop;
  733. $modal.css('z-index', BootstrapDialog.ZINDEX_MODAL + (dialogCount - 1) * 20);
  734. $backdrop.css('z-index', BootstrapDialog.ZINDEX_BACKDROP + (dialogCount - 1) * 20);
  735. }
  736. return this;
  737. },
  738. realize: function() {
  739. this.initModalStuff();
  740. this.getModal().addClass(BootstrapDialog.NAMESPACE)
  741. .addClass(this.getSize())
  742. .addClass(this.getCssClass());
  743. this.getModalFooter().append(this.createFooterContent());
  744. this.getModalHeader().append(this.createHeaderContent());
  745. this.getModalBody().append(this.createBodyContent());
  746. this.getModal().modal({
  747. backdrop: 'static',
  748. keyboard: false,
  749. show: false
  750. });
  751. this.makeModalDraggable();
  752. this.handleModalEvents();
  753. this.setRealized(true);
  754. this.updateButtons();
  755. this.updateType();
  756. this.updateTitle();
  757. this.updateMessage();
  758. this.updateClosable();
  759. this.updateAnimate();
  760. return this;
  761. },
  762. open: function() {
  763. !this.isRealized() && this.realize();
  764. this.getModal().modal('show');
  765. this.updateZIndex();
  766. this.setOpened(true);
  767. return this;
  768. },
  769. close: function() {
  770. this.getModal().modal('hide');
  771. if (this.isAutodestroy()) {
  772. delete BootstrapDialog.dialogs[this.getId()];
  773. }
  774. this.setOpened(false);
  775. // Move focus to the last visible dialog.
  776. BootstrapDialog.moveFocus();
  777. // Show scrollbar if the last visible dialog needs one.
  778. BootstrapDialog.showScrollbar();
  779. return this;
  780. }
  781. };
  782. /**
  783. * RFC4122 version 4 compliant unique id creator.
  784. *
  785. * Added by https://github.com/tufanbarisyildirim/
  786. *
  787. * @returns {String}
  788. */
  789. BootstrapDialog.newGuid = function() {
  790. return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
  791. var r = Math.random() * 16 | 0, v = c === 'x' ? r : (r & 0x3 | 0x8);
  792. return v.toString(16);
  793. });
  794. };
  795. /* ================================================
  796. * For lazy people
  797. * ================================================ */
  798. /**
  799. * Shortcut function: show
  800. *
  801. * @param {type} options
  802. * @returns the created dialog instance
  803. */
  804. BootstrapDialog.show = function(options) {
  805. return new BootstrapDialog(options).open();
  806. };
  807. /**
  808. * Alert window
  809. *
  810. * @returns the created dialog instance
  811. */
  812. BootstrapDialog.alert = function() {
  813. var options = {};
  814. var defaultOptions = {
  815. type: BootstrapDialog.TYPE_PRIMARY,
  816. title: null,
  817. message: null,
  818. closable: true,
  819. buttonLabel: 'OK',
  820. callback: null
  821. };
  822. if (typeof arguments[0] === 'object' && arguments[0].constructor === {}.constructor) {
  823. options = $.extend(true, defaultOptions, arguments[0]);
  824. } else {
  825. options = $.extend(true, defaultOptions, {
  826. message: arguments[0],
  827. closable: false,
  828. buttonLabel: 'OK',
  829. callback: typeof arguments[1] !== 'undefined' ? arguments[1] : null
  830. });
  831. }
  832. return new BootstrapDialog({
  833. type: options.type,
  834. title: options.title,
  835. message: options.message,
  836. closable: options.closable,
  837. data: {
  838. callback: options.callback
  839. },
  840. onhide: function(dialog) {
  841. !dialog.getData('btnClicked') && dialog.isClosable() && typeof dialog.getData('callback') === 'function' && dialog.getData('callback')(false);
  842. },
  843. buttons: [{
  844. label: options.buttonLabel,
  845. action: function(dialog) {
  846. dialog.setData('btnClicked', true);
  847. typeof dialog.getData('callback') === 'function' && dialog.getData('callback')(true);
  848. dialog.close();
  849. }
  850. }]
  851. }).open();
  852. };
  853. /**
  854. * Confirm window
  855. *
  856. * @param {type} message
  857. * @param {type} callback
  858. * @returns the created dialog instance
  859. */
  860. BootstrapDialog.confirm = function(message, callback) {
  861. return new BootstrapDialog({
  862. title: 'Confirmation',
  863. message: message,
  864. closable: false,
  865. data: {
  866. 'callback': callback
  867. },
  868. buttons: [{
  869. label: 'Cancel',
  870. action: function(dialog) {
  871. typeof dialog.getData('callback') === 'function' && dialog.getData('callback')(false);
  872. dialog.close();
  873. }
  874. }, {
  875. label: 'OK',
  876. cssClass: 'btn-primary',
  877. action: function(dialog) {
  878. typeof dialog.getData('callback') === 'function' && dialog.getData('callback')(true);
  879. dialog.close();
  880. }
  881. }]
  882. }).open();
  883. };
  884. /**
  885. * Warning window
  886. *
  887. * @param {type} message
  888. * @returns the created dialog instance
  889. */
  890. BootstrapDialog.warning = function(message, callback) {
  891. return new BootstrapDialog({
  892. type: BootstrapDialog.TYPE_WARNING,
  893. message: message
  894. }).open();
  895. };
  896. /**
  897. * Danger window
  898. *
  899. * @param {type} message
  900. * @returns the created dialog instance
  901. */
  902. BootstrapDialog.danger = function(message, callback) {
  903. return new BootstrapDialog({
  904. type: BootstrapDialog.TYPE_DANGER,
  905. message: message
  906. }).open();
  907. };
  908. /**
  909. * Success window
  910. *
  911. * @param {type} message
  912. * @returns the created dialog instance
  913. */
  914. BootstrapDialog.success = function(message, callback) {
  915. return new BootstrapDialog({
  916. type: BootstrapDialog.TYPE_SUCCESS,
  917. message: message
  918. }).open();
  919. };
  920. return BootstrapDialog;
  921. }));