##// END OF EJS Templates
Make modal backdrop static by default....
Matthias Bussonnier -
Show More
@@ -1,178 +1,180 b''
1 // Copyright (c) IPython Development Team.
1 // Copyright (c) IPython Development Team.
2 // Distributed under the terms of the Modified BSD License.
2 // Distributed under the terms of the Modified BSD License.
3
3
4 define([
4 define([
5 'base/js/namespace',
5 'base/js/namespace',
6 'jquery',
6 'jquery',
7 'codemirror/lib/codemirror',
7 'codemirror/lib/codemirror',
8 ], function(IPython, $, CodeMirror) {
8 ], function(IPython, $, CodeMirror) {
9 "use strict";
9 "use strict";
10
10
11 var modal = function (options) {
11 var modal = function (options) {
12
12
13 var modal = $("<div/>")
13 var modal = $("<div/>")
14 .addClass("modal")
14 .addClass("modal")
15 .addClass("fade")
15 .addClass("fade")
16 .attr("role", "dialog");
16 .attr("role", "dialog");
17 var dialog = $("<div/>")
17 var dialog = $("<div/>")
18 .addClass("modal-dialog")
18 .addClass("modal-dialog")
19 .appendTo(modal);
19 .appendTo(modal);
20 var dialog_content = $("<div/>")
20 var dialog_content = $("<div/>")
21 .addClass("modal-content")
21 .addClass("modal-content")
22 .appendTo(dialog);
22 .appendTo(dialog);
23 dialog_content.append(
23 dialog_content.append(
24 $("<div/>")
24 $("<div/>")
25 .addClass("modal-header")
25 .addClass("modal-header")
26 .append($("<button>")
26 .append($("<button>")
27 .attr("type", "button")
27 .attr("type", "button")
28 .addClass("close")
28 .addClass("close")
29 .attr("data-dismiss", "modal")
29 .attr("data-dismiss", "modal")
30 .attr("aria-hidden", "true")
30 .attr("aria-hidden", "true")
31 .html("&times;")
31 .html("&times;")
32 ).append(
32 ).append(
33 $("<h4/>")
33 $("<h4/>")
34 .addClass('modal-title')
34 .addClass('modal-title')
35 .text(options.title || "")
35 .text(options.title || "")
36 )
36 )
37 ).append(
37 ).append(
38 $("<div/>").addClass("modal-body").append(
38 $("<div/>").addClass("modal-body").append(
39 options.body || $("<p/>")
39 options.body || $("<p/>")
40 )
40 )
41 );
41 );
42
42
43 var footer = $("<div/>").addClass("modal-footer");
43 var footer = $("<div/>").addClass("modal-footer");
44
44
45 for (var label in options.buttons) {
45 for (var label in options.buttons) {
46 var btn_opts = options.buttons[label];
46 var btn_opts = options.buttons[label];
47 var button = $("<button/>")
47 var button = $("<button/>")
48 .addClass("btn btn-default btn-sm")
48 .addClass("btn btn-default btn-sm")
49 .attr("data-dismiss", "modal")
49 .attr("data-dismiss", "modal")
50 .text(label);
50 .text(label);
51 if (btn_opts.click) {
51 if (btn_opts.click) {
52 button.click($.proxy(btn_opts.click, dialog_content));
52 button.click($.proxy(btn_opts.click, dialog_content));
53 }
53 }
54 if (btn_opts.class) {
54 if (btn_opts.class) {
55 button.addClass(btn_opts.class);
55 button.addClass(btn_opts.class);
56 }
56 }
57 footer.append(button);
57 footer.append(button);
58 }
58 }
59 dialog_content.append(footer);
59 dialog_content.append(footer);
60 // hook up on-open event
60 // hook up on-open event
61 modal.on("shown.bs.modal", function() {
61 modal.on("shown.bs.modal", function() {
62 setTimeout(function() {
62 setTimeout(function() {
63 footer.find("button").last().focus();
63 footer.find("button").last().focus();
64 if (options.open) {
64 if (options.open) {
65 $.proxy(options.open, modal)();
65 $.proxy(options.open, modal)();
66 }
66 }
67 }, 0);
67 }, 0);
68 });
68 });
69
69
70 // destroy modal on hide, unless explicitly asked not to
70 // destroy modal on hide, unless explicitly asked not to
71 if (options.destroy === undefined || options.destroy) {
71 if (options.destroy === undefined || options.destroy) {
72 modal.on("hidden.bs.modal", function () {
72 modal.on("hidden.bs.modal", function () {
73 modal.remove();
73 modal.remove();
74 });
74 });
75 }
75 }
76 modal.on("hidden.bs.modal", function () {
76 modal.on("hidden.bs.modal", function () {
77 if (options.notebook) {
77 if (options.notebook) {
78 var cell = options.notebook.get_selected_cell();
78 var cell = options.notebook.get_selected_cell();
79 if (cell) cell.select();
79 if (cell) cell.select();
80 }
80 }
81 if (options.keyboard_manager) {
81 if (options.keyboard_manager) {
82 options.keyboard_manager.enable();
82 options.keyboard_manager.enable();
83 options.keyboard_manager.command_mode();
83 options.keyboard_manager.command_mode();
84 }
84 }
85 });
85 });
86
86
87 if (options.keyboard_manager) {
87 if (options.keyboard_manager) {
88 options.keyboard_manager.disable();
88 options.keyboard_manager.disable();
89 }
89 }
90
91 options.backdrop = options.backdrop || 'static';
90
92
91 return modal.modal(options);
93 return modal.modal(options);
92 };
94 };
93
95
94 var kernel_modal = function (options) {
96 var kernel_modal = function (options) {
95 /**
97 /**
96 * only one kernel dialog should be open at a time -- but
98 * only one kernel dialog should be open at a time -- but
97 * other modal dialogs can still be open
99 * other modal dialogs can still be open
98 */
100 */
99 $('.kernel-modal').modal('hide');
101 $('.kernel-modal').modal('hide');
100 var dialog = modal(options);
102 var dialog = modal(options);
101 dialog.addClass('kernel-modal');
103 dialog.addClass('kernel-modal');
102 return dialog;
104 return dialog;
103 };
105 };
104
106
105 var edit_metadata = function (options) {
107 var edit_metadata = function (options) {
106 options.name = options.name || "Cell";
108 options.name = options.name || "Cell";
107 var error_div = $('<div/>').css('color', 'red');
109 var error_div = $('<div/>').css('color', 'red');
108 var message =
110 var message =
109 "Manually edit the JSON below to manipulate the metadata for this " + options.name + "." +
111 "Manually edit the JSON below to manipulate the metadata for this " + options.name + "." +
110 " We recommend putting custom metadata attributes in an appropriately named sub-structure," +
112 " We recommend putting custom metadata attributes in an appropriately named sub-structure," +
111 " so they don't conflict with those of others.";
113 " so they don't conflict with those of others.";
112
114
113 var textarea = $('<textarea/>')
115 var textarea = $('<textarea/>')
114 .attr('rows', '13')
116 .attr('rows', '13')
115 .attr('cols', '80')
117 .attr('cols', '80')
116 .attr('name', 'metadata')
118 .attr('name', 'metadata')
117 .text(JSON.stringify(options.md || {}, null, 2));
119 .text(JSON.stringify(options.md || {}, null, 2));
118
120
119 var dialogform = $('<div/>').attr('title', 'Edit the metadata')
121 var dialogform = $('<div/>').attr('title', 'Edit the metadata')
120 .append(
122 .append(
121 $('<form/>').append(
123 $('<form/>').append(
122 $('<fieldset/>').append(
124 $('<fieldset/>').append(
123 $('<label/>')
125 $('<label/>')
124 .attr('for','metadata')
126 .attr('for','metadata')
125 .text(message)
127 .text(message)
126 )
128 )
127 .append(error_div)
129 .append(error_div)
128 .append($('<br/>'))
130 .append($('<br/>'))
129 .append(textarea)
131 .append(textarea)
130 )
132 )
131 );
133 );
132 var editor = CodeMirror.fromTextArea(textarea[0], {
134 var editor = CodeMirror.fromTextArea(textarea[0], {
133 lineNumbers: true,
135 lineNumbers: true,
134 matchBrackets: true,
136 matchBrackets: true,
135 indentUnit: 2,
137 indentUnit: 2,
136 autoIndent: true,
138 autoIndent: true,
137 mode: 'application/json',
139 mode: 'application/json',
138 });
140 });
139 var modal_obj = modal({
141 var modal_obj = modal({
140 title: "Edit " + options.name + " Metadata",
142 title: "Edit " + options.name + " Metadata",
141 body: dialogform,
143 body: dialogform,
142 buttons: {
144 buttons: {
143 OK: { class : "btn-primary",
145 OK: { class : "btn-primary",
144 click: function() {
146 click: function() {
145 /**
147 /**
146 * validate json and set it
148 * validate json and set it
147 */
149 */
148 var new_md;
150 var new_md;
149 try {
151 try {
150 new_md = JSON.parse(editor.getValue());
152 new_md = JSON.parse(editor.getValue());
151 } catch(e) {
153 } catch(e) {
152 console.log(e);
154 console.log(e);
153 error_div.text('WARNING: Could not save invalid JSON.');
155 error_div.text('WARNING: Could not save invalid JSON.');
154 return false;
156 return false;
155 }
157 }
156 options.callback(new_md);
158 options.callback(new_md);
157 }
159 }
158 },
160 },
159 Cancel: {}
161 Cancel: {}
160 },
162 },
161 notebook: options.notebook,
163 notebook: options.notebook,
162 keyboard_manager: options.keyboard_manager,
164 keyboard_manager: options.keyboard_manager,
163 });
165 });
164
166
165 modal_obj.on('shown.bs.modal', function(){ editor.refresh(); });
167 modal_obj.on('shown.bs.modal', function(){ editor.refresh(); });
166 };
168 };
167
169
168 var dialog = {
170 var dialog = {
169 modal : modal,
171 modal : modal,
170 kernel_modal : kernel_modal,
172 kernel_modal : kernel_modal,
171 edit_metadata : edit_metadata,
173 edit_metadata : edit_metadata,
172 };
174 };
173
175
174 // Backwards compatability.
176 // Backwards compatability.
175 IPython.dialog = dialog;
177 IPython.dialog = dialog;
176
178
177 return dialog;
179 return dialog;
178 });
180 });
General Comments 0
You need to be logged in to leave comments. Login now