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({ }) ]) }) ); };