Support toggle+widget buttons in plugin-framework
Change-Id: Ibf2b80efc1eeda2f51dedf4a7f3cd5ac67325ef9
diff --git a/dev/demo/plugin-client.html b/dev/demo/plugin-client.html
index 530682c..45b9852 100644
--- a/dev/demo/plugin-client.html
+++ b/dev/demo/plugin-client.html
@@ -22,7 +22,7 @@
</style>
</head>
<body class="result-view">
- <h2>Example Widget!</h2>
+ <h1>Example Widget!</h1>
<script>
function flood () {
var i = 0;
@@ -78,7 +78,8 @@
});
}
- </script>
+ </script>
+ <section>
<ul>
<li><a onclick="KorAPlugin.log(333, 'Huhu!')">Send log!</a></li>
<li><a onclick="KorAPlugin.resize()">Resize</a></li>
@@ -89,7 +90,9 @@
<li><a onclick="KorAPlugin.requestMsg({'action':'get', 'key':'KQ'}, function (d) { document.write(JSON.stringify(d.value))})">Get KQ</a></li>
<li><a onclick="KorAPlugin.requestMsg({'action':'get', 'key':'textSigle', 'value':'textSigle'}, function (d) { document.write(JSON.stringify(d.value))})">Get textSigle</a></li>
<li><a onclick="KorAPlugin.sendMsg({'action':'set', 'key':'QueryForm', 'value':{'q':'[This][is][a][query]'}})">Set query</a></li>
+ <li><a onclick="KorAPlugin.sendMsg({'action':'set', 'key':'Title', 'value':'Huhuhu'})">Set title</a></li>
</ul>
<p style="width: 2000px">------------------------------------------------------------------------------------------------------------------------</p>
+ </section>
</body>
</html>
diff --git a/dev/demo/plugin-server.html b/dev/demo/plugin-server.html
index 6a1e12f..2a2d047 100644
--- a/dev/demo/plugin-server.html
+++ b/dev/demo/plugin-server.html
@@ -12,52 +12,96 @@
window.KorAP = window.KorAP || {};
//]]></script>
+
<script data-main="plugin-serverdemo.js" src="../js/lib/require.js" async="async"></script>
</head>
- <body>
+ <body class="no-js"
+ data-korap-url="/"
+ data-hint-foundries="base,corenlp,dereko,malt,marmot,opennlp,spacy,tt"
+ itemscope
+ itemtype="http://schema.org/WebApplication">
<p>Start the demo server with <code>morbo -l 'http://*:3003' t/server/plugin.pl</code> and open <a href="http://localhost:3003/demo/plugin-server.html"><code>this website</code></a>.</p>
+<div id="kalamar-bg"></div>
+
+
+
+
+
+
+
+<aside tabindex="0" class=" invisible off">
+ <div>
+
+ </div>
+</aside>
+
+
+
+
+<nav class="navbar">
+ <a class="logo" data-testid="home" href="/instance/test"><h1><span>KorAP - Korpusanalyseplattform der nächsten Generation</span></h1></a>
+
+ <div class="navbar-group">
+ <h3 class="nav-link"><a class="link-guided-tour" data-testid="tour-start">Tour</a></h3><h3 class="nav-link"><a href="/instance/test/doc" class="tutorial" id="view-tutorial">Hilfe</a></h3>
+
+
+
+
+ <nav class="dropdown">
+ <div class="dropdown-btn login"></div>
+ <div class="dropdown-content dropdown-content--right">
+ <form accept-charset="utf-8" action="/instance/test/user/login" class="login" method="POST">
+ <legend><span>Anmelden</span></legend>
+ <input name="csrf_token" type="hidden" value="0a3feea1e8b1400421d18783b4aba1950a388215">
+ <input data-testid="handle-or-email" name="handle_or_email" placeholder="Benutzername oder Email" type="text">
+ <input name="fwd" type="hidden" value="/instance/test">
+ <input data-testid="pwd" name="pwd" placeholder="Passwort" type="password">
+ <button type="submit" class="btn-login" data-testid="login-submit"><span>Los!</span></button>
+</form> <p>Anmeldung mit einem registrierten <a href="https://perso.ids-mannheim.de/registration/" style="white-space: nowrap">Cosmas-II</a>-Konto</p>
+ </div>
+ </nav>
+
+ </div>
+
+ <div class="burger-icon"></div>
+</nav>
+
+
<header>
<form autocomplete="off" action="/kalamar" id="searchform">
<div id="searchbar">
- <input type="search"
- placeholder="Find ..."
- name="q"
- id="q-field"
- value="abcdefghijklmnopqrstuvwxyz"
- autofocus="autofocus" />
- <button id="qsubmit" type="submit"><span>Go</span></button>
+ <input autocapitalize="off"
+ autocomplete="off"
+ autocorrect="off"
+ autofocus="autofocus"
+ id="q-field"
+ name="q"
+ placeholder="Finde ..."
+ spellcheck="false"
+ value="abcdefghijklmnopqrstuvwxyz"
+ type="search">
+ <button type="submit" id="qsubmit" title="Los!"><span>Los!</span></button>
<!-- <i class="fa fa-arrow-circle-down show-hint" onclick="hint.popUp()"></i> -->
</div>
- <!-- Search in the following virtual corpus -->
- <div id="vc-view"></div>
- in
- <input id="show" name="show" type="hidden" />
- <!--<input id="collection-name" name="collection-name" type="hidden"> -->
- <input id="cq" name="cq" type="text" value="">
- with <span class="menu select">
- <select name="ql" id="ql-field">
- <option value="poliqarp">Poliqarp</option>
- <option value="cosmas2">Cosmas II</option>
- <option value="annis">Annis</option>
- <option value="cql">CQL v1.2</option>
- </select>
- </span>
- <div class="button right">
- <input type="checkbox"
- value="1"
- name="cutoff"
- class="checkbox"
- id="q-cutoff-field" />
- <label for="q-cutoff-field"><span id="glimpse"></span>Glimpse</label>
- <!-- Todo: open tutorial - like openTutorial() -->
- <a href="doc/faq" tabindex="-1" class="question"><span>Question</span></a>
- <a href="tutorial.html" title="Tutorial" class="tutorial" id="view-tutorial"><span>Tutorial</span></a>
- </div>
- </form>
- </header>
+ <!-- Search in the following virtual corpus -->
+ <div id="vc-view"></div>
+ in
+ <input id="cq" name="cq" type="text">
+
+ mit
+ <span class="select">
+ <select id="ql-field" name="ql"><option value="poliqarp">Poliqarp</option><option value="cosmas2">Cosmas II</option><option value="annis">Annis QL</option><option value="cqp">CQP (neu)</option><option value="cql">CQL v1.2</option><option value="fcsql">FCSQL</option></select>
+ </span>
+ <div class="button right">
+ <input checked class="checkbox" id="q-cutoff-field" name="cutoff" type="checkbox" value="1">
+ <label for="q-cutoff-field" title="Zeige nur die ersten Treffer in beliebiger Reihenfolge"><span id="glimpse"></span>Glimpse</label>
+ </div>
+ <div class="clear"></div>
+ </form>
+</header>
<main>
<script>
@@ -155,5 +199,16 @@
</ol>
</div>
</main>
+
+<footer>
+ <nav>
+ <div><a href="http://www.ids-mannheim.de/kl/projekte/korap/">Über KorAP</a></div><div><a href="/instance/test/doc//faq#howToCite">Zitierhilfe</a></div><div><a href="http://www.ids-mannheim.de/allgemein/impressum.html">Impressum</a></div><div><a href="http://www.ids-mannheim.de/allgemein/datenschutz/">Datenschutz</a></div><div><a class="embedded-link" href="/instance/test/doc/korap/kalamar">V 0.64.0</a></div>
+ </nav>
+ <div id="logos">
+ <a href="http://www.ids-mannheim.de/" class="logo"><p id="ids-logo"><span>Entwickelt am Leibniz-Institut für Deutsche Sprache (IDS)</span></p></a>
+ </div>
+</footer>
+
+
</body>
</html>
diff --git a/dev/demo/plugin-serverdemo.js b/dev/demo/plugin-serverdemo.js
index 6540591..406ea2b 100644
--- a/dev/demo/plugin-serverdemo.js
+++ b/dev/demo/plugin-serverdemo.js
@@ -17,6 +17,7 @@
'classes' : [ 'button-icon', 'plugin', 'export' ],
'onClick' : {
'action' : 'addWidget',
+ 'active' : true,
'template' : 'http://localhost:3003/demo/plugin-client.html',
"permissions": [
"forms",
@@ -51,10 +52,28 @@
]
},
}]
+},{
+ "name": "Koral-Mapper",
+ "desc": "Mapping Service",
+ "embed": [
+ {
+ "classes": [
+ "termmapper"
+ ],
+ "onClick" : {
+ "action" : "setWidget",
+ "active" : false,
+ "template" : "http://localhost:5725",
+ "permissions": ["forms", "scripts", "downloads"]
+ },
+ "panel": "query",
+ "title": "Map"
+ }
+ ]
}];
-define(['plugin/server', 'lib/domReady', 'app/en', 'init'], function(pluginClass, domReady) {
+define(['plugin/server', 'pipe', 'lib/domReady', 'app/en', 'init'], function(pluginClass, pipeClass, domReady) {
domReady(function (event) {
if (KorAP.Plugin === undefined) {
// Load Plugin Server first
@@ -62,6 +81,16 @@
// Add services container to head
document.head.appendChild(KorAP.Plugin.element());
};
+
+ if (KorAP.Pipe === undefined) {
+ KorAP.Pipe = pipeClass.create("pipe");
+ let searchF = document.getElementById("searchform");
+ searchF.appendChild(KorAP.Pipe.element());
+
+ KorAP.ResponsePipe = pipeClass.create("response-pipe");
+ searchF.appendChild(KorAP.ResponsePipe.element());
+ };
+
KorAP.Plugins.forEach(i => KorAP.Plugin.register(i));
});
});