js-multi-data-module
Version:
Get multi data library.
376 lines (348 loc) • 13.8 kB
HTML
<html lang="ja">
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>MULTI DATA MODULE | yama-dev</title>
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
<script src="../dist/js-multi-data-module.js"></script>
<script async defer src="https://buttons.github.io/buttons.js"></script>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-91619969-3"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-91619969-3');
</script>
</head>
<body>
<div class="container">
<h2 class="mt-3 mb-3">MULTI DATA MODULE</h2>
<p>
Get multi data library.
</p>
<span class="p-sns"><a class="github-button" href="https://github.com/yama-dev" data-show-count="true" aria-label="Follow @yama-dev on GitHub">Follow @yama-dev</a></span>
<span class="p-sns"><a class="github-button" href="https://github.com/yama-dev/js-multi-data-module/releases" data-icon="octicon-cloud-download" aria-label="Download yama-dev/js-multi-data-module on GitHub">Download</a></span>
<span class="p-sns"><a class="github-button" href="https://github.com/yama-dev/js-multi-data-module" data-icon="octicon-star" data-show-count="true" aria-label="Star yama-dev/js-multi-data-module on GitHub">Star</a></span>
<span class="p-sns"><a class="github-button" href="https://github.com/yama-dev/js-multi-data-module/fork" data-icon="octicon-repo-forked" data-show-count="true" aria-label="Fork yama-dev/js-multi-data-module on GitHub">Fork</a></span>
<span class="p-sns"><a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-text="MULTI DATA MODULE - Get multi data library." data-show-count="false">Tweet</a></span>
<style>.p-sns > span{ display: inline-block; }</style>
<hr class="mt-4 mb-4">
<div id="app" class="mb-5">
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link" v-bind:class="[posTab === 1 ? 'active' : '']" v-on:click="actionChangeTab(1)">Demo</a>
</li>
<li class="nav-item">
<a class="nav-link" v-bind:class="[posTab === 2 ? 'active' : '']" v-on:click="actionChangeTab(2)">Basic Use</a>
</li>
<li class="nav-item">
<a class="nav-link" v-bind:class="[posTab === 3 ? 'active' : '']" v-on:click="actionChangeTab(3)">Advanced Use</a>
</li>
</ul>
<br>
<section v-if="posTab === 1">
<div>
<h3>Demo</h3>
<p>値を変更して動作が確認出来ます。</p>
<form>
<div class="row">
<div class="col">
<div class="form-group">
<label for="inputDataType">Data Type.</label>
<input id="inputDataType" class="form-control" v-model="inputDataType" placeholder="ex. jsonp">
</div>
</div>
<div class="col">
<div class="form-group">
<label for="inputHierarchy">Hierarchy.</label>
<input id="inputHierarchy" class="form-control" v-model="inputHierarchy" placeholder="ex. items">
</div>
</div>
<div class="col">
<div class="form-group">
<label for="inputFetchTimeout">Timeout.</label>
<input type="number" id="inputFetchTimeout" class="form-control" v-model="inputFetchTimeout" placeholder="ex. 3000 (ms)">
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="form-group">
<label for="inputOrder">Order.</label>
<input id="inputOrder" class="form-control" v-model="inputOrder" placeholder="">
</div>
</div>
<div class="col">
<div class="form-group">
<label for="inputOrderProperty">Order Property.</label>
<input id="inputOrderProperty" class="form-control" v-model="inputOrderProperty" placeholder="">
</div>
</div>
<div class="col">
<div class="form-group">
<label for="inputFilter">Filter.</label>
<select class="custom-select mr-sm-2" id="inputFilter" v-model="inputFilter">
<option selected value="false">false</option>
<option value="true">true</option>
</select>
</div>
</div>
</div>
<div class="form-group">
<label for="inputFilePath">File Path.</label>
<input id="inputFilePath" class="form-control" v-model="inputFilePath" placeholder="ex. ./path/to/data.json">
</div>
<div class="form-group">
<label>Code</label>
<pre class="mt-2" style="border: 1px solid #ced4da; border-radius: .25rem;">
<code style="white-space:pre-wrap; word-wrap:break-word;">{{ resultCode }}</code>
</pre>
</div>
<div class="form-group">
<label for="result">Data.</label>
<p><button type="button" class="btn btn-outline-secondary" v-on:click="actionUpdate">Fetch Data.</button></p>
<textarea v-model="result" id="result" class="form-control p-textarea" rows="30" placeholder=""></textarea>
</div>
</form>
</div>
</section>
<section v-if="posTab === 2">
<div>
<h3>Basic Use</h3>
<pre class="prettyprint lang-html mt-2">
<code>
<script src="./js-multi-data-module.js"></script>
<script>
let MDM = new MULTI_DATA_MODULE({
data_type: 'jsonp',
data_list: [
{
url:'./sample.json',
hierarchy: 'items'
}
],
on: {
Complete: function(data,list){
console.log(data,list);
}
}
});
</script></code>
</pre>
</div>
</section>
<section v-if="posTab === 3">
<div>
<h3>Advanced Use</h3>
<pre class="prettyprint lang-html mt-2">
<code>
<script src="./js-multi-data-module.js"></script>
<script>
let MDM = new MULTI_DATA_MODULE({
order: 'down',
orderProperty: 'pubDate',
filter: true,
jsonpCallback : 'callback',
fetch_timeout : 10000,
data_type: 'jsonp',
data_list: [
{
url:'./sample.json',
hierarchy: 'items'
},
{
url:'./sample.object.json',
hierarchy: 'items.list', // items = { list: [...] }
},
{
url:'./sample.array.json',
hierarchy: 'items.0', // items[0]
}
],
on: {
Update: function(data){
console.log(data);
},
Complete: function(data, list){
console.log(data, list);
}
}
});
</script></code>
</pre>
</div>
</section>
</div>
</div>
<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>
<style>
.nav li {
cursor: pointer;
}
#app pre {
line-height: 1.2em;
}
textarea.p-textarea {
line-height: 1.2em;
font-size: 14px;
}
@-webkit-keyframes motionChange {
0% {
opacity: 0;
-webkit-transform: translateY(5px);
transform: translateY(5px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes motionChange {
0% {
opacity: 0;
-webkit-transform: translateY(5px);
transform: translateY(5px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
section > div {
opacity: 0;
-webkit-transform: translateY(5px);
transform: translateY(5px);
-webkit-animation: motionChange 0.7s cubic-bezier(0.215, 0.61, 0.355, 1) 0.2s 1 forwards;
animation: motionChange 0.7s cubic-bezier(0.215, 0.61, 0.355, 1) 0.2s 1 forwards;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var app = new Vue({
el: '#app',
data: {
posTab: 1,
inputDataType: 'jsonp',
inputFilePath: './data/sample.jsonp',
inputHierarchy: 'items',
inputOrder: 'down',
inputOrderProperty: 'pubDate',
inputFilter: false,
inputFetchTimeout: 3000,
flgLoading: false,
resultCode: '',
result: ''
},
mounted(){
this.makeCode();
this.getData();
},
watch: {
inputDataType: function(){
this.makeCode();
},
inputHierarchy: function(){
this.makeCode();
},
inputFetchTimeout: function(){
this.makeCode();
},
inputOrder: function(){
this.makeCode();
},
inputOrderProperty: function(){
this.makeCode();
},
inputFilter: function(){
this.makeCode();
},
inputFilePath: function(){
this.makeCode();
}
},
methods: {
actionChangeTab: function(num){
this.posTab = num;
},
getData: function(){
let _that = this;
if(this.flgLoading) return false;
this.flgLoading = true;
this.result = '';
new MULTI_DATA_MODULE({
data_type: this.inputDataType,
order: this.inputOrder,
orderProperty: this.inputOrderProperty,
filter: this.inputFilter,
fetch_timeout: this.inputFetchTimeout,
data_list: [
{
url: this.inputFilePath,
hierarchy: this.inputHierarchy,
customFunction: function (data) {
return data;
}
}
],
on: {
Update: function(data){
console.log(data);
},
Complete: function(data,list){
console.log(data,list);
_that.result = JSON.stringify(data,undefined,1);
setTimeout(function(){
_that.flgLoading = false;
},1000)
}
}
});
},
actionUpdate: function(){
this.getData();
},
makeCode: function(){
this.result = '';
var _str = "\n";
_str += " <script src=\"https://cdn.jsdelivr.net/gh/yama-dev/js-multi-data-module/dist/js-multi-data-module.js\"><\/script>"+"\n";
_str += " <script>"+"\n";
_str += " let MDM = new MULTI_DATA_MODULE({"+"\n";
_str += " data_type: '"+this.inputDataType+"',"+"\n";
_str += " order: '"+this.inputOrder+"',"+"\n";
_str += " orderProperty: '"+this.inputOrderProperty+"',"+"\n";
_str += " filter: "+this.inputFilter+","+"\n";
_str += " fetch_timeout: "+this.inputFetchTimeout+","+"\n";
_str += " data_list: ["+"\n";
_str += " {"+"\n";
_str += " url:'"+this.inputFilePath+"',"+"\n";
_str += " hierarchy: '"+this.inputHierarchy+"',"+"\n";
_str += " customFunction: function (data) {"+"\n";
_str += " return data;"+"\n";
_str += " }"+"\n";
_str += " }"+"\n";
_str += " ],"+"\n";
_str += " on: {"+"\n";
_str += " Update: function(data){"+"\n";
_str += " console.log(data);"+"\n";
_str += " },"+"\n";
_str += " Complete: function(data,list){"+"\n";
_str += " console.log(data,list);"+"\n";
_str += " }"+"\n";
_str += " }"+"\n";
_str += " });"+"\n";
_str += " <\/script>";
this.resultCode = _str;
}
}
});
</script>
</body>
</html>