| <!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> |