bootstrap-dialog.js 30 KB

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