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: SilverDialogHeader.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,
  AlloyTriggers,
  Behaviour,
  Button,
  Container,
  DomFactory,
  Dragging,
  GuiFactory,
  ModalDialog,
  Reflecting,
} from '@ephox/alloy';
import { Option } from '@ephox/katamari';
import { SelectorFind } from '@ephox/sugar';

import { UiFactoryBackstageProviders } from '../../backstage/Backstage';
import { formCancelEvent } from '../general/FormEvents';
import { titleChannel } from './DialogChannels';

export interface WindowHeaderFoo {
  title: string;
  draggable: boolean;
}

const renderTitle = (foo: WindowHeaderFoo, id: Option<string>, providersBackstage: UiFactoryBackstageProviders): AlloySpec => {
  const renderComponents = (data: WindowHeaderFoo) => [ GuiFactory.text(providersBackstage.translate(data.title)) ];

return {
    dom: {
      tag: 'div',
      classes: [ 'tox-dialog__title' ],
      attributes: {
        ...id.map((x) => ({id: x}) as {id?: string}).getOr({})
      }
    },
    components: renderComponents(foo),
    behaviours: Behaviour.derive([
      Reflecting.config({
        channel: titleChannel,
        renderComponents
      })
    ])
  };
};

const renderModalHeader = (foo: WindowHeaderFoo, providersBackstage: UiFactoryBackstageProviders): AlloySpec => {
  const pTitle = ModalDialog.parts().title(
    renderTitle(foo, Option.none(), providersBackstage)
  );

const pHandle = ModalDialog.parts().draghandle({
    dom: DomFactory.fromHtml('<div class="tox-dialog__draghandle"></div>')
  });

const pClose = ModalDialog.parts().close(
    renderClose(providersBackstage)
  );

const components = [ pTitle ].concat(foo.draggable ? [ pHandle ] : []).concat([ pClose ]);
  return Container.sketch({
    dom: DomFactory.fromHtml('<div class="tox-dialog__header"></div>'),
    components
  });
};

export {
  renderInlineHeader,
  renderModalHeader
};