const toggleThrobber = (comp: AlloyComponent, state: boolean, providerBackstage: UiFactoryBackstageProviders) => {
const element = comp.element();
if (state === true) {
Replacing.set(comp, [ renderSpinner(providerBackstage) ]);
Css.remove(element, 'display');
Attr.remove(element, 'aria-hidden');
} else {
Replacing.set(comp, [ ]);
Css.set(element, 'display', 'none');
Attr.set(element, 'aria-hidden', 'true');
}
};
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;
});
export const renderLabel = (spec: Types.Label.Label, backstageShared: UiFactoryBackstageShared): SimpleSpec => {
const label = {
dom: {
tag: 'label',
innerHtml: backstageShared.providers.translate(spec.label),
classes: ['tox-label']
}
} as AlloySpec;
const comps = Arr.map(spec.items, backstageShared.interpreter);
return {
dom: {
tag: 'div',
classes: ['tox-form__group']
},
components: [
label
].concat(comps),
behaviours: Behaviour.derive([
ComposingConfigs.self(),
Replacing.config({}),
RepresentingConfigs.domHtml(Option.none()),
Keying.config({
mode: 'acyclic'
}),
])
};
};
Step.sync(() => {
Replacing.set(component, [
{
dom: {
tag: 'div',
classes: [ 'child-1' ]
},
behaviours: SimpleBehaviours.unnamedEvents([
onControlAttached(infoWithDestroy, cellWithDestroy),
onControlDetached(infoWithDestroy, cellWithDestroy)
])
},
{
dom: {
tag: 'div',
classes: [ 'child-2' ]
},
behaviours: SimpleBehaviours.unnamedEvents([
onControlAttached(infoWithoutDestroy, cellWithoutDestroy),
onControlDetached(infoWithoutDestroy, cellWithoutDestroy)
])
}
]);
}),
const renderReplacableIconFromPack = (iconName: string, iconsProvider: IconProvider): SimpleOrSketchSpec => {
return renderIcon(getIcon(iconName, iconsProvider), {
behaviours: Behaviour.derive([
Replacing.config({ })
])
});
};
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)
]);
}
};
const renderLabel = (text: TranslateIfNeeded, prefix: string, providersBackstage: UiFactoryBackstageProviders) => ({
dom: {
tag: 'span',
innerHtml: providersBackstage.translate(text),
classes: [ `${prefix}__select-label` ]
},
behaviours: Behaviour.derive([
Replacing.config({ })
])
});
(store, doc, body) => {
return GuiFactory.build({
dom: {
tag: 'div',
classes: [ 'test-container' ]
},
behaviours: Behaviour.derive([
Replacing.config({ })
])
});
},
const makeSocket = function () {
return GuiFactory.build(
Container.sketch({
dom: UiDomFactory.dom('<div class="${prefix}-editor-socket"></div>'),
components: [ ],
containerBehaviours: Behaviour.derive([
Replacing.config({ })
])
})
);
};
