Adopt panel system for plugins
Change-Id: I54f520382fb4a26c05ccb2cf0cd3cb48737933ac
diff --git a/dev/js/src/plugin/server.js b/dev/js/src/plugin/server.js
index c8df357..934f6f3 100644
--- a/dev/js/src/plugin/server.js
+++ b/dev/js/src/plugin/server.js
@@ -37,8 +37,10 @@
// TODO:
// It may be useful to establish a watcher that pings
- // all widgets every second to see if it is still alive.
+ // all widgets every second to see if it is still alive,
+ // otherwise kill
+ // Load Plugin server
return {
/**
@@ -99,6 +101,7 @@
throw new Error("Embedding of plugin is no list");
// Embed all embeddings of the plugin
+ var that = this;
for (var i in obj["embed"]) {
var embed = obj["embed"][i];
@@ -118,19 +121,20 @@
// The embedding will open a widget
if (!onClick["action"] || onClick["action"] == "addWidget") {
- var panel = document.getElementById(panel);
- var that = this;
var cb = function (e) {
+ // "this" is bind to the panel
+
// Get the URL of the widget
- var url = onClick["template"]; // that._interpolateURI(onClick["template"], this.match);
+ var url = onClick["template"];
+ // that._interpolateURI(onClick["template"], this.match);
// Add the widget to the panel
- var id = that.addWidget(panel, name, url);
+ var id = that.addWidget(this, name, url);
plugin["widgets"].push(id);
};
- buttons[pannel].push([title, embed["classes"], cb]);
+ buttons[panel].push([title, embed["classes"], cb]);
};
};
},
@@ -152,9 +156,9 @@
},
/**
- * Open a new widget as a child to a certain element
+ * Open a new widget in a certaoin panel
*/
- addWidget : function (element, name, src) {
+ addWidget : function (panel, name, src) {
// Is it the first widget?
if (!this._listener) {
@@ -185,12 +189,8 @@
widgets[id] = widget;
limits[id] = maxMessages;
- // Open widget in frontend
- // TODO:
- // Instead of an "element" this should probably be a 'panel' object!
- element.appendChild(
- widget.element()
- );
+ // Add widget to panel
+ panel.add(widget);
return id;
},
@@ -280,5 +280,5 @@
widgets = {};
this._removeListener();
}
- }
+ };
});
diff --git a/dev/js/src/plugin/widget.js b/dev/js/src/plugin/widget.js
index 338faa3..17c1f5e 100644
--- a/dev/js/src/plugin/widget.js
+++ b/dev/js/src/plugin/widget.js
@@ -2,25 +2,22 @@
* The plugin system is based
* on registered widgets (iframes) from
* foreign services.
- * The widget component represents a single iframe.
+ * The widget component represents a single iframe and is
+ * implemented as a view object.
*
* @author Nils Diewald
*/
-define(["util"], function () {
+define(["view","util"], function (viewClass) {
"use strict";
- // Localization values
- const loc = KorAP.Locale;
- loc.CLOSE = loc.CLOSE || 'Close';
-
return {
/**
* Create new widget
*/
create : function (name, src, id) {
- return Object.create(this)._init(name, src, id);
+ return Object.create(viewClass)._init(['widget']).upgradeTo(this)._init(name, src, id);
},
// Initialize widget
@@ -32,68 +29,46 @@
},
/**
- * The element of the widget
+ * The element of the widget as embedded in the view
*/
- element : function () {
+ show : function () {
- if (this._element)
- return this._element;
-
- var div = document.createElement('div');
- div.classList.add('widget');
+ if (this._show)
+ return this._show;
// Spawn new iframe
- var i = div.addE('iframe');
+ var i = document.createElement('iframe');
i.setAttribute('allowTransparency',"true");
i.setAttribute('frameborder', 0);
i.setAttribute('sandbox','allow-scripts');
i.style.height = '0px';
i.setAttribute('name', this.id);
i.setAttribute('src', this.src);
- this._iframe = i;
- var ul = div.addE('ul');
- ul.classList.add('action','right');
+ // Per default there should at least be a button
+ // for settings, if the plugin requires settings.
+ // Otherwise a button indicating this is a plugin
+ // is a nice idea as well.
- // Add close button
- var close = ul.addE('li');
- close.addE('span').addT(loc.CLOSE);
- close.classList.add('close');
- close.setAttribute('title', loc.CLOSE);
+ this.actions.add(
+ this.name, ['button-icon', 'plugin'], function (e) {
- // Add info button on plugin
- var plugin = ul.addE('li');
- plugin.addE('span').addT(this.name);
- plugin.classList.add('plugin');
- plugin.setAttribute('title', this.name);
-
- // Close match
- close.addEventListener('click', function (e) {
- e.halt();
- this.shutdown()
+ // Temporary
+ window.alert("Basic information about this plugin");
}.bind(this));
- this._element = div;
-
- return div;
- },
-
- // Return iframe of widget
- iframe : function () {
- if (this._iframe)
- return this._iframe;
- this.element();
- return this._iframe;
+ this._show = i;
+ return i;
},
// Resize iframe
resize : function (data) {
- this.iframe().style.height = data.height + 'px';
+ this.show().style.height = data.height + 'px';
},
// Shutdown suspicious iframe
shutdown : function () {
- this._element.parentNode.removeChild(this._element);
+ this.element().parentNode.removeChild(this.element());
}
}
});