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

Update window width state when window resizes 

Fixes #26
This commit is contained in:
Daniel Compton 2017-10-20 15:08:23 +13:00
parent 05656af0b9
commit 2858a0ff6c
1 changed files with 35 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -318,34 +318,37 @@
(defn devtools [] (defn devtools []
;; 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% (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 (r/atom js/window.innerWidth) window-width (r/atom js/window.innerWidth)
handle-keys (fn [e] handle-window-resize (fn [e]
(let [combo-key? (or (.-ctrlKey e) (.-metaKey e) (.-altKey e)) ;; N.B. I don't think this should be a perf bottleneck.
tag-name (.-tagName (.-target e)) (reset! window-width js/window.innerWidth))
key (.-key e) handle-keys (fn [e]
entering-input? (contains? #{"INPUT" "SELECT" "TEXTAREA"} tag-name)] (let [combo-key? (or (.-ctrlKey e) (.-metaKey e) (.-altKey e))
(when (and (not entering-input?) combo-key?) tag-name (.-tagName (.-target e))
(cond key (.-key e)
(and (= key "h") (.-ctrlKey e)) entering-input? (contains? #{"INPUT" "SELECT" "TEXTAREA"} tag-name)]
(do (swap! showing? not) (when (and (not entering-input?) combo-key?)
(toggle-traces showing?) (cond
(.preventDefault e)))))) (and (= key "h") (.-ctrlKey e))
handle-mousemove (fn [e] (do (swap! showing? not)
(when @dragging? (toggle-traces showing?)
(let [x (.-clientX e) (.preventDefault e))))))
y (.-clientY e) handle-mousemove (fn [e]
new-window-width js/window.innerWidth] (when @dragging?
(.preventDefault e) (let [x (.-clientX e)
;; Set a minimum width of 5% to prevent people from accidentally dragging it too small. y (.-clientY e)
(reset! panel-width% (max (/ (- new-window-width x) new-window-width) 0.05)) new-window-width js/window.innerWidth]
(reset! window-width new-window-width)))) (.preventDefault e)
handle-mouse-up (fn [e] (reset! dragging? false))] ;; 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))]
(add-watch panel-width% (add-watch panel-width%
:update-panel-width-ratio :update-panel-width-ratio
(fn [_ _ _ new-state] (fn [_ _ _ new-state]
@ -359,11 +362,13 @@
(toggle-traces showing?) (toggle-traces showing?)
(js/window.addEventListener "keydown" handle-keys) (js/window.addEventListener "keydown" handle-keys)
(js/window.addEventListener "mousemove" handle-mousemove) (js/window.addEventListener "mousemove" handle-mousemove)
(js/window.addEventListener "mouseup" handle-mouse-up)) (js/window.addEventListener "mouseup" handle-mouse-up)
(js/window.addEventListener "resize" handle-window-resize))
:component-will-unmount (fn [] :component-will-unmount (fn []
(js/window.removeEventListener "keydown" handle-keys) (js/window.removeEventListener "keydown" handle-keys)
(js/window.removeEventListener "mousemove" handle-mousemove) (js/window.removeEventListener "mousemove" handle-mousemove)
(js/window.removeEventListener "mouseup" handle-mouse-up)) (js/window.removeEventListener "mouseup" handle-mouse-up)
(js/window.removeEventListener "resize" handle-window-resize))
:display-name "devtools outer" :display-name "devtools outer"
:reagent-render (fn [] :reagent-render (fn []
(let [draggable-area 10 (let [draggable-area 10