sveltekit-ui 1.0.0

package/src/lib/actions/intersection_observer.js

@@ -0,0 +1,24 @@
+export default function intersection_observer(node) {
+  let observer = null
+  observer = new IntersectionObserver(
+    (entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          node.dispatchEvent(new CustomEvent("appeared"))
+        } else {
+          node.dispatchEvent(new CustomEvent("disappeared"))
+        }
+      })
+    },
+    { threshold: 1 }
+  )
+  observer.observe(node)
+
+  return {
+    destroy() {
+      if (observer) {
+        observer.disconnect()
+      }
+    },
+  }
+}

package/src/lib/actions/no_spaces.js

@@ -0,0 +1,33 @@
+export default function no_spaces(node, is_no_spaces) {
+  function handle_input(e) {
+    if (is_no_spaces) {
+      const cleaned_val = e.target.value.replace(/\s+/g, "")
+      if (cleaned_val !== e.target.value) {
+        e.target.value = ""
+        e.target.value = cleaned_val
+        node.dispatchEvent(
+          new CustomEvent("clean_val", { detail: cleaned_val })
+        )
+      }
+    }
+  }
+
+  function handle_keydown(e) {
+    if (is_no_spaces && e.which === 32) {
+      e.preventDefault()
+    }
+  }
+
+  node.addEventListener("input", handle_input)
+  node.addEventListener("keydown", handle_keydown)
+
+  return {
+    update(new_is_no_spaces) {
+      is_no_spaces = new_is_no_spaces
+    },
+    destroy() {
+      node.removeEventListener("input", handle_input)
+      node.removeEventListener("keydown", handle_keydown)
+    },
+  }
+}

package/src/lib/actions/numbers_only.js

@@ -0,0 +1,26 @@
+export default function numbers_only(node) {
+  function handle_input(e) {
+    const cleaned_val = e.target.value.replace(/\D+/g, "")
+    if (cleaned_val !== e.target.value) {
+      e.target.value = ""
+      e.target.value = cleaned_val
+      node.dispatchEvent(new CustomEvent("clean_val", { detail: cleaned_val }))
+    }
+  }
+
+  function handle_keydown(e) {
+    if (e.which === 32) {
+      e.preventDefault()
+    }
+  }
+
+  node.addEventListener("input", handle_input)
+  node.addEventListener("keydown", handle_keydown)
+
+  return {
+    destroy() {
+      node.removeEventListener("input", handle_input)
+      node.removeEventListener("keydown", handle_keydown)
+    },
+  }
+}

package/src/lib/actions/scroll_y.js

@@ -0,0 +1,28 @@
+export default function scroll_y(node) {
+  const handle_wheel = (e) => {
+    node.scrollTop = node.scrollTop + e.deltaY
+  }
+
+  let touch_start_y
+  let node_el_scroll_top_start_y
+  const handle_touchstart = (e) => {
+    touch_start_y = Math.round(e.targetTouches[0].clientY)
+    node_el_scroll_top_start_y = node.scrollTop
+  }
+
+  const handle_touchmove = (e) => {
+    node.scrollTop = node_el_scroll_top_start_y + touch_start_y - Math.round(e.targetTouches[0].clientY)
+  }
+
+  node.addEventListener("wheel", handle_wheel, { passive: true })
+  node.addEventListener("touchmove", handle_touchmove)
+  node.addEventListener("touchstart", handle_touchstart)
+
+  return {
+    destroy() {
+      node.removeEventListener("wheel", handle_wheel)
+      node.removeEventListener("touchmove", handle_touchmove)
+      node.removeEventListener("touchstart", handle_touchstart)
+    },
+  }
+}

package/src/lib/actions/stop_scroll_propagation_y.js

@@ -0,0 +1,42 @@
+export default function stop_scroll_propagation_y(node) {
+  const handle_wheel = (e) => {
+    let dy
+    if (e.deltaY) {
+      dy = e.deltaY
+    } else if (e.wheelDelta) {
+      dy = e.wheelDelta
+    }
+    check_to_prevent(e, dy)
+  }
+
+  let prev_touch_y
+  const handle_touchstart = (e) => {
+    prev_touch_y = e.changedTouches[0].clientY
+  }
+  const handle_touchmove = (e) => {
+    let dy = prev_touch_y - e.changedTouches[0].clientY
+    check_to_prevent(e, dy)
+    prev_touch_y = e.changedTouches[0].clientY
+  }
+
+  function check_to_prevent(e, dy) {
+    if (node.scrollTop === 0 && dy < 0) {
+      e.stopPropagation()
+      if (e.cancelable) e.preventDefault()
+    } else if (node.scrollTop === node.scrollHeight - node.clientHeight && dy > 0) {
+      e.stopPropagation()
+      if (e.cancelable) e.preventDefault()
+    }
+  }
+  node.addEventListener("wheel", handle_wheel, { passive: true })
+  node.addEventListener("touchmove", handle_touchmove)
+  node.addEventListener("touchstart", handle_touchstart)
+
+  return {
+    destroy() {
+      node.removeEventListener("wheel", handle_wheel)
+      node.removeEventListener("touchmove", handle_touchmove)
+      node.removeEventListener("touchstart", handle_touchstart)
+    },
+  }
+}

package/src/lib/actions/swipe_handler.js

@@ -0,0 +1,295 @@
+export default function swipe_handler(node) {
+  let dy_inner = 0
+  let dy_outer = 0
+  let left_swipe = false
+  let right_swipe = false
+  let up_swipe = false
+  let down_swipe = false
+  let left_overflow_swipe = false
+  let right_overflow_swipe = false
+  let up_overflow_swipe = false
+  let down_overflow_swipe = false
+  const threshhold = 120
+  function set_dy(inner_val, outer_val) {
+    if (typeof inner_val === "number") {
+      dy_inner = inner_val
+    }
+    if (typeof outer_val === "number") {
+      dy_outer = outer_val
+    }
+    node.dispatchEvent(
+      new CustomEvent("dyChange", {
+        detail: {
+          dy_inner: dy_inner,
+          dy_outer: dy_outer,
+          dy: dy_inner + dy_outer,
+          is_at_top: is_at_top,
+          is_at_bottom: is_at_bottom,
+        },
+      })
+    )
+    if (!up_swipe && dy_inner + dy_outer > threshhold) {
+      up_swipe = true
+      node.dispatchEvent(new CustomEvent("up_swipe"))
+    }
+    if (!down_swipe && dy_inner + dy_outer < -threshhold) {
+      down_swipe = true
+      node.dispatchEvent(new CustomEvent("down_swipe"))
+    }
+    if (!up_overflow_swipe && dy_outer > threshhold) {
+      up_overflow_swipe = true
+      node.dispatchEvent(new CustomEvent("up_overflow_swipe"))
+    }
+    if (!down_overflow_swipe && dy_outer < -threshhold) {
+      down_overflow_swipe = true
+      node.dispatchEvent(new CustomEvent("down_overflow_swipe"))
+    }
+    if (dy_outer !== 0 || dy_inner !== 0) {
+      reset_timer()
+    }
+  }
+
+  let dx_inner = 0
+  let dx_outer = 0
+  function set_dx(inner_val, outer_val) {
+    if (typeof inner_val === "number") {
+      dx_inner = inner_val
+    }
+    if (typeof outer_val === "number") {
+      dx_outer = outer_val
+    }
+    node.dispatchEvent(
+      new CustomEvent("dx_change", {
+        detail: {
+          dx_inner: dx_inner,
+          dx_outer: dx_outer,
+          dx: dx_inner + dx_outer,
+          is_at_left: is_at_left,
+          is_at_right: is_at_right,
+        },
+      })
+    )
+    if (!left_swipe && dx_inner + dx_outer > threshhold) {
+      left_swipe = true
+      node.dispatchEvent(new CustomEvent("left_swipe"))
+    }
+    if (!right_swipe && dx_inner + dx_outer < -threshhold) {
+      right_swipe = true
+      node.dispatchEvent(new CustomEvent("right_swipe"))
+    }
+    if (!left_overflow_swipe && dx_outer > threshhold) {
+      left_overflow_swipe = true
+      node.dispatchEvent(new CustomEvent("left_overflow_swipe"))
+    }
+    if (!right_overflow_swipe && dx_outer < -threshhold) {
+      right_overflow_swipe = true
+      node.dispatchEvent(new CustomEvent("right_overflow_swipe"))
+    }
+    if (dx_outer !== 0 || dx_inner !== 0) {
+      reset_timer()
+    }
+  }
+
+  let timer_y
+  function reset_timer() {
+    timer_y && clearTimeout(timer_y)
+    timer_y = setTimeout(() => {
+      // set_dy(0, 0)
+      smooth_dy_to_zero()
+      smooth_dx_to_zero()
+      is_reference_scroll_top_set = false
+      touch_reference_y = null
+      is_reference_scroll_left_set = false
+      touch_reference_x = null
+    }, 200)
+  }
+
+  function smooth_dy_to_zero() {
+    // set_dy(0)
+    // smoothdy_outerToZero()
+    set_dy(0, 0)
+    up_swipe = false
+    down_swipe = false
+    up_overflow_swipe = false
+    down_overflow_swipe = false
+  }
+
+  function smooth_dx_to_zero() {
+    // set_dx(0)
+    // smoothdx_outerToZero()
+    set_dx(0, 0)
+    left_swipe = false
+    right_swipe = false
+    left_overflow_swipe = false
+    right_overflow_swipe = false
+  }
+
+  // function smoothdy_outerToZero(){
+  //   const dy_outerInc = Math.floor(Math.abs(dy_outer / 10)) + 1
+  //   const newdy_outer = dy_outer < 0 ? dy_outer + dy_outerInc : dy_outer > 0 ? dy_outer - dy_outerInc : 0
+  //   const dy_outerDur = Math.abs(newdy_outer) < 50 ? 50 - Math.abs(newdy_outer) : 1
+  //   if(newdy_outer < threshhold && newdy_outer > -threshhold && (down_swipe || up_swipe)){
+  //     down_swipe = false
+  //     up_swipe = false
+  //   }
+  //   setTimeout(() => {
+  //     set_dy(null, newdy_outer)
+  //     if(Math.abs(newdy_outer) !== 0){ smoothdy_outerToZero() }
+  //   }, dy_outerDur)
+  // }
+
+  // function smoothdx_outerToZero(){
+  //   const dx_outerInc = Math.floor(Math.abs(dx_outer / 10)) + 1
+  //   const newdx_outer = dx_outer < 0 ? dx_outer + dx_outerInc : dx_outer > 0 ? dx_outer - dx_outerInc : 0
+  //   const dx_outerDur = Math.abs(newdx_outer) < 50 ? 50 - Math.abs(newdx_outer) : 1
+  //   if(newdx_outer < threshhold && newdx_outer > -threshhold && (right_swipe || left_swipe)){
+  //     right_swipe = false
+  //     left_swipe = false
+  //   }
+  //   setTimeout(() => {
+  //     set_dx(null, newdx_outer)
+  //     if(Math.abs(newdx_outer) !== 0){ smoothdx_outerToZero() }
+  //   }, dx_outerDur)
+  // }
+
+  let is_at_top = true
+  let is_at_bottom = true
+  let reference_scroll_top = 0
+  let is_reference_scroll_top_set = false
+
+  let is_at_left = true
+  let is_at_right = true
+  let reference_scroll_left = 0
+  let is_reference_scroll_left_set = false
+  const handle_scroll = (e) => {
+    const was_at_top = is_at_top
+    const was_at_bottom = is_at_bottom
+    is_at_top = e.target.scrollTop === 0
+    is_at_bottom =
+      e.target.scrollHeight - e.target.offsetHeight - e.target.scrollTop === 0
+    if (was_at_top !== is_at_top) {
+      node.dispatchEvent(
+        new CustomEvent("is_at_top", { detail: { is_at_top: is_at_top } })
+      )
+    }
+    if (was_at_bottom !== is_at_bottom) {
+      node.dispatchEvent(
+        new CustomEvent("is_at_bottom", {
+          detail: { is_at_bottom: is_at_bottom },
+        })
+      )
+    }
+    if (!is_at_bottom && !is_at_top) {
+      if (!is_reference_scroll_top_set) {
+        is_reference_scroll_top_set = true
+        reference_scroll_top = e.target.scrollTop
+      }
+      set_dy(e.target.scrollTop - reference_scroll_top)
+      touch_reference_y = null
+    }
+    is_at_left = e.target.scrollLeft === 0
+    is_at_right =
+      e.target.scrollWidth - e.target.offsetWidth - e.target.scrollLeft === 0
+    if (!is_at_left && !is_at_right) {
+      if (!is_reference_scroll_left_set) {
+        is_reference_scroll_left_set = true
+        reference_scroll_left = e.target.scrollLeft
+      }
+      set_dx(e.target.scrollLeft - reference_scroll_left)
+      touch_reference_x = null
+    }
+  }
+
+  const handle_wheel = (e) => {
+    if (is_at_bottom || is_at_top) {
+      const stretched_dx = Math.round(e.deltaY / 2)
+      const adjusted_dy =
+        stretched_dx > 14 ? 14 : stretched_dx < -14 ? -14 : stretched_dx
+      set_dy(null, dy_outer + adjusted_dy)
+    }
+    if (is_at_left || is_at_right) {
+      const stretched_dx = Math.round(e.deltaX / 2)
+      const adjusted_dx =
+        stretched_dx > 14 ? 14 : stretched_dx < -14 ? -14 : stretched_dx
+      set_dx(null, dx_outer + adjusted_dx)
+    }
+    const is_moving_outer =
+      (is_at_left && dx_outer < -90) ||
+      (is_at_right && dx_outer > 90) ||
+      (is_at_top && dy_outer < -90) ||
+      (is_at_bottom && dy_outer > 90)
+    if (!is_moving_outer) {
+      // e.stopPropagation()
+    }
+  }
+
+  let touch_reference_y
+  let touch_reference_x
+  let dy_outer_at_start
+  let dx_outer_at_start
+  const handle_touchstart = (e) => {
+    touch_reference_y = e.changedTouches[0].clientY
+    dy_outer_at_start = dy_outer
+    touch_reference_x = e.changedTouches[0].clientX
+    dx_outer_at_start = dx_outer
+    // e.stopPropagation()
+  }
+
+  const handle_touchmove = (e) => {
+    if (is_at_bottom || is_at_top) {
+      if (!touch_reference_y) {
+        touch_reference_y = e.changedTouches[0].clientY
+        dy_outer_at_start = 0
+      }
+      set_dy(
+        null,
+        Math.round(
+          dy_outer_at_start + touch_reference_y - e.changedTouches[0].clientY
+        )
+      )
+    }
+    if (is_at_left || is_at_right) {
+      if (!touch_reference_x) {
+        touch_reference_x = e.changedTouches[0].clientX
+        dx_outer_at_start = 0
+      }
+      set_dx(
+        null,
+        Math.round(
+          dx_outer_at_start + touch_reference_x - e.changedTouches[0].clientX
+        )
+      )
+    }
+    const is_moving_outer =
+      (is_at_left && dx_outer < -90) ||
+      (is_at_right && dx_outer > 90) ||
+      (is_at_top && dy_outer < -90) ||
+      (is_at_bottom && dy_outer > 90)
+    if (!is_moving_outer) {
+      // e.stopPropagation()
+    }
+  }
+
+  const handleTouchend = () => {
+    smooth_dy_to_zero()
+    smooth_dx_to_zero()
+  }
+
+  node.addEventListener("scroll", handle_scroll)
+  node.addEventListener("wheel", handle_wheel, { passive: true })
+  node.addEventListener("touchstart", handle_touchstart, { passive: true })
+  node.addEventListener("touchmove", handle_touchmove, { passive: true })
+  node.addEventListener("touchend", handleTouchend, { passive: true })
+
+  return {
+    destroy() {
+      node.removeEventListener("scroll", handle_scroll)
+      node.removeEventListener("wheel", handle_wheel, { passive: true })
+      node.removeEventListener("touchstart", handle_touchstart, {
+        passive: true,
+      })
+      node.removeEventListener("touchmove", handle_touchmove, { passive: true })
+      node.removeEventListener("touchend", handleTouchend, { passive: true })
+    },
+  }
+}