OXIESEC PANEL

Name	Size	Modified	Perms
📁 ..	-	02/20/2020 06:41:08 AM	rwxr-xr-x
📄 MenuClasses.ts	761 bytes	02/20/2020 06:41:02 AM	rw-r--r--
📄 MenuConversion.ts	3.8 KB	02/20/2020 06:41:02 AM	rw-r--r--
📄 MenuMovement.ts	1.83 KB	02/20/2020 06:41:03 AM	rw-r--r--
📄 MenuParts.ts	1.58 KB	02/20/2020 06:41:03 AM	rw-r--r--
📄 MenuStructures.ts	3.22 KB	02/20/2020 06:41:04 AM	rw-r--r--
📄 MenuWidgets.ts	1.65 KB	02/20/2020 06:41:05 AM	rw-r--r--
📄 NestedMenus.ts	1.48 KB	02/20/2020 06:41:06 AM	rw-r--r--
📄 SingleMenu.ts	8.38 KB	02/20/2020 06:41:06 AM	rw-r--r--

Editing: MenuMovement.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 { Types } from '@ephox/bridge';

import { markers as getMenuMarkers } from './MenuParts';
import { selectableClass, colorClass } from '../item/ItemClasses';
import { MenuTypes, KeyingConfigSpec } from '@ephox/alloy';

export const deriveMenuMovement = (columns: number | 'auto', presets: Types.PresetTypes): MenuTypes.MenuMovementSpec => {
  const menuMarkers = getMenuMarkers(presets);
  if (columns === 1) {
    return { mode: 'menu', moveOnTab: true } as MenuTypes.MenuNormalMovementSpec;
  } else if (columns === 'auto') {
    return {
      mode: 'grid',
      selector: '.' + menuMarkers.item,
      initSize: {
        numColumns: 1,
        numRows: 1
      }
    } as MenuTypes.MenuGridMovementSpec;
  } else {
    const rowClass = presets === 'color' ? 'tox-swatches__row' : 'tox-collection__group';
    return {
      mode: 'matrix',
      rowSelector: '.' + rowClass
    } as MenuTypes.MenuMatrixMovementSpec;
  }
};

export const deriveCollectionMovement = (columns: number | 'auto', presets: Types.PresetTypes): KeyingConfigSpec => {
  if (columns === 1) {
    return {
      mode: 'menu',
      moveOnTab: false,
      selector: '.tox-collection__item'
    };
  } else if (columns === 'auto') {
    return {
      mode: 'flatgrid',
      selector: '.' + 'tox-collection__item',
      initSize: {
        numColumns: 1,
        numRows: 1
      }
    };
  } else {
    return {
      mode: 'matrix',
      selectors: {
        row: presets === 'color' ? '.tox-swatches__row' : '.tox-collection__group',
        cell: presets === 'color' ? `.${colorClass}` : `.${selectableClass}`
      }

};
  }
};