4 * Released under LGPL License.
5 * Copyright (c) 1999-2015 Ephox Corp. All rights reserved
7 * License: http://www.tinymce.com/license
8 * Contributing: http://www.tinymce.com/contributing
11 /*global tinymce:true */
13 tinymce.ThemeManager.add('modern', function(editor) {
14 var self = this, settings = editor.settings, Factory = tinymce.ui.Factory,
15 each = tinymce.each, DOM = tinymce.DOM, Rect = tinymce.geom.Rect, FloatPanel = tinymce.ui.FloatPanel;
19 file: {title: 'File', items: 'newdocument'},
20 edit: {title: 'Edit', items: 'undo redo | cut copy paste pastetext | selectall'},
21 insert: {title: 'Insert', items: '|'},
22 view: {title: 'View', items: 'visualaid |'},
23 format: {title: 'Format', items: 'bold italic underline strikethrough superscript subscript | formats | removeformat'},
24 table: {title: 'Table'},
25 tools: {title: 'Tools'}
28 var defaultToolbar = "undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | " +
29 "bullist numlist outdent indent | link image";
31 function createToolbar(items, size) {
32 var toolbarItems = [], buttonGroup;
38 each(items.split(/[ ,]/), function(item) {
41 function bindSelectorChanged() {
42 var selection = editor.selection;
44 function setActiveItem(name) {
45 return function(state, args) {
46 var nodeName, i = args.parents.length;
49 nodeName = args.parents[i].nodeName;
50 if (nodeName == "OL" || nodeName == "UL") {
55 item.active(state && nodeName == name);
59 if (itemName == "bullist") {
60 selection.selectorChanged('ul > li', setActiveItem("UL"));
63 if (itemName == "numlist") {
64 selection.selectorChanged('ol > li', setActiveItem("OL"));
67 if (item.settings.stateSelector) {
68 selection.selectorChanged(item.settings.stateSelector, function(state) {
73 if (item.settings.disabledStateSelector) {
74 selection.selectorChanged(item.settings.disabledStateSelector, function(state) {
83 if (Factory.has(item)) {
84 item = {type: item, size: size};
85 toolbarItems.push(item);
89 buttonGroup = {type: 'buttongroup', items: []};
90 toolbarItems.push(buttonGroup);
93 if (editor.buttons[item]) {
94 // TODO: Move control creation to some UI class
96 item = editor.buttons[itemName];
98 if (typeof item == "function") {
102 item.type = item.type || 'button';
105 item = Factory.create(item);
106 buttonGroup.items.push(item);
108 if (editor.initialized) {
109 bindSelectorChanged();
111 editor.on('init', bindSelectorChanged);
126 * Creates the toolbars from config and returns a toolbar array.
128 * @param {String} size Optional toolbar item size.
129 * @return {Array} Array with toolbars.
131 function createToolbars(size) {
134 function addToolbar(items) {
136 toolbars.push(createToolbar(items, size));
141 // Convert toolbar array to multiple options
142 if (tinymce.isArray(settings.toolbar)) {
143 // Empty toolbar array is the same as a disabled toolbar
144 if (settings.toolbar.length === 0) {
148 tinymce.each(settings.toolbar, function(toolbar, i) {
149 settings["toolbar" + (i + 1)] = toolbar;
152 delete settings.toolbar;
155 // Generate toolbar<n>
156 for (var i = 1; i < 10; i++) {
157 if (!addToolbar(settings["toolbar" + i])) {
162 // Generate toolbar or default toolbar unless it's disabled
163 if (!toolbars.length && settings.toolbar !== false) {
164 addToolbar(settings.toolbar || defaultToolbar);
167 if (toolbars.length) {
171 classes: "toolbar-grp",
180 * Creates the menu buttons based on config.
182 * @return {Array} Menu buttons array.
184 function createMenuButtons() {
185 var name, menuButtons = [];
187 function createMenuItem(name) {
194 menuItem = editor.menuItems[name];
199 function createMenu(context) {
200 var menuButton, menu, menuItems, isUserDefined, removedMenuItems;
202 removedMenuItems = tinymce.makeMap((settings.removed_menuitems || '').split(/[ ,]/));
206 menu = settings.menu[context];
207 isUserDefined = true;
209 menu = defaultMenus[context];
213 menuButton = {text: menu.title};
216 // Default/user defined items
217 each((menu.items || '').split(/[ ,]/), function(item) {
218 var menuItem = createMenuItem(item);
220 if (menuItem && !removedMenuItems[item]) {
221 menuItems.push(createMenuItem(item));
225 // Added though context
226 if (!isUserDefined) {
227 each(editor.menuItems, function(menuItem) {
228 if (menuItem.context == context) {
229 if (menuItem.separator == 'before') {
230 menuItems.push({text: '|'});
233 if (menuItem.prependToContext) {
234 menuItems.unshift(menuItem);
236 menuItems.push(menuItem);
239 if (menuItem.separator == 'after') {
240 menuItems.push({text: '|'});
246 for (var i = 0; i < menuItems.length; i++) {
247 if (menuItems[i].text == '|') {
248 if (i === 0 || i == menuItems.length - 1) {
249 menuItems.splice(i, 1);
254 menuButton.menu = menuItems;
256 if (!menuButton.menu.length) {
264 var defaultMenuBar = [];
266 for (name in settings.menu) {
267 defaultMenuBar.push(name);
270 for (name in defaultMenus) {
271 defaultMenuBar.push(name);
275 var enabledMenuNames = typeof settings.menubar == "string" ? settings.menubar.split(/[ ,]/) : defaultMenuBar;
276 for (var i = 0; i < enabledMenuNames.length; i++) {
277 var menu = enabledMenuNames[i];
278 menu = createMenu(menu);
281 menuButtons.push(menu);
289 * Adds accessibility shortcut keys to panel.
291 * @param {tinymce.ui.Panel} panel Panel to add focus to.
293 function addAccessibilityKeys(panel) {
294 function focus(type) {
295 var item = panel.find(type)[0];
302 editor.shortcuts.add('Alt+F9', '', function() {
306 editor.shortcuts.add('Alt+F10', '', function() {
310 editor.shortcuts.add('Alt+F11', '', function() {
311 focus('elementpath');
314 panel.on('cancel', function() {
320 * Resizes the editor to the specified width, height.
322 function resizeTo(width, height) {
323 var containerElm, iframeElm, containerSize, iframeSize;
325 function getSize(elm) {
327 width: elm.clientWidth,
328 height: elm.clientHeight
332 containerElm = editor.getContainer();
333 iframeElm = editor.getContentAreaContainer().firstChild;
334 containerSize = getSize(containerElm);
335 iframeSize = getSize(iframeElm);
337 if (width !== null) {
338 width = Math.max(settings.min_width || 100, width);
339 width = Math.min(settings.max_width || 0xFFFF, width);
341 DOM.setStyle(containerElm, 'width', width + (containerSize.width - iframeSize.width));
342 DOM.setStyle(iframeElm, 'width', width);
345 height = Math.max(settings.min_height || 100, height);
346 height = Math.min(settings.max_height || 0xFFFF, height);
347 DOM.setStyle(iframeElm, 'height', height);
349 editor.fire('ResizeEditor');
352 function resizeBy(dw, dh) {
353 var elm = editor.getContentAreaContainer();
354 self.resizeTo(elm.clientWidth + dw, elm.clientHeight + dh);
358 * Handles contextual toolbars.
360 function addContextualToolbars() {
363 function getContextToolbars() {
364 return editor.contextToolbars || [];
367 function getElementRect(elm) {
368 var pos, targetRect, root;
370 pos = tinymce.DOM.getPos(editor.getContentAreaContainer());
371 targetRect = editor.dom.getRect(elm);
372 root = editor.dom.getRoot();
374 // Adjust targetPos for scrolling in the editor
375 if (root.nodeName == 'BODY') {
376 targetRect.x -= root.ownerDocument.documentElement.scrollLeft || root.scrollLeft;
377 targetRect.y -= root.ownerDocument.documentElement.scrollTop || root.scrollTop;
380 targetRect.x += pos.x;
381 targetRect.y += pos.y;
386 function hideAllFloatingPanels() {
387 each(editor.contextToolbars, function(toolbar) {
389 toolbar.panel.hide();
394 function togglePositionClass(panel, relPos, predicate) {
395 relPos = relPos ? relPos.substr(0, 2) : '';
400 }, function(cls, pos) {
401 panel.classes.toggle('arrow-' + cls, predicate(pos, relPos.substr(0, 1)));
407 }, function(cls, pos) {
408 panel.classes.toggle('arrow-' + cls, predicate(pos, relPos.substr(1, 1)));
412 function toClientRect(geomRect) {
418 right: geomRect.x + geomRect.w,
419 bottom: geomRect.y + geomRect.h
423 function userConstrain(x, y, elementRect, contentAreaRect, panelRect) {
424 panelRect = toClientRect({x: x, y: y, w: panelRect.w, h: panelRect.h});
426 if (settings.inline_toolbar_position_handler) {
427 panelRect = settings.inline_toolbar_position_handler({
428 elementRect: toClientRect(elementRect),
429 contentAreaRect: toClientRect(contentAreaRect),
437 function movePanelTo(panel, pos) {
438 panel.moveTo(pos.left, pos.top);
441 function reposition(match) {
442 var relPos, panelRect, elementRect, contentAreaRect, panel, relRect, testPositions, smallElementWidthThreshold;
444 if (editor.removed) {
448 if (!match || !match.toolbar.panel) {
449 hideAllFloatingPanels();
459 panel = match.toolbar.panel;
462 elementRect = getElementRect(match.element);
463 panelRect = tinymce.DOM.getRect(panel.getEl());
464 contentAreaRect = tinymce.DOM.getRect(editor.getContentAreaContainer() || editor.getBody());
465 smallElementWidthThreshold = 25;
467 // We need to use these instead of the rect values since the style
468 // size properites might not be the same as the real size for a table
469 elementRect.w = match.element.clientWidth;
470 elementRect.h = match.element.clientHeight;
472 if (!editor.inline) {
473 contentAreaRect.w = editor.getDoc().documentElement.offsetWidth;
476 // Inflate the elementRect so it doesn't get placed above resize handles
477 if (editor.selection.controlSelection.isResizable(match.element) && elementRect.w < smallElementWidthThreshold) {
478 elementRect = Rect.inflate(elementRect, 0, 8);
481 relPos = Rect.findBestRelativePosition(panelRect, elementRect, contentAreaRect, testPositions);
482 elementRect = Rect.clamp(elementRect, contentAreaRect);
485 relRect = Rect.relativePosition(panelRect, elementRect, relPos);
486 movePanelTo(panel, userConstrain(relRect.x, relRect.y, elementRect, contentAreaRect, panelRect));
488 // Allow overflow below the editor to avoid placing toolbars ontop of tables
489 contentAreaRect.h += panelRect.h;
491 elementRect = Rect.intersect(contentAreaRect, elementRect);
493 relPos = Rect.findBestRelativePosition(panelRect, elementRect, contentAreaRect, [
494 'bc-tc', 'bl-tl', 'br-tr'
498 relRect = Rect.relativePosition(panelRect, elementRect, relPos);
499 movePanelTo(panel, userConstrain(relRect.x, relRect.y, elementRect, contentAreaRect, panelRect));
501 movePanelTo(panel, userConstrain(elementRect.x, elementRect.y, elementRect, contentAreaRect, panelRect));
508 togglePositionClass(panel, relPos, function(pos1, pos2) {
509 return pos1 === pos2;
512 //drawRect(contentAreaRect, 'blue');
513 //drawRect(elementRect, 'red');
514 //drawRect(panelRect, 'green');
517 function repositionHandler() {
519 if (editor.selection) {
520 reposition(findFrontMostMatch(editor.selection.getNode()));
524 tinymce.util.Delay.requestAnimationFrame(execute);
527 function bindScrollEvent() {
528 if (!scrollContainer) {
529 scrollContainer = editor.selection.getScrollContainer() || editor.getWin();
530 tinymce.$(scrollContainer).on('scroll', repositionHandler);
532 editor.on('remove', function() {
533 tinymce.$(scrollContainer).off('scroll');
538 function showContextToolbar(match) {
541 if (match.toolbar.panel) {
542 match.toolbar.panel.show();
549 panel = Factory.create({
552 classes: 'tinymce tinymce-inline arrow',
553 ariaLabel: 'Inline toolbar',
561 items: createToolbar(match.toolbar.items),
562 oncancel: function() {
567 match.toolbar.panel = panel;
568 panel.renderTo(document.body).reflow();
572 function hideAllContextToolbars() {
573 tinymce.each(getContextToolbars(), function(toolbar) {
575 toolbar.panel.hide();
580 function findFrontMostMatch(targetElm) {
581 var i, y, parentsAndSelf, toolbars = getContextToolbars();
583 parentsAndSelf = editor.$(targetElm).parents().add(targetElm);
584 for (i = parentsAndSelf.length - 1; i >= 0; i--) {
585 for (y = toolbars.length - 1; y >= 0; y--) {
586 if (toolbars[y].predicate(parentsAndSelf[i])) {
588 toolbar: toolbars[y],
589 element: parentsAndSelf[i]
598 editor.on('click keyup setContent', function(e) {
599 // Only act on partial inserts
600 if (e.type == 'setcontent' && !e.selection) {
604 // Needs to be delayed to avoid Chrome img focus out bug
605 tinymce.util.Delay.setEditorTimeout(editor, function() {
608 match = findFrontMostMatch(editor.selection.getNode());
610 hideAllContextToolbars();
611 showContextToolbar(match);
613 hideAllContextToolbars();
618 editor.on('blur hide', hideAllContextToolbars);
620 editor.on('ObjectResizeStart', function() {
621 var match = findFrontMostMatch(editor.selection.getNode());
623 if (match && match.toolbar.panel) {
624 match.toolbar.panel.hide();
628 editor.on('nodeChange ResizeEditor ResizeWindow', repositionHandler);
630 editor.on('remove', function() {
631 tinymce.each(getContextToolbars(), function(toolbar) {
633 toolbar.panel.remove();
637 editor.contextToolbars = {};
640 editor.shortcuts.add('ctrl+shift+e > ctrl+shift+p', '', function() {
641 var match = findFrontMostMatch(editor.selection.getNode());
642 if (match && match.toolbar.panel) {
643 match.toolbar.panel.items()[0].focus();
648 function fireSkinLoaded(editor) {
650 if (editor.initialized) {
651 editor.fire('SkinLoaded');
653 editor.on('init', function() {
654 editor.fire('SkinLoaded');
661 * Renders the inline editor UI.
663 * @return {Object} Name/value object with theme data.
665 function renderInlineUI(args) {
666 var panel, inlineToolbarContainer;
668 if (settings.fixed_toolbar_container) {
669 inlineToolbarContainer = DOM.select(settings.fixed_toolbar_container)[0];
672 function reposition() {
673 if (panel && panel.moveRel && panel.visible() && !panel._fixed) {
674 // TODO: This is kind of ugly and doesn't handle multiple scrollable elements
675 var scrollContainer = editor.selection.getScrollContainer(), body = editor.getBody();
676 var deltaX = 0, deltaY = 0;
678 if (scrollContainer) {
679 var bodyPos = DOM.getPos(body), scrollContainerPos = DOM.getPos(scrollContainer);
681 deltaX = Math.max(0, scrollContainerPos.x - bodyPos.x);
682 deltaY = Math.max(0, scrollContainerPos.y - bodyPos.y);
685 panel.fixed(false).moveRel(body, editor.rtl ? ['tr-br', 'br-tr'] : ['tl-bl', 'bl-tl', 'tr-br']).moveBy(deltaX, deltaY);
693 DOM.addClass(editor.getBody(), 'mce-edit-focus');
699 // We require two events as the inline float panel based toolbar does not have autohide=true
702 // All other autohidden float panels will be closed below.
703 FloatPanel.hideAll();
705 DOM.removeClass(editor.getBody(), 'mce-edit-focus');
711 if (!panel.visible()) {
718 // Render a plain panel inside the inlineToolbarContainer if it's defined
719 panel = self.panel = Factory.create({
720 type: inlineToolbarContainer ? 'panel' : 'floatpanel',
722 classes: 'tinymce tinymce-inline',
728 fixed: !!inlineToolbarContainer,
731 settings.menubar === false ? null : {type: 'menubar', border: '0 0 1 0', items: createMenuButtons()},
732 createToolbars(settings.toolbar_items_size)
737 /*if (settings.statusbar !== false) {
738 panel.add({type: 'panel', classes: 'statusbar', layout: 'flow', border: '1 0 0 0', items: [
739 {type: 'elementpath'}
743 editor.fire('BeforeRenderUI');
744 panel.renderTo(inlineToolbarContainer || document.body).reflow();
746 addAccessibilityKeys(panel);
748 addContextualToolbars();
750 editor.on('nodeChange', reposition);
751 editor.on('activate', show);
752 editor.on('deactivate', hide);
754 editor.nodeChanged();
757 settings.content_editable = true;
759 editor.on('focus', function() {
760 // Render only when the CSS file has been loaded
761 if (args.skinUiCss) {
762 tinymce.DOM.styleSheetLoader.load(args.skinUiCss, render, render);
768 editor.on('blur hide', hide);
770 // Remove the panel when the editor is removed
771 editor.on('remove', function() {
779 if (args.skinUiCss) {
780 tinymce.DOM.styleSheetLoader.load(args.skinUiCss, fireSkinLoaded(editor));
787 * Renders the iframe editor UI.
789 * @param {Object} args Details about target element etc.
790 * @return {Object} Name/value object with theme data.
792 function renderIframeUI(args) {
793 var panel, resizeHandleCtrl, startSize;
795 function switchMode() {
797 if (e.mode == 'readonly') {
798 panel.find('*').disabled(true);
800 panel.find('*').disabled(false);
805 if (args.skinUiCss) {
806 tinymce.DOM.styleSheetLoader.load(args.skinUiCss, fireSkinLoaded(editor));
810 panel = self.panel = Factory.create({
814 style: 'visibility: hidden',
818 settings.menubar === false ? null : {type: 'menubar', border: '0 0 1 0', items: createMenuButtons()},
819 createToolbars(settings.toolbar_items_size),
820 {type: 'panel', name: 'iframe', layout: 'stack', classes: 'edit-area', html: '', border: '1 0 0 0'}
824 if (settings.resize !== false) {
826 type: 'resizehandle',
827 direction: settings.resize,
829 onResizeStart: function() {
830 var elm = editor.getContentAreaContainer().firstChild;
833 width: elm.clientWidth,
834 height: elm.clientHeight
838 onResize: function(e) {
839 if (settings.resize == 'both') {
840 resizeTo(startSize.width + e.deltaX, startSize.height + e.deltaY);
842 resizeTo(null, startSize.height + e.deltaY);
848 // Add statusbar if needed
849 if (settings.statusbar !== false) {
850 panel.add({type: 'panel', name: 'statusbar', classes: 'statusbar', layout: 'flow', border: '1 0 0 0', ariaRoot: true, items: [
851 {type: 'elementpath', editor: editor},
856 editor.fire('BeforeRenderUI');
857 editor.on('SwitchMode', switchMode());
858 panel.renderBefore(args.targetNode).reflow();
860 if (settings.readonly) {
861 editor.setMode('readonly');
864 if (settings.width) {
865 tinymce.DOM.setStyle(panel.getEl(), 'width', settings.width);
868 // Remove the panel when the editor is removed
869 editor.on('remove', function() {
874 // Add accesibility shortcuts
875 addAccessibilityKeys(panel);
876 addContextualToolbars();
879 iframeContainer: panel.find('#iframe')[0].getEl(),
880 editorContainer: panel.getEl()
885 * Renders the UI for the theme. This gets called by the editor.
887 * @param {Object} args Details about target element etc.
888 * @return {Object} Theme UI data items.
890 self.renderUI = function(args) {
891 var skin = settings.skin !== false ? settings.skin || 'lightgray' : false;
894 var skinUrl = settings.skin_url;
897 skinUrl = editor.documentBaseURI.toAbsolute(skinUrl);
899 skinUrl = tinymce.baseURL + '/skins/' + skin;
902 // Load special skin for IE7
903 // TODO: Remove this when we drop IE7 support
904 if (tinymce.Env.documentMode <= 7) {
905 args.skinUiCss = skinUrl + '/skin.ie7.min.css';
907 args.skinUiCss = skinUrl + '/skin.min.css';
910 // Load content.min.css or content.inline.min.css
911 editor.contentCSS.push(skinUrl + '/content' + (editor.inline ? '.inline' : '') + '.min.css');
914 // Handle editor setProgressState change
915 editor.on('ProgressState', function(e) {
916 self.throbber = self.throbber || new tinymce.ui.Throbber(self.panel.getEl('body'));
919 self.throbber.show(e.time);
921 self.throbber.hide();
925 if (settings.inline) {
926 return renderInlineUI(args);
929 return renderIframeUI(args);
932 self.resizeTo = resizeTo;
933 self.resizeBy = resizeBy;