bootstrap-dialog.js 45 KB

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