Merge pull request #197 from logseq/fix-IOS-bottom-fixed-position

Fix ios bottom fixed position

src/main/frontend/components/editor.cljs

@@ -209,55 +209,27 @@
 
 (rum/defc mobile-bar < rum/reactive
   [parent-state parent-id]
-  [:div.bg-base-2 {:style {:position "fixed"
-                           :bottom 0
-                           :width "100%"
-                           :left 0
-                           :justify-content "center"
-                           :height "2.5rem"
-                           :display "flex"
-                           :align-items "center"
-                           ;; This element should be the upper-most in most situations
-                           :z-index 99999999}}
+  [:div#mobile-editor-toolbar.bg-base-2.fix-ios-fixed-bottom
    [:button.bottom-action
-    {:style {:padding "5px"}
-     :on-click #(editor-handler/adjust-block-level! parent-state :right)}
+    {:on-click #(editor-handler/adjust-block-level! parent-state :right)}
     svg/indent-block]
    [:button.bottom-action
-    {:style {:padding "5px"}
-     :on-click #(editor-handler/adjust-block-level! parent-state :left)}
+    {:on-click #(editor-handler/adjust-block-level! parent-state :left)}
     svg/outdent-block]
    [:button.bottom-action
-    {:style {:padding "5px"}
-     :on-click #(editor-handler/move-up-down % true)}
+    {:on-click #(editor-handler/move-up-down % true)}
     svg/move-up-block]
    [:button.bottom-action
-    {:style {:padding "5px"}
-     :on-click #(editor-handler/move-up-down % false)}
+    {:on-click #(editor-handler/move-up-down % false)}
     svg/move-down-block]
    [:button.bottom-action
-    {:style {:padding "5px"}
-     :on-click (fn [e]
-                 (let [old-content (state/sub [:editor/content parent-id])
-                       new-content (str old-content "\n")]
-                   (state/set-state! :editor/content {parent-id new-content}))
-                 (.stopPropagation e))}
+    {:on-click #(commands/simple-insert! parent-id "\n" {})}
     svg/multi-line-input]
    [:button.font-extrabold.bottom-action.-mt-1
-    {:style {:padding "5px"}
-     :on-click (fn [e]
-                 (let [old-content (state/sub [:editor/content parent-id])
-                       new-content (str old-content "[[]]")]
-                   (state/set-state! :editor/content {parent-id new-content}))
-                 (.stopPropagation e))}
+    {:on-click #(commands/simple-insert! parent-id "[[]]" {:backward-pos 2})}
     "[[]]"]
    [:button.font-extrabold.bottom-action.-mt-1
-    {:style {:padding "5px"}
-     :on-click (fn [e]
-                 (let [old-content (state/sub [:editor/content parent-id])
-                       new-content (str old-content "(())")]
-                   (state/set-state! :editor/content {parent-id new-content}))
-                 (.stopPropagation e))}
+    {:on-click #(commands/simple-insert! parent-id "(())" {:backward-pos 2})}
     "(())"]])
 
 (rum/defcs input < rum/reactive
@@ -632,7 +604,8 @@
                       :on-hide
                       (fn [state e event]
                         (let [target (.-target e)]
-                          (when-not (d/has-class? target "bottom-action")
+                          (if (d/has-class? target "bottom-action") ;; FIXME: not particular case
+                            (.preventDefault e)
                             (let [{:keys [on-hide format value block id repo dummy?]} (get-state state)]
                               (when on-hide
                                 (on-hide value event))

src/main/frontend/page.cljs

@@ -1,6 +1,7 @@
 (ns frontend.page
   (:require [rum.core :as rum]
             [frontend.state :as state]
+            [frontend.ui :as ui]
             [frontend.components.sidebar :as sidebar]
             [frontend.context.i18n :as i18n]))
 
@@ -9,9 +10,16 @@
   (view route-match))
 
 (rum/defc current-page < rum/reactive
-  {:did-mount (fn [state]
-                (state/set-root-component! (:rum/react-component state))
-                state)}
+  {:did-mount    (fn [state]
+                   (state/set-root-component! (:rum/react-component state))
+                   (ui/inject-document-devices-envs!)
+                   (ui/inject-dynamic-style-node!)
+                   (let [teardown-fn (comp (ui/setup-patch-ios-fixed-bottom-position!))]
+                     (assoc state ::teardown teardown-fn)))
+   :will-unmount (fn [state]
+                   (let [teardown (::teardown state)]
+                     (when-not (nil? teardown)
+                       (teardown))))}
   []
   (when-let [route-match (state/sub :route-match)]
     (i18n/tongue-provider

src/main/frontend/ui.cljs

@@ -104,27 +104,27 @@
              [:svg.h-6.w-6.text-green-400
               {:stroke "currentColor", :viewBox "0 0 24 24", :fill "none"}
               [:path
-               {:d "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z",
-                :stroke-width "2",
-                :stroke-linejoin "round",
+               {:d "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
+                :stroke-width "2"
+                :stroke-linejoin "round"
                 :stroke-linecap "round"}]]]
             :warning
             ["text-gray-900"
              [:svg.h-6.w-6.text-yellow-500
               {:stroke "currentColor", :viewBox "0 0 24 24", :fill "none"}
               [:path
-               {:d "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z",
-                :stroke-width "2",
-                :stroke-linejoin "round",
+               {:d "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+                :stroke-width "2"
+                :stroke-linejoin "round"
                 :stroke-linecap "round"}]]]
 
             ["text-red-500"
              [:svg.h-6.w-6.text-red-500
               {:view-box "0 0 20 20", :fill "currentColor"}
               [:path
-               {:clip-rule "evenodd",
+               {:clip-rule "evenodd"
                 :d
-                "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z",
+                "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z"
                 :fill-rule "evenodd"}]]])]
       [:div.inset-0.flex.items-end.justify-center.px-4.py-3.pointer-events-none.sm:px-6.sm:py-3.sm:items-start.sm:justify-end
        {:style {:z-index (if (or (= state "exiting")
@@ -154,9 +154,9 @@
              [:svg.h-5.w-5
               {:fill "currentColor", :view-Box "0 0 20 20"}
               [:path
-               {:clip-rule "evenodd",
+               {:clip-rule "evenodd"
                 :d
-                "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z",
+                "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
                 :fill-rule "evenodd"}]]]]]]]]])))
 
 (rum/defc notification < rum/reactive
@@ -193,6 +193,55 @@
 (defn get-scroll-top []
   (.-scrollTop (main-node)))
 
+(defn get-dynamic-style-node
+  []
+  (js/document.getElementById "dynamic-style-scope"))
+
+(defn inject-document-devices-envs!
+  []
+  (let [cl (.-classList js/document.documentElement)]
+    (if (util/ios?) (.add cl "is-ios"))
+    (if (util/safari?) (.add cl "is-safari"))))
+
+(defn inject-dynamic-style-node!
+  []
+  (let [style (get-dynamic-style-node)]
+    (if (nil? style)
+      (let [node (js/document.createElement "style")]
+        (set! (.-id node) "dynamic-style-scope")
+        (.appendChild js/document.head node))
+      style)))
+
+(defn setup-patch-ios-fixed-bottom-position!
+  "fix a common issue about ios webpage viewport
+   when soft keyboard setup"
+  []
+  (if (and
+       (util/ios?)
+       (not (nil? js/window.visualViewport)))
+    (let [viewport js/visualViewport
+          style (get-dynamic-style-node)
+          sheet (.-sheet style)
+          raf-pending? (atom false)
+          set-raf-pending! #(reset! raf-pending? %)
+          handler
+          (fn []
+            (if-not @raf-pending?
+              (let [f (fn []
+                        (set-raf-pending! false)
+                        (let [vh (+ (.-offsetTop viewport) (.-height viewport))
+                              rule (.. sheet -rules (item 0))
+                              set-top #(set! (.. rule -style -top) (str % "px"))]
+                          (set-top vh)))]
+                (set-raf-pending! true)
+                (js/window.requestAnimationFrame f))))]
+      (.insertRule sheet ".fix-ios-fixed-bottom {bottom:unset !important; transform: translateY(-100%); top: 0px;}")
+      (.addEventListener viewport "resize" handler)
+      (.addEventListener viewport "scroll" handler)
+      (fn []
+        (.removeEventListener viewport "resize" handler)
+        (.removeEventListener viewport "scroll" handler)))))
+
 ;; FIXME: compute the right scroll position when scrolling back to the top
 (defn on-scroll
   [on-load on-top-reached]
@@ -354,9 +403,9 @@
      [:svg.h-6.w-6
       {:stroke "currentColor", :view-box "0 0 24 24", :fill "none"}
       [:path
-       {:d "M6 18L18 6M6 6l12 12",
-        :stroke-width "2",
-        :stroke-linejoin "round",
+       {:d "M6 18L18 6M6 6l12 12"
+        :stroke-width "2"
+        :stroke-linejoin "round"
         :stroke-linecap "round"}]]]]
 
    (panel-content close-fn)])

src/main/frontend/util.cljs

@@ -18,6 +18,17 @@
             [clojure.pprint :refer [pprint]]
             [goog.userAgent]))
 
+;; envs
+(defn ios?
+  []
+  (not (nil? (re-find #"iPad|iPhone|iPod" js/navigator.userAgent))))
+
+(defn safari?
+  []
+  (let [ua (string/lower-case js/navigator.userAgent)]
+    (and (string/includes? ua "webkit")
+         (not (string/includes? ua "chrome")))))
+
 (defn format
   [fmt & args]
   (apply gstring/format fmt args))