Move edit buttons

3 files changed, 74 insertions, 22 deletions

diff --git a/docs/examples/assets/css/style.css b/docs/examples/assets/css/style.css
index 10ecda9..982398b 100644
--- a/docs/examples/assets/css/style.css
+++ b/docs/examples/assets/css/style.css
@@ -9,11 +9,7 @@ form div {
 }
 
 h2 {
-    padding: 0 0 0 55px;
-    margin: 20px auto 5px auto;
     font-size: 14px;
-    text-align: left;
-    clear: both;
 }
 
 p, li, dt, dd, td, th, div {
@@ -36,6 +32,7 @@ p, li, dt, dd, td, th, div {
     height:200px;
     width: 850px;
     margin: 0 auto 0 auto;
+    clear: both;
 }
 
 .tickLabel {
@@ -90,3 +87,25 @@ input[type=text] {
 #calroot {
     z-index: 2;
 }
+
+.chart-header {
+    width: 790px;
+    padding: 5px 0 5px 0;
+    margin: 20px auto 0 auto;
+    position: relative;
+    left: 25px;
+}
+
+.chart-header:AFTER {
+    content: ''
+}
+
+.chart-container h2{
+    float: left;
+    margin: 0;
+}
+
+.chart-container .chart-controls{
+    float: right;
+    margin: 0;
+}
diff --git a/docs/examples/index.html b/docs/examples/index.html
index 6acf2b8..2bec8aa 100644
--- a/docs/examples/index.html
+++ b/docs/examples/index.html
@@ -61,7 +61,13 @@
         </div>
         <div class="tabbed-chart-interface"></div>
         <div class="chart-container">
-            <h2 class="title"></h2>
+            <div class="chart-header">
+                <h2 class="title"></h2>
+                <div class="chart-controls">
+                    <input type="button" name="chart_edit" value="edit">
+                    <input type="button" name="chart_delete" value="delete">
+                </div>
+            </div>
             <div class="error"></div>
             <div class="chart"></div>
             <div class="graph-legend"></div>
diff --git a/jarmon/jarmon.js b/jarmon/jarmon.js
index 680d287..0ba2e32 100644
--- a/jarmon/jarmon.js
+++ b/jarmon/jarmon.js
@@ -415,15 +415,6 @@ jarmon.Chart = function(template, recipe,  downloader) {
         self.draw();
     });
 
-    $('.graph-legend input[name=chart_edit]', this.template[0]).live(
-        'click',
-        {self: this},
-        function(e) {
-            var self = e.data.self;
-            new jarmon.ChartEditor($(this).closest('.graph-legend'), self).draw();
-        }
-    );
-
     this.options['yaxis']['ticks'] = function(axis) {
         /*
          * Choose a suitable SI multiplier based on the min and max values from
@@ -655,9 +646,6 @@ jarmon.Chart.prototype.draw = function() {
                             }
                         }
                     ).remove();
-                    legend.append(
-                        $('<input/>', {type: 'button', value: 'edit', name: 'chart_edit'})
-                    );
                     legend.append($('<div />').css('clear', 'both'));
                     self.template.find('.legend').remove();
 
@@ -1077,6 +1065,14 @@ jarmon.TabbedInterface = function($tpl, recipe) {
             self.$tabBar.data("tabs").click(this.value);
         }
     );
+
+    $('input[name=add_new_chart]', $tpl[0]).live(
+        'click',
+        {self: this},
+        function(e) {
+            console.log(e);
+        }
+    );
 };
 
 jarmon.TabbedInterface.prototype.newTab = function(tabName) {
@@ -1084,9 +1080,20 @@ jarmon.TabbedInterface.prototype.newTab = function(tabName) {
     $('<li/>').append(
         $('<a/>', {href: ['#', tabName].join('')}).text(tabName)
     ).appendTo(this.$tabBar);
-
+    var $placeholder = $('<div/>');
     // Add tab panel
-    return $('<div/>').appendTo(this.$tabPanels);
+    $('<div/>').append(
+        $placeholder,
+        $('<div/>').append(
+            $('<input/>', {
+                type: 'button',
+                value: 'Add new chart',
+                name: 'add_new_chart'
+            })
+        )
+    ).appendTo(this.$tabPanels);
+
+    return $placeholder;
 };
 
 jarmon.TabbedInterface.prototype.setup = function() {
@@ -1117,11 +1124,31 @@ jarmon.buildTabbedChartUi = function ($chartTemplate, chartRecipes,
     var charts = jQuery.map(
         ti.placeholders,
         function(el, i) {
-            return new jarmon.Chart(
-                $chartTemplate.clone().replaceAll(el[1]),
+            /*
+            $('.graph-legend input[name=chart_edit]', this.template[0]).live(
+                'click',
+                {self: this},
+                function(e) {
+
+                }
+            );
+            */
+            var chart = new jarmon.Chart(
+                $chartTemplate.clone().appendTo(el[1]),
                 chartRecipes[el[0]],
                 serialDownloader
-            )
+            );
+
+            $('input[name=chart_edit]', el[1][0]).live(
+                'click',
+                {chart: chart},
+                function(e) {
+                    var chart = e.data.chart;
+                    new jarmon.ChartEditor($(this).closest('.chart-container').find('.graph-legend'), chart).draw();
+                }
+            );
+
+            return chart;
         }
     );