From 94de7bcf034d0751c1cd48817096f9d0aa57950f Mon Sep 17 00:00:00 2001 From: sheepzh Date: Tue, 15 Oct 2024 01:26:08 +0800 Subject: [PATCH] Support RTL --- .vscode/settings.json | 1 + package.json | 23 +- public/app.html | 18 +- public/popup.html | 240 +++++++++--------- public/side.html | 18 +- src/app/Layout/VersionTag.tsx | 15 +- src/app/Layout/style.sass | 8 + .../Analysis/components/Trend/Filter.tsx | 6 +- .../ClearPanel/ClearFilter/DateFilter.tsx | 2 + .../components/common/DateRangeFilterItem.tsx | 7 +- src/app/echarts.ts | 6 +- src/element-ui/rtl.tsx | 14 + src/hooks/useEcharts.ts | 63 +---- src/i18n/index.ts | 7 +- src/popup/components/chart/index.ts | 18 +- src/popup/components/chart/option.ts | 39 ++- src/side/components/Search/index.tsx | 6 +- src/util/document.ts | 28 ++ src/util/echarts.ts | 189 ++++++++++++++ src/util/time.ts | 8 +- webpack/webpack.common.ts | 26 +- 21 files changed, 481 insertions(+), 261 deletions(-) create mode 100644 src/element-ui/rtl.tsx create mode 100644 src/util/document.ts create mode 100644 src/util/echarts.ts diff --git a/.vscode/settings.json b/.vscode/settings.json index 6f5497679..7f087a3c5 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -28,6 +28,7 @@ "Popconfirm", "PROPFIND", "Qihu", + "rtlcss", "sheepzh", "vueuse", "webcomponents", diff --git a/package.json b/package.json index 718670f93..28ac75484 100644 --- a/package.json +++ b/package.json @@ -24,16 +24,16 @@ }, "license": "MIT", "devDependencies": { - "@babel/plugin-transform-modules-commonjs": "^7.24.8", - "@babel/preset-env": "^7.25.4", - "@crowdin/crowdin-api-client": "^1.36.0", - "@types/chrome": "0.0.272", + "@babel/plugin-transform-modules-commonjs": "^7.25.7", + "@babel/preset-env": "^7.25.8", + "@crowdin/crowdin-api-client": "^1.37.1", + "@types/chrome": "0.0.277", "@types/copy-webpack-plugin": "^10.1.0", "@types/decompress": "^4.2.7", "@types/echarts": "^4.9.22", "@types/generate-json-webpack-plugin": "^0.3.7", "@types/jest": "^29.5.13", - "@types/node": "^22.7.4", + "@types/node": "^22.7.5", "@types/psl": "^1.1.3", "@types/punycode": "^2.1.4", "@types/webpack": "^5.28.5", @@ -43,14 +43,17 @@ "copy-webpack-plugin": "^12.0.2", "css-loader": "^7.1.2", "decompress": "^4.2.1", - "eslint": "^9.11.1", + "eslint": "^9.12.0", "filemanager-webpack-plugin": "^8.0.0", "generate-json-webpack-plugin": "^2.0.0", "html-webpack-plugin": "^5.6.0", "jest": "^29.7.0", "jest-environment-jsdom": "^29.7.0", "mini-css-extract-plugin": "^2.9.1", - "sass": "^1.79.4", + "postcss": "^8.4.47", + "postcss-loader": "^8.1.1", + "postcss-rtlcss": "^5.5.0", + "sass": "^1.79.5", "sass-loader": "^16.0.2", "style-loader": "^4.0.0", "ts-jest": "^29.2.5", @@ -58,7 +61,7 @@ "ts-node": "^10.9.2", "tsconfig-paths": "^4.2.0", "tslib": "^2.7.0", - "typescript": "5.6.2", + "typescript": "5.6.3", "url-loader": "^4.1.1", "webpack": "^5.95.0", "webpack-bundle-analyzer": "^4.10.2", @@ -69,11 +72,11 @@ "@vueuse/core": "^11.1.0", "countup.js": "^2.8.0", "echarts": "^5.5.1", - "element-plus": "2.8.4", + "element-plus": "2.8.5", "js-base64": "^3.7.7", "punycode": "^2.3.1", "stream-browserify": "^3.0.0", - "vue": "^3.5.10", + "vue": "^3.5.12", "vue-router": "^4.4.5" }, "engines": { diff --git a/public/app.html b/public/app.html index 5d752c8ea..3a290e79e 100644 --- a/public/app.html +++ b/public/app.html @@ -1,10 +1,12 @@ - - - - + - -
- - + + + + + +
+ + + \ No newline at end of file diff --git a/public/popup.html b/public/popup.html index 3ddc8c9e6..3c86bb49d 100644 --- a/public/popup.html +++ b/public/popup.html @@ -6,130 +6,135 @@ --> - + - + -
-
-
- - -
-
-
-
- +
+
+
+ + +
+
+
+
+ +
+
+
-
-
-
-
-
-
-
- +
+
+
+
+ +
+
+
+
+ +
+ + +
+
-
+ + + + + + + + + + + + + + + +
-
- -
- - -
- -
- - - - - - - - - - - - - - - -
-
- -
-
-
-
+
+
+
-
    -
    - - + + +
    -
    -
    - -
    -
    -
    -
    +
    +
    +
    -
      -
      - - + + +
      -
      -
      - -
      - - - -
      -
      - -
      + + +
      +
      + + \ No newline at end of file diff --git a/public/side.html b/public/side.html index 5d752c8ea..3a290e79e 100644 --- a/public/side.html +++ b/public/side.html @@ -1,10 +1,12 @@ - - - - + - -
      - - + + + + + +
      + + + \ No newline at end of file diff --git a/src/app/Layout/VersionTag.tsx b/src/app/Layout/VersionTag.tsx index 0931fb1c0..8b7b7c025 100644 --- a/src/app/Layout/VersionTag.tsx +++ b/src/app/Layout/VersionTag.tsx @@ -4,23 +4,12 @@ * This software is released under the MIT License. * https://opensource.org/licenses/MIT */ - -import { StyleValue, defineComponent } from "vue" import packageInfo from "@src/package" - -const style: StyleValue = { - width: '100px', - right: '10px', - bottom: '-10px', - position: 'fixed', - textAlign: 'right', - color: '#888', - fontSize: '8px' -} +import { defineComponent } from "vue" const _default = defineComponent(() => { return () => ( -
      +

      {`v${packageInfo.version}`}

      diff --git a/src/app/Layout/style.sass b/src/app/Layout/style.sass index fd01437d4..e7d4bb502 100644 --- a/src/app/Layout/style.sass +++ b/src/app/Layout/style.sass @@ -36,3 +36,11 @@ display: flex justify-content: flex-start align-items: center +.version-tag + width: 100px + right: 10px + bottom: -10px + position: fixed + text-align: right + color: #888 + font-size: 8px diff --git a/src/app/components/Analysis/components/Trend/Filter.tsx b/src/app/components/Analysis/components/Trend/Filter.tsx index 2c7c16000..ac08269b6 100644 --- a/src/app/components/Analysis/components/Trend/Filter.tsx +++ b/src/app/components/Analysis/components/Trend/Filter.tsx @@ -8,10 +8,11 @@ import type { ElementDatePickerShortcut } from "@src/element-ui/date" import { t } from "@app/locale" +import { EL_DATE_FORMAT } from "@i18n/element" +import { getDatePickerIconSlots } from "@src/element-ui/rtl" +import { daysAgo } from "@util/time" import { ElDatePicker } from "element-plus" import { defineComponent, ref, type PropType } from "vue" -import { daysAgo } from "@util/time" -import { EL_DATE_FORMAT } from "@i18n/element" function datePickerShortcut(agoOfStart?: number, agoOfEnd?: number): ElementDatePickerShortcut { return { @@ -47,6 +48,7 @@ const _default = defineComponent({ rangeSeparator="-" clearable={false} onUpdate:modelValue={(newVal: [Date, Date]) => ctx.emit("dateRangeChange", dateRange.value = newVal)} + v-slots={getDatePickerIconSlots()} />
      ) diff --git a/src/app/components/DataManage/ClearPanel/ClearFilter/DateFilter.tsx b/src/app/components/DataManage/ClearPanel/ClearFilter/DateFilter.tsx index 11b0b49f1..ef1a44ec5 100644 --- a/src/app/components/DataManage/ClearPanel/ClearFilter/DateFilter.tsx +++ b/src/app/components/DataManage/ClearPanel/ClearFilter/DateFilter.tsx @@ -8,6 +8,7 @@ import I18nNode from "@app/components/common/I18nNode" import { t } from "@app/locale" import { EL_DATE_FORMAT } from "@i18n/element" import { ElementDatePickerShortcut } from "@src/element-ui/date" +import { getDatePickerIconSlots } from "@src/element-ui/rtl" import { formatTime, getBirthday, MILL_PER_DAY } from "@util/time" import { DateModelType, ElDatePicker } from "element-plus" import { defineComponent, PropType } from "vue" @@ -59,6 +60,7 @@ const _default = defineComponent({ disabledDate={(date: Date) => date.getTime() > yesterday} shortcuts={pickerShortcuts} rangeSeparator="-" + v-slots={getDatePickerIconSlots()} /> }} /> diff --git a/src/app/components/common/DateRangeFilterItem.tsx b/src/app/components/common/DateRangeFilterItem.tsx index 49333afe8..21e8404f0 100644 --- a/src/app/components/common/DateRangeFilterItem.tsx +++ b/src/app/components/common/DateRangeFilterItem.tsx @@ -5,11 +5,11 @@ * https://opensource.org/licenses/MIT */ +import { EL_DATE_FORMAT } from "@i18n/element" +import { ElementDatePickerShortcut } from "@src/element-ui/date" +import { getDatePickerIconSlots } from "@src/element-ui/rtl" import { ElDatePicker } from "element-plus" import { defineComponent, PropType, ref, Ref } from "vue" -import { ElementDatePickerShortcut } from "@src/element-ui/date" -import { t } from "@app/locale" -import { EL_DATE_FORMAT } from "@i18n/element" const _default = defineComponent({ props: { @@ -40,6 +40,7 @@ const _default = defineComponent({ startPlaceholder={props.startPlaceholder} endPlaceholder={props.endPlaceholder} clearable={props.clearable} + v-slots={getDatePickerIconSlots()} /> } diff --git a/src/app/echarts.ts b/src/app/echarts.ts index f4f89075a..037c05d8c 100644 --- a/src/app/echarts.ts +++ b/src/app/echarts.ts @@ -1,17 +1,17 @@ import { BarChart, EffectScatterChart, HeatmapChart, LineChart, PieChart, ScatterChart } from "echarts/charts" import { GridComponent, + LegendComponent, TitleComponent, TooltipComponent, VisualMapComponent, - LegendComponent, } from "echarts/components" import { use } from "echarts/core" -import { SVGRenderer } from "echarts/renderers" +import { CanvasRenderer } from "echarts/renderers" export const initEcharts = () => { use([ - SVGRenderer, + CanvasRenderer, GridComponent, TooltipComponent, TitleComponent, VisualMapComponent, LegendComponent, BarChart, PieChart, LineChart, HeatmapChart, ScatterChart, EffectScatterChart, ]) diff --git a/src/element-ui/rtl.tsx b/src/element-ui/rtl.tsx new file mode 100644 index 000000000..a93aa9bca --- /dev/null +++ b/src/element-ui/rtl.tsx @@ -0,0 +1,14 @@ +import { ArrowLeft, ArrowRight, DArrowLeft, DArrowRight } from "@element-plus/icons-vue" +import { isRtl } from "@util/document" +import { ElIcon } from "element-plus" + +export const getDatePickerIconSlots = () => { + const rtl = isRtl() + if (!rtl) return {} + return { + "prev-month": () => , + "prev-year": () => , + "next-month": () => , + "next-year": () => , + } +} \ No newline at end of file diff --git a/src/hooks/useEcharts.ts b/src/hooks/useEcharts.ts index 0fd205ed6..20f524fa9 100644 --- a/src/hooks/useEcharts.ts +++ b/src/hooks/useEcharts.ts @@ -5,61 +5,15 @@ * This software is released under the MIT License. * https://opensource.org/licenses/MIT */ - -import { ElLoading } from "element-plus" -import { type Ref, onMounted, ref, isRef, watch } from "vue" -import { AriaComponentOption, ComposeOption, init, ECharts } from "echarts" -import { useWindowSize } from "@vueuse/core" import accessibilityHelper from "@service/components/accessibility-helper" +import { processAria, processRtl } from "@util/echarts" +import { useWindowSize } from "@vueuse/core" +import { AriaComponentOption, ComposeOption, ECharts, init } from "echarts" +import { ElLoading } from "element-plus" +import { type Ref, isRef, onMounted, ref, watch } from "vue" type BaseEchartsOption = ComposeOption -export const generateAriaOption = async (): Promise => { - const { chartDecal } = await accessibilityHelper.getOption() || {} - if (!chartDecal) { - return { enabled: false } - } - const color = "rgba(0, 0, 0, 0.2)" - return { - enabled: true, - decal: { - show: true, - decals: [{ - color, - dashArrayX: [1, 0], - dashArrayY: [2, 5], - rotation: .5235987755982988, - }, { - color, - symbol: 'circle', - dashArrayX: [[8, 8], [0, 8, 8, 0]], - dashArrayY: [6, 0], - symbolSize: .8, - }, { - color, - dashArrayX: [1, 0], - dashArrayY: [4, 3], - rotation: -.7853981633974483 - }, { - color, - dashArrayX: [[6, 6], [0, 6, 6, 0]], - dashArrayY: [6, 0], - }, { - color, - dashArrayX: [[1, 0], [1, 6]], - dashArrayY: [1, 0, 6, 0], - rotation: .7853981633974483, - }, { - color, - symbol: 'triangle', - dashArrayX: [[9, 9], [0, 9, 9, 0]], - dashArrayY: [7, 2], - symbolSize: .75, - }] - } - } -} - export abstract class EchartsWrapper { protected instance: ECharts /** @@ -83,8 +37,11 @@ export abstract class EchartsWrapper { const biz = this.lastBizOption const option = await this.generateOption(biz) as (EchartsOption & BaseEchartsOption) if (!option) return - const aria = await generateAriaOption() - option.aria = aria + + const { chartDecal } = await accessibilityHelper.getOption() || {} + processAria(option, chartDecal) + processRtl(option) + this.instance.setOption(option, { notMerge: false }) } diff --git a/src/i18n/index.ts b/src/i18n/index.ts index dbaebff84..a672b0933 100644 --- a/src/i18n/index.ts +++ b/src/i18n/index.ts @@ -7,6 +7,7 @@ import { getUILanguage } from "@api/chrome/i18n" import optionService from "@service/option-service" +import { setLocale } from "@util/document" /** * Not to import this one if not necessary @@ -112,10 +113,8 @@ function handleLocaleOption(option: timer.option.AllOption) { } else { locale = localOption as timer.Locale } - if (typeof window !== 'undefined' && window?.document) { - const htmlEl = document.getElementsByTagName("html")?.[0] - htmlEl?.setAttribute?.("data-locale", locale) - } + + setLocale(locale) } /** diff --git a/src/popup/components/chart/index.ts b/src/popup/components/chart/index.ts index 2bd359b69..c6ba2d409 100644 --- a/src/popup/components/chart/index.ts +++ b/src/popup/components/chart/index.ts @@ -12,14 +12,16 @@ import OptionDatabase from "@db/option-database" import { PopupQueryResult } from "@popup/common" import { defaultStatistics } from "@util/constant/option" import { PieChart } from "echarts/charts" -import { LegendComponent, TitleComponent, ToolboxComponent, TooltipComponent } from "echarts/components" +import { AriaComponent, LegendComponent, TitleComponent, ToolboxComponent, TooltipComponent } from "echarts/components" import { init, use } from "echarts/core" -import { SVGRenderer } from "echarts/renderers" +import { CanvasRenderer } from "echarts/renderers" import handleClick from "./click-handler" import { pieOptions } from "./option" +import accessibilityHelper from "@service/components/accessibility-helper" +import { processAria, processRtl } from "@util/echarts" // Register echarts -use([TitleComponent, ToolboxComponent, TooltipComponent, LegendComponent, SVGRenderer, PieChart]) +use([TitleComponent, ToolboxComponent, TooltipComponent, LegendComponent, AriaComponent, CanvasRenderer, PieChart]) const optionDatabase = new OptionDatabase(chrome.storage.local) @@ -44,9 +46,15 @@ export const handleRestore = (handler: () => void) => { // Store let _queryResult: PopupQueryResult -function renderChart(queryResult: PopupQueryResult) { +async function renderChart(queryResult: PopupQueryResult) { _queryResult = queryResult - pie.setOption(pieOptions({ ...queryResult, displaySiteName }, chartContainer), true, false) + const option = pieOptions({ ...queryResult, displaySiteName }, chartContainer) + + const { chartDecal } = await accessibilityHelper.getOption() || {} + processAria(option, chartDecal) + processRtl(option) + + pie.setOption(option, true, false) } export default renderChart \ No newline at end of file diff --git a/src/popup/components/chart/option.ts b/src/popup/components/chart/option.ts index e25412025..718f8115f 100644 --- a/src/popup/components/chart/option.ts +++ b/src/popup/components/chart/option.ts @@ -104,27 +104,6 @@ function labelFormatter({ mergeHost }: PopupQueryResult, params: any): string { : `{${legend2LabelStyle(name)}|} {a|${name}}` } -const staticOptions: EcOption = { - tooltip: { - trigger: 'item' - }, - series: [{ - name: "Wasted Time", - type: "pie", - radius: "55%", - center: ["64%", "52%"], - startAngle: 300, - data: [], - emphasis: { - itemStyle: { - shadowBlur: 10, - shadowOffsetX: 0, - shadowColor: "rgba(0, 0, 0, 0.5)", - }, - } - }] -} - const maxWidth = 750 function calcPositionOfTooltip(container: HTMLDivElement, point: (number | string)[]) { @@ -210,7 +189,7 @@ export function pieOptions(props: ChartProps, container: HTMLDivElement): EcOpti subtextStyle: { color: secondaryColor }, }, tooltip: { - ...staticOptions.tooltip, + trigger: 'item', formatter: (params: any) => toolTipFormatter(props, params), position: (point: (number | string)[]) => calcPositionOfTooltip(container, point) }, @@ -223,11 +202,23 @@ export function pieOptions(props: ChartProps, container: HTMLDivElement): EcOpti textStyle: { color: textColor } }, series: [{ - ...staticOptions.series[0], + name: "Wasted Time", + type: "pie", + radius: "55%", + center: ["64%", "52%"], + startAngle: 300, + data: [], + emphasis: { + itemStyle: { + shadowBlur: 10, + shadowOffsetX: 0, + shadowColor: "rgba(0, 0, 0, 0.5)", + }, + }, label: { formatter: params => labelFormatter(props, params), color: textColor - } + }, }], toolbox: { show: true, diff --git a/src/side/components/Search/index.tsx b/src/side/components/Search/index.tsx index ff4bf774e..fab67ab9c 100644 --- a/src/side/components/Search/index.tsx +++ b/src/side/components/Search/index.tsx @@ -1,9 +1,10 @@ import { Search } from "@element-plus/icons-vue" +import { useState } from "@hooks" +import { t } from "@side/locale" +import { getDatePickerIconSlots } from "@src/element-ui/rtl" import { ElDatePicker, ElInput } from "element-plus" import { type PropType, defineComponent, watch } from "vue" import "./search.sass" -import { t } from "@side/locale" -import { useState } from "@hooks" const _default = defineComponent({ props: { @@ -42,6 +43,7 @@ const _default = defineComponent({ modelValue={date.value} onUpdate:modelValue={setDate} class="search-calendar" + v-slots={getDatePickerIconSlots()} />
      ) diff --git a/src/util/document.ts b/src/util/document.ts new file mode 100644 index 000000000..764cb1734 --- /dev/null +++ b/src/util/document.ts @@ -0,0 +1,28 @@ +import { anyMatch } from "./array" + +export const setDir = (direction: 'ltr' | 'rtl') => { + if (isNotExtensionPage()) return + const htmlEl = document.getElementsByTagName("html")?.[0] + htmlEl?.setAttribute('dir', direction) +} + +export const setLocale = (locale: timer.Locale) => { + if (isNotExtensionPage()) return + const htmlEl = document.getElementsByTagName("html")?.[0] + htmlEl?.setAttribute('data-locale', locale) +} + +const isNotExtensionPage = (): boolean => { + if (typeof location === 'undefined' || typeof chrome === 'undefined' || typeof window === 'undefined') { + return true + } + if (location.hostname !== chrome.runtime?.id) return true + + return !window?.document +} + +export const isRtl = (): boolean => { + if (isNotExtensionPage()) return false + const htmlEl = document.getElementsByTagName("html")?.[0] + return htmlEl?.getAttribute('dir') === 'rtl' +} \ No newline at end of file diff --git a/src/util/echarts.ts b/src/util/echarts.ts new file mode 100644 index 000000000..24360d9e5 --- /dev/null +++ b/src/util/echarts.ts @@ -0,0 +1,189 @@ +import type { + ComposeOption, + AriaComponentOption, GridComponentOption, LegendComponentOption, ToolboxComponentOption, VisualMapComponentOption, + BarSeriesOption, LineSeriesOption, PieSeriesOption, ScatterSeriesOption, +} from "echarts" +import { isRtl } from "./document" + +export const processAria = (option: ComposeOption, chartDecal: boolean) => { + if (!option) return + const ariaOption = generateAriaOption(chartDecal) + option.aria = ariaOption +} + +const generateAriaOption = (chartDecal: boolean): AriaComponentOption => { + if (!chartDecal) { + return { enabled: false } + } + const color = "rgba(0, 0, 0, 0.2)" + return { + enabled: true, + decal: { + show: true, + decals: [{ + color, + dashArrayX: [1, 0], + dashArrayY: [2, 5], + rotation: .5235987755982988, + }, { + color, + symbol: 'circle', + dashArrayX: [[8, 8], [0, 8, 8, 0]], + dashArrayY: [6, 0], + symbolSize: .8, + }, { + color, + dashArrayX: [1, 0], + dashArrayY: [4, 3], + rotation: -.7853981633974483 + }, { + color, + dashArrayX: [[6, 6], [0, 6, 6, 0]], + dashArrayY: [6, 0], + }, { + color, + dashArrayX: [[1, 0], [1, 6]], + dashArrayY: [1, 0, 6, 0], + rotation: .7853981633974483, + }, { + color, + symbol: 'triangle', + dashArrayX: [[9, 9], [0, 9, 9, 0]], + dashArrayY: [7, 2], + symbolSize: .75, + }] + } + } +} + +type SupportedSeriesOption = PieSeriesOption | LineSeriesOption | BarSeriesOption | ScatterSeriesOption + +type GlobalEcOption = ComposeOption< + | GridComponentOption | LegendComponentOption | ToolboxComponentOption | VisualMapComponentOption + | SupportedSeriesOption +> + +export const processRtl = (toProcess: unknown) => { + if (!isRtl() || !toProcess) return + const option = toProcess as GlobalEcOption + const { grid, legend, series, toolbox, visualMap } = option + + processArrayLike(grid, processGridRtl) + processArrayLike(legend, processLegendRtl) + processArrayLike(series, opt => processSeriesRtl(opt, option)) + processArrayLike(toolbox, processToolboxRtl) + processArrayLike(visualMap, processVisualMapRtl) +} + +const processArrayLike = (arr: T | T[], processor: (t: T) => void) => { + if (!arr) return + if (Array.isArray(arr)) { + arr.filter(e => !!e).forEach(processor) + } else { + processor?.(arr) + } +} + +const someArrayLike = (arr: T | T[], test: (t: T) => boolean) => { + if (!arr || !test) return false + if (Array.isArray(arr)) { + arr.some(test) + } else { + return test(arr) + } +} + +const processGridRtl = (option: GridComponentOption) => { + // Swap right and left + swapPosition(option) +} + +const processLegendRtl = (option: LegendComponentOption) => { + swapPosition(option) + swapAlign(option, 'align') +} + +const processToolboxRtl = (option: ToolboxComponentOption) => { + swapPosition(option) + const feature = option.feature || {} + const newFeature: ToolboxComponentOption['feature'] = {} + Object.entries(feature).reverse().forEach(([k, v]) => newFeature[k] = v) + option.feature = newFeature +} + +const processVisualMapRtl = (option: VisualMapComponentOption) => { + swapPosition(option) +} + +const processSeriesRtl = (option: SupportedSeriesOption, global: GlobalEcOption) => { + if (option.type === 'pie') { + processPieSeriesOption(option) + } else if (option.type === 'line') { + processLineSeriesOption(global) + } else if (option.type === 'bar') { + processBarSeriesOption(option, global) + } else if (option.type === 'scatter') { + // Let yAxis stay right + processArrayLike(global.yAxis, yOpt => swapAlign(yOpt, 'position', 'left')) + processArrayLike(global.xAxis, xOpt => xOpt.inverse = true) + } +} + +const processPieSeriesOption = (option: PieSeriesOption) => { + const center = option.center + if (!Array.isArray(center)) return + const left = center[0] + if (typeof left !== 'string' || !left.endsWith('%')) return + try { + const originPercentStr = left.substring(0, left.length - 1) + const originPercent = left.includes('.') ? parseFloat(originPercentStr) : parseInt(originPercentStr) + center[0] = `${100 - originPercent}%` + } catch (ignored) { } +} + +const processLineSeriesOption = (global: GlobalEcOption) => { + processArrayLike(global.xAxis, xOpt => xOpt.inverse = true) +} + +const processBarSeriesOption = (option: BarSeriesOption, global: GlobalEcOption) => { + const isHorizontal = someArrayLike(global.xAxis, x => x.type === 'value') + if (isHorizontal) { + // Let yAxis stay right + processArrayLike(global.yAxis, yOpt => swapAlign(yOpt, 'position', 'left')) + } + // Swap border radius + processArrayLike(option.data, data => processArrayLike(data, item => { + if (!(typeof item === 'object')) return + const { itemStyle: { borderRadius } = {} } = item as { itemStyle?: { borderRadius: number[] | any } } + Array.isArray(borderRadius) && swapBorderRadius(borderRadius) + })) + // Inverse xAxis + processArrayLike(global.xAxis, xOpt => xOpt.inverse = true) +} + +type AlignVal = 'right' | 'left' +const swapAlign = (option: { [k in K]?: AlignVal | string }, key: K, defaultVal?: AlignVal) => { + const { [key]: align = defaultVal } = option || {} + if (align === 'left') { + option[key] = 'right' + } else if (align === 'right') { + option[key] = 'left' + } +} + +const swapPosition = (option: { left?: string | number, right?: string | number }) => { + const right = option.right + option.right = option.left + option.left = right +} + +const swapBorderRadius = (option: number[]) => { + if (option?.length !== 4) return + + let t = option[0] + option[0] = option[1] + option[1] = t + t = option[2] + option[2] = option[3] + option[3] = t +} \ No newline at end of file diff --git a/src/util/time.ts b/src/util/time.ts index 8b9c0f2a3..8b81cc5cb 100644 --- a/src/util/time.ts +++ b/src/util/time.ts @@ -5,6 +5,8 @@ * https://opensource.org/licenses/MIT */ +import { isRtl } from "./document" + /** * Copyright (c) 2017-present PanJiaChen * @@ -91,7 +93,11 @@ export function formatPeriod(milliseconds: number, message: { hourMsg: string, m * @return (xx+h)(xx+m)xx+s */ export function formatPeriodCommon(milliseconds: number): string { - const defaultMessage = { + const defaultMessage = isRtl() ? { + hourMsg: 's {second} m {minute} h {hour}', + minuteMsg: 's {second} m {minute}', + secondMsg: 's {second}', + } : { hourMsg: '{hour} h {minute} m {second} s', minuteMsg: '{minute} m {second} s', secondMsg: '{second} s', diff --git a/webpack/webpack.common.ts b/webpack/webpack.common.ts index c71aeadc8..a8addcc11 100644 --- a/webpack/webpack.common.ts +++ b/webpack/webpack.common.ts @@ -1,12 +1,13 @@ -import path from "path" -import GenerateJsonPlugin from "generate-json-webpack-plugin" import CopyWebpackPlugin from "copy-webpack-plugin" -import webpack, { Chunk, DefinePlugin } from "webpack" -import i18nChrome from "../src/i18n/chrome" -import tsConfig from '../tsconfig.json' -import MiniCssExtractPlugin from "mini-css-extract-plugin" +import GenerateJsonPlugin from "generate-json-webpack-plugin" import HtmlWebpackPlugin from "html-webpack-plugin" +import MiniCssExtractPlugin from "mini-css-extract-plugin" +import path from "path" +import postcssRTLCSS from 'postcss-rtlcss' +import webpack, { Chunk, DefinePlugin, RuleSetRule } from "webpack" import { POLYFILL_SCRIPT_NAME } from "../src/content-script/polyfill/inject" +import i18nChrome from "../src/i18n/chrome" +import tsConfig from '../tsconfig.json' export const MANIFEST_JSON_NAME = "manifest.json" @@ -76,6 +77,15 @@ const EXCLUDE_CHUNK_ENTRY = entryConfigs.filter(({ chunkExclusive }) => chunkExc const excludeChunk = (chunk: Chunk) => !EXCLUDE_CHUNK_ENTRY.includes(chunk.name) +const POSTCSS_LOADER_CONF: RuleSetRule['use'] = { + loader: 'postcss-loader', + options: { + postcssOptions: { + plugins: [postcssRTLCSS({ mode: 'combined' })], + }, + }, +} + const staticOptions: webpack.Configuration = { entry() { const entry = {} @@ -103,10 +113,10 @@ const staticOptions: webpack.Configuration = { }, 'ts-loader'], }, { test: /\.css$/, - use: [MiniCssExtractPlugin.loader, "css-loader"], + use: [MiniCssExtractPlugin.loader, 'css-loader', POSTCSS_LOADER_CONF], }, { test: /\.sc|ass$/, - use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'] + use: [MiniCssExtractPlugin.loader, 'css-loader', POSTCSS_LOADER_CONF, 'sass-loader'] }, { test: /\.(jpg|jpeg|png|woff|woff2|eot|ttf|svg)$/, exclude: /node_modules/,