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 reposition(match) {
395 var relPos, panelRect, elementRect, contentAreaRect, panel, relRect, testPositions;
397 if (editor.removed) {
401 if (!match || !match.toolbar.panel) {
402 hideAllFloatingPanels();
412 panel = match.toolbar.panel;
415 elementRect = getElementRect(match.element);
416 panelRect = tinymce.DOM.getRect(panel.getEl());
417 contentAreaRect = tinymce.DOM.getRect(editor.getContentAreaContainer() || editor.getBody());
419 // We need to use these instead of the rect values since the style
420 // size properites might not be the same as the real size for a table
421 elementRect.w = match.element.clientWidth;
422 elementRect.h = match.element.clientHeight;
424 if (!editor.inline) {
425 contentAreaRect.w = editor.getDoc().documentElement.offsetWidth;
428 // Inflate the elementRect so it doesn't get placed above resize handles
429 if (editor.selection.controlSelection.isResizable(match.element)) {
430 elementRect = Rect.inflate(elementRect, 0, 8);
433 relPos = Rect.findBestRelativePosition(panelRect, elementRect, contentAreaRect, testPositions);
436 each(testPositions.concat('inside'), function(pos) {
437 panel.classes.toggle('tinymce-inline-' + pos, pos == relPos);
440 relRect = Rect.relativePosition(panelRect, elementRect, relPos);
441 panel.moveTo(relRect.x, relRect.y);
443 each(testPositions, function(pos) {
444 panel.classes.toggle('tinymce-inline-' + pos, false);
447 panel.classes.toggle('tinymce-inline-inside', true);
449 elementRect = Rect.intersect(contentAreaRect, elementRect);
452 relPos = Rect.findBestRelativePosition(panelRect, elementRect, contentAreaRect, [
453 'tc-tc', 'tl-tl', 'tr-tr'
457 relRect = Rect.relativePosition(panelRect, elementRect, relPos);
458 panel.moveTo(relRect.x, relRect.y);
460 panel.moveTo(elementRect.x, elementRect.y);
467 //drawRect(contentAreaRect, 'blue');
468 //drawRect(elementRect, 'red');
469 //drawRect(panelRect, 'green');
472 function repositionHandler() {
474 if (editor.selection) {
475 reposition(findFrontMostMatch(editor.selection.getNode()));
479 tinymce.util.Delay.requestAnimationFrame(execute);
482 function bindScrollEvent() {
483 if (!scrollContainer) {
484 scrollContainer = editor.selection.getScrollContainer() || editor.getWin();
485 tinymce.$(scrollContainer).on('scroll', repositionHandler);
487 editor.on('remove', function() {
488 tinymce.$(scrollContainer).off('scroll');
493 function showContextToolbar(match) {
496 if (match.toolbar.panel) {
497 match.toolbar.panel.show();
504 panel = Factory.create({
507 classes: 'tinymce tinymce-inline',
515 items: createToolbar(match.toolbar.items)
518 match.toolbar.panel = panel;
519 panel.renderTo(document.body).reflow();
523 function hideAllContextToolbars() {
524 tinymce.each(getContextToolbars(), function(toolbar) {
526 toolbar.panel.hide();
531 function findFrontMostMatch(targetElm) {
532 var i, y, parentsAndSelf, toolbars = getContextToolbars();
534 parentsAndSelf = editor.$(targetElm).parents().add(targetElm);
535 for (i = parentsAndSelf.length - 1; i >= 0; i--) {
536 for (y = toolbars.length - 1; y >= 0; y--) {
537 if (toolbars[y].predicate(parentsAndSelf[i])) {
539 toolbar: toolbars[y],
540 element: parentsAndSelf[i]
549 editor.on('click keyup setContent', function(e) {
550 // Only act on partial inserts
551 if (e.type == 'setcontent' && !e.selection) {
555 // Needs to be delayed to avoid Chrome img focus out bug
556 tinymce.util.Delay.setEditorTimeout(editor, function() {
559 match = findFrontMostMatch(editor.selection.getNode());
561 hideAllContextToolbars();
562 showContextToolbar(match);
564 hideAllContextToolbars();
569 editor.on('blur hide', hideAllContextToolbars);
571 editor.on('ObjectResizeStart', function() {
572 var match = findFrontMostMatch(editor.selection.getNode());
574 if (match && match.toolbar.panel) {
575 match.toolbar.panel.hide();
579 editor.on('nodeChange ResizeEditor ResizeWindow', repositionHandler);
581 editor.on('remove', function() {
582 tinymce.each(getContextToolbars(), function(toolbar) {
584 toolbar.panel.remove();
588 editor.contextToolbars = {};
592 function fireSkinLoaded(editor) {
594 if (editor.initialized) {
595 editor.fire('SkinLoaded');
597 editor.on('init', function() {
598 editor.fire('SkinLoaded');
605 * Renders the inline editor UI.
607 * @return {Object} Name/value object with theme data.
609 function renderInlineUI(args) {
610 var panel, inlineToolbarContainer;
612 if (settings.fixed_toolbar_container) {
613 inlineToolbarContainer = DOM.select(settings.fixed_toolbar_container)[0];
616 function reposition() {
617 if (panel && panel.moveRel && panel.visible() && !panel._fixed) {
618 // TODO: This is kind of ugly and doesn't handle multiple scrollable elements
619 var scrollContainer = editor.selection.getScrollContainer(), body = editor.getBody();
620 var deltaX = 0, deltaY = 0;
622 if (scrollContainer) {
623 var bodyPos = DOM.getPos(body), scrollContainerPos = DOM.getPos(scrollContainer);
625 deltaX = Math.max(0, scrollContainerPos.x - bodyPos.x);
626 deltaY = Math.max(0, scrollContainerPos.y - bodyPos.y);
629 panel.fixed(false).moveRel(body, editor.rtl ? ['tr-br', 'br-tr'] : ['tl-bl', 'bl-tl', 'tr-br']).moveBy(deltaX, deltaY);
637 DOM.addClass(editor.getBody(), 'mce-edit-focus');
643 // We require two events as the inline float panel based toolbar does not have autohide=true
646 // All other autohidden float panels will be closed below.
647 FloatPanel.hideAll();
649 DOM.removeClass(editor.getBody(), 'mce-edit-focus');
655 if (!panel.visible()) {
662 // Render a plain panel inside the inlineToolbarContainer if it's defined
663 panel = self.panel = Factory.create({
664 type: inlineToolbarContainer ? 'panel' : 'floatpanel',
666 classes: 'tinymce tinymce-inline',
672 fixed: !!inlineToolbarContainer,
675 settings.menubar === false ? null : {type: 'menubar', border: '0 0 1 0', items: createMenuButtons()},
676 createToolbars(settings.toolbar_items_size)
681 /*if (settings.statusbar !== false) {
682 panel.add({type: 'panel', classes: 'statusbar', layout: 'flow', border: '1 0 0 0', items: [
683 {type: 'elementpath'}
687 editor.fire('BeforeRenderUI');
688 panel.renderTo(inlineToolbarContainer || document.body).reflow();
690 addAccessibilityKeys(panel);
692 addContextualToolbars();
694 editor.on('nodeChange', reposition);
695 editor.on('activate', show);
696 editor.on('deactivate', hide);
698 editor.nodeChanged();
701 settings.content_editable = true;
703 editor.on('focus', function() {
704 // Render only when the CSS file has been loaded
705 if (args.skinUiCss) {
706 tinymce.DOM.styleSheetLoader.load(args.skinUiCss, render, render);
712 editor.on('blur hide', hide);
714 // Remove the panel when the editor is removed
715 editor.on('remove', function() {
723 if (args.skinUiCss) {
724 tinymce.DOM.styleSheetLoader.load(args.skinUiCss, fireSkinLoaded(editor));
731 * Renders the iframe editor UI.
733 * @param {Object} args Details about target element etc.
734 * @return {Object} Name/value object with theme data.
736 function renderIframeUI(args) {
737 var panel, resizeHandleCtrl, startSize;
739 function switchMode() {
741 if (e.mode == 'readonly') {
742 panel.find('*').disabled(true);
744 panel.find('*').disabled(false);
749 if (args.skinUiCss) {
750 tinymce.DOM.styleSheetLoader.load(args.skinUiCss, fireSkinLoaded(editor));
754 panel = self.panel = Factory.create({
758 style: 'visibility: hidden',
762 settings.menubar === false ? null : {type: 'menubar', border: '0 0 1 0', items: createMenuButtons()},
763 createToolbars(settings.toolbar_items_size),
764 {type: 'panel', name: 'iframe', layout: 'stack', classes: 'edit-area', html: '', border: '1 0 0 0'}
768 if (settings.resize !== false) {
770 type: 'resizehandle',
771 direction: settings.resize,
773 onResizeStart: function() {
774 var elm = editor.getContentAreaContainer().firstChild;
777 width: elm.clientWidth,
778 height: elm.clientHeight
782 onResize: function(e) {
783 if (settings.resize == 'both') {
784 resizeTo(startSize.width + e.deltaX, startSize.height + e.deltaY);
786 resizeTo(null, startSize.height + e.deltaY);
792 // Add statusbar if needed
793 if (settings.statusbar !== false) {
794 panel.add({type: 'panel', name: 'statusbar', classes: 'statusbar', layout: 'flow', border: '1 0 0 0', ariaRoot: true, items: [
795 {type: 'elementpath'},
800 editor.fire('BeforeRenderUI');
801 editor.on('SwitchMode', switchMode());
802 panel.renderBefore(args.targetNode).reflow();
804 if (settings.readonly) {
805 editor.setMode('readonly');
808 if (settings.width) {
809 tinymce.DOM.setStyle(panel.getEl(), 'width', settings.width);
812 // Remove the panel when the editor is removed
813 editor.on('remove', function() {
818 // Add accesibility shortcuts
819 addAccessibilityKeys(panel);
820 addContextualToolbars();
823 iframeContainer: panel.find('#iframe')[0].getEl(),
824 editorContainer: panel.getEl()
829 * Renders the UI for the theme. This gets called by the editor.
831 * @param {Object} args Details about target element etc.
832 * @return {Object} Theme UI data items.
834 self.renderUI = function(args) {
835 var skin = settings.skin !== false ? settings.skin || 'lightgray' : false;
838 var skinUrl = settings.skin_url;
841 skinUrl = editor.documentBaseURI.toAbsolute(skinUrl);
843 skinUrl = tinymce.baseURL + '/skins/' + skin;
846 // Load special skin for IE7
847 // TODO: Remove this when we drop IE7 support
848 if (tinymce.Env.documentMode <= 7) {
849 args.skinUiCss = skinUrl + '/skin.ie7.min.css';
851 args.skinUiCss = skinUrl + '/skin.min.css';
854 // Load content.min.css or content.inline.min.css
855 editor.contentCSS.push(skinUrl + '/content' + (editor.inline ? '.inline' : '') + '.min.css');
858 // Handle editor setProgressState change
859 editor.on('ProgressState', function(e) {
860 self.throbber = self.throbber || new tinymce.ui.Throbber(self.panel.getEl('body'));
863 self.throbber.show(e.time);
865 self.throbber.hide();
869 if (settings.inline) {
870 return renderInlineUI(args);
873 return renderIframeUI(args);
876 self.resizeTo = resizeTo;
877 self.resizeBy = resizeBy;