feat(shortcodes): add width and height params for echarts shortc… (#192)

pogor-dev · Mar 21, 2020 · b6ce753 · b6ce753
1 parent aed8734
commit b6ce753
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 4 deletions.
diff --git a/assets/css/_partial/_single/_echarts.scss b/assets/css/_partial/_single/_echarts.scss
@@ -1,6 +1,4 @@
 .echarts {
-  width: 100%;
-  height: 30rem;
   margin: .5rem 0;
   text-align: center;
 }
diff --git a/exampleSite/content/posts/theme-documentation-extended-shortcodes.en.md b/exampleSite/content/posts/theme-documentation-extended-shortcodes.en.md
@@ -909,6 +909,16 @@ The rendered output looks like this:
 }
 {{< /echarts >}}
 
+The `echarts` shortcode has also the following named parameters:
+
+* **width** *[optional]* (**first** positional parameter)
+
+    {{< version 0.2.0 >}} Width of the data visualization, default value is `100%`.
+
+* **height** *[optional]* (**second** positional parameter)
+
+    {{< version 0.2.0 >}} Height of the data visualization, default value is `30rem`.
+
 ## `mapbox`
 
 {{< version 0.2.0 >}}

diff --git a/exampleSite/content/posts/theme-documentation-extended-shortcodes.fr.md b/exampleSite/content/posts/theme-documentation-extended-shortcodes.fr.md
@@ -914,6 +914,16 @@ The rendered output looks like this:
 }
 {{< /echarts >}}
 
+The `echarts` shortcode has also the following named parameters:
+
+* **width** *[optional]* (**first** positional parameter)
+
+    {{< version 0.2.0 >}} Width of the data visualization, default value is `100%`.
+
+* **height** *[optional]* (**second** positional parameter)
+
+    {{< version 0.2.0 >}} Height of the data visualization, default value is `30rem`.
+
 ## `mapbox`
 
 {{< version 0.2.0 >}}

diff --git a/exampleSite/content/posts/theme-documentation-extended-shortcodes.zh-cn.md b/exampleSite/content/posts/theme-documentation-extended-shortcodes.zh-cn.md
@@ -910,6 +910,16 @@ data = [
 }
 {{< /echarts >}}
 
+`echarts` shortcode 还有以下命名参数:
+
+* **width** *[可选]* (**第一个**位置参数)
+
+    {{< version 0.2.0 >}} 数据可视化的宽度, 默认值是 `100%`.
+
+* **height** *[可选]* (**第二个**位置参数)
+
+    {{< version 0.2.0 >}} 数据可视化的高度, 默认值是 `30rem`.
+
 ## `mapbox`
 
 {{< version 0.2.0 >}}

diff --git a/layouts/shortcodes/echarts.html b/layouts/shortcodes/echarts.html
@@ -2,5 +2,7 @@
 
 {{- $content := .Inner | transform.Unmarshal | jsonify -}}
 {{- $id := partial "function/id.html" (dict "content" $content "scratch" $scratch) -}}
-<div class="echarts" id="{{ $id }}"></div>
+{{- $width := cond .IsNamedParams (.Get "width") (.Get 0) | default "100%" -}}
+{{- $height := cond .IsNamedParams (.Get "height") (.Get 1) | default "30rem" -}}
+<div class="echarts" id="{{ $id }}" style="width: {{ $width }}; height: {{ $height }};"></div>
 {{- $scratch.Set "echarts" true -}}
diff --git a/resources/_gen/assets/scss/css/style.template.scss_90197bdac482216ecaaaae0fb88517c1.content b/resources/_gen/assets/scss/css/style.template.scss_90197bdac482216ecaaaae0fb88517c1.content