WordPress 4.5.1-scripts

[autoinstalls/wordpress.git] / wp-includes / js / tinymce / themes / modern / theme.js

diff --git a/wp-includes/js/tinymce/themes/modern/theme.js b/wp-includes/js/tinymce/themes/modern/theme.js
index adfeb271e360ccc6feb3dbae1a17965db1d8fe2c..ab20a8a36c9a42785be331039cbe2e329a1ef9ff 100644 (file)
--- a/wp-includes/js/tinymce/themes/modern/theme.js
+++ b/wp-includes/js/tinymce/themes/modern/theme.js
@@ -391,6 +391,53 @@ tinymce.ThemeManager.add('modern', function(editor) {
                        });
                }
 
+               function togglePositionClass(panel, relPos, predicate) {
+                       relPos = relPos ? relPos.substr(0, 2) : '';
+
+                       each({
+                               t: 'down',
+                               b: 'up'
+                       }, function(cls, pos) {
+                               panel.classes.toggle('arrow-' + cls, predicate(pos, relPos.substr(0, 1)));
+                       });
+
+                       each({
+                               l: 'left',
+                               r: 'right'
+                       }, function(cls, pos) {
+                               panel.classes.toggle('arrow-' + cls, predicate(pos, relPos.substr(1, 1)));
+                       });
+               }
+
+               function toClientRect(geomRect) {
+                       return {
+                               left: geomRect.x,
+                               top: geomRect.y,
+                               width: geomRect.w,
+                               height: geomRect.h,
+                               right: geomRect.x + geomRect.w,
+                               bottom: geomRect.y + geomRect.h
+                       };
+               }
+
+               function userConstrain(x, y, elementRect, contentAreaRect, panelRect) {
+                               panelRect = toClientRect({x: x, y: y, w: panelRect.w, h: panelRect.h});
+
+                               if (settings.inline_toolbar_position_handler) {
+                                       panelRect = settings.inline_toolbar_position_handler({
+                                               elementRect: toClientRect(elementRect),
+                                               contentAreaRect: toClientRect(contentAreaRect),
+                                               panelRect: panelRect
+                                       });
+                               }
+
+                               return panelRect;
+               }
+
+               function movePanelTo(panel, pos) {
+                       panel.moveTo(pos.left, pos.top);
+               }
+
                function reposition(match) {
                        var relPos, panelRect, elementRect, contentAreaRect, panel, relRect, testPositions;
 
@@ -404,7 +451,7 @@ tinymce.ThemeManager.add('modern', function(editor) {
                        }
 
                        testPositions = [
-                               'tc-bc', 'bc-tc',
+                               'bc-tc', 'tc-bc',
                                'tl-bl', 'bl-tl',
                                'tr-br', 'br-tr'
                        ];
@@ -431,39 +478,36 @@ tinymce.ThemeManager.add('modern', function(editor) {
                        }
 
                        relPos = Rect.findBestRelativePosition(panelRect, elementRect, contentAreaRect, testPositions);
+                       elementRect = Rect.clamp(elementRect, contentAreaRect);
 
                        if (relPos) {
-                               each(testPositions.concat('inside'), function(pos) {
-                                       panel.classes.toggle('tinymce-inline-' + pos, pos == relPos);
-                               });
-
                                relRect = Rect.relativePosition(panelRect, elementRect, relPos);
-                               panel.moveTo(relRect.x, relRect.y);
+                               movePanelTo(panel, userConstrain(relRect.x, relRect.y, elementRect, contentAreaRect, panelRect));
                        } else {
-                               each(testPositions, function(pos) {
-                                       panel.classes.toggle('tinymce-inline-' + pos, false);
-                               });
-
-                               panel.classes.toggle('tinymce-inline-inside', true);
+                               // Allow overflow below the editor to avoid placing toolbars ontop of tables
+                               contentAreaRect.h += 40;
 
                                elementRect = Rect.intersect(contentAreaRect, elementRect);
-
                                if (elementRect) {
                                        relPos = Rect.findBestRelativePosition(panelRect, elementRect, contentAreaRect, [
-                                               'tc-tc', 'tl-tl', 'tr-tr'
+                                               'bc-tc', 'bl-tl', 'br-tr'
                                        ]);
 
                                        if (relPos) {
                                                relRect = Rect.relativePosition(panelRect, elementRect, relPos);
-                                               panel.moveTo(relRect.x, relRect.y);
+                                               movePanelTo(panel, userConstrain(relRect.x, relRect.y, elementRect, contentAreaRect, panelRect));
                                        } else {
-                                               panel.moveTo(elementRect.x, elementRect.y);
+                                               movePanelTo(panel, userConstrain(elementRect.x, elementRect.y, elementRect, contentAreaRect, panelRect));
                                        }
                                } else {
                                        panel.hide();
                                }
                        }
 
+                       togglePositionClass(panel, relPos, function(pos1, pos2) {
+                               return (!elementRect || elementRect.w > 40) && pos1 === pos2;
+                       });
+
                        //drawRect(contentAreaRect, 'blue');
                        //drawRect(elementRect, 'red');
                        //drawRect(panelRect, 'green');
@@ -503,8 +547,9 @@ tinymce.ThemeManager.add('modern', function(editor) {
 
                        panel = Factory.create({
                                type: 'floatpanel',
-                               role: 'application',
-                               classes: 'tinymce tinymce-inline',
+                               role: 'dialog',
+                               classes: 'tinymce tinymce-inline arrow',
+                               ariaLabel: 'Inline toolbar',
                                layout: 'flex',
                                direction: 'column',
                                align: 'stretch',
@@ -512,7 +557,10 @@ tinymce.ThemeManager.add('modern', function(editor) {
                                autofix: true,
                                fixed: true,
                                border: 1,
-                               items: createToolbar(match.toolbar.items)
+                               items: createToolbar(match.toolbar.items),
+                               oncancel: function() {
+                                       editor.focus();
+                               }
                        });
 
                        match.toolbar.panel = panel;
@@ -587,6 +635,13 @@ tinymce.ThemeManager.add('modern', function(editor) {
 
                        editor.contextToolbars = {};
                });
+
+               editor.shortcuts.add('ctrl+shift+e > ctrl+shift+p', '', function() {
+                       var match = findFrontMostMatch(editor.selection.getNode());
+                       if (match && match.toolbar.panel) {
+                               match.toolbar.panel.items()[0].focus();
+                       }
+               });
        }
 
        function fireSkinLoaded(editor) {