Highlighted

Can I enable/disable responsiveness at runtime?

Explorer ,
Jul 15, 2020

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.

Views

35

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Can I enable/disable responsiveness at runtime?

Explorer ,
Jul 15, 2020

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.

Views

36

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jul 15, 2020 0
_tal_ LATEST
Explorer ,
Jul 22, 2020

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.

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 22, 2020 0