Fixed resizing of widgets
Change-Id: I566a28acbaa01cbcbf3a0adc55c3de879e2e8434
diff --git a/dev/demo/plugin-client.html b/dev/demo/plugin-client.html
index f426d8f..5189e87 100644
--- a/dev/demo/plugin-client.html
+++ b/dev/demo/plugin-client.html
@@ -2,16 +2,22 @@
<html>
<head>
<title>Plugin demo</title>
+
<link type="text/css" rel="stylesheet" href="/css/kalamar.css" />
<!-- load client javascript library -->
<script src="/js/src/plugin/client.js" data-server="http://localhost:3003/"></script>
<style>
body, html {
- padding: 0;
- margin: 0;
- box-sizing: border-box;
- border-width: 0;
+ padding: 0;
+ margin: 0;
+ box-sizing: border-box;
+ border-width: 0;
+ height: unset !important;
+ }
+
+ body {
+ min-height: unset !important;
}
</style>
</head>
diff --git a/dev/js/src/plugin/client.js b/dev/js/src/plugin/client.js
index 1c2af18..64f0bc4 100644
--- a/dev/js/src/plugin/client.js
+++ b/dev/js/src/plugin/client.js
@@ -44,7 +44,6 @@
_init : function () {
this.widgetID = window.name;
this.server = cs.getAttribute('data-server') || '*';
- this.resize();
return this;
},
@@ -72,19 +71,9 @@
* embedding KorAP
*/
resize : function () {
- var body = document.body;
-
- // recognize margin of first element
- // (don't know why in FF)
- var cs = getComputedStyle(body.children[0]);
-
- var offsetHeight = parseInt(body.offsetHeight) +
- parseInt(cs.getPropertyValue("margin-top")) +
- parseInt(cs.getPropertyValue("margin-bottom"));
-
this._sendMsg({
'action' : 'resize',
- 'height' : offsetHeight
+ 'height' : document.documentElement.scrollHeight
});
}
};
@@ -92,7 +81,7 @@
// Create plugin on windows load
window.onload = function () {
window.KorAPlugin = window.KorAPlugin || obj.create();
+ window.KorAPlugin.resize();
};
})();
-
diff --git a/dev/js/src/plugin/server.js b/dev/js/src/plugin/server.js
index d26de27..9401de6 100644
--- a/dev/js/src/plugin/server.js
+++ b/dev/js/src/plugin/server.js
@@ -11,18 +11,23 @@
define(["plugin/widget", "util"], function (widgetClass) {
"use strict";
- // TODO:
- // This is a counter to limit acceptable incoming messages
- // to hundred. For every message, this will be decreased
- // (down to 0), for every second this will be increased
- // (up to 100).
- var maxMessages = 100;
- var limits = {};
-
// Contains all widgets to address with
// messages to them
var widgets = {};
+ // This is a counter to limit acceptable incoming messages
+ // to a certain amount. For every message, this counter will
+ // be decreased (down to 0), for every second this will be
+ // increased (up to 100).
+ // Once a widget surpasses the limit, it will be killed
+ // and called suspicious.
+ var maxMessages = 100;
+ var limits = {};
+
+ // TODO:
+ // It may be useful to establish a watcher that pings
+ // all widgets every second to see if it is still alive.
+
return {
/**
@@ -38,6 +43,10 @@
*/
_init : function () {
+ // TODO:
+ // It is better to establish the listener
+ // only in case there is a widget
+
var that = this;
window.addEventListener("message", function (e) {
that._receiveMsg(e);
@@ -55,7 +64,7 @@
},
/**
- * Open a new widget on a certain element
+ * Open a new widget as a child to a certain element
*/
addWidget : function (element, src) {
@@ -75,7 +84,9 @@
);
},
- // Receive a call from an embedded iframe
+ // Receive a call from an embedded iframe.
+ // The handling needs to be very careful,
+ // as this can easily become a security nightmare.
_receiveMsg : function (e) {
// Get event data
var d = e.data;
@@ -87,9 +98,6 @@
// e.origin is probably set and okay - CHECK!
- // TODO:
- // Deal with mad iframes
-
// Get origin ID
var id = d["originID"];
@@ -106,6 +114,9 @@
// Check for message limits
if (limits[id]-- < 0) {
+
+ // Kill widget
+ KorAP.log(0, 'Suspicious action from ' + widget.src);
widget.shutdown();
delete limits[id];
delete widgets[id];
@@ -114,7 +125,6 @@
// Resize the iframe
if (d.action === 'resize') {
-
widget.resize(d);
}
diff --git a/dev/js/src/plugin/widget.js b/dev/js/src/plugin/widget.js
index cb4a33d..7e56603 100644
--- a/dev/js/src/plugin/widget.js
+++ b/dev/js/src/plugin/widget.js
@@ -19,6 +19,7 @@
return Object.create(this)._init(src, id);
},
+ // Initialize widget
_init : function (src, id) {
this.src = src;
this.id = id;
@@ -39,6 +40,7 @@
i.setAttribute('frameborder', 0);
i.setAttribute('sandbox','allow-scripts');
i.classList.add('widget');
+ i.style.height = '0px';
i.setAttribute('name', this.id);
i.setAttribute('src', this.src);
this._element = i;
@@ -53,7 +55,6 @@
// Shutdown suspicious iframe
shutdown : function () {
- KorAP.log(0, 'Suspicious action from ' + this.src);
this._element.parentNode.removeChild(this._element);
}
}
diff --git a/dev/scss/main/main.scss b/dev/scss/main/main.scss
index cfb3791..125839e 100644
--- a/dev/scss/main/main.scss
+++ b/dev/scss/main/main.scss
@@ -13,6 +13,7 @@
@import "intro"; // Intro page
@import "buttongroup"; // Button groups
@import "panel"; // Base panel system
+@import "plugin"; // Plugin mechanism
main {
margin: {
diff --git a/dev/scss/main/plugin.scss b/dev/scss/main/plugin.scss
new file mode 100644
index 0000000..1a13ef6
--- /dev/null
+++ b/dev/scss/main/plugin.scss
@@ -0,0 +1,5 @@
+iframe.widget {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
\ No newline at end of file