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

Render toolbar in container, split timeline#create and load, move stuff into zoom slider directive

Browse Source
pull/1301/head
Till Breuer 11 years ago
parent 888ed525ad
commit b79b6cfd8a
6 changed files with 75 additions and 73 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. 22
      app/assets/javascripts/angular/controllers/timelines_controller.js
  2. 26
      app/assets/javascripts/angular/directives/timelines/zoom_slider_directive.js
  3. 9
      app/assets/javascripts/angular/services/timeline_service.js
  4. 7
      app/assets/javascripts/timelines.js
  5. 6
      app/views/timelines/_timeline.html.erb
  6. 78
      app/views/timelines/_toolbar.html.erb

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

@ -5,7 +5,8 @@ timelinesApp.controller('TimelinesController', ['$scope', '$window', 'TimelineSe
};
// Setup
$scope.timelineContainerNo = 1; // formerly rand(10**75), TODO increment after each timeline startup
$scope.slider = null;
$scope.timelineContainerNo = 1;
$scope.currentOutlineLevel = 'level3';
$scope.currentScale = 'monthly';
@ -17,17 +18,6 @@ timelinesApp.controller('TimelinesController', ['$scope', '$window', 'TimelineSe
// Get timelines stuff into scope
$scope.Timeline = Timeline;
// Load timeline
$scope.timeline = TimelineService.loadTimeline($scope.timelineOptions);
// Slider
// TODO integrate angular-ui-slider
$scope.getCurrentScaleLevel = function() {
return jQuery('#zoom-slider').slider('value');
};
$scope.setCurrentScaleLevel = function(value) {
jQuery('#zoom-slider').slider('value', value);
};
// Container for timeline rendering
$scope.getTimelineContainerElementId = function() {
@ -37,8 +27,14 @@ timelinesApp.controller('TimelinesController', ['$scope', '$window', 'TimelineSe
return angular.element(document.querySelector('#' + $scope.getTimelineContainerElementId()));
};
// Load timeline
$scope.timeline = TimelineService.createTimeline($scope.timelineOptions);
// $scope.timeline.load($scope.timelineOptions);
angular.element(document).ready(function() {
// start timeline
TimelineService.startTimeline($scope.timelineOptions, $scope.getTimelineContainer());
// $scope.timeline.draw($scope.getTimelineContainer());
$scope.timeline = TimelineService.startTimeline($scope.timelineOptions, $scope.getTimelineContainer());
});
}]);

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

@ -2,23 +2,41 @@ timelinesApp.directive('zoomSlider', function() {
return {
restrict: 'A',
link: function(scope, element, attributes) {
currentScaleIndex = Timeline.ZOOM_SCALES.indexOf(scope.currentScale);
scope.currentScaleIndex = Timeline.ZOOM_SCALES.indexOf(scope.currentScale);
scope.slider = element.slider({
min: 1,
max: Timeline.ZOOM_SCALES.length,
range: 'min',
value: currentScaleIndex + 1,
value: scope.currentScaleIndex + 1,
slide: function(event, ui) {
currentScaleIndex = ui.value - 1;
scope.currentScaleIndex = ui.value - 1;
},
change: function(event, ui) {
currentScaleIndex = ui.value - 1;
scope.currentScaleIndex = ui.value - 1;
scope.timeline.zoom(ui.value - 1);
}
}).css({
// top right bottom left
'margin': '4px 6px 3px'
});
// Slider
// TODO integrate angular-ui-slider
scope.getCurrentScaleLevel = function() {
return scope.slider.slider('value');
};
scope.setCurrentScaleLevel = function(value) {
scope.slider.slider('value', value);
};
scope.$watch('currentScaleIndex', function(){
scope.currentScale = Timeline.ZOOM_SCALES[scope.currentScaleIndex];
});
scope.$watch('currentScale', function(){
scope.currentScaleIndex = Timeline.ZOOM_SCALES.indexOf(scope.currentScale);
// scope.setCurrentScaleLevel(scope.currentScaleIndex);
});
}
};
});

9
app/assets/javascripts/angular/services/timeline_service.js vendored
Unescape View File

@ -1,13 +1,8 @@
timelinesApp.service('TimelineService',['$rootScope', '$http', function($rootScope, $http) {
TimelineService = {
loadTimeline: function(timelineOptions) {
timeline = Timeline.create(timelineOptions);
timeline = Timeline.load(timelineOptions);
return timeline;
createTimeline: function(timelineOptions) {
return Timeline.create(timelineOptions);
},
startTimeline: function(timelineOptions, uiRoot) {
// TimelineService.loadTimeline(timelineOptions);
return Timeline.startup(timelineOptions, uiRoot);

7
app/assets/javascripts/timelines.js
Unescape View File

@ -278,12 +278,7 @@ jQuery.extend(Timeline, {
return timeline;
},
load: function(options) {
var timeline = this, timelineLoader;
if(this === Timeline) {
timeline = Timeline.create(options);
return timeline.load(options);
}
var timelineLoader;
try {
// prerequisites (3rd party libs)

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

@ -27,9 +27,9 @@ See doc/COPYRIGHT.rdoc for more details.
++#%>
<div id="{{getTimelineContainerElementId()}}"></div>
<%= render 'toolbar' %>
<div id="{{getTimelineContainerElementId()}}">
<%= render 'toolbar' %>
</div>
<% unless User.current.impaired? %>
<%# TODO: Require autocompleter inside select_boxes.js

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

@ -1,42 +1,40 @@
<div id="soon-to-become-{{getTimelineContainerElementId()}}">
<div class="tl-toolbar">
<div class="tl-toolbar-container">
<a ng-if='timeline.USE_MODALS' ng-click="timeline.addPlanningElement()" title="{{timeline.i18n('timelines.new_work_package')}}" class="icon icon-add"></a>
</div>
<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>
</div>
<div class="tl-toolbar-container" style="width: 100px; height: 20px;">
<div id="zoom-slider" zoom-slider></div>
</div>
<div class="tl-toolbar-container">
<a href="javascript://" title="Zoom in" class="icon tl-icon-zoomin" ng-click="setCurrentScaleLevel(getCurrentScaleLevel() + 1)"></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>
</form>
</div>
<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="Reset Outline" class="icon tl-icon-outline"></a>
</div>
<div class="tl-toolbar-container">
<form>
<select name="outlines" ng-model="currentOutlineLevel" ng-options="timeline.i18n(Timeline.OUTLINE_CONFIGURATIONS[level].name) for level in Timeline.OUTLINE_LEVELS">
</select>
</form>
</div>
<div class="tl-toolbar">
<div class="tl-toolbar-container">
<a ng-if='timeline.USE_MODALS' ng-click="timeline.addPlanningElement()" title="{{timeline.i18n('timelines.new_work_package')}}" class="icon icon-add"></a>
</div>
<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>
</div>
<div class="tl-toolbar-container" style="width: 100px; height: 20px;">
<div id="zoom-slider" zoom-slider></div>
</div>
<div class="tl-toolbar-container">
<a href="javascript://" title="Zoom in" class="icon tl-icon-zoomin" ng-click="setCurrentScaleLevel(getCurrentScaleLevel() + 1)"></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>
</form>
</div>
<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="Reset Outline" class="icon tl-icon-outline"></a>
</div>
<div class="tl-toolbar-container">
<form>
<select name="outlines" ng-model="currentOutlineLevel" ng-options="timeline.i18n(Timeline.OUTLINE_CONFIGURATIONS[level].name) for level in Timeline.OUTLINE_LEVELS">
</select>
</form>
</div>
</div>

Write Preview
Loading…
Cancel
Save