TypeScript alloy.Receiving類代碼示例

const orientation = function (onReceive) {
  return Receiving.config({
    channels: Objects.wrap(
      TinyChannels.orientationChanged(),
      {
        onReceive
      }
    )
  });
};

 const styleselect = function () {
   return Buttons.forToolbar('style-formats', function (button) {
     editor.fire('toReading');
     realm.dropup().appear(styleFormatsMenu, Toggling.on, button);
   }, Behaviour.derive([
     Toggling.config({
       toggleClass: Styles.resolve('toolbar-button-selected'),
       toggleOnExecute: false,
       aria: {
         mode: 'pressed'
       }
     }),
     Receiving.config({
       channels: Objects.wrapAll([
         Receivers.receive(TinyChannels.orientationChanged(), Toggling.off),
         Receivers.receive(TinyChannels.dropupDismissed(), Toggling.off)
       ])
     })
   ]));
 };

          AlloyForm.sketch((parts) => {
            return {
              dom: {
                tag: 'div',
                classes: [ 'tox-form' ]
              },
              components: Arr.map(tab.items, (item) => interpretInForm(parts, item, backstage)),
              formBehaviours: Behaviour.derive([
                Keying.config({
                  mode: 'acyclic',
                  useTabstopAt: Fun.not(NavigableObject.isPseudoStop)
                }),

                AddEventsBehaviour.config('TabView.form.events', [
                  AlloyEvents.runOnAttached(setDataOnForm),
                  AlloyEvents.runOnDetached(updateDataWithForm)
                ]),
                Receiving.config({
                  channels: Objects.wrapAll([
                    {
                      key: SendDataToSectionChannel,
                      value:  {
                        onReceive: updateDataWithForm
                      }
                    },
                    {
                      key: SendDataToViewChannel,
                      value: {
                        onReceive: setDataOnForm
                      }
                    }
                  ])
                })
              ])
            };
          })

const renderInlineDialog = <T>(dialogInit: DialogManager.DialogInit<T>, extra: WindowExtra<T>, backstage: UiFactoryBackstage, ariaAttrs: boolean) => {
  const dialogLabelId = Id.generate('dialog-label');
  const dialogContentId = Id.generate('dialog-content');

  const updateState = (_comp, incoming: DialogManager.DialogInit<T>) => {
    return Option.some(incoming);
  };

  const memHeader = Memento.record(
    renderInlineHeader({
      title: dialogInit.internalDialog.title,
      draggable: true
    }, dialogLabelId, backstage.shared.providers) as SimpleSpec
  );

  const memBody = Memento.record(
    renderInlineBody({
      body: dialogInit.internalDialog.body
    }, dialogContentId, backstage, ariaAttrs) as SimpleSpec
  );

  const memFooter = Memento.record(
    renderInlineFooter({
      buttons: dialogInit.internalDialog.buttons
    }, backstage.shared.providers)
  );

  const dialogEvents = SilverDialogEvents.initDialog(
    () => instanceApi,
    {
      // TODO: Implement block and unblock for inline dialogs
      onBlock: () => { },
      onUnblock: () => { },
      onClose: () => extra.closeWindow()
    }
  );

  // TODO: Disable while validating?
  const dialog = GuiFactory.build({
    dom: {
      tag: 'div',
      classes: [ 'tox-dialog' ],
      attributes: {
        role: 'dialog',
        ['aria-labelledby']: dialogLabelId,
        ['aria-describedby']: `${dialogContentId}`,
      }
    },
    eventOrder: {
      [SystemEvents.receive()]: [ Reflecting.name(), Receiving.name() ],
      [SystemEvents.execute()]: ['execute-on-form'],
      [SystemEvents.attachedToDom()]: ['reflecting', 'execute-on-form']
    },

    // Dupe with SilverDialog.
    behaviours: Behaviour.derive([
      Keying.config({
        mode: 'cyclic',
        onEscape: (c) => {
          AlloyTriggers.emit(c, formCloseEvent);
          return Option.some(true);
        },
        useTabstopAt: (elem) => {
          return !NavigableObject.isPseudoStop(elem) && (
            Node.name(elem) !== 'button' || Attr.get(elem, 'disabled') !== 'disabled'
          );
        }
      }),
      Reflecting.config({
        channel: dialogChannel,
        updateState,
        initialData: dialogInit
      }),
      AddEventsBehaviour.config(
        'execute-on-form',
        dialogEvents
      ),
      RepresentingConfigs.memory({ })
    ]),

    components: [
      memHeader.asSpec(),
      memBody.asSpec(),
      memFooter.asSpec()
    ]
  });

  // TODO: Clean up the dupe between this (InlineDialog) and SilverDialog
  const instanceApi = getDialogApi<T>({
    getRoot: () => dialog,
    getFooter: () => memFooter.get(dialog),
    getBody: () => memBody.get(dialog),
    getFormWrapper: () => {
      const body = memBody.get(dialog);
      return Composing.getCurrent(body).getOr(body);
    }
  }, extra.redial);

  return {
    dialog,
//.........這裏部分代碼省略.........

const renderUrlDialog = (internalDialog: Types.UrlDialog.UrlDialog, extra: WindowExtra<any>, editor: Editor, backstage: UiFactoryBackstage) => {
  const header = getHeader(internalDialog.title, backstage);
  const body = renderIframeBody(internalDialog);
  const footer = internalDialog.buttons.bind((buttons) => {
    // Don't render a footer if no buttons are specified
    if (buttons.length === 0) {
      return Option.none();
    } else {
      return Option.some(renderModalFooter({ buttons }, backstage.shared.providers));
    }
  });

  const dialogEvents = SilverDialogEvents.initUrlDialog(() => instanceApi, getEventExtras(() => dialog, extra));

  // Add the styles for the modal width/height
  const styles = {
    ...internalDialog.height.fold(() => ({}), (height) => ({ 'height': height + 'px', 'max-height': height + 'px' })),
    ...internalDialog.width.fold(() => ({}), (width) => ({ 'width': width + 'px', 'max-width': width + 'px' })),
  };

  // Default back to using a large sized dialog, if no dimensions are specified
  const classes = internalDialog.width.isNone() && internalDialog.height.isNone() ? [ 'tox-dialog--width-lg' ] : [];

  // Determine the iframe urls domain, so we can target that specifically when sending messages
  const iframeUri = new URI(internalDialog.url, { base_uri: new URI(window.location.href) });
  const iframeDomain = `${iframeUri.protocol}://${iframeUri.host}${iframeUri.port ? ':' + iframeUri.port : ''}`;
  const messageHandlerUnbinder = Cell(Option.none());

  // Setup the behaviours for dealing with messages between the iframe and current window
  const extraBehaviours = [
    AddEventsBehaviour.config('messages', [
      // When the dialog is opened, bind a window message listener for the spec url
      AlloyEvents.runOnAttached(() => {
        const unbind = DomEvent.bind(Element.fromDom(window), 'message', (e) => {
          // Validate that the request came from the correct domain
          if (iframeUri.isSameOrigin(new URI(e.raw().origin))) {
            const data = e.raw().data;

            // Handle the message if it has the 'mceAction' key, otherwise just ignore it
            if (isSupportedMessage(data)) {
              handleMessage(editor, instanceApi, data);
            } else if (isCustomMessage(data)) {
              internalDialog.onMessage(instanceApi, data);
            }
          }
        });
        messageHandlerUnbinder.set(Option.some(unbind));
      }),

      // When the dialog is closed, unbind the window message listener
      AlloyEvents.runOnDetached(() => {
        messageHandlerUnbinder.get().each((unbinder) => unbinder.unbind());
      })
    ]),
    Receiving.config({
      channels: {
        [bodySendMessageChannel]: {
          onReceive: (comp, data) => {
            // Send the message to the iframe via postMessage
            SelectorFind.descendant(comp.element(), 'iframe').each((iframeEle) => {
              const iframeWin = iframeEle.dom().contentWindow;
              iframeWin.postMessage(data, iframeDomain);
            });
          }
        }
      }
    })
  ];

  const spec = {
    header,
    body,
    footer,
    extraClasses: classes,
    extraBehaviours,
    extraStyles: styles
  };

  const dialog = renderModalDialog(spec, internalDialog, dialogEvents, backstage);

  const instanceApi = getUrlDialogApi(dialog);

  return {
    dialog,
    instanceApi
  };
};