update DocPanel and DocPage UI
This commit is contained in:
parent
d89a8e1087
commit
0d2f082779
2 changed files with 28 additions and 31 deletions
|
@ -35,7 +35,6 @@ Ox.DocPage = function(options, self) {
|
||||||
self.$examplesMenu = Ox.MenuButton({
|
self.$examplesMenu = Ox.MenuButton({
|
||||||
items: self.options.item.examples,
|
items: self.options.item.examples,
|
||||||
title: 'Examples...',
|
title: 'Examples...',
|
||||||
width: 128
|
|
||||||
})
|
})
|
||||||
.css({float: 'right', margin: '4px 4px 4px 2px'})
|
.css({float: 'right', margin: '4px 4px 4px 2px'})
|
||||||
.bindEvent({
|
.bindEvent({
|
||||||
|
@ -46,8 +45,7 @@ Ox.DocPage = function(options, self) {
|
||||||
.appendTo(self.$toolbar);
|
.appendTo(self.$toolbar);
|
||||||
}
|
}
|
||||||
|
|
||||||
self.$page = Ox.Container()
|
self.$page = Ox.Container().addClass('OxDocPage OxDocument');
|
||||||
.addClass('OxDocPage OxDocument');
|
|
||||||
|
|
||||||
that.setElement(
|
that.setElement(
|
||||||
Ox.SplitPanel({
|
Ox.SplitPanel({
|
||||||
|
|
|
@ -65,11 +65,12 @@ Ox.DocPanel = function(options, self) {
|
||||||
self.$testsButton = Ox.Button({title: 'Run Tests'})
|
self.$testsButton = Ox.Button({title: 'Run Tests'})
|
||||||
.css({float: 'left', margin: '4px'})
|
.css({float: 'left', margin: '4px'})
|
||||||
.bindEvent({click: runTests});
|
.bindEvent({click: runTests});
|
||||||
self.$testsIcon = Ox.LoadingIcon()
|
self.$testsLabel = Ox.Label({title: 'Running Tests...'})
|
||||||
.css({float: 'left', margin: '4px'});
|
.css({float: 'left', margin: '4px'})
|
||||||
|
.hide();
|
||||||
self.$toolbar = Ox.Bar({size: 24})
|
self.$toolbar = Ox.Bar({size: 24})
|
||||||
.append(self.$testsButton)
|
.append(self.$testsButton)
|
||||||
.append(self.$testsIcon);
|
.append(self.$testsLabel)
|
||||||
self.$list = Ox.Element();
|
self.$list = Ox.Element();
|
||||||
self.$sidebar = Ox.SplitPanel({
|
self.$sidebar = Ox.SplitPanel({
|
||||||
elements: [
|
elements: [
|
||||||
|
@ -105,6 +106,7 @@ Ox.DocPanel = function(options, self) {
|
||||||
}), function(docItems) {
|
}), function(docItems) {
|
||||||
self.options.items = docItems;
|
self.options.items = docItems;
|
||||||
getExamples(function() {
|
getExamples(function() {
|
||||||
|
self.$sidebar.replaceElement(0, self.$toolbar);
|
||||||
renderList();
|
renderList();
|
||||||
self.options.runTests && runTests();
|
self.options.runTests && runTests();
|
||||||
that.triggerEvent('load', {items: docItems});
|
that.triggerEvent('load', {items: docItems});
|
||||||
|
@ -112,6 +114,7 @@ Ox.DocPanel = function(options, self) {
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
getExamples(function() {
|
getExamples(function() {
|
||||||
|
self.$sidebar.replaceElement(0, self.$toolbar);
|
||||||
renderList();
|
renderList();
|
||||||
self.options.runTests && runTests();
|
self.options.runTests && runTests();
|
||||||
});
|
});
|
||||||
|
@ -259,16 +262,13 @@ Ox.DocPanel = function(options, self) {
|
||||||
selectItem(data.ids.length ? data.ids[0] : '')
|
selectItem(data.ids.length ? data.ids[0] : '')
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
self.$sidebar
|
self.$sidebar.replaceElement(1, self.$list);
|
||||||
.replaceElement(0, self.$toolbar)
|
|
||||||
.replaceElement(1, self.$list);
|
|
||||||
selectItem(self.options.selected);
|
selectItem(self.options.selected);
|
||||||
}
|
}
|
||||||
|
|
||||||
function runTests() {
|
function runTests() {
|
||||||
self.$testsButton.options({disabled: true});
|
self.$testsButton.hide();
|
||||||
self.$testsIcon.start();
|
self.$testsLabel.show();
|
||||||
setTimeout(function() {
|
|
||||||
Ox.load({Geo: {}, Image: {}, Unicode: {}}, function() {
|
Ox.load({Geo: {}, Image: {}, Unicode: {}}, function() {
|
||||||
Ox.test(self.options.items, function(results) {
|
Ox.test(self.options.items, function(results) {
|
||||||
results.forEach(function(result) {
|
results.forEach(function(result) {
|
||||||
|
@ -285,12 +285,11 @@ Ox.DocPanel = function(options, self) {
|
||||||
self.results[key][passed]++;
|
self.results[key][passed]++;
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
self.$testsButton.options({disabled: false});
|
self.$testsLabel.hide();
|
||||||
self.$testsIcon.stop();
|
self.$testsButton.show();
|
||||||
renderList();
|
renderList();
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
}, 1000);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function selectItem(id) {
|
function selectItem(id) {
|
||||||
|
|
Loading…
Reference in a new issue