Less sticky metatips (#450)

argyleink · web-flow · commit 7d3bb47435de · 2020-04-23T22:55:08.000-07:00
* working with a11y tip

* works for metatip

* .filter nit

* fixes a11y inspecting some &lt;body&gt; tags

* ensure show/hide and removeAll resilience
diff --git a/app/features/accessibility.js b/app/features/accessibility.js
@@ -105,8 +105,10 @@ const restorePinnedTips = () => {
 }
 
 export function hideAll() {
-  state.tips.forEach(({tip}, target) =>
-    tip.style.display = 'none')
+  state.tips.forEach(({tip}, target) => {
+    if (tip)
+      tip.style.display = 'none'
+  })
 
   if (state.active.tip) {
     state.active.tip.remove()
@@ -116,10 +118,13 @@ export function hideAll() {
 
 export function removeAll() {
   state.tips.forEach(({tip}, target) => {
-    tip.remove()
+    tip && tip.remove()
     unobserve({tip, target})
   })
 
+  $('visbug-allytip').forEach(tip =>
+    tip.remove())
+
   $('[data-allytip]').attr('data-allytip', null)
 
   state.tips.clear()
@@ -209,19 +214,22 @@ const wipe = ({tip, e:{target}}) => {
 const togglePinned = els => {
   if (state.restoring) return state.restoring = false
 
-  els.forEach(el => {
-    if (!el.hasAttribute('data-allytip')) {
+  state.tips.forEach(ally => {
+    if (!els.includes(ally.e.target)) {
+      ally.e.target.removeAttribute('data-allytip')
+      wipe(state.tips.get(ally.e.target))
+    }
+  })
+
+  els
+    .filter(el => !el.hasAttribute('data-allytip'))
+    .forEach(el => {
       el.setAttribute('data-allytip', true)
       state.tips.set(el, {
         tip: state.active.tip,
         e: {target:el},
       })
       clearActive()
-    }
-    else if (el.hasAttribute('data-allytip')) {
-      el.removeAttribute('data-allytip')
-      wipe(state.tips.get(el))
-    }
   })
 }
 
diff --git a/app/features/metatip.js b/app/features/metatip.js
@@ -104,8 +104,10 @@ const restorePinnedTips = () => {
 }
 
 export function hideAll() {
-  state.tips.forEach(({tip}, target) =>
-    tip.style.display = 'none')
+  state.tips.forEach(({tip}, target) => {
+    if (tip)
+      tip.style.display = 'none'
+  })
 
   if (state.active.tip) {
     state.active.tip.remove()
@@ -115,10 +117,13 @@ export function hideAll() {
 
 export function removeAll() {
   state.tips.forEach(({tip}, target) => {
-    tip.remove()
+    tip && tip.remove()
     unobserve({tip, target})
   })
 
+  $('visbug-metatip').forEach(tip =>
+    tip.remove())
+
   $('[data-metatip]').attr('data-metatip', null)
 
   state.tips.clear()
@@ -216,19 +221,22 @@ const wipe = ({tip, e:{target}}) => {
 const togglePinned = els => {
   if (state.restoring) return state.restoring = false
 
-  els.forEach(el => {
-    if (!el.hasAttribute('data-metatip')) {
+  state.tips.forEach(meta => {
+    if (!els.includes(meta.e.target)) {
+      meta.e.target.removeAttribute('data-metatip')
+      wipe(state.tips.get(meta.e.target))
+    }
+  })
+
+  els
+    .filter(el => !el.hasAttribute('data-metatip'))
+    .forEach(el => {
       el.setAttribute('data-metatip', true)
       state.tips.set(el, {
         tip: state.active.tip,
         e: {target:el},
       })
       clearActive()
-    }
-    else if (el.hasAttribute('data-metatip')) {
-      el.removeAttribute('data-metatip')
-      wipe(state.tips.get(el))
-    }
   })
 }
 
diff --git a/app/utilities/styles.js b/app/utilities/styles.js
@@ -65,6 +65,11 @@ export const getComputedBackgroundColor = el => {
     let node  = findNearestParentElement(el)
       , found = false
 
+    if (node.nodeName === 'HTML') {
+      found = true
+      background = 'white'
+    }
+
     while(!found) {
       let bg  = getStyle(node, 'background-color')
 
@@ -74,11 +79,6 @@ export const getComputedBackgroundColor = el => {
       }
 
       node = findNearestParentElement(node)
-
-      if (node.nodeName === 'HTML') {
-        found = true
-        background = 'white'
-      }
     }
   }
 

Original file line number	Diff line number	Diff line change
`@@ -65,6 +65,11 @@ export const getComputedBackgroundColor = el => {`
`65`	`65`	`let node = findNearestParentElement(el)`
`66`	`66`	`, found = false`
`67`	`67`
	`68`	`+ if (node.nodeName === 'HTML') {`
	`69`	`+ found = true`
	`70`	`+ background = 'white'`
	`71`	`+ }`
	`72`	`+`
`68`	`73`	`while(!found) {`
`69`	`74`	`let bg = getStyle(node, 'background-color')`
`70`	`75`
`@@ -74,11 +79,6 @@ export const getComputedBackgroundColor = el => {`
`74`	`79`	`}`
`75`	`80`
`76`	`81`	`node = findNearestParentElement(node)`
`77`		`-`
`78`		`- if (node.nodeName === 'HTML') {`
`79`		`- found = true`
`80`		`- background = 'white'`
`81`		`- }`
`82`	`82`	`}`
`83`	`83`	`}`
`84`	`84`