Hype LayoutKit (Layout Extension)

Extension Project
1

00000
00000.png2000×1200 118 KB

This extension is for situations that require a dynamic approach to the rules of your responsive design setup. It allows you to go way beyond the setup you can create in the regular frontend. Hype LayoutHelper offers a callback you can us to feed Hype a specific layout based on your own rules and settings (including MediaQueries written in JS). It now also offers an option to set elements or your document fullscreen.

Demonstration:
https://playground.maxziebell.de/Hype/LayoutKit/

Runtime:
HypeLayoutKit.js
HypeLayoutKit.min.js

Updates:
1.0 Initial release with simple example
1.1 Refactored name, added a "Singleton" check
1.2 Added fullScreen (Hype) and fullScreenElement (Hype, Window)

8 Likes
2

Also see @h_classen’s code that can be used in conjunction for this for a smart layout chooser.

(side note: have you thought of putting these on GitHub?)

1 Like
3

↑ look at project
I’ll look into Github. Got stuck on Subversion and then time passed so fast :wink: …I’ll refactor the code first to LayoutHelper as that can include more then only MediaQueries etc.

1 Like
4

↑ look at project
Version 1.2
Added fullScreen (Hype) and fullScreenElement (Hype, Window)

1 Like
5

when triggering fullScreen(Hype) in your playground and then esc to switch back, the layout of the hypescene does not snap back … (65.0.3325.181 chrome Mac 64-Bit)

this may be a hypeissue or HypeLayoutKit-Usage-Issue

sunny day :slight_smile:

6

Thanks will look into it. Also sitting in a cafe and enjoying German spring, finally. Probably just needs a relay out if necessary.

7

finally: spring in germany :slight_smile: it took some time this year. my wife and daughter are actually in Berlin to run the halfmarathon. so you can cheer on tomorrow :wink:

2 Likes
8

Should be fixed, please retest fullscreen on your setup.

1 Like
9

:slight_smile:

10

Hi @MaxZieb,

This is awesome (if I understand correctly) ...

Can you kindly suggest how I can use the Hype LayoutKit to change the Flexible Layout from this setting:

Screen Shot 2020-11-13 at 1.29.10 PM

to this setting?

Screen Shot 2020-11-13 at 1.29.39 PM

Thanks a million!

HappyHyper

11

Layout kit ... was an unfortunate naming and I don’t do the “kit” approach anymore. Neither the less, the code reacts to the layout request and you can change layouts based on rules in JS. Changing pins on the fly is not possible but switching layouts is. You can always calculate positions on layout requests manually. Keep in mind that parent container that have a stretch applied keep the coordinate system but it “stretches”.

12

Greet! How to initialize this script? Just give a link to it on the page or do you need to add something else in the code of the HTML page?