bootstrap-dialog.js 33 KB

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