Phi: make header collabsible
Save some vertical pixels by clicking on the header.
This commit is contained in:
parent
14079c5b7d
commit
3fb7a64632
1 changed files with 48 additions and 37 deletions
79
Phi/main.js
79
Phi/main.js
|
@ -14,16 +14,17 @@ require.config({
|
||||||
flottime : '3rdparty/flot/jquery.flot.time',
|
flottime : '3rdparty/flot/jquery.flot.time',
|
||||||
fgcommand : 'lib/fgcommand',
|
fgcommand : 'lib/fgcommand',
|
||||||
props : 'lib/props2',
|
props : 'lib/props2',
|
||||||
sammy: '3rdparty/sammy-latest.min',
|
sammy : '3rdparty/sammy-latest.min',
|
||||||
aircraft: '../aircraft-dir',
|
aircraft : '../aircraft-dir',
|
||||||
pagedown: '3rdparty/pagedown',
|
pagedown : '3rdparty/pagedown',
|
||||||
clockpicker: '3rdparty/clockpicker/jquery-clockpicker.min',
|
clockpicker : '3rdparty/clockpicker/jquery-clockpicker.min',
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
require([
|
require([
|
||||||
'knockout', 'jquery','sammy', 'fgcommand', 'themeswitch', 'kojqui/button', 'kojqui/buttonset', 'kojqui/selectmenu', 'jquery-ui/sortable', 'flot', 'leaflet'
|
'knockout', 'jquery', 'sammy', 'fgcommand', 'themeswitch', 'kojqui/button', 'kojqui/buttonset', 'kojqui/selectmenu',
|
||||||
], function(ko, jquery, Sammy, fgcommand ) {
|
'jquery-ui/sortable', 'flot', 'leaflet'
|
||||||
|
], function(ko, jquery, Sammy, fgcommand) {
|
||||||
|
|
||||||
function KnockProps(aliases) {
|
function KnockProps(aliases) {
|
||||||
|
|
||||||
|
@ -142,14 +143,14 @@ require([
|
||||||
koObservable.fgPropertyPath = path;
|
koObservable.fgPropertyPath = path;
|
||||||
koObservable.fgBaseDispose = koObservable.dispose;
|
koObservable.fgBaseDispose = koObservable.dispose;
|
||||||
koObservable.dispose = function() {
|
koObservable.dispose = function() {
|
||||||
if( this.fgPropertyPath ) {
|
if (this.fgPropertyPath) {
|
||||||
self.removeListener( this.fgPropertyPath, this );
|
self.removeListener(this.fgPropertyPath, this);
|
||||||
}
|
}
|
||||||
this.fgBaseDispose.call(this);
|
this.fgBaseDispose.call(this);
|
||||||
}
|
}
|
||||||
listeners.push(koObservable);
|
listeners.push(koObservable);
|
||||||
koObservable.fgSetPropertyValue = function(value) {
|
koObservable.fgSetPropertyValue = function(value) {
|
||||||
self.setPropertyValue( this.fgPropertyPath, value );
|
self.setPropertyValue(this.fgPropertyPath, value);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (1 == listeners.length) {
|
if (1 == listeners.length) {
|
||||||
|
@ -180,14 +181,14 @@ require([
|
||||||
return self.props[prop];
|
return self.props[prop];
|
||||||
}
|
}
|
||||||
|
|
||||||
return (self.props[prop] = self.observedProperty( target, prop ));
|
return (self.props[prop] = self.observedProperty(target, prop));
|
||||||
}
|
}
|
||||||
|
|
||||||
self.observedProperty = function( target, prop ) {
|
self.observedProperty = function(target, prop) {
|
||||||
var reply = ko.pureComputed({
|
var reply = ko.pureComputed({
|
||||||
read: target,
|
read : target,
|
||||||
write: function(newValue) {
|
write : function(newValue) {
|
||||||
if( newValue == target() )
|
if (newValue == target())
|
||||||
return;
|
return;
|
||||||
target(newValue);
|
target(newValue);
|
||||||
target.notifySubscribers(newValue);
|
target.notifySubscribers(newValue);
|
||||||
|
@ -204,7 +205,7 @@ require([
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
self.setPropertyValue(path,value);
|
self.setPropertyValue(path, value);
|
||||||
}
|
}
|
||||||
|
|
||||||
self.setPropertyValue = function(path, value) {
|
self.setPropertyValue = function(path, value) {
|
||||||
|
@ -235,14 +236,14 @@ require([
|
||||||
return ko.utils.knockprops.get(target, prop);
|
return ko.utils.knockprops.get(target, prop);
|
||||||
};
|
};
|
||||||
|
|
||||||
ko.extenders.observedProperty = function(target,prop) {
|
ko.extenders.observedProperty = function(target, prop) {
|
||||||
return ko.utils.knockprops.observedProperty(target,prop);
|
return ko.utils.knockprops.observedProperty(target, prop);
|
||||||
};
|
};
|
||||||
|
|
||||||
ko.extenders.fgPropertyGetSet = function(target,option) {
|
ko.extenders.fgPropertyGetSet = function(target, option) {
|
||||||
|
|
||||||
fgCommand.getPropertyValue(option, function(value) {
|
fgCommand.getPropertyValue(option, function(value) {
|
||||||
target(value);
|
target(value);
|
||||||
}, self);
|
}, self);
|
||||||
|
|
||||||
var p = ko.pureComputed({
|
var p = ko.pureComputed({
|
||||||
|
@ -252,13 +253,12 @@ require([
|
||||||
return;
|
return;
|
||||||
target(newValue);
|
target(newValue);
|
||||||
target.notifySubscribers(newValue);
|
target.notifySubscribers(newValue);
|
||||||
fgCommand.setPropertyValue(option, newValue );
|
fgCommand.setPropertyValue(option, newValue);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
return p;
|
return p;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
ko.utils.knockprops = new KnockProps();
|
ko.utils.knockprops = new KnockProps();
|
||||||
|
|
||||||
ko.utils.knockprops.setAliases([
|
ko.utils.knockprops.setAliases([
|
||||||
|
@ -394,26 +394,26 @@ require([
|
||||||
}
|
}
|
||||||
|
|
||||||
jquery("#widgetarea").sortable({
|
jquery("#widgetarea").sortable({
|
||||||
handle: ".widget-handle",
|
handle : ".widget-handle",
|
||||||
axis: "y",
|
axis : "y",
|
||||||
cursor: "move",
|
cursor : "move",
|
||||||
});
|
});
|
||||||
// jquery("#widgetarea").disableSelection();
|
// jquery("#widgetarea").disableSelection();
|
||||||
|
|
||||||
// Client-side routes
|
// Client-side routes
|
||||||
Sammy(function() {
|
Sammy(function() {
|
||||||
this.get('#:topic', function() {
|
this.get('#:topic', function() {
|
||||||
self.selectedTopic( this.params.topic );
|
self.selectedTopic(this.params.topic);
|
||||||
self.selectedSubtopic('');
|
self.selectedSubtopic('');
|
||||||
});
|
});
|
||||||
|
|
||||||
this.get('#:topic/:subtopic', function() {
|
this.get('#:topic/:subtopic', function() {
|
||||||
self.selectedTopic( this.params.topic );
|
self.selectedTopic(this.params.topic);
|
||||||
self.selectedSubtopic( this.params.subtopic );
|
self.selectedSubtopic(this.params.subtopic);
|
||||||
});
|
});
|
||||||
// empty route
|
// empty route
|
||||||
this.get('', function() {
|
this.get('', function() {
|
||||||
this.app.runRoute( 'get', '#' + self.topics[0] );
|
this.app.runRoute('get', '#' + self.topics[0]);
|
||||||
});
|
});
|
||||||
}).run();
|
}).run();
|
||||||
|
|
||||||
|
@ -472,7 +472,7 @@ require([
|
||||||
});
|
});
|
||||||
|
|
||||||
ko.components.register('dualarcgauge', {
|
ko.components.register('dualarcgauge', {
|
||||||
require: 'instruments/DualArcGauge'
|
require : 'instruments/DualArcGauge'
|
||||||
})
|
})
|
||||||
|
|
||||||
ko.bindingHandlers.flotchart = {
|
ko.bindingHandlers.flotchart = {
|
||||||
|
@ -499,16 +499,27 @@ require([
|
||||||
var data = ko.unwrap(value.data);
|
var data = ko.unwrap(value.data);
|
||||||
var options = ko.unwrap(value.options);
|
var options = ko.unwrap(value.options);
|
||||||
var plot = jquery.plot(element, data, options);
|
var plot = jquery.plot(element, data, options);
|
||||||
jquery(element).data("flotplot", plot );
|
jquery(element).data("flotplot", plot);
|
||||||
var postUpdate = ko.unwrap(value.postUpdate);
|
var postUpdate = ko.unwrap(value.postUpdate);
|
||||||
if( postUpdate ) {
|
if (postUpdate) {
|
||||||
postUpdate.call( value, element );
|
postUpdate.call(value, element);
|
||||||
}
|
}
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
ko.applyBindings(new PhiViewModel(),document.getElementById('wrapper'));
|
ko.applyBindings(new PhiViewModel(), document.getElementById('wrapper'));
|
||||||
|
|
||||||
|
jquery("#toolbar").click(function() {
|
||||||
|
jquery("#content").animate({
|
||||||
|
top : 0
|
||||||
|
}, 1000, null, function() {
|
||||||
|
jquery(".htabs").css('background', '#427EBF url("images/FI_logo.svg") no-repeat scroll left center');
|
||||||
|
});
|
||||||
|
jquery("#widgetarea").animate({
|
||||||
|
top : 29
|
||||||
|
}, 1000);
|
||||||
|
});
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
Loading…
Reference in a new issue