本文整理汇总了TypeScript中@ephox/alloy.ModalDialog类的典型用法代码示例。如果您正苦于以下问题：TypeScript ModalDialog类的具体用法？TypeScript ModalDialog怎么用？TypeScript ModalDialog使用的例子？那么恭喜您, 这里精选的类代码示例或许可以为您提供帮助。
在下文中一共展示了ModalDialog类的7个代码示例，这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞，您的评价将有助于系统推荐出更棒的TypeScript代码示例。
示例1: closeWindow
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;
};示例2:
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>`)
}
]
};
});
},示例3:
const pFooter = (buttons: AlloySpec[]) => ModalDialog.parts().footer({
dom: {
tag: 'div',
classes: [ 'tox-dialog__footer' ]
},
components: buttons,
});示例4: renderTitle
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
});
};示例5: renderUrlDialog
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;
};示例6: callback
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);
};示例7:
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
);
};