bootstrap-dialog.js 32 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020
  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. return this;
  266. },
  267. getSize: function() {
  268. return this.options.size;
  269. },
  270. setSize: function(size) {
  271. this.options.size = size;
  272. return this;
  273. },
  274. getCssClass: function() {
  275. return this.options.cssClass;
  276. },
  277. setCssClass: function(cssClass) {
  278. this.options.cssClass = cssClass;
  279. return this;
  280. },
  281. getTitle: function() {
  282. return this.options.title;
  283. },
  284. setTitle: function(title) {
  285. this.options.title = title;
  286. this.updateTitle();
  287. return this;
  288. },
  289. updateTitle: function() {
  290. if (this.isRealized()) {
  291. var title = this.getTitle() !== null ? this.createDynamicContent(this.getTitle()) : this.getDefaultText();
  292. this.getModalHeader().find('.' + this.getNamespace('title')).html('').append(title);
  293. }
  294. return this;
  295. },
  296. getMessage: function() {
  297. return this.options.message;
  298. },
  299. setMessage: function(message) {
  300. this.options.message = message;
  301. this.updateMessage();
  302. return this;
  303. },
  304. updateMessage: function() {
  305. if (this.isRealized()) {
  306. var message = this.createDynamicContent(this.getMessage());
  307. this.getModalBody().find('.' + this.getNamespace('message')).html('').append(message);
  308. }
  309. return this;
  310. },
  311. isClosable: function() {
  312. return this.options.closable;
  313. },
  314. setClosable: function(closable) {
  315. this.options.closable = closable;
  316. this.updateClosable();
  317. return this;
  318. },
  319. setCloseByBackdrop: function(closeByBackdrop) {
  320. this.options.closeByBackdrop = closeByBackdrop;
  321. return this;
  322. },
  323. canCloseByBackdrop: function() {
  324. return this.options.closeByBackdrop;
  325. },
  326. setCloseByKeyboard: function(closeByKeyboard) {
  327. this.options.closeByKeyboard = closeByKeyboard;
  328. return this;
  329. },
  330. canCloseByKeyboard: function() {
  331. return this.options.closeByKeyboard;
  332. },
  333. isAnimate: function() {
  334. return this.options.animate;
  335. },
  336. setAnimate: function(animate) {
  337. this.options.animate = animate;
  338. return this;
  339. },
  340. updateAnimate: function() {
  341. if (this.isRealized()) {
  342. this.getModal().toggleClass('fade', this.isAnimate());
  343. }
  344. return this;
  345. },
  346. getSpinicon: function() {
  347. return this.options.spinicon;
  348. },
  349. setSpinicon: function(spinicon) {
  350. this.options.spinicon = spinicon;
  351. return this;
  352. },
  353. addButton: function(button) {
  354. this.options.buttons.push(button);
  355. return this;
  356. },
  357. addButtons: function(buttons) {
  358. var that = this;
  359. $.each(buttons, function(index, button) {
  360. that.addButton(button);
  361. });
  362. return this;
  363. },
  364. getButtons: function() {
  365. return this.options.buttons;
  366. },
  367. setButtons: function(buttons) {
  368. this.options.buttons = buttons;
  369. this.updateButtons();
  370. return this;
  371. },
  372. /**
  373. * If there is id provided for a button option, it will be in dialog.indexedButtons list.
  374. *
  375. * In that case you can use dialog.getButton(id) to find the button.
  376. *
  377. * @param {type} id
  378. * @returns {undefined}
  379. */
  380. getButton: function(id) {
  381. if (typeof this.indexedButtons[id] !== 'undefined') {
  382. return this.indexedButtons[id];
  383. }
  384. return null;
  385. },
  386. getButtonSize: function() {
  387. if (typeof BootstrapDialog.BUTTON_SIZES[this.getSize()] !== 'undefined') {
  388. return BootstrapDialog.BUTTON_SIZES[this.getSize()];
  389. }
  390. return '';
  391. },
  392. updateButtons: function() {
  393. if (this.isRealized()) {
  394. if (this.getButtons().length === 0) {
  395. this.getModalFooter().hide();
  396. } else {
  397. this.getModalFooter().find('.' + this.getNamespace('footer')).html('').append(this.createFooterButtons());
  398. }
  399. }
  400. return this;
  401. },
  402. isAutodestroy: function() {
  403. return this.options.autodestroy;
  404. },
  405. setAutodestroy: function(autodestroy) {
  406. this.options.autodestroy = autodestroy;
  407. },
  408. getDefaultText: function() {
  409. return BootstrapDialog.DEFAULT_TEXTS[this.getType()];
  410. },
  411. getNamespace: function(name) {
  412. return BootstrapDialog.NAMESPACE + '-' + name;
  413. },
  414. createHeaderContent: function() {
  415. var $container = $('<div></div>');
  416. $container.addClass(this.getNamespace('header'));
  417. // title
  418. $container.append(this.createTitleContent());
  419. // Close button
  420. $container.prepend(this.createCloseButton());
  421. return $container;
  422. },
  423. createTitleContent: function() {
  424. var $title = $('<div></div>');
  425. $title.addClass(this.getNamespace('title'));
  426. return $title;
  427. },
  428. createCloseButton: function() {
  429. var $container = $('<div></div>');
  430. $container.addClass(this.getNamespace('close-button'));
  431. var $icon = $('<button class="close">&times;</button>');
  432. $container.append($icon);
  433. $container.on('click', {dialog: this}, function(event) {
  434. event.data.dialog.close();
  435. });
  436. return $container;
  437. },
  438. createBodyContent: function() {
  439. var $container = $('<div></div>');
  440. $container.addClass(this.getNamespace('body'));
  441. // Message
  442. $container.append(this.createMessageContent());
  443. return $container;
  444. },
  445. createMessageContent: function() {
  446. var $message = $('<div></div>');
  447. $message.addClass(this.getNamespace('message'));
  448. return $message;
  449. },
  450. createFooterContent: function() {
  451. var $container = $('<div></div>');
  452. $container.addClass(this.getNamespace('footer'));
  453. return $container;
  454. },
  455. createFooterButtons: function() {
  456. var that = this;
  457. var $container = $('<div></div>');
  458. $container.addClass(this.getNamespace('footer-buttons'));
  459. this.indexedButtons = {};
  460. $.each(this.options.buttons, function(index, button) {
  461. if (!button.id) {
  462. button.id = BootstrapDialog.newGuid();
  463. }
  464. var $button = that.createButton(button);
  465. that.indexedButtons[button.id] = $button;
  466. $container.append($button);
  467. });
  468. return $container;
  469. },
  470. createButton: function(button) {
  471. var $button = $('<button class="btn"></button>');
  472. $button.addClass(this.getButtonSize());
  473. $button.prop('id', button.id);
  474. // Icon
  475. if (typeof button.icon !== 'undefined' && $.trim(button.icon) !== '') {
  476. $button.append(this.createButtonIcon(button.icon));
  477. }
  478. // Label
  479. if (typeof button.label !== 'undefined') {
  480. $button.append(button.label);
  481. }
  482. // Css class
  483. if (typeof button.cssClass !== 'undefined' && $.trim(button.cssClass) !== '') {
  484. $button.addClass(button.cssClass);
  485. } else {
  486. $button.addClass('btn-default');
  487. }
  488. // Hotkey
  489. if (typeof button.hotkey !== 'undefined') {
  490. this.registeredButtonHotkeys[button.hotkey] = $button;
  491. }
  492. // Button on click
  493. $button.on('click', {dialog: this, $button: $button, button: button}, function(event) {
  494. var dialog = event.data.dialog;
  495. var $button = event.data.$button;
  496. var button = event.data.button;
  497. if (typeof button.action === 'function') {
  498. button.action.call($button, dialog);
  499. }
  500. if (button.autospin) {
  501. $button.toggleSpin(true);
  502. }
  503. });
  504. // Dynamically add extra functions to $button
  505. this.enhanceButton($button);
  506. return $button;
  507. },
  508. /**
  509. * Dynamically add extra functions to $button
  510. *
  511. * Using '$this' to reference 'this' is just for better readability.
  512. *
  513. * @param {type} $button
  514. * @returns {_L13.BootstrapDialog.prototype}
  515. */
  516. enhanceButton: function($button) {
  517. $button.dialog = this;
  518. // Enable / Disable
  519. $button.toggleEnable = function(enable) {
  520. var $this = this;
  521. if (typeof enable !== 'undefined') {
  522. $this.prop("disabled", !enable).toggleClass('disabled', !enable);
  523. } else {
  524. $this.prop("disabled", !$this.prop("disabled"));
  525. }
  526. return $this;
  527. };
  528. $button.enable = function() {
  529. var $this = this;
  530. $this.toggleEnable(true);
  531. return $this;
  532. };
  533. $button.disable = function() {
  534. var $this = this;
  535. $this.toggleEnable(false);
  536. return $this;
  537. };
  538. // Icon spinning, helpful for indicating ajax loading status.
  539. $button.toggleSpin = function(spin) {
  540. var $this = this;
  541. var dialog = $this.dialog;
  542. var $icon = $this.find('.' + dialog.getNamespace('button-icon'));
  543. if (typeof spin === 'undefined') {
  544. spin = !($button.find('.icon-spin').length > 0);
  545. }
  546. if (spin) {
  547. $icon.hide();
  548. $button.prepend(dialog.createButtonIcon(dialog.getSpinicon()).addClass('icon-spin'));
  549. } else {
  550. $icon.show();
  551. $button.find('.icon-spin').remove();
  552. }
  553. return $this;
  554. };
  555. $button.spin = function() {
  556. var $this = this;
  557. $this.toggleSpin(true);
  558. return $this;
  559. };
  560. $button.stopSpin = function() {
  561. var $this = this;
  562. $this.toggleSpin(false);
  563. return $this;
  564. };
  565. return this;
  566. },
  567. createButtonIcon: function(icon) {
  568. var $icon = $('<span></span>');
  569. $icon.addClass(this.getNamespace('button-icon')).addClass(icon);
  570. return $icon;
  571. },
  572. /**
  573. * Invoke this only after the dialog is realized.
  574. *
  575. * @param {type} enable
  576. * @returns {undefined}
  577. */
  578. enableButtons: function(enable) {
  579. $.each(this.indexedButtons, function(id, $button) {
  580. $button.toggleEnable(enable);
  581. });
  582. return this;
  583. },
  584. /**
  585. * Invoke this only after the dialog is realized.
  586. *
  587. * @returns {undefined}
  588. */
  589. updateClosable: function() {
  590. if (this.isRealized()) {
  591. // Close button
  592. this.getModalHeader().find('.' + this.getNamespace('close-button')).toggle(this.isClosable());
  593. }
  594. return this;
  595. },
  596. /**
  597. * Set handler for modal event 'show.bs.modal'.
  598. * This is a setter!
  599. */
  600. onShow: function(onshow) {
  601. this.options.onshow = onshow;
  602. return this;
  603. },
  604. /**
  605. * Set handler for modal event 'shown.bs.modal'.
  606. * This is a setter!
  607. */
  608. onShown: function(onshown) {
  609. this.options.onshown = onshown;
  610. return this;
  611. },
  612. /**
  613. * Set handler for modal event 'hide.bs.modal'.
  614. * This is a setter!
  615. */
  616. onHide: function(onhide) {
  617. this.options.onhide = onhide;
  618. return this;
  619. },
  620. /**
  621. * Set handler for modal event 'hidden.bs.modal'.
  622. * This is a setter!
  623. */
  624. onHidden: function(onhidden) {
  625. this.options.onhidden = onhidden;
  626. return this;
  627. },
  628. isRealized: function() {
  629. return this.realized;
  630. },
  631. setRealized: function(realized) {
  632. this.realized = realized;
  633. return this;
  634. },
  635. isOpened: function() {
  636. return this.opened;
  637. },
  638. setOpened: function(opened) {
  639. this.opened = opened;
  640. return this;
  641. },
  642. handleModalEvents: function() {
  643. this.getModal().on('show.bs.modal', {dialog: this}, function(event) {
  644. var dialog = event.data.dialog;
  645. if (typeof dialog.options.onshow === 'function') {
  646. return dialog.options.onshow(dialog);
  647. }
  648. });
  649. this.getModal().on('shown.bs.modal', {dialog: this}, function(event) {
  650. var dialog = event.data.dialog;
  651. typeof dialog.options.onshown === 'function' && dialog.options.onshown(dialog);
  652. });
  653. this.getModal().on('hide.bs.modal', {dialog: this}, function(event) {
  654. var dialog = event.data.dialog;
  655. if (typeof dialog.options.onhide === 'function') {
  656. return dialog.options.onhide(dialog);
  657. }
  658. });
  659. this.getModal().on('hidden.bs.modal', {dialog: this}, function(event) {
  660. var dialog = event.data.dialog;
  661. typeof dialog.options.onhidden === 'function' && dialog.options.onhidden(dialog);
  662. dialog.isAutodestroy() && $(this).remove();
  663. });
  664. // Backdrop, I did't find a way to change bs3 backdrop option after the dialog is popped up, so here's a new wheel.
  665. this.getModal().on('click', {dialog: this}, function(event) {
  666. event.target === this && event.data.dialog.isClosable() && event.data.dialog.canCloseByBackdrop() && event.data.dialog.close();
  667. });
  668. // ESC key support
  669. this.getModal().on('keyup', {dialog: this}, function(event) {
  670. event.which === 27 && event.data.dialog.isClosable() && event.data.dialog.canCloseByKeyboard() && event.data.dialog.close();
  671. });
  672. // Button hotkey
  673. this.getModal().on('keyup', {dialog: this}, function(event) {
  674. var dialog = event.data.dialog;
  675. if (typeof dialog.registeredButtonHotkeys[event.which] !== 'undefined') {
  676. var $button = $(dialog.registeredButtonHotkeys[event.which]);
  677. !$button.prop('disabled') && $button.focus().trigger('click');
  678. }
  679. });
  680. return this;
  681. },
  682. makeModalDraggable: function() {
  683. if (this.options.draggable) {
  684. this.getModalHeader().addClass(this.getNamespace('draggable')).on('mousedown', {dialog: this}, function(event) {
  685. var dialog = event.data.dialog;
  686. dialog.draggableData.isMouseDown = true;
  687. var dialogOffset = dialog.getModalContent().offset();
  688. dialog.draggableData.mouseOffset = {
  689. top: event.clientY - dialogOffset.top,
  690. left: event.clientX - dialogOffset.left
  691. };
  692. });
  693. this.getModal().on('mouseup mouseleave', {dialog: this}, function(event) {
  694. event.data.dialog.draggableData.isMouseDown = false;
  695. });
  696. $('body').on('mousemove', {dialog: this}, function(event) {
  697. var dialog = event.data.dialog;
  698. if (!dialog.draggableData.isMouseDown) {
  699. return;
  700. }
  701. dialog.getModalContent().offset({
  702. top: event.clientY - dialog.draggableData.mouseOffset.top,
  703. left: event.clientX - dialog.draggableData.mouseOffset.left
  704. });
  705. });
  706. }
  707. return this;
  708. },
  709. /**
  710. * To make multiple opened dialogs look better.
  711. */
  712. updateZIndex: function() {
  713. var dialogCount = 0;
  714. $.each(BootstrapDialog.dialogs, function(dialogId, dialogInstance) {
  715. dialogCount++;
  716. });
  717. if (dialogCount > 1) {
  718. var $modal = this.getModal();
  719. var $backdrop = $modal.data('bs.modal').$backdrop;
  720. $modal.css('z-index', BootstrapDialog.ZINDEX_MODAL + (dialogCount - 1) * 20);
  721. $backdrop.css('z-index', BootstrapDialog.ZINDEX_BACKDROP + (dialogCount - 1) * 20);
  722. }
  723. return this;
  724. },
  725. realize: function() {
  726. this.initModalStuff();
  727. this.getModal().addClass(BootstrapDialog.NAMESPACE)
  728. .addClass(this.getType())
  729. .addClass(this.getSize())
  730. .addClass(this.getCssClass());
  731. this.getModalFooter().append(this.createFooterContent());
  732. this.getModalHeader().append(this.createHeaderContent());
  733. this.getModalBody().append(this.createBodyContent());
  734. this.getModal().modal({
  735. backdrop: 'static',
  736. keyboard: false,
  737. show: false
  738. });
  739. this.makeModalDraggable();
  740. this.handleModalEvents();
  741. this.setRealized(true);
  742. this.updateButtons();
  743. this.updateTitle();
  744. this.updateMessage();
  745. this.updateClosable();
  746. this.updateAnimate();
  747. return this;
  748. },
  749. open: function() {
  750. !this.isRealized() && this.realize();
  751. this.getModal().modal('show');
  752. this.updateZIndex();
  753. this.setOpened(true);
  754. return this;
  755. },
  756. close: function() {
  757. this.getModal().modal('hide');
  758. if (this.isAutodestroy()) {
  759. delete BootstrapDialog.dialogs[this.getId()];
  760. }
  761. this.setOpened(false);
  762. // Move focus to the last visible dialog.
  763. BootstrapDialog.moveFocus();
  764. // Show scrollbar if the last visible dialog needs one.
  765. BootstrapDialog.showScrollbar();
  766. return this;
  767. }
  768. };
  769. /**
  770. * RFC4122 version 4 compliant unique id creator.
  771. *
  772. * Added by https://github.com/tufanbarisyildirim/
  773. *
  774. * @returns {String}
  775. */
  776. BootstrapDialog.newGuid = function() {
  777. return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
  778. var r = Math.random() * 16 | 0, v = c === 'x' ? r : (r & 0x3 | 0x8);
  779. return v.toString(16);
  780. });
  781. };
  782. /* ================================================
  783. * For lazy people
  784. * ================================================ */
  785. /**
  786. * Shortcut function: show
  787. *
  788. * @param {type} options
  789. * @returns the created dialog instance
  790. */
  791. BootstrapDialog.show = function(options) {
  792. return new BootstrapDialog(options).open();
  793. };
  794. /**
  795. * Alert window
  796. *
  797. * @returns the created dialog instance
  798. */
  799. BootstrapDialog.alert = function() {
  800. var options = {};
  801. var defaultOptions = {
  802. type: BootstrapDialog.TYPE_PRIMARY,
  803. title: null,
  804. message: null,
  805. closable: true,
  806. buttonLabel: 'OK',
  807. callback: null
  808. };
  809. if (typeof arguments[0] === 'object' && arguments[0].constructor === {}.constructor) {
  810. options = $.extend(true, defaultOptions, arguments[0]);
  811. } else {
  812. options = $.extend(true, defaultOptions, {
  813. message: arguments[0],
  814. closable: false,
  815. buttonLabel: 'OK',
  816. callback: typeof arguments[1] !== 'undefined' ? arguments[1] : null
  817. });
  818. }
  819. return new BootstrapDialog({
  820. type: options.type,
  821. title: options.title,
  822. message: options.message,
  823. closable: options.closable,
  824. data: {
  825. callback: options.callback
  826. },
  827. onhide: function(dialog) {
  828. !dialog.getData('btnClicked') && dialog.isClosable() && typeof dialog.getData('callback') === 'function' && dialog.getData('callback')(false);
  829. },
  830. buttons: [{
  831. label: options.buttonLabel,
  832. action: function(dialog) {
  833. dialog.setData('btnClicked', true);
  834. typeof dialog.getData('callback') === 'function' && dialog.getData('callback')(true);
  835. dialog.close();
  836. }
  837. }]
  838. }).open();
  839. };
  840. /**
  841. * Confirm window
  842. *
  843. * @param {type} message
  844. * @param {type} callback
  845. * @returns the created dialog instance
  846. */
  847. BootstrapDialog.confirm = function(message, callback) {
  848. return new BootstrapDialog({
  849. title: 'Confirmation',
  850. message: message,
  851. closable: false,
  852. data: {
  853. 'callback': callback
  854. },
  855. buttons: [{
  856. label: 'Cancel',
  857. action: function(dialog) {
  858. typeof dialog.getData('callback') === 'function' && dialog.getData('callback')(false);
  859. dialog.close();
  860. }
  861. }, {
  862. label: 'OK',
  863. cssClass: 'btn-primary',
  864. action: function(dialog) {
  865. typeof dialog.getData('callback') === 'function' && dialog.getData('callback')(true);
  866. dialog.close();
  867. }
  868. }]
  869. }).open();
  870. };
  871. /**
  872. * Warning window
  873. *
  874. * @param {type} message
  875. * @returns the created dialog instance
  876. */
  877. BootstrapDialog.warning = function(message, callback) {
  878. return new BootstrapDialog({
  879. type: BootstrapDialog.TYPE_WARNING,
  880. message: message
  881. }).open();
  882. };
  883. /**
  884. * Danger window
  885. *
  886. * @param {type} message
  887. * @returns the created dialog instance
  888. */
  889. BootstrapDialog.danger = function(message, callback) {
  890. return new BootstrapDialog({
  891. type: BootstrapDialog.TYPE_DANGER,
  892. message: message
  893. }).open();
  894. };
  895. /**
  896. * Success window
  897. *
  898. * @param {type} message
  899. * @returns the created dialog instance
  900. */
  901. BootstrapDialog.success = function(message, callback) {
  902. return new BootstrapDialog({
  903. type: BootstrapDialog.TYPE_SUCCESS,
  904. message: message
  905. }).open();
  906. };
  907. return BootstrapDialog;
  908. }));