Abstract out platform-specific popup UI JavaScript

2 files changed, 45 insertions, 21 deletions

diff --git a/platform/safari/vapi-common.js b/platform/safari/vapi-common.js
index 406f49d..ecfb046 100644
--- a/platform/safari/vapi-common.js
+++ b/platform/safari/vapi-common.js
@@ -104,27 +104,6 @@ vAPI.i18n = function(s) {
     return this.i18nData[s] || s;
 };
 
-/******************************************************************************/
-
-// update popover size to its content
-if (safari.self.identifier === 'popover') {
-    var whenSizeChanges = function(d,l){(function(a,d){function h(a,b){a.addEventListener("scroll",b)}function e(){k.style.width=b.offsetWidth+10+"px";k.style.height=b.offsetHeight+10+"px";b.scrollLeft=b.scrollWidth;b.scrollTop=b.scrollHeight;c.scrollLeft=c.scrollWidth;c.scrollTop=c.scrollHeight;f=a.offsetWidth;g=a.offsetHeight}a.b=d;a.a=document.createElement("div");a.a.style.cssText="position:absolute;left:0;top:0;right:0;bottom:0;overflow:scroll;z-index:-1;visibility:hidden";a.a.innerHTML='<div style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:scroll;z-index:-1;visibility:hidden"><div style="position:absolute;left:0;top:0;"></div></div><div style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:scroll;z-index:-1;visibility:hidden"><div style="position:absolute;left:0;top:0;width:200%;height:200%"></div></div>';
-a.appendChild(a.a);var b=a.a.childNodes[0],k=b.childNodes[0],c=a.a.childNodes[1],f,g;e();h(b,function(){(a.offsetWidth>f||a.offsetHeight>g)&&a.b();e()});h(c,function(){(a.offsetWidth<f||a.offsetHeight<g)&&a.b();e()})})(d,l)};
-    var onLoaded = function() {
-        var body = document.body, popover = safari.self;
-        var updateSize = function() {
-                popover.width = body.offsetWidth;
-                popover.height = body.offsetHeight;
-        };
-	body.style.position = "relative"; // Necessary for size change detection
-	whenSizeChanges(body, updateSize);
-	updateSize();
-    };
-    window.addEventListener('load', onLoaded);
-}
-
-/******************************************************************************/
-
 })();
 
 /******************************************************************************/
diff --git a/platform/safari/vapi-popup.js b/platform/safari/vapi-popup.js
new file mode 100644
index 0000000..1bf7e33
--- /dev/null
+++ b/platform/safari/vapi-popup.js
@@ -0,0 +1,45 @@
+var whenSizeChanges = function(elm, callback) {
+    var reset = function() {
+        k.style.width = grow.offsetWidth + 10 + "px";
+        k.style.height = grow.offsetHeight + 10 + "px";
+        grow.scrollLeft = grow.scrollWidth;
+        grow.scrollTop = grow.scrollHeight;
+        shrink.scrollLeft = shrink.scrollWidth;
+        shrink.scrollTop = shrink.scrollHeight;
+        w = elm.offsetWidth;
+        h = elm.offsetHeight;
+    }
+    var aux = document.createElement("div");
+    aux.style.cssText = "position:absolute;left:0;top:0;right:0;bottom:0;overflow:scroll;z-index:-1;visibility:hidden";
+    aux.innerHTML = '<div style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:scroll;z-index:-1;visibility:hidden">\
+<div style="position:absolute;left:0;top:0;"></div>\
+</div>\
+<div style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:scroll;z-index:-1;visibility:hidden">\
+<div style="position:absolute;left:0;top:0;width:200%;height:200%"></div>\
+</div>';
+    elm.appendChild(aux);
+    var grow = aux.childNodes[0],
+        k = grow.childNodes[0],
+        shrink = aux.childNodes[1];
+    var w, h;
+    reset();
+    grow.addEventListener("scroll", function() {
+        (elm.offsetWidth > w || elm.offsetHeight > h) && callback();
+        reset();
+    });
+    shrink.addEventListener("scroll", function() {
+        (elm.offsetWidth < w || elm.offsetHeight < h) && callback();
+        reset();
+    });
+};
+var onLoaded = function() {
+    var body = document.body, popover = safari.self;
+    var updateSize = function() {
+        popover.width = body.offsetWidth;
+        popover.height = body.offsetHeight;
+    };
+    updateSize();
+    body.style.position = "relative"; // Necessary for size change detection
+    whenSizeChanges(body, updateSize);
+};
+window.addEventListener('load', onLoaded);