You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by sh...@apache.org on 2020/06/15 10:30:07 UTC
[incubator-echarts-doc] branch live-example updated: example: put
example panel in the bottom if width is not enough
This is an automated email from the ASF dual-hosted git repository.
shenyi pushed a commit to branch live-example
in repository https://gitbox.apache.org/repos/asf/incubator-echarts-doc.git
The following commit(s) were added to refs/heads/live-example by this push:
new 065c226 example: put example panel in the bottom if width is not enough
065c226 is described below
commit 065c2265ceb1952a10e0dee5fc05ad34330dcbd2
Author: pissang <bm...@gmail.com>
AuthorDate: Mon Jun 15 18:29:55 2020 +0800
example: put example panel in the bottom if width is not enough
---
src/App.vue | 20 ------
src/components/DocContent.vue | 37 +++++++++--
src/components/DocContentItemCard.vue | 8 +--
src/components/LiveExample.vue | 112 ++++++++++++++++++++++------------
src/components/OptionControl.vue | 6 +-
src/store.js | 5 +-
6 files changed, 116 insertions(+), 72 deletions(-)
diff --git a/src/App.vue b/src/App.vue
index a47cc1f..e0b69da 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -27,22 +27,6 @@
<!-- Always create a new component if page is changed -->
<DocContent v-else-if="shared.currentPath" :key="pagePath"></DocContent>
<!-- <Home v-else></Home> -->
- <!-- <template v-else>
- <el-container v-if="!isExampleTopDownPlayout">
- <el-main style="padding: 0 0 0 0">
- <DocContent :key="pagePath"></DocContent>
- </el-main>
- <el-aside width="45%" style="padding: 10px;">
- <LiveExample></LiveExample>
- </el-aside>
- </el-container>
- <div v-else>
- <DocContent :key="pagePath"></DocContent>
- <div class="live-example-bottom-container">
- <LiveExample></LiveExample>
- </div>
- </div>
- </template> -->
</el-main>
</el-container>
</template>
@@ -70,10 +54,6 @@ export default {
computed: {
pagePath() {
return getPagePath();
- },
- isExampleTopDownPlayout() {
- // TODO
- return false;
}
},
diff --git a/src/components/DocContent.vue b/src/components/DocContent.vue
index fe7ebbb..efa24ca 100644
--- a/src/components/DocContent.vue
+++ b/src/components/DocContent.vue
@@ -1,6 +1,10 @@
<template>
<div class="doc-main" v-loading="loading">
- <div :class="['doc-content', shared.showOptionExample ? 'option-example-actived' : '']">
+ <div :class="[
+ 'doc-content',
+ shared.showOptionExample ? 'option-example-actived' : '',
+ isExampleTopDownPlayout ? 'option-example-down-layout' : 'option-example-right-layout'
+ ]">
<h2 :id="pageId">{{pageTitle}}</h2>
<div
class="page-description"
@@ -22,7 +26,10 @@
></DocContentItemCard>
</div>
</div>
- <LiveExample v-if="shared.showOptionExample"></LiveExample>
+ <LiveExample
+ v-if="shared.showOptionExample && !shared.isMobile"
+ :isDownLayout="isExampleTopDownPlayout"
+ ></LiveExample>
</div>
</template>
@@ -65,7 +72,9 @@ export default {
// Outline of this page
pageOutline: {},
- pageDescMap: {}
+ pageDescMap: {},
+
+ isExampleTopDownPlayout: false
}
},
@@ -112,9 +121,22 @@ export default {
});
this.updateCurrentPath(this.shared.currentPath, true);
+
+ this.resize = this.resize.bind(this);
+ window.addEventListener('resize', this.resize);
+
+ this.resize();
+ },
+
+ destroyed() {
+ window.removeEventListener('resize', this.resize);
},
methods: {
+ resize() {
+ this.isExampleTopDownPlayout = window.innerWidth < 1400;
+ },
+
updateLazyload() {
// console.log('Update lazy load');
Vue.nextTick(() => {
@@ -233,9 +255,16 @@ export default {
text-align: left;
&.option-example-actived {
- margin-right: 45%;
+
+ &.option-example-down-layout {
+ // margin-bottom: 45%;
+ }
+ &.option-example-right-layout {
+ margin-right: 45%;
+ }
}
+
h2 {
color: #B03A5B;
font-size: 34px;
diff --git a/src/components/DocContentItemCard.vue b/src/components/DocContentItemCard.vue
index 80219f8..e6bea75 100644
--- a/src/components/DocContentItemCard.vue
+++ b/src/components/DocContentItemCard.vue
@@ -103,8 +103,8 @@ export default {
watch: {
enableUIControl(newVal) {
if (!newVal) {
- this.shared.currentPreviewOption = Object.freeze(changeOption(
- this.shared.currentPreviewOption, this.nodeData.path, undefined
+ this.shared.currentExampleOption = Object.freeze(changeOption(
+ this.shared.currentExampleOption, this.nodeData.path, undefined
));
}
else {
@@ -327,13 +327,13 @@ $hierarchy-guider-color: #C592A0;
&.level-2 {
&>h4 {
.anchor {
- font-size: 18px;
+ font-size: 16px;
}
.path-parent {
font-size: 14px;
}
.path-base {
- font-size: 18px;
+ font-size: 16px;
}
}
}
diff --git a/src/components/LiveExample.vue b/src/components/LiveExample.vue
index d8bd00b..f5860c0 100644
--- a/src/components/LiveExample.vue
+++ b/src/components/LiveExample.vue
@@ -1,9 +1,8 @@
-
<template>
-<div id="example-panel" v-if="shared.allOptionExamples">
+<div id="example-panel" :class="[isDownLayout ? 'down-layout' : 'right-layout']">
<h2>{{$t('example.title')}}</h2>
<p class="intro">{{$t('example.intro')}}</p>
- <div class="preview-and-code" v-if="shared.currentPreviewOption">
+ <div class="preview-and-code" v-if="shared.currentExampleOption">
<div class="preview-main"></div>
<div class="example-code">
<div class="codemirror-main"></div>
@@ -16,7 +15,7 @@
</el-alert>
</div>
<div class="toolbar">
- <el-select size='mini' class="example-list" v-model="exampleName"
+ <el-select size='mini' v-if="shared.allOptionExamples" class="example-list" v-model="shared.currentExampleName"
:popper-append-to-body="false">
<el-option v-for="item in shared.allOptionExamples"
:key="item.name"
@@ -59,8 +58,8 @@ function fetchECharts() {
}
function updateOption(option) {
- if (this.exampleName !== this.lastUpdateExampleName) {
- this.lastUpdateExampleName = this.exampleName;
+ if (this.shared.currentExampleName !== this.lastUpdateExampleName) {
+ this.lastUpdateExampleName = this.shared.currentExampleName;
// Refresh all if example base option is changed.
this.refreshForce();
return;
@@ -107,43 +106,35 @@ function updateOption(option) {
this.cmInstance.setValue(this.formattedOptionCodeStr);
}
- this.lastUpdateExampleName = this.exampleName;
+ this.lastUpdateExampleName = this.shared.currentExampleName;
}
export default {
+ props: ['isDownLayout'],
+
data() {
return {
shared: store,
hasError: false,
- exampleName: '',
-
lastUpdateExampleName: ''
};
},
mounted() {
- const self = this;
- const examplePanel = this.$el;
- const previewMain = examplePanel.querySelector('.preview-main');
// TODO use css?
- function resize() {
- examplePanel.style.width = examplePanel.parentNode.clientWidth * 0.45 + 'px';
- if (self.chartInstance) {
- self.chartInstance.resize();
- }
- }
- window.addEventListener('resize', resize);
- resize();
+ this.resize = this.resize.bind(this);
+ window.addEventListener('resize', this.resize);
+ this.resize();
- if (this.shared.currentPreviewOption) {
- this.updateOptionThrottled(this.shared.currentPreviewOption);
+ if (this.shared.currentExampleOption) {
+ this.updateOptionThrottled(this.shared.currentExampleOption);
}
if (this.shared.allOptionExamples) {
- this.exampleName = this.shared.allOptionExamples[0].name;
+ this.shared.currentExampleName = this.shared.allOptionExamples[0].name;
}
},
@@ -152,10 +143,11 @@ export default {
this.chartInstance.dispose();
this.chartInstance = null;
}
+ window.removeEventListener('resize', this.resize);
},
watch: {
- 'shared.currentPreviewOption'(newVal) {
+ 'shared.currentExampleOption'(newVal) {
if (newVal) {
this.updateOptionThrottled(newVal);
}
@@ -163,9 +155,9 @@ export default {
'shared.allOptionExamples'(newVal) {
// Use the first example as default.
- this.exampleName = newVal[0].name;
+ this.shared.currentExampleName = newVal[0].name;
},
- 'exampleName'(newVal) {
+ 'shared.currentExampleName'(newVal) {
this.changeExample(newVal);
}
},
@@ -177,14 +169,30 @@ export default {
leading: false
}),
+ resize() {
+ const examplePanel = this.$el;
+ const previewMain = examplePanel.querySelector('.preview-main');
+ if (this.isDownLayout) {
+ examplePanel.style.height = (window.innerHeight * 0.45 - 60) + 'px';
+ examplePanel.style.width = 'auto';
+ }
+ else {
+ examplePanel.style.width = examplePanel.parentNode.clientWidth * 0.45 + 'px';
+ examplePanel.style.height = 'auto';
+ }
+ if (this.chartInstance) {
+ this.chartInstance.resize();
+ }
+ },
+
refreshForce: function () {
// Dispose first
- if (this.shared.currentPreviewOption) {
+ if (this.shared.currentExampleOption) {
if (this.chartInstance) {
this.chartInstance.dispose();
this.chartInstance = null;
}
- this.updateOption(this.shared.currentPreviewOption);
+ this.updateOption(this.shared.currentExampleOption);
}
},
@@ -196,18 +204,18 @@ export default {
const example = this.shared.allOptionExamples &&
this.shared.allOptionExamples.find(item => item.name === exampleName);
if (!example) {
- this.shared.currentPreviewOption = null;
+ this.shared.currentExampleOption = null;
return false;
}
const code = example.code;
const func = new Function(code + '\n return option');
- this.shared.currentPreviewOption = Object.freeze(func());
+ this.shared.currentExampleOption = Object.freeze(func());
}
},
computed: {
optionCodeStr() {
- return `const option = ${JSON.stringify(this.shared.currentPreviewOption)}`;
+ return `const option = ${JSON.stringify(this.shared.currentExampleOption)}`;
},
formattedOptionCodeStr() {
@@ -223,13 +231,10 @@ export default {
#example-panel {
position: fixed;
- top: 0;
- bottom: 0;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
- top: 40px;
padding: 10px 0px;
- right: 10px;
text-align: left;
+ background: #fff;
// background: #162436;
// border-left: 1px solid #ddd;
@@ -262,14 +267,10 @@ export default {
top: 0;
}
.preview-main {
- width: 100%;
background: #fefefe;
- height: 50%;
}
.example-code {
- width: 100%;
- height: 50%;
position: relative;
// h4 {
@@ -292,6 +293,39 @@ export default {
top: 20px;
right: 10px;
}
+
+
+ &.right-layout {
+ bottom: 0;
+ top: 40px;
+ right: 10px;
+
+ .preview-main {
+ width: 100%;
+ height: 50%;
+ }
+ .example-code {
+ width: 100%;
+ height: 50%;
+ }
+ }
+
+ &.down-layout {
+ left: 300px;
+ bottom: 0;
+ right: 0;
+
+ .preview-main {
+ width: 50%;
+ height: 100%;
+ float: left;
+ }
+ .example-code {
+ width: 50%;
+ height: 100%;
+ float: left;
+ }
+ }
}
</style>
\ No newline at end of file
diff --git a/src/components/OptionControl.vue b/src/components/OptionControl.vue
index 41cc1a3..57d0612 100644
--- a/src/components/OptionControl.vue
+++ b/src/components/OptionControl.vue
@@ -78,9 +78,9 @@ export default {
methods: {
onValueChange(value) {
// console.log(this.optionPath, value);
- if (this.shared.currentPreviewOption) {
- this.shared.currentPreviewOption = Object.freeze(
- changeOption(this.shared.currentPreviewOption, this.optionPath, value)
+ if (this.shared.currentExampleOption) {
+ this.shared.currentExampleOption = Object.freeze(
+ changeOption(this.shared.currentExampleOption, this.optionPath, value)
);
}
}
diff --git a/src/store.js b/src/store.js
index cc57876..e3b20f5 100644
--- a/src/store.js
+++ b/src/store.js
@@ -14,9 +14,10 @@ export const store = {
locale: 'zh',
- showOptionExample: false,
+ showOptionExample: true,
allOptionExamples: null,
- currentPreviewOption: ''
+ currentExampleName: '',
+ currentExampleOption: ''
};
export function getPagePath() {
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org