});
}
+ 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;
}
testPositions = [
- 'tc-bc', 'bc-tc',
+ 'bc-tc', 'tc-bc',
'tl-bl', 'bl-tl',
'tr-br', 'br-tr'
];
}
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');
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',
autofix: true,
fixed: true,
border: 1,
- items: createToolbar(match.toolbar.items)
+ items: createToolbar(match.toolbar.items),
+ oncancel: function() {
+ editor.focus();
+ }
});
match.toolbar.panel = panel;
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) {