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;
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());
466 // We need to use these instead of the rect values since the style
467 // size properites might not be the same as the real size for a table
468 elementRect.w = match.element.clientWidth;
469 elementRect.h = match.element.clientHeight;
471 if (!editor.inline) {
472 contentAreaRect.w = editor.getDoc().documentElement.offsetWidth;
475 // Inflate the elementRect so it doesn't get placed above resize handles
476 if (editor.selection.controlSelection.isResizable(match.element)) {
477 elementRect = Rect.inflate(elementRect, 0, 8);
480 relPos = Rect.findBestRelativePosition(panelRect, elementRect, contentAreaRect, testPositions);
481 elementRect = Rect.clamp(elementRect, contentAreaRect);
484 relRect = Rect.relativePosition(panelRect, elementRect, relPos);
485 movePanelTo(panel, userConstrain(relRect.x, relRect.y, elementRect, contentAreaRect, panelRect));
487 // Allow overflow below the editor to avoid placing toolbars ontop of tables
488 contentAreaRect.h += 40;
490 elementRect = Rect.intersect(contentAreaRect, elementRect);
492 relPos = Rect.findBestRelativePosition(panelRect, elementRect, contentAreaRect, [
493 'bc-tc', 'bl-tl', 'br-tr'
497 relRect = Rect.relativePosition(panelRect, elementRect, relPos);
498 movePanelTo(panel, userConstrain(relRect.x, relRect.y, elementRect, contentAreaRect, panelRect));
500 movePanelTo(panel, userConstrain(elementRect.x, elementRect.y, elementRect, contentAreaRect, panelRect));
507 togglePositionClass(panel, relPos, function(pos1, pos2) {
508 return (!elementRect || elementRect.w > 40) && pos1 === pos2;
511 //drawRect(contentAreaRect, 'blue');
512 //drawRect(elementRect, 'red');
513 //drawRect(panelRect, 'green');
516 function repositionHandler() {
518 if (editor.selection) {
519 reposition(findFrontMostMatch(editor.selection.getNode()));
523 tinymce.util.Delay.requestAnimationFrame(execute);
526 function bindScrollEvent() {
527 if (!scrollContainer) {
528 scrollContainer = editor.selection.getScrollContainer() || editor.getWin();
529 tinymce.$(scrollContainer).on('scroll', repositionHandler);
531 editor.on('remove', function() {
532 tinymce.$(scrollContainer).off('scroll');
537 function showContextToolbar(match) {
540 if (match.toolbar.panel) {
541 match.toolbar.panel.show();
548 panel = Factory.create({
551 classes: 'tinymce tinymce-inline arrow',
552 ariaLabel: 'Inline toolbar',
560 items: createToolbar(match.toolbar.items),
561 oncancel: function() {
566 match.toolbar.panel = panel;
567 panel.renderTo(document.body).reflow();
571 function hideAllContextToolbars() {
572 tinymce.each(getContextToolbars(), function(toolbar) {
574 toolbar.panel.hide();
579 function findFrontMostMatch(targetElm) {
580 var i, y, parentsAndSelf, toolbars = getContextToolbars();
582 parentsAndSelf = editor.$(targetElm).parents().add(targetElm);
583 for (i = parentsAndSelf.length - 1; i >= 0; i--) {
584 for (y = toolbars.length - 1; y >= 0; y--) {
585 if (toolbars[y].predicate(parentsAndSelf[i])) {
587 toolbar: toolbars[y],
588 element: parentsAndSelf[i]
597 editor.on('click keyup setContent', function(e) {
598 // Only act on partial inserts
599 if (e.type == 'setcontent' && !e.selection) {
603 // Needs to be delayed to avoid Chrome img focus out bug
604 tinymce.util.Delay.setEditorTimeout(editor, function() {
607 match = findFrontMostMatch(editor.selection.getNode());
609 hideAllContextToolbars();
610 showContextToolbar(match);
612 hideAllContextToolbars();
617 editor.on('blur hide', hideAllContextToolbars);
619 editor.on('ObjectResizeStart', function() {
620 var match = findFrontMostMatch(editor.selection.getNode());
622 if (match && match.toolbar.panel) {
623 match.toolbar.panel.hide();
627 editor.on('nodeChange ResizeEditor ResizeWindow', repositionHandler);
629 editor.on('remove', function() {
630 tinymce.each(getContextToolbars(), function(toolbar) {
632 toolbar.panel.remove();
636 editor.contextToolbars = {};
639 editor.shortcuts.add('ctrl+shift+e > ctrl+shift+p', '', function() {
640 var match = findFrontMostMatch(editor.selection.getNode());
641 if (match && match.toolbar.panel) {
642 match.toolbar.panel.items()[0].focus();
647 function fireSkinLoaded(editor) {
649 if (editor.initialized) {
650 editor.fire('SkinLoaded');
652 editor.on('init', function() {
653 editor.fire('SkinLoaded');
660 * Renders the inline editor UI.
662 * @return {Object} Name/value object with theme data.
664 function renderInlineUI(args) {
665 var panel, inlineToolbarContainer;
667 if (settings.fixed_toolbar_container) {
668 inlineToolbarContainer = DOM.select(settings.fixed_toolbar_container)[0];
671 function reposition() {
672 if (panel && panel.moveRel && panel.visible() && !panel._fixed) {
673 // TODO: This is kind of ugly and doesn't handle multiple scrollable elements
674 var scrollContainer = editor.selection.getScrollContainer(), body = editor.getBody();
675 var deltaX = 0, deltaY = 0;
677 if (scrollContainer) {
678 var bodyPos = DOM.getPos(body), scrollContainerPos = DOM.getPos(scrollContainer);
680 deltaX = Math.max(0, scrollContainerPos.x - bodyPos.x);
681 deltaY = Math.max(0, scrollContainerPos.y - bodyPos.y);
684 panel.fixed(false).moveRel(body, editor.rtl ? ['tr-br', 'br-tr'] : ['tl-bl', 'bl-tl', 'tr-br']).moveBy(deltaX, deltaY);
692 DOM.addClass(editor.getBody(), 'mce-edit-focus');
698 // We require two events as the inline float panel based toolbar does not have autohide=true
701 // All other autohidden float panels will be closed below.
702 FloatPanel.hideAll();
704 DOM.removeClass(editor.getBody(), 'mce-edit-focus');
710 if (!panel.visible()) {
717 // Render a plain panel inside the inlineToolbarContainer if it's defined
718 panel = self.panel = Factory.create({
719 type: inlineToolbarContainer ? 'panel' : 'floatpanel',
721 classes: 'tinymce tinymce-inline',
727 fixed: !!inlineToolbarContainer,
730 settings.menubar === false ? null : {type: 'menubar', border: '0 0 1 0', items: createMenuButtons()},
731 createToolbars(settings.toolbar_items_size)
736 /*if (settings.statusbar !== false) {
737 panel.add({type: 'panel', classes: 'statusbar', layout: 'flow', border: '1 0 0 0', items: [
738 {type: 'elementpath'}
742 editor.fire('BeforeRenderUI');
743 panel.renderTo(inlineToolbarContainer || document.body).reflow();
745 addAccessibilityKeys(panel);
747 addContextualToolbars();
749 editor.on('nodeChange', reposition);
750 editor.on('activate', show);
751 editor.on('deactivate', hide);
753 editor.nodeChanged();
756 settings.content_editable = true;
758 editor.on('focus', function() {
759 // Render only when the CSS file has been loaded
760 if (args.skinUiCss) {
761 tinymce.DOM.styleSheetLoader.load(args.skinUiCss, render, render);
767 editor.on('blur hide', hide);
769 // Remove the panel when the editor is removed
770 editor.on('remove', function() {
778 if (args.skinUiCss) {
779 tinymce.DOM.styleSheetLoader.load(args.skinUiCss, fireSkinLoaded(editor));
786 * Renders the iframe editor UI.
788 * @param {Object} args Details about target element etc.
789 * @return {Object} Name/value object with theme data.
791 function renderIframeUI(args) {
792 var panel, resizeHandleCtrl, startSize;
794 function switchMode() {
796 if (e.mode == 'readonly') {
797 panel.find('*').disabled(true);
799 panel.find('*').disabled(false);
804 if (args.skinUiCss) {
805 tinymce.DOM.styleSheetLoader.load(args.skinUiCss, fireSkinLoaded(editor));
809 panel = self.panel = Factory.create({
813 style: 'visibility: hidden',
817 settings.menubar === false ? null : {type: 'menubar', border: '0 0 1 0', items: createMenuButtons()},
818 createToolbars(settings.toolbar_items_size),
819 {type: 'panel', name: 'iframe', layout: 'stack', classes: 'edit-area', html: '', border: '1 0 0 0'}
823 if (settings.resize !== false) {
825 type: 'resizehandle',
826 direction: settings.resize,
828 onResizeStart: function() {
829 var elm = editor.getContentAreaContainer().firstChild;
832 width: elm.clientWidth,
833 height: elm.clientHeight
837 onResize: function(e) {
838 if (settings.resize == 'both') {
839 resizeTo(startSize.width + e.deltaX, startSize.height + e.deltaY);
841 resizeTo(null, startSize.height + e.deltaY);
847 // Add statusbar if needed
848 if (settings.statusbar !== false) {
849 panel.add({type: 'panel', name: 'statusbar', classes: 'statusbar', layout: 'flow', border: '1 0 0 0', ariaRoot: true, items: [
850 {type: 'elementpath'},
855 editor.fire('BeforeRenderUI');
856 editor.on('SwitchMode', switchMode());
857 panel.renderBefore(args.targetNode).reflow();
859 if (settings.readonly) {
860 editor.setMode('readonly');
863 if (settings.width) {
864 tinymce.DOM.setStyle(panel.getEl(), 'width', settings.width);
867 // Remove the panel when the editor is removed
868 editor.on('remove', function() {
873 // Add accesibility shortcuts
874 addAccessibilityKeys(panel);
875 addContextualToolbars();
878 iframeContainer: panel.find('#iframe')[0].getEl(),
879 editorContainer: panel.getEl()
884 * Renders the UI for the theme. This gets called by the editor.
886 * @param {Object} args Details about target element etc.
887 * @return {Object} Theme UI data items.
889 self.renderUI = function(args) {
890 var skin = settings.skin !== false ? settings.skin || 'lightgray' : false;
893 var skinUrl = settings.skin_url;
896 skinUrl = editor.documentBaseURI.toAbsolute(skinUrl);
898 skinUrl = tinymce.baseURL + '/skins/' + skin;
901 // Load special skin for IE7
902 // TODO: Remove this when we drop IE7 support
903 if (tinymce.Env.documentMode <= 7) {
904 args.skinUiCss = skinUrl + '/skin.ie7.min.css';
906 args.skinUiCss = skinUrl + '/skin.min.css';
909 // Load content.min.css or content.inline.min.css
910 editor.contentCSS.push(skinUrl + '/content' + (editor.inline ? '.inline' : '') + '.min.css');
913 // Handle editor setProgressState change
914 editor.on('ProgressState', function(e) {
915 self.throbber = self.throbber || new tinymce.ui.Throbber(self.panel.getEl('body'));
918 self.throbber.show(e.time);
920 self.throbber.hide();
924 if (settings.inline) {
925 return renderInlineUI(args);
928 return renderIframeUI(args);
931 self.resizeTo = resizeTo;
932 self.resizeBy = resizeBy;