OXIESEC PANEL

	Name	Size	Modified	Perms
	📁 ..	-	02/20/2020 06:40:48 AM	rwxr-xr-x
	📄 Sidebar.ts	7.81 KB	02/20/2020 06:38:44 AM	rw-r--r--

Editing: Sidebar.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 {
  AddEventsBehaviour,
  AlloyComponent,
  AlloyEvents,
  AlloyTriggers,
  Behaviour,
  Composing,
  CustomEvent,
  Replacing,
  Sliding,
  SystemEvents,
  Tabstopping,
  Focusing,
  SlotContainer,
  SlotContainerTypes,
} from '@ephox/alloy';
import { Sidebar as BridgeSidebar } from '@ephox/bridge';
import { HTMLElement } from '@ephox/dom-globals';
import { Arr, Id, Option, Obj, Cell, Fun } from '@ephox/katamari';
import { Css, Width } from '@ephox/sugar';
import Editor from 'tinymce/core/api/Editor';

import { ComposingConfigs } from '../alien/ComposingConfigs';
import { SimpleBehaviours } from '../alien/SimpleBehaviours';
import { onControlAttached, onControlDetached } from 'tinymce/themes/silver/ui/controls/Controls';
import { ValueSchema } from '@ephox/boulder';

export type SidebarConfig = Record<string, BridgeSidebar.SidebarApi>;

const setup = (editor: Editor) => {
  const { sidebars } = editor.ui.registry.getAll();

// Setup each registered sidebar
  Arr.each(Obj.keys(sidebars), (name) => {
    const spec = sidebars[name];
    const isActive = () => Option.from(editor.queryCommandValue('ToggleSidebar')).is(name);
    editor.ui.registry.addToggleButton(name, {
      icon: spec.icon,
      tooltip: spec.tooltip,
      onAction: (buttonApi) => {
        editor.execCommand('ToggleSidebar', false, name);
        buttonApi.setActive(isActive());
      },
      onSetup: (buttonApi) => {
        const handleToggle = () => buttonApi.setActive(isActive());
        editor.on('ToggleSidebar', handleToggle);
        return () => {
          editor.off('ToggleSidebar', handleToggle);
        };
      }
    });
  });
};

const getApi = (comp: AlloyComponent): BridgeSidebar.SidebarInstanceApi => {
  return {
    element: (): HTMLElement => {
      return comp.element().dom();
    }
  };
};

const makePanels = (parts: SlotContainerTypes.SlotContainerParts, panelConfigs: SidebarConfig) => {
  const specs = Arr.map(Obj.keys(panelConfigs), (name) => {
    const spec = panelConfigs[name];
    const bridged = ValueSchema.getOrDie(BridgeSidebar.createSidebar(spec));
    return {
      name,
      getApi,
      onSetup: bridged.onSetup,
      onShow: bridged.onShow,
      onHide: bridged.onHide
    };
  });

return Arr.map(specs, (spec) => {
    const editorOffCell = Cell(Fun.noop);
    return parts.slot(
      spec.name,
      {
        dom: {
          tag: 'div',
          classes: ['tox-sidebar__pane']
        },
        behaviours: SimpleBehaviours.unnamedEvents([
          onControlAttached(spec, editorOffCell),
          onControlDetached(spec, editorOffCell),
          AlloyEvents.run<SystemEvents.AlloySlotVisibilityEvent>(SystemEvents.slotVisibility(), (sidepanel, se) => {
            const data = se.event();
            const optSidePanelSpec = Arr.find(specs, (config) => config.name === data.name());
            optSidePanelSpec.each((sidePanelSpec) => {
              const handler = data.visible() ? sidePanelSpec.onShow : sidePanelSpec.onHide;
              handler(sidePanelSpec.getApi(sidepanel));
            });
          })
        ])
      }
    );
  });
};

const makeSidebar = (panelConfigs: SidebarConfig) => SlotContainer.sketch((parts) => {
  return {
    dom: {
      tag: 'div',
      classes: ['tox-sidebar__pane-container'],
    },
    components: makePanels(parts, panelConfigs),
    slotBehaviours: SimpleBehaviours.unnamedEvents([
      AlloyEvents.runOnAttached((slotContainer) => SlotContainer.hideAllSlots(slotContainer))
    ])
  };
});

const setSidebar = (sidebar: AlloyComponent, panelConfigs: SidebarConfig) => {
  const optSlider = Composing.getCurrent(sidebar);
  optSlider.each((slider) => Replacing.set(slider, [makeSidebar(panelConfigs)]));
};

interface FixSizeEvent extends CustomEvent {
  width: () => string;
}
const fixSize = Id.generate('FixSizeEvent');
const autoSize = Id.generate('AutoSizeEvent');

export {
  setSidebar,
  toggleSidebar,
  whichSidebar,
  renderSidebar,
  setup
};