wp-includes/js/tinymce/themes/modern/theme.js

   1 /**
   2  * theme.js
   3  *
   4  * Released under LGPL License.
   5  * Copyright (c) 1999-2015 Ephox Corp. All rights reserved
   6  *
   7  * License: http://www.tinymce.com/license
   8  * Contributing: http://www.tinymce.com/contributing
   9  */
  10
  11 /*global tinymce:true */
  12
  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;
  16
  17         // Default menus
  18         var defaultMenus = {
  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'}
  26         };
  27
  28         var defaultToolbar = "undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | " +
  29                 "bullist numlist outdent indent | link image";
  30
  31         function createToolbar(items, size) {
  32                 var toolbarItems = [], buttonGroup;
  33
  34                 if (!items) {
  35                         return;
  36                 }
  37
  38                 each(items.split(/[ ,]/), function(item) {
  39                         var itemName;
  40
  41                         function bindSelectorChanged() {
  42                                 var selection = editor.selection;
  43
  44                                 function setActiveItem(name) {
  45                                         return function(state, args) {
  46                                                 var nodeName, i = args.parents.length;
  47
  48                                                 while (i--) {
  49                                                         nodeName = args.parents[i].nodeName;
  50                                                         if (nodeName == "OL" || nodeName == "UL") {
  51                                                                 break;
  52                                                         }
  53                                                 }
  54
  55                                                 item.active(state && nodeName == name);
  56                                         };
  57                                 }
  58
  59                                 if (itemName == "bullist") {
  60                                         selection.selectorChanged('ul > li', setActiveItem("UL"));
  61                                 }
  62
  63                                 if (itemName == "numlist") {
  64                                         selection.selectorChanged('ol > li', setActiveItem("OL"));
  65                                 }
  66
  67                                 if (item.settings.stateSelector) {
  68                                         selection.selectorChanged(item.settings.stateSelector, function(state) {
  69                                                 item.active(state);
  70                                         }, true);
  71                                 }
  72
  73                                 if (item.settings.disabledStateSelector) {
  74                                         selection.selectorChanged(item.settings.disabledStateSelector, function(state) {
  75                                                 item.disabled(state);
  76                                         });
  77                                 }
  78                         }
  79
  80                         if (item == "|") {
  81                                 buttonGroup = null;
  82                         } else {
  83                                 if (Factory.has(item)) {
  84                                         item = {type: item, size: size};
  85                                         toolbarItems.push(item);
  86                                         buttonGroup = null;
  87                                 } else {
  88                                         if (!buttonGroup) {
  89                                                 buttonGroup = {type: 'buttongroup', items: []};
  90                                                 toolbarItems.push(buttonGroup);
  91                                         }
  92
  93                                         if (editor.buttons[item]) {
  94                                                 // TODO: Move control creation to some UI class
  95                                                 itemName = item;
  96                                                 item = editor.buttons[itemName];
  97
  98                                                 if (typeof item == "function") {
  99                                                         item = item();
 100                                                 }
 101
 102                                                 item.type = item.type || 'button';
 103                                                 item.size = size;
 104
 105                                                 item = Factory.create(item);
 106                                                 buttonGroup.items.push(item);
 107
 108                                                 if (editor.initialized) {
 109                                                         bindSelectorChanged();
 110                                                 } else {
 111                                                         editor.on('init', bindSelectorChanged);
 112                                                 }
 113                                         }
 114                                 }
 115                         }
 116                 });
 117
 118                 return {
 119                         type: 'toolbar',
 120                         layout: 'flow',
 121                         items: toolbarItems
 122                 };
 123         }
 124
 125         /**
 126          * Creates the toolbars from config and returns a toolbar array.
 127          *
 128          * @param {String} size Optional toolbar item size.
 129          * @return {Array} Array with toolbars.
 130          */
 131         function createToolbars(size) {
 132                 var toolbars = [];
 133
 134                 function addToolbar(items) {
 135                         if (items) {
 136                                 toolbars.push(createToolbar(items, size));
 137                                 return true;
 138                         }
 139                 }
 140
 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) {
 145                                 return;
 146                         }
 147
 148                         tinymce.each(settings.toolbar, function(toolbar, i) {
 149                                 settings["toolbar" + (i + 1)] = toolbar;
 150                         });
 151
 152                         delete settings.toolbar;
 153                 }
 154
 155                 // Generate toolbar<n>
 156                 for (var i = 1; i < 10; i++) {
 157                         if (!addToolbar(settings["toolbar" + i])) {
 158                                 break;
 159                         }
 160                 }
 161
 162                 // Generate toolbar or default toolbar unless it's disabled
 163                 if (!toolbars.length && settings.toolbar !== false) {
 164                         addToolbar(settings.toolbar || defaultToolbar);
 165                 }
 166
 167                 if (toolbars.length) {
 168                         return {
 169                                 type: 'panel',
 170                                 layout: 'stack',
 171                                 classes: "toolbar-grp",
 172                                 ariaRoot: true,
 173                                 ariaRemember: true,
 174                                 items: toolbars
 175                         };
 176                 }
 177         }
 178
 179         /**
 180          * Creates the menu buttons based on config.
 181          *
 182          * @return {Array} Menu buttons array.
 183          */
 184         function createMenuButtons() {
 185                 var name, menuButtons = [];
 186
 187                 function createMenuItem(name) {
 188                         var menuItem;
 189
 190                         if (name == '|') {
 191                                 return {text: '|'};
 192                         }
 193
 194                         menuItem = editor.menuItems[name];
 195
 196                         return menuItem;
 197                 }
 198
 199                 function createMenu(context) {
 200                         var menuButton, menu, menuItems, isUserDefined, removedMenuItems;
 201
 202                         removedMenuItems = tinymce.makeMap((settings.removed_menuitems || '').split(/[ ,]/));
 203
 204                         // User defined menu
 205                         if (settings.menu) {
 206                                 menu = settings.menu[context];
 207                                 isUserDefined = true;
 208                         } else {
 209                                 menu = defaultMenus[context];
 210                         }
 211
 212                         if (menu) {
 213                                 menuButton = {text: menu.title};
 214                                 menuItems = [];
 215
 216                                 // Default/user defined items
 217                                 each((menu.items || '').split(/[ ,]/), function(item) {
 218                                         var menuItem = createMenuItem(item);
 219
 220                                         if (menuItem && !removedMenuItems[item]) {
 221                                                 menuItems.push(createMenuItem(item));
 222                                         }
 223                                 });
 224
 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: '|'});
 231                                                         }
 232
 233                                                         if (menuItem.prependToContext) {
 234                                                                 menuItems.unshift(menuItem);
 235                                                         } else {
 236                                                                 menuItems.push(menuItem);
 237                                                         }
 238
 239                                                         if (menuItem.separator == 'after') {
 240                                                                 menuItems.push({text: '|'});
 241                                                         }
 242                                                 }
 243                                         });
 244                                 }
 245
 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);
 250                                                 }
 251                                         }
 252                                 }
 253
 254                                 menuButton.menu = menuItems;
 255
 256                                 if (!menuButton.menu.length) {
 257                                         return null;
 258                                 }
 259                         }
 260
 261                         return menuButton;
 262                 }
 263
 264                 var defaultMenuBar = [];
 265                 if (settings.menu) {
 266                         for (name in settings.menu) {
 267                                 defaultMenuBar.push(name);
 268                         }
 269                 } else {
 270                         for (name in defaultMenus) {
 271                                 defaultMenuBar.push(name);
 272                         }
 273                 }
 274
 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);
 279
 280                         if (menu) {
 281                                 menuButtons.push(menu);
 282                         }
 283                 }
 284
 285                 return menuButtons;
 286         }
 287
 288         /**
 289          * Adds accessibility shortcut keys to panel.
 290          *
 291          * @param {tinymce.ui.Panel} panel Panel to add focus to.
 292          */
 293         function addAccessibilityKeys(panel) {
 294                 function focus(type) {
 295                         var item = panel.find(type)[0];
 296
 297                         if (item) {
 298                                 item.focus(true);
 299                         }
 300                 }
 301
 302                 editor.shortcuts.add('Alt+F9', '', function() {
 303                         focus('menubar');
 304                 });
 305
 306                 editor.shortcuts.add('Alt+F10', '', function() {
 307                         focus('toolbar');
 308                 });
 309
 310                 editor.shortcuts.add('Alt+F11', '', function() {
 311                         focus('elementpath');
 312                 });
 313
 314                 panel.on('cancel', function() {
 315                         editor.focus();
 316                 });
 317         }
 318
 319         /**
 320          * Resizes the editor to the specified width, height.
 321          */
 322         function resizeTo(width, height) {
 323                 var containerElm, iframeElm, containerSize, iframeSize;
 324
 325                 function getSize(elm) {
 326                         return {
 327                                 width: elm.clientWidth,
 328                                 height: elm.clientHeight
 329                         };
 330                 }
 331
 332                 containerElm = editor.getContainer();
 333                 iframeElm = editor.getContentAreaContainer().firstChild;
 334                 containerSize = getSize(containerElm);
 335                 iframeSize = getSize(iframeElm);
 336
 337                 if (width !== null) {
 338                         width = Math.max(settings.min_width || 100, width);
 339                         width = Math.min(settings.max_width || 0xFFFF, width);
 340
 341                         DOM.setStyle(containerElm, 'width', width + (containerSize.width - iframeSize.width));
 342                         DOM.setStyle(iframeElm, 'width', width);
 343                 }
 344
 345                 height = Math.max(settings.min_height || 100, height);
 346                 height = Math.min(settings.max_height || 0xFFFF, height);
 347                 DOM.setStyle(iframeElm, 'height', height);
 348
 349                 editor.fire('ResizeEditor');
 350         }
 351
 352         function resizeBy(dw, dh) {
 353                 var elm = editor.getContentAreaContainer();
 354                 self.resizeTo(elm.clientWidth + dw, elm.clientHeight + dh);
 355         }
 356
 357         /**
 358          * Handles contextual toolbars.
 359          */
 360         function addContextualToolbars() {
 361                 var scrollContainer;
 362
 363                 function getContextToolbars() {
 364                         return editor.contextToolbars || [];
 365                 }
 366
 367                 function getElementRect(elm) {
 368                         var pos, targetRect, root;
 369
 370                         pos = tinymce.DOM.getPos(editor.getContentAreaContainer());
 371                         targetRect = editor.dom.getRect(elm);
 372                         root = editor.dom.getRoot();
 373
 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;
 378                         }
 379
 380                         targetRect.x += pos.x;
 381                         targetRect.y += pos.y;
 382
 383                         return targetRect;
 384                 }
 385
 386                 function hideAllFloatingPanels() {
 387                         each(editor.contextToolbars, function(toolbar) {
 388                                 if (toolbar.panel) {
 389                                         toolbar.panel.hide();
 390                                 }
 391                         });
 392                 }
 393
 394                 function togglePositionClass(panel, relPos, predicate) {
 395                         relPos = relPos ? relPos.substr(0, 2) : '';
 396
 397                         each({
 398                                 t: 'down',
 399                                 b: 'up'
 400                         }, function(cls, pos) {
 401                                 panel.classes.toggle('arrow-' + cls, predicate(pos, relPos.substr(0, 1)));
 402                         });
 403
 404                         each({
 405                                 l: 'left',
 406                                 r: 'right'
 407                         }, function(cls, pos) {
 408                                 panel.classes.toggle('arrow-' + cls, predicate(pos, relPos.substr(1, 1)));
 409                         });
 410                 }
 411
 412                 function toClientRect(geomRect) {
 413                         return {
 414                                 left: geomRect.x,
 415                                 top: geomRect.y,
 416                                 width: geomRect.w,
 417                                 height: geomRect.h,
 418                                 right: geomRect.x + geomRect.w,
 419                                 bottom: geomRect.y + geomRect.h
 420                         };
 421                 }
 422
 423                 function userConstrain(x, y, elementRect, contentAreaRect, panelRect) {
 424                                 panelRect = toClientRect({x: x, y: y, w: panelRect.w, h: panelRect.h});
 425
 426                                 if (settings.inline_toolbar_position_handler) {
 427                                         panelRect = settings.inline_toolbar_position_handler({
 428                                                 elementRect: toClientRect(elementRect),
 429                                                 contentAreaRect: toClientRect(contentAreaRect),
 430                                                 panelRect: panelRect
 431                                         });
 432                                 }
 433
 434                                 return panelRect;
 435                 }
 436
 437                 function movePanelTo(panel, pos) {
 438                         panel.moveTo(pos.left, pos.top);
 439                 }
 440
 441                 function reposition(match) {
 442                         var relPos, panelRect, elementRect, contentAreaRect, panel, relRect, testPositions, smallElementWidthThreshold;
 443
 444                         if (editor.removed) {
 445                                 return;
 446                         }
 447
 448                         if (!match || !match.toolbar.panel) {
 449                                 hideAllFloatingPanels();
 450                                 return;
 451                         }
 452
 453                         testPositions = [
 454                                 'bc-tc', 'tc-bc',
 455                                 'tl-bl', 'bl-tl',
 456                                 'tr-br', 'br-tr'
 457                         ];
 458
 459                         panel = match.toolbar.panel;
 460                         panel.show();
 461
 462                         elementRect = getElementRect(match.element);
 463                         panelRect = tinymce.DOM.getRect(panel.getEl());
 464                         contentAreaRect = tinymce.DOM.getRect(editor.getContentAreaContainer() || editor.getBody());
 465                         smallElementWidthThreshold = 25;
 466
 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;
 471
 472                         if (!editor.inline) {
 473                                 contentAreaRect.w = editor.getDoc().documentElement.offsetWidth;
 474                         }
 475
 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);
 479                         }
 480
 481                         relPos = Rect.findBestRelativePosition(panelRect, elementRect, contentAreaRect, testPositions);
 482                         elementRect = Rect.clamp(elementRect, contentAreaRect);
 483
 484                         if (relPos) {
 485                                 relRect = Rect.relativePosition(panelRect, elementRect, relPos);
 486                                 movePanelTo(panel, userConstrain(relRect.x, relRect.y, elementRect, contentAreaRect, panelRect));
 487                         } else {
 488                                 // Allow overflow below the editor to avoid placing toolbars ontop of tables
 489                                 contentAreaRect.h += panelRect.h;
 490
 491                                 elementRect = Rect.intersect(contentAreaRect, elementRect);
 492                                 if (elementRect) {
 493                                         relPos = Rect.findBestRelativePosition(panelRect, elementRect, contentAreaRect, [
 494                                                 'bc-tc', 'bl-tl', 'br-tr'
 495                                         ]);
 496
 497                                         if (relPos) {
 498                                                 relRect = Rect.relativePosition(panelRect, elementRect, relPos);
 499                                                 movePanelTo(panel, userConstrain(relRect.x, relRect.y, elementRect, contentAreaRect, panelRect));
 500                                         } else {
 501                                                 movePanelTo(panel, userConstrain(elementRect.x, elementRect.y, elementRect, contentAreaRect, panelRect));
 502                                         }
 503                                 } else {
 504                                         panel.hide();
 505                                 }
 506                         }
 507
 508                         togglePositionClass(panel, relPos, function(pos1, pos2) {
 509                                 return pos1 === pos2;
 510                         });
 511
 512                         //drawRect(contentAreaRect, 'blue');
 513                         //drawRect(elementRect, 'red');
 514                         //drawRect(panelRect, 'green');
 515                 }
 516
 517                 function repositionHandler() {
 518                         function execute() {
 519                                 if (editor.selection) {
 520                                         reposition(findFrontMostMatch(editor.selection.getNode()));
 521                                 }
 522                         }
 523
 524                         tinymce.util.Delay.requestAnimationFrame(execute);
 525                 }
 526
 527                 function bindScrollEvent() {
 528                         if (!scrollContainer) {
 529                                 scrollContainer = editor.selection.getScrollContainer() || editor.getWin();
 530                                 tinymce.$(scrollContainer).on('scroll', repositionHandler);
 531
 532                                 editor.on('remove', function() {
 533                                         tinymce.$(scrollContainer).off('scroll');
 534                                 });
 535                         }
 536                 }
 537
 538                 function showContextToolbar(match) {
 539                         var panel;
 540
 541                         if (match.toolbar.panel) {
 542                                 match.toolbar.panel.show();
 543                                 reposition(match);
 544                                 return;
 545                         }
 546
 547                         bindScrollEvent();
 548
 549                         panel = Factory.create({
 550                                 type: 'floatpanel',
 551                                 role: 'dialog',
 552                                 classes: 'tinymce tinymce-inline arrow',
 553                                 ariaLabel: 'Inline toolbar',
 554                                 layout: 'flex',
 555                                 direction: 'column',
 556                                 align: 'stretch',
 557                                 autohide: false,
 558                                 autofix: true,
 559                                 fixed: true,
 560                                 border: 1,
 561                                 items: createToolbar(match.toolbar.items),
 562                                 oncancel: function() {
 563                                         editor.focus();
 564                                 }
 565                         });
 566
 567                         match.toolbar.panel = panel;
 568                         panel.renderTo(document.body).reflow();
 569                         reposition(match);
 570                 }
 571
 572                 function hideAllContextToolbars() {
 573                         tinymce.each(getContextToolbars(), function(toolbar) {
 574                                 if (toolbar.panel) {
 575                                         toolbar.panel.hide();
 576                                 }
 577                         });
 578                 }
 579
 580                 function findFrontMostMatch(targetElm) {
 581                         var i, y, parentsAndSelf, toolbars = getContextToolbars();
 582
 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])) {
 587                                                 return {
 588                                                         toolbar: toolbars[y],
 589                                                         element: parentsAndSelf[i]
 590                                                 };
 591                                         }
 592                                 }
 593                         }
 594
 595                         return null;
 596                 }
 597
 598                 editor.on('click keyup setContent', function(e) {
 599                         // Only act on partial inserts
 600                         if (e.type == 'setcontent' && !e.selection) {
 601                                 return;
 602                         }
 603
 604                         // Needs to be delayed to avoid Chrome img focus out bug
 605                         tinymce.util.Delay.setEditorTimeout(editor, function() {
 606                                 var match;
 607
 608                                 match = findFrontMostMatch(editor.selection.getNode());
 609                                 if (match) {
 610                                         hideAllContextToolbars();
 611                                         showContextToolbar(match);
 612                                 } else {
 613                                         hideAllContextToolbars();
 614                                 }
 615                         });
 616                 });
 617
 618                 editor.on('blur hide', hideAllContextToolbars);
 619
 620                 editor.on('ObjectResizeStart', function() {
 621                         var match = findFrontMostMatch(editor.selection.getNode());
 622
 623                         if (match && match.toolbar.panel) {
 624                                 match.toolbar.panel.hide();
 625                         }
 626                 });
 627
 628                 editor.on('nodeChange ResizeEditor ResizeWindow', repositionHandler);
 629
 630                 editor.on('remove', function() {
 631                         tinymce.each(getContextToolbars(), function(toolbar) {
 632                                 if (toolbar.panel) {
 633                                         toolbar.panel.remove();
 634                                 }
 635                         });
 636
 637                         editor.contextToolbars = {};
 638                 });
 639
 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();
 644                         }
 645                 });
 646         }
 647
 648         function fireSkinLoaded(editor) {
 649                 return function() {
 650                         if (editor.initialized) {
 651                                 editor.fire('SkinLoaded');
 652                         } else {
 653                                 editor.on('init', function() {
 654                                         editor.fire('SkinLoaded');
 655                                 });
 656                         }
 657                 };
 658         }
 659
 660         /**
 661          * Renders the inline editor UI.
 662          *
 663          * @return {Object} Name/value object with theme data.
 664          */
 665         function renderInlineUI(args) {
 666                 var panel, inlineToolbarContainer;
 667
 668                 if (settings.fixed_toolbar_container) {
 669                         inlineToolbarContainer = DOM.select(settings.fixed_toolbar_container)[0];
 670                 }
 671
 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;
 677
 678                                 if (scrollContainer) {
 679                                         var bodyPos = DOM.getPos(body), scrollContainerPos = DOM.getPos(scrollContainer);
 680
 681                                         deltaX = Math.max(0, scrollContainerPos.x - bodyPos.x);
 682                                         deltaY = Math.max(0, scrollContainerPos.y - bodyPos.y);
 683                                 }
 684
 685                                 panel.fixed(false).moveRel(body, editor.rtl ? ['tr-br', 'br-tr'] : ['tl-bl', 'bl-tl', 'tr-br']).moveBy(deltaX, deltaY);
 686                         }
 687                 }
 688
 689                 function show() {
 690                         if (panel) {
 691                                 panel.show();
 692                                 reposition();
 693                                 DOM.addClass(editor.getBody(), 'mce-edit-focus');
 694                         }
 695                 }
 696
 697                 function hide() {
 698                         if (panel) {
 699                                 // We require two events as the inline float panel based toolbar does not have autohide=true
 700                                 panel.hide();
 701
 702                                 // All other autohidden float panels will be closed below.
 703                                 FloatPanel.hideAll();
 704
 705                                 DOM.removeClass(editor.getBody(), 'mce-edit-focus');
 706                         }
 707                 }
 708
 709                 function render() {
 710                         if (panel) {
 711                                 if (!panel.visible()) {
 712                                         show();
 713                                 }
 714
 715                                 return;
 716                         }
 717
 718                         // Render a plain panel inside the inlineToolbarContainer if it's defined
 719                         panel = self.panel = Factory.create({
 720                                 type: inlineToolbarContainer ? 'panel' : 'floatpanel',
 721                                 role: 'application',
 722                                 classes: 'tinymce tinymce-inline',
 723                                 layout: 'flex',
 724                                 direction: 'column',
 725                                 align: 'stretch',
 726                                 autohide: false,
 727                                 autofix: true,
 728                                 fixed: !!inlineToolbarContainer,
 729                                 border: 1,
 730                                 items: [
 731                                         settings.menubar === false ? null : {type: 'menubar', border: '0 0 1 0', items: createMenuButtons()},
 732                                         createToolbars(settings.toolbar_items_size)
 733                                 ]
 734                         });
 735
 736                         // Add statusbar
 737                         /*if (settings.statusbar !== false) {
 738                                 panel.add({type: 'panel', classes: 'statusbar', layout: 'flow', border: '1 0 0 0', items: [
 739                                         {type: 'elementpath'}
 740                                 ]});
 741                         }*/
 742
 743                         editor.fire('BeforeRenderUI');
 744                         panel.renderTo(inlineToolbarContainer || document.body).reflow();
 745
 746                         addAccessibilityKeys(panel);
 747                         show();
 748                         addContextualToolbars();
 749
 750                         editor.on('nodeChange', reposition);
 751                         editor.on('activate', show);
 752                         editor.on('deactivate', hide);
 753
 754                         editor.nodeChanged();
 755                 }
 756
 757                 settings.content_editable = true;
 758
 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);
 763                         } else {
 764                                 render();
 765                         }
 766                 });
 767
 768                 editor.on('blur hide', hide);
 769
 770                 // Remove the panel when the editor is removed
 771                 editor.on('remove', function() {
 772                         if (panel) {
 773                                 panel.remove();
 774                                 panel = null;
 775                         }
 776                 });
 777
 778                 // Preload skin css
 779                 if (args.skinUiCss) {
 780                         tinymce.DOM.styleSheetLoader.load(args.skinUiCss, fireSkinLoaded(editor));
 781                 }
 782
 783                 return {};
 784         }
 785
 786         /**
 787          * Renders the iframe editor UI.
 788          *
 789          * @param {Object} args Details about target element etc.
 790          * @return {Object} Name/value object with theme data.
 791          */
 792         function renderIframeUI(args) {
 793                 var panel, resizeHandleCtrl, startSize;
 794
 795                 function switchMode() {
 796                         return function(e) {
 797                                 if (e.mode == 'readonly') {
 798                                         panel.find('*').disabled(true);
 799                                 } else {
 800                                         panel.find('*').disabled(false);
 801                                 }
 802                         };
 803                 }
 804
 805                 if (args.skinUiCss) {
 806                         tinymce.DOM.styleSheetLoader.load(args.skinUiCss, fireSkinLoaded(editor));
 807                 }
 808
 809                 // Basic UI layout
 810                 panel = self.panel = Factory.create({
 811                         type: 'panel',
 812                         role: 'application',
 813                         classes: 'tinymce',
 814                         style: 'visibility: hidden',
 815                         layout: 'stack',
 816                         border: 1,
 817                         items: [
 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'}
 821                         ]
 822                 });
 823
 824                 if (settings.resize !== false) {
 825                         resizeHandleCtrl = {
 826                                 type: 'resizehandle',
 827                                 direction: settings.resize,
 828
 829                                 onResizeStart: function() {
 830                                         var elm = editor.getContentAreaContainer().firstChild;
 831
 832                                         startSize = {
 833                                                 width: elm.clientWidth,
 834                                                 height: elm.clientHeight
 835                                         };
 836                                 },
 837
 838                                 onResize: function(e) {
 839                                         if (settings.resize == 'both') {
 840                                                 resizeTo(startSize.width + e.deltaX, startSize.height + e.deltaY);
 841                                         } else {
 842                                                 resizeTo(null, startSize.height + e.deltaY);
 843                                         }
 844                                 }
 845                         };
 846                 }
 847
 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},
 852                                 resizeHandleCtrl
 853                         ]});
 854                 }
 855
 856                 editor.fire('BeforeRenderUI');
 857                 editor.on('SwitchMode', switchMode());
 858                 panel.renderBefore(args.targetNode).reflow();
 859
 860                 if (settings.readonly) {
 861                         editor.setMode('readonly');
 862                 }
 863
 864                 if (settings.width) {
 865                         tinymce.DOM.setStyle(panel.getEl(), 'width', settings.width);
 866                 }
 867
 868                 // Remove the panel when the editor is removed
 869                 editor.on('remove', function() {
 870                         panel.remove();
 871                         panel = null;
 872                 });
 873
 874                 // Add accesibility shortcuts
 875                 addAccessibilityKeys(panel);
 876                 addContextualToolbars();
 877
 878                 return {
 879                         iframeContainer: panel.find('#iframe')[0].getEl(),
 880                         editorContainer: panel.getEl()
 881                 };
 882         }
 883
 884         /**
 885          * Renders the UI for the theme. This gets called by the editor.
 886          *
 887          * @param {Object} args Details about target element etc.
 888          * @return {Object} Theme UI data items.
 889          */
 890         self.renderUI = function(args) {
 891                 var skin = settings.skin !== false ? settings.skin || 'lightgray' : false;
 892
 893                 if (skin) {
 894                         var skinUrl = settings.skin_url;
 895
 896                         if (skinUrl) {
 897                                 skinUrl = editor.documentBaseURI.toAbsolute(skinUrl);
 898                         } else {
 899                                 skinUrl = tinymce.baseURL + '/skins/' + skin;
 900                         }
 901
 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';
 906                         } else {
 907                                 args.skinUiCss = skinUrl + '/skin.min.css';
 908                         }
 909
 910                         // Load content.min.css or content.inline.min.css
 911                         editor.contentCSS.push(skinUrl + '/content' + (editor.inline ? '.inline' : '') + '.min.css');
 912                 }
 913
 914                 // Handle editor setProgressState change
 915                 editor.on('ProgressState', function(e) {
 916                         self.throbber = self.throbber || new tinymce.ui.Throbber(self.panel.getEl('body'));
 917
 918                         if (e.state) {
 919                                 self.throbber.show(e.time);
 920                         } else {
 921                                 self.throbber.hide();
 922                         }
 923                 });
 924
 925                 if (settings.inline) {
 926                         return renderInlineUI(args);
 927                 }
 928
 929                 return renderIframeUI(args);
 930         };
 931
 932         self.resizeTo = resizeTo;
 933         self.resizeBy = resizeBy;
 934 });