(store, doc, body) => {
return GuiFactory.build(
Container.sketch({
dom: {
classes: [ 'colorinput-container' ]
},
components: [
renderColorInput({
type: 'colorinput',
name: 'alpha',
label: Option.some('test-color-input'),
}, helpers.shared, {
colorPicker: (callback, value) => {},
hasCustomColors: () => true,
getColors: () => [
{ type: choiceItem, text: 'Turquoise', value: '#18BC9B' },
{ type: choiceItem, text: 'Green', value: '#2FCC71' },
{ type: choiceItem, text: 'Blue', value: '#3598DB' },
{ type: choiceItem, text: 'Purple', value: '#9B59B6' },
{ type: choiceItem, text: 'Navy Blue', value: '#34495E' }
],
getColorCols: () => 3
})
]
})
);
},
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})
])
});
};
const renderText = (text: string): AlloySpec => ({
dom: {
tag: 'div',
classes: [ ItemClasses.textClass ]
},
components: [ GuiFactory.text(I18n.translate(text)) ]
});
return memContainer.getOpt(anyInSystem).map((panel) => {
const aImg = GuiFactory.external({
element: img
});
Replacing.replaceAt(panel, 1, Option.some(aImg));
const lastViewRect = viewRectState.get();
const viewRect = {
x: 0,
y: 0,
w: img.dom().naturalWidth,
h: img.dom().naturalHeight
};
viewRectState.set(viewRect);
const rect = Rect.inflate(viewRect, -20, -20);
rectState.set(rect);
if (lastViewRect.w !== viewRect.w || lastViewRect.h !== viewRect.h) {
zoomFit(panel, img);
}
repaintImg(panel, img);
return img;
});
moveTo: (x: number, y: number) => {
InlineView.showAt(notificationWrapper, {
anchor: 'makeshift',
x,
y
}, GuiFactory.premade(notification));
},
const factory = (contents: Types.Dialog.Dialog<T>, internalInitialData: T, dataValidator: Processor): Types.Dialog.DialogInstanceApi<T> => {
const initialData = validateData<T>(internalInitialData, dataValidator);
const dialogInit = {
dataValidator,
initialData,
internalDialog: contents
};
const dialogUi = renderInlineDialog<T>(
dialogInit,
{
redial: DialogManager.DialogManager.redial,
closeWindow: () => {
InlineView.hide(inlineDialog);
closeWindow(dialogUi.instanceApi);
}
},
extras.backstage, ariaAttrs
);
const inlineDialog = GuiFactory.build(InlineView.sketch({
lazySink: extras.backstage.shared.getSink,
dom: {
tag: 'div',
classes: [ ]
},
// Fires the default dismiss event.
fireDismissalEventInstead: { },
inlineBehaviours: Behaviour.derive([
AddEventsBehaviour.config('window-manager-inline-events', [
// Can't just fireDimissalEvent formCloseEvent, because it is on the parent component of the dialog
AlloyEvents.run(SystemEvents.dismissRequested(), (comp, se) => {
AlloyTriggers.emit(dialogUi.dialog, formCancelEvent);
})
])
])
}));
InlineView.showAt(
inlineDialog,
anchor,
GuiFactory.premade(dialogUi.dialog)
);
dialogUi.instanceApi.setData(initialData);
Keying.focusIn(dialogUi.dialog);
return dialogUi.instanceApi;
};
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"]'
})
])
})]
};
}
const updateText: NotificationSketchApis['updateText'] = (comp, text) => {
if (comp.getSystem().isConnected()) {
const banner = memBannerText.get(comp);
Replacing.set(banner, [
GuiFactory.text(text)
]);
}
};
(store, doc, body) => {
return GuiFactory.build(
renderHtmlPanel({
type: 'htmlpanel',
html: '<br /><br /><hr />',
presets: 'presentation'
})
);
},
Arr.last(stack.get()).each((last) => {
stack.set(stack.get().slice(0, stack.get().length - 1));
AlloyTriggers.emitWith(comp, changeSlideEvent, {
// Because we are using premade, we should have access to the same element
// to give focus (although it isn't working)
contents: GuiFactory.premade(last.bar),
focus: last.focus
});
});
