Skip to content

Commit

Permalink
editor progress
Browse files Browse the repository at this point in the history 
- load/store codemirror config
- fill out menus a bit:
  - Edit/find,replace
  - View/toggle line numbers
  • Loading branch information
@minrk
minrk committed Dec 7, 2014
1 parent 0b46e2a commit 0efd335
Show file tree
Hide file tree
Showing 4 changed files with 117 additions and 25 deletions.
64 changes: 59 additions & 5 deletions IPython/html/static/edit/js/editor.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,33 +6,66 @@ define([
'base/js/utils',
'codemirror/lib/codemirror',
'codemirror/mode/meta',
'codemirror/addon/search/search'
'codemirror/addon/comment/comment',
'codemirror/addon/dialog/dialog',
'codemirror/addon/edit/closebrackets',
'codemirror/addon/edit/matchbrackets',
'codemirror/addon/search/searchcursor',
'codemirror/addon/search/search',
'codemirror/keymap/emacs',
'codemirror/keymap/sublime',
'codemirror/keymap/vim',
],
function($,
utils,
CodeMirror
) {
"use strict";

var Editor = function(selector, options) {
var that = this;
this.selector = selector;
this.contents = options.contents;
this.events = options.events;
this.base_url = options.base_url;
this.file_path = options.file_path;

this.codemirror = CodeMirror($(this.selector)[0]);
this.config = options.config;
this.codemirror = new CodeMirror($(this.selector)[0]);

// It appears we have to set commands on the CodeMirror class, not the
// instance. I'd like to be wrong, but since there should only be one CM
// instance on the page, this is good enough for now.
CodeMirror.commands.save = $.proxy(this.save, this);

this.save_enabled = false;

this.config.loaded.then(function () {
// load codemirror config
var cfg = that.config.data.Editor || {};
var cmopts = $.extend(true, {}, // true = recursive copy
Editor.default_codemirror_options,
cfg.codemirror_options || {}
);
that.set_codemirror_options(cmopts, false);
that.events.trigger('config_changed.Editor', {config: that.config});
});
};

// default CodeMirror options
Editor.default_codemirror_options = {
extraKeys: {
"Tab" : "indentMore",
},
indentUnit: 4,
theme: "ipython",
lineNumbers: true,
};

Editor.prototype.load = function() {
/** load the file */
var that = this;
var cm = this.codemirror;
this.contents.get(this.file_path, {type: 'file', format: 'text'})
return this.contents.get(this.file_path, {type: 'file', format: 'text'})
.then(function(model) {
cm.setValue(model.content);

Expand All @@ -56,6 +89,7 @@ function($,
};

Editor.prototype.save = function() {
/** save the file */
if (!this.save_enabled) {
console.log("Not saving, save disabled");
return;
Expand All @@ -67,10 +101,30 @@ function($,
content: this.codemirror.getValue(),
};
var that = this;
this.contents.save(this.file_path, model).then(function() {
return this.contents.save(this.file_path, model).then(function() {
that.events.trigger("save_succeeded.TextEditor");
});
};

Editor.prototype._set_codemirror_options = function (options) {
// update codemirror options from a dict
for (var opt in options) {
this.codemirror.setOption(opt, options[opt]);
}
};

Editor.prototype.update_codemirror_options = function (options) {
/** update codemirror options locally and save changes in config */
var that = this;
this._set_codemirror_options(options);
return this.config.update({
Editor: {
codemirror_options: options
}
}).then(
that.events.trigger('config_changed.Editor', {config: that.config})
);
};

return {Editor: Editor};
});
2 changes: 2 additions & 0 deletions IPython/html/static/edit/js/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ require([
events: events,
contents: contents,
file_path: file_path,
config: config,
});

// Make it available for debugging
Expand All @@ -44,6 +45,7 @@ require([
var menus = new menubar.MenuBar('#menubar', {
base_url: base_url,
editor: editor,
events: events,
});

var notification_area = new notificationarea.EditorNotificationArea(
Expand Down
28 changes: 26 additions & 2 deletions IPython/html/static/edit/js/menubar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ define([
this.base_url = options.base_url || utils.get_body_data("baseUrl");
this.selector = selector;
this.editor = options.editor;
this.events = options.events;

if (this.selector !== undefined) {
this.element = $(selector);
Expand All @@ -41,8 +42,31 @@ define([
* File
*/
var that = this;
this.element.find('#save_file').click(function () {
that.editor.save();
var editor = that.editor;
this.element.find('#save-file').click(function () {
editor.save();
});

// Edit
this.element.find('#menu-find').click(function () {
editor.codemirror.execCommand("find");
});
this.element.find('#menu-replace').click(function () {
editor.codemirror.execCommand("replace");
});

// View
this.element.find('#menu-line-numbers').click(function () {
var current = editor.codemirror.getOption('lineNumbers');
var value = Boolean(1-current);
editor.update_codemirror_options({lineNumbers: value});
});

this.events.on("config_changed.Editor", function () {
var lineNumbers = editor.codemirror.getOption('lineNumbers');
var text = lineNumbers ? "Hide" : "Show";
text = text + " Line Numbers";
that.element.find('#menu-line-numbers').find("a").text(text);
});
};

Expand Down
48 changes: 30 additions & 18 deletions IPython/html/templates/edit.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,28 +36,40 @@
{% block site %}

<div id="menubar-container" class="container">
<div id="menubar">
<div id="menubar">
<div id="menus" class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<button type="button" class="btn btn-default navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<i class="fa fa-bars"></i>
<span class="navbar-text">Menu</span>
</button>
<ul class="nav navbar-nav navbar-right">
<li id="notification_area"></li>
</ul>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">File</a>
<ul id="file_menu" class="dropdown-menu">
<li id="save_file"><a href="#">Save</a></li>
</ul>
</li>
<div class="container-fluid">
<button type="button" class="btn btn-default navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<i class="fa fa-bars"></i>
<span class="navbar-text">Menu</span>
</button>
<ul class="nav navbar-nav navbar-right">
<li id="notification_area"></li>
</ul>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">File</a>
<ul id="file-menu" class="dropdown-menu">
<li id="new-file"><a href="#">New</a></li>
<li id="save-file"><a href="#">Save</a></li>
</ul>
</div>
</li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Edit</a>
<ul id="edit-menu" class="dropdown-menu">
<li id="menu-find"><a href="#">Find</a></li>
<li id="menu-replace"><a href="#">Find &amp; Replace</a></li>
</ul>
</li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">View</a>
<ul id="view-menu" class="dropdown-menu">
<li id="menu-line-numbers"><a href="#">Hide Line Numbers</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>

<div id="texteditor-container" class="container"></div>
Expand Down

0 comments on commit 0efd335

Please sign in to comment.