[Time Conductor] Added zoom level label

This commit is contained in:
Henry 2016-09-23 13:06:22 -07:00
parent 3c95c095f1
commit 2db4aa6235
4 changed files with 47 additions and 4 deletions

View File

@ -95,6 +95,38 @@ define([
})[0][0]; })[0][0];
} }
UTCTimeFormat.prototype.timeUnits = function (timeRange) {
var momentified = moment.duration(timeRange);
return [
["Decades", function (r) {
return r.years() > 15;
}],
["Years", function (r) {
return r.years() > 0;
}],
["Months", function (r) {
return r.months() > 0;
}],
["Days", function (r) {
return r.days() > 0;
}],
["Hours", function (r) {
return r.hours() > 0;
}],
["Minutes", function (r) {
return r.minutes() > 0;
}],
["Seconds", function (r) {
return r.seconds() > 0;
}],
["Milliseconds", function (r) {
return true;
}]
].filter(function (row){
return row[1](momentified);
})[0][0];
};
/** /**
* *
* @param value * @param value

View File

@ -69,7 +69,8 @@ define([
"$window", "$window",
"timeConductor", "timeConductor",
"timeConductorViewService", "timeConductorViewService",
"timeSystems[]" "timeSystems[]",
"formatService"
] ]
}, },
{ {

View File

@ -115,7 +115,8 @@
</mct-control> </mct-control>
<!-- Zoom control --> <!-- Zoom control -->
<div class="l-time-conductor-zoom-w grows flex-elem l-flex-row"> <div class="l-time-conductor-zoom-w grows flex-elem l-flex-row">
<span class="time-conductor-zoom-current-range flex-elem flex-fixed holder"></span> <span
class="time-conductor-zoom-current-range flex-elem flex-fixed holder">{{timeUnits}}</span>
<input class="time-conductor-zoom flex-elem" type="range" <input class="time-conductor-zoom flex-elem" type="range"
ng-model="currentZoom" ng-model="currentZoom"
ng-mouseUp="tcController.zoomStop(currentZoom)" ng-mouseUp="tcController.zoomStop(currentZoom)"

View File

@ -26,7 +26,7 @@ define(
], ],
function (TimeConductorValidation) { function (TimeConductorValidation) {
function TimeConductorController($scope, $window, timeConductor, conductorViewService, timeSystems) { function TimeConductorController($scope, $window, timeConductor, conductorViewService, timeSystems, formatService) {
var self = this; var self = this;
@ -43,6 +43,7 @@ define(
this.conductor = timeConductor; this.conductor = timeConductor;
this.modes = conductorViewService.availableModes(); this.modes = conductorViewService.availableModes();
this.validation = new TimeConductorValidation(this.conductor); this.validation = new TimeConductorValidation(this.conductor);
this.formatService = formatService;
// Construct the provided time system definitions // Construct the provided time system definitions
this.timeSystems = timeSystems.map(function (timeSystemConstructor) { this.timeSystems = timeSystems.map(function (timeSystemConstructor) {
@ -129,6 +130,8 @@ define(
this.$scope.boundsModel.end = bounds.end; this.$scope.boundsModel.end = bounds.end;
this.$scope.currentZoom = this.toSliderValue(bounds.end - bounds.start); this.$scope.currentZoom = this.toSliderValue(bounds.end - bounds.start);
this.toTimeUnits(bounds.end - bounds.start);
if (!this.pendingUpdate) { if (!this.pendingUpdate) {
this.pendingUpdate = true; this.pendingUpdate = true;
this.$window.requestAnimationFrame(function () { this.$window.requestAnimationFrame(function () {
@ -272,10 +275,16 @@ define(
return {start: center - timeSpan / 2, end: center + timeSpan / 2}; return {start: center - timeSpan / 2, end: center + timeSpan / 2};
}; };
TimeConductorController.prototype.toTimeUnits = function (timeSpan) {
if (this.conductor.timeSystem()) {
var timeFormat = this.formatService.getFormat(this.conductor.timeSystem().formats()[0]);
this.$scope.timeUnits = timeFormat.timeUnits && timeFormat.timeUnits(timeSpan);
}
}
TimeConductorController.prototype.zoom = function(sliderValue) { TimeConductorController.prototype.zoom = function(sliderValue) {
var bounds = this.toTimeSpan(sliderValue); var bounds = this.toTimeSpan(sliderValue);
this.setFormFromBounds(bounds); this.setFormFromBounds(bounds);
this.conductorViewService.emit("zoom", bounds); this.conductorViewService.emit("zoom", bounds);
}; };