diff --git a/cspell.json b/cspell.json index 29b93af05..f6f397bb8 100644 --- a/cspell.json +++ b/cspell.json @@ -125,6 +125,7 @@ "noreferrer", "novalidate", "Numberish", + "nums", "oklab", "oklch", "onscrollend", @@ -139,6 +140,7 @@ "progressbar", "radiogroup", "Railsbyte", + "referrerpolicy", "remixicon", "reregister", "resizer", @@ -165,6 +167,7 @@ "slotchange", "smartquotes", "spacebar", + "srcdoc", "stylesheet", "svgs", "Tabbable", diff --git a/packages/webawesome/docs/_includes/page-demo.njk b/packages/webawesome/docs/_includes/page-demo.njk index 031145a15..fc22ab978 100644 --- a/packages/webawesome/docs/_includes/page-demo.njk +++ b/packages/webawesome/docs/_includes/page-demo.njk @@ -15,9 +15,8 @@ {% endfor %} - - - + + - - - ${preview} - - - `); - const codeExample = parse(` -
+
- - ${isViewportDemo ? ` ` : preview} - + ${preview} diff --git a/packages/webawesome/docs/assets/scripts/preset-theme-picker.js b/packages/webawesome/docs/assets/scripts/preset-theme-picker.js index 9965d8c37..90953cd2e 100644 --- a/packages/webawesome/docs/assets/scripts/preset-theme-picker.js +++ b/packages/webawesome/docs/assets/scripts/preset-theme-picker.js @@ -1,4 +1,4 @@ -import { domChange, nextFrame, ThemeAspect } from './theme-picker.js'; +import { domChange, ThemeAspect } from './theme-picker.js'; const presetTheme = new ThemeAspect({ defaultValue: 'default', @@ -33,7 +33,7 @@ const presetTheme = new ThemeAspect({ if (instant) { // If no VT, delay by 1 frame to make it smoother - await nextFrame(); + await new Promise(requestAnimationFrame); } oldStylesheet.remove(); diff --git a/packages/webawesome/docs/assets/scripts/theme-picker.js b/packages/webawesome/docs/assets/scripts/theme-picker.js index 1fb301e1a..1a39ee50a 100644 --- a/packages/webawesome/docs/assets/scripts/theme-picker.js +++ b/packages/webawesome/docs/assets/scripts/theme-picker.js @@ -1,14 +1,11 @@ import { domChange } from './util/dom-change.js'; export { domChange }; -export function nextFrame() { - return new Promise(resolve => requestAnimationFrame(resolve)); -} - export class ThemeAspect { constructor(options) { Object.assign(this, options); this.set(); + this.syncIframes(); // Update when local storage changes. // That way changes in one window will propagate to others (including iframes). @@ -67,6 +64,30 @@ export class ThemeAspect { this.syncUI(); } + async syncIframes() { + await customElements.whenDefined('wa-zoomable-frame'); + await new Promise(requestAnimationFrame); + + // Sync to wa-zoomable-frame iframes + let dark = this.computedValue === 'dark'; + for (let zoomableEl of document.querySelectorAll('wa-zoomable-frame')) { + const iframe = zoomableEl.iframe; + + const applyToIframe = () => { + try { + iframe.contentDocument.documentElement.classList.toggle('wa-dark', dark); + } catch (e) { + // Silently handle access issues + } + }; + + // Try immediately + applyToIframe(); + // Also listen for load in case it wasn't ready + iframe.addEventListener('load', applyToIframe, { once: true }); + } + } + syncUI(container = document) { for (let picker of container.querySelectorAll(this.picker)) { picker.setAttribute('value', this.value); @@ -87,27 +108,22 @@ const colorScheme = new ThemeAspect({ }, applyChange() { - // Toggle the dark mode class - domChange(() => { + // Toggle the dark mode class with view transition + const updateTheme = () => { let dark = this.computedValue === 'dark'; document.documentElement.classList.toggle(`wa-dark`, dark); document.documentElement.dispatchEvent(new CustomEvent('wa-color-scheme-change', { detail: { dark } })); - syncViewportDemoColorSchemes(); - }); + this.syncIframes(); + }; + + if (document.startViewTransition) { + document.startViewTransition(() => domChange(updateTheme)); + } else { + domChange(updateTheme); + } }, }); -function syncViewportDemoColorSchemes() { - const isDark = document.documentElement.classList.contains('wa-dark'); - - // Update viewport demo color schemes in code examples - document.querySelectorAll('.code-example.is-viewport-demo wa-viewport-demo').forEach(demo => { - demo.querySelectorAll('iframe').forEach(iframe => { - iframe.contentWindow.document.documentElement?.classList?.toggle('wa-dark', isDark); - }); - }); -} - // Update the color scheme when the preference changes window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => colorScheme.set()); @@ -121,12 +137,3 @@ document.addEventListener('keydown', event => { colorScheme.set(colorScheme.get() === 'dark' ? 'light' : 'dark'); } }); - -// When rendering a code example with a viewport demo, set the theme to match initially -document.querySelectorAll('.code-example.is-viewport-demo wa-viewport-demo iframe').forEach(iframe => { - const isDark = document.documentElement.classList.contains('wa-dark'); - - iframe.addEventListener('load', () => { - iframe.contentWindow.document.documentElement?.classList?.toggle('wa-dark', isDark); - }); -}); diff --git a/packages/webawesome/docs/docs/components/zoomable-frame.md b/packages/webawesome/docs/docs/components/zoomable-frame.md new file mode 100644 index 000000000..5d17d97f9 --- /dev/null +++ b/packages/webawesome/docs/docs/components/zoomable-frame.md @@ -0,0 +1,79 @@ +--- +title: Zoomable Frame +layout: component +--- + +```html {.example} + + +``` + +## Examples + +### Loading external content + +Use the `src` attribute to embed external websites or resources. The URL must be accessible, and cross-origin restrictions may apply due to the Same-Origin Policy, potentially limiting access to the iframe's content. + +```html + + +``` + +The zoomable frame fills 100% width by default with a 16:9 aspect ratio. Customize this using the `aspect-ratio` CSS property. + +```html + + +``` + +Use the `srcdoc` attribute or property to display custom HTML content directly within the iframe, perfect for rendering inline content without external resources. + +```html + + +``` + +:::info +When both `src` and `srcdoc` are specified, `srcdoc` takes precedence. +::: + +### Controlling zoom behavior + +Set the `zoom` attribute to control the frame's zoom level. Use `1` for 100%, `2` for 200%, `0.5` for 50%, and so on. + +Define specific zoom increments with the `zoom-levels` attribute using space-separated percentages and decimal values like `zoom-levels="0.25 0.5 75% 100%"`. + +```html {.example} + + +``` + +### Hiding zoom controls + +Add the `without-controls` attribute to hide the zoom control interface from the frame. + +```html {.example} + + +``` + +### Preventing user interaction + +Apply the `without-interaction` attribute to make the frame non-interactive. Note that this prevents keyboard navigation into the frame, which may impact accessibility for some users. + +```html {.example} + + +``` diff --git a/packages/webawesome/docs/docs/resources/changelog.md b/packages/webawesome/docs/docs/resources/changelog.md index aa8ee061a..f62d5da9b 100644 --- a/packages/webawesome/docs/docs/resources/changelog.md +++ b/packages/webawesome/docs/docs/resources/changelog.md @@ -40,6 +40,7 @@ During the alpha period, things might break! We take breaking changes very serio - 🚨 BREAKING: removed the `hint` property and slot from ``; please apply hints directly to `` instead - 🚨 BREAKING: removed ``; use `` instead - Added a new free component: `` (#2 of 14 per stretch goals) +- Added a new free component: `` (#3 of 14 per stretch goals) - Added a `min-block-size` to `` to ensure the divider is visible regardless of container height [issue:675] - Added support for `name` in `` for exclusively opening one in a group - Added `--checked-icon-scale` to `` diff --git a/packages/webawesome/src/components/viewport-demo/viewport-demo.css b/packages/webawesome/src/components/viewport-demo/viewport-demo.css deleted file mode 100644 index a93e8f2c8..000000000 --- a/packages/webawesome/src/components/viewport-demo/viewport-demo.css +++ /dev/null @@ -1,147 +0,0 @@ -:host { - --viewport-background-color: var(--wa-color-surface-default, canvas); - --viewport-resize: both; - --viewport-min-width: 10em; - --viewport-min-height: 5em; - --viewport-max-width: 100%; - --viewport-padding: var(--wa-space-2xl, 2rem); - --viewport-initial-aspect-ratio: 16 / 9; - --viewport-bezel-width: 0.25em; - - display: block; - /* Needed for measuring the available space */ - contain: inline-size; - container-type: inline-size; - container-name: host; -} - -[part~='frame'] { - --zoom: 1; /* overridden by JS */ - --available-width: calc((100cqw - var(--offset-inline, 0px))); - --iframe-manual-aspect-ratio: calc(var(--iframe-manual-width-px) / var(--iframe-manual-height-px)); - --iframe-manual-width: calc(var(--iframe-manual-width-px) * 1px * var(--zoom)); - --iframe-manual-height: calc(var(--iframe-manual-height-px) * 1px * var(--zoom)); - --width: var(--iframe-manual-width, var(--available-width)); - --height-auto: calc(var(--width) / (var(--aspect-ratio))); - - --_aspect-ratio: calc(var(--viewport-width-px) / var(--viewport-height-px)); - --aspect-ratio: var(--_aspect-ratio, var(--viewport-initial-aspect-ratio)); - - display: flex; - flex-flow: column; - align-items: start; - - width: fit-content; - height: fit-content; - - /* Style frame like a window */ - border: var(--viewport-bezel-width) solid transparent; - border-radius: var(--wa-border-radius-m); - - /* Window-like frame styling */ - --button-params: 0.4em / 0.5em 0.5em border-box; - background: - radial-gradient(circle closest-side, var(--wa-color-red-60) 80%, var(--wa-color-red-50) 98%, transparent) 0.4em - var(--button-params), - radial-gradient(circle closest-side, var(--wa-color-yellow-80) 80%, var(--wa-color-yellow-70) 98%, transparent) - 1.1em var(--button-params), - radial-gradient(circle closest-side, var(--wa-color-green-70) 80%, var(--wa-color-green-60) 98%, transparent) 1.8em - var(--button-params), - var(--wa-color-gray-95); - background-repeat: no-repeat; - - &.resized { - aspect-ratio: var(--iframe-manual-aspect-ratio); - } - - background-color: var(--wa-color-neutral-fill-normal); - - /* User has not yet resized the viewport */ - &:not(.resized) ::slotted(iframe), - &:not(.resized) slot { - /* Will only be set if we have BOTH width and height */ - aspect-ratio: var(--aspect-ratio); - } -} - -slot { - display: block; - overflow: clip; - width: var(--width); - max-width: var(--available-width); - height: var(--iframe-manual-height, var(--height-auto)); -} - -::slotted(iframe) { - display: block; - flex: auto; - scale: var(--zoom); - transform-origin: top left; - resize: var(--viewport-resize); - border-radius: var(--wa-border-radius-m); - overflow: auto; - - /* The width and height specified here are only applied if the iframe is not manually resized */ - width: calc(var(--available-width) / var(--zoom)); - height: calc(var(--height-auto) / var(--zoom)); - - min-width: calc(var(--viewport-min-width, 10em) / var(--zoom)); - max-width: calc(var(--available-width) / var(--zoom)) !important; - min-height: calc(var(--viewport-min-height) / var(--zoom)); - - /* Divide with var(--zoom) to get lengths that stay constant regardless of zoom level */ - border: calc(1px / var(--zoom)) solid var(--wa-color-gray-90); -} - -[part~='controls'] { - display: flex; - align-items: center; - align-self: end; - gap: 0.3em; - margin-top: -0.2em; - font-size: var(--wa-font-size-xs); - padding-block-end: 0.25em; - padding-inline: 1em 0.2em; - white-space: nowrap; - - /* Until we can implement info that is not lying, we don’t show it when it's lying */ - .needs-internal-zoom & > * { - opacity: 0 !important; - pointer-events: none; - } - - .dimensions { - word-spacing: -0.15em; - margin-inline-end: 1em; - } - - wa-icon { - font-size: 85%; - } - - wa-button { - line-height: 1; - - &::part(base) { - padding: 0; - height: 1em; - width: 1em; - } - } - - .zoom { - display: flex; - align-items: center; - gap: 0.3em; - } - - [part~='zoom-in'], - [part~='zoom-in']::part(base) { - cursor: zoom-in; - } - - [part~='zoom-out'], - [part~='zoom-out']::part(base) { - cursor: zoom-out; - } -} diff --git a/packages/webawesome/src/components/viewport-demo/viewport-demo.ts b/packages/webawesome/src/components/viewport-demo/viewport-demo.ts deleted file mode 100644 index bc6a4877d..000000000 --- a/packages/webawesome/src/components/viewport-demo/viewport-demo.ts +++ /dev/null @@ -1,432 +0,0 @@ -import type { PropertyValues } from 'lit'; -import { html } from 'lit'; -import { customElement, property, query, state } from 'lit/decorators.js'; -import { classMap } from 'lit/directives/class-map.js'; -import { styleMap } from 'lit/directives/style-map.js'; -import { getComputedStyle } from '../../internal/computed-style.js'; -import { watch } from '../../internal/watch.js'; -import WebAwesomeElement from '../../internal/webawesome-element.js'; -import '../button/button.js'; -import styles from './viewport-demo.css'; - -export interface ViewportDimensions { - width: number; - height?: number; -} - -export function isViewportDimensions( - viewport: boolean | ViewportDimensions | undefined, -): viewport is ViewportDimensions { - return Boolean(viewport) && typeof viewport === 'object' && 'width' in viewport; -} - -export const viewportPropertyConverter = { - fromAttribute(value: string | null) { - if (value === null) { - return false; - } - if (value === '') { - return true; - } - - const [width, height] = value.trim().split(/\s*x\s*/); - const ret: ViewportDimensions = { width: parseFloat(width) }; - if (height) { - ret.height = parseFloat(height); - } - return ret; - }, - toAttribute(value: boolean | ViewportDimensions) { - if (value === false) { - return null; - } - if (value === true) { - return ''; - } - return `${value.width} x ${value.height}`; - }, -}; - -/** - * @summary Viewport demos can be used to display an iframe as a resizable, zoomable preview. - * @documentation https://backers.webawesome.com/docs/components/viewport-demo - * @status experimental - * @since 3.0 - * - * @dependency wa-button - * - * @slot - The iframe (usually an ` +
+ + ${!this.withoutControls + ? html` +
+ + ${this.localize.number(this.zoom, { style: 'percent', maximumFractionDigits: 1 })} + +
+ ` + : ''} + `; + } +} + +declare global { + interface HTMLElementTagNameMap { + 'wa-zoomable-frame': WaZoomableFrame; + } +} diff --git a/packages/webawesome/src/styles/native.css b/packages/webawesome/src/styles/native.css index 4d0e14888..c2205fbfe 100644 --- a/packages/webawesome/src/styles/native.css +++ b/packages/webawesome/src/styles/native.css @@ -51,8 +51,7 @@ table, ul, video, - wa-callout, - wa-viewport-demo { + wa-callout { &:has(+ *) { margin: 0 0 var(--wa-space-xl) 0; } diff --git a/packages/webawesome/src/translations/ar.ts b/packages/webawesome/src/translations/ar.ts index 9b7ff5005..6adc2a0be 100644 --- a/packages/webawesome/src/translations/ar.ts +++ b/packages/webawesome/src/translations/ar.ts @@ -35,6 +35,8 @@ const translation: Translation = { showPassword: 'عرض كلمة المرور', slideNum: slide => `شريحة ${slide}`, toggleColorFormat: 'تغيير صيغة عرض اللون', + zoomIn: 'تكبير', + zoomOut: 'تصغير', }; registerTranslation(translation); diff --git a/packages/webawesome/src/translations/cs.ts b/packages/webawesome/src/translations/cs.ts index 3532ee711..d8214e363 100644 --- a/packages/webawesome/src/translations/cs.ts +++ b/packages/webawesome/src/translations/cs.ts @@ -33,6 +33,8 @@ const translation: Translation = { showPassword: 'Zobrazit heslo', slideNum: slide => `Slide ${slide}`, toggleColorFormat: 'Přepnout formát barvy', + zoomIn: 'Přiblížit', + zoomOut: 'Oddálit', }; registerTranslation(translation); diff --git a/packages/webawesome/src/translations/da.ts b/packages/webawesome/src/translations/da.ts index a0c5894a0..b3a2e9d86 100644 --- a/packages/webawesome/src/translations/da.ts +++ b/packages/webawesome/src/translations/da.ts @@ -33,6 +33,8 @@ const translation: Translation = { showPassword: 'Vis adgangskode', slideNum: slide => `Slide ${slide}`, toggleColorFormat: 'Skift farveformat', + zoomIn: 'Zoom ind', + zoomOut: 'Zoom ud', }; registerTranslation(translation); diff --git a/packages/webawesome/src/translations/de.ts b/packages/webawesome/src/translations/de.ts index b73a18bfc..c876db206 100644 --- a/packages/webawesome/src/translations/de.ts +++ b/packages/webawesome/src/translations/de.ts @@ -33,6 +33,8 @@ const translation: Translation = { showPassword: 'Passwort anzeigen', slideNum: slide => `Folie ${slide}`, toggleColorFormat: 'Farbformat umschalten', + zoomIn: 'Hineinzoomen', + zoomOut: 'Herauszoomen', }; registerTranslation(translation); diff --git a/packages/webawesome/src/translations/en.ts b/packages/webawesome/src/translations/en.ts index 5c1d4e437..5c5601faa 100644 --- a/packages/webawesome/src/translations/en.ts +++ b/packages/webawesome/src/translations/en.ts @@ -33,6 +33,8 @@ const translation: Translation = { showPassword: 'Show password', slideNum: slide => `Slide ${slide}`, toggleColorFormat: 'Toggle color format', + zoomIn: 'Zoom in', + zoomOut: 'Zoom out', }; registerTranslation(translation); diff --git a/packages/webawesome/src/translations/es.ts b/packages/webawesome/src/translations/es.ts index 930519dbf..fa740c1ce 100644 --- a/packages/webawesome/src/translations/es.ts +++ b/packages/webawesome/src/translations/es.ts @@ -33,6 +33,8 @@ const translation: Translation = { showPassword: 'Mostrar contraseña', slideNum: slide => `Diapositiva ${slide}`, toggleColorFormat: 'Alternar formato de color', + zoomIn: 'Acercar', + zoomOut: 'Alejar', }; registerTranslation(translation); diff --git a/packages/webawesome/src/translations/fa.ts b/packages/webawesome/src/translations/fa.ts index ee3d29bc5..aa3ab9fdd 100644 --- a/packages/webawesome/src/translations/fa.ts +++ b/packages/webawesome/src/translations/fa.ts @@ -33,6 +33,8 @@ const translation: Translation = { showPassword: 'نمایش رمز', slideNum: slide => `اسلاید ${slide}`, toggleColorFormat: 'تغییر قالب رنگ', + zoomIn: 'بزرگ‌نمایی', + zoomOut: 'کوچک‌نمایی', }; registerTranslation(translation); diff --git a/packages/webawesome/src/translations/fi.ts b/packages/webawesome/src/translations/fi.ts index ba4ffec62..14210828f 100644 --- a/packages/webawesome/src/translations/fi.ts +++ b/packages/webawesome/src/translations/fi.ts @@ -33,6 +33,8 @@ const translation: Translation = { showPassword: 'Näytä salasana', slideNum: slide => `Dia ${slide}`, toggleColorFormat: 'Vaihda väriformaattia', + zoomIn: 'Lähennä', + zoomOut: 'Loitonna', }; registerTranslation(translation); diff --git a/packages/webawesome/src/translations/fr.ts b/packages/webawesome/src/translations/fr.ts index a821bf993..a6d9bb12c 100644 --- a/packages/webawesome/src/translations/fr.ts +++ b/packages/webawesome/src/translations/fr.ts @@ -33,6 +33,8 @@ const translation: Translation = { showPassword: 'Montrer le mot de passe', slideNum: slide => `Diapositive ${slide}`, toggleColorFormat: 'Changer le format de couleur', + zoomIn: 'Zoomer', + zoomOut: 'Dézoomer', }; registerTranslation(translation); diff --git a/packages/webawesome/src/translations/he.ts b/packages/webawesome/src/translations/he.ts index a92b5f119..ea564ba2a 100644 --- a/packages/webawesome/src/translations/he.ts +++ b/packages/webawesome/src/translations/he.ts @@ -33,6 +33,8 @@ const translation: Translation = { showPassword: 'הראה סיסמה', slideNum: slide => `שקופית ${slide}`, toggleColorFormat: 'החלף פורמט צבע', + zoomIn: 'התקרב', + zoomOut: 'התרחק', }; registerTranslation(translation); diff --git a/packages/webawesome/src/translations/hr.ts b/packages/webawesome/src/translations/hr.ts index b66c2f447..6f2dcc4d6 100644 --- a/packages/webawesome/src/translations/hr.ts +++ b/packages/webawesome/src/translations/hr.ts @@ -33,6 +33,8 @@ const translation: Translation = { showPassword: 'Pokaži lozinku', slideNum: slide => `Slajd ${slide}`, toggleColorFormat: 'Zamijeni format boje', + zoomIn: 'Povećaj', + zoomOut: 'Smanji', }; registerTranslation(translation); diff --git a/packages/webawesome/src/translations/hu.ts b/packages/webawesome/src/translations/hu.ts index f1203c838..01d21071a 100644 --- a/packages/webawesome/src/translations/hu.ts +++ b/packages/webawesome/src/translations/hu.ts @@ -33,6 +33,8 @@ const translation: Translation = { showPassword: 'Jelszó megjelenítése', slideNum: slide => `${slide}. dia`, toggleColorFormat: 'Színformátum változtatása', + zoomIn: 'Nagyítás', + zoomOut: 'Kicsinyítés', }; registerTranslation(translation); diff --git a/packages/webawesome/src/translations/id.ts b/packages/webawesome/src/translations/id.ts index 876a474ce..020bb3098 100644 --- a/packages/webawesome/src/translations/id.ts +++ b/packages/webawesome/src/translations/id.ts @@ -33,6 +33,8 @@ const translation: Translation = { showPassword: 'Tampilkan sandi', slideNum: slide => `Slide ${slide}`, toggleColorFormat: 'Beralih format warna', + zoomIn: 'Perbesar', + zoomOut: 'Perkecil', }; registerTranslation(translation); diff --git a/packages/webawesome/src/translations/it.ts b/packages/webawesome/src/translations/it.ts index a5712e653..330665423 100644 --- a/packages/webawesome/src/translations/it.ts +++ b/packages/webawesome/src/translations/it.ts @@ -33,6 +33,8 @@ const translation: Translation = { showPassword: 'Mostra password', slideNum: slide => `Diapositiva ${slide}`, toggleColorFormat: 'Cambia formato colore', + zoomIn: 'Ingrandire', + zoomOut: 'Rimpicciolire', }; registerTranslation(translation); diff --git a/packages/webawesome/src/translations/ja.ts b/packages/webawesome/src/translations/ja.ts index 0fb8db111..582fd91da 100644 --- a/packages/webawesome/src/translations/ja.ts +++ b/packages/webawesome/src/translations/ja.ts @@ -32,6 +32,8 @@ const translation: Translation = { showPassword: 'パスワードを表示', slideNum: slide => `スライド ${slide}`, toggleColorFormat: '色のフォーマットを切り替える', + zoomIn: 'ズームイン', + zoomOut: 'ズームアウト', }; registerTranslation(translation); diff --git a/packages/webawesome/src/translations/nb.ts b/packages/webawesome/src/translations/nb.ts index 7f3d6a510..edd48f4c2 100644 --- a/packages/webawesome/src/translations/nb.ts +++ b/packages/webawesome/src/translations/nb.ts @@ -33,6 +33,8 @@ const translation: Translation = { showPassword: 'Vis passord', slideNum: slide => `Visning ${slide}`, toggleColorFormat: 'Bytt fargeformat', + zoomIn: 'Zoom inn', + zoomOut: 'Zoom ut', }; registerTranslation(translation); diff --git a/packages/webawesome/src/translations/nl.ts b/packages/webawesome/src/translations/nl.ts index 2338c1f2a..7a0c07ca6 100644 --- a/packages/webawesome/src/translations/nl.ts +++ b/packages/webawesome/src/translations/nl.ts @@ -33,6 +33,8 @@ const translation: Translation = { showPassword: 'Laat wachtwoord zien', slideNum: slide => `Schuif ${slide}`, toggleColorFormat: 'Wissel kleurnotatie', + zoomIn: 'Inzoomen', + zoomOut: 'Uitzoomen', }; registerTranslation(translation); diff --git a/packages/webawesome/src/translations/nn.ts b/packages/webawesome/src/translations/nn.ts index 74cae3997..cf48c6b28 100644 --- a/packages/webawesome/src/translations/nn.ts +++ b/packages/webawesome/src/translations/nn.ts @@ -33,6 +33,8 @@ const translation: Translation = { showPassword: 'Vis passord', slideNum: slide => `Visning ${slide}`, toggleColorFormat: 'Byt fargeformat', + zoomIn: 'Zoom inn', + zoomOut: 'Zoom ut', }; registerTranslation(translation); diff --git a/packages/webawesome/src/translations/pl.ts b/packages/webawesome/src/translations/pl.ts index 8bf37ad2c..602d09296 100644 --- a/packages/webawesome/src/translations/pl.ts +++ b/packages/webawesome/src/translations/pl.ts @@ -33,6 +33,8 @@ const translation: Translation = { showPassword: 'Pokaż hasło', slideNum: slide => `Slajd ${slide}`, toggleColorFormat: 'Przełącz format', + zoomIn: 'Powiększ', + zoomOut: 'Pomniejsz', }; registerTranslation(translation); diff --git a/packages/webawesome/src/translations/pt.ts b/packages/webawesome/src/translations/pt.ts index 7b43fec58..6261d060e 100644 --- a/packages/webawesome/src/translations/pt.ts +++ b/packages/webawesome/src/translations/pt.ts @@ -33,6 +33,8 @@ const translation: Translation = { showPassword: 'Mostrar senha', slideNum: slide => `Slide ${slide}`, toggleColorFormat: 'Trocar o formato de cor', + zoomIn: 'Aumentar zoom', + zoomOut: 'Diminuir zoom', }; registerTranslation(translation); diff --git a/packages/webawesome/src/translations/ru.ts b/packages/webawesome/src/translations/ru.ts index 5a49d74fb..57a31f5e0 100644 --- a/packages/webawesome/src/translations/ru.ts +++ b/packages/webawesome/src/translations/ru.ts @@ -33,6 +33,8 @@ const translation: Translation = { showPassword: 'Показать пароль', slideNum: slide => `Слайд ${slide}`, toggleColorFormat: 'Переключить цветовую модель', + zoomIn: 'Увеличить', + zoomOut: 'Уменьшить', }; registerTranslation(translation); diff --git a/packages/webawesome/src/translations/sl.ts b/packages/webawesome/src/translations/sl.ts index d0af3e4a7..e68eddfde 100644 --- a/packages/webawesome/src/translations/sl.ts +++ b/packages/webawesome/src/translations/sl.ts @@ -35,6 +35,8 @@ const translation: Translation = { showPassword: 'Prikaži geslo', slideNum: slide => `Diapozitiv ${slide}`, toggleColorFormat: 'Preklopi format barve', + zoomIn: 'Povečaj', + zoomOut: 'Pomanjšaj', }; registerTranslation(translation); diff --git a/packages/webawesome/src/translations/sv.ts b/packages/webawesome/src/translations/sv.ts index 8180e1102..38a4e6ff5 100644 --- a/packages/webawesome/src/translations/sv.ts +++ b/packages/webawesome/src/translations/sv.ts @@ -33,6 +33,8 @@ const translation: Translation = { showPassword: 'Visa lösenord', slideNum: slide => `Bild ${slide}`, toggleColorFormat: 'Växla färgformat', + zoomIn: 'Zooma in', + zoomOut: 'Zooma ut', }; registerTranslation(translation); diff --git a/packages/webawesome/src/translations/tr.ts b/packages/webawesome/src/translations/tr.ts index 8b2e938cc..a850580a7 100644 --- a/packages/webawesome/src/translations/tr.ts +++ b/packages/webawesome/src/translations/tr.ts @@ -33,6 +33,8 @@ const translation: Translation = { showPassword: 'Şifreyi göster', slideNum: slide => `Slayt ${slide}`, toggleColorFormat: 'Renk biçimini değiştir', + zoomIn: 'Yakınlaştır', + zoomOut: 'Uzaklaştır', }; registerTranslation(translation); diff --git a/packages/webawesome/src/translations/uk.ts b/packages/webawesome/src/translations/uk.ts index c6fe0a88f..ce10a29ba 100644 --- a/packages/webawesome/src/translations/uk.ts +++ b/packages/webawesome/src/translations/uk.ts @@ -35,6 +35,8 @@ const translation: Translation = { showPassword: 'Показати пароль', slideNum: slide => `Слайд ${slide}`, toggleColorFormat: 'Переключити кольорову модель', + zoomIn: 'Збільшити', + zoomOut: 'Зменшити', }; registerTranslation(translation); diff --git a/packages/webawesome/src/translations/zh-cn.ts b/packages/webawesome/src/translations/zh-cn.ts index 9bea0616c..7f741545f 100644 --- a/packages/webawesome/src/translations/zh-cn.ts +++ b/packages/webawesome/src/translations/zh-cn.ts @@ -33,6 +33,8 @@ const translation: Translation = { showPassword: '显示密码', slideNum: slide => `幻灯片 ${slide}`, toggleColorFormat: '切换颜色模式', + zoomIn: '放大', + zoomOut: '缩小', }; registerTranslation(translation); diff --git a/packages/webawesome/src/translations/zh-tw.ts b/packages/webawesome/src/translations/zh-tw.ts index 54e61014f..2c481d96a 100644 --- a/packages/webawesome/src/translations/zh-tw.ts +++ b/packages/webawesome/src/translations/zh-tw.ts @@ -33,6 +33,8 @@ const translation: Translation = { showPassword: '顯示密碼', slideNum: slide => `幻燈片 ${slide}`, toggleColorFormat: '切換顏色格式', + zoomIn: '放大', + zoomOut: '縮小', }; registerTranslation(translation); diff --git a/packages/webawesome/src/utilities/localize.ts b/packages/webawesome/src/utilities/localize.ts index cc37d910c..35346a19f 100644 --- a/packages/webawesome/src/utilities/localize.ts +++ b/packages/webawesome/src/utilities/localize.ts @@ -4,10 +4,10 @@ import en from '../translations/en.js'; // Register English as the default/fallb // Extend the controller and apply our own translation interface for better typings export class LocalizeController extends DefaultLocalizationController { - // Technicallly '../translations/en.js' is supposed to work via side-effects. However, by some mystery sometimes the - // translations don't get bundled as expected resulting in `no translation found` errors. - // This is basically some extra assurance that our translations get registered prior to our localizer connecting in a component - // and we don't rely on implicit import ordering. + // Technically '../translations/en.js' is supposed to work via side-effects. However, by some mystery sometimes the + // translations don't get bundled as expected resulting in `no translation found` errors. This is basically some extra + // assurance that our translations get registered prior to our localizer connecting in a component and we don't rely + // on implicit import ordering. static { registerTranslation(en); } @@ -44,4 +44,6 @@ export interface Translation extends DefaultTranslation { showPassword: string; slideNum: (slide: number) => string; toggleColorFormat: string; + zoomIn: string; + zoomOut: string; }