Merge d9b2889 into d258be0

app/scripts/directives/sf-aloha-format-generic.js

@@ -34,6 +34,25 @@ angular.module('authoringEnvironmentApp').directive('sfAlohaFormatGeneric', [
                 element.attr('disabled', !supported || !enabled);
 
                 element.bind('click', function () {
+                    // this block sets the Aloha.activeEditable
+                    // to the editable of the current Aloha.Selection
+                    // needed due to a bug with the formatBlock function
+                    var selEditableId = $(Aloha.Selection
+                        .rangeObject.limitObject)[0].id;
+                    for (var i = 0; i < Aloha.editables.length; i++) {
+                        var editable = Aloha.editables[i];
+                        if (selEditableId === editable.obj[0].id) {
+                            Aloha.activeEditable = Aloha.editables[i];
+                        }
+                    }
+
+                    // for some reason execCommand does not trigger 
+                    // a change event (ff browser only).  We need this 
+                    // to fire to enable the article save button
+                    Aloha.trigger('aloha-smart-content-changed', {
+                        'editable': Aloha.activeEditable
+                    });
+
                     Aloha.execCommand(scope.alohaElement, false, '');
                     element.toggleClass(
                         'active',

test/spec/directives/sf-aloha-format-generic.js

@@ -0,0 +1,75 @@
+'use strict';
+
+/**
+* Module with tests for the droppedImage directive.
+*
+* @module droppedImage directive tests
+*/
+
+describe('Directive: sfAlohaFormatGeneric', function () {
+    var isoScope,
+        scope,
+        element,
+        oldAloha,
+        $rootScope;
+
+    beforeEach(module('authoringEnvironmentApp'));
+
+    beforeEach(inject(function (_$rootScope_, $compile) {
+        var html;
+
+        html = [
+            '<button sf-aloha-format-generic ',
+            '   data-button-name="{{name}}" ',
+            '   data-aloha-element="{{element}}">',
+            '</button> ',
+        ].join('');
+
+        $rootScope = _$rootScope_;
+        scope = $rootScope.$new();
+        scope.name = 'Italics';
+        scope.element = 'Italics';
+        element = $compile(html)(scope);
+        scope.$digest();
+
+        isoScope = element.isolateScope();
+
+        oldAloha = Aloha;
+        Aloha.execCommand = function () { return true; };
+        Aloha.trigger = function () { return true; };
+        Aloha.Selection = {
+            rangeObject: {
+                limitObject: [
+                    {
+                        id: 'test-id'
+                    }
+                ]
+            }
+        };
+    }));
+
+    afterEach(function () {
+        Aloha = oldAloha;
+    });
+
+    it('called the correct Aloha.execCommand', function () {
+        var execCommandSpy = spyOn(Aloha, 'execCommand').andReturn(true);
+
+        isoScope.alohaElement = 'Bold';
+        element.click();
+
+        expect(execCommandSpy).toHaveBeenCalledWith(
+            'Bold', false, '');
+    });
+
+    it('triggers aloha-smart-content-changed Aloha.execCommand', function () {
+        var execCommandSpy = spyOn(Aloha, 'execCommand').andReturn(true);
+        var triggerSpy = spyOn(Aloha, 'trigger').andReturn(true);
+
+        isoScope.alohaElement = 'something-that-is-not-bold';
+        element.click();
+
+        expect(triggerSpy).toHaveBeenCalled();
+    });
+});
+