const makeGroup = function (gSpec) {
const scrollClass = gSpec.scrollable === true ? '${prefix}-toolbar-scrollable-group' : '';
return {
dom: UiDomFactory.dom('<div aria-label="' + gSpec.label + '" class="${prefix}-toolbar-group ' + scrollClass + '"></div>'),
tgroupBehaviours: Behaviour.derive([
AddEventsBehaviour.config('adhoc-scrollable-toolbar', gSpec.scrollable === true ? [
AlloyEvents.runOnInit(function (component, simulatedEvent) {
Css.set(component.element(), 'overflow-x', 'auto');
Scrollables.markAsHorizontal(component.element());
Scrollable.register(component.element());
})
] : [ ])
]),
components: [
Container.sketch({
components: [
ToolbarGroup.parts().items({ })
]
})
],
markers: {
itemClass: Styles.resolve('toolbar-group-item')
},
items: gSpec.items
};
};
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({})
])
};
};
const makeGroup = function (gSpec) {
const scrollClass = gSpec.scrollable === true ? '${prefix}-toolbar-scrollable-group' : '';
return {
dom: UiDomFactory.dom('<div aria-label="' + gSpec.label + '" class="${prefix}-toolbar-group ' + scrollClass + '"></div>'),
tgroupBehaviours: Behaviour.derive([
AddEventsBehaviour.config('adhoc-scrollable-toolbar', gSpec.scrollable === true ? [
AlloyEvents.runOnInit(function (component, simulatedEvent) {
Css.set(component.element(), 'overflow-x', 'auto');
Scrollables.markAsHorizontal(component.element());
Scrollable.register(component.element());
})
] : [ ])
]),
components: [
Container.sketch({
components: [
ToolbarGroup.parts().items({ })
]
})
],
markers: {
// TODO: Now that alloy isn't marking the items with the old
// itemClass here, this navigation probably doesn't work. But
// it's mobile. However, bluetooth keyboards will need to be fixed
// Essentially, all items put in the toolbar will need to be given
// this class if they are to be part of keyboard navigation
itemSelector: '.' + Styles.resolve('toolbar-group-item')
},
items: gSpec.items
};
};
const renderToolbarGroup = (toolbarGroup: ToolbarGroup) => {
return AlloyToolbarGroup.sketch(renderToolbarGroupCommon(toolbarGroup));
};