Skip to content

Commit f9192c9

Browse files
yama-devyama-dev
committed
adjust examples page.
1 parent bab023d commit f9192c9

File tree

1 file changed

+273
-20
lines changed

1 file changed

+273
-20
lines changed

‎examples/index.html

Lines changed: 273 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -41,10 +41,92 @@ <h2 class="mt-3 mb-3">MULTI DATA MODULE</h2>
4141

4242
<hr class="mt-4 mb-4">
4343

44-
<section>
45-
<h3>Basic Use</h3>
46-
<pre class="prettyprint lang-html mt-2">
47-
<code>
44+
<div id="app" class="mb-5">
45+
<ul class="nav nav-tabs">
46+
<li class="nav-item">
47+
<a class="nav-link" v-bind:class="[posTab === 1 ? 'active' : '']" v-on:click="actionChangeTab(1)">Demo</a>
48+
</li>
49+
<li class="nav-item">
50+
<a class="nav-link" v-bind:class="[posTab === 2 ? 'active' : '']" v-on:click="actionChangeTab(2)">Basic Use</a>
51+
</li>
52+
<li class="nav-item">
53+
<a class="nav-link" v-bind:class="[posTab === 3 ? 'active' : '']" v-on:click="actionChangeTab(3)">Advanced Use</a>
54+
</li>
55+
</ul>
56+
<br>
57+
58+
<section v-if="posTab === 1">
59+
<div>
60+
<h3>Demo</h3>
61+
<p>値を変更して動作が確認出来ます。</p>
62+
<form>
63+
<div class="row">
64+
<div class="col">
65+
<div class="form-group">
66+
<label for="inputDataType">Data Type.</label>
67+
<input id="inputDataType" class="form-control" v-model="inputDataType" placeholder="ex. jsonp">
68+
</div>
69+
</div>
70+
<div class="col">
71+
<div class="form-group">
72+
<label for="inputHierarchy">Hierarchy.</label>
73+
<input id="inputHierarchy" class="form-control" v-model="inputHierarchy" placeholder="ex. items">
74+
</div>
75+
</div>
76+
<div class="col">
77+
<div class="form-group">
78+
<label for="inputFetchTimeout">Timeout.</label>
79+
<input type="number" id="inputFetchTimeout" class="form-control" v-model="inputFetchTimeout" placeholder="ex. 3000 (ms)">
80+
</div>
81+
</div>
82+
</div>
83+
<div class="row">
84+
<div class="col">
85+
<div class="form-group">
86+
<label for="inputOrder">Order.</label>
87+
<input id="inputOrder" class="form-control" v-model="inputOrder" placeholder="">
88+
</div>
89+
</div>
90+
<div class="col">
91+
<div class="form-group">
92+
<label for="inputOrderProperty">Order Property.</label>
93+
<input id="inputOrderProperty" class="form-control" v-model="inputOrderProperty" placeholder="">
94+
</div>
95+
</div>
96+
<div class="col">
97+
<div class="form-group">
98+
<label for="inputFilter">Filter.</label>
99+
<select class="custom-select mr-sm-2" id="inputFilter" v-model="inputFilter">
100+
<option selected value="false">false</option>
101+
<option value="true">true</option>
102+
</select>
103+
</div>
104+
</div>
105+
</div>
106+
<div class="form-group">
107+
<label for="inputFilePath">File Path.</label>
108+
<input id="inputFilePath" class="form-control" v-model="inputFilePath" placeholder="ex. ./path/to/data.json">
109+
</div>
110+
<div class="form-group">
111+
<label>Code</label>
112+
<pre class="mt-2" style="border: 1px solid #ced4da; border-radius: .25rem;">
113+
<code style="white-space:pre-wrap; word-wrap:break-word;">{{ resultCode }}</code>
114+
</pre>
115+
</div>
116+
<div class="form-group">
117+
<label for="result">Data.</label>
118+
<p><button type="button" class="btn btn-outline-secondary" v-on:click="actionUpdate">Fetch Data.</button></p>
119+
<textarea v-model="result" id="result" class="form-control p-textarea" rows="15" placeholder=""></textarea>
120+
</div>
121+
</form>
122+
</div>
123+
</section>
124+
125+
<section v-if="posTab === 2">
126+
<div>
127+
<h3>Basic Use</h3>
128+
<pre class="prettyprint lang-html mt-2">
129+
<code>
48130
&lt;script src=&quot;./js-multi-data-module.js&quot;&gt;&lt;/script&gt;
49131
&lt;script&gt;
50132
let MDM = new MULTI_DATA_MODULE({
@@ -54,32 +136,31 @@ <h3>Basic Use</h3>
54136
url:&#039;./sample.json&#039;,
55137
hierarchy: &#039;items&#039;
56138
}
57-
]
139+
],
58140
on: {
59141
Complete: function(data,list){
60142
console.log(data,list);
61143
}
62144
}
63145
});
64146
&lt;/script&gt;</code>
65-
</pre>
66-
67-
</section>
68-
69-
<hr class="mt-4 mb-4">
147+
</pre>
148+
</div>
149+
</section>
70150

71-
<section>
72-
<h3>Advanced Use</h3>
73-
<pre class="prettyprint lang-html mt-2">
74-
<code>
151+
<section v-if="posTab === 3">
152+
<div>
153+
<h3>Advanced Use</h3>
154+
<pre class="prettyprint lang-html mt-2">
155+
<code>
75156
&lt;script src=&quot;./js-multi-data-module.js&quot;&gt;&lt;/script&gt;
76157
&lt;script&gt;
77158
let MDM = new MULTI_DATA_MODULE({
78159
order: &#039;down&#039;,
79160
orderProperty: &#039;pubDate&#039;,
80161
filter: true,
81162
jsonpCallback : &#039;callback&#039;,
82-
fetch_timeout : 10000
163+
fetch_timeout : 10000,
83164
data_type: &#039;jsonp&#039;,
84165
data_list: [
85166
{
@@ -94,7 +175,7 @@ <h3>Advanced Use</h3>
94175
url:&#039;./sample.array.json&#039;,
95176
hierarchy: &#039;items.0&#039;, // items[0]
96177
}
97-
]
178+
],
98179
on: {
99180
Update: function(data){
100181
console.log(data);
@@ -105,15 +186,187 @@ <h3>Advanced Use</h3>
105186
}
106187
});
107188
&lt;/script&gt;</code>
108-
</pre>
189+
</pre>
190+
</div>
191+
</section>
109192

110-
</section>
111-
112-
<hr class="mt-4 mb-4">
193+
</div>
113194

114195
</div>
115196

116197
<a href="https://github.com/yama-dev/js-multi-data-module" class="github-corner" aria-label="View source on Github"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
117198

199+
<style>
200+
.nav li {
201+
cursor: pointer;
202+
}
203+
textarea.p-textarea {
204+
line-height: 1.1em;
205+
font-size: 12px;
206+
}
207+
@-webkit-keyframes motionChange {
208+
0% {
209+
opacity: 0;
210+
-webkit-transform: translateY(5px);
211+
transform: translateY(5px);
212+
}
213+
100% {
214+
opacity: 1;
215+
-webkit-transform: translateY(0);
216+
transform: translateY(0);
217+
}
218+
}
219+
@keyframes motionChange {
220+
0% {
221+
opacity: 0;
222+
-webkit-transform: translateY(5px);
223+
transform: translateY(5px);
224+
}
225+
100% {
226+
opacity: 1;
227+
-webkit-transform: translateY(0);
228+
transform: translateY(0);
229+
}
230+
}
231+
section > div {
232+
opacity: 0;
233+
-webkit-transform: translateY(5px);
234+
transform: translateY(5px);
235+
-webkit-animation: motionChange 0.7s cubic-bezier(0.215, 0.61, 0.355, 1) 0.2s 1 forwards;
236+
animation: motionChange 0.7s cubic-bezier(0.215, 0.61, 0.355, 1) 0.2s 1 forwards;
237+
}
238+
</style>
239+
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
240+
<script>
241+
var app = new Vue({
242+
el: '#app',
243+
data: {
244+
posTab: 1,
245+
246+
inputDataType: 'jsonp',
247+
inputFilePath: './data/sample.jsonp',
248+
inputHierarchy: 'items',
249+
inputOrder: 'down',
250+
inputOrderProperty: 'pubDate',
251+
inputFilter: false,
252+
inputFetchTimeout: 3000,
253+
254+
flgLoading: false,
255+
256+
resultCode: '',
257+
result: ''
258+
},
259+
mounted(){
260+
this.makeCode();
261+
this.getData();
262+
},
263+
watch: {
264+
inputDataType: function(){
265+
this.makeCode();
266+
},
267+
inputHierarchy: function(){
268+
this.makeCode();
269+
},
270+
inputFetchTimeout: function(){
271+
this.makeCode();
272+
},
273+
inputOrder: function(){
274+
this.makeCode();
275+
},
276+
inputOrderProperty: function(){
277+
this.makeCode();
278+
},
279+
inputFilter: function(){
280+
this.makeCode();
281+
},
282+
inputFilePath: function(){
283+
this.makeCode();
284+
}
285+
},
286+
methods: {
287+
actionChangeTab: function(num){
288+
this.posTab = num;
289+
},
290+
getData: function(){
291+
let _that = this;
292+
293+
if(this.flgLoading) return false;
294+
295+
this.flgLoading = true;
296+
297+
this.result = '';
298+
299+
new MULTI_DATA_MODULE({
300+
data_type: this.inputDataType,
301+
order: this.inputOrder,
302+
orderProperty: this.inputOrderProperty,
303+
filter: this.inputFilter,
304+
fetch_timeout: this.inputFetchTimeout,
305+
data_list: [
306+
{
307+
url: this.inputFilePath,
308+
hierarchy: this.inputHierarchy,
309+
customFunction: function (data) {
310+
return data;
311+
}
312+
}
313+
],
314+
on: {
315+
Update: function(data){
316+
console.log(data);
317+
},
318+
Complete: function(data,list){
319+
console.log(data,list);
320+
_that.result = JSON.stringify(data,undefined,1);
321+
setTimeout(function(){
322+
_that.flgLoading = false;
323+
},1000)
324+
}
325+
}
326+
});
327+
},
328+
329+
actionUpdate: function(){
330+
this.getData();
331+
},
332+
333+
makeCode: function(){
334+
335+
this.result = '';
336+
337+
var _str = "\n";
338+
_str += " <script src=\"https://cdn.jsdelivr.net/gh/yama-dev/js-multi-data-module/dist/js-multi-data-module.js\"><\/script>"+"\n";
339+
_str += " <script>"+"\n";
340+
_str += " let MDM = new MULTI_DATA_MODULE({"+"\n";
341+
_str += " data_type: '"+this.inputDataType+"',"+"\n";
342+
_str += " order: '"+this.inputOrder+"',"+"\n";
343+
_str += " orderProperty: '"+this.inputOrderProperty+"',"+"\n";
344+
_str += " filter: "+this.inputFilter+","+"\n";
345+
_str += " fetch_timeout: "+this.inputFetchTimeout+","+"\n";
346+
_str += " data_list: ["+"\n";
347+
_str += " {"+"\n";
348+
_str += " url:'"+this.inputFilePath+"',"+"\n";
349+
_str += " hierarchy: '"+this.inputHierarchy+"',"+"\n";
350+
_str += " customFunction: function (data) {"+"\n";
351+
_str += " return data;"+"\n";
352+
_str += " }"+"\n";
353+
_str += " }"+"\n";
354+
_str += " ],"+"\n";
355+
_str += " on: {"+"\n";
356+
_str += " Update: function(data){"+"\n";
357+
_str += " console.log(data);"+"\n";
358+
_str += " },"+"\n";
359+
_str += " Complete: function(data,list){"+"\n";
360+
_str += " console.log(data,list);"+"\n";
361+
_str += " }"+"\n";
362+
_str += " }"+"\n";
363+
_str += " });"+"\n";
364+
_str += " <\/script>";
365+
this.resultCode = _str;
366+
}
367+
}
368+
});
369+
</script>
370+
118371
</body>
119372
</html>

0 commit comments

Comments
 (0)