Remove toolbar rendering from timelines ui.js

app/assets/javascripts/timelines.js

@@ -330,10 +330,9 @@ jQuery.extend(Timeline, {
     // setup UI.
 
     this.uiRoot = uiRoot;
-    this.setupUI();
+    this.setupChart();
 
     try {
-
       // prerequisites (3rd party libs)
       this.checkPrerequisites();
       this.modalHelper = modalHelperInstance;

app/assets/javascripts/timelines/ui.js

@@ -416,175 +416,11 @@ jQuery.extend(Timeline, {
       return value;
     }
   },
-
+  updateToolbar: function() {
-  setupUI: function() {
+    // TODO call from inside scope
-
+    // slider.slider('value', timeline.zoomIndex + 1);
-    this.setupToolbar();
+    // outlines[0].selectedIndex = timeline.expansionIndex;
-    this.setupChart();
+    return;
-  },
-  setupToolbar: function() {
-    // ╭───────────────────────────────────────────────────────╮
-    // │  Builds the following dom and adds it to root:        │
-    // │                                                       │
-    // │  <div class="tl-toolbar"> ... </div>                  │
-    // ╰───────────────────────────────────────────────────────╯
-    var toolbar = jQuery('<div class="tl-toolbar"></div>');
-    var timeline = this;
-    var i, c, containers = [
-      0,
-      1,
-      0, 100, 0, 0, // zooming
-      1,
-      0, 0          // outline
-    ];
-    var icon = '<a href="javascript://" title="%t" class="%c"/>';
-
-    for (i = 0; i < containers.length; i++) {
-      c = jQuery('<div class="tl-toolbar-container"></div>');
-      if (containers[i] !== 0) {
-        c.css({
-          'width': containers[i] + 'px',
-          'height': '20px'
-        });
-      }
-      containers[i] = c;
-      toolbar.append(c);
-    }
-    this.getUiRoot().append(toolbar);
-
-    var currentContainer = 0;
-
-    if (Timeline.USE_MODALS) {
-
-      // ╭───────────────────────────────────────────────────────╮
-      // │  Add element                                          │
-      // ╰───────────────────────────────────────────────────────╯
-
-      containers[currentContainer++].append(
-        jQuery(icon
-          .replace(/%t/, timeline.i18n('timelines.new_work_package'))
-          .replace(/%c/, 'icon icon-add')
-        ).click(function(e) {
-          e.stopPropagation();
-          timeline.addPlanningElement();
-          return false;
-        }));
-
-      // ╭───────────────────────────────────────────────────────╮
-      // │  Spacer                                               │
-      // ╰───────────────────────────────────────────────────────╯
-
-      containers[currentContainer++].css({
-        'background-color': '#000000'
-      });
-
-    } else {
-      currentContainer += 2;
-    }
-
-    // ╭───────────────────────────────────────────────────────╮
-    // │  Zooming                                              │
-    // ╰───────────────────────────────────────────────────────╯
-
-    // drop-down
-    var form = jQuery('<form></form>');
-    var zooms = jQuery('<select name="zooms"></select>');
-    for (i = 0; i < Timeline.ZOOM_SCALES.length; i++) {
-      zooms.append(jQuery(
-            '<option>' +
-            timeline.i18n(Timeline.ZOOM_CONFIGURATIONS[Timeline.ZOOM_SCALES[i]].name) +
-            '</option>'));
-    }
-    form.append(zooms);
-    containers[currentContainer + 3].append(form);
-
-    // slider
-    var slider = jQuery('<div></div>').slider({
-      min: 1,
-      max: Timeline.ZOOM_SCALES.length,
-      range: 'min',
-      value: zooms[0].selectedIndex + 1,
-      slide: function(event, ui) {
-        zooms[0].selectedIndex = ui.value - 1;
-      },
-      change: function(event, ui) {
-        zooms[0].selectedIndex = ui.value - 1;
-        timeline.zoom(ui.value - 1);
-      }
-    }).css({
-      // top right bottom left
-      'margin': '4px 6px 3px'
-    });
-    containers[currentContainer + 1].append(slider);
-    zooms.change(function() {
-      slider.slider('value', this.selectedIndex + 1);
-    });
-
-    // zoom out
-    containers[currentContainer].append(
-      jQuery(icon
-        .replace(/%t/, timeline.i18n('timelines.zoom.out'))
-        .replace(/%c/, 'icon tl-icon-zoomout')
-      ).click(function() {
-        slider.slider('value', slider.slider('value') - 1);
-      }));
-
-    // zoom in
-    containers[currentContainer + 2].append(
-      jQuery(icon
-        .replace(/%t/, timeline.i18n('timelines.zoom.in'))
-        .replace(/%c/, 'icon tl-icon-zoomin')
-      ).click(function() {
-        slider.slider('value', slider.slider('value') + 1);
-      }));
-
-    currentContainer += 4;
-
-    // ╭───────────────────────────────────────────────────────╮
-    // │  Spacer                                               │
-    // ╰───────────────────────────────────────────────────────╯
-
-    containers[currentContainer++].css({
-      'background-color': '#000000'
-    });
-
-    // ╭───────────────────────────────────────────────────────╮
-    // │  Outline                                              │
-    // ╰───────────────────────────────────────────────────────╯
-
-    // drop-down
-    // TODO this is very similar to the way the zoom dropdown is
-    // assembled. Refactor to avoid code duplication!
-    form = jQuery('<form></form>');
-    var outlines = jQuery('<select name="outlines"></select>');
-    for (i = 0; i < Timeline.OUTLINE_LEVELS.length; i++) {
-      outlines.append(jQuery(
-            '<option>' +
-            timeline.i18n(Timeline.OUTLINE_CONFIGURATIONS[Timeline.OUTLINE_LEVELS[i]].name) +
-            '</option>'));
-    }
-    form.append(outlines);
-    containers[currentContainer + 1].append(form);
-
-    outlines.change(function() {
-      timeline.expandTo(this.selectedIndex);
-    });
-
-    // perform outline action again (icon mostly a divider from zooms)
-    containers[currentContainer].append(
-      jQuery(icon
-        .replace(/%t/, timeline.i18n('timelines.outline'))
-        .replace(/%c/, 'icon tl-icon-outline')
-      ).click(function() {
-        timeline.expandTo(outlines[0].selectedIndex);
-      }));
-
-    currentContainer += 2;
-
-    this.updateToolbar = function() {
-      slider.slider('value', timeline.zoomIndex + 1);
-      outlines[0].selectedIndex = timeline.expansionIndex;
-    };
   },
   setupChart: function() {