bootstrap-dialog.js 44 KB

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