From f2de18508a897ab900ab87133b88a2d5321b17c9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel.odegaard@gmail.com>
Date: Tue, 26 Aug 2014 07:27:43 +0200
Subject: [PATCH] More work on removing modals

---
 src/app/controllers/annotationsEditorCtrl.js |  2 +-
 src/app/controllers/dashboardNavCtrl.js      |  1 -
 src/app/directives/all.js                    |  1 +
 src/app/directives/configModal.js            |  6 --
 src/app/directives/dashEditLink.js           | 60 ++++++++++++++++++++
 src/app/partials/dashboard.html              |  8 +--
 src/app/partials/dashboard_topnav.html       |  2 +-
 7 files changed, 66 insertions(+), 14 deletions(-)
 create mode 100644 src/app/directives/dashEditLink.js

diff --git a/src/app/controllers/annotationsEditorCtrl.js b/src/app/controllers/annotationsEditorCtrl.js
index 13cf4d29087..99acea2c18c 100644
--- a/src/app/controllers/annotationsEditorCtrl.js
+++ b/src/app/controllers/annotationsEditorCtrl.js
@@ -63,7 +63,7 @@ function (angular, app, _) {
   });
 
   module.controller('EditViewCtrl', function($scope) {
-    $scope.editPanelSrc = 'app/partials/dasheditor.html';
+    $scope.editPanelSrc = null;
 
     $scope.onAppEvent('show-edit-panel', function(evt, payload) {
       if (payload.src === $scope.editPanelSrc) {
diff --git a/src/app/controllers/dashboardNavCtrl.js b/src/app/controllers/dashboardNavCtrl.js
index a58a2647945..ce5b9934efd 100644
--- a/src/app/controllers/dashboardNavCtrl.js
+++ b/src/app/controllers/dashboardNavCtrl.js
@@ -23,7 +23,6 @@ function (angular, _, moment, config, store) {
       $scope.onAppEvent('zoom-out', function() {
         $scope.zoom(2);
       });
-
     };
 
     $scope.set_default = function() {
diff --git a/src/app/directives/all.js b/src/app/directives/all.js
index 5236a1a619d..8e3996f03be 100644
--- a/src/app/directives/all.js
+++ b/src/app/directives/all.js
@@ -4,6 +4,7 @@ define([
   './grafanaPanel',
   './grafanaSimplePanel',
   './ngBlur',
+  './dashEditLink',
   './ngModelOnBlur',
   './tip',
   './confirmClick',
diff --git a/src/app/directives/configModal.js b/src/app/directives/configModal.js
index 9e65f6cb07c..b7e579e7026 100644
--- a/src/app/directives/configModal.js
+++ b/src/app/directives/configModal.js
@@ -16,12 +16,6 @@ function (angular, _, $) {
           var id = '#' + partial.replace('.html', '').replace(/[\/|\.|:]/g, '-') + '-' + scope.$id;
 
           elem.bind('click',function() {
-            $timeout(function() {
-              scope.exitFullscreen();
-              scope.emitAppEvent('show-edit-panel', {src: partial});
-            });
-            //return;
-
             if ($(id).length) {
               elem.attr('data-target', id).attr('data-toggle', 'modal');
               scope.$apply(function() { scope.$broadcast('modal-opened'); });
diff --git a/src/app/directives/dashEditLink.js b/src/app/directives/dashEditLink.js
new file mode 100644
index 00000000000..c2e781ba3ae
--- /dev/null
+++ b/src/app/directives/dashEditLink.js
@@ -0,0 +1,60 @@
+define([
+  'angular',
+  'jquery'
+],
+function (angular, $) {
+  'use strict';
+
+  angular
+    .module('grafana.directives')
+    .directive('dashEditorLink', function($timeout) {
+      return {
+        restrict: 'A',
+        link: function(scope, elem, attrs) {
+          var partial = attrs.dashEditorLink;
+
+          elem.bind('click',function() {
+            $timeout(function() {
+              scope.exitFullscreen();
+              scope.emitAppEvent('show-dash-editor', { src: partial, scope: scope });
+            });
+          });
+        }
+      };
+    });
+
+  angular
+    .module('grafana.directives')
+    .directive('dashEditorView', function($compile) {
+      return {
+        restrict: 'A',
+        link: function(scope, elem) {
+          var editorScope;
+          var lastEditor;
+
+
+          scope.onAppEvent('show-dash-editor', function(evt, payload) {
+            if (lastEditor === payload.src) {
+              editorScope.dismiss();
+              return;
+            }
+
+            lastEditor = payload.src;
+            editorScope = payload.scope.$new();
+            editorScope.dismiss = function() {
+              editorScope.$destroy();
+              elem.empty();
+              lastEditor = null;
+            };
+
+            var src = "'" + payload.src + "'";
+            var view = $('<div class="dashboard-edit-view" ng-include="' + src + '"></div>');
+            elem.append(view);
+            $compile(elem.contents())(editorScope);
+          });
+
+        }
+      };
+    });
+
+});
diff --git a/src/app/partials/dashboard.html b/src/app/partials/dashboard.html
index b528c1e1016..e11d5cd85a8 100644
--- a/src/app/partials/dashboard.html
+++ b/src/app/partials/dashboard.html
@@ -8,9 +8,7 @@
 
   <div class="clearfix"></div>
 
-	<div ng-controller="EditViewCtrl">
-		<div class="dashboard-edit-view" ng-if="editPanelSrc" ng-include="editPanelSrc">
-		</div>
+	<div dash-editor-view>
 	</div>
 
 	<div class="main-view-container">
@@ -19,7 +17,7 @@
 				<div class="row-control-inner" style="padding:0px;margin:0px;position:relative;">
 					<div class="row-close" ng-show="row.collapse" data-placement="bottom" >
 						<div class="row-close-buttons">
-							<span class="row-button bgWarning" config-modal="app/partials/roweditor.html" class="pointer">
+							<span class="row-button bgWarning" dash-editor-link="app/partials/roweditor.html" class="pointer">
 								<i bs-tooltip="'Configure row'" data-placement="right" ng-show="row.editable" class="icon-cog pointer"></i>
 							</span>
 							<span class="row-button bgPrimary" ng-click="toggle_row(row)">
@@ -70,7 +68,7 @@
 									</ul>
 								</li>
 								<li>
-									<a config-modal="app/partials/roweditor.html">Row editor</a>
+									<a dash-editor-link="app/partials/roweditor.html">Row editor</a>
 								</li>
 								<li>
 									<a ng-click="delete_row()">Delete row</a>
diff --git a/src/app/partials/dashboard_topnav.html b/src/app/partials/dashboard_topnav.html
index 271b71cf5a4..99e23448219 100644
--- a/src/app/partials/dashboard_topnav.html
+++ b/src/app/partials/dashboard_topnav.html
@@ -62,7 +62,7 @@
 
 				<li class="grafana-menu-home"><a bs-tooltip="'Goto saved default'" data-placement="bottom" href='#/'><i class='icon-home'></i></a></li>
 
-				<li class="grafana-menu-edit" ng-show="dashboard.editable" bs-tooltip="'Configure dashboard'" data-placement="bottom"><a class="link" config-modal="app/partials/dasheditor.html"><i class='icon-cog pointer'></i></a></li>
+				<li class="grafana-menu-edit" ng-show="dashboard.editable" bs-tooltip="'Configure dashboard'" data-placement="bottom"><a class="link" dash-editor-link="app/partials/dasheditor.html"><i class='icon-cog pointer'></i></a></li>
 
 				<li class="grafana-menu-stop-playlist hide">
 					<a class='small' ng-click='stopPlaylist(2)'>