Load timeline inside scope

app/assets/javascripts/angular/controllers/timelines_controller.js

@@ -0,0 +1,31 @@
+timelinesApp.controller('TimelinesController', ['$scope', '$window', 'TimelineService', function($scope, $window, TimelineService){
+
+  $scope.switchTimeline = function() {
+    $window.location.href = $scope.timelines[$scope.currentTimelineId].path;
+  };
+
+  $scope.timelineContainerNo = 1; // formerly rand(10**75), TODO increment after each timeline startup
+
+  $scope.timelines = gon.timelines;
+  $scope.currentTimelineId = gon.current_timeline_id;
+
+  $scope.getTimelineContainerElementId = function() {
+    return 'timeline-container-' + $scope.timelineContainerNo;
+  };
+
+  $scope.getTimelineContainer = function() {
+    return angular.element(document.querySelector('#' + $scope.getTimelineContainerElementId()));
+  };
+
+  angular.element(document).ready(function () {
+    // aggregate timeline options
+    $scope.timelineTranslations = gon.timeline_translations;
+    $scope.timelineOptions = angular.extend(gon.timeline_options, {
+      ui_root: $scope.getTimelineContainer(),
+      i18n: $scope.timelineTranslations
+    });
+
+    // load timeline
+    $scope.timeline = TimelineService.loadTimeline($scope.timelineOptions);
+  });
+}]);

app/assets/javascripts/angular/services/timeline_service.js

@@ -0,0 +1,10 @@
+timelinesApp.service('TimelineService',['$rootScope', '$http', function($rootScope, $http) {
+  TimelineService = {
+
+    loadTimeline: function(timelineOptions) {
+      return Timeline.startup(timelineOptions);
+    }
+  };
+
+  return TimelineService;
+}]);

app/assets/javascripts/angular/timelines/timelines_controller.js

@@ -1,13 +0,0 @@
-timelinesApp = angular.module('openproject.timelines', ['ui.select2'])
-
-// .run(function($rootScope){
-// })
-
-.controller('TimelinesController', ['$scope', '$window', function($scope, $window){
-  $scope.timelines = gon.timelines;
-  $scope.currentTimelineId = gon.current_timeline_id;
-
-  $scope.loadTimeline = function() {
-    $window.location.href = $scope.timelines[$scope.currentTimelineId].path;
-  };
-}]);

app/assets/javascripts/angular/timelines_app.js

@@ -0,0 +1,4 @@
+var timelinesApp = angular.module('openproject.timelines', ['ui.select2']);
+
+// .run(function($rootScope){
+// })

app/assets/javascripts/application.js

@@ -66,8 +66,8 @@
 //= require top-shelf
 //= require unsupported-browsers
 //= require_tree ./pages
-//= require_tree ./angular/timelines
+//= require ./angular/timelines_app
-//= require_tree ./angular/timelines/directives
+//= require_tree ./angular
 //= require openproject_plugins
 
 //source: http://stackoverflow.com/questions/8120065/jquery-and-prototype-dont-work-together-with-array-prototype-reverse

app/controllers/timelines_controller.rb

@@ -49,6 +49,9 @@ class TimelinesController < ApplicationController
 
     @timeline = @project.timelines.find(params[:id])
     gon.current_timeline_id = @timeline.id
+    push_timeline_options
+
+    push_timeline_translations
   end
 
   def new
@@ -121,4 +124,49 @@ class TimelinesController < ApplicationController
   def push_visible_timeline_paths
     gon.timelines = visible_timeline_paths
   end
+
+  def push_timeline_options
+    gon.timeline_options = @timeline.options.reverse_merge(
+      project_id: @timeline.project.identifier,
+      url_prefix: Redmine::Utils.relative_url_root || ''
+    )
+  end
+
+  def push_timeline_translations
+    props = ['label_no_data',
+             'timelines.change',
+             'timelines.errors.report_epicfail',
+             'timelines.errors.report_timeout',
+             'timelines.errors.not_implemented',
+             'timelines.errors.report_comparison',
+             'timelines.empty',
+             'timelines.filter.noneSelection',
+             'timelines.filter.column.due_date',
+             'timelines.filter.column.name',
+             'timelines.filter.column.type',
+             'timelines.filter.column.status',
+             'timelines.filter.column.responsible',
+             'timelines.filter.column.start_date',
+             'timelines.filter.column.assigned_to',
+             'timelines.filter.grouping_other',
+             'timelines.outline',
+             'timelines.outlines.aggregation',
+             'timelines.outlines.level1',
+             'timelines.outlines.level2',
+             'timelines.outlines.level3',
+             'timelines.outlines.level4',
+             'timelines.outlines.level5',
+             'timelines.outlines.all',
+             'timelines.zoom.in',
+             'timelines.zoom.out',
+             'timelines.zoom.days',
+             'timelines.zoom.weeks',
+             'timelines.new_work_package',
+             'timelines.zoom.months',
+             'timelines.zoom.quarters',
+             'timelines.zoom.years']
+    gon.timeline_translations = props.inject({}) do |translations, key|
+      translations.merge(key => l(key))
+    end
+  end
 end

app/views/timelines/_timeline.html.erb

@@ -27,8 +27,7 @@ See doc/COPYRIGHT.rdoc for more details.
 
 ++#%>
 
-<% timeline_div_id = "timeline_#{rand(10**75)}" %>
+<div id='{{getTimelineContainerElementId()}}'></div>
-<div id="<%= timeline_div_id %>"></div>
 
 <% unless User.current.impaired? %>
   <%# TODO: Require autocompleter inside select_boxes.js
@@ -39,56 +38,6 @@ See doc/COPYRIGHT.rdoc for more details.
   <%= javascript_include_tag "timelines_select_boxes.js" %>
 <% end %>
 
-<script type="text/javascript">
-  (function() {
-    var i18n = {
-    <%= props = ['label_no_data',
-                 'timelines.change',
-                 'timelines.errors.report_epicfail',
-                 'timelines.errors.report_timeout',
-                 'timelines.errors.not_implemented',
-                 'timelines.errors.report_comparison',
-                 'timelines.empty',
-                 'timelines.filter.noneSelection',
-                 'timelines.filter.column.due_date',
-                 'timelines.filter.column.name',
-                 'timelines.filter.column.type',
-                 'timelines.filter.column.status',
-                 'timelines.filter.column.responsible',
-                 'timelines.filter.column.start_date',
-                 'timelines.filter.column.assigned_to',
-                 'timelines.filter.grouping_other',
-                 'timelines.outline',
-                 'timelines.outlines.aggregation',
-                 'timelines.outlines.level1',
-                 'timelines.outlines.level2',
-                 'timelines.outlines.level3',
-                 'timelines.outlines.level4',
-                 'timelines.outlines.level5',
-                 'timelines.outlines.all',
-                 'timelines.zoom.in',
-                 'timelines.zoom.out',
-                 'timelines.zoom.days',
-                 'timelines.zoom.weeks',
-                 'timelines.new_work_package',
-                 'timelines.zoom.months',
-                 'timelines.zoom.quarters',
-                 'timelines.zoom.years']
-        props.map { |t| %-'#{t}': '#{l(t)}'- }.join(",\n").html_safe
-      %>
-    };
-    var config = jQuery.extend({
-      i18n: i18n,
-      project_id: '<%= timeline.project.identifier %>',
-      url_prefix: '<%= Redmine::Utils.relative_url_root %>',
-      ui_root: jQuery("#<%= timeline_div_id %>")
-    }, <%= timeline.json_options %>);
-    jQuery(function(jQuery) {
-      Timeline.startup(config);
-    });
-  })();
-</script>
-
 <% unless @timeline_header_included %>
   <% content_for :header_tags do %>
 <!-- additional resources for timelines -->

app/views/timelines/show.html.erb

@@ -61,7 +61,7 @@ See doc/COPYRIGHT.rdoc for more details.
 
   <%= form_tag :id => "specialForm" do %>
     <%= label_tag 'timeline_select', l("timelines.timeline") %>
-    <%= collection_select(:timeline, :id, @visible_timelines, :id, :name, {}, {ui_select2: 'ui-select2', id: 'timeline_select', ng_model: 'currentTimelineId', ng_change: 'loadTimeline()'}) %>
+    <%= collection_select(:timeline, :id, @visible_timelines, :id, :name, {}, {ui_select2: 'ui-select2', id: 'timeline_select', ng_model: 'currentTimelineId', ng_change: 'switchTimeline()'}) %>
   <% end %>
 
   <script type="text/javascript">