OXIESEC PANEL

Name	Size	Modified	Perms
📁 ..	-	02/20/2020 06:40:48 AM	rwxr-xr-x
📄 DialogChannels.ts	659 bytes	02/20/2020 06:39:09 AM	rw-r--r--
📄 SilverDialog.ts	2.28 KB	02/20/2020 06:39:11 AM	rw-r--r--
📄 SilverDialogBody.ts	3.49 KB	02/20/2020 06:39:10 AM	rw-r--r--
📄 SilverDialogCommon.ts	5.04 KB	02/20/2020 06:39:11 AM	rw-r--r--
📄 SilverDialogEvents.ts	4.24 KB	02/20/2020 06:39:12 AM	rw-r--r--
📄 SilverDialogFooter.ts	3.33 KB	02/20/2020 06:39:12 AM	rw-r--r--
📄 SilverDialogHeader.ts	3.64 KB	02/20/2020 06:39:13 AM	rw-r--r--
📄 SilverDialogInstanceApi.ts	4.83 KB	02/20/2020 06:39:13 AM	rw-r--r--
📄 SilverInlineDialog.ts	4.17 KB	02/20/2020 06:39:14 AM	rw-r--r--
📄 SilverUrlDialog.ts	5.45 KB	02/20/2020 06:39:15 AM	rw-r--r--
📄 SilverUrlDialogInstanceApi.ts	1.52 KB	02/20/2020 06:39:15 AM	rw-r--r--

Editing: SilverDialogCommon.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,
  AlloyTriggers,
  Behaviour,
  DomFactory,
  GuiFactory,
  ModalDialog,
  Reflecting,
  SystemEvents,
  Focusing,
  AlloyEvents,
  NativeEvents,
  Keying,
  AlloyParts,
  AlloySpec,
} from '@ephox/alloy';
import { DialogManager, Types } from '@ephox/bridge';
import { Option } from '@ephox/katamari';
import { Attr, Body, Class, Node } from '@ephox/sugar';

import { RepresentingConfigs } from '../alien/RepresentingConfigs';
import { UiFactoryBackstage } from '../../backstage/Backstage';
import { FormBlockEvent, formCancelEvent } from '../general/FormEvents';
import NavigableObject from '../general/NavigableObject';
import { dialogChannel } from './DialogChannels';
import { renderModalHeader } from './SilverDialogHeader';

export interface WindowExtra<T> {
  redial?: (newConfig: Types.Dialog.DialogApi<T>) => DialogManager.DialogInit<T>;
  closeWindow: () => void;
}

export interface DialogSpec {
  header: AlloySpec;
  body: AlloyParts.ConfiguredPart;
  footer: Option<AlloyParts.ConfiguredPart>;
  extraClasses: string[];
  extraStyles: Record<string, string>;
  extraBehaviours: Behaviour.NamedConfiguredBehaviour<any, any>[];
}

const getHeader = (title: string, backstage: UiFactoryBackstage) => {
  return renderModalHeader({
    title: backstage.shared.providers.translate(title),
    draggable: true
  }, backstage.shared.providers);
};

const renderModalDialog = (spec: DialogSpec, initialData, dialogEvents: AlloyEvents.AlloyEventKeyAndHandler<any>[], backstage: UiFactoryBackstage) => {
  const updateState = (_comp, incoming) => {
    return Option.some(incoming);
  };

return GuiFactory.build(
    ModalDialog.sketch({
      lazySink: backstage.shared.getSink,
      // TODO: Disable while validating
      onEscape(c) {
        AlloyTriggers.emit(c, formCancelEvent);
        return Option.some(true);
      },

useTabstopAt: (elem) => {
        return !NavigableObject.isPseudoStop(elem) && (
          Node.name(elem) !== 'button' || Attr.get(elem, 'disabled') !== 'disabled'
        );
      },

modalBehaviours: Behaviour.derive([
        Reflecting.config({
          channel: dialogChannel,
          updateState,
          initialData
        }),
        RepresentingConfigs.memory({ }),
        Focusing.config({}),
        AddEventsBehaviour.config('execute-on-form', dialogEvents.concat([
          AlloyEvents.runOnSource(NativeEvents.focusin(), (comp, se) => {
            Keying.focusIn(comp);
          })
        ])),
        AddEventsBehaviour.config('scroll-lock', [
          AlloyEvents.runOnAttached(() => {
            Class.add(Body.body(), 'tox-dialog__disable-scroll');
          }),
          AlloyEvents.runOnDetached(() => {
            Class.remove(Body.body(), 'tox-dialog__disable-scroll');
          }),
        ]),
        ...spec.extraBehaviours
      ]),

eventOrder: {
        [SystemEvents.execute()]: [ 'execute-on-form' ],
        [SystemEvents.receive()]: [ 'reflecting', 'receiving' ],
        [SystemEvents.attachedToDom()]: [ 'scroll-lock', 'reflecting', 'messages', 'execute-on-form', 'alloy.base.behaviour' ],
        [SystemEvents.detachedFromDom()]: [ 'alloy.base.behaviour', 'execute-on-form', 'messages', 'reflecting', 'scroll-lock' ],
      },

dom: {
        tag: 'div',
        classes: [ 'tox-dialog' ].concat(spec.extraClasses),
        styles: {
          position: 'relative',
          ...spec.extraStyles
        }
      },
      components: [
        spec.header,
        spec.body,
        ...spec.footer.toArray()
      ],
      dragBlockClass: 'tox-dialog-wrap',
      parts: {
        blocker: {
          dom: DomFactory.fromHtml('<div class="tox-dialog-wrap"></div>'),
          components: [
            {
              dom: {
                tag: 'div',
                classes: [ 'tox-dialog-wrap__backdrop' ]
              }
            }
          ]
        }
      }
    })
  );
};

export {
  getHeader,
  getEventExtras,
  renderModalDialog
};