diff --git a/packages/frontend-embed/src/theme.ts b/packages/frontend-embed/src/theme.ts index 680ab80167..c9b1c0d0c6 100644 --- a/packages/frontend-embed/src/theme.ts +++ b/packages/frontend-embed/src/theme.ts @@ -3,6 +3,8 @@ * SPDX-License-Identifier: AGPL-3.0-only */ +// TODO: (可能な部分を)sharedに抽出して frontend と共通化 + import tinycolor from 'tinycolor2'; import lightTheme from '@@/themes/_light.json5'; import darkTheme from '@@/themes/_dark.json5'; diff --git a/packages/frontend/src/theme.ts b/packages/frontend/src/theme.ts index b715426917..4d03b1d0e9 100644 --- a/packages/frontend/src/theme.ts +++ b/packages/frontend/src/theme.ts @@ -3,6 +3,8 @@ * SPDX-License-Identifier: AGPL-3.0-only */ +// TODO: (可能な部分を)sharedに抽出して frontend-embed と共通化 + import { ref, nextTick } from 'vue'; import tinycolor from 'tinycolor2'; import lightTheme from '@@/themes/_light.json5'; @@ -166,16 +168,21 @@ export function compile(theme: Theme): Record { return getColor(theme.props[val]); } else if (val[0] === ':') { // func const parts = val.split('<'); - const func = parts.shift().substring(1); - const arg = parseFloat(parts.shift()); - const color = getColor(parts.join('<')); + const funcTxt = parts.shift(); + const argTxt = parts.shift(); - switch (func) { - case 'darken': return color.darken(arg); - case 'lighten': return color.lighten(arg); - case 'alpha': return color.setAlpha(arg); - case 'hue': return color.spin(arg); - case 'saturate': return color.saturate(arg); + if (funcTxt && argTxt) { + const func = funcTxt.substring(1); + const arg = parseFloat(argTxt); + const color = getColor(parts.join('<')); + + switch (func) { + case 'darken': return color.darken(arg); + case 'lighten': return color.lighten(arg); + case 'alpha': return color.setAlpha(arg); + case 'hue': return color.spin(arg); + case 'saturate': return color.saturate(arg); + } } } diff --git a/packages/frontend/src/utility/popup-position.ts b/packages/frontend/src/utility/popup-position.ts index 676dfb7507..0ba0d8e897 100644 --- a/packages/frontend/src/utility/popup-position.ts +++ b/packages/frontend/src/utility/popup-position.ts @@ -29,8 +29,8 @@ export function calcPopupPosition(el: HTMLElement, props: { left = rect.left + window.scrollX + (props.anchorElement.offsetWidth / 2); top = (rect.top + window.scrollY - contentHeight) - props.innerMargin; } else { - left = props.x; - top = (props.y - contentHeight) - props.innerMargin; + left = props.x!; + top = (props.y! - contentHeight) - props.innerMargin; } left -= (el.offsetWidth / 2); @@ -54,8 +54,8 @@ export function calcPopupPosition(el: HTMLElement, props: { left = rect.left + window.scrollX + (props.anchorElement.offsetWidth / 2); top = (rect.top + window.scrollY + props.anchorElement.offsetHeight) + props.innerMargin; } else { - left = props.x; - top = (props.y) + props.innerMargin; + left = props.x!; + top = (props.y!) + props.innerMargin; } left -= (el.offsetWidth / 2); @@ -79,8 +79,8 @@ export function calcPopupPosition(el: HTMLElement, props: { left = (rect.left + window.scrollX - contentWidth) - props.innerMargin; top = rect.top + window.scrollY + (props.anchorElement.offsetHeight / 2); } else { - left = (props.x - contentWidth) - props.innerMargin; - top = props.y; + left = (props.x! - contentWidth) - props.innerMargin; + top = props.y!; } top -= (el.offsetHeight / 2); @@ -97,8 +97,8 @@ export function calcPopupPosition(el: HTMLElement, props: { }; const calcPosWhenRight = () => { - let left: number; - let top: number; + let left = 0; // TSを黙らすためとりあえず初期値を0に + let top = 0; // TSを黙らすためとりあえず初期値を0に if (props.anchorElement) { left = (rect.left + props.anchorElement.offsetWidth + window.scrollX) + props.innerMargin; @@ -113,8 +113,8 @@ export function calcPopupPosition(el: HTMLElement, props: { top -= (el.offsetHeight / 2); } } else { - left = props.x + props.innerMargin; - top = props.y; + left = props.x! + props.innerMargin; + top = props.y!; top -= (el.offsetHeight / 2); }