code mirror works in slideout, also allow for two-way binding and can…

… set various codemirror options in element
hawtio · May 2, 2013 · 197e818 · 197e818
1 parent 30884a1
commit 197e818
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 39 deletions.
diff --git a/hawtio-web/src/main/webapp/app/ui/html/test.html b/hawtio-web/src/main/webapp/app/ui/html/test.html
@@ -37,8 +37,8 @@
   <div>
     Slideout
     <div class="row-fluid">
-      <button class="btn" ng-click="showSlideoutRight = !showSlideoutRight">Show Slideout Right</button>
       <button class="btn" ng-click="showSlideoutLeft = !showSlideoutLeft">Show Slideout Left</button>
+      <button class="btn" ng-click="showSlideoutRight = !showSlideoutRight">Show Slideout Right</button>
 
       <div hawtio-slideout="showSlideoutRight" title="foobar mcgee">
         <div class="dialog-body">
@@ -85,7 +85,6 @@
 
       <div hawtio-slideout="showSlideoutLeft" direction="left" title="I like pastry">
         <div class="dialog-body">
-          <div>Bollocks</div>
           <div hawtio-editor="someText" mode="javascript"></div>
         </div>
       </div>
@@ -103,10 +102,18 @@
 
   <div>
     CodeMirror
+
+    Instance 1
     <div class="row-fluid">
       <div hawtio-editor="someText" mode="javascript"></div>
       <div>Text : {{someText}}</div>
     </div>
+
+    Instance 2 (readonly)
+    <div class="row-fluid">
+      <div hawtio-editor="someText" read-only="true" mode="javascript"></div>
+      <div>Text : {{someText}}</div>
+    </div>
   </div>
 
 

diff --git a/hawtio-web/src/main/webapp/app/ui/js/editorDirective.ts b/hawtio-web/src/main/webapp/app/ui/js/editorDirective.ts
@@ -9,35 +9,72 @@ module UI {
 
     public scope = {
       text: '=hawtioEditor',
-      mode: '@',
       name: '@',
-      readonly: '@',
-      id: '@'
     };
 
     public controller = ($scope, $element, $attrs) => {
 
       $scope.codeMirror = null;
+      $scope.doc = null;
       $scope.options = [];
 
       observe($scope, $attrs, 'name', 'editor');
-      observe($scope, $attrs, 'mode', 'text');
-      observe($scope, $attrs, 'readonly', 'false');
 
       $scope.applyOptions = () => {
         if ($scope.codeMirror) {
           $scope.options.each(function(option) {
+            console.log("Applying option", option.key, "to value", option['value']);
             $scope.codeMirror.setOption(option.key, option['value']);
           });
           $scope.options = [];
         }
-      }
+      };
+
+      $scope.$watch('doc', () => {
+        if ($scope.doc) {
+          $scope.codeMirror.on('change', function(changeObj) {
+            var phase = $scope.$parent.$$phase;
+            if (!phase) {
+              $scope.text = $scope.doc.getValue();
+              Core.$applyNowOrLater($scope);
+            }
+          });
+        }
+      });
+
+      $scope.$watch('codeMirror', () => {
+        if ($scope.codeMirror) {
+          $scope.doc = $scope.codeMirror.getDoc();
+        }
+      });
+
+      $scope.$watch('text', function() {
+        if ($scope.codeMirror && $scope.doc) {
+          if (!$scope.codeMirror.hasFocus()) {
+            $scope.doc.setValue($scope.text);
+          }
+        }
+      });
 
     };
 
     public link = ($scope, $element, $attrs) => {
 
-      $scope.$watch('options.length', $scope.applyOptions);
+      console.log("$attrs", $attrs);
+
+      var config = Object.extended($attrs).clone();
+
+      delete config['$$element']
+      delete config['$attr'];
+      delete config['class'];
+      delete config['hawtioEditor'];
+
+      angular.forEach(config, function(value, key) {
+        $scope.options.push({
+          key: key,
+          'value': value
+        });
+      });
 
       $scope.$watch('text', function() {
         if (!$scope.codeMirror) {
@@ -49,36 +86,10 @@ module UI {
           options = CodeEditor.createEditorSettings(options);
           $scope.codeMirror = CodeMirror.fromTextArea($element.find('textarea').get(0), options);
           $scope.applyOptions();
-          $scope.doc = $scope.codeMirror.getDoc();
-          $scope.codeMirror.on('change', function(changeObj) {
-            $scope.text = $scope.doc.getValue();
-            $scope.$apply();
-          });
-
-          setTimeout(function() {
-            $scope.codeEditor.refresh();
-          }, 10);
-
         }
       });
 
-      $scope.$watch('mode', function() {
-        if ($scope.mode) {
-          $scope.options.push({
-            key: 'mode',
-            'value': $scope.mode
-          });
-        }
-      });
-
-      $scope.$watch('readonly', function() {
-        $scope.options.push({
-          key: 'readonly',
-          'value': $scope.readonly
-        });
-      });
     };
 
-
   }
 }
diff --git a/hawtio-web/src/main/webapp/app/ui/js/slideoutDirective.ts b/hawtio-web/src/main/webapp/app/ui/js/slideoutDirective.ts
@@ -32,10 +32,8 @@ module UI {
 
       $scope.$watch('show', function() {
         if ($scope.show) {
-          setTimeout(function() {
-            $scope.body = $('.slideout-body');
-            $scope.body.html($compile($scope.clone.html())($scope.$parent));
-          }, 50);
+          $scope.body = $element.find('.slideout-body');
+          $scope.body.html($compile($scope.clone.html())($scope.$parent));
         }
       });
     };