[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];
}
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

View File

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

View File

@ -115,7 +115,8 @@
</mct-control>
<!-- Zoom control -->
<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"
ng-model="currentZoom"
ng-mouseUp="tcController.zoomStop(currentZoom)"

View File

@ -26,7 +26,7 @@ define(
],
function (TimeConductorValidation) {
function TimeConductorController($scope, $window, timeConductor, conductorViewService, timeSystems) {
function TimeConductorController($scope, $window, timeConductor, conductorViewService, timeSystems, formatService) {
var self = this;
@ -43,6 +43,7 @@ define(
this.conductor = timeConductor;
this.modes = conductorViewService.availableModes();
this.validation = new TimeConductorValidation(this.conductor);
this.formatService = formatService;
// Construct the provided time system definitions
this.timeSystems = timeSystems.map(function (timeSystemConstructor) {
@ -129,6 +130,8 @@ define(
this.$scope.boundsModel.end = bounds.end;
this.$scope.currentZoom = this.toSliderValue(bounds.end - bounds.start);
this.toTimeUnits(bounds.end - bounds.start);
if (!this.pendingUpdate) {
this.pendingUpdate = true;
this.$window.requestAnimationFrame(function () {
@ -272,10 +275,16 @@ define(
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) {
var bounds = this.toTimeSpan(sliderValue);
this.setFormFromBounds(bounds);
this.conductorViewService.emit("zoom", bounds);
};