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: PanelButton.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 {
  AlloySpec,
  Behaviour,
  Dropdown as AlloyDropdown,
  RawDomSchema,
  SketchSpec,
  Unselecting,
  Tabstopping,
  AlloyComponent,
  LayoutTypes
} from '@ephox/alloy';
import { Future, Id, Option, Merger } from '@ephox/katamari';
import { UiFactoryBackstageShared } from '../../backstage/Backstage';

import * as MenuParts from '../menus/menu/MenuParts';
import { createTieredDataFrom, createPartialChoiceMenu } from 'tinymce/themes/silver/ui/menus/menu/SingleMenu';
import { deriveMenuMovement } from 'tinymce/themes/silver/ui/menus/menu/MenuMovement';
import { Element } from '@ephox/sugar';
import ItemResponse from '../menus/item/ItemResponse';

export interface SwatchPanelButtonFoo {
  dom: RawDomSchema;
  components: AlloySpec[];
  fetch: (callback: Function) => void;
  getHotspot?: (comp: AlloyComponent) => Option<AlloyComponent>;
  onItemAction: (value) => void;
  layouts?: Option<{
    onLtr: (elem: Element) => LayoutTypes.AnchorLayout[];
    onRtl: (elem: Element) => LayoutTypes.AnchorLayout[];
  }>;
}

export const renderPanelButton = (spec: SwatchPanelButtonFoo, sharedBackstage: UiFactoryBackstageShared): SketchSpec => {
  return AlloyDropdown.sketch({
    dom: spec.dom,
    components: spec.components,

toggleClass: 'mce-active',

dropdownBehaviours: Behaviour.derive([
      Unselecting.config({}),
      Tabstopping.config({})
    ]),
    // getHotspot: spec.getHotspot,
    layouts: spec.layouts,
    sandboxClasses: ['tox-dialog__popups'],

lazySink: sharedBackstage.getSink,
    fetch: () => {
      return Future.nu((callback) => {
        return spec.fetch(callback);
      }).map((items) => {
        return Option.from(createTieredDataFrom(
          Merger.deepMerge(
            createPartialChoiceMenu(
              Id.generate('menu-value'),
              items,
              (value) => {
                spec.onItemAction(value);
              },
              5,
              'color',
              ItemResponse.CLOSE_ON_EXECUTE,
              // No colour is ever selected on opening
              () => false,
              sharedBackstage.providers
            ),
            {
              movement: deriveMenuMovement(5, 'color')
            }
          )
        ));
      });
    },

parts: {
      menu: MenuParts.part(false, 1, 'color')
    }
  });
};