How to create a WinJS Flyout via Javascript

Question

Currently I have a toolbar with some buttons, here is how I create it :

HTML

  <div id="toolbarContainer1" style="direction: rtl"></div>

Javascript

var dataArray= [
                        new WinJS.UI.Command(null, { id: 'cmdView3', label: 'View3', section: 'primary', type: 'button', icon: 'stop', tooltip: 'View 3', onclick: function () { changeView('view3') } }),
                        new WinJS.UI.Command(null, { id: 'cmdView2', label: 'View2', section: 'primary', type: 'button', icon: 'stop', tooltip: 'View 2', onclick: function () { changeView('view2') } }),
                         new WinJS.UI.Command(null, { id: 'cmdView1', label: 'View1', section: 'primary', type: 'button', icon: 'stop', tooltip: 'View 1', onclick: function () { changeView('view1') } })
        ];

 window.createImperativeToolBar = function () {

            var tb = new WinJS.UI.ToolBar(document.querySelector("#toolbarContainer1"), {
                data: new WinJS.Binding.List(dataArray)
            });

            var thisToolbar = document.querySelector('#toolbarContainer1');
            thisToolbar.winControl.closedDisplayMode = 'full';
        }

I've tried doing adding it like so :

new WinJS.UI.Flyout(null, { id: 'formatTextFlyout', section: 'primary' })

It gets appended to the DOM but it looks like the options aren't working. The div (flyout) in the dom has no id as I've set above.

I want to show the flyout on button click :

function showFlyout() {
            console.log('flyout');
            var formatTextButton = document.getElementById("formatTextButton");
            document.getElementById("formatTextFlyout").winControl.show(formatTextButton);
        }

But obviously because the ID doesn't get set, an error gets logged. Any ideas ?

Here is a fiddle of what I have tried : https://jsfiddle.net/reko91/yg0rs4xc/1/

Answer 1

When you create a win-control like so:

new WinJS.UI.Flyout(null, { id: 'formatTextFlyout', section: 'primary' })

The id "formatTextFlyout" is only the the id of this flyout control.

But you use document.getElementById("formatTextFlyout") method to find this control, the problem is here, this method can only find the html element object with the Id "formatTextFlyout", and there is no one. You can refer to getElementById method.

One solution here is you create a Flyout like so: HTML:

<div id="flyoutContainer"></div>

Javascript:

var flyout = new WinJS.UI.Flyout(document.querySelector("#flyoutContainer"), { id: 'formatTextFlyout', section: 'primary' });

function showFlyout() {
            console.log('flyout');
            var formatTextButton = document.getElementById("formatTextButton");
            document.getElementById("flyoutContainer").winControl.show(formatTextButton);
        }

Or

var flyout = new WinJS.UI.Flyout(document.querySelector("#flyoutContainer"), { id: 'formatTextFlyout', section: 'primary' });

function showFlyout() {
            console.log('flyout');
            var formatTextButton = document.getElementById("formatTextButton");
            flyout.show(selectedButton);
        }

If you read the sample of WinJS.UI.Flyout object there, you will find in html file, it creates a Flyout like so:

<div id="formatTextFlyout" data-win-control="WinJS.UI.Flyout" 
             aria-label="{Format text flyout}">

The html element is div and has a id "formatTextFlyout".

Addition: In the website Try WinJS, there are a lot of win-control samples which written with html+javascript+css.