Skip to content

Commit

Permalink
docs(demo): Improve demo functionality
Browse files Browse the repository at this point in the history 
- Make LBN menu visible when demo page loaded with specific hash
- Adjust layout for ease preview & editing
  • Loading branch information
@netil
netil committed Oct 21, 2022
1 parent 1aac78a commit 3831794
Show file tree
Hide file tree
Showing 4 changed files with 111 additions and 47 deletions.
25 changes: 21 additions & 4 deletions demo/chart.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -145,7 +145,9 @@ var billboardDemo = {

type = type.replace("#", "").split(".");

this.generate(type[0], type[1]);
try {
this.generate(type[0], type[1]);
} catch(e) {}

this.$title.innerHTML = type[1]
.replace(/([A-Z][a-z])/g, " $1")
Expand All @@ -162,8 +164,23 @@ var billboardDemo = {
// add selected class
$selected = this.$list.querySelector("[href='#"+ type.join(".") +"']");
$selected.className += this.selectedClass;

window.scrollTo(0, 0);

!this.isVisible($selected) && $selected.scrollIntoView({
behavior: "auto",
block: "start"
});
},

isVisible($el) {
const {clientWidth, clientHeight} = document.documentElement;
const {top, right, bottom, left} = $el.getBoundingClientRect();

return top <= clientHeight &&
right >= 0 &&
bottom >= 0 &&
left <= clientWidth;
},

/**
Expand Down Expand Up @@ -229,10 +246,10 @@ var billboardDemo = {
'// import bb, {'+ code.esm.join(", ") +'} from "billboard.js";\r\n';

if (hasPlugin) {
this.$code.innerHTML += '// import '+ pluginName +' from "billboard.js/dist/plugin/billboardjs-plugin-'+ pluginName +'";';
this.$code.innerHTML += '// import '+ pluginName +' from "billboard.js/dist/plugin/billboardjs-plugin-'+ pluginName +'";\r\n';
}

this.$code.innerHTML += '\r\n\r\n'+ code.data;
this.$code.innerHTML += '\r\n'+ code.data;
this.$code.scrollTop = 0;

hljs.highlightBlock(this.$html);
Expand Down
90 changes: 48 additions & 42 deletions demo/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -115,49 +115,55 @@ <h2 class="sidebar-brand">billboard.js</h2>
<div class="col-lg-12">
<a href="#menu-toggle" class="btn btn-default" id="menu-toggle" style="background-color:#ff4242;color:#fff">Menu</a>

<h2 id="title"></h2>
<p id="description"></p>
<div class="chart_area">
<h1>billboard.js examples</h1>
<p>
Checkout total of <span class="item_count"></span> examples, by clicking menu <span class="by_text"></span>.
</p>

<h4>Supported chart types</h4>
<ul >
<li><a href="#Chart.AreaChart">Area</a></li>
<li><a href="#Chart.AreaRangeChart">Area Range</a></li>
<li><a href="#Chart.BarChart">Bar</a></li>
<li><a href="#Chart.BubbleChart">Bubble</a></li>
<li><a href="#Chart.CandlestickChart">Candlestick</a></li>
<li><a href="#Chart.CombinationChart">Combination</a></li>
<li><a href="#Chart.DonutChart">Donut</a></li>
<li><a href="#Chart.GaugeChart">Gauge</a></li>
<li><a href="#Chart.LineChart">Line</a></li>
<li><a href="#Chart.PieChart">Pie</a></li>
<li><a href="#Chart.PolarChart">Polar</a></li>
<li><a href="#Chart.RadarChart">Radar</a></li>
<li><a href="#Chart.ScatterPlot">Scatter</a></li>
<li><a href="#Chart.SplineChart">Spline</a></li>
<li><a href="#Chart.StackedBarChart">Stacked Bar</a></li>
<li><a href="#Chart.StepChart">Step</a></li>
</ul>
</div>
<div class="code">
<h4 class="sub_tit">Sample code</h4>
<pre><code class="html"></code></pre>
<p>
&bull; Try it out by editing below code or click right sided buttons.<br>
&nbsp; <sup>*</sup>for ESM imports usage example, checkout <a href="https://github.com/naver/billboard.js/wiki/CHANGELOG-v2#modularization-by-its-functionality" target="_new" style="text-decoration:underline;">this link</a>.
</p>
<div class="js">
<button class="button clipboard">Copy to Clipboard</button>

<div class="editor" title="To open as new window, hold the 'Alt(Win)/option(Mac)' key while clicking.">
<button class="button js">JS</button>
<button class="button ts">TS</button>
<div class="example-grid">
<div>
<div>
<h2 id="title"></h2>
<p id="description"></p>
</div>
<div class="chart_area">
<h1>billboard.js examples</h1>
<p>
Checkout total of <span class="item_count"></span> examples, by clicking menu <span class="by_text"></span>.
</p>

<h4>Supported chart types</h4>
<ul >
<li><a href="#Chart.AreaChart">Area</a></li>
<li><a href="#Chart.AreaRangeChart">Area Range</a></li>
<li><a href="#Chart.BarChart">Bar</a></li>
<li><a href="#Chart.BubbleChart">Bubble</a></li>
<li><a href="#Chart.CandlestickChart">Candlestick</a></li>
<li><a href="#Chart.CombinationChart">Combination</a></li>
<li><a href="#Chart.DonutChart">Donut</a></li>
<li><a href="#Chart.GaugeChart">Gauge</a></li>
<li><a href="#Chart.LineChart">Line</a></li>
<li><a href="#Chart.PieChart">Pie</a></li>
<li><a href="#Chart.PolarChart">Polar</a></li>
<li><a href="#Chart.RadarChart">Radar</a></li>
<li><a href="#Chart.ScatterPlot">Scatter</a></li>
<li><a href="#Chart.SplineChart">Spline</a></li>
<li><a href="#Chart.StackedBarChart">Stacked Bar</a></li>
<li><a href="#Chart.StepChart">Step</a></li>
</ul>
</div>
</div>
<div class="code">
<h4 class="sub_tit">Sample code</h4>
<pre><code class="html"></code></pre>
<p>
&bull; Try it out by editing below code or click right sided buttons.<br>
&nbsp; <sup>*</sup>for ESM imports usage example, checkout <a href="https://github.com/naver/billboard.js/wiki/CHANGELOG-v2#modularization-by-its-functionality" target="_new" style="text-decoration:underline;">this link</a>.
</p>
<div class="js">
<button class="button clipboard">Copy to Clipboard</button>

<div class="editor" title="To open as new window, hold the 'Alt(Win)/option(Mac)' key while clicking.">
<button class="button js">JS</button>
<button class="button ts">TS</button>
</div>
<pre><code class="javascript" contenteditable="true" spellcheck="false"></code></pre>
</div>
<pre><code class="javascript" contenteditable="true" spellcheck="false"></code></pre>
</div>
</div>
</div>
Expand Down
2 changes: 2 additions & 0 deletions demo/simple-sidebar.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -155,12 +155,14 @@ pre {

.code .html {
background-color: #eefbff;
max-height: 5;
}

.code .js {
position: relative;
font-family: Raleway;
font-size: 11px;
height: 1;
}

.code .js .focus {
Expand Down
41 changes: 40 additions & 1 deletion demo/tomorrow.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,17 +34,55 @@
color: #8959a8;
}

@media (min-width: 1200px) {
.example-grid {
display: grid;
grid-template-columns: 45% 55%;
grid-gap: 0 20px;
}

.sub_tit {
margin-top: 0;
}

.code .html {
max-height: 80px;
overflow: auto;
}

.js code {
overflow-y: scroll;
margin: 0 auto;
height: calc(100vh - 200px);
}
}

#title {
margin-top: 0;
}

.sub_tit {
background-color: #0a82d3;
color: #fff;
padding: 5px;
}

pre code {
display: block;
background: white;
color: #4d4d4c;
font-family: Menlo, Monaco, Consolas, monospace;
font-size: 14px;
font-size: 13px;
line-height: 1.3;
border: 1px solid #ccc;
padding: 10px;
}

code.html {
font-size: 12px;
}


.chart_area h4 {
border-bottom:dotted 1px;padding:10px 0 5px
}
Expand All @@ -56,6 +94,7 @@ pre code {
#description {
font-size: 13px;
color: gray;
display: inline-block;
}

.sparkline {
Expand Down

0 comments on commit 3831794

Please sign in to comment.