From b7aff1c7697abf4fac87b6bbf7d30b8b2db03f2c Mon Sep 17 00:00:00 2001 From: Razon Yang Date: Wed, 13 Mar 2024 16:15:03 +0800 Subject: [PATCH] feat: add support for JavaScript (#5) --- assets/mods/echarts/index.ts | 32 ++++++++++++++----- assets/mods/echarts/js-vars.js | 3 ++ .../_markup/render-codeblock-echarts.html | 8 ++++- layouts/partials/echarts/assets/script.html | 12 +++++++ layouts/partials/echarts/chart.html | 16 ++++++++-- layouts/shortcodes/echarts.html | 23 +++++++++++-- package.json | 5 +++ 7 files changed, 84 insertions(+), 15 deletions(-) create mode 100644 assets/mods/echarts/js-vars.js diff --git a/assets/mods/echarts/index.ts b/assets/mods/echarts/index.ts index 5760b7f..3dc642a 100644 --- a/assets/mods/echarts/index.ts +++ b/assets/mods/echarts/index.ts @@ -1,6 +1,14 @@ import * as echarts from 'mods/echarts/echarts.js' +declare global { + interface Window { + echarts: any + } +} + (() => { + window.echarts = echarts + const init = (ele: Element): Promise => { return new Promise((resolve) => { if (ele.classList.contains('initializing') || ele.classList.contains('initialized')) { @@ -8,7 +16,13 @@ import * as echarts from 'mods/echarts/echarts.js' } ele.classList.add('initializing') - const option = JSON.parse(ele.getAttribute('data-options') ?? '{}') + let option = {} + const optionVar = ele.getAttribute('data-echarts-options-var') + if (optionVar !== null) { + option = window[optionVar] + } else { + option = JSON.parse(ele.getAttribute('data-echarts-options') ?? '{}') + } echarts.init(ele).setOption(option) ele.classList.remove('initializing') ele.classList.add('initialized') @@ -26,14 +40,16 @@ import * as echarts from 'mods/echarts/echarts.js' }) }) - const charts = document.querySelectorAll('.echarts') - charts.forEach((ele) => { - observer.observe(ele) - }) - - window.addEventListener('resize', () => { + document.addEventListener('DOMContentLoaded', () => { + const charts = document.querySelectorAll('.echarts') charts.forEach((ele) => { - echarts.getInstanceByDom(ele)?.resize() + observer.observe(ele) + }) + + window.addEventListener('resize', () => { + charts.forEach((ele) => { + echarts.getInstanceByDom(ele)?.resize() + }) }) }) })() diff --git a/assets/mods/echarts/js-vars.js b/assets/mods/echarts/js-vars.js new file mode 100644 index 0000000..ed1f789 --- /dev/null +++ b/assets/mods/echarts/js-vars.js @@ -0,0 +1,3 @@ +{{- range $k, $v := . }} + {{ printf "window.%s = (() => { %s })();" $k $v | safeJS }} +{{- end }} diff --git a/layouts/_default/_markup/render-codeblock-echarts.html b/layouts/_default/_markup/render-codeblock-echarts.html index c67627f..99ea263 100644 --- a/layouts/_default/_markup/render-codeblock-echarts.html +++ b/layouts/_default/_markup/render-codeblock-echarts.html @@ -1,9 +1,15 @@ {{- .Page.Store.Set "hasECharts" true -}} {{- $attrs := .Attributes }} +{{- $js := default false $attrs._js }} +{{- $options := .Inner }} +{{- if not $js }} + {{- $options = $options | transform.Unmarshal | jsonify }} +{{- end }} {{- $ctx := dict "caller" "codeblock" "ordinal" .Ordinal - "options" (.Inner | transform.Unmarshal) + "js" $js + "options" $options "params" $attrs }} {{- partial "echarts/chart" $ctx }} diff --git a/layouts/partials/echarts/assets/script.html b/layouts/partials/echarts/assets/script.html index 6847a99..ffa8f0d 100644 --- a/layouts/partials/echarts/assets/script.html +++ b/layouts/partials/echarts/assets/script.html @@ -9,3 +9,15 @@ {{- end }} {{- end }} +{{- with .Store.Get "eChartsJSVars" }} + {{- $jsVars := resources.Get "mods/echarts/js-vars.js" }} + {{- $jsVarsPath := printf "%s/echarts.vars.js" page.RelPermalink }} + {{- $jsVars = $jsVars + | resources.ExecuteAsTemplate $jsVarsPath . + | js.Build (dict "targetPath" $jsVarsPath "minify" hugo.IsProduction) + }} + {{- if hugo.IsProduction }} + {{- $jsVars = $jsVars | fingerprint }} + {{- end }} + +{{- end }} diff --git a/layouts/partials/echarts/chart.html b/layouts/partials/echarts/chart.html index e84c1ad..1acf22e 100644 --- a/layouts/partials/echarts/chart.html +++ b/layouts/partials/echarts/chart.html @@ -1,10 +1,16 @@ {{- $echarts := site.Params.echarts }} {{- $params := .params }} -{{- $options := jsonify .options }} +{{- $options := .options }} +{{- $js := .js }} {{- $attrs := newScratch }} -{{- $attrs.Set "id" (printf "echarts-%s-%d" .caller .ordinal) }} +{{- $id := printf "echarts-%s-%d" .caller .ordinal }} +{{- $jsVar := replace $id "-" "_" | printf "%s_options" }} +{{- $attrs.Set "id" $id }} {{- $attrs.Set "class" "echarts" }} {{- range $k, $v := $params }} + {{- if strings.HasPrefix $k "_" }} + {{- continue }} + {{- end }} {{- if in (slice "height" "width") $k }} {{- continue }} {{- end }} @@ -36,5 +42,9 @@ {{- end }}
+ {{ if not $js }}data-echarts-options="{{ $options }}"{{ end }} + {{ if $js }}data-echarts-options-var="{{ $jsVar }}"{{ end }}>
+{{- if $js }} + {{- page.Store.SetInMap "eChartsJSVars" $jsVar $options }} +{{- end }} diff --git a/layouts/shortcodes/echarts.html b/layouts/shortcodes/echarts.html index f87ae5b..97a0b6c 100644 --- a/layouts/shortcodes/echarts.html +++ b/layouts/shortcodes/echarts.html @@ -1,11 +1,27 @@ {{- .Page.Store.Set "hasECharts" true -}} {{- $options := dict }} -{{- with .Inner }} - {{- $options = transform.Unmarshal . }} +{{- $js := default false (.Get "_js") }} +{{- if .Inner }} + {{- $options = .Inner }} + {{- if not $js }} + {{- $options = transform.Unmarshal $options | jsonify }} + {{- end }} +{{- else if $js }} + {{- $jsFile := .Get "_jsFile" }} + {{- with .Page.Resources.Get $jsFile }} + {{- $options = .Content }} + {{- else }} + {{- with resources.Get $jsFile }} + {{- $options = .Content }} + {{- end }} + {{- end }} + {{- if not $options }} + {{- errorf "[echarts] no such js file: %s." $jsFile }} + {{- end }} {{- else }} {{- $data := .Get "data" }} {{- with partial "base/functions/data" (dict "key" $data "page" .Page) }} - {{- $options = . }} + {{- $options = jsonify . }} {{- else }} {{- errorf "[echarts] no such data file: %s." $data }} {{- end }} @@ -13,6 +29,7 @@ {{- $ctx := dict "caller" "shortcode" "ordinal" .Ordinal + "js" $js "options" $options "params" (cond (not .Params) dict .Params) }} diff --git a/package.json b/package.json index 82bdb7c..b96e583 100644 --- a/package.json +++ b/package.json @@ -23,5 +23,10 @@ "lint": "npm run eslint", "eslint": "ts-standard", "stylelint": "npx stylelint \"**/*.scss\"" + }, + "ts-standard": { + "ignore": [ + "assets/mods/echarts/js-vars.js" + ] } }