bootstrap-dialog.js 44 KB

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