Add toggle button to buttongroup
Change-Id: I8b65001ca0e39dc4a04d19ee1e8a90fdb414b35f
diff --git a/dev/demo/panel.html b/dev/demo/panel.html
index 35f78e7..5782365 100644
--- a/dev/demo/panel.html
+++ b/dev/demo/panel.html
@@ -18,21 +18,23 @@
});
-require(['buttongroup', 'panel', 'view/result/koralquery'], function (btnClass, panelClass, kqClass) {
+require(['buttongroup', 'panel', 'view/result/koralquery', 'state'], function (btnClass, panelClass, kqClass, stateClass) {
KorAP.koralQuery = {
'@type' : "https://beispiel",
'key' : 'Cool'
};
- var panel = panelClass.create();
- var actions = panel.actions;
+ let panel = panelClass.create();
+ let actions = panel.actions;
+ // Add simple button
actions.add('Meta',['meta'], function () {
console.log(this.button.classList.contains('meta'));
view = kqClass.create();
panel.add(view);
});
+ // Add list button
var list = actions.addList('More', ['list']);
list.readItems([
@@ -40,6 +42,23 @@
['very cool', 'veryCool', function (e, action) { console.log('very cool') }]
]);
+ // Add toggle button
+ let s = stateClass.create(true);
+
+ let bgChange = {
+ setState : function (val) {
+ if (val) {
+ document.body.style.backgroundColor = 'red';
+ } else {
+ document.body.style.backgroundColor = 'transparent';
+ }
+ }
+ };
+
+ s.associate(bgChange);
+
+ actions.addToggle('Background',['bg'], s);
+
document.getElementById('mainButton').appendChild(panel.element());
});