Adds support for LTR and RTL toolbar directions

Fixes #33

Author: jbalsas

src/core/selection-region.js

@@ -7,6 +7,8 @@
 
     CKEDITOR.SELECTION_TOP_TO_BOTTOM = 0;
     CKEDITOR.SELECTION_BOTTOM_TO_TOP = 1;
+    CKEDITOR.SELECTION_LEFT_TO_RIGHT = 2;
+    CKEDITOR.SELECTION_RIGHT_TO_LEFT = 3;
 
     /**
      * SelectionRegion utility class which provides metadata about the selection. The metadata may be the start and end

src/ui/yui/src/toolbars/toolbar-add.js

@@ -4,6 +4,13 @@ YUI.add('toolbar-add', function(Y) {
     var Lang = Y.Lang,
         YNode = Y.Node,
 
+        ARROW_BOX_CLASSES = [
+            'alloy-editor-arrow-box-top',
+            'alloy-editor-arrow-box-bottom',
+            'alloy-editor-arrow-box-left',
+            'alloy-editor-arrow-box-right'
+        ],
+
         ToolbarAddTrigger,
 
         /**
@@ -82,15 +89,15 @@ YUI.add('toolbar-add', function(Y) {
 
                 boundingBox = this.get('boundingBox');
 
-                if (this.get('editor').isSelectionEmpty()) {
-                    direction = CKEDITOR.SELECTION_BOTTOM_TO_TOP;
+                if (this._isCurrentLineEmpty()) {
+                    direction = CKEDITOR.SELECTION_LEFT_TO_RIGHT;
                 }
 
-                if (direction === CKEDITOR.SELECTION_TOP_TO_BOTTOM) {
-                    boundingBox.replaceClass('alloy-editor-arrow-box-bottom', 'alloy-editor-arrow-box-top');
-                } else {
-                    boundingBox.replaceClass('alloy-editor-arrow-box-top', 'alloy-editor-arrow-box-bottom');
-                }
+                Y.Array.each(ARROW_BOX_CLASSES, function(item) {
+                    boundingBox.removeClass(item);
+                });
+
+                boundingBox.addClass(ARROW_BOX_CLASSES[direction || 0]);
 
                 visible = this.get('visible');
 

src/ui/yui/src/toolbars/toolbar-base.js

@@ -2,7 +2,9 @@ YUI.add('toolbar-base', function(Y) {
     'use strict';
 
     var Lang = Y.Lang,
-        YArray = Y.Array;
+        YArray = Y.Array,
+
+        EMPTY_LINE_REGEX = /\r?\n/;
 
     function ToolbarBase() {}
 
@@ -66,6 +68,8 @@ YUI.add('toolbar-base', function(Y) {
                 boundingBoxNode,
                 height,
                 transition,
+                x,
+                width,
                 y;
 
             transition = this.get('transition');
@@ -76,18 +80,23 @@ YUI.add('toolbar-base', function(Y) {
             boundingBoxNode = boundingBox.getDOMNode();
 
             height = boundingBoxNode.offsetHeight;
+            width = boundingBoxNode.offsetWidth;
 
             // Change the original points where the Toolbar should be positioned.
             // The X will be the same, but we will extract or add the height of the
             // Toolbar to the Y point.
+            if (direction === CKEDITOR.SELECTION_TOP_TO_BOTTOM || direction === CKEDITOR.SELECTION_BOTTOM_TO_TOP) {
 
-            if (direction === CKEDITOR.SELECTION_TOP_TO_BOTTOM) {
-                y = xy[1] - height;
-            } else {
-                y = xy[1] + height;
+                x = xy[0];
+                y = (direction === CKEDITOR.SELECTION_TOP_TO_BOTTOM) ? (xy[1] - height) : (xy[1] + height);
+
+            } else if (direction === CKEDITOR.SELECTION_LEFT_TO_RIGHT || direction === CKEDITOR.SELECTION_RIGHT_TO_LEFT) {
+
+                x = (direction === CKEDITOR.SELECTION_LEFT_TO_RIGHT) ? (xy[0] - width) : (xy[0] + width);
+                y = xy[1];
             }
 
-            this.set('xy', [xy[0], y]);
+            this.set('xy', [x, y]);
 
             transition.left = xy[0] + 'px';
             transition.top = xy[1] + 'px';
@@ -142,6 +151,21 @@ YUI.add('toolbar-base', function(Y) {
             return 'Button' + buttonName.substring(0, 1).toUpperCase() + buttonName.substring(1);
         },
 
+        /**
+         * Detects if the current line is empty
+         *
+         * @method _isCurrentLineEmpty
+         * @protected
+         * @return {Boolean} True if the current line is empty.
+         */
+        _isCurrentLineEmpty: function() {
+            var currentLine;
+
+            currentLine = this.get('editor').getSelection().getRanges()[0].getCommonAncestor();
+
+            return EMPTY_LINE_REGEX.test(currentLine.getText());
+        },
+
         /**
          * Moves the Toolbar to a point in page coordinates. If transition was specified via the
          * {{#crossLink "ToolbarBase/transition:attribute"}}{{/crossLink}}, the movement will be

src/ui/yui/src/toolbars/toolbar-image.js

@@ -127,7 +127,7 @@ YUI.add('toolbar-image', function(Y) {
                 if (element) {
                     region = Y.DOM.region(element.$);
 
-                    this.showAtPoint(region.left + (region.right - region.left) / 2, region.top);
+                    this.showAtPoint(region.left + (region.right - region.left) / 2, region.top, CKEDITOR.SELECTION_BOTTOM_TO_TOP);
                 }
             },
 

src/ui/yui/src/toolbars/toolbar-position.js

@@ -91,12 +91,16 @@ YUI.add('toolbar-position', function(Y) {
 
             gutter = this.get('gutter');
 
-            left = left - gutter.left - (bbDOMNode.offsetWidth / 2);
+            if (direction === CKEDITOR.SELECTION_TOP_TO_BOTTOM || direction === CKEDITOR.SELECTION_BOTTOM_TO_TOP) {
+
+                left = left - gutter.left - (bbDOMNode.offsetWidth / 2);
+                top = (direction === CKEDITOR.SELECTION_TOP_TO_BOTTOM) ? (top + gutter.top) : (top - bbDOMNode.offsetHeight - gutter.top);
+
+            } else if (direction === CKEDITOR.SELECTION_LEFT_TO_RIGHT || direction === CKEDITOR.SELECTION_RIGHT_TO_LEFT) {
+
+                left = (direction === CKEDITOR.SELECTION_LEFT_TO_RIGHT) ? (left + gutter.left + bbDOMNode.offsetHeight / 2) : (left - 3 * bbDOMNode.offsetHeight / 2 - gutter.left);
+                top = top - gutter.top - (bbDOMNode.offsetHeight / 2);
 
-            if (direction === CKEDITOR.SELECTION_TOP_TO_BOTTOM) {
-                top = top + gutter.top;
-            } else {
-                top = top - bbDOMNode.offsetHeight - gutter.top;
             }
 
             return [left, top];