HypeAutoHeight

Here is an extension based on @h_classen great work/code on proportional scaling and the recurring need for proportional scaling in Hype. I used a Unicode character (↕️) and turned the logic on its head. Meaning for scenes/layouts you want it to work you add the character. The setup and condition can be easily removed/tweak or enabled for all scenes if you don't like that logic. Another thing I did is to move the code into the Hype document itself, so it should work out-of-the-box in settings, this approach is most needed like WordPress.

---

Content Delivery Network (CDN)

The latest version of HypeAutoHeight can be linked into your project using the following in the head section of your project:

<script src="https://cdn.jsdelivr.net/gh/worldoptimizer/HypeAutoHeight/HypeAutoHeight.min.js"></script>

Optionally, you can also link a SRI version or specific releases. Read more about that on the JsDelivr (CDN) page for this extension at https://www.jsdelivr.com/package/gh/worldoptimizer/HypeAutoHeight.

Learn how to use the latest extension version and how to combine extensions into one file at https://github.com/worldoptimizer/HypeCookBook/wiki/Including-external-files-and-Hype-extensions.

---

Changing the rule to determine if proportional layout should be applied (optional)

As mentioned, you can use another icon if you don't like the one I set. The rule determining if proportional scaling should be applied is defined in the function installAutoHeightIfNecessary. In there you will find a test of sorts and if the test return true it enables proportional scaling. Look for this code:

// Your conditions to enable autoHeight 
hypeDocument.enableAutoHeight = function(hypeDocument, element, event){
	//  Rule goes here
}

Here are some alternative rules

To change the icon to let's say ↧ just replace the existing rule with the following instead:

// return true to enable: currently its scenes or layouts containing (↧)
return hypeDocument.currentSceneName().includes('↧') || hypeDocument.currentLayoutName().includes('↧'); 

And while we are at it… here is a replacement to always enable it:

// return true to enable
return true; 

And finally a replacement to enable in a reverse logic. So, scenes or layouts containing the icon will not be resizing proportionally, but the rest will:

// return false to disable: currently its scenes or layouts containing (✖️)
return !(hypeDocument.currentSceneName().includes('✖️') || hypeDocument.currentLayoutName().includes('✖️'));