TypeScript alloy.ModalDialog類代碼示例

    const factory = (contents: Types.Dialog.Dialog<T>, internalInitialData: T, dataValidator: Processor): Types.Dialog.DialogInstanceApi<T> => {
      // We used to validate data here, but it's done by the instanceApi.setData call below.
      const initialData = internalInitialData;

      const dialogInit: DialogManager.DialogInit<T> = {
        dataValidator,
        initialData,
        internalDialog: contents
      };

      const dialog = renderDialog<T>(
        dialogInit,
        {
          redial: DialogManager.DialogManager.redial,
          closeWindow: () => {
            ModalDialog.hide(dialog.dialog);
            closeWindow(dialog.instanceApi);
          }
        },
        extras.backstage
      );

      ModalDialog.show(dialog.dialog);
      dialog.instanceApi.setData(initialData);
      return dialog.instanceApi;
    };

 onBlock: (blockEvent: FormBlockEvent) => {
   ModalDialog.setBusy(lazyDialog(), (d, bs) => {
     return {
       dom: {
         tag: 'div',
         classes: [ 'tox-dialog__busy-spinner' ],
         attributes: {
           'aria-label': blockEvent.message()
         },
         styles: {
           left: '0px',
           right: '0px',
           bottom: '0px',
           top: '0px',
           position: 'absolute'
         }
       },
       behaviours: bs,
       components: [
         {
           dom: DomFactory.fromHtml(`<div class="tox-spinner"><div></div><div></div><div></div></div>`)
         }
       ]
     };
   });
 },

const pFooter = (buttons: AlloySpec[]) => ModalDialog.parts().footer({
  dom: {
    tag: 'div',
    classes: [ 'tox-dialog__footer' ]
  },
  components: buttons,
});

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

    const factory = (contents: Types.UrlDialog.UrlDialog): Types.UrlDialog.UrlDialogInstanceApi => {
      const dialog = renderUrlDialog(
        contents,
        {
          closeWindow: () => {
            ModalDialog.hide(dialog.dialog);
            closeWindow(dialog.instanceApi);
          }
        },
        extras.editor,
        extras.backstage
      );

      ModalDialog.show(dialog.dialog);
      return dialog.instanceApi;
    };

  const open = (message: string, callback: (state: boolean) => void) => {

    const closeDialog = (state: boolean) => {
      ModalDialog.hide(confirmDialog);
      callback(state);
    };

    const memFooterYes = Memento.record(
      renderFooterButton({
        name: 'yes',
        text: 'Yes',
        primary: true,
        icon: Option.none()
      }, 'submit', sharedBackstage.providers)
    );

    const footerNo = renderFooterButton({
      name: 'no',
      text: 'No',
      primary: true,
      icon: Option.none()
    }, 'cancel', sharedBackstage.providers);

    const confirmDialog = GuiFactory.build(
      Dialogs.renderDialog({
        lazySink: () => sharedBackstage.getSink(),
        partSpecs: {
          title: Dialogs.pUntitled(),
          close: Dialogs.pClose(() => {
            closeDialog(false);
          }, sharedBackstage.providers),
          body: Dialogs.pBodyMessage(message, sharedBackstage.providers),
          footer: Dialogs.pFooter(Dialogs.pFooterGroup([], [
            footerNo,
            memFooterYes.asSpec()
          ]))
        },
        onCancel: () => closeDialog(false),
        onSubmit: () => closeDialog(true),
        extraClasses: [ 'tox-confirm-dialog' ]
      })
    );

    ModalDialog.show(confirmDialog);
    const footerYesButton = memFooterYes.get(confirmDialog);
    Focusing.focus(footerYesButton);
  };

const renderIframeBody = (spec: Types.UrlDialog.UrlDialog) => {
  const bodySpec = {
    dom: {
      tag: 'div',
      classes: [ 'tox-dialog__content-js' ]
    },
    components: [
      {
        dom: {
          tag: 'div',
          classes: [ 'tox-dialog__body-iframe' ]
        },
        components: [
          NavigableObject.craft({
            dom: {
              tag: 'iframe',
              attributes: {
                src: spec.url
              }
            },
            behaviours: Behaviour.derive([
              Tabstopping.config({ }),
              Focusing.config({ })
            ])
          })
        ]
      }
    ],
    behaviours: Behaviour.derive([
      Keying.config({
        mode: 'acyclic',
        useTabstopAt: Fun.not(NavigableObject.isPseudoStop)
      })
    ])
  };

  return ModalDialog.parts().body(
    bodySpec
  );
};