Phi: add property browser
This commit is contained in:
Torsten Dreyer
parent
205211a9a5
commit
398995264d
3 changed files with 158 additions and 9 deletions
|
|
@ -6,6 +6,6 @@
|
|||
click: $parent.selectTopic"></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="vtabs-content" data-bind="component: { name: selectedComponent, params: { props: $root.props }}">
|
||||
<div id="vtabs-content" data-bind="component: { name: selectedComponent }">
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,59 @@
|
|||
<style>
|
||||
.pointer-icon {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.property-list {
|
||||
list-style-type: none;
|
||||
list-style-image: none;
|
||||
padding-left: 26px;
|
||||
}
|
||||
|
||||
.property-name {
|
||||
width: 12em;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.property-value {
|
||||
padding: 0 0.2em;
|
||||
min-width: 8em;
|
||||
display: inline-block;
|
||||
text-align: right;
|
||||
}
|
||||
</style>
|
||||
<div class="ui-widget ui-widget-content ui-corner-all">
|
||||
<div class="ui-widget-header">Property Tree</div>
|
||||
<div data-bind="template: { name: 'propertytree-template', data: properties }"></div>
|
||||
</div>
|
||||
<script type="text/html" id="propertytree-template">
|
||||
<ul class="property-list" data-bind="foreach: $data">
|
||||
<li>
|
||||
<span class="property-name"
|
||||
data-bind="
|
||||
text: name,
|
||||
css: {
|
||||
'pointer-icon': hasChildren,
|
||||
},
|
||||
click: toggle,
|
||||
"></span>
|
||||
|
||||
<div data-bind="foreach: properties">
|
||||
<span class="property-value ui-state-hover pointer-icon ui-corner-all"
|
||||
data-bind="
|
||||
text: value,
|
||||
visible: hasValue,
|
||||
click: valueEdit,
|
||||
"></span>
|
||||
|
||||
</div>
|
||||
<div data-bind="
|
||||
template: {
|
||||
name: 'propertytree-template',
|
||||
data: children
|
||||
},
|
||||
visible: isExpanded
|
||||
"></div>
|
||||
</li>
|
||||
</ul>
|
||||
</script>
|
||||
<script type="text/html" id="inplace-editor-template">
|
||||
<input style="width: 8em" >
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,21 +1,118 @@
|
|||
define([
|
||||
'jquery', 'knockout', 'text!./Properties.html',
|
||||
'jquery', 'knockout', 'text!./Properties.html',
|
||||
], function(jquery, ko, htmlString) {
|
||||
|
||||
function PropertyViewModel() {
|
||||
var self = this;
|
||||
self.name = ko.observable('');
|
||||
|
||||
var updateId = 0;
|
||||
function update( id ) {
|
||||
if( id != updateId ) return;
|
||||
}
|
||||
self.name = '';
|
||||
self.value = ko.observable('');
|
||||
self.children = ko.observableArray([]);
|
||||
self.index = 0;
|
||||
self.path = '';
|
||||
self.hasChildren = false;
|
||||
self.hasValue = false;
|
||||
|
||||
self.isExpanded = ko.observable(false);
|
||||
self.isExpanded.subscribe(function(newValue) {
|
||||
if (newValue) {
|
||||
jquery.get('/json' + self.path, null, function(data) {
|
||||
self.hasChildren = data.nChildren > 0;
|
||||
if (typeof (data.value) != 'undefined') {
|
||||
self.value(data.value);
|
||||
self.hasValue = true;
|
||||
} else {
|
||||
self.value('');
|
||||
self.hasValue = false;
|
||||
}
|
||||
|
||||
var a = [];
|
||||
data.children.forEach(function(prop) {
|
||||
var p = new PropertyViewModel();
|
||||
p.name = prop.name;
|
||||
p.path = prop.path;
|
||||
p.hasChildren = prop.nChildren > 0;
|
||||
if (typeof (prop.value) != 'undefined') {
|
||||
p.value(prop.value);
|
||||
p.hasValue = true;
|
||||
} else {
|
||||
p.hasValue = false;
|
||||
}
|
||||
a.push(p);
|
||||
});
|
||||
self.children(a.sort(function(a, b) {
|
||||
if (a.name == b.name) {
|
||||
return a.index - b.index;
|
||||
}
|
||||
return a.name.localeCompare(b.name);
|
||||
}));
|
||||
|
||||
});
|
||||
} else {
|
||||
self.children.removeAll();
|
||||
}
|
||||
});
|
||||
|
||||
self.toggle = function() {
|
||||
self.isExpanded(!self.isExpanded());
|
||||
}
|
||||
|
||||
self.valueEdit = function(prop, evt) {
|
||||
var inplaceEditor = jquery(jquery('#inplace-editor-template').html());
|
||||
|
||||
var elem = jquery(evt.target);
|
||||
elem.hide();
|
||||
elem.after(inplaceEditor);
|
||||
inplaceEditor.val(elem.text());
|
||||
inplaceEditor.focus();
|
||||
|
||||
function endEdit(val) {
|
||||
inplaceEditor.remove();
|
||||
elem.show();
|
||||
|
||||
if (typeof (val) === 'undefined')
|
||||
return;
|
||||
var val = val.trim();
|
||||
elem.text(val);
|
||||
|
||||
jquery.post('/json' + self.path, JSON.stringify({
|
||||
value : val
|
||||
}));
|
||||
}
|
||||
|
||||
inplaceEditor.on('keyup', function(evt) {
|
||||
switch (evt.key) {
|
||||
case 'Esc':
|
||||
endEdit();
|
||||
break;
|
||||
case 'Enter':
|
||||
endEdit(inplaceEditor.val());
|
||||
break;
|
||||
}
|
||||
});
|
||||
|
||||
inplaceEditor.blur(function() {
|
||||
endEdit(inplaceEditor.val());
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function ViewModel(params) {
|
||||
var self = this;
|
||||
|
||||
var properties = ko.observableArray([]);
|
||||
self.root = new PropertyViewModel();
|
||||
self.root.name = "root";
|
||||
self.root.path = "/";
|
||||
self.root.isExpanded(true);
|
||||
self.properties = self.root.children;
|
||||
}
|
||||
|
||||
ViewModel.prototype.dispose = function() {
|
||||
}
|
||||
// ViewModel.prototype.dispose = function() {
|
||||
// }
|
||||
|
||||
// Return component definition
|
||||
return {
|
||||
|
|
|
|||
Loading…
Reference in a new issue