Symbols on the FlipView buttons do not render on all platforms:

• Safari on Mac OS X
• Safari on iOS
• Chrome on Android

Expected:
FlipView button symbols render on all platforms

Actual:
FlipView button symbols only render on Windows platforms

@jseanxu is working on a fix for this

sh-3.2# grunt test
Building QUnit test pages...Loading "test.js" tasks...ERROR

Error: ENOENT, no such file or directory './tests/FlipView/..\TestLib\LegacyLiveUnit\commonutils.js'

WinJS.Namespace.define() treats any object with a value property as a data descriptor.

To reproduce:

// assuming <input id="submitID" ... /> 
WinJS.Namespace.define("ui", {
  submit : document.getElementById("submitID")
});

Expected:
ui.submit is an HTMLInputElement

Actual:
ui.submit is a string that contains the value of the HTMLInputElement when WinJS.Namespace.define() was called.

In IE10, when multiple pivot headers are created, only the last pivot header is shown.

(Not sure if IE10 is supported since I tried to find browser compatibility in WinJS documentation, but couldn't find any information regarding this)

Clearly Microsoft has some process for producing minified versions of the JS but this is not part of the published grunt file. That should be added for "release" builds. Same for CSS files.

We're using -ms-overflow-style: none to hide the scrollbar in IE, but that style doesn't exist elsewhere

Several configurations of the ListView like:

• Grouping
• Cellspanning

These do not work because they have a dependency on CSS3 Grid.

Required HTML files are missing from some folders.
When running "grunt test" the following error message is displayed.

Running "shell:runTests:" (shell) task
'%_NTTREE%' is not recognized as an internal or external command,
operable program or batch file.

Investigating this further, the webunit.exe program is missing from the source. The shell.js task uses the driver _NTTREE env var to figure out where "Corsica/other.2.1.debug/Tools/WebUnit/WebUnit.exe" is located. I'm not familiar with that test runner, but it seems like this could be adapted to use the Chutzpah test runner or QUnit for Node. If I manage to get them running before you do I'll submit a PR. ;)

In the "Create NavBar" demo on http://try.buildwinjs.com/default.aspx#navbar it is not clear how a person should navigate to the different pages of the NavBar. The buttons on the left/right side do not indicate that they will flip to a new page like how FlipView does (should have arrows).

The current header's opacity should be 1 but is not. This is a CSS rule ordering issue, the rule to set the current header's opacity to 1 appears before the rule that sets it to 0.4 and both rules have the same specificity.

This can be fixed by either increasing the specificity of the rule that sets opacity to 1 or fix the ordering of the rules.

If you scroll a Hub then change its orientation from horizontal to vertical (say in response to a screen rotation) the .win-hub-viewport still has a scrollLeft applied that causes the content to be off-center.

Workaround: manually set hub._viewportElement.scrollLeft = 0 when changing orientation to vertical.

Tabbing in listview is dependent on the "beforeactivate" event which is only present in IE. The listview tabManager calls preventDefault() on this event to tell the browser to keep looking for an appropriate item to focus, rather than just the first one it would normally move focus to in the document's tab order.

Expected Behavior: Tab key will move focus from the current item inside of the listview, outside of the listview onto the next element that would follow the listview according to the document's tab order.

Actual Behavior: It requires at least two presses of the Tab key (sometimes more depending on the html structure of the item) to move focus off of the current listview item, and then the focus just moves to the next item in the listview instead of the first element outside of the listview.

originally discovered in Chrome

The FlipView touch manipulation has a dependency on scroll-limits and snap-points with are not implemented in all browsers. Buttons are shown instead.

Hey Guys, i have been trying since morning to add the WinJs library on my web pages, styling is ok, but javascript is not working and don't know why. Any idea?

They still look like the old turnstile in WP8.

Not strictly a WinJS issue but related:
btw: Why isn't navigator.js part of WinJS?

Imagine a page registers a hotkey (using the great mousetrap.js) in its init() handler. It will of course unbind that key in the unload() handler.

So now imagine we have 2 pages, both registering for the same hotkey "f5".

WinJS.UI.Pages.define("page1.hml", {
  init: function() { 
    Mousetrap.bind("f5", function() {});
  }
  unload: function() {
     Mousetrap.unbind("f5");
  }
}

WinJS.UI.Pages.define("page2.hml", {
  init: function() { 
    Mousetrap.bind("f5", function() {});
  }
  unload: function() {
     Mousetrap.unbind("f5");
  }
}

When page2 is active, no hotkey "f5" is registered anymore. Thats due to the way navigator.js calls the unload method of "page1" after everything happened for "page2".The "f5" key registered by "page2" is unbound by page1's unload handler.

WinJS currently has a package.json but it's not registered on npm.
Before it does though it should change the name field in the package.json to lowercase winjs (npm restriction).

SemanticZoom: Symbol for zoom out button does not render on all platforms:

Safari on Mac OS X
Safari on iOS
Chrome on Android

Expected:
SemanticZoom zoom out button symbol render on all platforms

Actual:
SemanticZoom zoom out button symbols only render on Windows platforms

Ideally for web apps we would point to a CDN. Similarly, for PhoneGap-type apps, we could just grab the latest build from a known location. As-is, each developer has to independently grab source, build it, and deploy the output even if they don't want to make changes to the code.

Hovering over "Microsoft" and "Strawberry" (with a mouse, using IE11) on the demo http://try.buildwinjs.com/default.aspx#tooltip does not show the tooltip. The other three work as expected.

Searchbox: suggestions list is not displayed

Expected:
Scenario 1 of: http://try.buildwinjs.com/#searchbox
shows a list of suggestions

Actual:
I does not.

-Go to:
http://try.buildwinjs.com/default.aspx#listview
-Edit the HTML, change from ListLayout to GridLayout
-Go to output

Actual:
Huge gaps when you scroll

Expected
No gaps

Using CellSpanningLayout and itemsReorderable is not working. The item sizes are not recalculated.

http://try.buildwinjs.com/default.aspx#searchbox

The icon to remove current Searchbox text seems too far to the left in Chrome 33 and IE11. Perhaps this is by design, but it seems like it should be further to the right.

Toggle uses IE specific pseudo elements to style the underlying range control for the toggle switch. This functionality does not exist in other browsers making the range control render incorrectly in other browsers.

Repro steps:

1. Set ListView to be reoderable+selectable
2. Pick item 0, move it between two items
3. Right click to select the item right after the reordered item

Results: In firefox, the hover rectangle ends up animating itself expanding away from the item

It would be great to add WinJS to bower as modular components with dependencies.

ListView: groupHeaderPosition: 'left' depends on CSS Grid, which is currently not supported outside of IE

Outside of IE (Chrome, FF, Safari...):
-Go to http://try.buildwinjs.com/#listview
-Select the 'Grouped ListView using ListLayout' scenario
-Select the Html tab
-In the Listview configuration, update:
layout: { type: WinJS.UI.ListLayout, groupHeaderPosition: 'top' }
to
layout: { type: WinJS.UI.ListLayout, groupHeaderPosition: 'left' }

expected:
header is shown in the left

actualL
header is shown on top of the group items with some spacing, due to dependency on CSS Grid

Clicking on the active pilot header re-positions the title and the headers to the left.

Tested in Google Chrome on Windows.

NavBar is activated using edge gesture or right click. This user experience does not translate well in web browsers.

We need to rationalize the the desired UX here moving forward

mouse wheel scrolling does not work in chrome 34.0.1847.92 beta-m windows 7 (x64). You have to click and drag the scroll bar

Let us make improvements to it's examples, features (idea: a JS/TS toggle), and layout (idea: use pivot control instead of tabs) - plus make it easy for us to use it as a testbed when submitting changes to the WinJS library.

Is there a reason why these are nested divs rather than using semantic markup?

In Chrome, Firefox, and Sarfari (Mac) the flyout light dismisses as soon as focus moves in the control. This is a known issue with a known fix.

AppBar is activated using edge gesture or right click. This user experience does not translate well in web browsers.

We need to rationalize the the desired UX here moving forward

This is on Windows 8.1 Store app specifically.

I have an HTML file, say /templates/tableSection.html:

<!DOCTYPE html>
<html>
  <head>
    <title>Table Section</title>
  </head>
  <body>
    <div data-win-control="WinJS.UI.HubSection" data-win-options="{ header: 'Important Table' }" >
      <h3 data-win-bind="textContent: title"></h3>
      <table>
        <tbody data-win-control="WinJS.UI.Repeater" data-win-bind="winControl.data: listOfThings">
          <tr>
            <td data-win-bind="innerText: name"></td>
            <td data-win-bind="innerText: value"></td>
          </tr>
        </tbody>
      </table>
    </div>
  </body>
</html>

Using winControl.data to bind the item list is in line with the example located here: http://code.msdn.microsoft.com/windowsapps/HTML-Repeater-control-da22d278/sourcecode?fileId=86617&pathId=1418094029

I have js code that loads and renders this template similar to:

var tableTemplate = new WinJS.Binding.Template(null, { href: "/templates/tableSection.html", extractChild: true });

tableTemplate.render({
  title: "Boss Table",
  listOfThings: new WinJS.Binding.List([{ name: "Dave", value: 2 }, { name: "Erika", value: 11 }])
}).then(function(sectionDiv) {
  hub.sections.push(sectionDiv.winControl);
}).done();

The h3 element will properly bind to the title value, but the Repeater will not render at all. Even looking at the element using the dom query selector for the WinJS.UI.Repeater shows that it does not even have a winControl attribute. Do I have a code bug, or is there a bug in the Repeater or Template controls?

Touch does not work in all browsers. This is mostly due to the dependency on touch events which are currently IE only.

NavBar does not layout correctly on other browsers. This is mainly due to it's reliance on -ms-grid for laying out buttons.

Expected:
NavBar layouts command buttons correctly in all browsers

Actual:
NavBar does not layout buttons correctly in other browsers expect IE

FlipView: itemSpacing property is only relevant for IE where touch manipulation is supported

AppBar symbols do not render on all platforms:

• Safari on Mac OS X
• Sarfai on iOS
• Chrome on Android
• etc.

Expected:
AppBar command button symbols render

Actual:
AppBar command button symbols do not render on platforms other than Windows

Searchbox: Symbol for search button does not render on all platforms:

Safari on Mac OS X
Safari on iOS
Chrome on Android

Expected:
Searchbox search button symbol render on all platforms

Actual:
Searchbox search button symbol only render on Windows platforms

The start for the Ratings control does not render on all platforms:

• Safari on Mac OS X
• Safari on iOS
• Chrome on Android

Expected:
Ratings stars render on all platforms

Actual:
Ratings stars render only on Windows platform

I brought this up to the devs and they are open to the idea of changing the name if the community really wants it... and if we can find a better name. I'm concerned that people will overlook this awesome library because they think it is just for Windows.

Some ideas:
MicrosoftJS (same kind of branding as Microsoft Azure)
MSJS or MsJs
mJs
ToolkitJS

So I pose this to the community:
What names do you like the most? Have other ideas for names? Or are you happy with the current name?

NavBar symbols do not render on all platforms:

• Safari on Mac OS X
• Sarfai on iOS
• Chrome on Android
• etc.

Expected:
NavBar command button symbols render

Actual:
NavBar command button symbols do not render on platforms other than Windows

Configure JSHint Grunt plugin to add linting to our Open Source build.

The Pivot control relies heavily on IE specific features like:

• Snap-points
• Scroll limits
• CSS Grid

This means it does not function well in all browsers outside of IE.

The back button symbol does not render on all platforms:

• Sarfari on Mac
• Sarfari on iOS
• Chrome on Android
• etc.

Expected:
Back button symbol should render correctly on all platforms

Actual:
Back button symbol only renders on Windows platform

The Pivot must get its first PIvotItem synchronously after construction, or subsequently added PivotItems do not work properly.

The issue is that the Pivot is never centered after construction if there are no items to load. This causes the first PivotItem added asynchronously to scroll a huge distance, triggering the onScroll handler, causing a loop of flips, rendering the Pivot control unusable.