mirror of
/repos/Prototyper.git
synced 2025-12-30 06:31:32 +01:00
1039 lines
38 KiB
HTML
1039 lines
38 KiB
HTML
<!DOCTYPE html><!-- @@import__app_projects_json_ -->{
|
|
"projects" : [
|
|
{
|
|
"title" : "Prototyper",
|
|
"docs" : [
|
|
{
|
|
"collection" : "app",
|
|
"name" : "main"
|
|
},
|
|
{
|
|
"collection" : "app",
|
|
"name" : "config"
|
|
},
|
|
{
|
|
"collection" : "app",
|
|
"name" : "templates"
|
|
},
|
|
{
|
|
"collection" : "app",
|
|
"name" : "navigation"
|
|
},
|
|
{
|
|
"collection" : "app",
|
|
"name" : "projects"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"title" : "Test One",
|
|
"docs" : [
|
|
{
|
|
"collection" : "tests",
|
|
"name" : "test1"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}<!-- @@_end_import__app_projects_json --><!-- @@import__app_config_json_ -->{
|
|
"navigation": {
|
|
"collection": "app",
|
|
"name": "navigation"
|
|
},
|
|
"user": {
|
|
"collection": "users"
|
|
},
|
|
"main": {
|
|
"collection": "app",
|
|
"name": "main"
|
|
},
|
|
"projects": {
|
|
"collection": "app",
|
|
"name": "projects"
|
|
},
|
|
"viewModel": {
|
|
"main": {
|
|
"editorId": "editor",
|
|
"mapping" : {
|
|
"ignore": ["version"]
|
|
}
|
|
},
|
|
"navigation": {
|
|
"mapping": {},
|
|
"elementId": "navigation"
|
|
},
|
|
"user": {
|
|
"mapping": {},
|
|
"elementId": "user"
|
|
},
|
|
"projects": {
|
|
"mapping": {},
|
|
"elementId": "project_tree"
|
|
}
|
|
}
|
|
}<!-- @@_end_import__app_config_json --><!-- @@import__app_main_json_ -->{
|
|
"_availableModes" : [
|
|
{ "name": "none", "ace":"none" },
|
|
{ "name": "HTML", "ace":"html" },
|
|
{ "name": "Style", "ace":"css" },
|
|
{ "name": "Less", "ace":"css" },
|
|
{ "name": "Behaviour", "ace":"javascript" },
|
|
{ "name": "Text", "ace":"markdown" },
|
|
{ "name": "JSON", "ace":"json" }
|
|
]
|
|
}<!-- @@_end_import__app_main_json -->
|
|
<!-- @@import_file__../README.md__into__app_main_readme -->
|
|
<!-- @@import_file__templates/navigation.json__into__app_navigation_json -->
|
|
<!-- @@import_leftovers__app_main_index --><html>
|
|
<head>
|
|
<!-- @@import_file__templates/head.html__into__app_templates_head -->
|
|
<!-- @@template__app_templates_head__context__app_main -->
|
|
<!-- @@remove_ -->
|
|
<title>app/main/index</title>
|
|
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
|
|
<!--<script src="/lib/modernizr/modernizr.min.js" type="text/javascript" charset="utf-8"></script>-->
|
|
<link href="/lib/bootstrap/bootstrap-combined.min.css" rel="stylesheet" type="text/css">
|
|
<!--<link href="/lib/font-awesome/font-awesome.css" rel="stylesheet" type="text/css">-->
|
|
<!-- @@import_file__style.less__into__app_main_style -->
|
|
<!-- @@style__app_main_style -->
|
|
<!-- @@_end_remove -->
|
|
<!-- @@remove_ -->
|
|
<link rel="stylesheet/less" type="text/css" href="./style.less" />
|
|
<script src="/lib/lessjs/less-1.3.3.min.js" type="text/javascript" charset="utf-8"></script>
|
|
<!-- @@_end_remove -->
|
|
</head>
|
|
|
|
<body>
|
|
<!-- Modal -->
|
|
<div id="popup" class="modal hide fade" tabindex="-1" role="dialog" aria-hidden="true">
|
|
<div class="modal-body"></div>
|
|
</div>
|
|
<!-- @@template__app_main_body__context__app_main -->
|
|
<!-- @@import__app_main_body_ -->
|
|
<div id="header">
|
|
<div id="htext">
|
|
Editing <b data-bind="text: $root.name()+'/'+($root._chosenAttribute && $root._chosenAttribute() && $root._chosenAttribute().title)"> </b>
|
|
|
|
<div data-bind="visible: _getMode()">
|
|
mode: <strong data-bind="text: _getMode()"></strong>
|
|
</div>
|
|
<!--<select data-bind="options: _availableModes(), optionsText: 'name', value: _selectedMode"></select>-->
|
|
</div>
|
|
<!-- ko stopBinding: true --><!-- isolate navigation viewModel, prevent main from interfering -->
|
|
<div id="navigation" class="navbar navbar-inverse">
|
|
<div class="navbar-inner">
|
|
<img class="brand" src="/img/uillogo-inverse.png"/>
|
|
|
|
<div class="container">
|
|
<div class="nav dropdown" data-bind="template: {name: 'links_nav', foreach: links }"></div>
|
|
<script type="text/html" id="links_nav_sub">
|
|
<li data-bind="css: { 'dropdown-submenu': $data.hasOwnProperty('links')}">
|
|
<!-- ko ifnot: $data.hasOwnProperty('links') -->
|
|
<!-- ko ifnot: $data.hasOwnProperty('modal') -->
|
|
<a href="#" data-bind="attr: { href: $data.url(), title: $data.title() }, click: $root._openLink">
|
|
<span data-bind="attr: { class: $data.icon_class && $data.icon_class() || $root.default_icon() }"></span>
|
|
<span data-bind="text: $data.title()"></span>
|
|
</a>
|
|
<!-- /ko --><!-- ko if: $data.hasOwnProperty('modal') -->
|
|
<a href="#" data-toggle="modal" data-bind="attr: { href: $data.url(), title: $data.title(), 'data-target': '#' + $data.modal() }">
|
|
<span data-bind="attr: { class: $data.icon_class && $data.icon_class() || $root.default_icon() }"></span>
|
|
<span data-bind="text: $data.title()"></span>
|
|
</a>
|
|
<!-- /ko --><!-- /ko --><!-- ko if: $data.hasOwnProperty('links') -->
|
|
<a href="#" data-bind="text: $data.title()"></a>
|
|
<ul class="dropdown-menu" data-bind="template: {name: 'links_nav_sub', foreach: links }"></ul>
|
|
<!-- /ko -->
|
|
</li>
|
|
</script>
|
|
<script type="text/html" id="links_nav">
|
|
<div class="btn-group">
|
|
<a class="btn btn-inverse dropdown-toggle" data-toggle="dropdown" href="#">
|
|
<span data-bind="text: $data.title()"></span>
|
|
<span class="caret"></span>
|
|
</a>
|
|
<!-- ko if: $data.hasOwnProperty('links') -->
|
|
<ul class="dropdown-menu" data-bind="template: {name: 'links_nav_sub', foreach: links, }"></ul>
|
|
<!-- /ko -->
|
|
</div>
|
|
</script>
|
|
<!-- ko stopBinding: true --><!-- isolate user viewmodel, prevent main and navigation from interfering -->
|
|
<div class="nav navbar-form pull-right" id="user">
|
|
<div class="input-prepend">
|
|
<span class="add-on btn-inverse"><i class="icon-white icon-user"></i></span>
|
|
<input type="text" class="span2" data-bind="value: name"/>
|
|
</div>
|
|
</div>
|
|
<!-- /ko -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- /ko -->
|
|
</div>
|
|
<div id="content">
|
|
<!-- ko stopBinding: true --><!-- isolate project viewModel, prevent main from interfering -->
|
|
<div id="project_tree">
|
|
<div class="controls">
|
|
<select data-bind="options: projects(), optionsText: 'title', value: _selectedProject"></select>
|
|
</div>
|
|
<!--<div class="controls">-->
|
|
<!--<input type="text" autocomplete="off">-->
|
|
<!--</div>-->
|
|
<div class="accordion" id="accordion"
|
|
data-bind="foreach: _selectedProject().docs()">
|
|
<div class="accordion-group">
|
|
<a class="nav-pills nav-stacked" data-toggle="collapse"
|
|
data-parent="#accordion"
|
|
data-bind="attr: { href: '#collapse' + $index() }">
|
|
<span data-bind="text: name, click: $root._loadAttributes($index(), $data)"></span>
|
|
</a>
|
|
|
|
<div data-bind="attr: { id: 'collapse' +$index() }"
|
|
class="accordion-body collapse">
|
|
<ul class="nav nav-pills nav-stacked">
|
|
<!-- ko foreach: _attributeDocNames() -->
|
|
<li data-bind="css: { active: $root._isActiveAttribute($data) }">
|
|
<a data-bind="text: $data.title,
|
|
click: $root._openAttribute"></a>
|
|
</li>
|
|
<!-- /ko -->
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- /ko -->
|
|
<div id="main">
|
|
<div id="tabs">
|
|
<ul class="nav nav-pills">
|
|
<li>
|
|
<a class="btn" title="preview" data-bind="css: { disabled: _chosenAttribute() == null }, enable: _chosenAttribute, click: _previewAttribute"><i class="icon-eye-open"></i></a>
|
|
</li>
|
|
<li class="dropdown" >
|
|
<a class="btn dropdown-toggle selectedMode" data-bind="css: { disabled: _chosenAttribute() == null }"
|
|
data-toggle="dropdown"
|
|
href="#"><span data-bind="text: _selectedMode().name()">
|
|
Type
|
|
</span>
|
|
<b class="caret"></b>
|
|
</a>
|
|
<ul class="dropdown-menu">
|
|
<!-- ko foreach: _availableModes() -->
|
|
<li><a data-bind="click: $root._selectedMode, text: $data.name"></a></li>
|
|
<!-- /ko -->
|
|
</ul>
|
|
</li>
|
|
<!-- ko foreach: _activeAttributes() -->
|
|
<li data-bind="css: { active: $root._isChosenAttribute($data) }">
|
|
<a data-bind="text: $data.title, click: $root._goToAttribute"></a>
|
|
</li>
|
|
<!-- /ko -->
|
|
<!--
|
|
<li class="pull-right">
|
|
<div class="nav navbar-form">
|
|
<label>
|
|
<i class="icon-plus"></i>
|
|
<input type="text" class="span2"
|
|
data-bind="value: _newAttribute"/>
|
|
</label>
|
|
</div>
|
|
</li>
|
|
-->
|
|
</ul>
|
|
</div>
|
|
<div id="editor"></div>
|
|
|
|
</div>
|
|
</div>
|
|
<!-- @@import_file__templates/scripts.html__into__app_templates_scripts -->
|
|
<!-- @@template__app_templates_scripts__context__app_main -->
|
|
<!-- @@remove_ -->
|
|
<script src="/lib/jquery/jquery.min.js" type="text/javascript" charset="utf-8"></script>
|
|
<script src="/lib/knockout/knockout-2.2.1.debug.js" type="text/javascript" charset="utf-8"></script>
|
|
<script src="/lib/underscore/underscore-min.js" type="text/javascript" charset="utf-8"></script>
|
|
<script src="/lib/knockout/knockout.mapping-latest.debug.js" type="text/javascript" charset="utf-8"></script>
|
|
<script src="/lib/bootstrap/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
|
|
<script src="/lib/knockout/knockout-bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
|
|
<script src="/lib/async/async.js" type="text/javascript" charset="utf-8"></script>
|
|
<script src="/lib/markdown/markdown.js" type="text/javascript" charset="utf-8"></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="/lib/ace/mode-json.js" type="text/javascript" charset="utf-8"></script>
|
|
<!--<script src="/lib/ace/mode-less.js" type="text/javascript" charset="utf-8"></script>-->
|
|
<script src="/lib/sockjs/sockjs-0.3.min.js" type="text/javascript" charset="utf-8"></script>
|
|
<script src="/lib/share/share.uncompressed.js" type="text/javascript" charset="utf-8"></script>
|
|
<script src="/lib/share/json.uncompressed.js" type="text/javascript" charset="utf-8"></script>
|
|
<!--<script src="/lib/share/json.js" type="text/javascript" charset="utf-8"></script>-->
|
|
<script src="/lib/share/share-ace.js" type="text/javascript" charset="utf-8"></script>
|
|
<!-- @@_end_remove -->
|
|
<!-- @@template__app_main_behaviour__context__app_main -->
|
|
<!-- @@import__app_main_behaviour_ -->
|
|
<script>
|
|
var debug = false;
|
|
|
|
function main_functions(app, viewModel, vm_config) {
|
|
var editor = null;
|
|
|
|
if (!app.state.editor || (app.state.editor.editorId |= vm_config.editorId)) {
|
|
var aceInstance = ace.edit(vm_config.editorId || "editor");
|
|
editor = {
|
|
editorId: vm_config.editorId,
|
|
ace: aceInstance,
|
|
session: aceInstance.getSession(),
|
|
doc: null
|
|
};
|
|
aceInstance.setReadOnly(true);
|
|
} else {
|
|
editor = app.state.editor;
|
|
}
|
|
return {
|
|
setMode: function (attribute, mode) {
|
|
debug && console.log('setmode', attribute.title, mode);
|
|
var ace_mode = mode;
|
|
if (!mode || mode == 'none') {
|
|
ace_mode = 'markdown';
|
|
}
|
|
if (app.doc[attribute.doc_key].snapshot
|
|
&& app.doc[attribute.doc_key].snapshot[attribute.title]) {
|
|
var aceMode = require("ace/mode/" + ace_mode).Mode;
|
|
editor.session.setMode(new aceMode());
|
|
var currentMode = app.doc[attribute.doc_key].snapshot[attribute.title].mode;
|
|
if (!currentMode) {
|
|
currentMode = 'none';
|
|
}
|
|
debug && console.log('modes', attribute, currentMode, mode);
|
|
|
|
if (currentMode != mode) {
|
|
debug && console.log('mode differs', attribute, currentMode, mode);
|
|
var op = [];
|
|
if (app.doc[attribute.doc_key].snapshot[attribute.title].mode) {
|
|
debug && console.log('// remove', attribute, mode);
|
|
op.push({
|
|
p: [attribute.title, 'mode'],
|
|
od: app.doc[attribute.doc_key].snapshot[attribute.title].mode
|
|
});
|
|
}
|
|
if (mode && mode != 'none') {
|
|
debug && console.log('//insert', attribute, mode);
|
|
op.push({
|
|
p: [attribute.title, 'mode'],
|
|
oi: mode
|
|
});
|
|
}
|
|
app.doc[attribute.doc_key].submitOp(op, function (err, result) {
|
|
debug && console.log('err', err, 'result', result);
|
|
});
|
|
}
|
|
}
|
|
},
|
|
|
|
setDoc: function (attribute) {
|
|
//noinspection JSUnresolvedFunction
|
|
editor.ace.setReadOnly(true);
|
|
var mode = (app.doc[attribute.doc_key].snapshot
|
|
&& app.doc[attribute.doc_key].snapshot[attribute.title]
|
|
&& app.doc[attribute.doc_key].snapshot[attribute.title].mode
|
|
) || 'none';
|
|
debug && console.log('setDoc attribute, mode', attribute.title, mode);
|
|
this.setMode(attribute, mode);
|
|
//document.title = attribute;
|
|
|
|
if (editor.doc != null) {
|
|
debug && console.log('current cursor position', editor.ace.getCursorPosition());
|
|
app.fn.user.storeCurrentPosition(editor.doc.name, editor.ace.getCursorPosition());
|
|
editor.doc.close();
|
|
editor.doc.detach_ace();
|
|
}
|
|
loadLocation(attribute.loc, 'text', function (error, newDoc) {
|
|
newDoc.on('error', function (err) {
|
|
editor.ace.setReadOnly(true);
|
|
});
|
|
|
|
editor.doc = newDoc;
|
|
|
|
if (error) {
|
|
console.error(error);
|
|
return;
|
|
}
|
|
//noinspection JSUnresolvedFunction
|
|
editor.doc.attach_ace(editor.ace);
|
|
//noinspection JSUnresolvedFunction
|
|
|
|
var moveTo = app.fn.user.getCurrentPosition(editor.doc.name);
|
|
if (!moveTo) {
|
|
moveTo = {
|
|
row: 0,
|
|
column: 0
|
|
}
|
|
}
|
|
debug && console.log('moveTo', moveTo);
|
|
editor.ace.moveCursorToPosition(moveTo);
|
|
editor.ace.centerSelection();
|
|
|
|
editor.ace.setReadOnly(false);
|
|
|
|
editor.ace.focus(); //To focus the ace editor
|
|
});
|
|
},
|
|
|
|
getExtensionForAttribute: function (attribute) {
|
|
var mode = this.getModeForAttribute(attribute);
|
|
if (mode && mode.ace() == 'markdown') {
|
|
return '.md';
|
|
} else {
|
|
return '.html';
|
|
}
|
|
},
|
|
|
|
getModeForChosenAttribute: function () {
|
|
var attribute = viewModel._chosenAttribute();
|
|
debug && console.log('getModeForChosenAttribute._chosenAttribute', attribute);
|
|
return this.getModeForAttribute(attribute)
|
|
},
|
|
|
|
noneAceMode: null, /* does not get invalidated */
|
|
noneMode: function () {
|
|
if (!this.noneAceMode) {
|
|
this.noneAceMode = _.find(viewModel._availableModes(),
|
|
function (mode) {
|
|
return mode.ace() == 'none';
|
|
});
|
|
}
|
|
return this.noneAceMode;
|
|
},
|
|
|
|
getModeForAttribute: function (attribute) {
|
|
if (!attribute) {
|
|
return this.noneMode();
|
|
}
|
|
var mode = _.find(viewModel._availableModes(),
|
|
function (mode) {
|
|
var vmMode = app.doc[attribute.doc_key].snapshot[attribute.title].mode;
|
|
return vmMode == mode.ace();
|
|
});
|
|
if (mode) {
|
|
debug && console.log('getModeForAttribute', mode);
|
|
return mode;
|
|
} else {
|
|
return this.noneMode();
|
|
}
|
|
},
|
|
|
|
updateSelectedMode: function () {
|
|
var selectedMode = this.getModeForChosenAttribute();
|
|
debug && console.log('updateSelectedMode.getModeForChosenAttribute', selectedMode);
|
|
if (selectedMode) {
|
|
debug && console.log('setSelectedMode:', selectedMode.ace());
|
|
viewModel._selectedMode(selectedMode);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
function addComputed(snapshot) {
|
|
snapshot._attributes = _.filter(
|
|
Object.keys(snapshot),
|
|
function (key) {
|
|
return snapshot[key].hasOwnProperty('guid');
|
|
}
|
|
);
|
|
}
|
|
|
|
function getAttributeDocNames(snapshot, doc_key, parentLocation) {
|
|
if (!snapshot._attributes) {
|
|
addComputed(snapshot);
|
|
}
|
|
var loc = normalizeLocation(parentLocation);
|
|
var pairs = [];
|
|
_.forEach(snapshot._attributes, function (key) {
|
|
pairs.push({
|
|
title: key,
|
|
doc_key: doc_key,
|
|
loc: {
|
|
collection: loc.collection,
|
|
name: loc.name + ':' + key
|
|
}
|
|
})
|
|
});
|
|
return pairs;
|
|
}
|
|
|
|
function open_in_new_tab(url) {
|
|
var win = window.open(url, '_blank');
|
|
win.focus();
|
|
}
|
|
|
|
function initViewModel_main(app, key, doc, vm_config) {
|
|
debug && console.log('initViewModel_main');
|
|
|
|
var mapping = vm_config.mapping;
|
|
var snapshot = doc.snapshot;
|
|
var viewModel = ko.mapping.fromJS(snapshot, mapping);
|
|
viewModel._chosenAttribute = ko.observable();
|
|
viewModel._newAttribute = ko.observable();
|
|
viewModel._selectedMode = ko.observable();
|
|
app.fn[key] = main_functions(app, viewModel, vm_config);
|
|
viewModel._selectedMode(app.fn.main.noneMode());
|
|
// Behaviours
|
|
viewModel._goToAttribute = function (attribute) {
|
|
viewModel._chosenAttribute(attribute);
|
|
app.fn.main.updateSelectedMode();
|
|
app.fn.main.setDoc(attribute);
|
|
if (!_.find(
|
|
viewModel._activeAttributes(),
|
|
function (active) {
|
|
return active.doc_key == attribute.doc_key
|
|
&& active.title == attribute.title;
|
|
}
|
|
)) {
|
|
viewModel._activeAttributes.push(attribute);
|
|
}
|
|
};
|
|
|
|
viewModel._isChosenAttribute = function (attribute) {
|
|
var active = viewModel._chosenAttribute();
|
|
if (!active || !attribute) {
|
|
return false;
|
|
}
|
|
return active.doc_key == attribute.doc_key
|
|
&& active.title == attribute.title;
|
|
};
|
|
|
|
viewModel._activeAttributes = ko.observableArray();
|
|
|
|
/*
|
|
viewModel._newAttribute.subscribe(function (newValue) {
|
|
if (newValue) {
|
|
app.doc.main.submitOp({
|
|
p: [newValue],
|
|
oi: {}
|
|
}, function (err, result) {
|
|
//viewModel._newAttribute("");
|
|
});
|
|
viewModel._goToAttribute(newValue);
|
|
}
|
|
});
|
|
*/
|
|
viewModel._previewAttribute = function () {
|
|
var attribute = viewModel._chosenAttribute();
|
|
if (attribute) {
|
|
var ext = app.fn.main.getExtensionForAttribute(attribute);
|
|
var url = '/page/' + attribute.loc.collection + '/' + attribute.loc.name.replace(':', '.') + ext + '#!watch';
|
|
open_in_new_tab(url);
|
|
}
|
|
|
|
};
|
|
|
|
viewModel._getMode = ko.computed(function () {
|
|
var attribute = viewModel._chosenAttribute();
|
|
return attribute && app.doc[attribute.doc_key].snapshot[attribute.title].mode;
|
|
});
|
|
|
|
viewModel._selectedMode.subscribe(function (newValue) {
|
|
var attribute = viewModel._chosenAttribute();
|
|
if (attribute) {
|
|
if (app.state.vm.updating[attribute.doc_key]) {
|
|
console.error('// fires during ko.mapping.fromJS');
|
|
}
|
|
if (newValue && !app.state.vm.updating[attribute.doc_key]) {
|
|
debug && console.log('_selectedMode, newValue', newValue.ace());
|
|
app.fn.main.setMode(attribute, newValue.ace());
|
|
}
|
|
}
|
|
});
|
|
|
|
viewModel._closeDoc = function (attribute) {
|
|
console.log('closing ', attribute);
|
|
};
|
|
|
|
debug && console.log('mainViewModel', viewModel);
|
|
return viewModel;
|
|
}
|
|
|
|
function updateViewModel_main(app, viewModel, key, doc, vm_config) {
|
|
var snapshot = doc.snapshot;
|
|
addComputed(snapshot);
|
|
debug && console.log('updating main viewModel', snapshot, viewModel, vm_config);
|
|
ko.mapping.fromJS(snapshot, vm_config.mapping, viewModel);
|
|
viewModel._newAttribute("");
|
|
debug && console.log('updated main viewModel', viewModel);
|
|
}
|
|
|
|
function post_updateViewModel_main(app, viewModel, key, doc, vm_config) {
|
|
debug && console.log('post_update main viewModel', viewModel);
|
|
app.fn.main.updateSelectedMode();
|
|
}
|
|
|
|
/* crazy expensive caching tree traverse */
|
|
function traverse(current, field, property, depth, pos) {
|
|
if (current == field) {
|
|
field._depth = depth;
|
|
field._pos = pos;
|
|
return depth;
|
|
} else if (current.hasOwnProperty(property)) {
|
|
var links = current.links();
|
|
depth++;
|
|
var found = 0;
|
|
for (var x = 0; x < links.length; x++) {
|
|
if (!found) {
|
|
found = traverse(links[x], field, property, depth, x);
|
|
} else {
|
|
links[x]._pos = x;
|
|
}
|
|
}
|
|
return found;
|
|
}
|
|
return 0;
|
|
}
|
|
|
|
|
|
function initViewModel_default(app, key, doc, vm_config) {
|
|
var mapping = vm_config.mapping;
|
|
var snapshot = doc.snapshot;
|
|
debug && console.log('init', key, 'viewModel', snapshot, vm_config);
|
|
var viewModel = ko.mapping.fromJS(snapshot, mapping);
|
|
debug && console.log('init', key, 'viewModel', viewModel);
|
|
return viewModel;
|
|
|
|
}
|
|
|
|
function user_functions(app, viewModel, vm_config) {
|
|
var cursorPositions = {};
|
|
|
|
return {
|
|
ensurePath: function (doc, path, callback) {
|
|
var ops = [];
|
|
var sub_doc = doc.snapshot;
|
|
var current = {};
|
|
for (var x = 0; x < path.length; x++) {
|
|
var check = sub_doc[path[x]];
|
|
if (check) {
|
|
sub_doc = check;
|
|
current = check;
|
|
} else {
|
|
ops.push({
|
|
p: path.slice(0, x + 1),
|
|
oi: {}
|
|
});
|
|
sub_doc = {};
|
|
current = null;
|
|
}
|
|
}
|
|
return callback(null, ops, current);
|
|
},
|
|
|
|
storeCurrentPosition: function (name, position) {
|
|
cursorPositions[name] = position;
|
|
|
|
var doc = app.doc.user;
|
|
var path = ['positions', name];
|
|
this.ensurePath(doc, path, function (err, ops, current) {
|
|
ops.push({
|
|
p: path,
|
|
od: current,
|
|
oi: position
|
|
});
|
|
doc.submitOp(ops, function (err) {
|
|
console.log('set position', position, err);
|
|
});
|
|
});
|
|
},
|
|
|
|
getCurrentPosition: function (name) {
|
|
var position_doc = app.doc.user.at(['positions', name]);
|
|
var position = position_doc.get();
|
|
if (!position) {
|
|
position = cursorPositions[name];
|
|
}
|
|
return position
|
|
}
|
|
}
|
|
}
|
|
|
|
function initViewModel_user(app, key, doc, vm_config) {
|
|
var mapping = vm_config.mapping;
|
|
var snapshot = doc.snapshot;
|
|
debug && console.log('init', key, 'viewModel', snapshot, vm_config);
|
|
var viewModel = ko.mapping.fromJS(snapshot, mapping);
|
|
debug && console.log('init', key, 'viewModel', viewModel);
|
|
if (!viewModel.name) {
|
|
viewModel.name = ko.observable('guest');
|
|
}
|
|
viewModel.name.subscribe(function (newValue) {
|
|
console.log('change to new user', newValue);
|
|
if (newValue != 'guest') {
|
|
var location = {
|
|
collection: app.config.snapshot[key].collection,
|
|
name: newValue
|
|
};
|
|
loadLocation(location, 'json', function (err, key_doc) {
|
|
app.doc[key] = key_doc;
|
|
updateViewModel(app, app.vm, key, key_doc, vm_config);
|
|
key_doc.on('change', onDocChange(app, app.vm, key, key_doc, vm_config));
|
|
})
|
|
}
|
|
});
|
|
app.fn[key] = user_functions(app, viewModel, vm_config)
|
|
return viewModel;
|
|
}
|
|
|
|
function normalizeLocation(loc) {
|
|
var collection = loc.collection;
|
|
if (typeof loc.collection == 'function') {
|
|
collection = loc.collection();
|
|
}
|
|
var name = loc.name;
|
|
if (typeof loc.name == 'function') {
|
|
name = loc.name();
|
|
}
|
|
return {
|
|
collection: collection,
|
|
name: name
|
|
};
|
|
}
|
|
|
|
function locationFromKey(key) {
|
|
var parts = key.split(':');
|
|
return {
|
|
collection: parts[0],
|
|
name: parts[1]
|
|
};
|
|
}
|
|
|
|
function keyFromLocation(loc) {
|
|
var _loc = normalizeLocation(loc);
|
|
return _loc.collection + ':' + _loc.name;
|
|
}
|
|
|
|
function initViewModel_projects(app, key, doc, vm_config) {
|
|
var mapping = vm_config.mapping;
|
|
var snapshot = doc.snapshot;
|
|
debug && console.log('init', key, 'viewModel', snapshot, vm_config);
|
|
var viewModel = ko.mapping.fromJS(snapshot, mapping);
|
|
debug && console.log('init', key, 'viewModel', viewModel);
|
|
// TODO: grab current project from user.
|
|
viewModel._selectedProject = ko.observable();
|
|
viewModel._selectedProject.subscribe(function (project) {
|
|
_.forEach(project.docs(), function (loc, index) {
|
|
var key = keyFromLocation(loc);
|
|
if (app.doc[key]) {
|
|
var attributes = getAttributeDocNames(app.doc[key].snapshot, key, loc);
|
|
project.docs()[index]._attributeDocNames = ko.observableArray(attributes);
|
|
} else {
|
|
project.docs()[index]._attributeDocNames = ko.observableArray();
|
|
}
|
|
})
|
|
});
|
|
|
|
viewModel._loadAttributes = function (index, loc) {
|
|
return function (data, event) {
|
|
var doc_key = keyFromLocation(loc);
|
|
if (!app.doc[doc_key]) {
|
|
loadLocation(loc, 'json', function (err, key_doc) {
|
|
app.doc[doc_key] = key_doc;
|
|
function onChange() {
|
|
addComputed(key_doc.snapshot);
|
|
var attributes = getAttributeDocNames(key_doc.snapshot, doc_key, loc);
|
|
viewModel._selectedProject().docs()[index]._attributeDocNames(
|
|
attributes
|
|
);
|
|
}
|
|
|
|
onChange();
|
|
});
|
|
}
|
|
}
|
|
};
|
|
|
|
viewModel._openAttribute = function (data) {
|
|
debug && console.log('_openAttribute data', data);
|
|
app.vm.main._goToAttribute(data);
|
|
};
|
|
|
|
viewModel._isActiveAttribute = function (attribute) {
|
|
return _.find(
|
|
app.vm.main._activeAttributes(),
|
|
function (active) {
|
|
return active.doc_key == attribute.doc_key
|
|
&& active.title == attribute.title;
|
|
}
|
|
);
|
|
};
|
|
|
|
return viewModel;
|
|
}
|
|
|
|
function initViewModel(app, viewModels, key, doc, vm_config) {
|
|
debug && console.log('initViewModel', viewModels, key, doc, vm_config);
|
|
var viewModelMethod = initViewModel_default;
|
|
var methodName = 'initViewModel_' + key;
|
|
if (this.hasOwnProperty(methodName)) {
|
|
viewModelMethod = this[methodName];
|
|
}
|
|
app.state.vm.updating[key] = true;
|
|
viewModels[key] = viewModelMethod(app, key, doc, vm_config);
|
|
app.state.vm.updating[key] = false;
|
|
}
|
|
|
|
function initViewModel_navigation(app, key, doc, vm_config) {
|
|
debug && console.log('initViewModel_navigation');
|
|
var mapping = vm_config.mapping;
|
|
var snapshot = doc.snapshot;
|
|
var viewModel = ko.mapping.fromJS(snapshot, mapping);
|
|
|
|
viewModel._getDepth = function (field) {
|
|
if (field.hasOwnProperty('_depth')) {
|
|
return field._depth;
|
|
}
|
|
return traverse(viewModel, field, 'links', 0, 0);
|
|
};
|
|
|
|
viewModel._getPos = function (field) {
|
|
if (field.hasOwnProperty('_pos')) {
|
|
return field._pos;
|
|
}
|
|
return traverse(viewModel, field, 'links', 0, 0);
|
|
};
|
|
|
|
viewModel._openLink = function (link) {
|
|
open_in_new_tab(link.url());
|
|
};
|
|
return viewModel;
|
|
}
|
|
|
|
function defaultUpdateViewModel(app, viewModel, key, doc, vm_config) {
|
|
var snapshot = doc.snapshot;
|
|
debug && console.log('updating', key, 'viewModel', snapshot, viewModel, vm_config);
|
|
ko.mapping.fromJS(snapshot, vm_config.mapping, viewModel);
|
|
debug && console.log('updated', key, 'viewModel', viewModel);
|
|
}
|
|
|
|
function updateViewModel(app, viewModels, key, doc, vm_config) {
|
|
var viewModelMethod = defaultUpdateViewModel;
|
|
var methodName = 'updateViewModel_' + key;
|
|
if (this.hasOwnProperty(methodName)) {
|
|
viewModelMethod = this[methodName];
|
|
}
|
|
app.state.vm.updating[key] = true;
|
|
viewModelMethod(app, viewModels[key], key, doc, vm_config);
|
|
app.state.vm.updating[key] = false;
|
|
}
|
|
|
|
function defaultPostUpdateViewModel(app, viewModel, key, doc, vm_config) {
|
|
debug && console.log('post_updating', key, 'viewModel', viewModel, vm_config);
|
|
}
|
|
|
|
function post_updateViewModel(app, viewModels, key, doc, vm_config) {
|
|
var viewModelMethod = defaultPostUpdateViewModel;
|
|
var methodName = 'post_updateViewModel_' + key;
|
|
if (this.hasOwnProperty(methodName)) {
|
|
viewModelMethod = this[methodName];
|
|
}
|
|
viewModelMethod(app, viewModels[key], key, doc, vm_config);
|
|
}
|
|
|
|
function onDocChange(app, viewModels, key, doc, vm_config) {
|
|
return function onChange() {
|
|
debug && console.log(key, ' viewModel changed!! running:', app.state.running);
|
|
if (app.state.running) {
|
|
debug && console.log(key, ' viewModel changed!! updating', vm_config);
|
|
if (viewModels[key]) {
|
|
updateViewModel(app, viewModels, key, doc, vm_config);
|
|
post_updateViewModel(app, viewModels, key, doc, vm_config);
|
|
} else {
|
|
console.error('HUH!!');
|
|
initViewModel(app, viewModels, key, doc, vm_config);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
function initializeViewModel(app, doc, key, viewModels, vm_config) {
|
|
initViewModel(app, viewModels, key, doc, vm_config);
|
|
doc.on('change', onDocChange(app, viewModels, key, doc, vm_config));
|
|
}
|
|
|
|
function loadLocation(loc, type, callback) {
|
|
var doc_key = keyFromLocation(loc);
|
|
debug && console.log('opening location', doc_key);
|
|
return sharejs.open(type + ':' + doc_key, type, function (err, doc) {
|
|
if (err) {
|
|
console.error('error loadLocation', doc_key, err, doc);
|
|
return callback(err);
|
|
}
|
|
doc.on('error', function (err) {
|
|
console.error('event error loadLocation', doc_key, err, doc.state, doc);
|
|
});
|
|
doc.on('closed', function (err, data) {
|
|
debug && console.log('doc', doc, 'closing', err, 'data', data);
|
|
});
|
|
debug && console.log('opened location', doc_key, doc, doc.state, doc.version);
|
|
if (doc.snapshot == null) {
|
|
debug && console.log('wait for first change', doc_key, doc.version);
|
|
return doc.once('change', function onceChange() {
|
|
debug && console.log('received first change', doc_key, doc.snapshot);
|
|
callback(null, doc);
|
|
});
|
|
} else {
|
|
return callback(null, doc);
|
|
}
|
|
});
|
|
}
|
|
|
|
function getCurrentUser() {
|
|
return '';
|
|
// maybe pull from cookie?
|
|
// return 'aiko';
|
|
}
|
|
|
|
function loadConfigKey(key, loc, viewModels, vm_config, callback) {
|
|
debug && console.log('loadConfigKey', key, loc);
|
|
if (key == 'user') {
|
|
var user = getCurrentUser();
|
|
if (user) {
|
|
loc.name = user;
|
|
debug && console.log('loadConfig user', locn);
|
|
loadLocation(loc, 'json', callback);
|
|
} else {
|
|
callback(null, {
|
|
snapshot: {},
|
|
on: function (event, handler) {
|
|
console.log('blank config', key, 'event', event, 'handler', handler);
|
|
},
|
|
submitOp: function (ops, callback) {
|
|
return callback(null);
|
|
},
|
|
at: function (path) {
|
|
return {
|
|
get: function (path) {
|
|
return null;
|
|
}
|
|
}
|
|
}
|
|
})
|
|
}
|
|
} else {
|
|
loadLocation(loc, 'json', callback);
|
|
}
|
|
}
|
|
|
|
function handleConfigKey(app, key, snapshot, viewModels, callback) {
|
|
debug && console.log('handleConfigKey app', app);
|
|
if (!app.hasOwnProperty(key)) {
|
|
var location = snapshot[key];
|
|
var vm_config = snapshot.viewModel && snapshot.viewModel[key];
|
|
return loadConfigKey(key, location, viewModels, vm_config, function handleLoadedKey(err, key_doc) {
|
|
if (err) {
|
|
console.error('Error loading key', key, err);
|
|
debug && console.log('- handleConfigKey', key);
|
|
return callback(err);
|
|
} else {
|
|
app.doc[key] = key_doc;
|
|
if (vm_config && !app.state.vm.bound.hasOwnProperty(key)) {
|
|
initializeViewModel(app, key_doc, key, viewModels, vm_config);
|
|
}
|
|
}
|
|
debug && console.log('- handleConfigKey', key);
|
|
return callback();
|
|
});
|
|
} else {
|
|
debug && console.log('- handleConfigKey', key);
|
|
return callback();
|
|
}
|
|
}
|
|
|
|
function initializeConfig(doc, app, viewModels, callback) {
|
|
var snapshot = doc.snapshot;
|
|
return async.each(_.keys(snapshot), function handleConfigKeys(key, iterator_callback) {
|
|
debug && console.log('+ handleConfigKey', key);
|
|
if (snapshot[key].hasOwnProperty('collection')) {
|
|
return handleConfigKey(app, key, snapshot, viewModels, iterator_callback);
|
|
} else {
|
|
return iterator_callback();
|
|
}
|
|
}, callback);
|
|
}
|
|
|
|
function loadConfig(app, loc, viewModels, callback) {
|
|
loadLocation(loc, 'json', function handleConfig(err, doc) {
|
|
if (err) {
|
|
console.error('error loadConfig', loc, err);
|
|
return callback(err);
|
|
}
|
|
app['config'] = doc;
|
|
initializeConfig(doc, app, viewModels, callback);
|
|
return doc.on('change', function handleConfigChange() {
|
|
debug && console.log('Config changed!!');
|
|
initializeConfig(doc, app, viewModels, callback);
|
|
});
|
|
});
|
|
}
|
|
|
|
var config_location = {
|
|
collection: "app",
|
|
name: "config"
|
|
};
|
|
var app = {
|
|
state: {
|
|
running: false,
|
|
vm: {
|
|
bound: {},
|
|
updating: {}
|
|
}
|
|
},
|
|
doc: {},
|
|
fn: {},
|
|
vm: {}
|
|
};
|
|
|
|
function initKnockout() {
|
|
/* http://www.knockmeout.net/2012/05/quick-tip-skip-binding.html */
|
|
ko.bindingHandlers.stopBinding = {
|
|
init: function () {
|
|
return { controlsDescendantBindings: true };
|
|
}
|
|
};
|
|
ko.virtualElements.allowedBindings.stopBinding = true;
|
|
}
|
|
|
|
function bindViewModels(app) {
|
|
_.forEach(_.keys(app.vm), function (key) {
|
|
if (key in app.state.vm.bound) {
|
|
debug && console.log('bindViewModels bindings already applied for', key);
|
|
} else {
|
|
var viewModel = app.vm[key];
|
|
var viewModelConfig = app.config.snapshot.viewModel[key];
|
|
var elementId = viewModelConfig.elementId;
|
|
var element = document.getElementById(elementId);
|
|
debug && console.log('bindViewModels applyBindings', key, viewModel, viewModelConfig, elementId);
|
|
ko.applyBindings(viewModel, element);
|
|
app.state.vm.bound[key] = elementId;
|
|
}
|
|
});
|
|
debug && console.log('Viewmodels bound', 'ok');
|
|
}
|
|
|
|
function configLoaded(err) {
|
|
if (err) {
|
|
console.error('Error loading config', err);
|
|
}
|
|
console.log(app, 'Loaded', err || 'ok');
|
|
|
|
if (app.state.running == false) {
|
|
initKnockout();
|
|
}
|
|
bindViewModels(app);
|
|
app.state.running = true;
|
|
}
|
|
|
|
loadConfig(app, config_location, app.vm, configLoaded);
|
|
|
|
</script>
|
|
<!-- @@_end_import__app_main_behaviour -->
|
|
<!-- @@_end_import__app_main_body -->
|
|
</body>
|
|
</html>
|
|
|