TypeScript SystemEvents.attachedToDom方法代碼示例

const renderSplitButton = (spec: Toolbar.ToolbarSplitButton, sharedBackstage: UiFactoryBackstageShared): SketchSpec => {
  // This is used to change the icon on the button. Normally, affected by the select call.
  const displayChannel = Id.generate('channel-update-split-dropdown-display');

  const getApi = (comp: AlloyComponent): Toolbar.ToolbarSplitButtonInstanceApi => {
    return {
      isDisabled: () => Disabling.isDisabled(comp),
      setDisabled: (state: boolean) => Disabling.set(comp, state),
      setIconFill: (id, value) => {
        SelectorFind.descendant(comp.element(), 'svg path[id="' + id + '"], rect[id="' + id + '"]').each((underlinePath) => {
          Attr.set(underlinePath, 'fill', value);
        });
      },
      setIconStroke: (id, value) => {
        SelectorFind.descendant(comp.element(), 'svg path[id="' + id + '"], rect[id="' + id + '"]').each((underlinePath) => {
          Attr.set(underlinePath, 'stroke', value);
        });
      },
      setActive: (state) => {
        // Toggle the pressed aria state component
        Attr.set(comp.element(), 'aria-pressed', state);
        // Toggle the inner button state, as that's the toggle component of the split button
        SelectorFind.descendant(comp.element(), 'span').each((button) => {
          comp.getSystem().getByDom(button).each((buttonComp) => Toggling.set(buttonComp, state));
        });
      },
      isActive: () => {
        return SelectorFind.descendant(comp.element(), 'span').exists((button) => {
          return comp.getSystem().getByDom(button).exists(Toggling.isOn);
        });
      },
    };
  };

  const editorOffCell = Cell(Fun.noop);
  const specialisation = {
    getApi,
    onSetup: spec.onSetup
  };
  return AlloySplitDropdown.sketch({
    dom: {
      tag: 'div',
      classes: [ ToolbarButtonClasses.SplitButton ],
      attributes: Merger.merge({ 'aria-pressed': false }, getTooltipAttributes(spec.tooltip, sharedBackstage.providers))
    },

    onExecute (button: AlloyComponent) {
      spec.onAction(getApi(button));
    },

    onItemExecute: (a, b, c) => { },

    splitDropdownBehaviours: Behaviour.derive([
      DisablingConfigs.splitButton(false),
      AddEventsBehaviour.config('split-dropdown-events', [
        AlloyEvents.run(focusButtonEvent, Focusing.focus),
        onControlAttached(specialisation, editorOffCell),
        onControlDetached(specialisation, editorOffCell),
      ])
    ]),

    eventOrder: {
      [SystemEvents.attachedToDom()]: [ 'alloy.base.behaviour', 'split-dropdown-events' ]
    },

    toggleClass: ToolbarButtonClasses.Ticked,
    lazySink: sharedBackstage.getSink,
    fetch: fetchChoices(getApi, spec, sharedBackstage.providers),

    parts: {
      // FIX: hasIcons
      menu: MenuParts.part(false, spec.columns, spec.presets)
    },

    components: [
      AlloySplitDropdown.parts().button(
        renderCommonStructure(spec.icon, spec.text, Option.none(), Option.some(displayChannel), Option.some([
          Toggling.config({ toggleClass: ToolbarButtonClasses.Ticked, toggleOnExecute: false })
        ]), sharedBackstage.providers)
      ),
      AlloySplitDropdown.parts().arrow({
        dom: {
          tag: 'button',
          classes: [ ToolbarButtonClasses.Button, 'tox-split-button__chevron' ],
          innerHtml: Icons.get('chevron-down', sharedBackstage.providers.icons)
        }
      }),
      AlloySplitDropdown.parts()['aria-descriptor']({
        text: sharedBackstage.providers.translate('To open the popup, press Shift+Enter')
      })
    ]
  });
};

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 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' ]
              }
            }
          ]
        }
      }
    })
  );
};