Merge pull request #15 from seeq12/feature-is-editing

Close #14 Merged pull request

README.md

@@ -36,6 +36,7 @@ and you are ready to go, add the directive to any element you want:
   * __focus-select__: if set to true when element goes to focus, all the text inside will be selected
   * __render-html__: if set to true allow the text passed as input to be compiled and rendered
   * __edit-callback__: a callback that is called wherever the model value is changed
+  * __is-editing__: optional argument that can be used to programatically enable/disable the editor
 
 Note that, __edit-callback__ has two arguments, that you must specify in your template to use them:
  * __text__: the new text inside the element
@@ -120,7 +121,9 @@ grunt build   // build the package for distribution
 1. Create an issue and describe your idea
 2. Fork the project (https://github.com/codekraft-studio/angular-content-editable/fork)
 3. Create your feature branch (`git checkout -b my-new-feature`)
-4. Commit your changes (`git commit -am 'Add some feature'`)
-5. Publish the branch (`git push origin my-new-feature`)
-6. Add some test for your new feature
-7. Create a new Pull Request
+4. Get the development environment set up (`npm install`)
+5. Commit your changes (`git commit -am 'Add some feature'`)
+6. Add some test for your new feature (`npm test`)
+7. Build the directive with the new changes (`grunt build`)
+8. Publish the branch (`git push origin my-new-feature`)
+9. Create a new Pull Request

dist/angular-content-editable.js

@@ -7,9 +7,9 @@ angular.module('angular-content-editable')
   var directive = {
     restrict: 'A',
     require: 'ngModel',
-    scope: { editCallback: '&?' },
+    scope: { editCallback: '&?', isEditing: '=?' },
     link: _link
-  }
+  };
 
   return directive;
 
@@ -37,10 +37,20 @@ angular.module('angular-content-editable')
     // add editable class
     attrs.$addClass(options.editableClass);
 
+    scope.$watch('isEditing', function(newValue, oldValue) {
+      if (newValue !== oldValue) {
+        if (newValue) {
+          originalElement.click();
+        } else {
+          originalElement.blur();
+        }
+      }
+    });
+
     // render always with model value
     ngModel.$render = function() {
       elem.html( ngModel.$modelValue || elem.html() );
-    }
+    };
 
     // handle click on element
     function onClick(e) {
@@ -53,9 +63,12 @@ angular.module('angular-content-editable')
     // check some option extra
     // conditions during focus
     function onFocus(e) {
-
-      scope.$apply(function() {
-
+
+      // evalAsync in case a digest is already in progress (e.g. changing isEditing to true)
+      scope.$evalAsync(function() {
+
+        scope.isEditing = true;
+
         // turn on the flag
         noEscape = true;
 
@@ -80,12 +93,14 @@ angular.module('angular-content-editable')
     }
 
     function onBlur(e) {
-      
+
       scope.$apply(function() {
-        
+
         // the text
         var html;
 
+        scope.isEditing = false;
+
         // remove active class when editing is over
         attrs.$removeClass('active');
 
@@ -113,7 +128,7 @@ angular.module('angular-content-editable')
           * when a controller wants to
           * change the view value
           */
-          ngModel.$setViewValue(html)
+          ngModel.$setViewValue(html);
 
           // if user passed a variable
           // and is a function
@@ -195,7 +210,7 @@ angular.module('angular-content-editable')
 
   }
 
-}])
+}]);
 
 angular.module('angular-content-editable')
 

src/angular-content-editable.directive.js

@@ -5,9 +5,9 @@ angular.module('angular-content-editable')
   var directive = {
     restrict: 'A',
     require: 'ngModel',
-    scope: { editCallback: '&?' },
+    scope: { editCallback: '&?', isEditing: '=?' },
     link: _link
-  }
+  };
 
   return directive;
 
@@ -35,10 +35,20 @@ angular.module('angular-content-editable')
     // add editable class
     attrs.$addClass(options.editableClass);
 
+    scope.$watch('isEditing', function(newValue, oldValue) {
+      if (newValue !== oldValue) {
+        if (newValue) {
+          originalElement.click();
+        } else {
+          originalElement.blur();
+        }
+      }
+    });
+
     // render always with model value
     ngModel.$render = function() {
       elem.html( ngModel.$modelValue || elem.html() );
-    }
+    };
 
     // handle click on element
     function onClick(e) {
@@ -51,9 +61,12 @@ angular.module('angular-content-editable')
     // check some option extra
     // conditions during focus
     function onFocus(e) {
-
-      scope.$apply(function() {
-
+
+      // evalAsync in case a digest is already in progress (e.g. changing isEditing to true)
+      scope.$evalAsync(function() {
+
+        scope.isEditing = true;
+
         // turn on the flag
         noEscape = true;
 
@@ -78,12 +91,14 @@ angular.module('angular-content-editable')
     }
 
     function onBlur(e) {
-      
+
       scope.$apply(function() {
-        
+
         // the text
         var html;
 
+        scope.isEditing = false;
+
         // remove active class when editing is over
         attrs.$removeClass('active');
 
@@ -111,7 +126,7 @@ angular.module('angular-content-editable')
           * when a controller wants to
           * change the view value
           */
-          ngModel.$setViewValue(html)
+          ngModel.$setViewValue(html);
 
           // if user passed a variable
           // and is a function
@@ -193,4 +208,4 @@ angular.module('angular-content-editable')
 
   }
 
-})
+});

test/angular-content-editable.directive.test.js

@@ -18,26 +18,38 @@ describe("Angular Content Editable: Directive", function () {
     scope = $rootScope.$new();
     scope.myModel = 'Text to be modified.';
     scope.onEdit = jasmine.createSpy('onEdit');
-    element = $compile('<h1 ng-model="myModel" edit-callback="onEdit(text, elem)" content-editable></h1>')(scope);
+    scope.isEditing = false;
+    element = angular.element('<h1 ng-model="myModel" edit-callback="onEdit(\'extraArg\', text, elem)" is-editing="isEditing" content-editable></h1>');
+    $compile(element)(scope);
     scope.$digest();
   });
 
   it('should init the viewValue with ngModel', function() {
     expect(element.html()).toContain("Text to be modified.");
   });
 
-  it("should set contenteditable on click", function () {
+  it('should set contenteditable on click', function () {
+    expect(element.attr('contenteditable')).toBeUndefined();
     element.triggerHandler('click');
     scope.$digest();
     expect(element.attr('contenteditable')).toBe('true');
   });
 
-  it("should fire a edit callback", function () {
+  it('should fire an edit callback with the correct arguments', function () {
     element.triggerHandler('click');
     element.html('Some random text.');
     element.triggerHandler('blur');
     scope.$digest();
-    expect(scope.onEdit).toHaveBeenCalled();
+    expect(scope.onEdit).toHaveBeenCalledWith('extraArg', 'Some random text.', element);
   });
 
+  it('should enable editing programatically using isEditing', function () {
+    expect(element.attr('contenteditable')).toBeUndefined();
+    scope.isEditing = true;
+    scope.$digest();
+    expect(element.attr('contenteditable')).toBe('true');
+    element.triggerHandler('blur');
+    scope.$digest();
+    expect(scope.isEditing).toBe(false);
+  });
 });