Contextual Popup position becomes inconsistent while screen orientation changes.

edited December 2014 in General
Steps to reproduce this issue
1. Open Enyo sampler-> Onyx UI -> Contextual Popup
2. Press any button to get a Contextual Popup
3. While the popup is still there, change the orientation.
Is there any workaround for this?

Comments

  • The popup should trigger onyx.ContextualPopup.adjustPosition during reflow, which should then result in proper positioning of the popup.

    A couple ideas on what could be happening:
    - Maybe the popup isn't reflowing
    - Maybe the popup reflows before it's activator has reflowed
    - Maybe the popup's activatorOffset parameters do not get updated

    A quick skim of the sample source and the onyx.ContextualPopup source makes me suspect it's the last one. As far as I can see, activatorOffset is set in response to onyx.ContextualPopup.requestShow, and does not get updated on reflow.
  • Is there any workaround or fix that you can suggest?
  • Assuming my earlier guesswork is indeed the cause of the problem I'd try something along the following lines:

    onyx.ContextualPopup.requestShow creates the activatorOffset by getting the pageOffset of the activator's node.

    If my earlier guess was right, then once the window has resized, a new activatorOffset must be calculated.

    To achieve this, I would try to extend the onyx.ContextualPopup.resizeHandler to do this before trying to calculate the new popup position. Probably by creating a subkind of the onyx.ContextualPopup that does something like this:
    updateActivatorOffset: function() {
    	var activatorNode = this.activator.hasNode();
    
    	if(activatorNode) {
    		this.activatorOffset = this.getPageOffset(activatorNode);
    	}
    },
    resizeHandler: enyo.inherit(function(sup) {
    	return function() {
    		this.updateActivatorOffset();
    		sup.apply(this, arguments);
    	};
    })
    This example assumes you know what the activator is. In the example, the activator and popup are children of an onyx.MenuDecorator. The onyx.MenuDecorator has an activator property. You could use a binding to pass it on to your popup.

    I don't currently have time to dig in much deeper and make a working example at the moment, but this might get you on your way.

    If you'd rather first find out if my guess is actually correct (my guess work might be entirely wrong), you could build a small test-case and do some exploring with chrome's devtools or something, to see what's really going on under the hood. You could modify the activatorOffset from the console and see what happens, for instance.
  • Can you be more specific about the behavior? How is it inconsistent? What do you expect to happen that isn't?
  • @theryanjduffy‌ when I open the ContextualPopups sample in the Sampler located on the Enyo site. I click on the button captioned "Wide". The result is a popup with some text and 2 buttons, and an arrow pointing up at the button.

    In my case, with a browser window sized 1920x1200 pixels, the popup is located directly below the button such that the tip of the popups arrow meets with the bottom of the "wide" button.

    Next, I resize my browser window. In my case I sized it from 1920x1200, to 768x1024. The visual result is that the popup is still on screen, it's arrow is still pointing up, but instead of being located directly underneath the button, it is now floating quite a distance below the position of the "wide" button.

    The expected behaviour would be for the popup to be relocated such that it is located directly underneith the "wide" button.
  • When I click on something that gives out a contextual pop up, the arrow points to the element I've clicked on and position is relative to it.
    Issue : But on resize, orientationchange of the window, the contextual pop up floats around somewhere with arrow pointing in the same direction.
    Expected behavior : Contextual pop up position, arrow position would be updated after onresize, onorientationchange events such that it stays relative to the button.
  • I'm caught up. Thanks! The issue is that the position of the activator is retrieved and cached when the popup is shown. When you resize the window after the popup is showing (and the activator's absolute position changes as well), the popup is repositioned based on where the activator was and not where it is.

    JIRA -> https://enyojs.atlassian.net/browse/ENYO-4116
  • Woohoo! I guessed right!
  • edited December 2014
    @theryanjduffy‌, I can't access the issue page. Was thinking of rolling a patch over the weekend.
  • Sorry. Didn't realize it was created private by default. Should be open now!
  • Is this issue resolved now?
  • Hi @naveensanthosh‌, a fix was created by @theryanjduffy‌ but it hasn't yet been merged. We'll get this integrated soon, but in the meantime, you are free to check-out the branch (ENYO-602-ryanjduffy) on the onyx repo with his fix. Thanks!
  • @aarontam‌ @theryanjduffy‌ . I've checked out the (ENYO-602-ryanjduffy) branch, included it in my bootplate. I've run the ContextualPopupSample.html and the issue is still there. The popup box still doesn't adjust position.
    This is the file, right?
    https://github.com/enyojs/onyx/commit/654f2f7b2ebb735103be9261cb5380f69105d1b5
    Can you please check it once?
  • @naveensanthosh‌ That's the fix. It checks out fine for me in Chrome on a Mac. Can you confirm it's loading the right version of the file in your browser of choice?
  • I'm running in chrome on a Windows machine. Yeah, the right file is included. I've checked out with other browsers as well. Check the screenshots below
    image

    image

    I've also checked on a mac. Am I doing anything wrong in including the file?
  • I just cloned bootplate from github and checked out the fix branch and everything worked as expected. Can you verify the enyo repo is on master in your bootplate as well?
  • @theryanjduffy‌ . I was working with the bootplate from enyojs.com. Thanks :)
  • Bootplate on enyojs.com will be 2.5.1, not the most recent code from master.
  • Closing the loop here ... this fix was merged into master on 12/15 via https://github.com/enyojs/onyx/pull/214
Sign In or Register to comment.