Copy link to clipboard
Copied
I have a menu designed in HTML5 using Animate 20.5.
It needs to be responsive 99% of the time, so I have "Make Responsive: Both" set in my Animate Publish Settings.
The menu runs on a webpage that is also using sweetalerts2.
I use a sweetalerts popup to ask the user for a password at one point. The problem I'm seeing is that on a smartphone, when the sweetalerts popup shows up with the text input field, the smartphone pops up the on-screen keyboard, which causes my menu to resize. I don't want that.
In sweetalerts, I can call a function before the popup opens, and another function after the popup closes.
Is there a way to disable responsiveness of my project when the popup opens, and re-enable responsiveness when the popup closes?
It looks like the responsiveness is handled in Animate by the makeResponsive function, which adds an eventListener to window for the "resize" event. It would be nice if I could remove this event listener temporarily, and re-add it, but because I don't have a reference to the callback function (resizeCanvas), I can't remove the event listener. Is there something obvious I'm missing?
Calling
AdobeAn.makeResponsive(true, ...
and
AdobeAn.makeResponsive(false, ...
almost works, but when you use that to disable responsiveness, it reverts the menu to full size first, which I also don't want. I just want it to stay the size it is for a while, without being responsive.
Copy link to clipboard
Copied
This is a pretty bad approach, and I hope eventually someone comes up with a better one, but what I ended up doing is writing a post-processing script that runs on MacOS, and modifies the .html after is is published.
It will make a global reference to resizeCanvas that can later be used to add and remove the event listener on the window object:
#!/bin/bash
HTML_FILE='/location/to/your/html/file.html'
LINE_PRESENT=$(grep -q 'window.resizeCanvas = resizeCanvas;' "$HTML_FILE" && echo true || echo false)
if ! $LINE_PRESENT
then
sed -i '' 's/\(^an.makeResponsive = .*\)/\1\'$'\n window.resizeCanvas = resizeCanvas;/g' "$HTML_FILE"
fi
This is a bash script. If you aren't sure how to use it, look up on how to run bash scripts. It's pretty easy. On windows, you'd probably need WSL or cygwin to run it.
Also note that in my project, I chose to include the javascript within my .html file. If your project has the javascript code outside of your html file, you may need to run the code against your .js file instead.