OXIESEC PANEL

Name	Size	Modified	Perms
📁 ..	-	02/20/2020 06:46:02 AM	rwxr-xr-x
📄 Iframe.ts	4.09 KB	02/20/2020 06:34:03 AM	rw-r--r--
📄 Inline.ts	6.15 KB	02/20/2020 06:34:03 AM	rw-r--r--

Editing: Iframe.ts

/**
 * Copyright (c) Tiny Technologies, Inc. All rights reserved.
 * Licensed under the LGPL or a commercial license.
 * For LGPL see License.txt in the project root for license information.
 * For commercial licenses see https://www.tiny.cloud/
 */

import { AlloyComponent, Attachment, Disabling, SplitToolbar } from '@ephox/alloy';
import { Cell, Option } from '@ephox/katamari';
import { Body, Element, Selectors, Position } from '@ephox/sugar';
import Editor from 'tinymce/core/api/Editor';
import DOMUtils from 'tinymce/core/api/dom/DOMUtils';
import * as Settings from '../api/Settings';
import OuterContainer from '../ui/general/OuterContainer';
import { identifyMenus } from '../ui/menus/menubar/Integration';
import { identifyButtons } from '../ui/toolbar/Integration';
import { iframe as loadIframeSkin } from './../ui/skin/Loader';
import { RenderUiComponents, RenderUiConfig, RenderArgs, ModeRenderInfo } from '../Render';
import { UiFactoryBackstage } from '../backstage/Backstage';
import Events from '../api/Events';

const DOM = DOMUtils.DOM;

const render = (editor: Editor, uiComponents: RenderUiComponents, rawUiConfig: RenderUiConfig, backstage: UiFactoryBackstage, args: RenderArgs): ModeRenderInfo => {
  loadIframeSkin(editor);

Attachment.attachSystemAfter(Element.fromDom(args.targetNode), uiComponents.mothership);
  Attachment.attachSystem(Body.body(), uiComponents.uiMothership);

editor.on('init', () => {
    OuterContainer.setToolbar(
      uiComponents.outerContainer,
      identifyButtons(editor, rawUiConfig, {backstage}, Option.none())
    );

OuterContainer.setMenubar(
      uiComponents.outerContainer,
      identifyMenus(editor, rawUiConfig)
    );

OuterContainer.setSidebar(
      uiComponents.outerContainer,
      rawUiConfig.sidebar
    );

// Force an update of the ui components disabled states if in readonly mode
    if (editor.readonly) {
      handleSwitchMode(uiComponents)({mode: 'readonly'});
    }

const lastDimensions = Cell<Position>(Position(0, 0));

const window = editor.contentWindow;

const resize = () => {
      const last = lastDimensions.get();
      if (last.left() !== window.innerWidth || last.top() !== window.innerHeight) {
        const next = Position(window.innerWidth, window.innerHeight);
        lastDimensions.set(next);
        Events.fireResizeContent(editor);
      }
    };

DOM.bind(window, 'resize', resize);

const removeResize = function () {
      DOM.unbind(window, 'resize', resize);
    };

editor.on('remove', removeResize);
  });

const socket = OuterContainer.getSocket(uiComponents.outerContainer).getOrDie('Could not find expected socket element');

editor.on('SwitchMode', handleSwitchMode(uiComponents));

if (Settings.isReadOnly(editor)) {
    editor.setMode('readonly');
  }

editor.addCommand('ToggleSidebar', (ui: boolean, value: string) => {
    OuterContainer.toggleSidebar(uiComponents.outerContainer, value);
    editor.fire('ToggleSidebar');
  });

editor.addQueryValueHandler('ToggleSidebar', () => {
    return OuterContainer.whichSidebar(uiComponents.outerContainer);
  });

const drawer = Settings.getToolbarDrawer(editor);

const refreshDrawer = () => {
    const toolbar = OuterContainer.getToolbar(uiComponents.outerContainer);
    toolbar.each(SplitToolbar.refresh);
  };

if (drawer === Settings.ToolbarDrawer.sliding || drawer === Settings.ToolbarDrawer.floating) {
    editor.on('ResizeContent', refreshDrawer);
  }

return {
    iframeContainer: socket.element().dom(),
    editorContainer: uiComponents.outerContainer.element().dom(),
  };
};

export default {
  render,
  getBehaviours: (_) => []
};