mirror of
/repos/Prototyper.git
synced 2025-12-30 06:31:32 +01:00
123 lines
4.3 KiB
HTML
123 lines
4.3 KiB
HTML
<!DOCTYPE HTML>
|
|
<html>
|
|
<head>
|
|
<link href="style.css" rel="stylesheet" type="text/css">
|
|
<title>app/main/index</title>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="header">
|
|
<div id="htext">
|
|
Editing <b>index</b>
|
|
<div id="main">
|
|
<ul class="folders" data-bind="foreach: _keys()">
|
|
<li data-bind="text: $data,
|
|
css: { selected: $data == $root._chosenFolderId() },
|
|
click: $root._goToFolder"></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="editor"></div>
|
|
|
|
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
|
|
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/2.2.1/knockout-min.js"></script>
|
|
<script src="//underscorejs.org/underscore-min.js"></script>
|
|
<script src="//raw.github.com/SteveSanderson/knockout.mapping/master/build/output/knockout.mapping-latest.debug.js"></script>
|
|
<!--<script src="//raw.github.com/SteveSanderson/knockout.mapping/master/build/output/knockout.mapping-latest.js"></script>-->
|
|
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout-validation/1.0.2/knockout.validation.min.js"></script>
|
|
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
|
|
<script src="lib/ace/ace.js" type="text/javascript" charset="utf-8"></script>
|
|
<script src="lib/ace/mode-html.js" type="text/javascript" charset="utf-8"></script>
|
|
<script src="lib/ace/mode-javascript.js" type="text/javascript" charset="utf-8"></script>
|
|
<script src="lib/ace/mode-css.js" type="text/javascript" charset="utf-8"></script>
|
|
<script src="lib/ace/mode-markdown.js" type="text/javascript" charset="utf-8"></script>
|
|
<script src="//cdn.sockjs.org/sockjs-0.3.min.js"></script>
|
|
<!--<script src="/channel/bcsocket.js"></script>-->
|
|
<!--<script src="/socket.io/socket.io.js"></script>-->
|
|
<script src="/share/share.uncompressed.js"></script>
|
|
<script src="/share/json.js"></script>
|
|
<script src="/share/ace.js"></script>
|
|
|
|
<script>
|
|
var attribute = 'index';
|
|
var editor = ace.edit("editor");
|
|
var aceMode = null;
|
|
var session = editor.getSession();
|
|
var viewModel = null;
|
|
var doc = null;
|
|
var mainDoc = null;
|
|
editor.setReadOnly(true);
|
|
|
|
var setDoc = function(attribute) {
|
|
var mode = 'markdown';
|
|
editor.setReadOnly(true);
|
|
if (attribute == 'style') {
|
|
mode = 'css';
|
|
} else if (attribute == 'behaviour') {
|
|
mode = 'javascript';
|
|
} else if (attribute == 'index') {
|
|
mode = 'html';
|
|
}
|
|
aceMode = require("ace/mode/"+mode).Mode;
|
|
session.setMode(new aceMode());
|
|
document.title = attribute;
|
|
|
|
//var docName='text:app:'+mainDoc.snapshot._id+':'+attribute;
|
|
var docName='text:app:'+viewModel._id()+':'+attribute;
|
|
|
|
sharejs.open(docName, 'text', function(error, newDoc) {
|
|
|
|
if (doc != null) {
|
|
doc.close();
|
|
doc.detach_ace();
|
|
}
|
|
|
|
doc = newDoc;
|
|
|
|
if (error) {
|
|
console.error(error);
|
|
return;
|
|
}
|
|
doc.attach_ace(editor);
|
|
editor.setReadOnly(false);
|
|
});
|
|
};
|
|
|
|
sharejs.open('json:app:main','json', function (error, main) {
|
|
var indexField = null;
|
|
if (error) {
|
|
console.log('error opening app:main:json', error, main);
|
|
} else {
|
|
console.log('yes!!',main);
|
|
mainDoc = main;
|
|
if (main.snapshot == null) {
|
|
main.submitOp([
|
|
{ p: [], oi: {name:'main'}, od: null }
|
|
]);
|
|
} else {
|
|
var viewModel = ko.mapping.fromJS(main.snapshot);
|
|
viewModel._keys = function() {
|
|
return _.filter(Object.keys(this), function(key){ return key[0] != '_' && key != 'name' && key != 'version'; });
|
|
};
|
|
viewModel._chosenFolderId = ko.observable();
|
|
// Behaviours
|
|
viewModel._goToFolder = function(folder) {
|
|
viewModel._chosenFolderId(folder);
|
|
setDoc(folder);
|
|
}
|
|
|
|
ko.applyBindings(viewModel);
|
|
window.viewModel=viewModel;
|
|
}
|
|
main.on('change', function () {
|
|
ko.mapping.fromJS(main.snapshot,viewModel);
|
|
});
|
|
}
|
|
})
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|