/src/app/comp/bookmark.cljs

https://github.com/Cirru/calcit-editor · ClojureScript · 65 lines · 57 code · 8 blank · 0 comment · 0 complexity · 06972f9042e26807902c08dfcdcffb79 MD5 · raw file 

    

  1. (ns app.comp.bookmark
    2. 

  2.   (:require [clojure.string :as string]
    3. 

  3.             [hsl.core :refer [hsl]]
    4. 

  4.             [respo-ui.core :as ui]
    5. 

  5.             [respo.core :refer [defcomp <> span div a]]
    6. 

  6.             [respo.comp.space :refer [=<]]))
    7. 

  7. 

  8. (defn on-pick [bookmark idx]
    9. 

  9.   (fn [e d!]
    10. 

  10.     (let [event (:original-event e)
    11. 

  11.           shift? (.-shiftKey event)
    12. 

  12.           alt? (.-altKey event)
    13. 

  13.           meta? (.-metaKey event)]
    14. 

  14.       (cond
    15. 

  15.         meta? (d! :writer/collapse idx)
    16. 

  16.         alt? (d! :writer/remove-idx idx)
    17. 

  17.         :else (d! :writer/point-to idx)))))
    18. 

  18. 

  19. (def style-bookmark
    20. 

  20.   {:line-height "1.2em",
    21. 

  21.    :padding "4px 8px",
    22. 

  22.    :cursor :pointer,
    23. 

  23.    :position :relative,
    24. 

  24.    :white-space :nowrap})
    25. 

  25. 

  26. (def style-highlight {:color (hsl 0 0 100)})
    27. 

  27. 

  28. (def style-kind
    29. 

  29.   {:color (hsl 340 80 60),
    30. 

  30.    :font-family ui/font-normal,
    31. 

  31.    :font-size 12,
    32. 

  32.    :margin-right 4,
    33. 

  33.    :vertical-align :middle})
    34. 

  34. 

  35. (def style-main {:vertical-align :middle, :color (hsl 0 0 70), :font-family ui/font-normal})
    36. 

  36. 

  37. (def style-minor {:color (hsl 0 0 40), :font-size 12})
    38. 

  38. 

  39. (defcomp
    40. 

  40.  comp-bookmark
    41. 

  41.  (bookmark idx selected?)
    42. 

  42.  (div
    43. 

  43.   {:class-name "stack-bookmark",
    44. 

  44.    :draggable true,
    45. 

  45.    :on-click (on-pick bookmark idx),
    46. 

  46.    :on-dragstart (fn [e d!] (-> e :event .-dataTransfer (.setData "id" idx))),
    47. 

  47.    :on-drop (fn [e d!]
    48. 

  48.      (let [target-idx (js/parseInt (-> e :event .-dataTransfer (.getData "id")))]
    49. 

  49.        (when (not= target-idx idx) (d! :writer/move-order {:from target-idx, :to idx})))),
    50. 

  50.    :on-dragover (fn [e d!] (-> e :event .preventDefault))}
    51. 

  51.   (case (:kind bookmark)
    52. 

  52.     :def
    53. 

  53.       (div
    54. 

  54.        {:style (merge style-bookmark)}
    55. 

  55.        (div
    56. 

  56.         {}
    57. 

  57.         (span
    58. 

  58.          {:inner-text (:extra bookmark),
    59. 

  59.           :style (merge style-main (if selected? style-highlight))}))
    60. 

  60.        (div {:style ui/row-middle} (=< 4 nil) (<> (:ns bookmark) style-minor)))
    61. 

  61.     (div
    62. 

  62.      {:style (merge style-bookmark {:padding "8px"})}
    63. 

  63.      (<> span (str (:kind bookmark)) style-kind)
    64. 

  64.      (<> (:ns bookmark) (merge style-main (if selected? style-highlight)))))))
    65.