1
0
Fork 0

Phi: improve the property browser

- add icon hints for expand/collapseable properties
- add icon and function for refresh value
This commit is contained in:
Torsten Dreyer 2015-02-27 16:28:04 +01:00
parent f8a4581771
commit ccd44aa76c
2 changed files with 44 additions and 27 deletions

View file

@ -28,6 +28,18 @@
<script type="text/html" id="propertytree-template">
<ul class="property-list" data-bind="foreach: $data">
<li>
<span class="ui-icon pointer-icon" style="display: inline-block;"
data-bind="
css: {
'ui-icon-triangle-1-e': hasChildren,
'ui-icon-triangle-1-se': isExpanded,
'ui-icon-refresh': hasValue,
},
attr: {
title: hasValue ? 'click to refresh' : 'click to expand/collapse',
},
click: toggle,
"></span>
<span class="property-name"
data-bind="
text: name,

View file

@ -5,32 +5,19 @@ define([
function PropertyViewModel() {
var self = this;
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;
function load() {
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;
}
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 = [];
var a = [];
if (data.children) {
data.children.forEach(function(prop) {
var p = new PropertyViewModel();
p.name = prop.name;
@ -50,15 +37,33 @@ define([
}
return a.name.localeCompare(b.name);
}));
}
});
});
}
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) {
load();
} else {
self.children.removeAll();
}
});
self.toggle = function() {
self.isExpanded(!self.isExpanded());
if (self.hasChildren) {
self.isExpanded(!self.isExpanded());
} else {
load();
}
}
self.valueEdit = function(prop, evt) {