--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/src_js/iconolab-bundle/tagform.html Wed Feb 15 16:42:06 2017 +0100
@@ -0,0 +1,82 @@
+<!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>