export function renderInsertTableMenuItem(spec: Menu.FancyMenuItem): ItemTypes.WidgetItemSpec {
const numRows = 10;
const numColumns = 10;
const sizeLabelId = Id.generate('size-label');
const cells = makeCells(sizeLabelId, numRows, numColumns);
const memLabel = Memento.record({
dom: {
tag: 'span',
classes: ['tox-insert-table-picker__label'],
attributes: {
id: sizeLabelId
}
},
components: [GuiFactory.text('0x0')],
behaviours: Behaviour.derive([
Replacing.config({})
])
});
return {
type: 'widget',
data: { value: Id.generate('widget-id')},
dom: {
tag: 'div',
classes: ['tox-fancymenuitem'],
},
autofocus: true,
components: [ItemWidget.parts().widget({
dom: {
tag: 'div',
classes: ['tox-insert-table-picker']
},
components: makeComponents(cells).concat(memLabel.asSpec()),
behaviours: Behaviour.derive([
AddEventsBehaviour.config('insert-table-picker', [
AlloyEvents.runWithTarget<CellEvent>(cellOverEvent, (c, t, e) => {
const row = e.event().row();
const col = e.event().col();
selectCells(cells, row, col, numRows, numColumns);
Replacing.set(memLabel.get(c), [makeLabelText(row, col)]);
}),
AlloyEvents.runWithTarget<CellEvent>(cellExecuteEvent, (c, _, e) => {
spec.onAction({numRows: e.event().row() + 1, numColumns: e.event().col() + 1});
AlloyTriggers.emit(c, SystemEvents.sandboxClose());
})
]),
Keying.config({
initSize: {
numRows,
numColumns
},
mode: 'flatgrid',
selector: '[role="button"]'
})
])
})]
};
}
export const renderWidgetMenu = (spec: WidgetMenuFoo): Partial<MenuTypes.MenuSpec> => {
const memWidget = Memento.record(spec.widget as SimpleOrSketchSpec);
return {
value: spec.value,
items: [
{
type: 'widget',
data: {
// FIX: Widgets.
value: Id.generate('widget-id')
},
autofocus: true,
// FIX: widget classes.
dom: {
tag: 'div'
},
components: [
ItemWidget.parts().widget(
{
dom: {
tag: 'div',
classes: [ 'tox-menu-widget-js' ]
},
components: [ memWidget.asSpec() ],
behaviours: Behaviour.derive([
Keying.config({
mode: 'special',
focusIn: (comp) => {
memWidget.getOpt(comp).each(Keying.focusIn);
return Option.some(true);
}
})
])
}
)
],
}
],
dom: menuDom(false, 1, 'normal'),
components: [
Menu.parts().items({ })
]
};
};
export function renderColorSwatchItem(spec: Menu.FancyMenuItem, backstage: UiFactoryBackstage): ItemTypes.WidgetItemSpec {
const items = ColorSwatch.getColors(backstage.colorinput.getColors(), backstage.colorinput.hasCustomColors());
const columns = backstage.colorinput.getColorCols();
const presets = 'color';
const menuSpec = createPartialChoiceMenu(
Id.generate('menu-value'),
items,
(value) => {
spec.onAction({ value });
},
columns,
presets,
ItemResponse.CLOSE_ON_EXECUTE,
() => false,
backstage.shared.providers
);
const widgetSpec = Merger.deepMerge({
...menuSpec,
markers: MenuParts.markers(presets),
movement: deriveMenuMovement(columns, presets)
});
return {
type: 'widget',
data: { value: Id.generate('widget-id')},
dom: {
tag: 'div',
classes: [ 'tox-fancymenuitem' ],
},
autofocus: true,
components: [
ItemWidget.parts().widget(AlloyMenu.sketch(widgetSpec))
]
};
}