<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Iconolab</title>
<link rel="stylesheet" href="/static/iconolab/css/iconolab.css">
<style>
body {
margin-top: 40px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6">
<div id="tagform">
<color-buttons ref="buttons" v-for="i in [null, 1, 2, 3, 4, 5]" v-bind:original-value="i"></color-buttons>
</div>
<hr>
<button id="animate" class="btn btn-default">Animate</button>
</div>
<div class="col-md-6">
<div id="taglist"></div>
<hr>
<pre id="tags-json"></pre>
</div>
</div>
</div>
<script src="/static/iconolab/js/vendor.js"></script>
<script src="/static/iconolab/js/iconolab.js"></script>
<script>
var vm = new Vue({
el: '#tagform'
});
$('#animate').on('click', function(e) {
$.each(vm.$refs.buttons, function() {
this.animate();
});
})
//
function refreshTags() {
$('#tags-json').html(JSON.stringify(taglist.tags, null, 2));
}
var TagList = iconolab.VueComponents.TagList;
var taglist = new Vue(TagList);
taglist.tags = [
{
"tag_label": "Football",
"tag_input": "http://fr.dbpedia.org/resource/Football",
"accuracy": 5,
"relevancy": 2
}, {
"tag_label": "Sexion d'Assaut",
"tag_input": "http://fr.dbpedia.org/resource/Sexion_d'Assaut",
"accuracy": 3,
"relevancy": 1
},
{
"tag_label": "Fillon",
"tag_input": "http://fr.dbpedia.org/resource/Fillon",
"accuracy": 4,
"relevancy": 3
}
];
taglist.$mount('#taglist');
taglist.$on('change', function(e) {
refreshTags()
});
refreshTags();
</script>
</body>
</html>