bootstrap-dialog.js 35 KB

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