##// END OF EJS Templates
Enable codemirror search/replace shortcuts
Thomas Kluyver -
Show More
@@ -1,80 +1,81 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 'jquery',
5 'jquery',
6 'base/js/utils',
6 'base/js/utils',
7 'codemirror/lib/codemirror',
7 'codemirror/lib/codemirror',
8 'codemirror/mode/meta',
8 'codemirror/mode/meta',
9 'codemirror/addon/search/search'
9 ],
10 ],
10 function($,
11 function($,
11 utils,
12 utils,
12 CodeMirror
13 CodeMirror
13 ) {
14 ) {
14 var Editor = function(selector, options) {
15 var Editor = function(selector, options) {
15 this.selector = selector;
16 this.selector = selector;
16 this.contents = options.contents;
17 this.contents = options.contents;
17 this.events = options.events;
18 this.events = options.events;
18 this.base_url = options.base_url;
19 this.base_url = options.base_url;
19 this.file_path = options.file_path;
20 this.file_path = options.file_path;
20
21
21 this.codemirror = CodeMirror($(this.selector)[0]);
22 this.codemirror = CodeMirror($(this.selector)[0]);
22
23
23 this.save_enabled = true;
24 this.save_enabled = true;
24 };
25 };
25
26
26 // TODO: Remove this once the contents API is refactored to just use paths
27 // TODO: Remove this once the contents API is refactored to just use paths
27 Editor.prototype._split_path = function() {
28 Editor.prototype._split_path = function() {
28 var ix = this.file_path.lastIndexOf("/");
29 var ix = this.file_path.lastIndexOf("/");
29 if (ix === -1) {
30 if (ix === -1) {
30 return ['', this.file_path];
31 return ['', this.file_path];
31 } else {
32 } else {
32 return [
33 return [
33 this.file_path.substring(0, ix),
34 this.file_path.substring(0, ix),
34 this.file_path.substring(ix+1)
35 this.file_path.substring(ix+1)
35 ];
36 ];
36 }
37 }
37 };
38 };
38
39
39 Editor.prototype.load = function() {
40 Editor.prototype.load = function() {
40 var split_path = this._split_path();
41 var split_path = this._split_path();
41 var cm = this.codemirror;
42 var cm = this.codemirror;
42 this.contents.load(split_path[0], split_path[1], {
43 this.contents.load(split_path[0], split_path[1], {
43 success: function(model) {
44 success: function(model) {
44 if (model.type === "file" && model.format === "text") {
45 if (model.type === "file" && model.format === "text") {
45 cm.setValue(model.content);
46 cm.setValue(model.content);
46
47
47 // Find and load the highlighting mode
48 // Find and load the highlighting mode
48 var modeinfo = CodeMirror.findModeByMIME(model.mimetype);
49 var modeinfo = CodeMirror.findModeByMIME(model.mimetype);
49 if (modeinfo) {
50 if (modeinfo) {
50 utils.requireCodeMirrorMode(modeinfo.mode, function() {
51 utils.requireCodeMirrorMode(modeinfo.mode, function() {
51 cm.setOption('mode', modeinfo.mode);
52 cm.setOption('mode', modeinfo.mode);
52 });
53 });
53 }
54 }
54 } else {
55 } else {
55 this.codemirror.setValue("Error! Not a text file. Saving disabled.");
56 this.codemirror.setValue("Error! Not a text file. Saving disabled.");
56 this.save_enabled = false;
57 this.save_enabled = false;
57 }
58 }
58 }
59 }
59 });
60 });
60 };
61 };
61
62
62 Editor.prototype.save = function() {
63 Editor.prototype.save = function() {
63 var split_path = this._split_path();
64 var split_path = this._split_path();
64 var model = {
65 var model = {
65 path: split_path[0],
66 path: split_path[0],
66 name: split_path[1],
67 name: split_path[1],
67 type: 'file',
68 type: 'file',
68 format: 'text',
69 format: 'text',
69 content: this.codemirror.getValue(),
70 content: this.codemirror.getValue(),
70 };
71 };
71 var that = this;
72 var that = this;
72 this.contents.save(split_path[0], split_path[1], model, {
73 this.contents.save(split_path[0], split_path[1], model, {
73 success: function() {
74 success: function() {
74 that.events.trigger("save_succeeded.TextEditor");
75 that.events.trigger("save_succeeded.TextEditor");
75 }
76 }
76 });
77 });
77 };
78 };
78
79
79 return {Editor: Editor};
80 return {Editor: Editor};
80 });
81 });
@@ -1,60 +1,61 b''
1 {% extends "page.html" %}
1 {% extends "page.html" %}
2
2
3 {% block title %}{{page_title}}{% endblock %}
3 {% block title %}{{page_title}}{% endblock %}
4
4
5 {% block stylesheet %}
5 {% block stylesheet %}
6 <link rel="stylesheet" href="{{ static_url('components/codemirror/lib/codemirror.css') }}">
6 <link rel="stylesheet" href="{{ static_url('components/codemirror/lib/codemirror.css') }}">
7 <link rel="stylesheet" href="{{ static_url('components/codemirror/addon/dialog/dialog.css') }}">
7
8
8 {{super()}}
9 {{super()}}
9 {% endblock %}
10 {% endblock %}
10
11
11 {% block params %}
12 {% block params %}
12
13
13 data-base-url="{{base_url}}"
14 data-base-url="{{base_url}}"
14 data-file-path="{{file_path}}"
15 data-file-path="{{file_path}}"
15
16
16 {% endblock %}
17 {% endblock %}
17
18
18 {% block site %}
19 {% block site %}
19
20
20 <div id="menubar-container" class="container">
21 <div id="menubar-container" class="container">
21 <div id="menubar">
22 <div id="menubar">
22 <div id="menus" class="navbar navbar-default" role="navigation">
23 <div id="menus" class="navbar navbar-default" role="navigation">
23 <div class="container-fluid">
24 <div class="container-fluid">
24 <button type="button" class="btn btn-default navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
25 <button type="button" class="btn btn-default navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
25 <i class="fa fa-bars"></i>
26 <i class="fa fa-bars"></i>
26 <span class="navbar-text">Menu</span>
27 <span class="navbar-text">Menu</span>
27 </button>
28 </button>
28 <ul class="nav navbar-nav navbar-right">
29 <ul class="nav navbar-nav navbar-right">
29 <li id="kernel_indicator">
30 <li id="kernel_indicator">
30 <i id="kernel_indicator_icon"></i>
31 <i id="kernel_indicator_icon"></i>
31 </li>
32 </li>
32 <li id="modal_indicator">
33 <li id="modal_indicator">
33 <i id="modal_indicator_icon"></i>
34 <i id="modal_indicator_icon"></i>
34 </li>
35 </li>
35 <li id="notification_area"></li>
36 <li id="notification_area"></li>
36 </ul>
37 </ul>
37 <div class="navbar-collapse collapse">
38 <div class="navbar-collapse collapse">
38 <ul class="nav navbar-nav">
39 <ul class="nav navbar-nav">
39 <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">File</a>
40 <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">File</a>
40 <ul id="file_menu" class="dropdown-menu">
41 <ul id="file_menu" class="dropdown-menu">
41 <li id="save_file"><a href="#">Save</a></li>
42 <li id="save_file"><a href="#">Save</a></li>
42 </ul>
43 </ul>
43 </li>
44 </li>
44 </ul>
45 </ul>
45 </div>
46 </div>
46 </div>
47 </div>
47 </div>
48 </div>
48 </div>
49 </div>
49 </div>
50 </div>
50
51
51 <div id="texteditor-container"></div>
52 <div id="texteditor-container"></div>
52
53
53 {% endblock %}
54 {% endblock %}
54
55
55 {% block script %}
56 {% block script %}
56
57
57 {{super()}}
58 {{super()}}
58
59
59 <script src="{{ static_url("texteditor/js/main.js") }}" type="text/javascript" charset="utf-8"></script>
60 <script src="{{ static_url("texteditor/js/main.js") }}" type="text/javascript" charset="utf-8"></script>
60 {% endblock %}
61 {% endblock %}
General Comments 0
You need to be logged in to leave comments. Login now