|  | <!DOCTYPE html> | 
|  | <html> | 
|  | <head> | 
|  | <title>Virtual Collection demo</title> | 
|  | <meta charset="utf-8" /> | 
|  | <script src="../js/src/menu.js"></script> | 
|  | <script src="../js/src/vc.js"></script> | 
|  | <link type="text/css" rel="stylesheet" href="../css/kalamar.css" /> | 
|  | <style type="text/css" rel="stylesheet"> | 
|  |  | 
|  | body { | 
|  | background-color: #9bad0b; | 
|  | color: white; | 
|  | font-family: tahoma, verdana, arial; | 
|  | font-size: 10pt; | 
|  | margin: 20px; | 
|  | } | 
|  |  | 
|  | .info { | 
|  | background-color:white; | 
|  | color: black; | 
|  | padding: 1em; | 
|  | font-family: mono; | 
|  | } | 
|  | </style> | 
|  | </head> | 
|  | <body> | 
|  | <div id="vc"></div> | 
|  | <div id="menu" class="vc"></div> | 
|  |  | 
|  | <script> | 
|  | var json = { | 
|  | "@type":"koral:docGroup", | 
|  | "operation":"operation:or", | 
|  | "operands":[ | 
|  | { | 
|  | "@type":"koral:docGroup", | 
|  | "operation":"operation:and", | 
|  | "operands":[ | 
|  | { | 
|  | "@type":"koral:doc", | 
|  | "key":"Titel", | 
|  | "value":"Der Birnbaum", | 
|  | "match":"match:eq" | 
|  | }, | 
|  | { | 
|  | "@type":"koral:doc", | 
|  | "key":"Veröffentlichungsort", | 
|  | "value":"Mannheim", | 
|  | "match":"match:eq" | 
|  | }, | 
|  | { | 
|  | "@type":"koral:docGroup", | 
|  | "operation":"operation:or", | 
|  | "operands":[ | 
|  | { | 
|  | "@type":"koral:doc", | 
|  | "key":"Untertitel", | 
|  | "value":"Aufzucht und Pflege", | 
|  | "match":"match:eq" | 
|  | }, | 
|  | { | 
|  | "@type":"koral:doc", | 
|  | "key":"Untertitel", | 
|  | "value":"Gedichte", | 
|  | "match":"match:eq", | 
|  | "rewrites" : [ | 
|  | { | 
|  | "@type": "koral:rewrite", | 
|  | "src" : "policy", | 
|  | "operation" : "operation:injection", | 
|  | } | 
|  | ] | 
|  | } | 
|  | ] | 
|  | } | 
|  | ] | 
|  | }, | 
|  | { | 
|  | "@type":"koral:doc", | 
|  | "key":"Veröffentlichungsdatum", | 
|  | "type":"type:date", | 
|  | "value":"2015-03-05", | 
|  | "match":"match:geq" | 
|  | } | 
|  | ] | 
|  | }; | 
|  | 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(); | 
|  | }; | 
|  |  | 
|  | </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> |