bootstrap-dialog.js 45 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351
  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. lastDialogInstance = dialogInstance;
  284. });
  285. if (lastDialogInstance !== null && lastDialogInstance.isRealized()) {
  286. lastDialogInstance.getModal().focus();
  287. }
  288. };
  289. BootstrapDialog.METHODS_TO_OVERRIDE = {};
  290. BootstrapDialog.METHODS_TO_OVERRIDE['v3.1'] = {
  291. handleModalBackdropEvent: function () {
  292. this.getModal().on('click', {dialog: this}, function (event) {
  293. event.target === this && event.data.dialog.isClosable() && event.data.dialog.canCloseByBackdrop() && event.data.dialog.close();
  294. });
  295. return this;
  296. },
  297. /**
  298. * To make multiple opened dialogs look better.
  299. *
  300. * Will be removed in later version, after Bootstrap Modal >= 3.3.0, updating z-index is unnecessary.
  301. */
  302. updateZIndex: function () {
  303. var zIndexBackdrop = 1040;
  304. var zIndexModal = 1050;
  305. var dialogCount = 0;
  306. $.each(BootstrapDialog.dialogs, function (dialogId, dialogInstance) {
  307. dialogCount++;
  308. });
  309. var $modal = this.getModal();
  310. var $backdrop = $modal.data('bs.modal').$backdrop;
  311. $modal.css('z-index', zIndexModal + (dialogCount - 1) * 20);
  312. $backdrop.css('z-index', zIndexBackdrop + (dialogCount - 1) * 20);
  313. return this;
  314. },
  315. open: function () {
  316. !this.isRealized() && this.realize();
  317. this.getModal().modal('show');
  318. this.updateZIndex();
  319. return this;
  320. }
  321. };
  322. BootstrapDialog.METHODS_TO_OVERRIDE['v3.2'] = {
  323. handleModalBackdropEvent: BootstrapDialog.METHODS_TO_OVERRIDE['v3.1']['handleModalBackdropEvent'],
  324. updateZIndex: BootstrapDialog.METHODS_TO_OVERRIDE['v3.1']['updateZIndex'],
  325. open: BootstrapDialog.METHODS_TO_OVERRIDE['v3.1']['open']
  326. };
  327. BootstrapDialog.METHODS_TO_OVERRIDE['v3.3'] = {};
  328. BootstrapDialog.METHODS_TO_OVERRIDE['v3.3.4'] = $.extend({}, BootstrapDialog.METHODS_TO_OVERRIDE['v3.1']);
  329. BootstrapDialog.prototype = {
  330. constructor: BootstrapDialog,
  331. initOptions: function (options) {
  332. this.options = $.extend(true, this.defaultOptions, options);
  333. return this;
  334. },
  335. holdThisInstance: function () {
  336. BootstrapDialog.addDialog(this);
  337. return this;
  338. },
  339. initModalStuff: function () {
  340. this.setModal(this.createModal())
  341. .setModalDialog(this.createModalDialog())
  342. .setModalContent(this.createModalContent())
  343. .setModalHeader(this.createModalHeader())
  344. .setModalBody(this.createModalBody())
  345. .setModalFooter(this.createModalFooter());
  346. this.getModal().append(this.getModalDialog());
  347. this.getModalDialog().append(this.getModalContent());
  348. this.getModalContent()
  349. .append(this.getModalHeader())
  350. .append(this.getModalBody())
  351. .append(this.getModalFooter());
  352. return this;
  353. },
  354. createModal: function () {
  355. var $modal = $('<div class="modal" role="dialog" aria-hidden="true"></div>');
  356. $modal.prop('id', this.getId());
  357. $modal.attr('aria-labelledby', this.getId() + '_title');
  358. return $modal;
  359. },
  360. getModal: function () {
  361. return this.$modal;
  362. },
  363. setModal: function ($modal) {
  364. this.$modal = $modal;
  365. return this;
  366. },
  367. createModalDialog: function () {
  368. return $('<div class="modal-dialog"></div>');
  369. },
  370. getModalDialog: function () {
  371. return this.$modalDialog;
  372. },
  373. setModalDialog: function ($modalDialog) {
  374. this.$modalDialog = $modalDialog;
  375. return this;
  376. },
  377. createModalContent: function () {
  378. return $('<div class="modal-content"></div>');
  379. },
  380. getModalContent: function () {
  381. return this.$modalContent;
  382. },
  383. setModalContent: function ($modalContent) {
  384. this.$modalContent = $modalContent;
  385. return this;
  386. },
  387. createModalHeader: function () {
  388. return $('<div class="modal-header"></div>');
  389. },
  390. getModalHeader: function () {
  391. return this.$modalHeader;
  392. },
  393. setModalHeader: function ($modalHeader) {
  394. this.$modalHeader = $modalHeader;
  395. return this;
  396. },
  397. createModalBody: function () {
  398. return $('<div class="modal-body"></div>');
  399. },
  400. getModalBody: function () {
  401. return this.$modalBody;
  402. },
  403. setModalBody: function ($modalBody) {
  404. this.$modalBody = $modalBody;
  405. return this;
  406. },
  407. createModalFooter: function () {
  408. return $('<div class="modal-footer"></div>');
  409. },
  410. getModalFooter: function () {
  411. return this.$modalFooter;
  412. },
  413. setModalFooter: function ($modalFooter) {
  414. this.$modalFooter = $modalFooter;
  415. return this;
  416. },
  417. createDynamicContent: function (rawContent) {
  418. var content = null;
  419. if (typeof rawContent === 'function') {
  420. content = rawContent.call(rawContent, this);
  421. } else {
  422. content = rawContent;
  423. }
  424. if (typeof content === 'string') {
  425. content = this.formatStringContent(content);
  426. }
  427. return content;
  428. },
  429. formatStringContent: function (content) {
  430. if (this.options.nl2br) {
  431. return content.replace(/\r\n/g, '<br />').replace(/[\r\n]/g, '<br />');
  432. }
  433. return content;
  434. },
  435. setData: function (key, value) {
  436. this.options.data[key] = value;
  437. return this;
  438. },
  439. getData: function (key) {
  440. return this.options.data[key];
  441. },
  442. setId: function (id) {
  443. this.options.id = id;
  444. return this;
  445. },
  446. getId: function () {
  447. return this.options.id;
  448. },
  449. getType: function () {
  450. return this.options.type;
  451. },
  452. setType: function (type) {
  453. this.options.type = type;
  454. this.updateType();
  455. return this;
  456. },
  457. updateType: function () {
  458. if (this.isRealized()) {
  459. var types = [BootstrapDialog.TYPE_DEFAULT,
  460. BootstrapDialog.TYPE_INFO,
  461. BootstrapDialog.TYPE_PRIMARY,
  462. BootstrapDialog.TYPE_SUCCESS,
  463. BootstrapDialog.TYPE_WARNING,
  464. BootstrapDialog.TYPE_DANGER];
  465. this.getModal().removeClass(types.join(' ')).addClass(this.getType());
  466. }
  467. return this;
  468. },
  469. getSize: function () {
  470. return this.options.size;
  471. },
  472. setSize: function (size) {
  473. this.options.size = size;
  474. this.updateSize();
  475. return this;
  476. },
  477. updateSize: function () {
  478. if (this.isRealized()) {
  479. var dialog = this;
  480. // Dialog size
  481. this.getModal().removeClass(BootstrapDialog.SIZE_NORMAL)
  482. .removeClass(BootstrapDialog.SIZE_SMALL)
  483. .removeClass(BootstrapDialog.SIZE_WIDE)
  484. .removeClass(BootstrapDialog.SIZE_LARGE);
  485. this.getModal().addClass(this.getSize());
  486. // Smaller dialog.
  487. this.getModalDialog().removeClass('modal-sm');
  488. if (this.getSize() === BootstrapDialog.SIZE_SMALL) {
  489. this.getModalDialog().addClass('modal-sm');
  490. }
  491. // Wider dialog.
  492. this.getModalDialog().removeClass('modal-lg');
  493. if (this.getSize() === BootstrapDialog.SIZE_WIDE) {
  494. this.getModalDialog().addClass('modal-lg');
  495. }
  496. // Button size
  497. $.each(this.options.buttons, function (index, button) {
  498. var $button = dialog.getButton(button.id);
  499. var buttonSizes = ['btn-lg', 'btn-sm', 'btn-xs'];
  500. var sizeClassSpecified = false;
  501. if (typeof button['cssClass'] === 'string') {
  502. var btnClasses = button['cssClass'].split(' ');
  503. $.each(btnClasses, function (index, btnClass) {
  504. if ($.inArray(btnClass, buttonSizes) !== -1) {
  505. sizeClassSpecified = true;
  506. }
  507. });
  508. }
  509. if (!sizeClassSpecified) {
  510. $button.removeClass(buttonSizes.join(' '));
  511. $button.addClass(dialog.getButtonSize());
  512. }
  513. });
  514. }
  515. return this;
  516. },
  517. getCssClass: function () {
  518. return this.options.cssClass;
  519. },
  520. setCssClass: function (cssClass) {
  521. this.options.cssClass = cssClass;
  522. return this;
  523. },
  524. getTitle: function () {
  525. return this.options.title;
  526. },
  527. setTitle: function (title) {
  528. this.options.title = title;
  529. this.updateTitle();
  530. return this;
  531. },
  532. updateTitle: function () {
  533. if (this.isRealized()) {
  534. var title = this.getTitle() !== null ? this.createDynamicContent(this.getTitle()) : this.getDefaultText();
  535. this.getModalHeader().find('.' + this.getNamespace('title')).html('').append(title).prop('id', this.getId() + '_title');
  536. }
  537. return this;
  538. },
  539. getMessage: function () {
  540. return this.options.message;
  541. },
  542. setMessage: function (message) {
  543. this.options.message = message;
  544. this.updateMessage();
  545. return this;
  546. },
  547. updateMessage: function () {
  548. if (this.isRealized()) {
  549. var message = this.createDynamicContent(this.getMessage());
  550. this.getModalBody().find('.' + this.getNamespace('message')).html('').append(message);
  551. }
  552. return this;
  553. },
  554. isClosable: function () {
  555. return this.options.closable;
  556. },
  557. setClosable: function (closable) {
  558. this.options.closable = closable;
  559. this.updateClosable();
  560. return this;
  561. },
  562. setCloseByBackdrop: function (closeByBackdrop) {
  563. this.options.closeByBackdrop = closeByBackdrop;
  564. return this;
  565. },
  566. canCloseByBackdrop: function () {
  567. return this.options.closeByBackdrop;
  568. },
  569. setCloseByKeyboard: function (closeByKeyboard) {
  570. this.options.closeByKeyboard = closeByKeyboard;
  571. return this;
  572. },
  573. canCloseByKeyboard: function () {
  574. return this.options.closeByKeyboard;
  575. },
  576. isAnimate: function () {
  577. return this.options.animate;
  578. },
  579. setAnimate: function (animate) {
  580. this.options.animate = animate;
  581. return this;
  582. },
  583. updateAnimate: function () {
  584. if (this.isRealized()) {
  585. this.getModal().toggleClass('fade', this.isAnimate());
  586. }
  587. return this;
  588. },
  589. getSpinicon: function () {
  590. return this.options.spinicon;
  591. },
  592. setSpinicon: function (spinicon) {
  593. this.options.spinicon = spinicon;
  594. return this;
  595. },
  596. addButton: function (button) {
  597. this.options.buttons.push(button);
  598. return this;
  599. },
  600. addButtons: function (buttons) {
  601. var that = this;
  602. $.each(buttons, function (index, button) {
  603. that.addButton(button);
  604. });
  605. return this;
  606. },
  607. getButtons: function () {
  608. return this.options.buttons;
  609. },
  610. setButtons: function (buttons) {
  611. this.options.buttons = buttons;
  612. this.updateButtons();
  613. return this;
  614. },
  615. /**
  616. * If there is id provided for a button option, it will be in dialog.indexedButtons list.
  617. *
  618. * In that case you can use dialog.getButton(id) to find the button.
  619. *
  620. * @param {type} id
  621. * @returns {undefined}
  622. */
  623. getButton: function (id) {
  624. if (typeof this.indexedButtons[id] !== 'undefined') {
  625. return this.indexedButtons[id];
  626. }
  627. return null;
  628. },
  629. getButtonSize: function () {
  630. if (typeof BootstrapDialog.BUTTON_SIZES[this.getSize()] !== 'undefined') {
  631. return BootstrapDialog.BUTTON_SIZES[this.getSize()];
  632. }
  633. return '';
  634. },
  635. updateButtons: function () {
  636. if (this.isRealized()) {
  637. if (this.getButtons().length === 0) {
  638. this.getModalFooter().hide();
  639. } else {
  640. this.getModalFooter().show().find('.' + this.getNamespace('footer')).html('').append(this.createFooterButtons());
  641. }
  642. }
  643. return this;
  644. },
  645. isAutodestroy: function () {
  646. return this.options.autodestroy;
  647. },
  648. setAutodestroy: function (autodestroy) {
  649. this.options.autodestroy = autodestroy;
  650. },
  651. getDescription: function () {
  652. return this.options.description;
  653. },
  654. setDescription: function (description) {
  655. this.options.description = description;
  656. return this;
  657. },
  658. setTabindex: function (tabindex) {
  659. this.options.tabindex = tabindex;
  660. return this;
  661. },
  662. getTabindex: function () {
  663. return this.options.tabindex;
  664. },
  665. updateTabindex: function () {
  666. if (this.isRealized()) {
  667. this.getModal().attr('tabindex', this.getTabindex());
  668. }
  669. return this;
  670. },
  671. getDefaultText: function () {
  672. return BootstrapDialog.DEFAULT_TEXTS[this.getType()];
  673. },
  674. getNamespace: function (name) {
  675. return BootstrapDialog.NAMESPACE + '-' + name;
  676. },
  677. createHeaderContent: function () {
  678. var $container = $('<div></div>');
  679. $container.addClass(this.getNamespace('header'));
  680. // title
  681. $container.append(this.createTitleContent());
  682. // Close button
  683. $container.prepend(this.createCloseButton());
  684. return $container;
  685. },
  686. createTitleContent: function () {
  687. var $title = $('<div></div>');
  688. $title.addClass(this.getNamespace('title'));
  689. return $title;
  690. },
  691. createCloseButton: function () {
  692. var $container = $('<div></div>');
  693. $container.addClass(this.getNamespace('close-button'));
  694. var $icon = $('<button class="close">&times;</button>');
  695. $container.append($icon);
  696. $container.on('click', {dialog: this}, function (event) {
  697. event.data.dialog.close();
  698. });
  699. return $container;
  700. },
  701. createBodyContent: function () {
  702. var $container = $('<div></div>');
  703. $container.addClass(this.getNamespace('body'));
  704. // Message
  705. $container.append(this.createMessageContent());
  706. return $container;
  707. },
  708. createMessageContent: function () {
  709. var $message = $('<div></div>');
  710. $message.addClass(this.getNamespace('message'));
  711. return $message;
  712. },
  713. createFooterContent: function () {
  714. var $container = $('<div></div>');
  715. $container.addClass(this.getNamespace('footer'));
  716. return $container;
  717. },
  718. createFooterButtons: function () {
  719. var that = this;
  720. var $container = $('<div></div>');
  721. $container.addClass(this.getNamespace('footer-buttons'));
  722. this.indexedButtons = {};
  723. $.each(this.options.buttons, function (index, button) {
  724. if (!button.id) {
  725. button.id = BootstrapDialog.newGuid();
  726. }
  727. var $button = that.createButton(button);
  728. that.indexedButtons[button.id] = $button;
  729. $container.append($button);
  730. });
  731. return $container;
  732. },
  733. createButton: function (button) {
  734. var $button = $('<button class="btn"></button>');
  735. $button.prop('id', button.id);
  736. $button.data('button', button);
  737. // Icon
  738. if (typeof button.icon !== 'undefined' && $.trim(button.icon) !== '') {
  739. $button.append(this.createButtonIcon(button.icon));
  740. }
  741. // Label
  742. if (typeof button.label !== 'undefined') {
  743. $button.append(button.label);
  744. }
  745. // Css class
  746. if (typeof button.cssClass !== 'undefined' && $.trim(button.cssClass) !== '') {
  747. $button.addClass(button.cssClass);
  748. } else {
  749. $button.addClass('btn-default');
  750. }
  751. // Hotkey
  752. if (typeof button.hotkey !== 'undefined') {
  753. this.registeredButtonHotkeys[button.hotkey] = $button;
  754. }
  755. // Button on click
  756. $button.on('click', {dialog: this, $button: $button, button: button}, function (event) {
  757. var dialog = event.data.dialog;
  758. var $button = event.data.$button;
  759. var button = $button.data('button');
  760. if (button.autospin) {
  761. $button.toggleSpin(true);
  762. }
  763. if (typeof button.action === 'function') {
  764. return button.action.call($button, dialog, event);
  765. }
  766. });
  767. // Dynamically add extra functions to $button
  768. this.enhanceButton($button);
  769. //Initialize enabled or not
  770. if (typeof button.enabled !== 'undefined') {
  771. $button.toggleEnable(button.enabled);
  772. }
  773. return $button;
  774. },
  775. /**
  776. * Dynamically add extra functions to $button
  777. *
  778. * Using '$this' to reference 'this' is just for better readability.
  779. *
  780. * @param {type} $button
  781. * @returns {_L13.BootstrapDialog.prototype}
  782. */
  783. enhanceButton: function ($button) {
  784. $button.dialog = this;
  785. // Enable / Disable
  786. $button.toggleEnable = function (enable) {
  787. var $this = this;
  788. if (typeof enable !== 'undefined') {
  789. $this.prop("disabled", !enable).toggleClass('disabled', !enable);
  790. } else {
  791. $this.prop("disabled", !$this.prop("disabled"));
  792. }
  793. return $this;
  794. };
  795. $button.enable = function () {
  796. var $this = this;
  797. $this.toggleEnable(true);
  798. return $this;
  799. };
  800. $button.disable = function () {
  801. var $this = this;
  802. $this.toggleEnable(false);
  803. return $this;
  804. };
  805. // Icon spinning, helpful for indicating ajax loading status.
  806. $button.toggleSpin = function (spin) {
  807. var $this = this;
  808. var dialog = $this.dialog;
  809. var $icon = $this.find('.' + dialog.getNamespace('button-icon'));
  810. if (typeof spin === 'undefined') {
  811. spin = !($button.find('.icon-spin').length > 0);
  812. }
  813. if (spin) {
  814. $icon.hide();
  815. $button.prepend(dialog.createButtonIcon(dialog.getSpinicon()).addClass('icon-spin'));
  816. } else {
  817. $icon.show();
  818. $button.find('.icon-spin').remove();
  819. }
  820. return $this;
  821. };
  822. $button.spin = function () {
  823. var $this = this;
  824. $this.toggleSpin(true);
  825. return $this;
  826. };
  827. $button.stopSpin = function () {
  828. var $this = this;
  829. $this.toggleSpin(false);
  830. return $this;
  831. };
  832. return this;
  833. },
  834. createButtonIcon: function (icon) {
  835. var $icon = $('<span></span>');
  836. $icon.addClass(this.getNamespace('button-icon')).addClass(icon);
  837. return $icon;
  838. },
  839. /**
  840. * Invoke this only after the dialog is realized.
  841. *
  842. * @param {type} enable
  843. * @returns {undefined}
  844. */
  845. enableButtons: function (enable) {
  846. $.each(this.indexedButtons, function (id, $button) {
  847. $button.toggleEnable(enable);
  848. });
  849. return this;
  850. },
  851. /**
  852. * Invoke this only after the dialog is realized.
  853. *
  854. * @returns {undefined}
  855. */
  856. updateClosable: function () {
  857. if (this.isRealized()) {
  858. // Close button
  859. this.getModalHeader().find('.' + this.getNamespace('close-button')).toggle(this.isClosable());
  860. }
  861. return this;
  862. },
  863. /**
  864. * Set handler for modal event 'show.bs.modal'.
  865. * This is a setter!
  866. */
  867. onShow: function (onshow) {
  868. this.options.onshow = onshow;
  869. return this;
  870. },
  871. /**
  872. * Set handler for modal event 'shown.bs.modal'.
  873. * This is a setter!
  874. */
  875. onShown: function (onshown) {
  876. this.options.onshown = onshown;
  877. return this;
  878. },
  879. /**
  880. * Set handler for modal event 'hide.bs.modal'.
  881. * This is a setter!
  882. */
  883. onHide: function (onhide) {
  884. this.options.onhide = onhide;
  885. return this;
  886. },
  887. /**
  888. * Set handler for modal event 'hidden.bs.modal'.
  889. * This is a setter!
  890. */
  891. onHidden: function (onhidden) {
  892. this.options.onhidden = onhidden;
  893. return this;
  894. },
  895. isRealized: function () {
  896. return this.realized;
  897. },
  898. setRealized: function (realized) {
  899. this.realized = realized;
  900. return this;
  901. },
  902. isOpened: function () {
  903. return this.opened;
  904. },
  905. setOpened: function (opened) {
  906. this.opened = opened;
  907. return this;
  908. },
  909. handleModalEvents: function () {
  910. this.getModal().on('show.bs.modal', {dialog: this}, function (event) {
  911. var dialog = event.data.dialog;
  912. dialog.setOpened(true);
  913. if (dialog.isModalEvent(event) && typeof dialog.options.onshow === 'function') {
  914. var openIt = dialog.options.onshow(dialog);
  915. if (openIt === false) {
  916. dialog.setOpened(false);
  917. }
  918. return openIt;
  919. }
  920. });
  921. this.getModal().on('shown.bs.modal', {dialog: this}, function (event) {
  922. var dialog = event.data.dialog;
  923. dialog.isModalEvent(event) && typeof dialog.options.onshown === 'function' && dialog.options.onshown(dialog);
  924. });
  925. this.getModal().on('hide.bs.modal', {dialog: this}, function (event) {
  926. var dialog = event.data.dialog;
  927. dialog.setOpened(false);
  928. if (dialog.isModalEvent(event) && typeof dialog.options.onhide === 'function') {
  929. var hideIt = dialog.options.onhide(dialog);
  930. if (hideIt === false) {
  931. dialog.setOpened(true);
  932. }
  933. return hideIt;
  934. }
  935. });
  936. this.getModal().on('hidden.bs.modal', {dialog: this}, function (event) {
  937. var dialog = event.data.dialog;
  938. dialog.isModalEvent(event) && typeof dialog.options.onhidden === 'function' && dialog.options.onhidden(dialog);
  939. if (dialog.isAutodestroy()) {
  940. dialog.setRealized(false);
  941. delete BootstrapDialog.dialogs[dialog.getId()];
  942. $(this).remove();
  943. }
  944. BootstrapDialog.moveFocus();
  945. });
  946. // Backdrop, I did't find a way to change bs3 backdrop option after the dialog is popped up, so here's a new wheel.
  947. this.handleModalBackdropEvent();
  948. // ESC key support
  949. this.getModal().on('keyup', {dialog: this}, function (event) {
  950. event.which === 27 && event.data.dialog.isClosable() && event.data.dialog.canCloseByKeyboard() && event.data.dialog.close();
  951. });
  952. // Button hotkey
  953. this.getModal().on('keyup', {dialog: this}, function (event) {
  954. var dialog = event.data.dialog;
  955. if (typeof dialog.registeredButtonHotkeys[event.which] !== 'undefined') {
  956. var $button = $(dialog.registeredButtonHotkeys[event.which]);
  957. !$button.prop('disabled') && $button.focus().trigger('click');
  958. }
  959. });
  960. return this;
  961. },
  962. handleModalBackdropEvent: function () {
  963. this.getModal().on('click', {dialog: this}, function (event) {
  964. $(event.target).hasClass('modal-backdrop') && event.data.dialog.isClosable() && event.data.dialog.canCloseByBackdrop() && event.data.dialog.close();
  965. });
  966. return this;
  967. },
  968. isModalEvent: function (event) {
  969. return typeof event.namespace !== 'undefined' && event.namespace === 'bs.modal';
  970. },
  971. makeModalDraggable: function () {
  972. if (this.options.draggable) {
  973. this.getModalHeader().addClass(this.getNamespace('draggable')).on('mousedown', {dialog: this}, function (event) {
  974. var dialog = event.data.dialog;
  975. dialog.draggableData.isMouseDown = true;
  976. var dialogOffset = dialog.getModalDialog().offset();
  977. dialog.draggableData.mouseOffset = {
  978. top: event.clientY - dialogOffset.top,
  979. left: event.clientX - dialogOffset.left
  980. };
  981. });
  982. this.getModal().on('mouseup mouseleave', {dialog: this}, function (event) {
  983. event.data.dialog.draggableData.isMouseDown = false;
  984. });
  985. $('body').on('mousemove', {dialog: this}, function (event) {
  986. var dialog = event.data.dialog;
  987. if (!dialog.draggableData.isMouseDown) {
  988. return;
  989. }
  990. dialog.getModalDialog().offset({
  991. top: event.clientY - dialog.draggableData.mouseOffset.top,
  992. left: event.clientX - dialog.draggableData.mouseOffset.left
  993. });
  994. });
  995. }
  996. return this;
  997. },
  998. realize: function () {
  999. this.initModalStuff();
  1000. this.getModal().addClass(BootstrapDialog.NAMESPACE)
  1001. .addClass(this.getCssClass());
  1002. this.updateSize();
  1003. if (this.getDescription()) {
  1004. this.getModal().attr('aria-describedby', this.getDescription());
  1005. }
  1006. this.getModalFooter().append(this.createFooterContent());
  1007. this.getModalHeader().append(this.createHeaderContent());
  1008. this.getModalBody().append(this.createBodyContent());
  1009. this.getModal().data('bs.modal', new BootstrapDialogModal(this.getModal(), {
  1010. backdrop: 'static',
  1011. keyboard: false,
  1012. show: false
  1013. }));
  1014. this.makeModalDraggable();
  1015. this.handleModalEvents();
  1016. this.setRealized(true);
  1017. this.updateButtons();
  1018. this.updateType();
  1019. this.updateTitle();
  1020. this.updateMessage();
  1021. this.updateClosable();
  1022. this.updateAnimate();
  1023. this.updateSize();
  1024. this.updateTabindex();
  1025. return this;
  1026. },
  1027. open: function () {
  1028. !this.isRealized() && this.realize();
  1029. this.getModal().modal('show');
  1030. return this;
  1031. },
  1032. close: function () {
  1033. !this.isRealized() && this.realize();
  1034. this.getModal().modal('hide');
  1035. return this;
  1036. }
  1037. };
  1038. // Add compatible methods.
  1039. BootstrapDialog.prototype = $.extend(BootstrapDialog.prototype, BootstrapDialog.METHODS_TO_OVERRIDE[BootstrapDialogModal.getModalVersion()]);
  1040. /**
  1041. * RFC4122 version 4 compliant unique id creator.
  1042. *
  1043. * Added by https://github.com/tufanbarisyildirim/
  1044. *
  1045. * @returns {String}
  1046. */
  1047. BootstrapDialog.newGuid = function () {
  1048. return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
  1049. var r = Math.random() * 16 | 0, v = c === 'x' ? r : (r & 0x3 | 0x8);
  1050. return v.toString(16);
  1051. });
  1052. };
  1053. /* ================================================
  1054. * For lazy people
  1055. * ================================================ */
  1056. /**
  1057. * Shortcut function: show
  1058. *
  1059. * @param {type} options
  1060. * @returns the created dialog instance
  1061. */
  1062. BootstrapDialog.show = function (options) {
  1063. return new BootstrapDialog(options).open();
  1064. };
  1065. /**
  1066. * Alert window
  1067. *
  1068. * @returns the created dialog instance
  1069. */
  1070. BootstrapDialog.alert = function () {
  1071. var options = {};
  1072. var defaultOptions = {
  1073. type: BootstrapDialog.TYPE_PRIMARY,
  1074. title: null,
  1075. message: null,
  1076. closable: false,
  1077. draggable: false,
  1078. buttonLabel: BootstrapDialog.DEFAULT_TEXTS.OK,
  1079. callback: null
  1080. };
  1081. if (typeof arguments[0] === 'object' && arguments[0].constructor === {}.constructor) {
  1082. options = $.extend(true, defaultOptions, arguments[0]);
  1083. } else {
  1084. options = $.extend(true, defaultOptions, {
  1085. message: arguments[0],
  1086. callback: typeof arguments[1] !== 'undefined' ? arguments[1] : null
  1087. });
  1088. }
  1089. return new BootstrapDialog({
  1090. type: options.type,
  1091. title: options.title,
  1092. message: options.message,
  1093. closable: options.closable,
  1094. draggable: options.draggable,
  1095. data: {
  1096. callback: options.callback
  1097. },
  1098. onhide: function (dialog) {
  1099. !dialog.getData('btnClicked') && dialog.isClosable() && typeof dialog.getData('callback') === 'function' && dialog.getData('callback')(false);
  1100. },
  1101. buttons: [{
  1102. label: options.buttonLabel,
  1103. action: function (dialog) {
  1104. dialog.setData('btnClicked', true);
  1105. if (typeof dialog.getData('callback') === 'function' && dialog.getData('callback').call(this, true) === false) {
  1106. return false;
  1107. }
  1108. return dialog.close();
  1109. }
  1110. }]
  1111. }).open();
  1112. };
  1113. /**
  1114. * Confirm window
  1115. *
  1116. * @returns the created dialog instance
  1117. */
  1118. BootstrapDialog.confirm = function () {
  1119. var options = {};
  1120. var defaultOptions = {
  1121. type: BootstrapDialog.TYPE_PRIMARY,
  1122. title: null,
  1123. message: null,
  1124. closable: false,
  1125. draggable: false,
  1126. btnCancelLabel: BootstrapDialog.DEFAULT_TEXTS.CANCEL,
  1127. btnOKLabel: BootstrapDialog.DEFAULT_TEXTS.OK,
  1128. btnOKClass: null,
  1129. callback: null
  1130. };
  1131. if (typeof arguments[0] === 'object' && arguments[0].constructor === {}.constructor) {
  1132. options = $.extend(true, defaultOptions, arguments[0]);
  1133. } else {
  1134. options = $.extend(true, defaultOptions, {
  1135. message: arguments[0],
  1136. closable: false,
  1137. buttonLabel: BootstrapDialog.DEFAULT_TEXTS.OK,
  1138. callback: typeof arguments[1] !== 'undefined' ? arguments[1] : null
  1139. });
  1140. }
  1141. if (options.btnOKClass === null) {
  1142. options.btnOKClass = ['btn', options.type.split('-')[1]].join('-');
  1143. }
  1144. return new BootstrapDialog({
  1145. type: options.type,
  1146. title: options.title,
  1147. message: options.message,
  1148. closable: options.closable,
  1149. draggable: options.draggable,
  1150. data: {
  1151. callback: options.callback
  1152. },
  1153. buttons: [{
  1154. label: options.btnCancelLabel,
  1155. action: function (dialog) {
  1156. if (typeof dialog.getData('callback') === 'function' && dialog.getData('callback').call(this, false) === false) {
  1157. return false;
  1158. }
  1159. return dialog.close();
  1160. }
  1161. }, {
  1162. label: options.btnOKLabel,
  1163. cssClass: options.btnOKClass,
  1164. action: function (dialog) {
  1165. if (typeof dialog.getData('callback') === 'function' && dialog.getData('callback').call(this, true) === false) {
  1166. return false;
  1167. }
  1168. return dialog.close();
  1169. }
  1170. }]
  1171. }).open();
  1172. };
  1173. /**
  1174. * Warning window
  1175. *
  1176. * @param {type} message
  1177. * @returns the created dialog instance
  1178. */
  1179. BootstrapDialog.warning = function (message, callback) {
  1180. return new BootstrapDialog({
  1181. type: BootstrapDialog.TYPE_WARNING,
  1182. message: message
  1183. }).open();
  1184. };
  1185. /**
  1186. * Danger window
  1187. *
  1188. * @param {type} message
  1189. * @returns the created dialog instance
  1190. */
  1191. BootstrapDialog.danger = function (message, callback) {
  1192. return new BootstrapDialog({
  1193. type: BootstrapDialog.TYPE_DANGER,
  1194. message: message
  1195. }).open();
  1196. };
  1197. /**
  1198. * Success window
  1199. *
  1200. * @param {type} message
  1201. * @returns the created dialog instance
  1202. */
  1203. BootstrapDialog.success = function (message, callback) {
  1204. return new BootstrapDialog({
  1205. type: BootstrapDialog.TYPE_SUCCESS,
  1206. message: message
  1207. }).open();
  1208. };
  1209. return BootstrapDialog;
  1210. }));