Version 5.0.6
This commit is contained in:
1 parent
a3a4a9ccbd
commit
b89858b2ff
1214 files changed
+92828
-14859
No files matched your search
@@ -5,13 +5,15 @@
|
||||
( function () {
|
||||
"use strict";
|
||||
|
||||
var _origin;
|
||||
var _div;
|
||||
var _posting = false;
|
||||
var _timer;
|
||||
var _timeout = 200; //ms
|
||||
var _embedId = '';
|
||||
var _failSafe = null;
|
||||
let _origin;
|
||||
let _div;
|
||||
let _embedId = '';
|
||||
let _failSafe = null;
|
||||
|
||||
/**
|
||||
* @type {ResizeObserver}
|
||||
*/
|
||||
let _ro;
|
||||
|
||||
/**
|
||||
* Init method, called when the document is ready
|
||||
@@ -26,15 +28,10 @@
|
||||
|
||||
// Work out our URL
|
||||
_div = ips.utils.get('ipsEmbed');
|
||||
var url = ips.utils.parseURL( window.location );
|
||||
|
||||
if( url.protocol == '' || url.protocol == ':' ){
|
||||
utils.log( url );
|
||||
url.protocol = window.location.protocol;
|
||||
}
|
||||
const url = new URL(window.location.href);
|
||||
|
||||
// Set our origin
|
||||
_origin = url.protocol + '//' + url.host;
|
||||
_origin = url.origin;
|
||||
ips.utils.log( "Origin in loader is " + _origin );
|
||||
|
||||
// Hide the content
|
||||
@@ -68,68 +65,66 @@
|
||||
*
|
||||
* @returns {void}
|
||||
*/
|
||||
function startTimeout() {
|
||||
function createResizeObserver() {
|
||||
ips.utils.log("Creating resize observer for external embed...");
|
||||
let debounceLastCall=0, debounceTimeout, debounceInterval=200, sentMessage=false;
|
||||
const debouncePostMessage = (height) => {
|
||||
clearTimeout(debounceTimeout);
|
||||
const delta = Date.now() - debounceLastCall - debounceInterval;
|
||||
debounceLastCall = Date.now();
|
||||
debounceTimeout = setTimeout(
|
||||
() => {
|
||||
if (!sentMessage) {
|
||||
sentMessage = true;
|
||||
ips.utils.fadeIn(_div);
|
||||
}
|
||||
_div.parentNode.className = '';
|
||||
_postMessage('height', {height})
|
||||
},
|
||||
Math.max(0, -delta)
|
||||
);
|
||||
}
|
||||
|
||||
var currentSize = 0;
|
||||
var repeats = 0;
|
||||
|
||||
ips.utils.log("Starting timeout...");
|
||||
|
||||
// Main loop
|
||||
_timer = setInterval( function () {
|
||||
// What we want to do here is make the loading process more pleasant and less jumpy.
|
||||
// To do that, we'll make the embed invisible until we've fetched the same height 6 times
|
||||
// in a row (approx 1 second). If that happens we'll assume it has finished loading, and then
|
||||
// we'll fade it in and start sending the recorded height to the parent for resizing.
|
||||
|
||||
var height = ips.utils.getObjHeight( _div );
|
||||
|
||||
if( !height )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
ips.utils.log("Determined height as " + height + ' for embed ID ' + _embedId );
|
||||
|
||||
// If we HAVEN'T started posting our size
|
||||
if( !_posting ){
|
||||
if( height == currentSize ){
|
||||
repeats++;
|
||||
} else {
|
||||
// The height has changed, so reset our repeat counter
|
||||
repeats = 0;
|
||||
}
|
||||
|
||||
if( repeats == 6 ){
|
||||
_posting = true;
|
||||
ips.utils.fadeIn( _div );
|
||||
_ro = new ResizeObserver((entries) => {
|
||||
for (const entry of entries) {
|
||||
if (entry.target === _div) {
|
||||
if (typeof entry.borderBoxSize?.[0]?.blockSize === 'number') {
|
||||
debouncePostMessage(entry.borderBoxSize[0].blockSize + 10);
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
currentSize = height;
|
||||
_ro.observe(
|
||||
_div,
|
||||
{box: 'border-box'}
|
||||
);
|
||||
|
||||
if( _posting ){
|
||||
_div.parentNode.className = '';
|
||||
// resize observers usually call the callback right when .observe() is called, but just in case we manually send the height if there hasn't been one
|
||||
setTimeout(() => {
|
||||
// still hasn't been called?
|
||||
if (debounceLastCall === 0) {
|
||||
const height = ips.utils.getObjHeight(_div);
|
||||
ips.utils.log("Determined height as " + height + ' for external embed ID ' + _embedId );
|
||||
|
||||
_postMessage('height', {
|
||||
height: ( height + 10 )
|
||||
});
|
||||
// getting the height can force a reflow, so just double check it stil hasn't been called
|
||||
if (debounceLastCall === 0) {
|
||||
debounceLastCall = Date.now(); // do this outside the last call
|
||||
debouncePostMessage(height);
|
||||
}
|
||||
}
|
||||
}, _timeout);
|
||||
};
|
||||
}, 20);
|
||||
}
|
||||
|
||||
/**
|
||||
* Posts a message to the iframe
|
||||
*
|
||||
* @param {number} [pageNo] Page number to load
|
||||
* @returns {void}
|
||||
*/
|
||||
var _postMessage = function (method, obj) {
|
||||
// Send to parent window
|
||||
window.top.postMessage( JSON.stringify( ips.utils.extendObj( obj || {}, {
|
||||
method: method,
|
||||
embedId: _embedId
|
||||
} ) ), _origin );
|
||||
window.top.postMessage(JSON.stringify( {...obj, method, embedId: _embedId}), _origin);
|
||||
};
|
||||
|
||||
/**
|
||||
@@ -142,16 +137,16 @@
|
||||
* @param {object} data Data from the iframe
|
||||
* @returns {void}
|
||||
*/
|
||||
ready: function (data) {
|
||||
ready(data) {
|
||||
_embedId = data.embedId;
|
||||
_postMessage('ok');
|
||||
|
||||
startTimeout();
|
||||
createResizeObserver();
|
||||
clearInterval( _failSafe ); // Stop our emergency timer
|
||||
},
|
||||
|
||||
stop: function (data) {
|
||||
clearInterval( _timer );
|
||||
stop() {
|
||||
_ro?.disconnect();
|
||||
clearInterval( _failSafe ); // Stop our emergency timer
|
||||
eventHandler.off( window, 'message', windowMessage );
|
||||
}
|
||||
|
||||
Reference in new issue
Block a user