From 7c89373363046a85d8158ab376f456d91d392f5c Mon Sep 17 00:00:00 2001 From: Josh Duck Date: Sat, 23 Jun 2018 10:40:24 +1000 Subject: [PATCH 1/5] Don't use Object.values, as browser support is poor --- src/components/App/App.js | 2 +- src/utils/getRandomElement.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/App/App.js b/src/components/App/App.js index 8f72a32..c41194d 100644 --- a/src/components/App/App.js +++ b/src/components/App/App.js @@ -62,7 +62,7 @@ class App extends Component { const { selected, query, elements } = this.state; let selectedElement = elements[selected]; - let visibleElements = Object.values(elements); + let visibleElements = Object.keys(elements).map(key => elements[key]); if (query) { visibleElements = visibleElements.filter(element => diff --git a/src/utils/getRandomElement.js b/src/utils/getRandomElement.js index 1f49fc2..0d4b2ab 100644 --- a/src/utils/getRandomElement.js +++ b/src/utils/getRandomElement.js @@ -1,5 +1,5 @@ const getRandomElement = elements => { - const values = Object.values(elements); + const values = Object.keys(elements).map(key => elements[key]); // A "count" of all the weights. const total = values.reduce((total, element) => total + element.weight, 0); From 5ef15733ee1cf459bab93842ef749bf662fbb81f Mon Sep 17 00:00:00 2001 From: Josh Duck Date: Sat, 23 Jun 2018 10:45:01 +1000 Subject: [PATCH 2/5] Don't report null searches --- src/components/App/App.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/App/App.js b/src/components/App/App.js index c41194d..0156305 100644 --- a/src/components/App/App.js +++ b/src/components/App/App.js @@ -43,7 +43,9 @@ class App extends Component { } onFilter(query) { - reportFilter(query); + if (query) { + reportFilter(query); + } this.setState({ query }); } From aa28cd5c34affc228fbba29bade125f56da0d48b Mon Sep 17 00:00:00 2001 From: Josh Duck Date: Sat, 23 Jun 2018 10:48:49 +1000 Subject: [PATCH 3/5] Set styles on input shim correctly --- src/utils/forceHideKeyboard.js | 22 ++++++++++------------ 1 file changed, 10 insertions(+), 12 deletions(-) diff --git a/src/utils/forceHideKeyboard.js b/src/utils/forceHideKeyboard.js index 3c0830f..bead6d0 100644 --- a/src/utils/forceHideKeyboard.js +++ b/src/utils/forceHideKeyboard.js @@ -1,14 +1,3 @@ -/** - * Fixed positioning will stop scrolling to input. - * Font size over 16px will prevent Safari zooming in on focus. - * https://stackoverflow.com/questions/2989263/disable-auto-zoom-in-input-text-tag-safari-on-iphone - */ -const inputStyle = ` - opacity: 0; - position: fixed; - top: -100px; - font-size: 20px;`; - /** * Create a shim component then focus and unfocus it so that Safari doesn't keep * the keyboard open for the iframe that was unceremoniously nuked from the DOM. @@ -16,7 +5,16 @@ const inputStyle = ` */ const forceHideKeyboard = () => { const input = document.createElement("textarea"); - input.style = inputStyle; + + /** + * Fixed positioning will stop scrolling to input. + * Font size over 16px will prevent Safari zooming in on focus. + * https://stackoverflow.com/questions/2989263/disable-auto-zoom-in-input-text-tag-safari-on-iphone + */ + input.style.opacity = 0; + input.style.position = "fixed"; + input.style.top = "-100px"; + input.style.fontSize = "20px"; document.body.prepend(input); input.focus(); From 3bd05dd3aac01c6f5ce8b2c1383e95a4864cb15d Mon Sep 17 00:00:00 2001 From: Josh Duck Date: Sat, 23 Jun 2018 10:58:57 +1000 Subject: [PATCH 4/5] Add default colors --- src/components/InfoLink/InfoLink.css | 12 ++++++++---- src/components/InfoPanel/InfoPanel.css | 2 ++ 2 files changed, 10 insertions(+), 4 deletions(-) diff --git a/src/components/InfoLink/InfoLink.css b/src/components/InfoLink/InfoLink.css index caa8aa5..382874c 100644 --- a/src/components/InfoLink/InfoLink.css +++ b/src/components/InfoLink/InfoLink.css @@ -6,14 +6,18 @@ .InfoLink-button { text-decoration: none; - background: var(--button-fill-color); - border-radius: 2px; - box-shadow: 1px 1px 1px rbga(0, 0, 0, 0.2); - color: var(--button-text-color); font-weight: bold; display: inline-block; margin: 0 8px 8px 0; padding: 8px 12px; + border-radius: 2px; + + background: #ccc; + color: black; + + background: var(--button-fill-color); + box-shadow: 1px 1px 1px rbga(0, 0, 0, 0.2); + color: var(--button-text-color); } .InfoLink-button:hover, diff --git a/src/components/InfoPanel/InfoPanel.css b/src/components/InfoPanel/InfoPanel.css index a86cca0..9519cfd 100644 --- a/src/components/InfoPanel/InfoPanel.css +++ b/src/components/InfoPanel/InfoPanel.css @@ -21,6 +21,8 @@ justify-content: flex-start; transition: bottom ease-in-out 200ms; + background: #333; + color: white; background: var(--panel-background-color); color: var(--panel-text-color); box-shadow: 0 -4px rgba(0, 0, 0, 0.2); From a7365271287028d721a861ede487ce7f7db3cab4 Mon Sep 17 00:00:00 2001 From: Josh Duck Date: Sat, 23 Jun 2018 10:59:15 +1000 Subject: [PATCH 5/5] Only blur iframe if it has focused --- src/components/Filter/InputIframe.js | 11 ++++++++++- src/utils/forceHideKeyboard.js | 4 ++-- 2 files changed, 12 insertions(+), 3 deletions(-) diff --git a/src/components/Filter/InputIframe.js b/src/components/Filter/InputIframe.js index 23fb31b..f896714 100644 --- a/src/components/Filter/InputIframe.js +++ b/src/components/Filter/InputIframe.js @@ -19,12 +19,16 @@ class InputIframe extends Component { forceHideKeyboard(); this.setState({ hasInteracted: false, + hasFocused: false, resetKey: this.state.resetKey + 1 }); } blur() { - forceHideKeyboard(); + if (this.state.hasFocused) { + forceHideKeyboard(); + this.setState({ hasFocused: false }); + } } shouldComponentUpdate(nextProps, nextState) { @@ -36,6 +40,11 @@ class InputIframe extends Component { onLoadFrame() { const window = this.frameRef.current.contentWindow; window.addEventListener("input", e => this.onInput(e.target.value)); + window.addEventListener("focus", e => this.onFocus(e.target)); + } + + onFocus() { + this.setState({ hasFocused: true }); } onInput(value) { diff --git a/src/utils/forceHideKeyboard.js b/src/utils/forceHideKeyboard.js index bead6d0..9d8aa57 100644 --- a/src/utils/forceHideKeyboard.js +++ b/src/utils/forceHideKeyboard.js @@ -13,10 +13,10 @@ const forceHideKeyboard = () => { */ input.style.opacity = 0; input.style.position = "fixed"; - input.style.top = "-100px"; + input.style.top = "100px"; input.style.fontSize = "20px"; - document.body.prepend(input); + document.body.appendChild(input); input.focus(); setTimeout(() => {