OXIESEC PANEL

Name	Size	Modified	Perms
📁 ..	-	02/20/2020 06:45:48 AM	rwxr-xr-x
📄 AndroidRealm.ts	2.43 KB	02/20/2020 06:32:39 AM	rw-r--r--
📄 Buttons.ts	2.4 KB	02/20/2020 06:32:40 AM	rw-r--r--
📄 ColorSlider.ts	3.21 KB	02/20/2020 06:32:40 AM	rw-r--r--
📄 CommonRealm.ts	1.49 KB	02/20/2020 06:32:41 AM	rw-r--r--
📄 Dropup.ts	2.38 KB	02/20/2020 06:32:41 AM	rw-r--r--
📄 FontSizeSlider.ts	1.34 KB	02/20/2020 06:32:42 AM	rw-r--r--
📄 HeadingSlider.ts	1.63 KB	02/20/2020 06:32:42 AM	rw-r--r--
📄 ImagePicker.ts	2.13 KB	02/20/2020 06:32:43 AM	rw-r--r--
📄 Inputs.ts	2.86 KB	02/20/2020 06:32:43 AM	rw-r--r--
📄 IosRealm.ts	2.65 KB	02/20/2020 06:32:44 AM	rw-r--r--
📄 LinkButton.ts	2.33 KB	02/20/2020 06:32:45 AM	rw-r--r--
📄 OuterContainer.ts	953 bytes	02/20/2020 06:32:45 AM	rw-r--r--
📄 SerialisedDialog.ts	8.2 KB	02/20/2020 06:32:46 AM	rw-r--r--
📄 SizeSlider.ts	2.32 KB	02/20/2020 06:32:46 AM	rw-r--r--
📄 StylesMenu.ts	6.51 KB	02/20/2020 06:32:47 AM	rw-r--r--
📄 ToolbarWidgets.ts	645 bytes	02/20/2020 06:32:47 AM	rw-r--r--

Editing: StylesMenu.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, AlloyEvents, Behaviour, Button, GuiFactory, Memento, Menu, Representing,
    TieredMenu, Toggling, Transitioning
} from '@ephox/alloy';
import { Objects } from '@ephox/boulder';
import { Arr, Merger, Obj, Option } from '@ephox/katamari';
import { Css, SelectorFind, Width } from '@ephox/sugar';

import Receivers from '../channels/Receivers';
import Styles from '../style/Styles';
import Scrollable from '../touch/scroll/Scrollable';

const getValue = function (item): string {
  return Objects.readOptFrom<string>(item, 'format').getOr(item.title);
};

const convert = function (formats, memMenuThunk) {
  const mainMenu = makeMenu('Styles', [
  ].concat(
    Arr.map(formats.items, function (k) {
      return makeItem(getValue(k), k.title, k.isSelected(), k.getPreview(), Objects.hasKey(formats.expansions, getValue(k)));
    })
  ), memMenuThunk, false);

const submenus = Obj.map(formats.menus, function (menuItems, menuName) {
    const items = Arr.map(menuItems, function (item) {
      return makeItem(
        getValue(item),
        item.title,
        item.isSelected !== undefined ? item.isSelected() : false,
        item.getPreview !== undefined ? item.getPreview() : '',
        Objects.hasKey(formats.expansions, getValue(item))
      );
    });
    return makeMenu(menuName, items, memMenuThunk, true);
  });

const menus = Merger.deepMerge(submenus, Objects.wrap('styles', mainMenu));

const tmenu = TieredMenu.tieredData('styles', menus, formats.expansions);

return {
    tmenu
  };
};

const makeMenu = function (value, items, memMenuThunk, collapsable) {
  return {
    value,
    dom: {
      tag: 'div'
    },
    components: [
      Button.sketch({
        dom: {
          tag: 'div',
          classes: [ Styles.resolve('styles-collapser') ]
        },
        components: collapsable ? [
          {
            dom: {
              tag: 'span',
              classes: [ Styles.resolve('styles-collapse-icon') ]
            }
          },
          GuiFactory.text(value)
        ] : [ GuiFactory.text(value) ],
        action (item) {
          if (collapsable) {
            const comp = memMenuThunk().get(item);
            TieredMenu.collapseMenu(comp);
          }
        }
      }),
      {
        dom: {
          tag: 'div',
          classes: [ Styles.resolve('styles-menu-items-container') ]
        },
        components: [
          Menu.parts().items({ })
        ],

behaviours: Behaviour.derive([
          AddEventsBehaviour.config('adhoc-scrollable-menu', [
            AlloyEvents.runOnAttached(function (component, simulatedEvent) {
              Css.set(component.element(), 'overflow-y', 'auto');
              Css.set(component.element(), '-webkit-overflow-scrolling', 'touch');
              Scrollable.register(component.element());
            }),

AlloyEvents.runOnDetached(function (component) {
              Css.remove(component.element(), 'overflow-y');
              Css.remove(component.element(), '-webkit-overflow-scrolling');
              Scrollable.deregister(component.element());
            })
          ])
        ])
      }
    ],
    items,
    menuBehaviours: Behaviour.derive([
      Transitioning.config({
        initialState: 'after',
        routes: Transitioning.createTristate('before', 'current', 'after', {
          transition: {
            property: 'transform',
            transitionClass: 'transitioning'
          }
        })
      })
    ])
  };
};

const sketch = function (settings) {
  const dataset = convert(settings.formats, function () {
    return memMenu;
  });
  // Turn settings into a tiered menu data.

const memMenu = Memento.record(TieredMenu.sketch({
    dom: {
      tag: 'div',
      classes: [ Styles.resolve('styles-menu') ]
    },
    components: [ ],

// Focus causes issues when the things being focused are offscreen.
    fakeFocus: true,
    // For animations, need things to stay around in the DOM (at least until animation is done)
    stayInDom: true,

onExecute (tmenu, item) {
      const v = Representing.getValue(item);
      settings.handle(item, v.value);
      return Option.none();
    },
    onEscape () {
      return Option.none();
    },
    onOpenMenu (container, menu) {
      const w = Width.get(container.element());
      Width.set(menu.element(), w);
      Transitioning.jumpTo(menu, 'current');
    },
    onOpenSubmenu (container, item, submenu) {
      const w = Width.get(container.element());
      const menu = SelectorFind.ancestor(item.element(), '[role="menu"]').getOrDie('hacky');
      const menuComp = container.getSystem().getByDom(menu).getOrDie();

Width.set(submenu.element(), w);

Transitioning.progressTo(menuComp, 'before');
      Transitioning.jumpTo(submenu, 'after');
      Transitioning.progressTo(submenu, 'current');
    },

onCollapseMenu (container, item, menu) {
      const submenu = SelectorFind.ancestor(item.element(), '[role="menu"]').getOrDie('hacky');
      const submenuComp = container.getSystem().getByDom(submenu).getOrDie();
      Transitioning.progressTo(submenuComp, 'after');
      Transitioning.progressTo(menu, 'current');
    },

navigateOnHover: false,

highlightImmediately: true,
    data: dataset.tmenu,

markers: {
      backgroundMenu: Styles.resolve('styles-background-menu'),
      menu: Styles.resolve('styles-menu'),
      selectedMenu: Styles.resolve('styles-selected-menu'),
      item: Styles.resolve('styles-item'),
      selectedItem: Styles.resolve('styles-selected-item')
    }
  }));

return memMenu.asSpec();
};

export default {
  sketch
};