with undefined tabIndex (To work around Win8 bug #622245)
- if ((_elms[i].tagName !== "DIV") || (_elms[i].getAttribute("tabIndex") !== null)) {
- _elms[i].focus();
-
- if (_elms[i] === _Global.document.activeElement) {
- break;
- }
- }
- }
- }
- },
-
- _focusOnFirstFocusableElementFromParent: function SettingsFlyout_focusOnFirstFocusableElementFromParent() {
- var active = _Global.document.activeElement;
- if (!active || !_ElementUtilities.hasClass(active, _Constants.finalDivClass)) {
- return;
- }
- var _elms = this.parentElement.getElementsByTagName("*");
-
- // There should be at least 1 element in addition to the firstDiv & finalDiv
- if (_elms.length <= 2) {
- return;
- }
-
- // Get the tabIndex set to the firstDiv (which is the lowest)
- var _lowestTabIndex = _elms[0].tabIndex;
-
- // If there are positive tabIndices, set focus to the element with the lowest tabIndex.
- // Otherwise set focus to the first focusable element in DOM order.
- var i;
- if (_lowestTabIndex) {
- for (i = 1; i < _elms.length - 1; i++) {
- if (_elms[i].tabIndex === _lowestTabIndex) {
- _elms[i].focus();
- break;
- }
- }
- } else {
- for (i = 1; i < _elms.length - 1; i++) {
- // Skip
with undefined tabIndex (To work around Win8 bug #622245)
- if ((_elms[i].tagName !== "DIV") || (_elms[i].getAttribute("tabIndex") !== null)) {
- _elms[i].focus();
-
- if (_elms[i] === _Global.document.activeElement) {
- break;
- }
- }
- }
- }
- },
-
- // Create and add a new first div to the beginning of the list
- _addFirstDiv: function SettingsFlyout_addFirstDiv() {
- var _elms = this._element.getElementsByTagName("*");
- var _minTab = 0;
- for (var i = 0; i < _elms.length; i++) {
- if ((0 < _elms[i].tabIndex) && (_minTab === 0 || _elms[i].tabIndex < _minTab)) {
- _minTab = _elms[i].tabIndex;
- }
- }
- var firstDiv = _Global.document.createElement("div");
- firstDiv.className = _Constants.firstDivClass;
- firstDiv.style.display = "inline";
- firstDiv.setAttribute("role", "menuitem");
- firstDiv.setAttribute("aria-hidden", "true");
- firstDiv.tabIndex = _minTab;
- _ElementUtilities._addEventListener(firstDiv, "focusin", this._focusOnLastFocusableElementFromParent, false);
-
- // add to beginning
- if (this._element.children[0]) {
- this._element.insertBefore(firstDiv, this._element.children[0]);
- } else {
- this._element.appendChild(firstDiv);
- }
- },
-
- // Create and add a new final div to the end of the list
- _addFinalDiv: function SettingsFlyout_addFinalDiv() {
- var _elms = this._element.getElementsByTagName("*");
- var _maxTab = 0;
- for (var i = 0; i < _elms.length; i++) {
- if (_elms[i].tabIndex > _maxTab) {
- _maxTab = _elms[i].tabIndex;
- }
- }
- var finalDiv = _Global.document.createElement("div");
- finalDiv.className = _Constants.finalDivClass;
- finalDiv.style.display = "inline";
- finalDiv.setAttribute("role", "menuitem");
- finalDiv.setAttribute("aria-hidden", "true");
- finalDiv.tabIndex = _maxTab;
- _ElementUtilities._addEventListener(finalDiv, "focusin", this._focusOnFirstFocusableElementFromParent, false);
-
- this._element.appendChild(finalDiv);
- },
-
- _writeProfilerMark: function SettingsFlyout_writeProfilerMark(text) {
- _WriteProfilerMark("WinJS.UI.SettingsFlyout:" + this._id + ":" + text);
- }
- });
-
- // Statics
- SettingsFlyout.show = function () {
- ///
- ///
- /// Shows the SettingsPane UI, if hidden, regardless of other states.
- ///
- ///
- ///
- /// Show the main settings pane
- if (_WinRT.Windows.UI.ApplicationSettings.SettingsPane) {
- _WinRT.Windows.UI.ApplicationSettings.SettingsPane.show();
- }
- // And hide the WWA one
- var elements = _Global.document.querySelectorAll('div[data-win-control="WinJS.UI.SettingsFlyout"]');
- var len = elements.length;
- for (var i = 0; i < len; i++) {
- var settingsFlyout = elements[i].winControl;
- if (settingsFlyout) {
- settingsFlyout._dismiss();
- }
- }
- };
-
- var _settingsEvent = { event: undefined };
- SettingsFlyout.populateSettings = function (e) {
- ///
- ///
- /// Loads a portion of the SettingsFlyout. Your app calls this when the user invokes a settings command and the WinJS.Application.onsettings event occurs.
- ///
- ///
- /// An object that contains information about the event, received from the WinJS.Application.onsettings event. The detail property of this object contains
- /// the applicationcommands sub-property that you set to an array of settings commands.
- ///
- ///
- ///
- _settingsEvent.event = e.detail;
-
- if (_settingsEvent.event.applicationcommands) {
- var n = _WinRT.Windows.UI.ApplicationSettings;
- Object.keys(_settingsEvent.event.applicationcommands).forEach(function (name) {
- var setting = _settingsEvent.event.applicationcommands[name];
- if (!setting.title) { setting.title = name; }
- var command = new n.SettingsCommand(name, setting.title, SettingsFlyout._onSettingsCommand);
- _settingsEvent.event.e.request.applicationCommands.append(command);
- });
- }
- };
-
- SettingsFlyout._onSettingsCommand = function (command) {
- var id = command.id;
- if (_settingsEvent.event.applicationcommands && _settingsEvent.event.applicationcommands[id]) {
- SettingsFlyout.showSettings(id, _settingsEvent.event.applicationcommands[id].href);
- }
- };
-
- SettingsFlyout.showSettings = function (id, path) {
- ///
- ///
- /// Show the SettingsFlyout using the settings element identifier (ID) and the path of the page that contains the settings element.
- ///
- ///
- /// The ID of the settings element.
- ///
- ///
- /// The path of the page that contains the settings element.
- ///
- ///
- ///
- var control = _getChildSettingsControl(_Global.document, id);
- if (control) {
- control.show();
- } else if (path) {
- var divElement = _Global.document.createElement("div");
- divElement = _Global.document.body.appendChild(divElement);
- Pages.render(path, divElement).then(function () {
- control = _getChildSettingsControl(divElement, id);
- if (control) {
- control._fragmentDiv = divElement;
- control.show();
- } else {
- _Global.document.body.removeChild(divElement);
- }
- });
- } else {
- throw new _ErrorFromName("WinJS.UI.SettingsFlyout.BadReference", strings.badReference);
- }
- };
-
- var strings = {
- get ariaLabel() { return _Resources._getWinJSString("ui/settingsFlyoutAriaLabel").value; },
- get badReference() { return "Invalid argument: Invalid href to settings flyout fragment"; },
- get backbuttonAriaLabel() { return _Resources._getWinJSString("ui/backbuttonarialabel").value; },
- get widthDeprecationMessage() { return "SettingsFlyout.width may be altered or unavailable in future versions. Instead, style the CSS width property on elements with the .win-settingsflyout class."; },
- get settingsFlyoutIsDeprecated() { return "SettingsFlyout is deprecated and may not be available in future releases. Instead, put settings on their own page within the app."; }
- };
-
- return SettingsFlyout;
- })
- });
-
-
-});
-
-// Copyright (c) Microsoft Corporation. All Rights Reserved. Licensed under the MIT License. See License.txt in the project root for license information.
-define('WinJS/Controls/NavBar/_Command',[
- 'exports',
- '../../Core/_Global',
- '../../Core/_Base',
- '../../Core/_ErrorFromName',
- '../../Core/_Resources',
- '../../ControlProcessor',
- '../../Navigation',
- '../../Utilities/_Control',
- '../../Utilities/_ElementUtilities',
- '../AppBar/_Icon'
- ], function NavBarCommandInit(exports, _Global, _Base, _ErrorFromName, _Resources, ControlProcessor, Navigation, _Control, _ElementUtilities, _Icon) {
- "use strict";
-
- _Base.Namespace._moduleDefine(exports, "WinJS.UI", {
- _WinPressed: _Base.Namespace._lazy(function () {
- var WinPressed = _Base.Class.define(function _WinPressed_ctor(element) {
- // WinPressed is the combination of :hover:active
- // :hover is delayed by trident for touch by 300ms so if you want :hover:active to work quickly you need to
- // use this behavior.
- // :active does not bubble to its parent like :hover does so this is also useful for that scenario.
- this._element = element;
- _ElementUtilities._addEventListener(this._element, "pointerdown", this._MSPointerDownButtonHandler.bind(this));
- }, {
- _MSPointerDownButtonHandler: function _WinPressed_MSPointerDownButtonHandler(ev) {
- if (!this._pointerUpBound) {
- this._pointerUpBound = this._MSPointerUpHandler.bind(this);
- this._pointerCancelBound = this._MSPointerCancelHandler.bind(this);
- this._pointerOverBound = this._MSPointerOverHandler.bind(this);
- this._pointerOutBound = this._MSPointerOutHandler.bind(this);
- }
-
- if (ev.isPrimary) {
- if (this._pointerId) {
- this._resetPointer();
- }
-
- if (!_ElementUtilities._matchesSelector(ev.target, ".win-interactive, .win-interactive *")) {
- this._pointerId = ev.pointerId;
-
- _ElementUtilities._addEventListener(_Global, "pointerup", this._pointerUpBound, true);
- _ElementUtilities._addEventListener(_Global, "pointercancel", this._pointerCancelBound), true;
- _ElementUtilities._addEventListener(this._element, "pointerover", this._pointerOverBound, true);
- _ElementUtilities._addEventListener(this._element, "pointerout", this._pointerOutBound, true);
-
- _ElementUtilities.addClass(this._element, WinPressed.winPressed);
- }
- }
- },
-
- _MSPointerOverHandler: function _WinPressed_MSPointerOverHandler(ev) {
- if (this._pointerId === ev.pointerId) {
- _ElementUtilities.addClass(this._element, WinPressed.winPressed);
- }
- },
-
- _MSPointerOutHandler: function _WinPressed_MSPointerOutHandler(ev) {
- if (this._pointerId === ev.pointerId) {
- _ElementUtilities.removeClass(this._element, WinPressed.winPressed);
- }
- },
-
- _MSPointerCancelHandler: function _WinPressed_MSPointerCancelHandler(ev) {
- if (this._pointerId === ev.pointerId) {
- this._resetPointer();
- }
- },
-
- _MSPointerUpHandler: function _WinPressed_MSPointerUpHandler(ev) {
- if (this._pointerId === ev.pointerId) {
- this._resetPointer();
- }
- },
-
- _resetPointer: function _WinPressed_resetPointer() {
- this._pointerId = null;
-
- _ElementUtilities._removeEventListener(_Global, "pointerup", this._pointerUpBound, true);
- _ElementUtilities._removeEventListener(_Global, "pointercancel", this._pointerCancelBound, true);
- _ElementUtilities._removeEventListener(this._element, "pointerover", this._pointerOverBound, true);
- _ElementUtilities._removeEventListener(this._element, "pointerout", this._pointerOutBound, true);
-
- _ElementUtilities.removeClass(this._element, WinPressed.winPressed);
- },
-
- dispose: function _WinPressed_dispose() {
- if (this._disposed) {
- return;
- }
- this._disposed = true;
-
- this._resetPointer();
- }
- }, {
- winPressed: "win-pressed"
- });
-
- return WinPressed;
- }),
- ///
- ///
- /// Represents a navigation command in an NavBarContainer.
- ///
- ///
- ///
- ///
- ///
- ///
]]>
- ///
Styles the entire NavBarCommand control.
- ///
Styles the main button in a NavBarCommand.
- ///
Styles the split button in a NavBarCommand
- ///
Styles the icon in the main button of a NavBarCommand.
- ///
Styles the label in the main button of a NavBarCommand.
- ///
- ///
- NavBarCommand: _Base.Namespace._lazy(function () {
- var Key = _ElementUtilities.Key;
-
- var strings = {
- get duplicateConstruction() { return "Invalid argument: Controls may only be instantiated one time for each DOM element"; }
- };
-
- var NavBarCommand = _Base.Class.define(function NavBarCommand_ctor(element, options) {
- ///
- ///
- /// Creates a new NavBarCommand.
- ///
- ///
- /// The DOM element that will host the new NavBarCommand control.
- ///
- ///
- /// An object that contains one or more property/value pairs to apply to the new control.
- /// Each property of the options object corresponds to one of the control's properties or events.
- /// Event names must begin with "on".
- ///
- ///
- /// The new NavBarCommand.
- ///
- ///
- ///
- element = element || _Global.document.createElement("DIV");
- options = options || {};
-
- if (element.winControl) {
- throw new _ErrorFromName("WinJS.UI.NavBarCommand.DuplicateConstruction", strings.duplicateConstruction);
- }
-
- // Attaching JS control to DOM element
- element.winControl = this;
- this._element = element;
- _ElementUtilities.addClass(this.element, NavBarCommand._ClassName.navbarcommand);
- _ElementUtilities.addClass(this.element, "win-disposable");
-
- this._tooltip = null;
- this._splitOpened = false;
- this._buildDom();
- element.addEventListener('keydown', this._keydownHandler.bind(this));
-
- _Control.setOptions(this, options);
- }, {
- ///
- /// Gets the DOM element that hosts the NavBarCommand.
- ///
- ///
- element: {
- get: function () {
- return this._element;
- }
- },
-
- ///
- /// Gets or sets the label of the NavBarCommand.
- ///
- ///
- label: {
- get: function () {
- return this._label;
- },
- set: function (value) {
- this._label = value;
- this._labelEl.textContent = value;
- }
- },
-
- ///
- /// Gets or sets the tooltip of the NavBarCommand.
- ///
- ///
- tooltip: {
- get: function () {
- return this._tooltip;
- },
- set: function (value) {
- this._tooltip = value;
- if (this._tooltip || this._tooltip === "") {
- this._element.setAttribute('title', this._tooltip);
- } else {
- this._element.removeAttribute('title');
- }
- }
- },
-
- ///
- /// Gets or sets the icon of the NavBarCommand. This value is either one of the values of the AppBarIcon enumeration or the path of a custom PNG file.
- ///
- ///
- icon: {
- get: function () {
- return this._icon;
- },
- set: function (value) {
- this._icon = (_Icon[value] || value);
-
- // If the icon's a single character, presume a glyph
- if (this._icon && this._icon.length === 1) {
- // Set the glyph
- this._imageSpan.textContent = this._icon;
- this._imageSpan.style.backgroundImage = "";
- this._imageSpan.style.msHighContrastAdjust = "";
- this._imageSpan.style.display = "";
- } else if (this._icon && this._icon.length > 1) {
- // Must be an image, set that
- this._imageSpan.textContent = "";
- this._imageSpan.style.backgroundImage = this._icon;
- this._imageSpan.style.msHighContrastAdjust = "none";
- this._imageSpan.style.display = "";
- } else {
- this._imageSpan.textContent = "";
- this._imageSpan.style.backgroundImage = "";
- this._imageSpan.style.msHighContrastAdjust = "";
- this._imageSpan.style.display = "none";
- }
- }
- },
-
- ///
- /// Gets or sets the command's target location.
- ///
- ///
- location: {
- get: function () {
- return this._location;
- },
- set: function (value) {
- this._location = value;
- }
- },
-
- ///
- /// Gets or sets the state value used for navigation. The command passes this object to the WinJS.Navigation.navigate function.
- ///
- ///
- state: {
- get: function () {
- return this._state;
- },
- set: function (value) {
- this._state = value;
- }
- },
-
- ///
- /// Gets or sets a value that specifies whether the NavBarCommand has a split button.
- ///
- ///
- splitButton: {
- get: function () {
- return this._split;
- },
- set: function (value) {
- this._split = value;
- if (this._split) {
- this._splitButtonEl.style.display = "";
- } else {
- this._splitButtonEl.style.display = "none";
- }
- }
- },
-
- ///
- /// Gets or sets a value that specifies whether the split button is open.
- ///
- ///
- splitOpened: {
- get: function () {
- return this._splitOpened;
- },
- set: function (value) {
- if (this._splitOpened !== !!value) {
- this._toggleSplit();
- }
- }
- },
-
- _toggleSplit: function NavBarCommand_toggleSplit() {
- this._splitOpened = !this._splitOpened;
- if (this._splitOpened) {
- _ElementUtilities.addClass(this._splitButtonEl, NavBarCommand._ClassName.navbarcommandsplitbuttonopened);
- this._splitButtonEl.setAttribute("aria-expanded", "true");
- } else {
- _ElementUtilities.removeClass(this._splitButtonEl, NavBarCommand._ClassName.navbarcommandsplitbuttonopened);
- this._splitButtonEl.setAttribute("aria-expanded", "false");
- }
- this._fireEvent(NavBarCommand._EventName._splitToggle);
- },
-
- _rtl: {
- get: function () {
- return _Global.getComputedStyle(this.element).direction === "rtl";
- }
- },
-
- _keydownHandler: function NavBarCommand_keydownHandler(ev) {
- if (_ElementUtilities._matchesSelector(ev.target, ".win-interactive, .win-interactive *")) {
- return;
- }
-
- var leftStr = this._rtl ? Key.rightArrow : Key.leftArrow;
- var rightStr = this._rtl ? Key.leftArrow : Key.rightArrow;
-
- if (!ev.altKey && (ev.keyCode === leftStr || ev.keyCode === Key.home || ev.keyCode === Key.end) && ev.target === this._splitButtonEl) {
- _ElementUtilities._setActive(this._buttonEl);
- if (ev.keyCode === leftStr) {
- ev.stopPropagation();
- }
- ev.preventDefault();
- } else if (!ev.altKey && ev.keyCode === rightStr && this.splitButton && (ev.target === this._buttonEl || this._buttonEl.contains(ev.target))) {
- _ElementUtilities._setActive(this._splitButtonEl);
- if (ev.keyCode === rightStr) {
- ev.stopPropagation();
- }
- ev.preventDefault();
- } else if ((ev.keyCode === Key.space || ev.keyCode === Key.enter) && (ev.target === this._buttonEl || this._buttonEl.contains(ev.target))) {
- if (this.location) {
- Navigation.navigate(this.location, this.state);
- }
- this._fireEvent(NavBarCommand._EventName._invoked);
- } else if ((ev.keyCode === Key.space || ev.keyCode === Key.enter) && ev.target === this._splitButtonEl) {
- this._toggleSplit();
- }
- },
-
- _getFocusInto: function NavBarCommand_getFocusInto(keyCode) {
- var leftStr = this._rtl ? Key.rightArrow : Key.leftArrow;
- if ((keyCode === leftStr) && this.splitButton) {
- return this._splitButtonEl;
- } else {
- return this._buttonEl;
- }
- },
-
- _buildDom: function NavBarCommand_buildDom() {
- var markup =
- '
' +
- '
';
- this.element.insertAdjacentHTML("afterBegin", markup);
-
- this._buttonEl = this.element.firstElementChild;
- this._buttonPressedBehavior = new exports._WinPressed(this._buttonEl);
- this._contentEl = this._buttonEl.firstElementChild;
- this._imageSpan = this._contentEl.firstElementChild;
- this._imageSpan.style.display = "none";
- this._labelEl = this._imageSpan.nextElementSibling;
- this._splitButtonEl = this._buttonEl.nextElementSibling;
- this._splitButtonPressedBehavior = new exports._WinPressed(this._splitButtonEl);
- this._splitButtonEl.style.display = "none";
-
- _ElementUtilities._ensureId(this._buttonEl);
- this._splitButtonEl.setAttribute("aria-labelledby", this._buttonEl.id);
-
- this._buttonEl.addEventListener("click", this._handleButtonClick.bind(this));
-
- var mutationObserver = new _ElementUtilities._MutationObserver(this._splitButtonAriaExpandedPropertyChangeHandler.bind(this));
- mutationObserver.observe(this._splitButtonEl, { attributes: true, attributeFilter: ["aria-expanded"] });
- this._splitButtonEl.addEventListener("click", this._handleSplitButtonClick.bind(this));
-
- // reparent any other elements.
- var tempEl = this._splitButtonEl.nextSibling;
- while (tempEl) {
- this._buttonEl.insertBefore(tempEl, this._contentEl);
- if (tempEl.nodeName !== "#text") {
- ControlProcessor.processAll(tempEl);
- }
- tempEl = this._splitButtonEl.nextSibling;
- }
- },
-
- _handleButtonClick: function NavBarCommand_handleButtonClick(ev) {
- var srcElement = ev.target;
- if (!_ElementUtilities._matchesSelector(srcElement, ".win-interactive, .win-interactive *")) {
- if (this.location) {
- Navigation.navigate(this.location, this.state);
- }
- this._fireEvent(NavBarCommand._EventName._invoked);
- }
- },
-
- _splitButtonAriaExpandedPropertyChangeHandler: function NavBarCommand_splitButtonAriaExpandedPropertyChangeHandler() {
- if ((this._splitButtonEl.getAttribute("aria-expanded") === "true") !== this._splitOpened) {
- this._toggleSplit();
- }
- },
-
- _handleSplitButtonClick: function NavBarCommand_handleSplitButtonClick() {
- this._toggleSplit();
- },
-
- _fireEvent: function NavBarCommand_fireEvent(type, detail) {
- var event = _Global.document.createEvent("CustomEvent");
- event.initCustomEvent(type, true, false, detail);
- this.element.dispatchEvent(event);
- },
-
- dispose: function NavBarCommand_dispose() {
- ///
- ///
- /// Disposes this control.
- ///
- ///
- ///
- if (this._disposed) {
- return;
- }
- this._disposed = true;
-
- this._buttonPressedBehavior.dispose();
- this._splitButtonPressedBehavior.dispose();
- }
- }, {
- _ClassName: {
- navbarcommand: "win-navbarcommand",
- navbarcommandbutton: "win-navbarcommand-button",
- navbarcommandbuttoncontent: "win-navbarcommand-button-content",
- navbarcommandsplitbutton: "win-navbarcommand-splitbutton",
- navbarcommandsplitbuttonopened: "win-navbarcommand-splitbutton-opened",
- navbarcommandicon: "win-navbarcommand-icon",
- navbarcommandlabel: "win-navbarcommand-label"
- },
- _EventName: {
- _invoked: "_invoked",
- _splitToggle: "_splittoggle"
- }
- });
- _Base.Class.mix(NavBarCommand, _Control.DOMEventMixin);
- return NavBarCommand;
- })
- });
-
-});
-// Copyright (c) Microsoft Corporation. All Rights Reserved. Licensed under the MIT License. See License.txt in the project root for license information.
-define('WinJS/Controls/NavBar/_Container',[
- 'exports',
- '../../Core/_Global',
- '../../Core/_Base',
- '../../Core/_BaseUtils',
- '../../Core/_ErrorFromName',
- '../../Core/_Events',
- '../../Core/_Log',
- '../../Core/_Resources',
- '../../Core/_WriteProfilerMark',
- '../../Animations',
- '../../Animations/_TransitionAnimation',
- '../../BindingList',
- '../../ControlProcessor',
- '../../Navigation',
- '../../Promise',
- '../../Scheduler',
- '../../Utilities/_Control',
- '../../Utilities/_ElementUtilities',
- '../../Utilities/_KeyboardBehavior',
- '../../Utilities/_UI',
- '../_LegacyAppBar/_Constants',
- '../Repeater',
- './_Command'
-], function NavBarContainerInit(exports, _Global, _Base, _BaseUtils, _ErrorFromName, _Events, _Log, _Resources, _WriteProfilerMark, Animations, _TransitionAnimation, BindingList, ControlProcessor, Navigation, Promise, Scheduler, _Control, _ElementUtilities, _KeyboardBehavior, _UI, _Constants, Repeater, _Command) {
- "use strict";
-
- function nobodyHasFocus() {
- return _Global.document.activeElement === null || _Global.document.activeElement === _Global.document.body;
- }
-
- _Base.Namespace._moduleDefine(exports, "WinJS.UI", {
- ///
- ///
- /// Contains a group of NavBarCommand objects in a NavBar.
- ///
- ///
- ///
- ///
- ///
- ///
- ///
- ///