]> scripts.mit.edu Git - autoinstalls/wordpress.git/blob - wp-includes/js/tinymce/themes/modern/theme.js
adfeb271e360ccc6feb3dbae1a17965db1d8fe2c
[autoinstalls/wordpress.git] / 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 reposition(match) {
395                         var relPos, panelRect, elementRect, contentAreaRect, panel, relRect, testPositions;
396
397                         if (editor.removed) {
398                                 return;
399                         }
400
401                         if (!match || !match.toolbar.panel) {
402                                 hideAllFloatingPanels();
403                                 return;
404                         }
405
406                         testPositions = [
407                                 'tc-bc', 'bc-tc',
408                                 'tl-bl', 'bl-tl',
409                                 'tr-br', 'br-tr'
410                         ];
411
412                         panel = match.toolbar.panel;
413                         panel.show();
414
415                         elementRect = getElementRect(match.element);
416                         panelRect = tinymce.DOM.getRect(panel.getEl());
417                         contentAreaRect = tinymce.DOM.getRect(editor.getContentAreaContainer() || editor.getBody());
418
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;
423
424                         if (!editor.inline) {
425                                 contentAreaRect.w = editor.getDoc().documentElement.offsetWidth;
426                         }
427
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);
431                         }
432
433                         relPos = Rect.findBestRelativePosition(panelRect, elementRect, contentAreaRect, testPositions);
434
435                         if (relPos) {
436                                 each(testPositions.concat('inside'), function(pos) {
437                                         panel.classes.toggle('tinymce-inline-' + pos, pos == relPos);
438                                 });
439
440                                 relRect = Rect.relativePosition(panelRect, elementRect, relPos);
441                                 panel.moveTo(relRect.x, relRect.y);
442                         } else {
443                                 each(testPositions, function(pos) {
444                                         panel.classes.toggle('tinymce-inline-' + pos, false);
445                                 });
446
447                                 panel.classes.toggle('tinymce-inline-inside', true);
448
449                                 elementRect = Rect.intersect(contentAreaRect, elementRect);
450
451                                 if (elementRect) {
452                                         relPos = Rect.findBestRelativePosition(panelRect, elementRect, contentAreaRect, [
453                                                 'tc-tc', 'tl-tl', 'tr-tr'
454                                         ]);
455
456                                         if (relPos) {
457                                                 relRect = Rect.relativePosition(panelRect, elementRect, relPos);
458                                                 panel.moveTo(relRect.x, relRect.y);
459                                         } else {
460                                                 panel.moveTo(elementRect.x, elementRect.y);
461                                         }
462                                 } else {
463                                         panel.hide();
464                                 }
465                         }
466
467                         //drawRect(contentAreaRect, 'blue');
468                         //drawRect(elementRect, 'red');
469                         //drawRect(panelRect, 'green');
470                 }
471
472                 function repositionHandler() {
473                         function execute() {
474                                 if (editor.selection) {
475                                         reposition(findFrontMostMatch(editor.selection.getNode()));
476                                 }
477                         }
478
479                         tinymce.util.Delay.requestAnimationFrame(execute);
480                 }
481
482                 function bindScrollEvent() {
483                         if (!scrollContainer) {
484                                 scrollContainer = editor.selection.getScrollContainer() || editor.getWin();
485                                 tinymce.$(scrollContainer).on('scroll', repositionHandler);
486
487                                 editor.on('remove', function() {
488                                         tinymce.$(scrollContainer).off('scroll');
489                                 });
490                         }
491                 }
492
493                 function showContextToolbar(match) {
494                         var panel;
495
496                         if (match.toolbar.panel) {
497                                 match.toolbar.panel.show();
498                                 reposition(match);
499                                 return;
500                         }
501
502                         bindScrollEvent();
503
504                         panel = Factory.create({
505                                 type: 'floatpanel',
506                                 role: 'application',
507                                 classes: 'tinymce tinymce-inline',
508                                 layout: 'flex',
509                                 direction: 'column',
510                                 align: 'stretch',
511                                 autohide: false,
512                                 autofix: true,
513                                 fixed: true,
514                                 border: 1,
515                                 items: createToolbar(match.toolbar.items)
516                         });
517
518                         match.toolbar.panel = panel;
519                         panel.renderTo(document.body).reflow();
520                         reposition(match);
521                 }
522
523                 function hideAllContextToolbars() {
524                         tinymce.each(getContextToolbars(), function(toolbar) {
525                                 if (toolbar.panel) {
526                                         toolbar.panel.hide();
527                                 }
528                         });
529                 }
530
531                 function findFrontMostMatch(targetElm) {
532                         var i, y, parentsAndSelf, toolbars = getContextToolbars();
533
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])) {
538                                                 return {
539                                                         toolbar: toolbars[y],
540                                                         element: parentsAndSelf[i]
541                                                 };
542                                         }
543                                 }
544                         }
545
546                         return null;
547                 }
548
549                 editor.on('click keyup setContent', function(e) {
550                         // Only act on partial inserts
551                         if (e.type == 'setcontent' && !e.selection) {
552                                 return;
553                         }
554
555                         // Needs to be delayed to avoid Chrome img focus out bug
556                         tinymce.util.Delay.setEditorTimeout(editor, function() {
557                                 var match;
558
559                                 match = findFrontMostMatch(editor.selection.getNode());
560                                 if (match) {
561                                         hideAllContextToolbars();
562                                         showContextToolbar(match);
563                                 } else {
564                                         hideAllContextToolbars();
565                                 }
566                         });
567                 });
568
569                 editor.on('blur hide', hideAllContextToolbars);
570
571                 editor.on('ObjectResizeStart', function() {
572                         var match = findFrontMostMatch(editor.selection.getNode());
573
574                         if (match && match.toolbar.panel) {
575                                 match.toolbar.panel.hide();
576                         }
577                 });
578
579                 editor.on('nodeChange ResizeEditor ResizeWindow', repositionHandler);
580
581                 editor.on('remove', function() {
582                         tinymce.each(getContextToolbars(), function(toolbar) {
583                                 if (toolbar.panel) {
584                                         toolbar.panel.remove();
585                                 }
586                         });
587
588                         editor.contextToolbars = {};
589                 });
590         }
591
592         function fireSkinLoaded(editor) {
593                 return function() {
594                         if (editor.initialized) {
595                                 editor.fire('SkinLoaded');
596                         } else {
597                                 editor.on('init', function() {
598                                         editor.fire('SkinLoaded');
599                                 });
600                         }
601                 };
602         }
603
604         /**
605          * Renders the inline editor UI.
606          *
607          * @return {Object} Name/value object with theme data.
608          */
609         function renderInlineUI(args) {
610                 var panel, inlineToolbarContainer;
611
612                 if (settings.fixed_toolbar_container) {
613                         inlineToolbarContainer = DOM.select(settings.fixed_toolbar_container)[0];
614                 }
615
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;
621
622                                 if (scrollContainer) {
623                                         var bodyPos = DOM.getPos(body), scrollContainerPos = DOM.getPos(scrollContainer);
624
625                                         deltaX = Math.max(0, scrollContainerPos.x - bodyPos.x);
626                                         deltaY = Math.max(0, scrollContainerPos.y - bodyPos.y);
627                                 }
628
629                                 panel.fixed(false).moveRel(body, editor.rtl ? ['tr-br', 'br-tr'] : ['tl-bl', 'bl-tl', 'tr-br']).moveBy(deltaX, deltaY);
630                         }
631                 }
632
633                 function show() {
634                         if (panel) {
635                                 panel.show();
636                                 reposition();
637                                 DOM.addClass(editor.getBody(), 'mce-edit-focus');
638                         }
639                 }
640
641                 function hide() {
642                         if (panel) {
643                                 // We require two events as the inline float panel based toolbar does not have autohide=true
644                                 panel.hide();
645
646                                 // All other autohidden float panels will be closed below.
647                                 FloatPanel.hideAll();
648
649                                 DOM.removeClass(editor.getBody(), 'mce-edit-focus');
650                         }
651                 }
652
653                 function render() {
654                         if (panel) {
655                                 if (!panel.visible()) {
656                                         show();
657                                 }
658
659                                 return;
660                         }
661
662                         // Render a plain panel inside the inlineToolbarContainer if it's defined
663                         panel = self.panel = Factory.create({
664                                 type: inlineToolbarContainer ? 'panel' : 'floatpanel',
665                                 role: 'application',
666                                 classes: 'tinymce tinymce-inline',
667                                 layout: 'flex',
668                                 direction: 'column',
669                                 align: 'stretch',
670                                 autohide: false,
671                                 autofix: true,
672                                 fixed: !!inlineToolbarContainer,
673                                 border: 1,
674                                 items: [
675                                         settings.menubar === false ? null : {type: 'menubar', border: '0 0 1 0', items: createMenuButtons()},
676                                         createToolbars(settings.toolbar_items_size)
677                                 ]
678                         });
679
680                         // Add statusbar
681                         /*if (settings.statusbar !== false) {
682                                 panel.add({type: 'panel', classes: 'statusbar', layout: 'flow', border: '1 0 0 0', items: [
683                                         {type: 'elementpath'}
684                                 ]});
685                         }*/
686
687                         editor.fire('BeforeRenderUI');
688                         panel.renderTo(inlineToolbarContainer || document.body).reflow();
689
690                         addAccessibilityKeys(panel);
691                         show();
692                         addContextualToolbars();
693
694                         editor.on('nodeChange', reposition);
695                         editor.on('activate', show);
696                         editor.on('deactivate', hide);
697
698                         editor.nodeChanged();
699                 }
700
701                 settings.content_editable = true;
702
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);
707                         } else {
708                                 render();
709                         }
710                 });
711
712                 editor.on('blur hide', hide);
713
714                 // Remove the panel when the editor is removed
715                 editor.on('remove', function() {
716                         if (panel) {
717                                 panel.remove();
718                                 panel = null;
719                         }
720                 });
721
722                 // Preload skin css
723                 if (args.skinUiCss) {
724                         tinymce.DOM.styleSheetLoader.load(args.skinUiCss, fireSkinLoaded(editor));
725                 }
726
727                 return {};
728         }
729
730         /**
731          * Renders the iframe editor UI.
732          *
733          * @param {Object} args Details about target element etc.
734          * @return {Object} Name/value object with theme data.
735          */
736         function renderIframeUI(args) {
737                 var panel, resizeHandleCtrl, startSize;
738
739                 function switchMode() {
740                         return function(e) {
741                                 if (e.mode == 'readonly') {
742                                         panel.find('*').disabled(true);
743                                 } else {
744                                         panel.find('*').disabled(false);
745                                 }
746                         };
747                 }
748
749                 if (args.skinUiCss) {
750                         tinymce.DOM.styleSheetLoader.load(args.skinUiCss, fireSkinLoaded(editor));
751                 }
752
753                 // Basic UI layout
754                 panel = self.panel = Factory.create({
755                         type: 'panel',
756                         role: 'application',
757                         classes: 'tinymce',
758                         style: 'visibility: hidden',
759                         layout: 'stack',
760                         border: 1,
761                         items: [
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'}
765                         ]
766                 });
767
768                 if (settings.resize !== false) {
769                         resizeHandleCtrl = {
770                                 type: 'resizehandle',
771                                 direction: settings.resize,
772
773                                 onResizeStart: function() {
774                                         var elm = editor.getContentAreaContainer().firstChild;
775
776                                         startSize = {
777                                                 width: elm.clientWidth,
778                                                 height: elm.clientHeight
779                                         };
780                                 },
781
782                                 onResize: function(e) {
783                                         if (settings.resize == 'both') {
784                                                 resizeTo(startSize.width + e.deltaX, startSize.height + e.deltaY);
785                                         } else {
786                                                 resizeTo(null, startSize.height + e.deltaY);
787                                         }
788                                 }
789                         };
790                 }
791
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'},
796                                 resizeHandleCtrl
797                         ]});
798                 }
799
800                 editor.fire('BeforeRenderUI');
801                 editor.on('SwitchMode', switchMode());
802                 panel.renderBefore(args.targetNode).reflow();
803
804                 if (settings.readonly) {
805                         editor.setMode('readonly');
806                 }
807
808                 if (settings.width) {
809                         tinymce.DOM.setStyle(panel.getEl(), 'width', settings.width);
810                 }
811
812                 // Remove the panel when the editor is removed
813                 editor.on('remove', function() {
814                         panel.remove();
815                         panel = null;
816                 });
817
818                 // Add accesibility shortcuts
819                 addAccessibilityKeys(panel);
820                 addContextualToolbars();
821
822                 return {
823                         iframeContainer: panel.find('#iframe')[0].getEl(),
824                         editorContainer: panel.getEl()
825                 };
826         }
827
828         /**
829          * Renders the UI for the theme. This gets called by the editor.
830          *
831          * @param {Object} args Details about target element etc.
832          * @return {Object} Theme UI data items.
833          */
834         self.renderUI = function(args) {
835                 var skin = settings.skin !== false ? settings.skin || 'lightgray' : false;
836
837                 if (skin) {
838                         var skinUrl = settings.skin_url;
839
840                         if (skinUrl) {
841                                 skinUrl = editor.documentBaseURI.toAbsolute(skinUrl);
842                         } else {
843                                 skinUrl = tinymce.baseURL + '/skins/' + skin;
844                         }
845
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';
850                         } else {
851                                 args.skinUiCss = skinUrl + '/skin.min.css';
852                         }
853
854                         // Load content.min.css or content.inline.min.css
855                         editor.contentCSS.push(skinUrl + '/content' + (editor.inline ? '.inline' : '') + '.min.css');
856                 }
857
858                 // Handle editor setProgressState change
859                 editor.on('ProgressState', function(e) {
860                         self.throbber = self.throbber || new tinymce.ui.Throbber(self.panel.getEl('body'));
861
862                         if (e.state) {
863                                 self.throbber.show(e.time);
864                         } else {
865                                 self.throbber.hide();
866                         }
867                 });
868
869                 if (settings.inline) {
870                         return renderInlineUI(args);
871                 }
872
873                 return renderIframeUI(args);
874         };
875
876         self.resizeTo = resizeTo;
877         self.resizeBy = resizeBy;
878 });