locked
How to tell if settings charm currently visible? RRS feed

 > 

  • Question

  • Question
    Sign in to vote
    0
    Sign in to vote

    Hi,

     We are building a metro app with Javascript that has a few settings within its custom "Settings charm". However, when the user brings up the settings charm, we still get mouse events and such on the application in the background, which is leading to inadvertent actions.

    How can we easily detect if the settings pane is open?

    I have tried to use the SettingsFlyout.hidden property which is mentioned in the MSDN documentation here: http://msdn.microsoft.com/en-us/library/windows/apps/hh701253.aspx  But it doesn't appear to be populated for us (always listed as undefined in the Consumer Preview 8250).

    Thanks for any help!

    Tuesday, May 29, 2012 8:52 PM

Answers

  • Question
    Sign in to vote
    1
    Sign in to vote

    After looking at the repro, the body was the element that was syncing the mouse events. 

    If you want to capture mouse events on the entire surface you can define a div that covers the entire body like this:

    <body>

        <div id="contentDiv" style="width: 100%; height: 100%;">

        <p id="test">Content goes here</p>

        </div>

    </body>

    Then you can sync on those mouse events as follows instead of using the body (do this in your js file after processAll().

     

       document.getElementById("contentDiv").addEventListener('mousedown', function () {

                    document.body.style.background = "#f00";

                }, false);

     

                document.getElementById("contentDiv").addEventListener('mouseup', function () {

                    document.body.style.background = "#000";

                }, false);

     

    Then the flyout will capture mouse events and you won’t get them fired for that div.

     

    Jeff Sanders (MSFT)

    Monday, June 4, 2012 6:26 PM
    Moderator

All replies

  • Question
    Sign in to vote
    0
    Sign in to vote
    The real problem is your Flyout is passing the mouse down and mouse move to the document beneath it?

    Jeff Sanders (MSFT)

    Wednesday, May 30, 2012 2:53 PM
    Moderator
  • Question
    Sign in to vote
    0
    Sign in to vote
    Yes, that's correct. It passes through mouse events when we are showing our own settings flyout. If you just are showing the charm menu it doesn't pass through.
    Wednesday, May 30, 2012 4:46 PM
  • Question
    Sign in to vote
    0
    Sign in to vote
    How can I repro this to investigate further?  How are you detecting the mouse events?  Can you post a simple repro?

    Jeff Sanders (MSFT)

    Wednesday, May 30, 2012 5:20 PM
    Moderator
  • Question
    Sign in to vote
    0
    Sign in to vote

    Hi,

    As Jeff mentioned, it would be better if you can provide a simple repro. It seems the issue cannot be reproduced on my side with the following code:
            var settings = new WinJS.UI.SettingsFlyout();
            console.log(settings.hidden);
     
    When the setting panel is not displayed, true is logged. When it is displayed, false is logged.
     
    Please check your code again to see whether it is correct. 

    Best Regards,

    Ming Xu.

    Please mark the replies as answers if they help or unmark if not.
    If you have any feedback about my replies, please contact msdnmg@microsoft.com.
    Microsoft One Code Framework

    Thursday, May 31, 2012 5:10 AM
    Moderator
  • Question
    Sign in to vote
    0
    Sign in to vote

    Hi Ming, we actually have code that is more like this:

    WinJS.Application.onsettings = function (e) {
    e.detail.applicationcommands = {
        "gameOptionsDiv": { title: "Game options", href: "/html/4-SettingsFlyout-Game.html" }
    };
    WinJS.UI.SettingsFlyout.populateSettings(e);
};

    and later we tried calling

    WinJS.UI.SettingsFlyout.hidden

    but it is undefined.

    Thursday, May 31, 2012 5:19 AM
  • Question
    Sign in to vote
    0
    Sign in to vote

    Hi,

      >> but it is undefined.

    Please use an instance of WinJS.UI.SettingsFlyout. Actually, to access a non-static property of a class, it is needed to have an object instance.

            var settings = new WinJS.UI.SettingsFlyout();
             console.log(settings.hidden);

    Best Regards,

    Ming Xu.

    Please mark the replies as answers if they help or unmark if not.
    If you have any feedback about my replies, please contact msdnmg@microsoft.com.
    Microsoft One Code Framework

    Thursday, May 31, 2012 11:02 AM
    Moderator
  • Question
    Sign in to vote
    0
    Sign in to vote
    That makes sense, but how can you get an instance reference to the flyout that's actually created and shown when you just use a static reference to call populateSettings within that event handler?
    Thursday, May 31, 2012 5:00 PM
  • Question
    Sign in to vote
    1
    Sign in to vote

    After looking at the repro, the body was the element that was syncing the mouse events. 

    If you want to capture mouse events on the entire surface you can define a div that covers the entire body like this:

    <body>

        <div id="contentDiv" style="width: 100%; height: 100%;">

        <p id="test">Content goes here</p>

        </div>

    </body>

    Then you can sync on those mouse events as follows instead of using the body (do this in your js file after processAll().

     

       document.getElementById("contentDiv").addEventListener('mousedown', function () {

                    document.body.style.background = "#f00";

                }, false);

     

                document.getElementById("contentDiv").addEventListener('mouseup', function () {

                    document.body.style.background = "#000";

                }, false);

     

    Then the flyout will capture mouse events and you won’t get them fired for that div.

     

    Jeff Sanders (MSFT)

    Monday, June 4, 2012 6:26 PM
    Moderator
  • Question
    Sign in to vote
    0
    Sign in to vote

    Thanks again for your help!

    Monday, June 4, 2012 6:29 PM