Skip to main content
_
_tal_
Known Participant
July 15, 2020
Question

Can I enable/disable responsiveness at runtime?

  • July 15, 2020
  • 1 reply
  • 217 views

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.

    This topic has been closed for replies.

    1 reply

    _
    _tal_Author
    Known Participant
    July 22, 2020

    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.

     

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices