low level tools

package.json

@@ -21,13 +21,13 @@
     "awesome-qr": "^2.1.5-rc.0",
     "bulma-calendar": "^6.1.18",
     "bulma-o-steps": "^1.1.0",
-    "dayjs": "^1.11.9",
+    "dayjs": "^1.11.10",
     "jsonwebtoken-esm": "^2.0.1",
     "jsqr": "^1.4.0"
   },
   "devDependencies": {
     "@sveltejs/adapter-static": "2.0.3",
-    "@sveltejs/kit": "1.27.2",
+    "@sveltejs/kit": "1.27.3",
     "@tabler/icons-svelte": "^2.40.0",
     "@web3-onboard/bitget": "^2.0.1",
     "@web3-onboard/blocto": "^2.0.0",
@@ -39,7 +39,7 @@
     "@web3-onboard/infinity-wallet": "^2.0.4",
     "@web3-onboard/taho": "^2.0.5",
     "@web3-onboard/gnosis": "2.2.0",
-    "@web3-onboard/injected-wallets": "2.10.8",
+    "@web3-onboard/injected-wallets": "2.10.9",
     "@web3-onboard/torus": "^2.2.6",
     "@web3-onboard/walletconnect": "2.5.0",
     "@web3-onboard/xdefi": "^2.0.5",

src/lib/actions/utils.js

@@ -0,0 +1,116 @@
+import { tick } from 'svelte'
+import { writable } from 'svelte/store'
+
+export const portal = (el, target = 'body') => {
+  let targetEl
+  async function update(newTarget) {
+    target = newTarget
+    if (typeof target === 'string') {
+      targetEl = document.querySelector(target)
+      if (targetEl === null) {
+        await tick()
+        targetEl = document.querySelector(target)
+      }
+      if (targetEl === null) {
+        throw new Error(`No element found matching css selector: "${target}"`)
+      }
+    } else if (target instanceof HTMLElement) {
+      targetEl = target
+    } else {
+      throw new TypeError(
+        `Unknown portal target type: ${
+          target === null ? 'null' : typeof target
+        }. Allowed types: string (CSS selector) or HTMLElement.`
+      )
+    }
+    targetEl.appendChild(el)
+    el.hidden = false
+  }
+
+  function destroy() {
+    if (el.parentNode) {
+      el.parentNode.removeChild(el)
+    }
+  }
+
+  update(target)
+  return {
+    update,
+    destroy
+  }
+}
+
+export const invertedScroll = (node, active) => {
+  const handleWheel = (event) => {
+    if (active && event.deltaY) {
+      event.preventDefault()
+      event.currentTarget.scrollTop -=
+        parseFloat(
+          getComputedStyle(event.currentTarget).getPropertyValue('font-size')
+        ) *
+        (event.deltaY < 0 ? -1 : 1) *
+        2
+    }
+  }
+
+  node.addEventListener('wheel', handleWheel, true)
+  return {
+    update(newActive) {
+      active = newActive
+    },
+    destroy() {
+      node.removeEventListener('wheel', handleWheel, true)
+    }
+  }
+}
+
+export const clickOutside = (node) => {
+  const handleClick = (event) => {
+    if (node && !node.contains(event.target) && !event.defaultPrevented) {
+      node.dispatchEvent(new CustomEvent('click_outside', node))
+    }
+  }
+
+  document.addEventListener('click', handleClick, true)
+  return {
+    destroy() {
+      document.removeEventListener('click', handleClick, true)
+    }
+  }
+}
+
+export const createSelector = (multiple = false) => {
+  let selectable = 0
+
+  const { subscribe, update } = writable({})
+
+  const addSelectable = (selected = false) => {
+    update(($selector) => ({
+      ...$selector,
+      [++selectable]: selected
+    }))
+    return selectable
+  }
+
+  const simpleSelect = (index) => {
+    update(($selector) =>
+      Object.keys($selector).reduce((acc, key) => {
+        acc[key] = parseInt(key) === index
+        return acc
+      }, {})
+    )
+  }
+
+  const mutipleSelect = (index) => {
+    update(($selector) => ({
+      ...$selector,
+      [index]: !$selector[index]
+    }))
+  }
+
+  return {
+    subscribe,
+    addSelectable,
+    select: multiple ? mutipleSelect : simpleSelect
+  }
+}