Suggestion AppBar

[darkyen]

The app bar hosts a variety of stuff, allows animations and things to happen, maybe the app bar class can be like a dialog ? which you initialize once and then anything you write in the app-bar is actually just updating the one single global copy mounted in dom ? this will allow awesome animations and more composability on < windows 10 devices.

[rigdern]

I'm don't quite understand your request.

maybe the app bar class can be like a dialog ?

In what way would you like the AppBar to be like a dialog?

which you initialize once and then anything you write in the app-bar is actually just updating the one single global copy mounted in dom ?

Can't you already achieve this by rendering a single AppBar on your page and updating its content throughout the lifetime of your app?

this will allow awesome animations

In terms of animations, the AppBar commands:

• fade in when added
• fade out when removed
• slide when their position changes

Are these the animations you are referring to?

this will allow [...] more composability on < windows 10 devices.

Can you elaborate on how this enables more composability on non Windows 10 devices?

[darkyen]

Oh I wrote that in a hurry.

I am taking react-modal as an example, it latches itself to a single dom component for hosting the modal overlay and the rest,

Indeed I can have a single app bar but, the book keeping is slightly harder, over here you can simply just write the app bar and be care free.

[rigdern]

I looked at react-modal but it seems pretty typical to me. Each Modal component is mounted on a single DOM element. The only trickiness I noticed is that it mounts itself on a direct child of the body rather following React's standard rendering procedure. It does this so that, when the modal is shown, it can set aria-hidden=true on the rest of the app so screen readers will see the modal but nothing behind it.

Can you provide some example code to describe the kind of coding pattern you're trying to enable?

[darkyen]

var appElement = document.getElementById('your-app-element');

Modal.setAppElement(appElement);
Modal.injectCSS();

The above code injects a single element as the app element, and all the modals are mounted in that element. I think i want something like

var appBarElement = id("app-bar");
AppBar.mountAt(appBarElement);

// now when you render an <AppBar></AppBar> with childrens
// its childrens (or a prop) get injected dynamically to the app-bar
// we can then also use show-commands and hide commands 
// for animations and all this will be smooth and require less book keeping

[rigdern]

The above code injects a single element as the app element, and all the modals are mounted in that element.

I don't believe that's quite right. I think the only thing react-modal does with your-app-element is set its aria-hidden attribute. Each Modal gets mounted to its own DOM element which is placed as a direct child of the body (outside of your-app-element so it's unaffected by the toggling of the aria-hidden attribute.).

Your AppBar pattern is interesting. I would have imagined solving this problem at the data layer instead. Any part of the app that wanted to manipulate the AppBar would modify some global data which your AppBar would consume during rendering.

I'm hesitant to adopt the proposed pattern especially because react-modal doesn't appear to use it and I know of no other components that use it. It should be pretty straightforward to create this kind of component on your own You can create a GlobalAppBar component and every GlobalAppBar component will share and update a single ReactWinJS.AppBar component. If you use your GlobalAppBar component in an app and find it useful, feel free to give us feedback and/or send us a pull request.

[darkyen]

The GlobalAppBar is how i solve it at the moment. Its just a rough idea, you can close it ^_^