本文整理汇总了TypeScript中@ephox/alloy.Focusing.config方法的典型用法代码示例。如果您正苦于以下问题：TypeScript Focusing.config方法的具体用法？TypeScript Focusing.config怎么用？TypeScript Focusing.config使用的例子？那么恭喜您, 这里精选的方法代码示例或许可以为您提供帮助。您也可以进一步了解该方法所在类@ephox/alloy.Focusing的用法示例。
在下文中一共展示了Focusing.config方法的10个代码示例，这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞，您的评价将有助于系统推荐出更棒的TypeScript代码示例。
示例1:
const renderSpinner = (providerBackstage: UiFactoryBackstageProviders): AlloySpec => {
return {
dom: {
tag: 'div',
attributes: {
'aria-label': providerBackstage.translate('Loading...')
},
classes: [ 'tox-throbber__busy-spinner' ]
},
components: [
{
dom: DomFactory.fromHtml(`<div class="tox-spinner"><div></div><div></div><div></div></div>`)
}
],
behaviours: Behaviour.derive([
// Trap the "Tab" key and don't let it escape.
Keying.config({
mode: 'special',
onTab: () => Option.some(true),
onShiftTab: () => Option.some(true)
}),
Focusing.config({ })
])
};
};示例2:
const renderToolbarGroupCommon = (toolbarGroup: ToolbarGroup) => {
const attributes = toolbarGroup.title.fold(() => {
return {};
},
(title) => {
return { attributes: { title } };
});
return {
dom: {
tag: 'div',
classes: ['tox-toolbar__group'],
...attributes
},
components: [
AlloyToolbarGroup.parts().items({})
],
items: toolbarGroup.items,
markers: {
// nav within a group breaks if disabled buttons are first in their group so skip them
itemSelector: '*:not(.tox-split-button) > .tox-tbtn:not([disabled]), .tox-split-button:not([disabled]), .tox-toolbar-nav-js:not([disabled])'
},
tgroupBehaviours: Behaviour.derive([
Tabstopping.config({}),
Focusing.config({})
])
};
};示例3:
export const renderHtmlPanel = (spec: HtmlPanelFoo): SketchSpec => {
if (spec.presets === 'presentation') {
return AlloyContainer.sketch({
dom: {
tag: 'div',
classes: [ 'tox-form__group' ],
innerHtml: spec.html
}
});
} else {
return AlloyContainer.sketch({
dom: {
tag: 'div',
classes: [ 'tox-form__group' ],
innerHtml: spec.html,
attributes: {
role: 'document'
}
},
containerBehaviours: Behaviour.derive([
Tabstopping.config({ }),
Focusing.config({ })
])
});
}
};示例4:
const makeCell = (row, col, labelId) => {
const emitCellOver = (c) => AlloyTriggers.emitWith(c, cellOverEvent, {row, col} );
const emitExecute = (c) => AlloyTriggers.emitWith(c, cellExecuteEvent, {row, col} );
return GuiFactory.build({
dom: {
tag: 'div',
attributes: {
role: 'button',
['aria-labelledby']: labelId
}
},
behaviours: Behaviour.derive([
AddEventsBehaviour.config('insert-table-picker-cell', [
AlloyEvents.run(NativeEvents.mouseover(), Focusing.focus),
AlloyEvents.run(SystemEvents.execute(), emitExecute),
AlloyEvents.run(SystemEvents.tapOrClick(), emitExecute)
]),
Toggling.config({
toggleClass: 'tox-insert-table-picker__selected',
toggleOnExecute: false
}),
Focusing.config({onFocus: emitCellOver})
])
});
};示例5:
const makeSlider = (label: string, onChoose: (slider: AlloyComponent, thumb: AlloyComponent, value: SliderTypes.SliderValueX) => void, min: number, value: number, max: number): Memento.MementoRecord => {
const labelPart = Slider.parts().label({
dom: {
tag: 'label',
classes: ['tox-label'],
innerHtml: providersBackstage.translate(label)
}
});
const spectrum = Slider.parts().spectrum({
dom: {
tag: 'div',
classes: ['tox-slider__rail'],
attributes: {
role: 'presentation'
}
}
});
const thumb = Slider.parts().thumb({
dom: {
tag: 'div',
classes: ['tox-slider__handle'],
attributes: {
role: 'presentation'
}
}
});
return Memento.record(Slider.sketch({
dom: {
tag: 'div',
classes: ['tox-slider'],
attributes: {
role: 'presentation'
}
},
model: {
mode: 'x',
minX: min,
maxX: max,
getInitialValue: Fun.constant({ x: Fun.constant(value) })
},
components: [
labelPart,
spectrum,
thumb
],
sliderBehaviours: Behaviour.derive([
Focusing.config({})
]),
onChoose
}));
};示例6:
const makeButton = (t) => {
return {
dom: {
tag: 'span',
innerHtml: t,
// The '.tox-tbtn' class is here temporarily while we sort of the flow keying selector
classes: [ 'test-toolbar-item', 'tox-tbtn' ]
},
behaviours: Behaviour.derive([
Focusing.config({ })
])
};
};示例7:
const factory = (newSpec: { uid: string }) => {
return NavigableObject.craft(
{
// We need to use the part uid or the label and field won't be linked with ARIA
uid: newSpec.uid,
dom: {
tag: 'iframe',
attributes
},
behaviours: Behaviour.derive([
Tabstopping.config({ }),
Focusing.config({ }),
RepresentingConfigs.withComp(Option.none(), sourcing.getValue, sourcing.setValue)
])
}
);
};示例8: useFixedContainer
const getBehaviours = (editor: Editor) => {
return useFixedContainer(editor) ? [] : [
Docking.config({
leftAttr: 'data-dock-left',
topAttr: 'data-dock-top',
contextual: {
lazyContext (_) {
return Option.from(editor).map((ed) => Element.fromDom(ed.getBody()));
},
fadeInClass: 'tox-toolbar-dock-fadein',
fadeOutClass: 'tox-toolbar-dock-fadeout',
transitionClass: 'tox-toolbar-dock-transition'
}
}),
Focusing.config({ })
];
};示例9: function
const craftWithClasses = function (classes) {
return {
dom: {
tag: 'div',
styles: {
width: '1px',
height: '1px',
outline: 'none'
},
attributes: {
tabindex: '0' // Capture native tabbing in the appropriate order
},
classes
},
behaviours: Behaviour.derive([
Focusing.config( { ignore: true }),
Tabstopping.config({ })
])
};
};示例10:
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
);
};