Embed iframe in div widget context
Change-Id: I69769e180999f66f8d262fe6016d7ae35f76f631
diff --git a/dev/demo/plugin-client.html b/dev/demo/plugin-client.html
index 5189e87..2dac29b 100644
--- a/dev/demo/plugin-client.html
+++ b/dev/demo/plugin-client.html
@@ -38,5 +38,6 @@
<li><a onclick="KorAPlugin.resize()">Resize</a></li>
<li><a onclick="flood()">Flood!</a></li>
</ul>
+ <p style="width: 2000px">------------------------------------------------------------------------------------------------------------------------</p>
</body>
</html>
diff --git a/dev/demo/plugin-server.html b/dev/demo/plugin-server.html
index 21362fd..c032c33 100644
--- a/dev/demo/plugin-server.html
+++ b/dev/demo/plugin-server.html
@@ -12,7 +12,14 @@
<body>
<p>Start the demo server with <code>morbo -l 'http://*:3003' t/plugin-server.pl</code> and open <a href="http://localhost:3003/demo/plugin-server.html"><code>this website</code></a>.</p>
<main>
- <div id="container"></div>
+ <div id="search">
+ <ol>
+ <li class="active">
+ <div id="container"></div>
+ <a onclick="KorAP.Plugin.addWidget(document.getElementById('container'), 'http://localhost:3003/demo/plugin-client.html')">Open widget</a>
+ </li>
+ </ol>
+ </div>
</main>
</body>
</html>
diff --git a/dev/demo/plugin-serverdemo.js b/dev/demo/plugin-serverdemo.js
index 563f302..d5f07f8 100644
--- a/dev/demo/plugin-serverdemo.js
+++ b/dev/demo/plugin-serverdemo.js
@@ -7,12 +7,6 @@
define(['app/en','plugin/server','lib/domReady','init','hint/foundries/cnx'], function (lang, pluginClass, domReady) {
domReady(function () {
- var p = pluginClass.create();
-
- // Open widget!
- p.addWidget(
- document.getElementById('container'),
- 'http://localhost:3003/demo/plugin-client.html'
- );
+ KorAP.Plugin = pluginClass.create();
});
});
diff --git a/dev/js/src/plugin/widget.js b/dev/js/src/plugin/widget.js
index 7e56603..1fe417a 100644
--- a/dev/js/src/plugin/widget.js
+++ b/dev/js/src/plugin/widget.js
@@ -10,6 +10,10 @@
define(["util"], function () {
"use strict";
+ // Localization values
+ const loc = KorAP.Locale;
+ loc.CLOSE = loc.CLOSE || 'Close';
+
return {
/**
@@ -34,23 +38,50 @@
if (this._element)
return this._element;
+ var div = document.createElement('div');
+ div.classList.add('widget');
+
// Spawn new iframe
- var i = document.createElement('iframe');
+ var i = div.addE('iframe');
i.setAttribute('allowTransparency',"true");
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;
+ this._iframe = i;
- return i;
+ var ul = div.addE('ul');
+ ul.classList.add('action','right');
+
+ // Add close button
+ var close = ul.addE('li');
+ close.addE('span').addT(loc.CLOSE);
+ close.classList.add('close');
+ close.setAttribute('title', loc.CLOSE);
+
+ // Close match
+ close.addEventListener('click', function (e) {
+ e.halt();
+ this.shutdown()
+ }.bind(this));
+
+ this._element = div;
+
+ return div;
+ },
+
+ // Return iframe of widget
+ iframe : function () {
+ if (this._iframe)
+ return this._iframe;
+ this.element();
+ return this._iframe;
},
// Resize iframe
resize : function (data) {
- this._element.style.height = data.height + 'px';
+ this.iframe().style.height = data.height + 'px';
},
// Shutdown suspicious iframe
diff --git a/dev/scss/main/plugin.scss b/dev/scss/main/plugin.scss
index 1a13ef6..6b2b715 100644
--- a/dev/scss/main/plugin.scss
+++ b/dev/scss/main/plugin.scss
@@ -1,5 +1,13 @@
-iframe.widget {
- box-sizing: border-box;
- margin: 0;
- padding: 0;
+@import "../util";
+
+div.widget {
+ margin-right: $right-match-distance;
+
+ > iframe {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ width: 100%;
+ overflow-x: auto;
+ }
}
\ No newline at end of file