本文整理匯總了TypeScript中@ephox/alloy.SystemEvents.focusShifted方法的典型用法代碼示例。如果您正苦於以下問題：TypeScript SystemEvents.focusShifted方法的具體用法？TypeScript SystemEvents.focusShifted怎麽用？TypeScript SystemEvents.focusShifted使用的例子？那麽, 這裏精選的方法代碼示例或許可以為您提供幫助。您也可以進一步了解該方法所在類@ephox/alloy.SystemEvents的用法示例。
在下文中一共展示了SystemEvents.focusShifted方法的1個代碼示例，這些例子默認根據受歡迎程度排序。您可以為喜歡或者感覺有用的代碼點讚，您的評價將有助於係統推薦出更棒的TypeScript代碼示例。
示例1: function
const factory: UiSketcher.SingleSketchFactory<SilverMenubarDetail, SilverMenubarSpec> = function (detail, spec) {
const setMenus = (comp: AlloyComponent, menus: MenubarItemSpec[]) => {
const newMenus = Arr.map(menus, (m) => {
const buttonSpec = {
type: 'menubutton',
text: m.text,
fetch: (callback) => {
callback(m.getItems());
}
};
// Convert to an internal bridge spec
const internal = Toolbar.createMenuButton(buttonSpec).mapError((errInfo) => ValueSchema.formatError(errInfo)).getOrDie();
return renderMenuButton(internal,
MenuButtonClasses.Button,
spec.backstage,
// https://www.w3.org/TR/wai-aria-practices/examples/menubar/menubar-2/menubar-2.html
Option.some('menuitem')
);
});
Replacing.set(comp, newMenus);
};
const apis = {
focus: Keying.focusIn,
setMenus
};
return {
uid: detail.uid,
dom: detail.dom,
components: [ ],
behaviours: Behaviour.derive([
Replacing.config({ }),
AddEventsBehaviour.config('menubar-events', [
AlloyEvents.runOnAttached(function (component) {
detail.onSetup(component);
}),
AlloyEvents.run(NativeEvents.mouseover(), (comp, se) => {
// TODO: Use constants
SelectorFind.descendant(comp.element(), '.' + MenuButtonClasses.Active).each((activeButton) => {
SelectorFind.closest(se.event().target(), '.' + MenuButtonClasses.Button).each((hoveredButton) => {
if (! Compare.eq(activeButton, hoveredButton)) {
// Now, find the components, and expand the hovered one, and close the active one
comp.getSystem().getByDom(activeButton).each((activeComp) => {
comp.getSystem().getByDom(hoveredButton).each((hoveredComp) => {
Dropdown.expand(hoveredComp);
Dropdown.close(activeComp);
Focusing.focus(hoveredComp);
});
});
}
});
});
}),
AlloyEvents.run<SystemEvents.AlloyFocusShiftedEvent>(SystemEvents.focusShifted(), (comp, se) => {
se.event().prevFocus().bind((prev) => comp.getSystem().getByDom(prev).toOption()).each((prev) => {
se.event().newFocus().bind((nu) => comp.getSystem().getByDom(nu).toOption()).each((nu) => {
if (Dropdown.isOpen(prev)) {
Dropdown.expand(nu);
Dropdown.close(prev);
}
});
});
})
]),
Keying.config({
mode: 'flow',
selector: '.' + MenuButtonClasses.Button,
onEscape: (comp) => {
detail.onEscape(comp);
return Option.some(true);
}
}),
Tabstopping.config({ })
]),
apis,
domModification: {
attributes: {
role: 'menubar'
}
}
};
};