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 pUntitled = () => ModalDialog.parts().title({
dom: {
tag: 'div',
classes: [ 'tox-dialog__title' ],
innerHtml: '',
styles: {
display: 'none'
}
}
});
const renderDialog = (spec: DialogFoo) => {
return ModalDialog.sketch(
{
lazySink: spec.lazySink,
onEscape: () => {
spec.onCancel();
// TODO: Make a strong type for Handled KeyEvent
return Option.some(true);
},
dom: {
tag: 'div',
classes: [ 'tox-dialog' ].concat(spec.extraClasses)
},
components: [
{
dom: {
tag: 'div',
classes: [ 'tox-dialog__header' ]
},
components: [
spec.partSpecs.title,
spec.partSpecs.close
]
},
spec.partSpecs.body,
spec.partSpecs.footer
],
parts: {
blocker: {
dom: DomFactory.fromHtml('<div class="tox-dialog-wrap"></div>'),
components: [
{
dom: {
tag: 'div',
classes: [ 'tox-dialog-wrap__backdrop' ]
}
}
]
}
},
modalBehaviours: Behaviour.derive([
// Dupe warning.
AddEventsBehaviour.config('basic-dialog-events', [
AlloyEvents.run<FormCancelEvent>(formCancelEvent, (comp, se) => {
spec.onCancel();
}),
AlloyEvents.run<FormSubmitEvent>(formSubmitEvent, (comp, se) => {
spec.onSubmit();
}),
])
])
}
);
};
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 pClose = (onClose, providersBackstage: UiFactoryBackstageProviders) => ModalDialog.parts().close(
// Need to find a way to make it clear in the docs whether parts can be sketches
Button.sketch({
dom: {
tag: 'button',
classes: [ 'tox-button', 'tox-button--icon', 'tox-button--naked' ],
attributes: {
'type': 'button',
'aria-label': providersBackstage.translate('Close')
}
},
action: onClose,
buttonBehaviours: Behaviour.derive([
Tabstopping.config({ })
])
})
);
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
);
};
