bootstrap-dialog.js 43 KB

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