bootstrap-dialog.js 42 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277
  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. /* ================================================
  31. * Definition of BootstrapDialogModal.
  32. * Extend Bootstrap Modal and override some functions.
  33. * BootstrapDialogModal === Modified Modal.
  34. * ================================================ */
  35. var Modal = $.fn.modal.Constructor;
  36. var BootstrapDialogModal = function(element, options) {
  37. Modal.call(this, element, options);
  38. };
  39. BootstrapDialogModal.getModalVersion = function() {
  40. var version = null;
  41. if (typeof $.fn.modal.Constructor.VERSION === 'undefined') {
  42. version = 'v3.1';
  43. } else if (/3\.2\.\d+/.test($.fn.modal.Constructor.VERSION)) {
  44. version = 'v3.2';
  45. } else {
  46. version = 'v3.3'; // v3.3+
  47. }
  48. return version;
  49. };
  50. BootstrapDialogModal.ORIGINAL_BODY_PADDING = $('body').css('padding-right') || 0;
  51. BootstrapDialogModal.METHODS_TO_OVERRIDE = {};
  52. BootstrapDialogModal.METHODS_TO_OVERRIDE['v3.1'] = {};
  53. BootstrapDialogModal.METHODS_TO_OVERRIDE['v3.2'] = {
  54. hide: function(e) {
  55. if (e) {
  56. e.preventDefault();
  57. }
  58. e = $.Event('hide.bs.modal');
  59. this.$element.trigger(e);
  60. if (!this.isShown || e.isDefaultPrevented()) {
  61. return;
  62. }
  63. this.isShown = false;
  64. // Remove css class 'modal-open' when the last opened dialog is closing.
  65. var openedDialogs = this.getGlobalOpenedDialogs();
  66. if (openedDialogs.length === 0) {
  67. this.$body.removeClass('modal-open');
  68. }
  69. this.resetScrollbar();
  70. this.escape();
  71. $(document).off('focusin.bs.modal');
  72. this.$element
  73. .removeClass('in')
  74. .attr('aria-hidden', true)
  75. .off('click.dismiss.bs.modal');
  76. $.support.transition && this.$element.hasClass('fade') ?
  77. this.$element
  78. .one('bsTransitionEnd', $.proxy(this.hideModal, this))
  79. .emulateTransitionEnd(300) :
  80. this.hideModal();
  81. }
  82. };
  83. BootstrapDialogModal.METHODS_TO_OVERRIDE['v3.3'] = {
  84. /**
  85. * Overrided.
  86. *
  87. * @returns {undefined}
  88. */
  89. setScrollbar: function() {
  90. var bodyPad = BootstrapDialogModal.ORIGINAL_BODY_PADDING;
  91. if (this.bodyIsOverflowing) {
  92. this.$body.css('padding-right', bodyPad + this.scrollbarWidth);
  93. }
  94. },
  95. /**
  96. * Overrided.
  97. *
  98. * @returns {undefined}
  99. */
  100. resetScrollbar: function() {
  101. var openedDialogs = this.getGlobalOpenedDialogs();
  102. if (openedDialogs.length === 0) {
  103. this.$body.css('padding-right', BootstrapDialogModal.ORIGINAL_BODY_PADDING);
  104. }
  105. },
  106. /**
  107. * Overrided.
  108. *
  109. * @returns {undefined}
  110. */
  111. hideModal: function() {
  112. this.$element.hide();
  113. this.backdrop($.proxy(function() {
  114. var openedDialogs = this.getGlobalOpenedDialogs();
  115. if (openedDialogs.length === 0) {
  116. this.$body.removeClass('modal-open');
  117. }
  118. this.resetAdjustments();
  119. this.resetScrollbar();
  120. this.$element.trigger('hidden.bs.modal');
  121. }, this));
  122. }
  123. };
  124. BootstrapDialogModal.prototype = {
  125. constructor: BootstrapDialogModal,
  126. /**
  127. * New function, to get the dialogs that opened by BootstrapDialog.
  128. *
  129. * @returns {undefined}
  130. */
  131. getGlobalOpenedDialogs: function() {
  132. var openedDialogs = [];
  133. $.each(BootstrapDialog.dialogs, function(id, dialogInstance) {
  134. if (dialogInstance.isRealized() && dialogInstance.isOpened()) {
  135. openedDialogs.push(dialogInstance);
  136. }
  137. });
  138. return openedDialogs;
  139. }
  140. };
  141. // Add compatible methods.
  142. BootstrapDialogModal.prototype = $.extend(BootstrapDialogModal.prototype, Modal.prototype, BootstrapDialogModal.METHODS_TO_OVERRIDE[BootstrapDialogModal.getModalVersion()]);
  143. /* ================================================
  144. * Definition of BootstrapDialog.
  145. * ================================================ */
  146. var BootstrapDialog = function(options) {
  147. this.defaultOptions = $.extend(true, {
  148. id: BootstrapDialog.newGuid(),
  149. buttons: [],
  150. data: {},
  151. onshow: null,
  152. onshown: null,
  153. onhide: null,
  154. onhidden: null
  155. }, BootstrapDialog.defaultOptions);
  156. this.indexedButtons = {};
  157. this.registeredButtonHotkeys = {};
  158. this.draggableData = {
  159. isMouseDown: false,
  160. mouseOffset: {}
  161. };
  162. this.realized = false;
  163. this.opened = false;
  164. this.initOptions(options);
  165. this.holdThisInstance();
  166. };
  167. /**
  168. * Some constants.
  169. */
  170. BootstrapDialog.NAMESPACE = 'bootstrap-dialog';
  171. BootstrapDialog.TYPE_DEFAULT = 'type-default';
  172. BootstrapDialog.TYPE_INFO = 'type-info';
  173. BootstrapDialog.TYPE_PRIMARY = 'type-primary';
  174. BootstrapDialog.TYPE_SUCCESS = 'type-success';
  175. BootstrapDialog.TYPE_WARNING = 'type-warning';
  176. BootstrapDialog.TYPE_DANGER = 'type-danger';
  177. BootstrapDialog.DEFAULT_TEXTS = {};
  178. BootstrapDialog.DEFAULT_TEXTS[BootstrapDialog.TYPE_DEFAULT] = 'Information';
  179. BootstrapDialog.DEFAULT_TEXTS[BootstrapDialog.TYPE_INFO] = 'Information';
  180. BootstrapDialog.DEFAULT_TEXTS[BootstrapDialog.TYPE_PRIMARY] = 'Information';
  181. BootstrapDialog.DEFAULT_TEXTS[BootstrapDialog.TYPE_SUCCESS] = 'Success';
  182. BootstrapDialog.DEFAULT_TEXTS[BootstrapDialog.TYPE_WARNING] = 'Warning';
  183. BootstrapDialog.DEFAULT_TEXTS[BootstrapDialog.TYPE_DANGER] = 'Danger';
  184. BootstrapDialog.DEFAULT_TEXTS['OK'] = 'OK';
  185. BootstrapDialog.DEFAULT_TEXTS['CANCEL'] = 'Cancel';
  186. BootstrapDialog.DEFAULT_TEXTS['CONFIRM'] = 'Confirmation';
  187. BootstrapDialog.SIZE_NORMAL = 'size-normal';
  188. BootstrapDialog.SIZE_SMALL = 'size-small';
  189. BootstrapDialog.SIZE_WIDE = 'size-wide'; // size-wide is equal to modal-lg
  190. BootstrapDialog.SIZE_LARGE = 'size-large';
  191. BootstrapDialog.BUTTON_SIZES = {};
  192. BootstrapDialog.BUTTON_SIZES[BootstrapDialog.SIZE_NORMAL] = '';
  193. BootstrapDialog.BUTTON_SIZES[BootstrapDialog.SIZE_SMALL] = '';
  194. BootstrapDialog.BUTTON_SIZES[BootstrapDialog.SIZE_WIDE] = '';
  195. BootstrapDialog.BUTTON_SIZES[BootstrapDialog.SIZE_LARGE] = 'btn-lg';
  196. BootstrapDialog.ICON_SPINNER = 'glyphicon glyphicon-asterisk';
  197. /**
  198. * Default options.
  199. */
  200. BootstrapDialog.defaultOptions = {
  201. type: BootstrapDialog.TYPE_PRIMARY,
  202. size: BootstrapDialog.SIZE_NORMAL,
  203. cssClass: '',
  204. title: null,
  205. message: null,
  206. nl2br: true,
  207. closable: true,
  208. closeByBackdrop: true,
  209. closeByKeyboard: true,
  210. spinicon: BootstrapDialog.ICON_SPINNER,
  211. autodestroy: true,
  212. draggable: false,
  213. animate: true,
  214. description: ''
  215. };
  216. /**
  217. * Config default options.
  218. */
  219. BootstrapDialog.configDefaultOptions = function(options) {
  220. BootstrapDialog.defaultOptions = $.extend(true, BootstrapDialog.defaultOptions, options);
  221. };
  222. /**
  223. * Open / Close all created dialogs all at once.
  224. */
  225. BootstrapDialog.dialogs = {};
  226. BootstrapDialog.openAll = function() {
  227. $.each(BootstrapDialog.dialogs, function(id, dialogInstance) {
  228. dialogInstance.open();
  229. });
  230. };
  231. BootstrapDialog.closeAll = function() {
  232. $.each(BootstrapDialog.dialogs, function(id, dialogInstance) {
  233. dialogInstance.close();
  234. });
  235. };
  236. /**
  237. * Move focus to next visible dialog.
  238. */
  239. BootstrapDialog.moveFocus = function() {
  240. var lastDialogInstance = null;
  241. $.each(BootstrapDialog.dialogs, function(id, dialogInstance) {
  242. lastDialogInstance = dialogInstance;
  243. });
  244. if (lastDialogInstance !== null && lastDialogInstance.isRealized()) {
  245. lastDialogInstance.getModal().focus();
  246. }
  247. };
  248. BootstrapDialog.METHODS_TO_OVERRIDE = {};
  249. BootstrapDialog.METHODS_TO_OVERRIDE['v3.1'] = {
  250. handleModalBackdropEvent: function() {
  251. this.getModal().on('click', {dialog: this}, function(event) {
  252. event.target === this && event.data.dialog.isClosable() && event.data.dialog.canCloseByBackdrop() && event.data.dialog.close();
  253. });
  254. return this;
  255. },
  256. /**
  257. * To make multiple opened dialogs look better.
  258. *
  259. * Will be removed in later version, after Bootstrap Modal >= 3.3.0, updating z-index is unnecessary.
  260. */
  261. updateZIndex: function() {
  262. var zIndexBackdrop = 1040;
  263. var zIndexModal = 1050;
  264. var dialogCount = 0;
  265. $.each(BootstrapDialog.dialogs, function(dialogId, dialogInstance) {
  266. dialogCount++;
  267. });
  268. var $modal = this.getModal();
  269. var $backdrop = $modal.data('bs.modal').$backdrop;
  270. $modal.css('z-index', zIndexModal + (dialogCount - 1) * 20);
  271. $backdrop.css('z-index', zIndexBackdrop + (dialogCount - 1) * 20);
  272. return this;
  273. },
  274. open: function() {
  275. !this.isRealized() && this.realize();
  276. this.getModal().modal('show');
  277. this.updateZIndex();
  278. this.setOpened(true);
  279. return this;
  280. }
  281. };
  282. BootstrapDialog.METHODS_TO_OVERRIDE['v3.2'] = {
  283. handleModalBackdropEvent: BootstrapDialog.METHODS_TO_OVERRIDE['v3.1']['handleModalBackdropEvent'],
  284. updateZIndex: BootstrapDialog.METHODS_TO_OVERRIDE['v3.1']['updateZIndex'],
  285. open: BootstrapDialog.METHODS_TO_OVERRIDE['v3.1']['open']
  286. };
  287. BootstrapDialog.METHODS_TO_OVERRIDE['v3.3'] = {};
  288. BootstrapDialog.prototype = {
  289. constructor: BootstrapDialog,
  290. initOptions: function(options) {
  291. this.options = $.extend(true, this.defaultOptions, options);
  292. return this;
  293. },
  294. holdThisInstance: function() {
  295. BootstrapDialog.dialogs[this.getId()] = this;
  296. return this;
  297. },
  298. initModalStuff: function() {
  299. this.setModal(this.createModal())
  300. .setModalDialog(this.createModalDialog())
  301. .setModalContent(this.createModalContent())
  302. .setModalHeader(this.createModalHeader())
  303. .setModalBody(this.createModalBody())
  304. .setModalFooter(this.createModalFooter());
  305. this.getModal().append(this.getModalDialog());
  306. this.getModalDialog().append(this.getModalContent());
  307. this.getModalContent()
  308. .append(this.getModalHeader())
  309. .append(this.getModalBody())
  310. .append(this.getModalFooter());
  311. return this;
  312. },
  313. createModal: function() {
  314. var $modal = $('<div class="modal" tabindex="-1" role="dialog" aria-hidden="true"></div>');
  315. $modal.prop('id', this.getId()).attr('aria-labelledby', this.getId() + '_title');
  316. return $modal;
  317. },
  318. getModal: function() {
  319. return this.$modal;
  320. },
  321. setModal: function($modal) {
  322. this.$modal = $modal;
  323. return this;
  324. },
  325. createModalDialog: function() {
  326. return $('<div class="modal-dialog"></div>');
  327. },
  328. getModalDialog: function() {
  329. return this.$modalDialog;
  330. },
  331. setModalDialog: function($modalDialog) {
  332. this.$modalDialog = $modalDialog;
  333. return this;
  334. },
  335. createModalContent: function() {
  336. return $('<div class="modal-content"></div>');
  337. },
  338. getModalContent: function() {
  339. return this.$modalContent;
  340. },
  341. setModalContent: function($modalContent) {
  342. this.$modalContent = $modalContent;
  343. return this;
  344. },
  345. createModalHeader: function() {
  346. return $('<div class="modal-header"></div>');
  347. },
  348. getModalHeader: function() {
  349. return this.$modalHeader;
  350. },
  351. setModalHeader: function($modalHeader) {
  352. this.$modalHeader = $modalHeader;
  353. return this;
  354. },
  355. createModalBody: function() {
  356. return $('<div class="modal-body"></div>');
  357. },
  358. getModalBody: function() {
  359. return this.$modalBody;
  360. },
  361. setModalBody: function($modalBody) {
  362. this.$modalBody = $modalBody;
  363. return this;
  364. },
  365. createModalFooter: function() {
  366. return $('<div class="modal-footer"></div>');
  367. },
  368. getModalFooter: function() {
  369. return this.$modalFooter;
  370. },
  371. setModalFooter: function($modalFooter) {
  372. this.$modalFooter = $modalFooter;
  373. return this;
  374. },
  375. createDynamicContent: function(rawContent) {
  376. var content = null;
  377. if (typeof rawContent === 'function') {
  378. content = rawContent.call(rawContent, this);
  379. } else {
  380. content = rawContent;
  381. }
  382. if (typeof content === 'string') {
  383. content = this.formatStringContent(content);
  384. }
  385. return content;
  386. },
  387. formatStringContent: function(content) {
  388. if (this.options.nl2br) {
  389. return content.replace(/\r\n/g, '<br />').replace(/[\r\n]/g, '<br />');
  390. }
  391. return content;
  392. },
  393. setData: function(key, value) {
  394. this.options.data[key] = value;
  395. return this;
  396. },
  397. getData: function(key) {
  398. return this.options.data[key];
  399. },
  400. setId: function(id) {
  401. this.options.id = id;
  402. return this;
  403. },
  404. getId: function() {
  405. return this.options.id;
  406. },
  407. getType: function() {
  408. return this.options.type;
  409. },
  410. setType: function(type) {
  411. this.options.type = type;
  412. this.updateType();
  413. return this;
  414. },
  415. updateType: function() {
  416. if (this.isRealized()) {
  417. var types = [BootstrapDialog.TYPE_DEFAULT,
  418. BootstrapDialog.TYPE_INFO,
  419. BootstrapDialog.TYPE_PRIMARY,
  420. BootstrapDialog.TYPE_SUCCESS,
  421. BootstrapDialog.TYPE_WARNING,
  422. BootstrapDialog.TYPE_DANGER];
  423. this.getModal().removeClass(types.join(' ')).addClass(this.getType());
  424. }
  425. return this;
  426. },
  427. getSize: function() {
  428. return this.options.size;
  429. },
  430. setSize: function(size) {
  431. this.options.size = size;
  432. this.updateSize();
  433. return this;
  434. },
  435. updateSize: function() {
  436. if (this.isRealized()) {
  437. var dialog = this;
  438. // Dialog size
  439. this.getModal().removeClass(BootstrapDialog.SIZE_NORMAL)
  440. .removeClass(BootstrapDialog.SIZE_SMALL)
  441. .removeClass(BootstrapDialog.SIZE_WIDE)
  442. .removeClass(BootstrapDialog.SIZE_LARGE);
  443. this.getModal().addClass(this.getSize());
  444. // Smaller dialog.
  445. this.getModalDialog().removeClass('modal-sm');
  446. if (this.getSize() === BootstrapDialog.SIZE_SMALL) {
  447. this.getModalDialog().addClass('modal-sm');
  448. }
  449. // Wider dialog.
  450. this.getModalDialog().removeClass('modal-lg');
  451. if (this.getSize() === BootstrapDialog.SIZE_WIDE) {
  452. this.getModalDialog().addClass('modal-lg');
  453. }
  454. // Button size
  455. $.each(this.options.buttons, function(index, button) {
  456. var $button = dialog.getButton(button.id);
  457. var buttonSizes = ['btn-lg', 'btn-sm', 'btn-xs'];
  458. var sizeClassSpecified = false;
  459. if (typeof button['cssClass'] === 'string') {
  460. var btnClasses = button['cssClass'].split(' ');
  461. $.each(btnClasses, function(index, btnClass) {
  462. if ($.inArray(btnClass, buttonSizes) !== -1) {
  463. sizeClassSpecified = true;
  464. }
  465. });
  466. }
  467. if (!sizeClassSpecified) {
  468. $button.removeClass(buttonSizes.join(' '));
  469. $button.addClass(dialog.getButtonSize());
  470. }
  471. });
  472. }
  473. return this;
  474. },
  475. getCssClass: function() {
  476. return this.options.cssClass;
  477. },
  478. setCssClass: function(cssClass) {
  479. this.options.cssClass = cssClass;
  480. return this;
  481. },
  482. getTitle: function() {
  483. return this.options.title;
  484. },
  485. setTitle: function(title) {
  486. this.options.title = title;
  487. this.updateTitle();
  488. return this;
  489. },
  490. updateTitle: function() {
  491. if (this.isRealized()) {
  492. var title = this.getTitle() !== null ? this.createDynamicContent(this.getTitle()) : this.getDefaultText();
  493. this.getModalHeader().find('.' + this.getNamespace('title')).html('').append(title).prop('id', this.getId() + '_title');
  494. }
  495. return this;
  496. },
  497. getMessage: function() {
  498. return this.options.message;
  499. },
  500. setMessage: function(message) {
  501. this.options.message = message;
  502. this.updateMessage();
  503. return this;
  504. },
  505. updateMessage: function() {
  506. if (this.isRealized()) {
  507. var message = this.createDynamicContent(this.getMessage());
  508. this.getModalBody().find('.' + this.getNamespace('message')).html('').append(message);
  509. }
  510. return this;
  511. },
  512. isClosable: function() {
  513. return this.options.closable;
  514. },
  515. setClosable: function(closable) {
  516. this.options.closable = closable;
  517. this.updateClosable();
  518. return this;
  519. },
  520. setCloseByBackdrop: function(closeByBackdrop) {
  521. this.options.closeByBackdrop = closeByBackdrop;
  522. return this;
  523. },
  524. canCloseByBackdrop: function() {
  525. return this.options.closeByBackdrop;
  526. },
  527. setCloseByKeyboard: function(closeByKeyboard) {
  528. this.options.closeByKeyboard = closeByKeyboard;
  529. return this;
  530. },
  531. canCloseByKeyboard: function() {
  532. return this.options.closeByKeyboard;
  533. },
  534. isAnimate: function() {
  535. return this.options.animate;
  536. },
  537. setAnimate: function(animate) {
  538. this.options.animate = animate;
  539. return this;
  540. },
  541. updateAnimate: function() {
  542. if (this.isRealized()) {
  543. this.getModal().toggleClass('fade', this.isAnimate());
  544. }
  545. return this;
  546. },
  547. getSpinicon: function() {
  548. return this.options.spinicon;
  549. },
  550. setSpinicon: function(spinicon) {
  551. this.options.spinicon = spinicon;
  552. return this;
  553. },
  554. addButton: function(button) {
  555. this.options.buttons.push(button);
  556. return this;
  557. },
  558. addButtons: function(buttons) {
  559. var that = this;
  560. $.each(buttons, function(index, button) {
  561. that.addButton(button);
  562. });
  563. return this;
  564. },
  565. getButtons: function() {
  566. return this.options.buttons;
  567. },
  568. setButtons: function(buttons) {
  569. this.options.buttons = buttons;
  570. this.updateButtons();
  571. return this;
  572. },
  573. /**
  574. * If there is id provided for a button option, it will be in dialog.indexedButtons list.
  575. *
  576. * In that case you can use dialog.getButton(id) to find the button.
  577. *
  578. * @param {type} id
  579. * @returns {undefined}
  580. */
  581. getButton: function(id) {
  582. if (typeof this.indexedButtons[id] !== 'undefined') {
  583. return this.indexedButtons[id];
  584. }
  585. return null;
  586. },
  587. getButtonSize: function() {
  588. if (typeof BootstrapDialog.BUTTON_SIZES[this.getSize()] !== 'undefined') {
  589. return BootstrapDialog.BUTTON_SIZES[this.getSize()];
  590. }
  591. return '';
  592. },
  593. updateButtons: function() {
  594. if (this.isRealized()) {
  595. if (this.getButtons().length === 0) {
  596. this.getModalFooter().hide();
  597. } else {
  598. this.getModalFooter().find('.' + this.getNamespace('footer')).html('').append(this.createFooterButtons());
  599. }
  600. }
  601. return this;
  602. },
  603. isAutodestroy: function() {
  604. return this.options.autodestroy;
  605. },
  606. setAutodestroy: function(autodestroy) {
  607. this.options.autodestroy = autodestroy;
  608. },
  609. getDescription: function() {
  610. return this.options.description;
  611. },
  612. setDescription: function(description) {
  613. this.options.description = description;
  614. return this;
  615. },
  616. getDefaultText: function() {
  617. return BootstrapDialog.DEFAULT_TEXTS[this.getType()];
  618. },
  619. getNamespace: function(name) {
  620. return BootstrapDialog.NAMESPACE + '-' + name;
  621. },
  622. createHeaderContent: function() {
  623. var $container = $('<div></div>');
  624. $container.addClass(this.getNamespace('header'));
  625. // title
  626. $container.append(this.createTitleContent());
  627. // Close button
  628. $container.prepend(this.createCloseButton());
  629. return $container;
  630. },
  631. createTitleContent: function() {
  632. var $title = $('<div></div>');
  633. $title.addClass(this.getNamespace('title'));
  634. return $title;
  635. },
  636. createCloseButton: function() {
  637. var $container = $('<div></div>');
  638. $container.addClass(this.getNamespace('close-button'));
  639. var $icon = $('<button class="close">&times;</button>');
  640. $container.append($icon);
  641. $container.on('click', {dialog: this}, function(event) {
  642. event.data.dialog.close();
  643. });
  644. return $container;
  645. },
  646. createBodyContent: function() {
  647. var $container = $('<div></div>');
  648. $container.addClass(this.getNamespace('body'));
  649. // Message
  650. $container.append(this.createMessageContent());
  651. return $container;
  652. },
  653. createMessageContent: function() {
  654. var $message = $('<div></div>');
  655. $message.addClass(this.getNamespace('message'));
  656. return $message;
  657. },
  658. createFooterContent: function() {
  659. var $container = $('<div></div>');
  660. $container.addClass(this.getNamespace('footer'));
  661. return $container;
  662. },
  663. createFooterButtons: function() {
  664. var that = this;
  665. var $container = $('<div></div>');
  666. $container.addClass(this.getNamespace('footer-buttons'));
  667. this.indexedButtons = {};
  668. $.each(this.options.buttons, function(index, button) {
  669. if (!button.id) {
  670. button.id = BootstrapDialog.newGuid();
  671. }
  672. var $button = that.createButton(button);
  673. that.indexedButtons[button.id] = $button;
  674. $container.append($button);
  675. });
  676. return $container;
  677. },
  678. createButton: function(button) {
  679. var $button = $('<button class="btn"></button>');
  680. $button.prop('id', button.id);
  681. // Icon
  682. if (typeof button.icon !== 'undefined' && $.trim(button.icon) !== '') {
  683. $button.append(this.createButtonIcon(button.icon));
  684. }
  685. // Label
  686. if (typeof button.label !== 'undefined') {
  687. $button.append(button.label);
  688. }
  689. // Css class
  690. if (typeof button.cssClass !== 'undefined' && $.trim(button.cssClass) !== '') {
  691. $button.addClass(button.cssClass);
  692. } else {
  693. $button.addClass('btn-default');
  694. }
  695. // Hotkey
  696. if (typeof button.hotkey !== 'undefined') {
  697. this.registeredButtonHotkeys[button.hotkey] = $button;
  698. }
  699. // Button on click
  700. $button.on('click', {dialog: this, $button: $button, button: button}, function(event) {
  701. var dialog = event.data.dialog;
  702. var $button = event.data.$button;
  703. var button = event.data.button;
  704. if (typeof button.action === 'function') {
  705. button.action.call($button, dialog);
  706. }
  707. if (button.autospin) {
  708. $button.toggleSpin(true);
  709. }
  710. });
  711. // Dynamically add extra functions to $button
  712. this.enhanceButton($button);
  713. return $button;
  714. },
  715. /**
  716. * Dynamically add extra functions to $button
  717. *
  718. * Using '$this' to reference 'this' is just for better readability.
  719. *
  720. * @param {type} $button
  721. * @returns {_L13.BootstrapDialog.prototype}
  722. */
  723. enhanceButton: function($button) {
  724. $button.dialog = this;
  725. // Enable / Disable
  726. $button.toggleEnable = function(enable) {
  727. var $this = this;
  728. if (typeof enable !== 'undefined') {
  729. $this.prop("disabled", !enable).toggleClass('disabled', !enable);
  730. } else {
  731. $this.prop("disabled", !$this.prop("disabled"));
  732. }
  733. return $this;
  734. };
  735. $button.enable = function() {
  736. var $this = this;
  737. $this.toggleEnable(true);
  738. return $this;
  739. };
  740. $button.disable = function() {
  741. var $this = this;
  742. $this.toggleEnable(false);
  743. return $this;
  744. };
  745. // Icon spinning, helpful for indicating ajax loading status.
  746. $button.toggleSpin = function(spin) {
  747. var $this = this;
  748. var dialog = $this.dialog;
  749. var $icon = $this.find('.' + dialog.getNamespace('button-icon'));
  750. if (typeof spin === 'undefined') {
  751. spin = !($button.find('.icon-spin').length > 0);
  752. }
  753. if (spin) {
  754. $icon.hide();
  755. $button.prepend(dialog.createButtonIcon(dialog.getSpinicon()).addClass('icon-spin'));
  756. } else {
  757. $icon.show();
  758. $button.find('.icon-spin').remove();
  759. }
  760. return $this;
  761. };
  762. $button.spin = function() {
  763. var $this = this;
  764. $this.toggleSpin(true);
  765. return $this;
  766. };
  767. $button.stopSpin = function() {
  768. var $this = this;
  769. $this.toggleSpin(false);
  770. return $this;
  771. };
  772. return this;
  773. },
  774. createButtonIcon: function(icon) {
  775. var $icon = $('<span></span>');
  776. $icon.addClass(this.getNamespace('button-icon')).addClass(icon);
  777. return $icon;
  778. },
  779. /**
  780. * Invoke this only after the dialog is realized.
  781. *
  782. * @param {type} enable
  783. * @returns {undefined}
  784. */
  785. enableButtons: function(enable) {
  786. $.each(this.indexedButtons, function(id, $button) {
  787. $button.toggleEnable(enable);
  788. });
  789. return this;
  790. },
  791. /**
  792. * Invoke this only after the dialog is realized.
  793. *
  794. * @returns {undefined}
  795. */
  796. updateClosable: function() {
  797. if (this.isRealized()) {
  798. // Close button
  799. this.getModalHeader().find('.' + this.getNamespace('close-button')).toggle(this.isClosable());
  800. }
  801. return this;
  802. },
  803. /**
  804. * Set handler for modal event 'show.bs.modal'.
  805. * This is a setter!
  806. */
  807. onShow: function(onshow) {
  808. this.options.onshow = onshow;
  809. return this;
  810. },
  811. /**
  812. * Set handler for modal event 'shown.bs.modal'.
  813. * This is a setter!
  814. */
  815. onShown: function(onshown) {
  816. this.options.onshown = onshown;
  817. return this;
  818. },
  819. /**
  820. * Set handler for modal event 'hide.bs.modal'.
  821. * This is a setter!
  822. */
  823. onHide: function(onhide) {
  824. this.options.onhide = onhide;
  825. return this;
  826. },
  827. /**
  828. * Set handler for modal event 'hidden.bs.modal'.
  829. * This is a setter!
  830. */
  831. onHidden: function(onhidden) {
  832. this.options.onhidden = onhidden;
  833. return this;
  834. },
  835. isRealized: function() {
  836. return this.realized;
  837. },
  838. setRealized: function(realized) {
  839. this.realized = realized;
  840. return this;
  841. },
  842. isOpened: function() {
  843. return this.opened;
  844. },
  845. setOpened: function(opened) {
  846. this.opened = opened;
  847. return this;
  848. },
  849. handleModalEvents: function() {
  850. this.getModal().on('show.bs.modal', {dialog: this}, function(event) {
  851. var dialog = event.data.dialog;
  852. dialog.setOpened(true);
  853. if (dialog.isModalEvent(event) && typeof dialog.options.onshow === 'function') {
  854. var openIt = dialog.options.onshow(dialog);
  855. if (openIt === false) {
  856. alert('Stopped!');
  857. dialog.setOpened(false);
  858. }
  859. return openIt;
  860. }
  861. });
  862. this.getModal().on('shown.bs.modal', {dialog: this}, function(event) {
  863. var dialog = event.data.dialog;
  864. dialog.isModalEvent(event) && typeof dialog.options.onshown === 'function' && dialog.options.onshown(dialog);
  865. });
  866. this.getModal().on('hide.bs.modal', {dialog: this}, function(event) {
  867. var dialog = event.data.dialog;
  868. dialog.setOpened(false);
  869. if (dialog.isModalEvent(event) && typeof dialog.options.onhide === 'function') {
  870. var hideIt = dialog.options.onhide(dialog);
  871. if (hideIt === false) {
  872. dialog.setOpened(true);
  873. }
  874. return hideIt;
  875. }
  876. });
  877. this.getModal().on('hidden.bs.modal', {dialog: this}, function(event) {
  878. var dialog = event.data.dialog;
  879. dialog.isModalEvent(event) && typeof dialog.options.onhidden === 'function' && dialog.options.onhidden(dialog);
  880. if (dialog.isAutodestroy()) {
  881. delete BootstrapDialog.dialogs[dialog.getId()];
  882. $(this).remove();
  883. }
  884. BootstrapDialog.moveFocus();
  885. });
  886. // Backdrop, I did't find a way to change bs3 backdrop option after the dialog is popped up, so here's a new wheel.
  887. this.handleModalBackdropEvent();
  888. // ESC key support
  889. this.getModal().on('keyup', {dialog: this}, function(event) {
  890. event.which === 27 && event.data.dialog.isClosable() && event.data.dialog.canCloseByKeyboard() && event.data.dialog.close();
  891. });
  892. // Button hotkey
  893. this.getModal().on('keyup', {dialog: this}, function(event) {
  894. var dialog = event.data.dialog;
  895. if (typeof dialog.registeredButtonHotkeys[event.which] !== 'undefined') {
  896. var $button = $(dialog.registeredButtonHotkeys[event.which]);
  897. !$button.prop('disabled') && $button.focus().trigger('click');
  898. }
  899. });
  900. return this;
  901. },
  902. handleModalBackdropEvent: function() {
  903. this.getModal().on('click', {dialog: this}, function(event) {
  904. $(event.target).hasClass('modal-backdrop') && event.data.dialog.isClosable() && event.data.dialog.canCloseByBackdrop() && event.data.dialog.close();
  905. });
  906. return this;
  907. },
  908. isModalEvent: function(event) {
  909. return typeof event.namespace !== 'undefined' && event.namespace === 'bs.modal';
  910. },
  911. makeModalDraggable: function() {
  912. if (this.options.draggable) {
  913. this.getModalHeader().addClass(this.getNamespace('draggable')).on('mousedown', {dialog: this}, function(event) {
  914. var dialog = event.data.dialog;
  915. dialog.draggableData.isMouseDown = true;
  916. var dialogOffset = dialog.getModalDialog().offset();
  917. dialog.draggableData.mouseOffset = {
  918. top: event.clientY - dialogOffset.top,
  919. left: event.clientX - dialogOffset.left
  920. };
  921. });
  922. this.getModal().on('mouseup mouseleave', {dialog: this}, function(event) {
  923. event.data.dialog.draggableData.isMouseDown = false;
  924. });
  925. $('body').on('mousemove', {dialog: this}, function(event) {
  926. var dialog = event.data.dialog;
  927. if (!dialog.draggableData.isMouseDown) {
  928. return;
  929. }
  930. dialog.getModalDialog().offset({
  931. top: event.clientY - dialog.draggableData.mouseOffset.top,
  932. left: event.clientX - dialog.draggableData.mouseOffset.left
  933. });
  934. });
  935. }
  936. return this;
  937. },
  938. realize: function() {
  939. this.initModalStuff();
  940. this.getModal().addClass(BootstrapDialog.NAMESPACE)
  941. .addClass(this.getCssClass());
  942. this.updateSize();
  943. if (this.getDescription()) {
  944. this.getModal().attr('aria-describedby', this.getDescription());
  945. }
  946. this.getModalFooter().append(this.createFooterContent());
  947. this.getModalHeader().append(this.createHeaderContent());
  948. this.getModalBody().append(this.createBodyContent());
  949. this.getModal().data('bs.modal', new BootstrapDialogModal(this.getModal(), {
  950. backdrop: 'static',
  951. keyboard: false,
  952. show: false
  953. }));
  954. this.makeModalDraggable();
  955. this.handleModalEvents();
  956. this.setRealized(true);
  957. this.updateButtons();
  958. this.updateType();
  959. this.updateTitle();
  960. this.updateMessage();
  961. this.updateClosable();
  962. this.updateAnimate();
  963. this.updateSize();
  964. return this;
  965. },
  966. open: function() {
  967. !this.isRealized() && this.realize();
  968. this.getModal().modal('show');
  969. return this;
  970. },
  971. close: function() {
  972. this.getModal().modal('hide');
  973. return this;
  974. }
  975. };
  976. // Add compatible methods.
  977. BootstrapDialog.prototype = $.extend(BootstrapDialog.prototype, BootstrapDialog.METHODS_TO_OVERRIDE[BootstrapDialogModal.getModalVersion()]);
  978. /**
  979. * RFC4122 version 4 compliant unique id creator.
  980. *
  981. * Added by https://github.com/tufanbarisyildirim/
  982. *
  983. * @returns {String}
  984. */
  985. BootstrapDialog.newGuid = function() {
  986. return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
  987. var r = Math.random() * 16 | 0, v = c === 'x' ? r : (r & 0x3 | 0x8);
  988. return v.toString(16);
  989. });
  990. };
  991. /* ================================================
  992. * For lazy people
  993. * ================================================ */
  994. /**
  995. * Shortcut function: show
  996. *
  997. * @param {type} options
  998. * @returns the created dialog instance
  999. */
  1000. BootstrapDialog.show = function(options) {
  1001. return new BootstrapDialog(options).open();
  1002. };
  1003. /**
  1004. * Alert window
  1005. *
  1006. * @returns the created dialog instance
  1007. */
  1008. BootstrapDialog.alert = function() {
  1009. var options = {};
  1010. var defaultOptions = {
  1011. type: BootstrapDialog.TYPE_PRIMARY,
  1012. title: null,
  1013. message: null,
  1014. closable: false,
  1015. draggable: false,
  1016. buttonLabel: BootstrapDialog.DEFAULT_TEXTS.OK,
  1017. callback: null
  1018. };
  1019. if (typeof arguments[0] === 'object' && arguments[0].constructor === {}.constructor) {
  1020. options = $.extend(true, defaultOptions, arguments[0]);
  1021. } else {
  1022. options = $.extend(true, defaultOptions, {
  1023. message: arguments[0],
  1024. callback: typeof arguments[1] !== 'undefined' ? arguments[1] : null
  1025. });
  1026. }
  1027. return new BootstrapDialog({
  1028. type: options.type,
  1029. title: options.title,
  1030. message: options.message,
  1031. closable: options.closable,
  1032. draggable: options.draggable,
  1033. data: {
  1034. callback: options.callback
  1035. },
  1036. onhide: function(dialog) {
  1037. !dialog.getData('btnClicked') && dialog.isClosable() && typeof dialog.getData('callback') === 'function' && dialog.getData('callback')(false);
  1038. },
  1039. buttons: [{
  1040. label: options.buttonLabel,
  1041. action: function(dialog) {
  1042. dialog.setData('btnClicked', true);
  1043. typeof dialog.getData('callback') === 'function' && dialog.getData('callback')(true);
  1044. dialog.close();
  1045. }
  1046. }]
  1047. }).open();
  1048. };
  1049. /**
  1050. * Confirm window
  1051. *
  1052. * @returns the created dialog instance
  1053. */
  1054. BootstrapDialog.confirm = function() {
  1055. var options = {};
  1056. var defaultOptions = {
  1057. type: BootstrapDialog.TYPE_PRIMARY,
  1058. title: null,
  1059. message: null,
  1060. closable: false,
  1061. draggable: false,
  1062. btnCancelLabel: BootstrapDialog.DEFAULT_TEXTS.CANCEL,
  1063. btnOKLabel: BootstrapDialog.DEFAULT_TEXTS.OK,
  1064. btnOKClass: null,
  1065. callback: null
  1066. };
  1067. if (typeof arguments[0] === 'object' && arguments[0].constructor === {}.constructor) {
  1068. options = $.extend(true, defaultOptions, arguments[0]);
  1069. } else {
  1070. options = $.extend(true, defaultOptions, {
  1071. message: arguments[0],
  1072. closable: false,
  1073. buttonLabel: BootstrapDialog.DEFAULT_TEXTS.OK,
  1074. callback: typeof arguments[1] !== 'undefined' ? arguments[1] : null
  1075. });
  1076. }
  1077. if (options.btnOKClass === null) {
  1078. options.btnOKClass = ['btn', options.type.split('-')[1]].join('-');
  1079. }
  1080. return new BootstrapDialog({
  1081. type: options.type,
  1082. title: options.title,
  1083. message: options.message,
  1084. closable: options.closable,
  1085. draggable: options.draggable,
  1086. data: {
  1087. callback: options.callback
  1088. },
  1089. buttons: [{
  1090. label: options.btnCancelLabel,
  1091. action: function(dialog) {
  1092. typeof dialog.getData('callback') === 'function' && dialog.getData('callback')(false);
  1093. dialog.close();
  1094. }
  1095. }, {
  1096. label: options.btnOKLabel,
  1097. cssClass: options.btnOKClass,
  1098. action: function(dialog) {
  1099. typeof dialog.getData('callback') === 'function' && dialog.getData('callback')(true);
  1100. dialog.close();
  1101. }
  1102. }]
  1103. }).open();
  1104. };
  1105. /**
  1106. * Warning window
  1107. *
  1108. * @param {type} message
  1109. * @returns the created dialog instance
  1110. */
  1111. BootstrapDialog.warning = function(message, callback) {
  1112. return new BootstrapDialog({
  1113. type: BootstrapDialog.TYPE_WARNING,
  1114. message: message
  1115. }).open();
  1116. };
  1117. /**
  1118. * Danger window
  1119. *
  1120. * @param {type} message
  1121. * @returns the created dialog instance
  1122. */
  1123. BootstrapDialog.danger = function(message, callback) {
  1124. return new BootstrapDialog({
  1125. type: BootstrapDialog.TYPE_DANGER,
  1126. message: message
  1127. }).open();
  1128. };
  1129. /**
  1130. * Success window
  1131. *
  1132. * @param {type} message
  1133. * @returns the created dialog instance
  1134. */
  1135. BootstrapDialog.success = function(message, callback) {
  1136. return new BootstrapDialog({
  1137. type: BootstrapDialog.TYPE_SUCCESS,
  1138. message: message
  1139. }).open();
  1140. };
  1141. return BootstrapDialog;
  1142. }));