GiftBox-3D / GiftBox.init.js
GiftBox.init.js
Raw
document.addEventListener("DOMContentLoaded", function() {
	
    var elementID = 'GiftBox3D';

    var script = document.getElementById(elementID);

    var par = script.parentNode;
    script.parentNode.style.overflow = 'hidden';

    var iframe = document.createElement('iframe');
    iframe.src = "https://dmitryspace.com/3d-gift/"
              + "?color1="    + encodeURIComponent(typeof script.dataset.color1 !== "undefined" ? script.dataset.color1 : "")
	      + "&color2="    + encodeURIComponent(typeof script.dataset.color2 !== "undefined" ? script.dataset.color2 : "")
	      + "&text="      + encodeURIComponent(typeof script.dataset.text !== "undefined" ? script.dataset.text : "")
	      + "&colorText=" + encodeURIComponent(typeof script.dataset.textColor !== "undefined" ? script.dataset.textColor : "")
	      + "&fontSize="  + encodeURIComponent(typeof script.dataset.fontSize !== "undefined" ? script.dataset.fontSize : "")
              + "&background="+ encodeURIComponent(typeof script.dataset.background !== "undefined" ? script.dataset.background : "")
		    + "&loc=" + encodeURIComponent(document.location.href);
    iframe.width = '100%';
    iframe.height = '0';
    iframe.style.border = 'none';
    iframe.style.overflow = 'hidden';
    iframe.style.pointerEvents = "none";
    iframe.setAttribute("scrolling", "no");
    iframe.id = elementID;
    iframe.addEventListener('load', e => {GiftBox3D_onload(e.target)}, true);
    par.insertBefore(iframe, script);
    par.removeChild( script )
});

function GiftBox3D_onload(iframe) {
  iframe.height = iframe.getBoundingClientRect().width;
  window.addEventListener('mousemove', e => {GiftBox3D_postMessage( GiftBox3D_getCoords(e, iframe), iframe)});
  window.addEventListener('touchmove', e => {GiftBox3D_postMessage( GiftBox3D_getCoords(e, iframe), iframe)});
}
function GiftBox3D_getCoords( event, iframe ) {
    let mx, my;
    if (event.type=='touchmove') {
      mx = event.touches[0].pageX;
      my = event.touches[0].pageY;
    } else {
      mx = event.clientX;
      my = event.clientY;
    } 
    mx = mx > window.innerWidth  ? mx-window.scrollX : mx;
    my = my > window.innerHeight ? my-window.scrollY  : my;
    return {
      mx: mx,
      my: my,
      cx: window.innerWidth,
      cy: window.innerHeight,
      iframeLeft: iframe.getBoundingClientRect().left,
      iframeTop: iframe.getBoundingClientRect().top,
      iframeHeigth: iframe.getBoundingClientRect().height,
      iframeWidth: iframe.getBoundingClientRect().width,
    };
} 
function GiftBox3D_postMessage( message, iframe ) {
    iframe.contentWindow.postMessage(message, "*");
}