import { ViewSectionRec } from "app/client/models/DocModel"; import { KoSaveableObservable, setSaveValue } from "app/client/models/modelUtil"; import { cssLabel, cssRow } from "app/client/ui/RightPanel"; import { squareCheckbox } from "app/client/ui2018/checkbox"; import { testId } from "app/client/ui2018/cssVars"; import { Computed, Disposable, dom, IDisposableOwner, styled } from "grainjs"; /** * Builds the grid options. */ export class GridOptions extends Disposable { constructor(private _section: ViewSectionRec) { super(); } public buildDom() { const section = this._section; return [ cssLabel('Grid Options'), dom('div', [ cssRow( checkbox(setSaveValueFromKo(this, section.optionsObj.prop('verticalGridlines'))), 'Vertical Gridlines', testId('v-grid-button') ), cssRow( checkbox(setSaveValueFromKo(this, section.optionsObj.prop('horizontalGridlines'))), 'Horizontal Gridlines', testId('h-grid-button') ), cssRow( checkbox(setSaveValueFromKo(this, section.optionsObj.prop('zebraStripes'))), 'Zebra Stripes', testId('zebra-stripe-button') ), testId('grid-options') ]), ]; } } // Returns a grainjs observable that reflects the value of obs a knockout saveable observable. The // returned observable will set and save obs to the given value when written. If the obs.save() call // fails, then it gets reset to its previous value. function setSaveValueFromKo(owner: IDisposableOwner, obs: KoSaveableObservable) { const ret = Computed.create(null, (use) => use(obs)); ret.onWrite(async (val) => { await setSaveValue(obs, val); }); return ret; } const checkbox = styled(squareCheckbox, ` margin-right: 8px; `);