Add timeline directive and get rid of ready hook

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

@@ -66,86 +66,8 @@ 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.currentScaleName = Timeline.ZOOM_SCALES[$scope.timeline.zoomIndex];
-  };
-
-
-  drawTimeline = function(timeline){
-    try {
-      window.clearTimeout(timeline.safetyHook);
-
-      if (timeline.isGrouping() && timeline.options.grouping_two_enabled) {
-        timeline.secondLevelGroupingAdjustments();
-      }
-
-      treeNode = timeline.getLefthandTree();
-      if (treeNode.containsPlanningElements() || treeNode.containsProjects()) {
-        timeline.adjustForPlanningElements();
-        completeUI();
-      } else {
-        timeline.warn(this.i18n('label_no_data'), 'warning');
-      }
-    } catch (e) {
-      timeline.die(e);
-    }
-  };
-
-  completeUI = function() {
-    // construct tree on left-hand-side.
-    $scope.timeline.rebuildTree();
-
-    // lift the curtain, paper otherwise doesn't show w/ VML.
-    $scope.underConstruction = false;
-    $scope.timeline.paper = new Raphael($scope.timeline.paperElement, 640, 480);
-
-    // perform some zooming. if there is a zoom level stored with the
-    // report, zoom to it. otherwise, zoom out. this also constructs
-    // timeline graph.
-    if ($scope.timeline.options.zoom_factor &&
-        $scope.timeline.options.zoom_factor.length === 1) {
-      $scope.timeline.zoom(
-        $scope.timeline.pnum($scope.timeline.options.zoom_factor[0])
-      );
-    } else {
-      $scope.timeline.zoomOut();
-    }
-
-    // perform initial outline expansion.
-    if ($scope.timeline.options.initial_outline_expansion &&
-        $scope.timeline.options.initial_outline_expansion.length === 1) {
-
-      $scope.timeline.expandTo(
-        $scope.timeline.pnum($scope.timeline.options.initial_outline_expansion[0])
-      );
-    }
-
-    // zooming and initial outline expansion have consequences in the
-    // select inputs in the toolbar.
-    $scope.updateToolbar();
-
-    $scope.timeline.getChart().scroll(function() {
-      $scope.timeline.adjustTooltip();
-    });
-
-    jQuery(window).scroll(function() {
-      $scope.timeline.adjustTooltip();
-    });
-  };
-
   $scope.$on('timelines.dataLoaded', function(){
     $scope.$apply();
   });
 
-  angular.element(document).ready(function() {
-    // start timeline
-    $scope.timeline.registerTimelineContainer($scope.getTimelineContainer());
-    TimelineService.loadTimelineData($scope.timeline).then(drawTimeline);
-
-    // Update toolbar values (TODO: Load timeline previously & refactor)
-    // $scope.updateToolbar();
-
-  });
 }]);

app/assets/javascripts/angular/directives/timelines/timeline_directive.js

@@ -0,0 +1,79 @@
+timelinesApp.directive('timeline', function() {
+  return {
+    restrict: 'A',
+    link: function(scope, element, attributes) {
+      updateToolbar = function() {
+        scope.slider.slider('value', scope.timeline.zoomIndex + 1);
+        scope.currentOutlineLevel = Timeline.OUTLINE_LEVELS[scope.timeline.expansionIndex];
+        scope.currentScaleName = Timeline.ZOOM_SCALES[scope.timeline.zoomIndex];
+      };
+
+      completeUI = function() {
+        // construct tree on left-hand-side.
+        scope.timeline.rebuildTree();
+
+        // lift the curtain, paper otherwise doesn't show w/ VML.
+        scope.underConstruction = false;
+        scope.timeline.paper = new Raphael(scope.timeline.paperElement, 640, 480);
+
+        // perform some zooming. if there is a zoom level stored with the
+        // report, zoom to it. otherwise, zoom out. this also constructs
+        // timeline graph.
+        if (scope.timeline.options.zoom_factor &&
+            scope.timeline.options.zoom_factor.length === 1) {
+          scope.timeline.zoom(
+            scope.timeline.pnum(scope.timeline.options.zoom_factor[0])
+          );
+        } else {
+          scope.timeline.zoomOut();
+        }
+
+        // perform initial outline expansion.
+        if (scope.timeline.options.initial_outline_expansion &&
+            scope.timeline.options.initial_outline_expansion.length === 1) {
+
+          scope.timeline.expandTo(
+            scope.timeline.pnum(scope.timeline.options.initial_outline_expansion[0])
+          );
+        }
+
+        // zooming and initial outline expansion have consequences in the
+        // select inputs in the toolbar.
+        updateToolbar();
+
+        scope.timeline.getChart().scroll(function() {
+          scope.timeline.adjustTooltip();
+        });
+
+        jQuery(window).scroll(function() {
+          scope.timeline.adjustTooltip();
+        });
+      };
+
+      drawTimeline = function(timeline){
+        try {
+          window.clearTimeout(timeline.safetyHook);
+
+          if (timeline.isGrouping() && timeline.options.grouping_two_enabled) {
+            timeline.secondLevelGroupingAdjustments();
+          }
+
+          treeNode = timeline.getLefthandTree();
+          if (treeNode.containsPlanningElements() || treeNode.containsProjects()) {
+            timeline.adjustForPlanningElements();
+            completeUI();
+          } else {
+            timeline.warn(this.i18n('label_no_data'), 'warning');
+          }
+        } catch (e) {
+          timeline.die(e);
+        }
+      };
+
+      // start timeline
+      scope.timeline.registerTimelineContainer(element);
+      TimelineService.loadTimelineData(scope.timeline).then(drawTimeline);
+    }
+  };
+});
+

app/views/timelines/_chart_container.html.erb

@@ -1,4 +1,4 @@
- <div ng-class="{timeline: true, 'tl-under-construction': underConstruction}">
+ <div timeline ng-class="{timeline: true, 'tl-under-construction': underConstruction}">
   <div class="tl-left">
     <div class="tl-left-top tl-decoration"></div>
     <div class="tl-left-main">
@@ -12,6 +12,7 @@
             </th>
           </tr>
         </thead>
+
       </table>
 
     </div>