本文整理匯總了TypeScript中@ephox/alloy.AlloyEvents.cutter方法的典型用法代碼示例。如果您正苦於以下問題：TypeScript AlloyEvents.cutter方法的具體用法？TypeScript AlloyEvents.cutter怎麽用？TypeScript AlloyEvents.cutter使用的例子？那麽, 這裏精選的方法代碼示例或許可以為您提供幫助。您也可以進一步了解該方法所在類@ephox/alloy.AlloyEvents的用法示例。
在下文中一共展示了AlloyEvents.cutter方法的2個代碼示例，這些例子默認根據受歡迎程度排序。您可以為喜歡或者感覺有用的代碼點讚，您的評價將有助於係統推薦出更棒的TypeScript代碼示例。
示例1: function
const sketch = function (editor): SketchSpec {
const pickerDom = {
tag: 'input',
attributes: { accept: 'image/*', type: 'file', title: '' },
// Visibility hidden so that it cannot be seen, and position absolute so that it doesn't
// disrupt the layout
styles: { visibility: 'hidden', position: 'absolute' }
};
const memPicker = Memento.record({
dom: pickerDom,
events: AlloyEvents.derive([
// Stop the event firing again at the button level
AlloyEvents.cutter(NativeEvents.click()),
AlloyEvents.run(NativeEvents.change(), function (picker, simulatedEvent) {
extractBlob(simulatedEvent).each(function (blob) {
addImage(editor, blob);
});
})
])
});
return Button.sketch({
dom: Buttons.getToolbarIconButton('image', editor),
components: [
memPicker.asSpec()
],
action (button) {
const picker = memPicker.get(button);
// Trigger a dom click for the file input
picker.element().dom().click();
}
});
};示例2: return
export const renderDropZone = (spec: Types.DropZone.DropZone, providersBackstage: UiFactoryBackstageProviders): SimpleSpec => {
// TODO: Consider moving to alloy
const stopper: AlloyEvents.EventRunHandler<SugarEvent> = (_: AlloyComponent, se: SimulatedEvent<SugarEvent>): void => {
se.stop();
};
// TODO: Consider moving to alloy
const sequence = (actions: Array<AlloyEvents.EventRunHandler<SugarEvent>>): AlloyEvents.EventRunHandler<SugarEvent> => {
return (comp, se) => {
Arr.each(actions, (a) => {
a(comp, se);
});
};
};
const onDrop: AlloyEvents.EventRunHandler<SugarEvent> = (comp, se) => {
if (! Disabling.isDisabled(comp)) {
const transferEvent = se.event().raw() as DragEvent;
handleFiles(comp, transferEvent.dataTransfer.files);
}
};
const onSelect = (component, simulatedEvent) => {
const files = simulatedEvent.event().raw().target.files;
handleFiles(component, files);
};
const handleFiles = (component, files: FileList) => {
Representing.setValue(component, filterByExtension(files));
AlloyTriggers.emitWith(component, formChangeEvent, { name: spec.name });
};
const memInput = Memento.record(
{
dom: {
tag: 'input',
attributes: {
type: 'file',
accept: 'image/*'
},
styles: {
display: 'none'
}
},
behaviours: Behaviour.derive([
AddEventsBehaviour.config('input-file-events', [
AlloyEvents.cutter(SystemEvents.tapOrClick())
])
])
}
);
const renderField = (s) => {
return {
uid: s.uid,
dom: {
tag: 'div',
classes: [ 'tox-dropzone-container' ]
},
behaviours: Behaviour.derive([
RepresentingConfigs.memory([ ]),
ComposingConfigs.self(),
Disabling.config({}),
Toggling.config({
toggleClass: 'dragenter',
toggleOnExecute: false
}),
AddEventsBehaviour.config('dropzone-events', [
AlloyEvents.run('dragenter', sequence([ stopper, Toggling.toggle ])),
AlloyEvents.run('dragleave', sequence([ stopper, Toggling.toggle ])),
AlloyEvents.run('dragover', stopper),
AlloyEvents.run('drop', sequence([ stopper, onDrop ])),
AlloyEvents.run(NativeEvents.change(), onSelect)
]),
]),
components: [
{
dom: {
tag: 'div',
classes: [ 'tox-dropzone' ],
styles: {}
},
components: [
{
dom: {
tag: 'p',
innerHtml: providersBackstage.translate('Drop an image here')
}
},
Button.sketch({
dom: {
tag: 'button',
innerHtml: providersBackstage.translate('Browse for an image'),
styles: {
position: 'relative'
},
classes: [ 'tox-button', 'tox-button--secondary']
},
components: [
//.........這裏部分代碼省略.........