1: module sys.services
2: {
3: export class Constants
4: {
5: static containerId: string = '#modalContainer';
6: static defaultModalTitle: string = 'Message';
7: static modalDialogId: string = '#modalDialog';
8:
9: static Negative: string = '0';
10: static Positive: string = '1';
11: static Cancel: string = '2';
12:
13: static modalYesNo: sys.services.IDialogCommand[] = [
14: { id: Constants.Negative, text: 'No' },
15: { id: Constants.Positive, text: 'Yes', style: 'btn-primary' }];
16: static modalYesNoCancel: sys.services.IDialogCommand[] = [
17: { id: Constants.Cancel, text: 'Cancel' },
18: { id: Constants.Negative, text: 'No' },
19: { id: Constants.Positive, text: 'Yes', style: 'btn-primary' }];
20: static modalOkCancel: sys.services.IDialogCommand[] = [
21: { id: Constants.Cancel, text: 'Cancel' },
22: { id: Constants.Positive, text: 'Ok', style: 'btn-primary' }];
23:
24: static containerMarkup: string =
25: '<span></span>';
26: static modalMarkup: string =
27: '<div id="modalDialog" class="modal fade"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><h4 class="modal-title">Modal title</h4></div><div class="modal-body"><p>One fine body…</p></div><div class="modal-footer"></div></div></div></div>';
28: static modalButtonMarkup: string =
29: '<button type="button" class="btn" data-dismiss="modal">Close</button>';
30: }
31:
32: export interface IDialogCommand
33: {
34: id: string;
35: text: string;
36: style?: string;
37: }
38:
39: export class ModalManager
40: {
41: private container: JQuery;
42: private modalDialog: JQuery;
43:
44: constructor()
45: {
46: this.appendModals();
47: }
48:
49: private exists(name: string): boolean
50: {
51: if (this.container == undefined)
52: this.container = $(Constants.containerId);
53:
54: return this.container.find(name).length != 0;
55: }
56:
57: private appendModals(): void
58: {
59: if (!this.exists(Constants.containerId))
60: {
61: this.container = $(Constants.containerMarkup);
62: this.container.appendTo($(document.body));
63: }
64:
65: if (!this.exists(Constants.modalDialogId))
66: {
67: this.modalDialog = $(Constants.modalMarkup);
68: this.modalDialog.appendTo(this.container);
69: }
70: }
71:
72: public showDialog(message: string, title: string = Constants.defaultModalTitle, commands?: IDialogCommand[], callback?: (id: string) => void)
73: {
74: this.modalDialog.find('.modal-body').text(message);
75: this.modalDialog.find('.modal-title').text(title);
76:
77: var footer = this.modalDialog.find('.modal-footer');
78: footer.empty();
79:
80: for (var i in commands)
81: {
82: var cmd = commands[i];
83:
84: var button = $(Constants.modalButtonMarkup);
85:
86: button.text(cmd.text);
87: button.addClass(cmd.style == undefined ? 'btn-default' : cmd.style);
88: button.data('command-id', cmd.id);
89:
90: button.click((ev) =>
91: {
92: var id = $(event.srcElement).data('command-id');
93:
94: this.modalDialog.modal('hide');
95:
96: if (callback != undefined)
97: callback.apply(this, [id]);
98: });
99:
100: button.appendTo(footer);
101: }
102:
103: this.modalDialog.modal('show');
104: }
105: }
106: }