Browse Source

enhance(mobile): enable swipe to open/close right sidebar on large screen

leizhe 3 years ago
parent
commit
24789420a2
1 changed files with 47 additions and 20 deletions
  1. 47 20
      src/main/frontend/handler/mobile/swipe.cljs

+ 47 - 20
src/main/frontend/handler/mobile/swipe.cljs

@@ -1,27 +1,54 @@
 (ns frontend.handler.mobile.swipe
-  (:require [goog.dom :as gdom]
-            [cljs-bean.core :as bean]
+  (:require [cljs-bean.core :as bean]
             [frontend.state :as state]
+            [frontend.util :as util]
             [frontend.mobile.util :as mobile-util]))
 
 (defn setup-listeners!
   []
   (let [container js/document]
-    (.addEventListener container "swiped"
-                       (fn [e]
-                         (let [target (.-target e)
-                               detail (some-> (.-detail e)
-                                              (bean/->clj))]
-                           (case (:dir detail)
-                             "left"
-                             (when (state/get-left-sidebar-open?)
-                               (state/set-left-sidebar-open! false))
-                             "right"
-                             (when (and (not (state/get-left-sidebar-open?))
-                                        (:yStart detail)
-                                        (if (mobile-util/native-android?)
-                                          (<= (:yStart detail) 200)
-                                          true)
-                                        (<= (:xStart detail) 20))
-                               (state/set-left-sidebar-open! true))
-                             nil))))))
+    (.addEventListener
+     container "swiped"
+     (fn [e]
+       (let [detail (some-> (.-detail e)
+                            (bean/->clj))
+             width (.-innerWidth js/window)
+             height (.-innerHeight js/window)
+             xstart (:xStart detail)
+             ystart (:yStart detail)]
+         (case (:dir detail)
+           "left"
+           (cond
+             (and (> xstart (/ width 1.2))
+                  (not (util/sm-breakpoint?)))
+             (when-not (state/sub :ui/sidebar-open?)
+               (state/set-state! :ui/sidebar-open? true))
+
+             (if (util/sm-breakpoint?)
+               (< xstart (/ width 1.25))
+               (< xstart (/ width 2)))
+             (when (state/get-left-sidebar-open?)
+               (state/set-left-sidebar-open! false))
+             
+             :else
+             nil)
+
+           "right"
+           (cond
+             (and (mobile-util/native-android?)
+                  (<= ystart (/ height 2)))
+             (when-not (state/get-left-sidebar-open?)
+               (state/set-left-sidebar-open! true))
+
+             (> xstart (/ width 2))
+             (when (state/sub :ui/sidebar-open?)
+               (state/set-state! :ui/sidebar-open? false))
+
+             (and (mobile-util/native-ios?)
+                  (<= (:xStart detail) 20))
+             (when-not (state/get-left-sidebar-open?)
+               (state/set-left-sidebar-open! true))
+
+             :else nil)
+
+           nil))))))