From c721f8898a5363a23c6a104b7b9f9301beea6be5 Mon Sep 17 00:00:00 2001 From: Juraj Kapsiar Date: Mon, 19 Aug 2019 10:09:58 +0200 Subject: [PATCH 1/4] focus indicator for additional documents --- .../src/components/Provider/Provider.tsx | 5 ++- packages/react/src/lib/whatInput.ts | 43 +++++++++++++------ 2 files changed, 34 insertions(+), 14 deletions(-) diff --git a/packages/react/src/components/Provider/Provider.tsx b/packages/react/src/components/Provider/Provider.tsx index 59e7c8948b..60073b3464 100644 --- a/packages/react/src/components/Provider/Provider.tsx +++ b/packages/react/src/components/Provider/Provider.tsx @@ -5,7 +5,7 @@ import * as React from 'react' // @ts-ignore import { RendererProvider, ThemeProvider, ThemeContext } from '@stardust-ui/react-fela' -import { felaRenderer, ChildrenComponentProps } from '../../lib' +import { felaRenderer, ChildrenComponentProps, setUpWhatInput } from '../../lib' import { ThemePrepared, @@ -136,6 +136,9 @@ class Provider extends React.Component> { componentDidMount() { this.renderFontFaces() + if (this.props.target) { + setUpWhatInput(this.props.target) + } } render() { diff --git a/packages/react/src/lib/whatInput.ts b/packages/react/src/lib/whatInput.ts index 2a6a7f8b0e..b926fbf38e 100644 --- a/packages/react/src/lib/whatInput.ts +++ b/packages/react/src/lib/whatInput.ts @@ -82,7 +82,7 @@ const setUp = () => { // add correct mouse wheel event mapping to `inputMap` inputMap[detectWheel()] = 'mouse' - addListeners() + addListeners(window) doUpdate() } @@ -90,7 +90,7 @@ const setUp = () => { * events */ -const addListeners = () => { +const addListeners = (eventTarget: Window | Document) => { // `pointermove`, `MSPointerMove`, `mousemove` and mouse wheel event binding // can only demonstrate potential, but not actual, interaction // and are treated separately @@ -98,29 +98,29 @@ const addListeners = () => { // pointer events (mouse, pen, touch) // @ts-ignore - if (window.PointerEvent) { - window.addEventListener('pointerdown', setInput) + if (eventTarget.PointerEvent) { + eventTarget.addEventListener('pointerdown', setInput) // @ts-ignore } else if (window.MSPointerEvent) { - window.addEventListener('MSPointerDown', setInput) + eventTarget.addEventListener('MSPointerDown', setInput) } else { // mouse events - window.addEventListener('mousedown', setInput, true) + eventTarget.addEventListener('mousedown', setInput, true) // touch events - if ('ontouchstart' in window) { - window.addEventListener('touchstart', eventBuffer, options) - window.addEventListener('touchend', setInput, true) + if ('ontouchstart' in eventTarget) { + eventTarget.addEventListener('touchstart', eventBuffer, options) + eventTarget.addEventListener('touchend', setInput, true) } } // keyboard events - window.addEventListener('keydown', eventBuffer, true) - window.addEventListener('keyup', eventBuffer, true) + eventTarget.addEventListener('keydown', eventBuffer, true) + eventTarget.addEventListener('keyup', eventBuffer, true) // focus events - window.addEventListener('focusin', setElement) - window.addEventListener('focusout', clearElement) + eventTarget.addEventListener('focusin', setElement) + eventTarget.addEventListener('focusout', clearElement) } // checks conditions before updating new input @@ -234,6 +234,23 @@ if (isBrowser() && 'addEventListener' in window && Array.prototype.indexOf) { setUp() } +/* + * set up for document + */ + +export const setUpWhatInput = (target: Document) => { + if (isBrowser() && 'addEventListener' in window && Array.prototype.indexOf) { + const whatInputInitialized = 'whatInputInitialized' + if (target[whatInputInitialized] === true) { + return + } + target[whatInputInitialized] = true + + addListeners(target) + doUpdate() + } +} + export const setWhatInputSource = (newInput: 'mouse' | 'keyboard' | 'initial') => { currentInput = newInput } From 3db6bb53cb7d21039d2253a48e38b97ec9983da4 Mon Sep 17 00:00:00 2001 From: Juraj Kapsiar Date: Mon, 19 Aug 2019 10:14:27 +0200 Subject: [PATCH 2/4] changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 64fe0571ef..da18014b1b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -36,6 +36,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm - Export `FocusTrapZoneProps` and `AutoFocusZoneProps` from the main package @sophieH29 ([#1795](https://github.com/stardust-ui/react/pull/1795)) - Add `checkable` and `checkableIndicator` to the `Dropdown` and `DropdownItem` components @mnajdova ([#1738](https://github.com/stardust-ui/react/pull/1738)) - Add unified ramp of category colors and category color schemes: `foreground`, `foreground1`, `background` to the Teams themes @natashamayurshah ([#1711](https://github.com/stardust-ui/react/pull/1711)) +- Focus indicator for additional documents @jurokapsiar ([#1816](https://github.com/stardust-ui/react/pull/1816)) ### Documentation - Restore docs for `Ref` component @layershifter ([#1777](https://github.com/stardust-ui/react/pull/1777)) From 2d20d7b36c12f776fb5472a913e16bf9c1cea416 Mon Sep 17 00:00:00 2001 From: Juraj Kapsiar Date: Mon, 19 Aug 2019 11:48:57 +0200 Subject: [PATCH 3/4] use document.defaultView --- packages/react/src/lib/whatInput.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react/src/lib/whatInput.ts b/packages/react/src/lib/whatInput.ts index b926fbf38e..f410eaf6e5 100644 --- a/packages/react/src/lib/whatInput.ts +++ b/packages/react/src/lib/whatInput.ts @@ -90,7 +90,7 @@ const setUp = () => { * events */ -const addListeners = (eventTarget: Window | Document) => { +const addListeners = (eventTarget: Window) => { // `pointermove`, `MSPointerMove`, `mousemove` and mouse wheel event binding // can only demonstrate potential, but not actual, interaction // and are treated separately @@ -246,7 +246,7 @@ export const setUpWhatInput = (target: Document) => { } target[whatInputInitialized] = true - addListeners(target) + addListeners(target.defaultView) doUpdate() } } From fa9698e5625a3e9dd087e7ca0cd675a2e44929b8 Mon Sep 17 00:00:00 2001 From: Juraj Kapsiar Date: Mon, 19 Aug 2019 12:19:43 +0200 Subject: [PATCH 4/4] fix --- packages/react/src/lib/whatInput.ts | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/packages/react/src/lib/whatInput.ts b/packages/react/src/lib/whatInput.ts index f410eaf6e5..df496d93b0 100644 --- a/packages/react/src/lib/whatInput.ts +++ b/packages/react/src/lib/whatInput.ts @@ -239,14 +239,20 @@ if (isBrowser() && 'addEventListener' in window && Array.prototype.indexOf) { */ export const setUpWhatInput = (target: Document) => { - if (isBrowser() && 'addEventListener' in window && Array.prototype.indexOf) { + const targetWindow = target.defaultView + if ( + isBrowser() && + targetWindow && + 'addEventListener' in targetWindow && + Array.prototype.indexOf + ) { const whatInputInitialized = 'whatInputInitialized' if (target[whatInputInitialized] === true) { return } target[whatInputInitialized] = true - addListeners(target.defaultView) + addListeners(targetWindow) doUpdate() } }