bootstrap-dialog.js 45 KB

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