bootstrap-dialog.js 42 KB

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