Exporting and embedding hype in other HTML

10

you did the script load in a html-element named 'header', but that is the wrong place. it has to resist in the 'head-section' instead OR ensure that the script is loaded BEFORE the Hypedoc loads ....

////////
anyway, the script does not exactly fit your needs because a scaled element will keep its dimensions. this results in a white space below here...

so i changed the script to fit in your environment.
now it scales the hypescene and set new width and heigth to the hypedocument <- all in conjunction to the width of the parentNode (Wrapper-Element) of the Hype-Div and the current LayoutRatio

you may give it a try:

	<script>
  function layoutRequest(hypeDocument, element, event) {
  
   	var hypeDocEl = document.getElementById(hypeDocument.documentId());
   	var sceneElement = document.getElementById(hypeDocument.currentSceneId());

    //returns [{name: xxx; height:xxx; width:xxx; breakpoint: xxx}, ...]
    var _layouts = hypeDocument.layoutsForSceneNamed(hypeDocument.currentSceneName());
    //current Layoutname
    var layoutName = hypeDocument.currentLayoutName();

    //get data for current Layout -> {name: xxx; height:xxx; width:xxx; breakpoint: xxx}
    var res = null;

    for (var i = 0; i < _layouts.length; i++) {
      var Obj = _layouts[i];
      if (Obj.name === layoutName) {
        res = Obj;
        break;
      }
    }


    if (res) {
	var parentNodeWidth =  hypeDocEl.parentNode.getBoundingClientRect().width;
	
	var baseLayoutWidth = res['width'];
	var baseLayoutHeight = res['height'];
	
	var scaleFactor = (parentNodeWidth/baseLayoutWidth);
	
	sceneElement.style.transformOrigin = "left top";
	sceneElement.style.WebkitTransformOrigin = "left top";
	sceneElement.style.msTransformOrigin = "left top";

	sceneElement.style.transform = "scaleX(" + scaleFactor +  ") scaleY(" + scaleFactor + ")";
	sceneElement.style.WebkitTransform = "scaleX(" + scaleFactor +  ") scaleY(" + scaleFactor + ")";
	sceneElement.style.msTransform = "scaleX(" + scaleFactor +  ") scaleY(" + scaleFactor + ")";
	
	hypeDocEl.style.setProperty('width', parentNodeWidth + 'px');
	hypeDocEl.style.setProperty('height', (baseLayoutHeight * scaleFactor) + 'px')
    }


hypeDocument.relayoutIfNecessary()

    return false

  }

if ("HYPE_eventListeners" in window === false) {
  window.HYPE_eventListeners = Array();
}
window.HYPE_eventListeners.push({
  "type": "HypeLayoutRequest",
  "callback": layoutRequest
}); 
</script>
1 Like