Version 5.0.6
This commit is contained in:
Neo committed
1 parent
a3a4a9ccbd
commit
b89858b2ff
1214 files changed
+92828
-14859
No files matched your search
@@ -5,14 +5,17 @@
|
||||
( function () {
|
||||
"use strict";
|
||||
|
||||
var _origin;
|
||||
var _div;
|
||||
var _posting = false;
|
||||
var _timer;
|
||||
var _timeout = 200; //ms
|
||||
var _embedId = '';
|
||||
var _embedMaxWidth = null;
|
||||
var _initialHeight = 0;
|
||||
let _origin;
|
||||
let _div;
|
||||
let _embedId = '';
|
||||
let _initialHeight = 0;
|
||||
let _embedMaxWidth = null;
|
||||
let _currentHeight = null;
|
||||
|
||||
/**
|
||||
* @type {ResizeObserver}
|
||||
*/
|
||||
let _ro;
|
||||
|
||||
/**
|
||||
* Init method, called when the document is ready
|
||||
@@ -27,15 +30,10 @@
|
||||
|
||||
// Work out our URL
|
||||
_div = ips.utils.get('ipsEmbed');
|
||||
var url = ips.utils.parseURL( window.location );
|
||||
|
||||
if( url.protocol == '' || url.protocol == ':' ){
|
||||
ips.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
|
||||
@@ -61,11 +59,11 @@
|
||||
links[i].setAttribute('target', '_blank');
|
||||
}
|
||||
|
||||
startTimeout();
|
||||
};
|
||||
createResizeObserver();
|
||||
}
|
||||
|
||||
var _showEmbed = function () {
|
||||
document.body.className = document.body.className.replace('unloaded ', '');
|
||||
document.body.classList.remove('unloaded');
|
||||
ips.utils.fadeIn( _div );
|
||||
};
|
||||
|
||||
@@ -74,66 +72,79 @@
|
||||
*
|
||||
* @returns {void}
|
||||
*/
|
||||
var startTimeout = function () {
|
||||
function createResizeObserver() {
|
||||
ips.utils.log("Creating resize observer for internal 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(
|
||||
() => {
|
||||
_currentHeight = height;
|
||||
ips.utils.log("Determined height as " + height + ' for internal embed ID ' + _embedId );
|
||||
if (!sentMessage) {
|
||||
sentMessage = true;
|
||||
_showEmbed();
|
||||
}
|
||||
|
||||
var currentSize = 0;
|
||||
var repeats = 0;
|
||||
if( _embedMaxWidth !== null ){
|
||||
_postMessage('dims', {
|
||||
height: height,
|
||||
width: _embedMaxWidth
|
||||
});
|
||||
} else {
|
||||
_postMessage('height', {
|
||||
height: height
|
||||
});
|
||||
}
|
||||
},
|
||||
Math.max(0, -delta)
|
||||
);
|
||||
}
|
||||
|
||||
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 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;
|
||||
_showEmbed();
|
||||
_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 ){
|
||||
if( _embedMaxWidth !== null ){
|
||||
_postMessage('dims', {
|
||||
height: height,
|
||||
width: _embedMaxWidth
|
||||
});
|
||||
} else {
|
||||
_postMessage('height', {
|
||||
height: height
|
||||
});
|
||||
// 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);
|
||||
|
||||
// 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 + 10);
|
||||
}
|
||||
}
|
||||
}, _timeout);
|
||||
};
|
||||
}, 20);
|
||||
}
|
||||
|
||||
/**
|
||||
* Posts a message to the iframe
|
||||
*
|
||||
* @param {number} [pageNo] Page number to load
|
||||
* @param {string} method Method - will be encoded in the resulting message
|
||||
* @param {Object} [obj={}] Obj - Any other keys and properties to encode in the message object
|
||||
*
|
||||
* @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);
|
||||
};
|
||||
|
||||
/**
|
||||
@@ -178,17 +189,32 @@
|
||||
* @param {object} data Data from the iframe
|
||||
* @returns {void}
|
||||
*/
|
||||
ready: function (data) {
|
||||
ready(data) {
|
||||
_embedId = data.embedId;
|
||||
_postMessage('ok');
|
||||
|
||||
|
||||
// make sure this is sent back to the regular IPS js. The resize observer is created on init(), which is called on domcontentready, not on "ready" which indicates the host page is ready to accept messages
|
||||
if (_currentHeight !== null) {
|
||||
if( _embedMaxWidth !== null ){
|
||||
_postMessage('dims', {
|
||||
height: _currentHeight,
|
||||
width: _embedMaxWidth
|
||||
});
|
||||
} else {
|
||||
_postMessage('height', {
|
||||
height: _currentHeight
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
stop: function (data) {
|
||||
clearInterval( _timer );
|
||||
stop() {
|
||||
_ro?.disconnect();
|
||||
ips.eventHandler.off( window, 'message', windowMessage );
|
||||
},
|
||||
|
||||
responsiveState: function (data) {
|
||||
responsiveState(data) {
|
||||
if( data.currentIs === 'phone' ){
|
||||
document.body.className += ' ipsRichEmbed_phone';
|
||||
} else {
|
||||
@@ -213,7 +239,7 @@
|
||||
var method = pmData.method;
|
||||
} catch (err) {
|
||||
ips.utils.error("iframe: invalid data.");
|
||||
Debug.error(err.message)
|
||||
ips.utils.error(err.message)
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -223,7 +249,7 @@
|
||||
} else {
|
||||
ips.utils.log("Method " + method + " doesn't exist");
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
ips.utils.contentLoaded( window, function () {
|
||||
init();
|
||||
|
||||
Reference in new issue
Block a user