Major redesign of JS and Sass assets
diff --git a/public/js/demo/menu.html b/public/js/demo/menu.html
new file mode 100644
index 0000000..985be65
--- /dev/null
+++ b/public/js/demo/menu.html
@@ -0,0 +1,107 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Menu demo</title>
+ <meta charset="utf-8" />
+ <script src="../src/menu.js"></script>
+<!--
+ <link href="../../css/vc.css" rel="stylesheet" type="text/css"></link>
+-->
+ <link href="../../css/build/kalamar.css" rel="stylesheet" type="text/css"></link>
+ <style type="text/css" rel="stylesheet">
+.info {
+ background-color: #ddd;
+ color: black;
+ padding: 1em;
+ font-family: mono;
+}
+body {
+ margin: 0;
+ background-color: #ddd;
+}
+ </style>
+ </head>
+ <body>
+ <div style="position: absolute; background-color: #7ba400; height: 50px; width: 100%;"></div>
+
+ <div id="menu" class="vc"></div>
+
+ <main>
+ <div>
+ <div id="pagination"><a rel="prev"><span><i class="fa fa-caret-left"></i></span></a><a rel="self"><span>1</span></a><a href="/kalamar?q=der+%5Bmate/m%3Dnumber:sg%5D&ql=poliqarp&p=2"><span>2</span></a><a href="/kalamar?q=der+%5Bmate/m%3Dnumber:sg%5D&ql=poliqarp&p=3"><span>3</span></a><span><i class="fa fa-ellipsis-h"></i></span><a href="/kalamar?q=der+%5Bmate/m%3Dnumber:sg%5D&ql=poliqarp&p=52230"><span>52230</span></a><a rel="next" href="/kalamar?q=der+%5Bmate/m%3Dnumber:sg%5D&ql=poliqarp&p=2"><span><i class="fa fa-caret-right"></i></span></a></div>
+ </div>
+ </main>
+
+ <script>
+KorAP.OwnMenuItem = {
+ create : function (params) {
+ return Object.create(KorAP.MenuItem).upgradeTo(KorAP.OwnMenuItem)._init(params);
+ },
+ content : function (content) {
+ if (arguments.length === 1) {
+ this._content = content;
+ };
+ return this._content;
+ },
+
+ // enter or click
+ onclick : function () {
+ console.log(this._name);
+ },
+
+ // right arrow
+ further : function () {
+ console.log("Further: " + this._name);
+ },
+ _init : function (params) {
+ if (params[0] === undefined)
+ throw new Error("Missing parameters");
+
+ this._name = params[0];
+ this._content = document.createTextNode(this._name);
+ this._lcField = ' ' + this.content().textContent.toLowerCase();
+
+ return this;
+ }
+};
+
+KorAP.OwnPrefix = {
+ create : function () {
+ return Object.create(KorAP.MenuPrefix)
+ .upgradeTo(KorAP.OwnPrefix)
+ ._init();
+ },
+ onclick : function () {
+ console.log('Prefix: ' + this.value());
+ }
+}
+
+KorAP.OwnMenu = {
+ create : function (params) {
+ return Object.create(KorAP.Menu)
+ .upgradeTo(KorAP.OwnMenu)
+ ._init(KorAP.OwnMenuItem, KorAP.OwnPrefix, params);
+ }
+};
+
+var menu = KorAP.OwnMenu.create([
+ ['Titel', 'title', 'string'],
+ ['Untertitel', 'subTitle', 'string'],
+ ['Veröffentlichungsdatum', 'pubDate', 'date'],
+ ['Länge', 'length', 'integer'],
+ ['Autor', 'author', 'string'],
+ ['Genre', 'genre', 'string'],
+ ['corpusID', 'corpusID', 'string'],
+ ['docID', 'docID', 'string'],
+ ['textID', 'textID', 'string']
+]);
+
+ document.getElementById('menu').appendChild(menu.element());
+
+ menu.limit(3);
+ menu.show('');
+ menu.focus();
+
+ </script>
+ </body>
+</html>