status-im
/
re-frame-10x
mirror of https://github.com/status-im/re-frame-10x.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Handle window viewport size changing, and other misc dragging bugs 

Fixes #26
This commit is contained in:
Daniel Compton 2017-10-19 16:04:25 +13:00
parent 0c7a505690
commit 4d13391c37
2 changed files with 12 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/day8/re_frame/trace.cljs
View File

@ -322,12 +322,12 @@
;; Add clear button ;; Add clear button
;; Filter out different trace types ;; Filter out different trace types
(let [position (r/atom :right) (let [position (r/atom :right)
panel-width-ratio (r/atom (localstorage/get "panel-width-ratio" 0.35)) panel-width% (r/atom (localstorage/get "panel-width-ratio" 0.35))
showing? (r/atom (localstorage/get "show-panel" false)) showing? (r/atom (localstorage/get "show-panel" false))
dragging? (r/atom false) dragging? (r/atom false)
pin-to-bottom? (r/atom true) pin-to-bottom? (r/atom true)
selected-tab (r/atom :traces) selected-tab (r/atom :traces)
window-width js/window.innerWidth window-width (r/atom js/window.innerWidth)
handle-keys (fn [e] handle-keys (fn [e]
(let [combo-key? (or (.-ctrlKey e) (.-metaKey e) (.-altKey e)) (let [combo-key? (or (.-ctrlKey e) (.-metaKey e) (.-altKey e))
tag-name (.-tagName (.-target e)) tag-name (.-tagName (.-target e))
@ -342,11 +342,14 @@
handle-mousemove (fn [e] handle-mousemove (fn [e]
(when @dragging? (when @dragging?
(let [x (.-clientX e) (let [x (.-clientX e)
y (.-clientY e)] y (.-clientY e)
new-window-width js/window.innerWidth]
(.preventDefault e) (.preventDefault e)
(reset! panel-width-ratio (/ (- window-width x) window-width))))) ;; Set a minimum width of 5% to prevent people from accidentally dragging it too small.
(reset! panel-width% (max (/ (- new-window-width x) new-window-width) 0.05))
(reset! window-width new-window-width))))
handle-mouse-up (fn [e] (reset! dragging? false))] handle-mouse-up (fn [e] (reset! dragging? false))]
(add-watch panel-width-ratio (add-watch panel-width%
:update-panel-width-ratio :update-panel-width-ratio
(fn [_ _ _ new-state] (fn [_ _ _ new-state]
(localstorage/save! "panel-width-ratio" new-state))) (localstorage/save! "panel-width-ratio" new-state)))
@ -367,8 +370,8 @@
:display-name "devtools outer" :display-name "devtools outer"
:reagent-render (fn [] :reagent-render (fn []
(let [draggable-area 10 (let [draggable-area 10
left (if @showing? (str (* 100 (- 1 @panel-width-ratio)) "%") left (if @showing? (str (* 100 (- 1 @panel-width%)) "%")
(str window-width "px")) (str @window-width "px"))
transition (if @dragging? transition (if @dragging?
"" ""
ease-transition)] ease-transition)]
@ -376,7 +379,7 @@
{:style {:position "fixed" :width "0px" :height "0px" :top "0px" :left "0px" :z-index 99999999}} {:style {:position "fixed" :width "0px" :height "0px" :top "0px" :left "0px" :z-index 99999999}}
[:div.panel [:div.panel
{:style {:position "fixed" :z-index 1 :box-shadow "rgba(0, 0, 0, 0.3) 0px 0px 4px" :background "white" {:style {:position "fixed" :z-index 1 :box-shadow "rgba(0, 0, 0, 0.3) 0px 0px 4px" :background "white"
:left left :top "0px" :width (str (inc (int (* 100 @panel-width-ratio))) "%") :height "100%" :left left :top "0px" :width (str (inc (int (* 100 @panel-width%))) "%") :height "100%"
:transition transition}} :transition transition}}
[:div.panel-resizer {:style (resizer-style draggable-area) [:div.panel-resizer {:style (resizer-style draggable-area)
:on-mouse-down #(reset! dragging? true)}] :on-mouse-down #(reset! dragging? true)}]

2
src/day8/re_frame/trace/localstorage.cljs
View File

@ -7,7 +7,7 @@
(def storage (goog.storage.Storage. (goog.storage.mechanism.HTML5LocalStorage.))) (def storage (goog.storage.Storage. (goog.storage.mechanism.HTML5LocalStorage.)))
(defn- safe-key [key] (defn- safe-key [key]
"Adds a unique prefix to keys to ensure they don't collide with the host application" "Adds a unique prefix to local storage keys to ensure they don't collide with the host application"
(str "day8.re-frame.trace." key)) (str "day8.re-frame.trace." key))
(defn get (defn get