From 390eb5e3733b734f7746f86644f2e72a1ff9ab6b Mon Sep 17 00:00:00 2001 From: Guido Date: Sat, 21 Nov 2020 22:20:52 +0100 Subject: [PATCH 1/4] simplify demo --- example/index.html | 20 ++++++++++++-------- 1 file changed, 12 insertions(+), 8 deletions(-) diff --git a/example/index.html b/example/index.html index 81f7d6d..2e069d5 100644 --- a/example/index.html +++ b/example/index.html @@ -70,22 +70,24 @@ border: 0; } - label { - position: relative; - overflow: hidden; - } - - .file-upload-label.focus { + input[type=text]:nth-of-type(2):focus, + input[type=text]:nth-of-type(2).focus { outline-offset: 0; outline-color: orange; outline-width: 2px; outline-style: dashed; } + label { + position: relative; + overflow: hidden; + } + input[type="file"] { position: absolute; - bottom: 200%; - right: 200%; + width: 1px; + height: 1px; + z-index: -1; } .input-warning-wrapper { @@ -96,9 +98,11 @@ box-sizing: border-box; transition: max-height .25s ease; } + .input-warning-wrapper > p { margin: 0; } + .input-warning-wrapper.show { max-height: 50px; } From bca66133429a29c431d349a82448e44d1e48a79b Mon Sep 17 00:00:00 2001 From: Guido Date: Sat, 21 Nov 2020 22:21:26 +0100 Subject: [PATCH 2/4] remove default outline reset --- example/index.html | 4 ---- 1 file changed, 4 deletions(-) diff --git a/example/index.html b/example/index.html index 2e069d5..08ac532 100644 --- a/example/index.html +++ b/example/index.html @@ -16,10 +16,6 @@ box-sizing: border-box; } - *:focus { - outline: none; - } - .floating-focus-enabled :focus, .floating-focus-enabled .focus { outline: dodgerblue solid 3px; outline-offset: 4px; From 08116df2b40dfa8fd357590853d2b554eb9352ab Mon Sep 17 00:00:00 2001 From: Guido Date: Sat, 21 Nov 2020 22:22:58 +0100 Subject: [PATCH 3/4] consolidate flash helper code --- src/floating-focus.js | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/floating-focus.js b/src/floating-focus.js index d8335f0..c96ef45 100644 --- a/src/floating-focus.js +++ b/src/floating-focus.js @@ -83,7 +83,6 @@ export default class FloatingFocus { } this.floater.classList.add('visible'); - this.floater.classList.add('helper'); this.floater.classList.add('moving'); const focusTargetAttribute = target.getAttribute('focus-target'); @@ -104,8 +103,7 @@ export default class FloatingFocus { this.handleFloaterMove(); - clearTimeout(this.helperFadeTimeout); - this.helperFadeTimeout = setTimeout(() => this.floater.classList.remove('helper'), HELPER_FADE_TIME); + this.showHelper(); } handleBlur() { @@ -138,6 +136,12 @@ export default class FloatingFocus { clearInterval(this.monitorElementPositionInterval); } + showHelper() { + this.floater.classList.add('helper'); + clearTimeout(this.helperFadeTimeout); + this.helperFadeTimeout = setTimeout(() => this.floater.classList.remove('helper'), HELPER_FADE_TIME); + } + handleFloaterMove() { if (this.floaterIsMoving) { return; From 40d41f087b53110290c829f591f6b2225cd62c1f Mon Sep 17 00:00:00 2001 From: Guido Date: Tue, 9 Feb 2021 15:46:05 +0100 Subject: [PATCH 4/4] wip: simplify transitions --- src/floating-focus.js | 21 +-------------------- src/floating-focus.scss | 8 +++----- 2 files changed, 4 insertions(+), 25 deletions(-) diff --git a/src/floating-focus.js b/src/floating-focus.js index c96ef45..6325fdb 100644 --- a/src/floating-focus.js +++ b/src/floating-focus.js @@ -83,7 +83,6 @@ export default class FloatingFocus { } this.floater.classList.add('visible'); - this.floater.classList.add('moving'); const focusTargetAttribute = target.getAttribute('focus-target'); if (focusTargetAttribute) { @@ -99,10 +98,9 @@ export default class FloatingFocus { this.resolveTargetOutlineStyle(this.target, this.floater); this.repositionElement(this.target, this.floater); + // Override default styles after styling the floater this.target.classList.add('floating-focused'); - this.handleFloaterMove(); - this.showHelper(); } @@ -142,21 +140,6 @@ export default class FloatingFocus { this.helperFadeTimeout = setTimeout(() => this.floater.classList.remove('helper'), HELPER_FADE_TIME); } - handleFloaterMove() { - if (this.floaterIsMoving) { - return; - } - - this.floaterIsMoving = true; - - const removeMovingClass = () => { - this.floater.classList.remove('moving'); - this.floater.removeEventListener('transitionend', removeMovingClass); - this.floaterIsMoving = false; - } - this.floater.addEventListener('transitionend', removeMovingClass.bind(this)); - } - addPixels(pixels1, pixels2) { const result = parseFloat(pixels1) + parseFloat(pixels2); return !isNaN(result) ? `${result}px` : null; @@ -222,9 +205,7 @@ export default class FloatingFocus { return; } - this.floater.classList.add('moving'); this.repositionElement(this.target, this.floater); - this.handleFloaterMove(); } repositionElement(target, floater) { diff --git a/src/floating-focus.scss b/src/floating-focus.scss index 85fc0e1..d8382a1 100644 --- a/src/floating-focus.scss +++ b/src/floating-focus.scss @@ -10,11 +10,9 @@ overflow: hidden; z-index: 9999999999; // It should always be on top of everything, no matter what. - &.moving { - transition-property: opacity, left, top, width, height, border-width, border-radius; - transition-duration: .2s, .1s, .1s, .1s, .1s, .1s, .1s; - transition-timing-function: linear, ease, ease, ease, ease, ease, ease; - } + transition-property: opacity, left, top, width, height, border-width, border-radius; + transition-duration: .2s, .1s, .1s, .1s, .1s, .1s, .1s; + transition-timing-function: linear, ease, ease, ease, ease, ease, ease; &.enabled.visible { opacity: 1;