diff --git a/packages/@lightningjs/ui-components/index.js b/packages/@lightningjs/ui-components/index.js index 91e227859..819213cf2 100644 --- a/packages/@lightningjs/ui-components/index.js +++ b/packages/@lightningjs/ui-components/index.js @@ -90,6 +90,7 @@ export { default as TitleRow } from './src/components/TitleRow/TitleRow'; export { default as Toggle } from './src/components/Toggle/Toggle'; export { default as ToggleSmall } from './src/components/Toggle/ToggleSmall'; export { default as Tooltip } from './src/components/Tooltip/Tooltip'; +export { default as TextMagnifier } from './src/components/TextMagnifier/TextMagnifier'; // Globals export { default as context } from './src/globals/context'; @@ -102,6 +103,7 @@ export { generateAbbrevConfig, defaultAbbrevConfig } from './src/mixins/withAnnouncer'; +export { default as withTextMagnifier } from './src/mixins/withTextMagnifier'; export { default as Speech } from './src/mixins/withAnnouncer/Speech'; export { default as withClassCache } from './src/mixins/withClassCache'; export { default as withHandleKey } from './src/mixins/withHandleKey'; diff --git a/packages/@lightningjs/ui-components/src/components/Surface/Surface.js b/packages/@lightningjs/ui-components/src/components/Surface/Surface.js index 42921405b..476df526c 100644 --- a/packages/@lightningjs/ui-components/src/components/Surface/Surface.js +++ b/packages/@lightningjs/ui-components/src/components/Surface/Surface.js @@ -52,6 +52,10 @@ export default class Surface extends Base { return this.w; } + get _radius() { + return getMaxRoundRadius(this.style.radius, this.w, this.h); + } + _update() { this._updateLayout(); this._updateScale(); @@ -62,7 +66,7 @@ export default class Surface extends Base { texture: lng.Tools.getRoundRect( this.innerW - 2, // Reference the underscored values here in cause the h or w getters need to be overwritten for alignment - see Tile this.innerH - 2, - getMaxRoundRadius(this.style.radius, this.w, this.h), + this._radius, 0, null, true, diff --git a/packages/@lightningjs/ui-components/src/components/TextMagnifier/TextMagnifier.d.ts b/packages/@lightningjs/ui-components/src/components/TextMagnifier/TextMagnifier.d.ts new file mode 100644 index 000000000..749dbe9b2 --- /dev/null +++ b/packages/@lightningjs/ui-components/src/components/TextMagnifier/TextMagnifier.d.ts @@ -0,0 +1,20 @@ +import Surface, { SurfaceStyle } from '../Surface'; +import { StylePartial } from '../../types/lui'; + +type TextMagnifierStyle = SurfaceStyle & { + color: string; + gutterX: number; + gutterY: number; + h: number; + marginX: number; + radius: number | string; + textStyle: any; +}; + +export default class TextMagnifier extends Surface { + get style(): TextMagnifierStyle; + set style(v: StylePartial); + location: 'top' | 'bottom'; + mode: string; + content: string | null; +} diff --git a/packages/@lightningjs/ui-components/src/components/TextMagnifier/TextMagnifier.js b/packages/@lightningjs/ui-components/src/components/TextMagnifier/TextMagnifier.js new file mode 100644 index 000000000..0cb7b1c18 --- /dev/null +++ b/packages/@lightningjs/ui-components/src/components/TextMagnifier/TextMagnifier.js @@ -0,0 +1,124 @@ +/** + * Copyright 2023 Comcast Cable Communications Management, LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + * SPDX-License-Identifier: Apache-2.0 + */ + +import Surface from '../Surface/Surface'; +import ScrollWrapper from '../ScrollWrapper/ScrollWrapper.js'; +import * as styles from './TextMagnifier.styles.js'; + +export default class TextMagnifier extends Surface { + static get __componentName() { + return 'TextMagnifier'; + } + + static get __themeStyle() { + return styles; + } + + static get properties() { + return ['location']; + } + + get mode() { + return 'unfocused'; + } + + set mode(_) { + // Mode is disabled, no action needed + } + + get content() { + return this._content; + } + + set content(value) { + if (this._content !== value) { + this._content = value; + this._updateScrollWrapper(); + } + } + + get _totalHeight() { + const baseHeight = + this.style.textStyle.lineHeight + Math.max(...this._radius) * 2; // Accommodate for all configurations of radii + return Math.max(baseHeight, this.style.textStyle.lineHeight * 2); // Ensure the fade clears + } + + get _radius() { + return this.location === 'top' + ? [0, 0, this.style.radius, this.style.radius] + : [this.style.radius, this.style.radius, 0, 0]; + } + + _construct() { + super._construct(); + this._location = 'top'; + this._content = null; + } + + static _template() { + return { + ...super._template(), + ScrollWrapper: { + type: ScrollWrapper, + autoScroll: true + } + }; + } + + _update() { + const renderPrecision = this.stage.getRenderPrecision(); + const stageWidth = this.stage.w / renderPrecision; + + this.patch({ + w: stageWidth - this.style.gutterX * 2, + h: this._totalHeight, + x: this.style.gutterX, + mountY: this.location === 'top' ? 0 : 1, + y: this.location === 'top' ? 0 : this.stage.h / renderPrecision, + zIndex: this.style.zIndex + }); + + this._updateScrollWrapper(); + super._update(); + } + + _updateScrollWrapper() { + const yCenter = this._totalHeight / 2; + const yOffset = yCenter - this.style.textStyle.fontSize / 2; + const adjustedHeight = this._totalHeight - yOffset; + const radius = Math.max(...this._radius); + const gutterX = this.style.gutterX; + const patchWidth = this.w - Math.max(radius, gutterX) * 2; + const patchX = Math.max(radius, gutterX); + + this.tag('ScrollWrapper').patch({ + alpha: this._content && this._content.length ? 1 : 0, + content: this._content, + h: adjustedHeight, + w: patchWidth, + x: patchX, + y: yOffset, + style: { + textStyle: this.style.textStyle, + fadeHeight: this.style.textStyle.lineHeight, + contentMarginTop: 0, + contentMarginLeft: 0 + } + }); + } +} diff --git a/packages/@lightningjs/ui-components/src/components/TextMagnifier/TextMagnifier.stories.js b/packages/@lightningjs/ui-components/src/components/TextMagnifier/TextMagnifier.stories.js new file mode 100644 index 000000000..ad8a5da25 --- /dev/null +++ b/packages/@lightningjs/ui-components/src/components/TextMagnifier/TextMagnifier.stories.js @@ -0,0 +1,45 @@ +/** + * Copyright 2023 Comcast Cable Communications Management, LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + * SPDX-License-Identifier: Apache-2.0 + */ + +import lng from '@lightningjs/core'; +import { default as TextMagnifierComponent } from '.'; +import { context } from '@lightningjs/ui-components/src'; + +export default { + title: 'Components/TextMagnifier' +}; + +export const TextMagnifier = () => + class TextMagnifier extends lng.Component { + static _template() { + return { + TextMagnifier: { + type: TextMagnifierComponent, + content: + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquet fermentum massa, nec scelerisque magna sodales viverra. Fusce mauris neque, aliquam vitae hendrerit vitae, tempor eu nunc. Vestibulum ligula tellus, feugiat facilisis diam non, scelerisque eleifend justo. Sed fermentum dui velit, eu imperdiet enim pretium vitae. Sed molestie, ex nec lacinia ornare, turpis urna egestas justo, sit amet blandit sapien turpis egestas dui. Sed vel pharetra elit. Quisque auctor risus a elit posuere fermentum. Integer interdum enim vitae arcu faucibus vulputate. Pellentesque sed dolor quis erat venenatis scelerisque in faucibus lectus. Mauris ac semper ante, at lobortis nunc.' + } + }; + } + + _init() { + this.parent.x = -context.theme.layout.marginX; + this.parent.y = -context.theme.layout.marginY; + + super._init(); + } + }; diff --git a/packages/@lightningjs/ui-components/src/components/TextMagnifier/TextMagnifier.styles.js b/packages/@lightningjs/ui-components/src/components/TextMagnifier/TextMagnifier.styles.js new file mode 100644 index 000000000..aeaff4f65 --- /dev/null +++ b/packages/@lightningjs/ui-components/src/components/TextMagnifier/TextMagnifier.styles.js @@ -0,0 +1,43 @@ +/** + * Copyright 2023 Comcast Cable Communications Management, LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + * SPDX-License-Identifier: Apache-2.0 + */ + +export const base = theme => { + return { + color: theme.color.fillNeutral, + gutterX: theme.layout.gutterX * 2, + gutterY: theme.layout.safe, + radius: theme.radius.lg, + textStyle: theme.typography.display1, + zIndex: 9999 + }; +}; + +export const tone = theme => ({ + neutral: { + backgroundColor: theme.color.fillNeutral, + textStyle: { textColor: theme.color.textInverse } + }, + inverse: { + backgroundColor: theme.color.fillInverse, + textStyle: { textColor: theme.color.textNeutral } + }, + brand: { + backgroundColor: theme.color.fillBrand, + textStyle: { textColor: theme.color.textNeutral } + } +}); diff --git a/packages/@lightningjs/ui-components/src/components/TextMagnifier/index.js b/packages/@lightningjs/ui-components/src/components/TextMagnifier/index.js new file mode 100644 index 000000000..77bde66f6 --- /dev/null +++ b/packages/@lightningjs/ui-components/src/components/TextMagnifier/index.js @@ -0,0 +1,19 @@ +/** + * Copyright 2023 Comcast Cable Communications Management, LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + * SPDX-License-Identifier: Apache-2.0 + */ + +export { default as default } from './TextMagnifier'; diff --git a/packages/@lightningjs/ui-components/src/mixins/index.d.ts b/packages/@lightningjs/ui-components/src/mixins/index.d.ts index 20bc80c94..a88219872 100644 --- a/packages/@lightningjs/ui-components/src/mixins/index.d.ts +++ b/packages/@lightningjs/ui-components/src/mixins/index.d.ts @@ -35,3 +35,4 @@ export { default as withSelections } from './withSelections'; export { default as withTags } from './withTags'; export { default as withThemeStyles } from './withThemeStyles'; export { default as withUpdates } from './withUpdates'; +export { default as withTextMagnifier } from './withTextMagnifier'; diff --git a/packages/@lightningjs/ui-components/src/mixins/withTextMagnifier/index.d.ts b/packages/@lightningjs/ui-components/src/mixins/withTextMagnifier/index.d.ts new file mode 100644 index 000000000..f72373bdf --- /dev/null +++ b/packages/@lightningjs/ui-components/src/mixins/withTextMagnifier/index.d.ts @@ -0,0 +1,15 @@ +import lng from '@lightningjs/core'; + +export interface WithTextMagnifier { + set textMagnifierEnabled(val: boolean); + get textMagnifierEnabled(): boolean; +} + +export interface WithTextMagnifierConstructor { + // eslint-disable-next-line @typescript-eslint/no-explicit-any + new (...args: any[]): WithTextMagnifier; +} + +export default function withAnnouncer( + base: T +): T & WithAnnouncerConstructor; diff --git a/packages/@lightningjs/ui-components/src/mixins/withTextMagnifier/index.js b/packages/@lightningjs/ui-components/src/mixins/withTextMagnifier/index.js new file mode 100644 index 000000000..78316057f --- /dev/null +++ b/packages/@lightningjs/ui-components/src/mixins/withTextMagnifier/index.js @@ -0,0 +1,78 @@ +import lng from '@lightningjs/core'; +import TextMagnifier from '../../components/TextMagnifier/TextMagnifier'; + +function isSubclass(Subclass, Superclass) { + // Traverse up the prototype chain to check if the Superclass is found + while (Subclass) { + if (Subclass === Superclass) { + return true; + } + Subclass = Object.getPrototypeOf(Subclass); + } + return false; +} + +export default function (Base) { + if (!isSubclass(Base, lng.Application)) { + console.error( + 'withTextMagnifier can only be applied to an application class' + ); + return Base; + } + + return class extends Base { + set textMagnifierEnabled(val) { + this._textMagnifierEnabled = val; + this._updateTextMagnifier(true); + } + + get textMagnifierEnabled() { + return this._textMagnifierEnabled; + } + + get _focusedElement() { + return this.application?.focusPath?.[ + this.application.focusPath.length - 1 + ]; + } + + get _location() { + const { py: focusedY } = this._focusedElement?.core?.renderContext || {}; + return focusedY > this.stage.h / 2 ? 'top' : 'bottom'; + } + + get _focusText() { + const { title, description, announce } = this._focusedElement || {}; + const focusText = title || description || announce || ''; + return Array.isArray(focusText) + ? focusText.filter(Boolean).join('. ').replace(/\.$/, '') + : focusText.replace(/\.$/, ''); + } + + _focusChange() { + this._updateTextMagnifier(); + super._focusChange(); + } + + _updateTextMagnifier() { + if ( + !this.textMagnifierEnabled || + !this._focusedElement || + !this._focusText.length + ) { + if (this.tag('TextMagnifier')) { + this.patch({ TextMagnifier: undefined }); + } + return; + } + + this.patch({ + TextMagnifier: { + type: TextMagnifier, + location: this._location, + content: this._focusText + } + }); + } + }; +} diff --git a/packages/@lightningjs/ui-components/src/mixins/withTextMagnifier/withTextMagnifier.stories.js b/packages/@lightningjs/ui-components/src/mixins/withTextMagnifier/withTextMagnifier.stories.js new file mode 100644 index 000000000..9d215d808 --- /dev/null +++ b/packages/@lightningjs/ui-components/src/mixins/withTextMagnifier/withTextMagnifier.stories.js @@ -0,0 +1,113 @@ +/** + * Copyright 2023 Comcast Cable Communications Management, LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + * SPDX-License-Identifier: Apache-2.0 + */ + +import lng from '@lightningjs/core'; +import withTextMagnifier from '.'; +import Column from '../../components/Column/Column'; +import Row from '../../components/Row/Row'; +import Button from '../../components/Button/Button'; + +export default { + title: 'Utilities/withTextMagnifier', + component: withTextMagnifier +}; + +const rows = [ + { + type: Row, + w: 1920 - 160, // x offset from preview.js * 2, + h: 100, + itemSpacing: 30, + items: [ + { + type: Button, + title: 'Button 1', + announceContext: '1 of 3' + }, + { + type: Button, + title: 'Button 2', + announceContext: '2 of 3' + }, + { type: Button, title: 'Button 3', announceContext: '3 of 3' } + ] + }, + { + type: Row, + w: 1920 - 160, // x offset from preview.js * 2, + h: 100, + itemSpacing: 30, + items: [ + { + type: Button, + title: 'Button 1', + announceContext: '1 of 3' + }, + { + type: Button, + title: 'Button 2', + announceContext: '2 of 3' + }, + { type: Button, title: 'Button 3', announceContext: '3 of 3' } + ] + }, + { + type: Row, + w: 1920 - 160, // x offset from preview.js * 2, + h: 100, + itemSpacing: 30, + items: [ + { + type: Button, + title: 'Button 1', + announceContext: '1 of 3' + }, + { + type: Button, + title: 'Button 2', + announceContext: '2 of 3' + }, + { type: Button, title: 'Button 3', announceContext: '3 of 3' } + ] + } +]; + +export const Basic = () => + class Basic extends lng.Component { + static _template() { + return { + Column: { + type: Column, + w: 1920 - 160, // x offset from preview.js * 2, + h: 400, + style: { + itemSpacing: 20 + }, + items: rows + } + }; + } + + _init() { + this.fireAncestors('$toggleTextMagnifier', true); + } + + _detach() { + this.fireAncestors('$toggleTextMagnifier', false); + } + }; diff --git a/packages/apps/lightning-ui-docs/.storybook/addons/constants.js b/packages/apps/lightning-ui-docs/.storybook/addons/constants.js index 77572d9ac..be3b00f5d 100644 --- a/packages/apps/lightning-ui-docs/.storybook/addons/constants.js +++ b/packages/apps/lightning-ui-docs/.storybook/addons/constants.js @@ -21,6 +21,7 @@ export const ADDON_ID = 'lui-addons'; // specfic add-ons export const DOWNLOAD_ID = `${ADDON_ID}/downloadbutton`; export const ANNOUNCE_ID = `${ADDON_ID}/announcetoggle`; +export const MAGNIFIER_ID = `${ADDON_ID}/magnifiertoggle`; export const GRIDOVERLAY_ID = `${ADDON_ID}/gridoverlaypanel`; export const THEMEPANEL_ID = `${ADDON_ID}/themepanel`; export const COMPONENTSTYLES_ID = `${ADDON_ID}/componentstylespanel`; diff --git a/packages/apps/lightning-ui-docs/.storybook/addons/decorators/withLightning.js b/packages/apps/lightning-ui-docs/.storybook/addons/decorators/withLightning.js index 8d5ebf7c2..ceb482c13 100644 --- a/packages/apps/lightning-ui-docs/.storybook/addons/decorators/withLightning.js +++ b/packages/apps/lightning-ui-docs/.storybook/addons/decorators/withLightning.js @@ -83,6 +83,7 @@ export const withLightning = ( const app = createApp({ theme: globals.LUITheme }); clearInspector(); app.announcerEnabled = globals.announce; + app.textMagnifierEnabled = globals.magnifier; app.debug = globals.announce; // toggle stage color !globals.stageColor @@ -92,8 +93,10 @@ export const withLightning = ( // // If an update is required patch in the new child element if (shouldTriggerUpdate({ id, args, argTypes, parameters })) { app.childList.clear(); + app.childList.remove() app.childList.a({ StoryComponent: { + ref: 'StoryComponent', type: class extends StoryComponent() { static _states() { return [ @@ -112,6 +115,7 @@ export const withLightning = ( // FIXME: Assess what config.optimization.minimize is doing different in production vs develop - this was prior to v7 upgrade get componentTarget() { // using this check on type Element because production vs develop build issue + console.log(this.childList._items) return this.childList.first instanceof lng.Component ? this.childList.first : this; @@ -176,12 +180,12 @@ export const withLightning = ( app.tag('StoryComponent').patch( parameters.storyDetails ? { - x: context.theme.layout.marginX - } + x: context.theme.layout.marginX + } : { - x: context.theme.layout.marginX, - y: context.theme.layout.marginY - } + x: context.theme.layout.marginX, + y: context.theme.layout.marginY + } ); }); if (!app.tag('GridOverlay')) { diff --git a/packages/apps/lightning-ui-docs/.storybook/addons/toolbars/Announce.js b/packages/apps/lightning-ui-docs/.storybook/addons/toolbars/Announce.js index 0c81f119c..89d8eab07 100644 --- a/packages/apps/lightning-ui-docs/.storybook/addons/toolbars/Announce.js +++ b/packages/apps/lightning-ui-docs/.storybook/addons/toolbars/Announce.js @@ -19,7 +19,7 @@ import React, { memo, useCallback, useEffect } from 'react'; import { useGlobals, useStorybookApi } from '@storybook/manager-api'; import { Icons, IconButton } from '@storybook/components'; -import { ADDON_ID, ANNOUNCE_ID } from '../constants'; +import { ADDON_ID, ANNOUNCE_ID, MAGNIFIER_ID } from '../constants'; export const Announce = memo(function MyAddonSelector() { const [{ announce }, updateGlobals] = useGlobals(); @@ -50,3 +50,34 @@ export const Announce = memo(function MyAddonSelector() { ); }); + +export const Magnifier = memo(function MyAddonSelector() { + const [{ magnifier }, updateGlobals] = useGlobals(); + const api = useStorybookApi(); + const isActive = [true, 'true'].includes(magnifier); + const toggleMagnifier = useCallback(() => { + console.log('here') + updateGlobals({ + magnifier: !isActive + }); + }, [isActive]); + + useEffect(() => { + api.setAddonShortcut(ADDON_ID, { + label: 'Magnifier Toggle [0]', + actionName: 'Magnifier', + action: toggleMagnifier + }); + }, [toggleMagnifier, api]); + + return ( + + + + ); +}); diff --git a/packages/apps/lightning-ui-docs/.storybook/addons/toolbars/index.js b/packages/apps/lightning-ui-docs/.storybook/addons/toolbars/index.js index 1305aa61b..ccba37673 100644 --- a/packages/apps/lightning-ui-docs/.storybook/addons/toolbars/index.js +++ b/packages/apps/lightning-ui-docs/.storybook/addons/toolbars/index.js @@ -16,7 +16,7 @@ * SPDX-License-Identifier: Apache-2.0 */ -export { Announce } from './Announce'; +export { Announce, Magnifier } from './Announce'; export { StageColor } from './StageColor'; export { default as ThemeDownload } from './ThemeDownload'; export { default as ThemePicker } from './ThemePicker'; diff --git a/packages/apps/lightning-ui-docs/.storybook/manager.js b/packages/apps/lightning-ui-docs/.storybook/manager.js index 7e4f008d9..825ffcf88 100644 --- a/packages/apps/lightning-ui-docs/.storybook/manager.js +++ b/packages/apps/lightning-ui-docs/.storybook/manager.js @@ -21,6 +21,7 @@ import theme from './theme'; import * as ids from './addons/constants'; import { Announce, + Magnifier, StageColor, ThemeDownload, ThemePicker @@ -45,6 +46,13 @@ addons.register(ids.ADDON_ID, () => { match: ({ viewMode }) => viewMode === 'story', // show only in story render: Announce }); + // Magnifier toggle + addons.add(ids.MAGNIFIER_ID, { + type: types.TOOL, + title: 'Magnifier Toggle', + match: ({ viewMode }) => viewMode === 'story', // show only in story + render: Magnifier + }); // Theme Picker addons.add(ids.THEMEPICKER_ID, { type: types.TOOL, diff --git a/packages/apps/lightning-ui-docs/.storybook/preview.js b/packages/apps/lightning-ui-docs/.storybook/preview.js index 7737f6a40..1f0ecec7c 100644 --- a/packages/apps/lightning-ui-docs/.storybook/preview.js +++ b/packages/apps/lightning-ui-docs/.storybook/preview.js @@ -118,6 +118,9 @@ const preview = { announce: { defaultValue: false }, + magnifier: { + defaultValue: false + }, stageColor: { defaultValue: false } diff --git a/packages/apps/lightning-ui-docs/index.js b/packages/apps/lightning-ui-docs/index.js index d9abc1e4f..89fe4187e 100644 --- a/packages/apps/lightning-ui-docs/index.js +++ b/packages/apps/lightning-ui-docs/index.js @@ -19,6 +19,7 @@ import lng from '@lightningjs/core'; import 'lightningInspect'; import { + withTextMagnifier, withAnnouncer, Speech, pool, @@ -62,10 +63,8 @@ export const createApp = parameters => { window.CONTEXT = context; // Used by addons - window.APP = new (class LightningUIApp extends withAnnouncer( - lng.Application, - Speech, - announcerOptions + window.APP = new (class LightningUIApp extends withTextMagnifier( + withAnnouncer(lng.Application, Speech, announcerOptions) ) { _construct() { this.announcerTimeout = 15 * 1000; @@ -79,6 +78,10 @@ export const createApp = parameters => { this.emit('storyChanged'); } + $toggleTextMagnifier(value) { + this.textMagnifierEnabled = Boolean(value); + } + _getFocused() { return ((this.childList.first || {}).childList || {}).first || this; }