@enact/spotlight

Spotlight

An extensible library for 5-way navigation and focus control

Spotlight is an extensible utility that enables users to navigate applications using a keyboard or television remote control. Responding to input from the UP, DOWN, LEFT, RIGHT, and RETURN keys, Spotlight provides a navigation experience that compares favorably to that of a computer-with-mouse.

Usage

import kind from '@enact/core/kind';
import {SpotlightRootDecorator, Spottable} from '@enact/spotlight';

const MySpottableComponent = Spottable('div');

const MyApp = kind({
    name: 'MyApp',
    render: () => (<MySpottableComponent>Hello, Enact!</MySpottableComponent>)
});
const MySpotlightApp = SpotlightRootDecorator(MyApp);

See the docs for more information.

Additional Information

When using @enact/moonstone, the SpotlightRootDecorator is applied automatically by MoonstoneDecorator.

Acknowledgments

Spotlight is based on a fork of JavaScript SpatialNavigation (c) 2016 Luke Chang, under the terms of the Mozilla Public License.

Copyright and License Information

Unless otherwise specified, all content, including all source code files and documentation files in this repository are:

Copyright (c) 2012-2017 LG Electronics

Unless otherwise specified or set forth in the NOTICE file, all content, including all source code files and documentation files in this repository are: Licensed under the Apache License, Version 2.0 (the "License"); you may not use this content except in compliance with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

Changelog

[1.7.0] - 2017-08-23

Deprecated

• moonstone/TextSizeDecorator and it will be replaced by moonstone/AccessibilityDecorator
• moonstone/MarqueeDecorator property marqueeCentered and moonstone/Marquee property centered will be replaced by alignment property in 2.0.0

Added

• moonstone/TooltipDecorator config property to direct tooltip into a property instead of adding to children
• moonstone/VideoPlayer prop thumbnailUnavailable to fade thumbnail
• moonstone/AccessibilityDecorator with highContrast and textSize
• moonstone/VideoPlayer high contrast scrim
• moonstone/MarqueeDecoratorand moonstone/Marquee property alignment to allow setting alignment of marquee content
• spotlight/SpotlightContainerDecorator config option continue5WayHold to support moving focus to the next spottable element on 5-way hold key.
• spotlight/SpotlightContainerDecorator config option continue5WayHold to support moving focus to the next spottable element on 5-way hold key
• spotlight/Spottable ability to restore focus when an initially disabled component becomes enabled

Changed

• moonstone/Scrollbar to disable paging control down button properly at the bottom when a scroller size is a non-integer value
• moonstone/VirtualList, moonstone/VirtualGridList, and moonstone/Scroller to scroll on keydown event instead of keyup event of page up and page down keys
• moonstone/VirtualGridList to scroll by item via 5 way key
• moonstone/VideoPlayer to read target time when jump by left/right key
• moonstone/IconButton to not use MarqueeDecorator and Uppercase

Fixed

• moonstone/VirtualList and moonstone/VirtualGridList to focus the correct item when page up and page down keys are pressed
• moonstone/VirtualList not to lose focus when moving out from the first item via 5way when it has disabled items
• moonstone/VirtualList to not lose focus when moving out from the first item via 5way when it has disabled items
• moonstone/Slider to align tooltip with detached knob
• moonstone/FormCheckbox to display correct colors in light skin
• moonstone/Picker and moonstone/RangePicker to forward onKeyDown events when not joined
• moonstone/SelectableItem to display correct icon width and alignment
• moonstone/LabeledItem to always match alignment with the locale
• moonstone/Scroller to properly 5-way navigate from scroll buttons
• moonstone/ExpandableList to display correct font weight and size for list items
• moonstone/Divider to not italicize in non-italic locales
• moonstone/VideoPlayer slider knob to follow progress after being selected when seeking
• moonstone/LabeledItem to correctly position its icon. This affects all of the Expandables, moonstone/DatePicker and moonstone/TimePicker.
• moonstone/Panels.Header and moonstone/Item to prevent them from allowing their contents to overflow unexpectedly
• moonstone/Marquee to recalculate when vertical scrollbar appears
• moonstone/SelectableItem to recalculate marquee when toggled
• spotlight to correctly restore focus to a spotlight container in another container
• spotlight to not try to focus something when the window is activated if focus is already set

Removed

• moonstone/Input large-text mode