From b79b6cfd8acd3123d1d9ab3f29267d8a9d443544 Mon Sep 17 00:00:00 2001 From: Till Breuer Date: Wed, 4 Dec 2013 11:51:01 +0100 Subject: [PATCH] Render toolbar in container, split timeline#create and load, move stuff into zoom slider directive --- .../controllers/timelines_controller.js | 22 +++--- .../timelines/zoom_slider_directive.js | 26 ++++++- .../angular/services/timeline_service.js | 9 +-- app/assets/javascripts/timelines.js | 7 +- app/views/timelines/_timeline.html.erb | 6 +- app/views/timelines/_toolbar.html.erb | 78 +++++++++---------- 6 files changed, 75 insertions(+), 73 deletions(-) diff --git a/app/assets/javascripts/angular/controllers/timelines_controller.js b/app/assets/javascripts/angular/controllers/timelines_controller.js index 5025bd1af0..212c4126e9 100644 --- a/app/assets/javascripts/angular/controllers/timelines_controller.js +++ b/app/assets/javascripts/angular/controllers/timelines_controller.js @@ -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()); + }); }]); diff --git a/app/assets/javascripts/angular/directives/timelines/zoom_slider_directive.js b/app/assets/javascripts/angular/directives/timelines/zoom_slider_directive.js index 17094350ea..d72a87eea1 100644 --- a/app/assets/javascripts/angular/directives/timelines/zoom_slider_directive.js +++ b/app/assets/javascripts/angular/directives/timelines/zoom_slider_directive.js @@ -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); + }); + } }; }); diff --git a/app/assets/javascripts/angular/services/timeline_service.js b/app/assets/javascripts/angular/services/timeline_service.js index 61d6ed1a69..912326e90b 100644 --- a/app/assets/javascripts/angular/services/timeline_service.js +++ b/app/assets/javascripts/angular/services/timeline_service.js @@ -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); diff --git a/app/assets/javascripts/timelines.js b/app/assets/javascripts/timelines.js index 32e77232e0..b932df6726 100644 --- a/app/assets/javascripts/timelines.js +++ b/app/assets/javascripts/timelines.js @@ -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) diff --git a/app/views/timelines/_timeline.html.erb b/app/views/timelines/_timeline.html.erb index 0d2782f5d3..c16110e07c 100644 --- a/app/views/timelines/_timeline.html.erb +++ b/app/views/timelines/_timeline.html.erb @@ -27,9 +27,9 @@ See doc/COPYRIGHT.rdoc for more details. ++#%> -
- -<%= render 'toolbar' %> +
+ <%= render 'toolbar' %> +
<% unless User.current.impaired? %> <%# TODO: Require autocompleter inside select_boxes.js diff --git a/app/views/timelines/_toolbar.html.erb b/app/views/timelines/_toolbar.html.erb index 807ff48d5c..d5dc24d712 100644 --- a/app/views/timelines/_toolbar.html.erb +++ b/app/views/timelines/_toolbar.html.erb @@ -1,42 +1,40 @@ -
-
-
- -
- -
- -
- -
- -
-
-
- -
- -
- - -
-
- -
-
- -
- -
- -
- -
-
- -
-
+
+
+ +
+ +
+ +
+ +
+ +
+
+
+ +
+ +
+ + +
+
+ +
+
+ +
+ +
+ +
+ +
+
+ +