OXIESEC PANEL

Name	Size	Modified	Perms
📁 ..	-	02/20/2020 06:40:48 AM	rwxr-xr-x
📄 AlertBanner.ts	2 KB	02/20/2020 06:38:31 AM	rw-r--r--
📄 Button.ts	5.25 KB	02/20/2020 06:38:32 AM	rw-r--r--
📄 Checkbox.ts	3.22 KB	02/20/2020 06:38:33 AM	rw-r--r--
📄 FormEvents.ts	1.8 KB	02/20/2020 06:38:35 AM	rw-r--r--
📄 FormValues.ts	2.85 KB	02/20/2020 06:38:35 AM	rw-r--r--
📄 HtmlPanel.ts	1.18 KB	02/20/2020 06:38:36 AM	rw-r--r--
📄 Listbox.ts	1.39 KB	02/20/2020 06:38:36 AM	rw-r--r--
📄 NavigableObject.ts	2.09 KB	02/20/2020 06:38:37 AM	rw-r--r--
📄 Notification.ts	6.05 KB	02/20/2020 06:38:37 AM	rw-r--r--
📄 OuterContainer.ts	6.77 KB	02/20/2020 06:38:38 AM	rw-r--r--
📄 PanelButton.ts	2.52 KB	02/20/2020 06:38:38 AM	rw-r--r--
📄 Tooltips.ts	1.23 KB	02/20/2020 06:38:39 AM	rw-r--r--
📄 UiFactory.ts	5.48 KB	02/20/2020 06:38:39 AM	rw-r--r--

Editing: OuterContainer.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,
  AlloySpec,
  Composite,
  Keying,
  RawDomSchema,
  Sketcher,
  Toolbar as AlloyToolbar,
  UiSketcher,
  Behaviour,
  SplitToolbar
} from '@ephox/alloy';
import { FieldSchema } from '@ephox/boulder';
import { Arr, Option } from '@ephox/katamari';

import SilverMenubar from '../menus/menubar/SilverMenubar';
import * as Sidebar from '../sidebar/Sidebar';
import * as Throbber from '../throbber/Throbber';
import { renderMoreToolbar, renderToolbarGroup, renderToolbar, ToolbarSpec } from '../toolbar/CommonToolbar';
import { ToolbarDrawer } from '../../api/Settings';

export interface OuterContainerSketchSpec extends Sketcher.CompositeSketchSpec {
  dom: RawDomSchema;
  components: AlloySpec[];
  behaviours: Record<string, Behaviour.ConfiguredBehaviour<any, any>>;
}

export interface OuterContainerSketchDetail extends Sketcher.CompositeSketchDetail {
  dom: RawDomSchema;
  uid: string;
  behaviours: Record<string, Behaviour.ConfiguredBehaviour<any, any>>;
}
export interface OuterContainerSketch extends Sketcher.CompositeSketch<OuterContainerSketchSpec, OuterContainerSketchDetail>, OuterContainerApis {
}

interface OuterContainerApis {
  getSocket: (comp: AlloyComponent) => Option<AlloyComponent>;
  setSidebar: (comp: AlloyComponent, panelConfigs: Sidebar.SidebarConfig) => void;
  toggleSidebar: (comp: AlloyComponent, name: string) => void;
  whichSidebar: (comp: AlloyComponent) => string | null;
  // Maybe just change to ToolbarAnchor.
  getToolbar: (comp: AlloyComponent) => Option<AlloyComponent>;
  setToolbar: (comp: AlloyComponent, groups) => void;
  getMoreButton: (comp: AlloyComponent) => Option<AlloyComponent>;
  getThrobber: (comp: AlloyComponent) => Option<AlloyComponent>;
  focusToolbar: (comp: AlloyComponent) => void;
  setMenubar: (comp: AlloyComponent, groups) => void;
  focusMenubar: (comp: AlloyComponent) => void;
}

const factory: UiSketcher.CompositeSketchFactory<OuterContainerSketchDetail, OuterContainerSketchSpec> = function (detail, components, spec) {
  const apis: OuterContainerApis = {
    getSocket(comp) {
      return Composite.parts.getPart(comp, detail, 'socket');
    },
    setSidebar(comp, panelConfigs) {
      Composite.parts.getPart(comp, detail, 'sidebar').each(
        (sidebar) => Sidebar.setSidebar(sidebar, panelConfigs)
      );
    },
    toggleSidebar(comp, name) {
      Composite.parts.getPart(comp, detail, 'sidebar').each(
        (sidebar) => Sidebar.toggleSidebar(sidebar, name)
      );
    },
    whichSidebar(comp) {
      return Composite.parts.getPart(comp, detail, 'sidebar').bind(
        Sidebar.whichSidebar
      ).getOrNull();
    },
    getToolbar(comp) {
      return Composite.parts.getPart(comp, detail, 'toolbar');
    },
    setToolbar(comp, groups) {
      Composite.parts.getPart(comp, detail, 'toolbar').each(function (toolbar) {
        AlloyToolbar.setGroups(toolbar, groups);
      });
    },
    getMoreButton(comp) {
      const toolbar = Composite.parts.getPart(comp, detail, 'toolbar');
      return toolbar.bind((toolbar) => {
        return SplitToolbar.getMoreButton(toolbar);
      });
    },
    getThrobber(comp) {
      return Composite.parts.getPart(comp, detail, 'throbber');
    },
    focusToolbar(comp) {
      Composite.parts.getPart(comp, detail, 'toolbar').each(function (toolbar) {
        Keying.focusIn(toolbar);
      });
    },
    setMenubar(comp, menus) {
      Composite.parts.getPart(comp, detail, 'menubar').each(function (menubar) {
        SilverMenubar.setMenus(menubar, menus);
      });
    },
    focusMenubar(comp) {
      Composite.parts.getPart(comp, detail, 'menubar').each(function (menubar) {
        SilverMenubar.focus(menubar);
      });
    }
  };

return {
    uid: detail.uid,
    dom: detail.dom,
    components,
    apis,
    behaviours: detail.behaviours
  };
};

const partSocket = Composite.partType.optional({
  // factory: Fun.identity,
  name: 'socket',
  schema: [
    FieldSchema.strict('dom')
  ]
});

const partSidebar = Composite.partType.optional({
  factory: {
    sketch: Sidebar.renderSidebar
  },
  name: 'sidebar',
  schema: [
    FieldSchema.strict('dom')
  ]
});

const partThrobber = Composite.partType.optional({
  factory: {
    sketch: Throbber.renderThrobber
  },
  name: 'throbber',
  schema: [
    FieldSchema.strict('dom')
  ]
});

export default Sketcher.composite({
  name: 'OuterContainer',
  factory,
  configFields: [
    FieldSchema.strict('dom'),
    FieldSchema.strict('behaviours')
  ],
  partFields: [
    partMenubar,
    partToolbar,
    partSocket,
    partSidebar,
    partThrobber
  ],

apis: {
    getSocket(apis, comp) {
      return apis.getSocket(comp);
    },
    setSidebar(apis, comp, panelConfigs) {
      apis.setSidebar(comp, panelConfigs);
    },
    toggleSidebar(apis, comp, name) {
      apis.toggleSidebar(comp, name);
    },
    whichSidebar(apis, comp) {
      return apis.whichSidebar(comp);
    },
    getToolbar(apis, comp) {
      return apis.getToolbar(comp);
    },
    setToolbar(apis, comp, grps) {
      const groups = Arr.map(grps, function (grp) {
        return renderToolbarGroup(grp);
      });

apis.setToolbar(comp, groups);
    },
    getMoreButton(apis, comp) {
      return apis.getMoreButton(comp);
    },
    getThrobber(apis, comp) {
      return apis.getThrobber(comp);
    },
    // FIX: Dupe
    setMenubar(apis, comp, menus) {
      apis.setMenubar(comp, menus);
    },
    focusMenubar(apis, comp) {
      apis.focusMenubar(comp);
    },
    focusToolbar(apis, comp) {
      apis.focusToolbar(comp);
    }
  }
}) as OuterContainerSketch;