TheDude
/
openproject
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Wire up zoom elements in navigation (WIP)

Browse Source 
TODO integrate angular-ui-slider
pull/1301/head
Till Breuer 11 years ago
parent d5881aadcc
commit ce9a0acc3c
4 changed files with 54 additions and 30 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 27
      app/assets/javascripts/angular/controllers/timelines_controller.js
  2. 38
      app/assets/javascripts/angular/directives/timelines/zoom_slider_directive.js
  3. 13
      app/assets/javascripts/timelines/ui.js
  4. 6
      app/views/timelines/_toolbar.html.erb

27
app/assets/javascripts/angular/controllers/timelines_controller.js vendored
Unescape View File

@ -5,11 +5,6 @@ timelinesApp.controller('TimelinesController', ['$scope', '$window', 'TimelineSe
};
// Setup
$scope.slider = null;
$scope.timelineContainerNo = 1;
$scope.currentOutlineLevel = 'level3';
$scope.currentScale = 'monthly';
// Get server-side stuff into scope
$scope.currentTimelineId = gon.current_timeline_id;
@ -18,7 +13,10 @@ timelinesApp.controller('TimelinesController', ['$scope', '$window', 'TimelineSe
// Get timelines stuff into scope
$scope.Timeline = Timeline;
$scope.slider = null;
$scope.timelineContainerNo = 1;
$scope.currentOutlineLevel = 'level3';
$scope.currentScaleName = 'monthly';
// Container for timeline rendering
$scope.getTimelineContainerElementId = function() {
@ -28,6 +26,17 @@ timelinesApp.controller('TimelinesController', ['$scope', '$window', 'TimelineSe
return angular.element(document.querySelector('#' + $scope.getTimelineContainerElementId()));
};
$scope.increaseZoom = function() {
if($scope.currentScaleIndex < Object.keys(Timeline.ZOOM_CONFIGURATIONS).length - 1) {
$scope.currentScaleIndex++;
}
};
$scope.decreaseZoom = function() {
if($scope.currentScaleIndex > 0) {
$scope.currentScaleIndex--;
}
};
@ -37,7 +46,7 @@ timelinesApp.controller('TimelinesController', ['$scope', '$window', 'TimelineSe
$scope.updateToolbar = function() {
$scope.slider.slider('value', $scope.timeline.zoomIndex + 1);
$scope.currentOutlineLevel = Timeline.OUTLINE_LEVELS[$scope.timeline.expansionIndex];
$scope.currentScale = Timeline.ZOOM_SCALES[$scope.timeline.zoomIndex];
$scope.currentScaleName = Timeline.ZOOM_SCALES[$scope.timeline.zoomIndex];
};
$scope.$on('timelines.dataLoaded', function(){
@ -107,12 +116,10 @@ timelinesApp.controller('TimelinesController', ['$scope', '$window', 'TimelineSe
// Load timeline
$scope.timeline = TimelineService.createTimeline($scope.timelineOptions);
angular.element(document).ready(function() {
// start timeline
$scope.timeline.registerTimelineContainer($scope.getTimelineContainer());

38
app/assets/javascripts/angular/directives/timelines/zoom_slider_directive.js vendored
Unescape View File

@ -2,7 +2,7 @@ timelinesApp.directive('zoomSlider', function() {
return {
restrict: 'A',
link: function(scope, element, attributes) {
scope.currentScaleIndex = Timeline.ZOOM_SCALES.indexOf(scope.currentScale);
scope.currentScaleIndex = Timeline.ZOOM_SCALES.indexOf(scope.currentScaleName);
scope.slider = element.slider({
min: 1,
max: Timeline.ZOOM_SCALES.length,
@ -12,8 +12,8 @@ timelinesApp.directive('zoomSlider', function() {
scope.currentScaleIndex = ui.value - 1;
},
change: function(event, ui) {
scope.currentScaleIndex = ui.value - 1;
scope.timeline.zoom(ui.value - 1);
scope.updateScaleIndex(ui.value - 1);
scope.$apply();
}
}).css({
// top right bottom left
@ -22,19 +22,31 @@ timelinesApp.directive('zoomSlider', function() {
// Slider
// TODO integrate angular-ui-slider
scope.getCurrentScaleLevel = function() {
return scope.slider.slider('value');
};
scope.setCurrentScaleLevel = function(value) {
scope.slider.slider('value', value);
scope.updateScaleIndex = function(scaleIndex) {
scope.currentScaleIndex = scaleIndex;
newScaleName = Timeline.ZOOM_SCALES[scaleIndex];
if (scope.currentScaleName !== newScaleName) {
scope.currentScaleName = newScaleName;
}
};
scope.$watch('currentScaleIndex', function(){
scope.currentScale = Timeline.ZOOM_SCALES[scope.currentScaleIndex];
scope.$watch('currentScaleIndex', function(newIndex){
scope.updateScaleIndex(newIndex);
});
scope.$watch('currentScale', function(){
scope.currentScaleIndex = Timeline.ZOOM_SCALES.indexOf(scope.currentScale);
// scope.setCurrentScaleLevel(scope.currentScaleIndex);
scope.$watch('currentScaleName', function(newScaleName, oldScaleName){
if (newScaleName !== oldScaleName) {
scope.currentScale = Timeline.ZOOM_CONFIGURATIONS[scope.currentScaleName].scale;
scope.timeline.scale = scope.currentScale;
scope.currentScaleIndex = Timeline.ZOOM_SCALES.indexOf(scope.currentScaleName);
scope.slider.slider('value', scope.currentScaleIndex + 1);
scope.timeline.zoom(scope.currentScaleIndex);
}
});
}

13
app/assets/javascripts/timelines/ui.js
Unescape View File

@ -139,17 +139,21 @@ jQuery.extend(Timeline, {
} else {
this.scale = scale;
}
return this.getDaysForCurrentScale();
},
getDaysForCurrentScale: function() {
var days = this.getDaysBetween(
this.getBeginning(),
this.getEnd()
);
return days * this.DAY_WIDTH * scale;
return days * this.DAY_WIDTH * this.scale;
},
getWidth: function() {
// width is the wider of the currently visible chart dimensions
// (adjusted_width) and the minimum space the timeline needs.
return Math.max(this.adjusted_width, this.setScale() + 200);
return Math.max(this.adjusted_width, this.getDaysForCurrentScale() + 200);
},
resetWidth: function() {
delete this.adjusted_width;
@ -207,8 +211,6 @@ jQuery.extend(Timeline, {
}
index = Math.max(Math.min(this.ZOOM_SCALES.length - 1, index), 0);
this.zoomIndex = index;
var scale = Timeline.ZOOM_CONFIGURATIONS[Timeline.ZOOM_SCALES[index]].scale;
this.setScale(scale);
this.resetWidth();
this.triggerResize();
this.rebuildAll();
@ -1315,6 +1317,9 @@ jQuery.extend(Timeline, {
},
triggerResize: function() {
var root = this.getUiRoot();
if (!root) {
return false;
}
var width = root.width() - root.find('.tl-left-main').width() -
Timeline.BORDER_WIDTH_CORRECTION;
this.adjustWidth(width);

6
app/views/timelines/_toolbar.html.erb
Unescape View File

@ -6,7 +6,7 @@
<div class="tl-toolbar-container" style="width: 1px; height: 20px; background-color: rgb(0, 0, 0);"></div>
<div class="tl-toolbar-container">
<a href="javascript://" title="Zoom out" class="icon tl-icon-zoomout" ng-click="setCurrentScaleLevel(getCurrentScaleLevel() - 1)"></a>
<a href="javascript://" title="Zoom out" class="icon tl-icon-zoomout" ng-click="decreaseZoom()"></a>
</div>
<div class="tl-toolbar-container" style="width: 100px; height: 20px;">
@ -14,13 +14,13 @@
</div>
<div class="tl-toolbar-container">
<a href="javascript://" title="Zoom in" class="icon tl-icon-zoomin" ng-click="setCurrentScaleLevel(getCurrentScaleLevel() + 1)"></a>
<a href="javascript://" title="Zoom in" class="icon tl-icon-zoomin" ng-click="increaseZoom()"></a>
</div>
<div class="tl-toolbar-container">
<form>
<select name="zooms" ng-model="currentScale" ng-options="timeline.i18n(Timeline.ZOOM_CONFIGURATIONS[scale].name) for scale in Timeline.ZOOM_SCALES">
<select name="zooms" ng-model="currentScaleName" ng-options="timeline.i18n(Timeline.ZOOM_CONFIGURATIONS[scale].name) for scale in Timeline.ZOOM_SCALES">
</select>
</form>
</div>

Write Preview
Loading…
Cancel
Save