@lvce-editor/server 0.0.31 → 0.0.32

package/static/{0e4d46a → 37d2807}/packages/renderer-process/src/parts/ViewletQuickPick/ViewletQuickPick.js

@@ -1,10 +1,9 @@
 /* Tries to implement the pattern for combobox with listbox popup https://www.w3.org/TR/wai-aria-1.2/#combobox */
 
+import * as AriaAlert from '../AriaAlert/AriaAlert.js'
 import * as Focus from '../Focus/Focus.js'
 import * as InputBox from '../InputBox/InputBox.js'
 import * as RendererWorker from '../RendererWorker/RendererWorker.js'
-import * as Widget from '../Widget/Widget.js'
-import * as Assert from '../Assert/Assert.js'
 
 // TODO use another virtual list that just appends elements and
 // is optimized for fast show/hide, scrolling performance should
@@ -92,13 +91,7 @@ const handleInput = (event) => {
     /* value */ $Target.value
   )
 }
-// TODO when blur hides quickpick automatically it doesn't necessarily need to be sent command to hide itself
 const handleBlur = (event) => {
-  // console.log(event)
-  // if (!event.relatedTarget) {
-  //   console.log('no related target')
-  //   return
-  // }
   RendererWorker.send(/* QuickPick.handleBlur */ 'QuickPick.handleBlur')
 }
 
@@ -233,18 +226,10 @@ const render$QuickPickItems = ($QuickPickItems, quickPickItems) => {
   }
 }
 
-export const updatePicks = (state, visiblePicks, unFocusIndex) => {
-  Assert.object(state)
-  Assert.array(visiblePicks)
-  Assert.number(unFocusIndex)
-  // TODO avoid copying on every keyboard input event
-  // const allPicks = [...slicedPicks]
-  // List.setItems(state.list, total, allPicks)
-  render$QuickPickItems(state.$QuickPickItems, visiblePicks)
-  focusIndex(state, unFocusIndex, 0) // TODO handle length zero
-}
-
 export const setVisiblePicks = (state, visiblePicks) => {
+  if (state.$QuickPickStatus) {
+    hideStatus(state)
+  }
   render$QuickPickItems(state.$QuickPickItems, visiblePicks)
 }
 
@@ -252,15 +237,25 @@ export const setFocusedIndex = (state, oldFocusedIndex, newFocusedIndex) => {
   const { $QuickPickItems, $QuickPickInput } = state
   if (oldFocusedIndex !== -1) {
     const $OldItem = $QuickPickItems.children[oldFocusedIndex]
-    $OldItem.classList.remove('Focused')
+    if ($OldItem) {
+      $OldItem.classList.remove('Focused')
+    }
   }
   if (newFocusedIndex >= 0) {
     const $NewItem = $QuickPickItems.children[newFocusedIndex]
-    $NewItem.classList.add('Focused')
-    $QuickPickInput.setAttribute('aria-activedescendant', $NewItem.id)
+    if ($NewItem) {
+      $NewItem.classList.add('Focused')
+      $QuickPickInput.setAttribute('aria-activedescendant', $NewItem.id)
+    }
   }
 }
 
+export const focus = (state) => {
+  const { $QuickPickInput } = state
+  $QuickPickInput.focus()
+  Focus.setFocus('quickPickInput')
+}
+
 // TODO
 // - for windows narrator, ariaLabel works well
 // - for nvda ariaRoleDescription works better
@@ -281,15 +276,13 @@ const handleBeforeInput = (event) => {
   )
 }
 
-export const create = (value, visiblePicks, focusIndex) => {
+export const create = () => {
   const $QuickPickInput = InputBox.create()
   $QuickPickInput.setAttribute('aria-controls', 'QuickPickItems') // TODO use idl once supported
   // @ts-ignore
   $QuickPickInput.role = 'combobox'
   $QuickPickInput.ariaLabel = 'Type the name of a command to run.'
   $QuickPickInput.ariaAutoComplete = 'list'
-  $QuickPickInput.setAttribute('aria-activedescendant', '')
-  $QuickPickInput.setAttribute('aria-activedescendant', 'QuickPickItem-1') // TODO only if list length is not zero
   $QuickPickInput.onblur = handleBlur
   $QuickPickInput.oninput = handleInput
   $QuickPickInput.addEventListener('beforeinput', handleBeforeInput)
@@ -317,18 +310,12 @@ export const create = (value, visiblePicks, focusIndex) => {
   // $QuickPick.setAttribute('aria-modal', 'false') // TODO why is this
   $QuickPick.ariaLabel = 'Quick open'
 
-  // workaround for chrome bug (maybe?), role application is already on body but
-  // chrome sometimes uses role document
-  // @ts-ignore
-  document.body.role = 'application'
-
-  Widget.append($QuickPick)
-  Focus.focus($QuickPickInput, 'quickPickInput')
-
   return {
+    $Viewlet: $QuickPick,
     $QuickPick,
     $QuickPickInput,
     $QuickPickItems,
+    $QuickPickStatus: undefined,
   }
 }
 
@@ -336,11 +323,30 @@ export const setPicks = (state, visiblePicks) => {
   render$QuickPickItems(state.$QuickPickItems, visiblePicks)
 }
 
+const create$QuickPickStatus = () => {
+  const $QuickPickStatus = document.createElement('div')
+  $QuickPickStatus.className = 'QuickPickStatus'
+  // const te.$QuickPickStatus.role = 'status'
+  // $QuickPickStatus.ariaLive = 'polite'
+  // $QuickPickStatus.id = 'QuickPickStatus'
+  return $QuickPickStatus
+}
+
+export const hideStatus = (state) => {
+  state.$QuickPickStatus.remove()
+  state.$QuickPickStatus = undefined
+}
+
 export const showNoResults = (state, noResults, unfocusIndex) => {
-  console.log({ noResults })
-  updatePicks(state, [noResults], unfocusIndex)
-  Widget.append(state.$QuickPick)
-  Focus.focus(state.$QuickPickInput, 'quickPickInput')
+  setPicks(state, [])
+  if (!state.$QuickPickStatus) {
+    state.$QuickPickStatus = create$QuickPickStatus()
+    state.$QuickPick.append(state.$QuickPickStatus)
+  }
+  state.$QuickPickStatus.textContent = 'No Results'
+
+  // announce to screenreaders that there are no results
+  AriaAlert.alert('No results')
 }
 
 // TODO QuickPick module is always loaded lazily -> can create $QuickPick eagerly (no state / less state laying around)
@@ -349,10 +355,7 @@ export const showNoResults = (state, noResults, unfocusIndex) => {
 
 // TODO have common widgets container for all widgets (this, notifications, context menu)
 export const dispose = (state) => {
-  // TODO make hidden or remove, which is better?  -> remove less dom nodes in dom, hidden -> maybe less style recalculations when shown again
   state.$QuickPickInput.onblur = null
-  Widget.remove(state.$QuickPick)
-  Focus.focusPrevious()
 }
 
 export const setValue = (state, value) => {

package/static/{0e4d46a → 37d2807}/packages/renderer-process/src/parts/ViewletSearch/ViewletSearch.js

@@ -6,7 +6,7 @@ const handleInput = (event) => {
   const $Target = event.target
   const value = $Target.value
   RendererWorker.send(
-    /* ViewletSearch.handleInput */ 'ViewletSearch.handleInput',
+    /* ViewletSearch.handleInput */ 'Search.handleInput',
     /* value */ value
   )
 }
@@ -25,7 +25,7 @@ const handleClick = (event) => {
     case 'TreeItem':
       const index = getNodeIndex($Target)
       RendererWorker.send(
-        /* ViewletSearch.handleClick */ 'ViewletSearch.handleClick',
+        /* Search.handleClick */ 'Search.handleClick',
         /* index */ index
       )
       break
@@ -51,10 +51,10 @@ export const create = () => {
   const $SearchStatus = document.createElement('div')
   // @ts-ignore
   $SearchStatus.role = 'status'
+  $SearchStatus.className = 'ViewletSearchMessage'
 
   const $Viewlet = document.createElement('div')
   $Viewlet.dataset.viewletId = 'Search'
-  $Viewlet.tabIndex = -1
   $Viewlet.className = 'Viewlet'
   $Viewlet.append($ViewletSearchInput, $SearchStatus, $SearchResults)
 
@@ -152,33 +152,17 @@ const render$Rows = ($Rows, rowInfos) => {
   }
 }
 
-const cleanNode = ($Node) => {
-  while ($Node.firstChild) {
-    $Node.firstChild.remove()
-  }
-}
-
-const getStatusMessage = (resultCount, fileResultCount) => {
-  if (resultCount === 0) {
-    return 'No results found'
-  }
-  if (resultCount === 1 && fileResultCount === 1) {
-    return 'Found 1 result in 1 file'
-  }
-  if (fileResultCount === 1) {
-    return `Found ${resultCount} results in 1 file`
-  }
-  return `Found ${resultCount} results in ${fileResultCount} files`
-}
-
-export const setResults = (state, results, resultCount, fileResultCount) => {
+export const setResults = (state, results) => {
   Assert.object(state)
   Assert.array(results)
   // TODO should recycle nodes when rendering only search results
   // maybe could also recycle node from noResults and vice versa
-  const statusMessage = getStatusMessage(resultCount, fileResultCount)
-  state.$SearchStatus.textContent = statusMessage
   render$Rows(state.$SearchResults, results)
 }
 
+export const setMessage = (state, message) => {
+  // TODO recycle text node
+  state.$SearchStatus.textContent = message
+}
+
 export const dispose = () => {}

package/static/{0e4d46a → 37d2807}/packages/renderer-process/src/parts/Widget/Widget.js

@@ -1,3 +1,4 @@
+// TODO this file is not needed when all elements are position fixed
 export const state = {
   isInDom: false,
   $PreviousFocusElement: undefined,