action_bar.cljs 3.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374
  1. (ns frontend.mobile.action-bar
  2. "Block Action bar, activated when swipe on a block"
  3. (:require
  4. [frontend.db :as db]
  5. [frontend.extensions.srs :as srs]
  6. [frontend.handler.editor :as editor-handler]
  7. [frontend.mixins :as mixins]
  8. [frontend.state :as state]
  9. [frontend.ui :as ui]
  10. [frontend.util :as util]
  11. [frontend.util.url :as url-util]
  12. [goog.dom :as gdom]
  13. [goog.object :as gobj]
  14. [rum.core :as rum]
  15. [logseq.common.util.block-ref :as block-ref]
  16. [frontend.mobile.util :as mobile-util]))
  17. (defn- action-command
  18. [icon description command-handler]
  19. (let [callback
  20. (fn []
  21. (state/set-state! :mobile/show-action-bar? false)
  22. (editor-handler/clear-selection!))]
  23. [:button.bottom-action.flex-row
  24. {:on-click (fn [_event]
  25. (command-handler)
  26. (callback))}
  27. (ui/icon icon {:style {:fontSize 23}})
  28. [:div.description description]]))
  29. (rum/defcs action-bar < rum/reactive
  30. (mixins/event-mixin
  31. (fn [state]
  32. (mixins/hide-when-esc-or-outside
  33. state
  34. :on-hide (fn []
  35. (editor-handler/clear-selection!)
  36. (state/set-state! :mobile/show-action-bar? false)))))
  37. [state]
  38. (when-let [block (state/sub :mobile/actioned-block)]
  39. (let [{:block/keys [uuid children]} block
  40. last-child-block-id (when-not (empty? children)
  41. (->> (db/get-block-children (state/get-current-repo) uuid)
  42. (filter #(not (db/parents-collapsed? (state/get-current-repo) (:block/uuid %1)))) ;; DOM nodes of blocks the have collapsed parents have no bounding client rect
  43. last
  44. :block/uuid))]
  45. ;; scroll to the most bottom element of the selected block
  46. (let [tag-id (or last-child-block-id uuid)
  47. bottom-el (gdom/getElement (str "block-content-" tag-id))
  48. bottom (gobj/get (.getBoundingClientRect bottom-el) "bottom")
  49. vw-height (or (.-height js/window.visualViewport)
  50. (.-clientHeight js/document.documentElement))
  51. delta (- vw-height bottom 170)]
  52. (when (< delta 0)
  53. (.scrollBy (util/app-scroll-container-node) #js {:top (- 10 delta)})))
  54. [:div.action-bar
  55. [:div.action-bar-commands
  56. (action-command "infinity" "Card" #(srs/make-block-a-card! (:block/uuid block)))
  57. (action-command "copy" "Copy" #(editor-handler/copy-selection-blocks false))
  58. (action-command "cut" "Cut" #(editor-handler/cut-selection-blocks true))
  59. (action-command "trash" "Delete" #(editor-handler/delete-block-aux! block true))
  60. (action-command "registered" "Copy ref"
  61. (fn [_event] (editor-handler/copy-block-ref! uuid block-ref/->block-ref)))
  62. (action-command "link" "Copy url"
  63. (fn [_event] (let [current-repo (state/get-current-repo)
  64. tap-f (fn [block-id]
  65. (url-util/get-logseq-graph-uuid-url nil current-repo block-id))]
  66. (editor-handler/copy-block-ref! uuid tap-f))))
  67. (when (mobile-util/native-ipad?)
  68. (action-command "text-direction-ltr" "Right sidebar"
  69. (fn [_event]
  70. (let [current-repo (state/get-current-repo)]
  71. (state/sidebar-add-block! current-repo uuid :block-ref)))))]])))