| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>Virtual Collection demo</title> |
| <meta charset="utf-8" /> |
| <script src="../src/menu.js"></script> |
| <script src="../src/vc.js"></script> |
| <link href="../../css/vc.css" rel="stylesheet" type="text/css"></link> |
| <style type="text/css" rel="stylesheet"> |
| .info { |
| background-color:white; |
| color: black; |
| padding: 1em; |
| font-family: mono; |
| } |
| </style> |
| </head> |
| <body> |
| <div id="vc"></div> |
| <div id="menu"></div> |
| |
| <script> |
| var json = { |
| "@type":"koral:docGroup", |
| "operation":"operation:or", |
| "operands":[ |
| { |
| "@type":"koral:docGroup", |
| "operation":"operation:and", |
| "operands":[ |
| { |
| "@type":"koral:doc", |
| "key":"Titel", |
| "value":"Baum", |
| "match":"match:eq" |
| }, |
| { |
| "@type":"koral:doc", |
| "key":"Veröffentlichungsort", |
| "value":"hihi", |
| "match":"match:eq" |
| }, |
| { |
| "@type":"koral:docGroup", |
| "operation":"operation:or", |
| "operands":[ |
| { |
| "@type":"koral:doc", |
| "key":"Titel", |
| "value":"Baum", |
| "match":"match:eq" |
| }, |
| { |
| "@type":"koral:doc", |
| "key":"Veröffentlichungsort", |
| "value":"hihi", |
| "match":"match:eq", |
| "rewrites" : [ |
| { |
| "@type": "koral:rewrite", |
| "src" : "policy", |
| "operation" : "operation:injection", |
| } |
| ] |
| } |
| ] |
| } |
| ] |
| }, |
| { |
| "@type":"koral:doc", |
| "key":"Untertitel", |
| "value":"huhu", |
| "match":"match:eq" |
| } |
| ] |
| }; |
| KorAP.Locale.AND = 'und'; |
| KorAP.Locale.OR = 'oder'; |
| |
| var vc = KorAP.VirtualCollection.render(json); |
| document.getElementById('vc').appendChild(vc.element()); |
| |
| function showJSON() { |
| document.getElementById("json").innerHTML = JSON.stringify(vc.root().toJson()); |
| }; |
| |
| function showQuery() { |
| document.getElementById("query").innerHTML = vc.root().toQuery(); |
| }; |
| |
| var menu = KorAP.FieldMenu.create([ |
| ['Titel', 'title', 'string'], |
| ['Untertitel', 'subTitle', 'string'], |
| ['Veröffentlichungsdatum', 'pubDate', 'date'] |
| ]); |
| menu.limit(4); |
| menu.show(); |
| |
| document.getElementById('menu').appendChild(menu.element()); |
| |
| menu.focus(); |
| |
| |
| </script> |
| |
| <hr /> |
| |
| <p><a onclick="showJSON()" style="cursor:pointer">show JSON!</a></p> |
| <div id="json" class="info"></div> |
| |
| <hr /> |
| |
| <p><a onclick="showQuery()" style="cursor:pointer">show Query!</a></p> |
| <div id="query" class="info"></div> |
| |
| </body> |
| </html> |