enhance(pdf): sync page number in highlights metafile

public/index.html

@@ -50,22 +50,12 @@
 </script>
 <script defer src="/static/js/highlight.min.js"></script>
 <script defer src="/static/js/interact.min.js"></script>
+<script defer src="/static/js/swiped-events.min.js"></script>
 <script defer src="/static/js/main.js"></script>
 <script defer src="/static/js/tabler.min.js"></script>
 <script defer src="/static/js/code-editor.js"></script>
 <script defer src="/static/js/age-encryption.js"></script>
 <script defer src="/static/js/tldraw.js"></script>
 <script defer src="/static/js/excalidraw.js"></script>
-<script>
-  /*!
- * swiped-events.js - v1.1.6
- * Pure JavaScript swipe events
- * https://github.com/john-doherty/swiped-events
- * @inspiration https://stackoverflow.com/questions/16348031/disable-scrolling-when-touch-moving-certain-element
- * @author John Doherty <www.johndoherty.info>
- * @license MIT
- */
-!function(t,e){"use strict";"function"!=typeof t.CustomEvent&&(t.CustomEvent=function(t,n){n=n||{bubbles:!1,cancelable:!1,detail:void 0};var a=e.createEvent("CustomEvent");return a.initCustomEvent(t,n.bubbles,n.cancelable,n.detail),a},t.CustomEvent.prototype=t.Event.prototype),e.addEventListener("touchstart",function(t){if("true"===t.target.getAttribute("data-swipe-ignore"))return;s=t.target,r=Date.now(),n=t.touches[0].clientX,a=t.touches[0].clientY,u=0,i=0},!1),e.addEventListener("touchmove",function(t){if(!n||!a)return;var e=t.touches[0].clientX,r=t.touches[0].clientY;u=n-e,i=a-r},!1),e.addEventListener("touchend",function(t){if(s!==t.target)return;var e=parseInt(l(s,"data-swipe-threshold","20"),10),o=parseInt(l(s,"data-swipe-timeout","500"),10),c=Date.now()-r,d="",p=t.changedTouches||t.touches||[];Math.abs(u)>Math.abs(i)?Math.abs(u)>e&&c<o&&(d=u>0?"swiped-left":"swiped-right"):Math.abs(i)>e&&c<o&&(d=i>0?"swiped-up":"swiped-down");if(""!==d){var b={dir:d.replace(/swiped-/,""),touchType:(p[0]||{}).touchType||"direct",xStart:parseInt(n,10),xEnd:parseInt((p[0]||{}).clientX||-1,10),yStart:parseInt(a,10),yEnd:parseInt((p[0]||{}).clientY||-1,10)};s.dispatchEvent(new CustomEvent("swiped",{bubbles:!0,cancelable:!0,detail:b})),s.dispatchEvent(new CustomEvent(d,{bubbles:!0,cancelable:!0,detail:b}))}n=null,a=null,r=null},!1);var n=null,a=null,u=null,i=null,r=null,s=null;function l(t,n,a){for(;t&&t!==e.documentElement;){var u=t.getAttribute(n);if(u)return u;t=t.parentNode}return a}}(window,document);
-</script>
 </body>
 </html>

resources/css/common.css

@@ -12,7 +12,7 @@
   --ls-headbar-height: 3rem;
   --ls-headbar-inner-top-padding: 0px;
   --ls-left-sidebar-width: 246px;
-  --ls-left-sidebar-sm-width: 70%;
+  --ls-left-sidebar-sm-width: 78vw;
   --ls-left-sidebar-nav-btn-size: 38px;
   --ls-error-color: var(--color-red-500);
   --ls-warning-color: var(--color-orange-500);

resources/js/swiped-events.min.js

@@ -0,0 +1,9 @@
+/*!
+ * swiped-events.js - v1.1.6
+ * Pure JavaScript swipe events
+ * https://github.com/john-doherty/swiped-events
+ * @inspiration https://stackoverflow.com/questions/16348031/disable-scrolling-when-touch-moving-certain-element
+ * @author John Doherty <www.johndoherty.info>
+ * @license MIT
+ */
+!function(t,e){"use strict";"function"!=typeof t.CustomEvent&&(t.CustomEvent=function(t,n){n=n||{bubbles:!1,cancelable:!1,detail:void 0};var a=e.createEvent("CustomEvent");return a.initCustomEvent(t,n.bubbles,n.cancelable,n.detail),a},t.CustomEvent.prototype=t.Event.prototype),e.addEventListener("touchstart",function(t){if("true"===t.target.getAttribute("data-swipe-ignore"))return;s=t.target,r=Date.now(),n=t.touches[0].clientX,a=t.touches[0].clientY,u=0,i=0},!1),e.addEventListener("touchmove",function(t){if(!n||!a)return;var e=t.touches[0].clientX,r=t.touches[0].clientY;u=n-e,i=a-r},!1),e.addEventListener("touchend",function(t){if(s!==t.target)return;var e=parseInt(l(s,"data-swipe-threshold","20"),10),o=parseInt(l(s,"data-swipe-timeout","500"),10),c=Date.now()-r,d="",p=t.changedTouches||t.touches||[];Math.abs(u)>Math.abs(i)?Math.abs(u)>e&&c<o&&(d=u>0?"swiped-left":"swiped-right"):Math.abs(i)>e&&c<o&&(d=i>0?"swiped-up":"swiped-down");if(""!==d){var b={dir:d.replace(/swiped-/,""),touchType:(p[0]||{}).touchType||"direct",xStart:parseInt(n,10),xEnd:parseInt((p[0]||{}).clientX||-1,10),yStart:parseInt(a,10),yEnd:parseInt((p[0]||{}).clientY||-1,10)};s.dispatchEvent(new CustomEvent("swiped",{bubbles:!0,cancelable:!0,detail:b})),s.dispatchEvent(new CustomEvent(d,{bubbles:!0,cancelable:!0,detail:b}))}n=null,a=null,r=null},!1);var n=null,a=null,u=null,i=null,r=null,s=null;function l(t,n,a){for(;t&&t!==e.documentElement;){var u=t.getAttribute(n);if(u)return u;t=t.parentNode}return a}}(window,document);

src/main/frontend/components/sidebar.cljs

@@ -226,7 +226,7 @@
 (defn close-sidebar-on-mobile!
   []
   (and (util/sm-breakpoint?)
-    (state/toggle-left-sidebar!)))
+       (state/toggle-left-sidebar!)))
 
 (defn create-dropdown
   []
@@ -257,8 +257,10 @@
    {}))
 
 (rum/defc sidebar-nav
-  [route-match close-modal-fn left-sidebar-open? srs-open? *closing?]
+  [route-match close-modal-fn left-sidebar-open? srs-open? *closing? touching-x-offset]
   (let [[local-closing? set-local-closing?] (rum/use-state false)
+        [el-rect set-el-rect!] (rum/use-state nil)
+        ref-el              (rum/use-ref nil)
         ref-open?           (rum/use-ref left-sidebar-open?)
         default-home        (get-default-home-if-valid)
         route-name          (get-in route-match [:data :name])
@@ -270,7 +272,20 @@
                                  (if (> top 2)
                                    (.add cls cls')
                                    (.remove cls cls'))))
-        close-fn            #(set-local-closing? true)]
+        close-fn            #(set-local-closing? true)
+        touching-x-offset (when (and (number? touching-x-offset)
+                                     (> touching-x-offset 0))
+                            (min touching-x-offset (:width el-rect)))]
+
+    (rum/use-effect!
+     #(js/setTimeout
+       (fn [] (some-> (rum/deref ref-el)
+                      (.getBoundingClientRect)
+                      (.toJSON)
+                      (js->clj :keywordize-keys true)
+                      (set-el-rect!)))
+       16)
+     [])
 
     (rum/use-layout-effect!
      (fn []
@@ -282,7 +297,11 @@
 
     [:<>
      [:div.left-sidebar-inner.flex-1.flex.flex-col.min-h-0
-      {:on-transition-end (fn []
+      {:ref               ref-el
+       :style             (cond-> {}
+                            (number? touching-x-offset)
+                            (assoc :transform (str "translate3d(calc(" touching-x-offset "px - 100%), 0, 0)")))
+       :on-transition-end (fn []
                             (when local-closing?
                               (reset! *closing? false)
                               (set-local-closing? false)
@@ -293,11 +312,12 @@
                                (close-fn)))}
 
       [:div.flex.flex-col.wrap.gap-1.relative
-       (when (mobile-util/native-platform?)
-         [:div.fake-bar.absolute
-          [:button
-           {:on-click state/toggle-left-sidebar!}
-           (ui/icon "menu-2" {:size ui/icon-size})]])
+       ;; temporarily remove fake hamburger menu
+       ;(when (mobile-util/native-platform?)
+       ;  [:div.fake-bar.absolute
+       ;   [:button
+       ;    {:on-click state/toggle-left-sidebar!}
+       ;    (ui/icon "menu-2" {:size ui/icon-size})]])
 
        [:nav.px-4.flex.flex-col.gap-1.cp__menubar-repos
         {:aria-label "Navigation menu"}
@@ -354,10 +374,9 @@
 
        [:div.nav-contents-container.flex.flex-col.gap-1.pt-1
         {:on-scroll on-contents-scroll}
-        (when left-sidebar-open?
-          (favorites t))
+        (favorites t)
 
-        (when (and left-sidebar-open? (not config/publishing?))
+        (when (not config/publishing?)
           (recent-pages t))]
 
        [:footer.px-2 {:class "create"}
@@ -375,16 +394,40 @@
 
 (rum/defcs left-sidebar < rum/reactive
   (rum/local false ::closing?)
+  (rum/local nil ::touch-state)
   [s {:keys [left-sidebar-open? route-match]}]
-  (let [close-fn #(state/set-left-sidebar-open! false)
-        *closing? (::closing? s)
-        srs-open? (= :srs (state/sub :modal/id))]
+  (let [close-fn          #(state/set-left-sidebar-open! false)
+        *closing?         (::closing? s)
+        *touch-state      (::touch-state s)
+        touch-point-fn    (fn [^js e] (some-> (gobj/get e "touches") (aget 0) (#(hash-map :x (.-clientX %) :y (.-clientY %)))))
+        srs-open?         (= :srs (state/sub :modal/id))
+        touching-x-offset (some->> @*touch-state
+                                   ((juxt :after :before))
+                                   (map :x) (apply -))
+        touch-pending?    (> touching-x-offset 20)]
+
     [:div#left-sidebar.cp__sidebar-left-layout
-     {:class (util/classnames [{:is-open left-sidebar-open?
-                                :is-closing @*closing?}])}
+     {:class (util/classnames [{:is-open     left-sidebar-open?
+                                :is-closing  @*closing?
+                                :is-touching touch-pending?}])
+      :on-touch-start
+      (fn [^js e]
+        (when-not left-sidebar-open?
+          (reset! *touch-state {:before (touch-point-fn e)})))
+      :on-touch-move
+      (fn [^js e]
+        (when @*touch-state
+          (some-> *touch-state (swap! assoc :after (touch-point-fn e)))))
+      :on-touch-end
+      (fn []
+        (when (and touch-pending?
+                   (> touching-x-offset 120))
+          (state/set-left-sidebar-open! true))
+        (reset! *touch-state nil))}
 
      ;; sidebar contents
-     (sidebar-nav route-match close-fn left-sidebar-open? srs-open? *closing?)]))
+     (sidebar-nav route-match close-fn left-sidebar-open? srs-open? *closing?
+                  (and touch-pending? touching-x-offset))]))
 
 (rum/defc recording-bar
   []
@@ -594,7 +637,6 @@
                   :exit 300}}
        (render-custom-context-menu links position)))))
 
-
 (rum/defc new-block-mode < rum/reactive
   []
   (when (state/sub [:document/mode?])
@@ -640,7 +682,8 @@
                           (state/close-modal!)
                           (hide-context-menu-and-clear-selection e)))))))
   {:did-mount (fn [state]
-                (swipe/setup-listeners!)
+                (when (mobile-util/native-android?)
+                  (swipe/setup-listeners!))
                 state)}
   [state route-match main-content]
   (let [{:keys [open-fn]} state

src/main/frontend/components/sidebar.css

@@ -335,9 +335,7 @@
 
   left: 0;
   z-index: var(--ls-z-index-level-5);
-  width: 8px;
-
-  background: rgba(255, 0, 0, 0.32);
+  width: 10px;
 
   a {
     @apply opacity-90 hover:opacity-100;
@@ -356,12 +354,26 @@
     left: 0;
     bottom: 0;
     right: 0;
-    z-index: -1;
+    z-index: 1;
     opacity: 0;
     transition: opacity .4s;
     touch-action: none;
   }
 
+  &.is-touching {
+    width: 100%;
+    transition: none;
+
+    .left-sidebar-inner {
+      transition: none !important;
+    }
+
+    > .shade-mask {
+      opacity: .3;
+      z-index: 1;
+    }
+  }
+
   &.is-open {
     width: 100%;