Skip to content

Commit ac0e1ff

Browse files
akaJesakaJes
committed
rc editor
1 parent e806073 commit ac0e1ff

File tree

9 files changed

+201
-300
lines changed

9 files changed

+201
-300
lines changed

‎app/services/ot.js‎

Lines changed: 21 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ const promisify = require('../helpers').promisify;
77

88
var ns = {};
99
const getFile = file => store.root().then(root => promisify(fs.readFile)(path.join(root, file)))
10+
const setFile = (file, data) => store.root().then(root => promisify(fs.writeFile)(path.join(root, file), data))
1011

1112
exports.init = (server, url) => {
1213
const io = new sio(server, {path: url});
@@ -17,21 +18,30 @@ exports.init = (server, url) => {
1718
else {
1819
getFile(docId)
1920
.then(text => {
20-
var doc = docId;
21-
ns[docId] = new ot.EditorSocketIOServer(text.toString(), 0, doc)
21+
var doc = ns[docId] = new ot.EditorSocketIOServer(text.toString(), 0, docId)
2222
socket.emit('ns', docId);
2323
io.of(docId)
2424
.on('connection', function(socket) {
25-
ns[docId].addClient(socket);
26-
socket.broadcast.in(doc).emit('enter');
27-
/*
28-
socket.in(doc).on('disconnect', function() {
29-
console.log('delete instance')
30-
delete ns[docId];
31-
}) */
32-
socket.in(doc).on('name', function (name) {
33-
ns[docId].setName(socket, name);
25+
function clients(mode) {
26+
socket.broadcast.in(docId).emit('clients', {clients: doc.users, mode: mode});
27+
}
28+
doc.getClient(socket.id);
29+
doc.addClient(socket);
30+
clients('enter');
31+
socket.in(docId)
32+
.on('disconnect', function() {
33+
console.log('disconnect');
34+
delete doc.users[socket.id];
35+
clients('leave');
36+
})
37+
.on('name', function (name) {
38+
doc.setName(socket, name);
3439
console.log('set name')
40+
clients('name');
41+
})
42+
.on('operation', function (name) {
43+
console.log('saving...');
44+
setFile(docId, doc.document);
3545
});
3646
})
3747
})

‎static/editor/diff.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ ace.define("diff", function(require, exports, module) {
77
throw new Error(error);
88
}
99
var dmp = new diff_match_patch();
10-
dmp.Diff_Timeout = 1;
10+
dmp.Diff_Timeout = .1;
1111
dmp.Diff_EditCost = 10;
1212
var dmpMode = 0; //TODO
1313

‎static/editor/editor.css‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
.changed-gutter { background: #AA000055; }
44
.changed-text { background: #AA000025; position:absolute; z-index:2;}
55
.added-text { background: #00AA0025; position:absolute; z-index:2;}
6-
6+
.ace_gutter-cell { background-repeat: no-repeat; }
77
/* layout */
88
html, body {
99
margin:0;
@@ -25,10 +25,11 @@ html, body {
2525
}
2626

2727
.uploader {
28+
min-width: 500px;
2829
line-height: 28px;
2930
padding-left: 10px;
30-
background-color: #444;
31-
color:#EEE;
31+
background-color: linen;
32+
color: green;
3233
}
3334
.tree {
3435
width: 250px;

‎static/editor/editor.js‎

Lines changed: 55 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,16 @@
11
var myName;
22
var otI;
3+
var state;
34
function createFileUploader(element, tree, editor) {
45
function addButton(name,fn){
5-
$(element).append($('<button>').text(name).on('click',fn));
6+
$(element).append($('<button>').addClass('btn btn-sm m-1').text(name).on('click',fn));
67
}
7-
addButton('<<',function(e){ $('.jstree').toggle(); });
8-
addButton('A',function(e){ toggleFullScreen(); });
9-
addButton('Save',function(e){ editor.saveUrl(); });
10-
addButton('diff Next',function(e){ editor.execCommand("nextDiff") });
11-
addButton('diff Prev',function(e){ editor.execCommand("prevDiff") });
12-
addButton('Beautify selected', function(e) {
8+
// addButton('<<',function(e){ $('.jstree').toggle(); });
9+
// addButton('A',function(e){ toggleFullScreen(); });
10+
// addButton('Save',function(e){ editor.execCommand("saveCommand") });
11+
addButton('next',function(e){ editor.execCommand("nextDiff") });
12+
addButton('prev',function(e){ editor.execCommand("prevDiff") });
13+
addButton('{}', function(e) {
1314
if (!editor.getSelectedText()) return;
1415
var beautify = ace.require("ace/ext/beautify"); // get reference to extension
1516
var session = ace.createEditSession('', editor.session.getOption('mode'));
@@ -25,9 +26,11 @@ var otI;
2526
editor._signal("change", {});
2627
});
2728
addButton('NAME',function(e){ myName = prompt('Tell Ur Name!!!'); otI.setName(myName); });
29+
addButton('undo',function(e){ editor.getSession().getUndoManager().undo(false); });
30+
$(element).append(state = $('<span class="m-1">Loading...</span>'));
2831
}
2932

30-
var ses = []; // {path, tab, name, session}
33+
var manager = {}; // {path, tab, name, session}
3134
function createTree(element, editor) {
3235
fsbrowser($('.tree'), loadFile)
3336
function loadFile(path, type){
@@ -41,39 +44,37 @@ var otI;
4144
loadEditor(path);
4245
};
4346
function loadEditor(path) {
44-
var s = ses.filter(function(i) { return i.path == path; });
45-
if (!s.length) {
47+
var s = manager[path];
48+
if (!s) {
4649
var name = path.slice(path.lastIndexOf("/") + 1);
4750
var tab = $('<li class="nav-item"><a class="nav-link" data-toggle="tab" href="#editorTab" role="tab" aria-controls="profile" aria-selected="false">'
48-
+ '<button class="close closeTab" type="button" >×</button>' + name + '</a></li>');
51+
+ '<button class="close closeTab pl-2" type="button" >×</button>' + name + '</a></li>');
4952
$('ul.nav').append(tab);
50-
var o = {
53+
s = manager[path] = {
5154
tab: tab,
5255
path: path,
5356
name: name,
5457
session: ace.createEditSession('', 'ace/mode/' + getLangFromFilename(name)),
5558
}
59+
s.session.path = path;
5660
tab.find('a').on('shown.bs.tab', function(ev) {
57-
editor.setSession(o.session);
58-
})
61+
state.text('');
62+
editor.setSession(s.session);
63+
editor.dmp && editor.dmp.scan();
64+
}).tab('show');
5965
tab.find('button').on('click', function(ev) {
6066
ev.preventDefault();
6167
if( $(this).parent().is('[aria-expanded=true]'))
6268
$('#preview-tab').tab('show')
6369
$(this).parents('li').remove();
6470
otI.shut(path);
65-
ses.map(function (item, index) {
66-
if (item.path == path)
67-
return index;
68-
}).map(function(index){ ses.splice(index, 1); });
71+
delete manager[path];
6972
})
70-
s.push(o);
71-
ses.push(o);
72-
editor.setSession(o.session);
73+
editor.setSession(s.session);
7374
editor.loadUrl(path);
75+
} else {
76+
s.tab.find('a').tab('show')
7477
}
75-
s[0].tab.find('a').tab('show')
76-
//$('#preview').hide();
7778
}
7879
function loadPreview(path){
7980
$('#preview-tab').tab('show')
@@ -87,12 +88,6 @@ var otI;
8788
var ext = (/(?:\.([^.]+))?$/.exec(path)[1]||'').toLowerCase();
8889
return 'png,jpg,jpeg,webp,apng,pdf,gif,xbm,bmp,ico'.split(',').indexOf(ext)>=0;
8990
}
90-
this.refreshPath = function(path){
91-
if(path.lastIndexOf('/') < 1)
92-
path = '/';
93-
else
94-
path = path.substring(0, path.lastIndexOf('/'));
95-
};
9691
return this;
9792
}
9893
function getLangFromFilename(filename) {
@@ -120,82 +115,56 @@ var otI;
120115

121116
function createEditor(element, file, lang, theme, type){
122117
var editor = ace.edit(element);
123-
new (require("marker_tooltip").MarkerTooltip)(editor); // show previous text over highlighted
118+
require('ace/ext/beautify');
119+
var MT = require("marker_tooltip");
120+
new MT(editor)
121+
require('diff');
122+
var OT = require("ot");
123+
otI = new OT(manager, function(text){ state.text(text)});
124+
124125
function httpPost(filename, data, type) {
125126
var formData = new FormData();
126127
formData.append("data", new Blob([data], { type: type }), filename);
127-
$.post({url:'/s/editor/upload' + file, data: formData, contentType: false, processData: false})
128-
// $.post({url: '/s/editor/upload' + file, data: data, contentType: false, processData: false})
129-
.then(function(data){
130-
alert('saved!');
128+
$.post({url:'/s/editor/upload' + filename, data: formData, contentType: false, processData: false})
129+
.then(function(data) {
130+
state.text('saved!');
131131
},function(data){
132132
alert("ERROR["+data.status+"]: "+data.responseText);
133133
});
134134
}
135135
function httpGet(theUrl) {
136-
$.when($.get('/s/editor/file' + theUrl), $.get('/s/editor/git' + theUrl, otI.init(theUrl)).catch(function(){ return [' ']}))
136+
$.when(0 && $.get('/s/editor/file' + theUrl), $.get('/s/editor/git' + theUrl, otI.init(theUrl)).catch(function(){ return [' ']}))
137137
.then(function(data, dataGit){
138138
delete editor.$setBaseText; //TODO: set option to session
139139
editor.setOptions({setBaseText: dataGit[0] })
140140
if(0)
141141
editor.setValue(data[0]);
142-
// editor.clearSelection();
143142
editor.gotoLine(0);
144143
editor.getSession()._signal("changeAnnotation", {}); //TODO: bug update
144+
state.text('opened!');
145145
},function(data){
146146
editor.setValue("");
147147
alert("ERROR["+data.status+"]: "+data.responseText);
148148
});
149149
}
150-
if(typeof theme === "undefined") theme = "textmate";
151150

152-
// ace.config.loadModule('/libs/diff-match-patch/index', function() {
153-
ace.config.loadModule('diff', function(diff) {
154-
console.log('diff loaded')
155-
});
156-
ace.config.loadModule('ot', function(OT) {
157-
otI = new OT(editor, ses);
158-
console.log('ot loaded')
159-
});
160-
// });
161-
ace.config.loadModule('ace/ext/beautify', function(diff) {
162-
console.log('ace/ext/beautify loaded')
163-
});
151+
theme = theme || "textmate";
164152
editor.setTheme("ace/theme/"+theme);
165153
editor.$blockScrolling = Infinity;
166154
editor.getSession().setUseSoftTabs(true);
167155
editor.getSession().setTabSize(2);
168156
editor.setHighlightActiveLine(true);
169157
editor.setShowPrintMargin(false);
158+
170159
editor.commands.addCommand({
171160
name: 'saveCommand',
172161
bindKey: {win: 'Ctrl-S', mac: 'Command-S'},
173162
exec: function(editor) {
174-
httpPost(file, editor.getValue()+"", type);
175-
},
176-
readOnly: false
177-
});
178-
editor.commands.addCommand({
179-
name: 'undoCommand',
180-
bindKey: {win: 'Ctrl-Z', mac: 'Command-Z'},
181-
exec: function(editor) {
182-
editor.getSession().getUndoManager().undo(false);
183-
},
184-
readOnly: false
185-
});
186-
editor.commands.addCommand({
187-
name: 'redoCommand',
188-
bindKey: {win: 'Ctrl-Shift-Z', mac: 'Command-Shift-Z'},
189-
exec: function(editor) {
190-
editor.getSession().getUndoManager().redo(false);
163+
httpPost(editor.session.path, editor.getValue(), type);
191164
},
192165
readOnly: false
193166
});
194-
editor.saveUrl = function(){
195-
httpPost(file, editor.getValue()+"", type);
196-
}
197-
editor.loadUrl = function(filename, lang, type){
198-
file = filename;
167+
editor.loadUrl = function(file, lang, type) {
199168
if(typeof file === "undefined") return file = "/index.htm";
200169
if(typeof lang === "undefined")
201170
lang = getLangFromFilename(file);
@@ -206,14 +175,26 @@ if(0)
206175
if(lang !== "plain") editor.getSession().setMode("ace/mode/"+lang);
207176
httpGet(file);
208177
}
209-
editor.loadUrl(file,lang,type);
178+
editor.loadUrl(file, lang, type);
210179
return editor;
211180
}
212-
$(function(){
181+
182+
$(function(){
213183
$(window).on('beforeunload',function() { return "Realy?"; });
214184
var vars = {};
215185
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) { vars[key] = value; });
216186
var editor = createEditor("editor", vars.file, vars.lang, vars.theme);
217187
var tree = createTree("tree", editor);
218188
createFileUploader(".uploader", tree, editor);
219-
});
189+
$.ajax('/upnp/check')
190+
.then(function(data) {
191+
if(data && data[0]) {
192+
$('.btn-warning').show().on('click',function() {
193+
var url='http://' + data[0].ip + ':' + data[0].port + '/editor';
194+
var m=$('#mct-qr-modal');
195+
m.find('.modal-body img').attr('src','/qr/'+encodeURI(btoa(url)))
196+
m.modal();
197+
})
198+
}
199+
})
200+
});

‎static/editor/index.html‎

Lines changed: 27 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
<script>if (typeof module === 'object') {window.module = module; module = undefined;}</script>
77
<script src="/libs/jquery/dist/jquery.min.js"></script>
88
<script src="/libs/ace-builds/src/ace.js"></script>
9+
<script src="/libs/ace-builds/src/ext-beautify.js"></script>
910
<script src="/libs/jstree/dist/jstree.js"></script>
1011

1112
<link href="/libs/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
@@ -30,11 +31,16 @@
3031
</head>
3132
<body>
3233
<div class="stickit top">
33-
<ul class="nav nav-tabs" id="myTab" role="tablist">
34+
<div>
35+
<button class="btn btn-sm m-1" onclick="$('.tree').toggle()" style="float: left;">&lt;</button>
36+
<button class="btn btn-sm m-1" onclick="toggleFullScreen()" style="float: left;">F</button>
37+
<button type="button" class="btn btn-warning btn-sm m-1" style="float: left;display:none;" title="share workflow to friends">QR</button>
38+
<ul class="nav nav-tabs" id="myTab" role="tablist" style="margin-left: 75px;">
3439
<li class="nav-item">
3540
<a class="nav-link active" id="preview-tab" data-toggle="tab" href="#previewTab" role="tab" aria-controls="home" aria-selected="true">Preview</a>
3641
</li>
3742
</ul>
43+
</div>
3844
<div class="tabs-content stickit">
3945
<div class="tree"></div>
4046
<div class="tab-content w-100" id="myTabContent">
@@ -49,5 +55,25 @@
4955
</div>
5056
</div>
5157
</div>
58+
59+
<div class="modal fade" id="mct-qr-modal" tabindex="-1" role="dialog" aria-labelledby="qrModalLabel" aria-hidden="true" >
60+
<div class="modal-dialog" role="document">
61+
<div class="modal-content">
62+
<div class="modal-header">
63+
<h4 class="modal-title" id="qrModalLabel">Scan this QRcode to open url</h4>
64+
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
65+
<span aria-hidden="true">&times;</span>
66+
</button>
67+
</div>
68+
<div class="modal-body">
69+
<img style="width:100%"></img>
70+
</div>
71+
<div class="modal-footer">
72+
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
73+
</div>
74+
</div>
75+
</div>
76+
</div>
77+
5278
</body>
5379
</html>

‎static/editor/marker_tooltip.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -99,7 +99,7 @@ oop.inherits(MarkerTooltip, Tooltip);
9999
};
100100

101101
}).call(MarkerTooltip.prototype);
102-
103-
exports.MarkerTooltip = MarkerTooltip;
102+
return MarkerTooltip;
103+
//exports.MarkerTooltip = MarkerTooltip;
104104

105105
});

0 commit comments

Comments
 (0)