Skip to content

Commit 5784df8

Browse files
Gregg8Gregg8
committed
Various
 - In production build, arg validation is now optimized OUT of the code. Cleaned up project.clj (only has goog.DEBUG false for prod now). - :model for [slider] now returns data type number as per documentation. - Fixed layout components when there were scrolled scroll bars on the page. - Modified (sum-scroll-offsets) and moved it to util as it's used by both popover and layout now. Updated popover code for this. - Created [round-button] for re-frame. Code is still in there but commented out. Will ultimately delete it.
1 parent ee39db3 commit 5784df8

File tree

11 files changed

+143
-130
lines changed

11 files changed

+143
-130
lines changed

‎project.clj

Lines changed: 29 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -37,13 +37,12 @@
3737
:url "https://github.com/Day8/re-com.git"
3838

3939
:dependencies [[org.clojure/clojure "1.6.0"]
40-
[org.clojure/clojurescript "0.0-2843" scope="provided"] ;; 2843 => 2913
40+
[org.clojure/clojurescript "0.0-2843" scope="provided"] ;; 2843 => 2913 => 2985
4141
;[stabilized/clojurescript "1.0.0" scope="provided"] ;; TODO: Eventually switch to this one (when it works)
4242
[org.clojure/core.async "0.1.346.0-17112a-alpha" scope="provided"]
4343
[reagent "0.5.0-alpha3" scope="provided"]
4444
[com.andrewmcveigh/cljs-time "0.3.2" scope="provided"]]
4545

46-
4746
;:plugins [[lein-unpack-resources "0.1.1"]]
4847
;
4948
;:unpack-resources {:resource [re-com "0.1.6"]
@@ -77,43 +76,37 @@
7776
:resource-paths ["run/resources"]
7877
; :clean-targets [:target-path]
7978

80-
:closure-defines {:goog.DEBUG false}
81-
82-
8379
;; Exclude the demo and compiled files from the output of either 'lein jar' or 'lein install'
8480
:jar-exclusions [#"(?:^|\/)re_demo\/" #"(?:^|\/)compiled.*\/"]
8581

86-
:cljsbuild {:builds [{:id "demo"
87-
:source-paths ["src" "dev"]
88-
:compiler {:output-to "run/resources/public/compiled_dev/demo.js"
89-
:output-dir "run/resources/public/compiled_dev/demo"
90-
91-
:closure-defines {:goog.DEBUG false}
92-
93-
:main "figwheel-start.core"
94-
:asset-path "compiled_dev/demo"
95-
:source-map true
96-
:optimizations :none
97-
:pretty-print true}}
98-
{:id "prod"
99-
:source-paths ["src"]
100-
:compiler {:output-to "run/resources/public/compiled_prod/demo.js"
101-
:source-map "run/resources/public/compiled_prod/demo.js.map"
102-
:output-dir "run/resources/public/compiled_prod/demo"
103-
:closure-defines {:goog.DEBUG false}
104-
;:source-map-path "js/out" ; https://github.com/clojure/clojurescript/wiki/Source-maps#web-server-integration
105-
;:main "re-demo.core" ;; Works but not required in this case becasue index_prod.html knows which function to call
106-
;:asset-path "compiled_prod/demo"
107-
;:elide-asserts true
108-
:optimizations :advanced ;; or :simple :whitespace
109-
:pretty-print false}}
110-
{:id "test"
111-
:source-paths ["src/re_com" "test"]
112-
:compiler {:output-to "run/test/compiled/test.js"
113-
:output-dir "run/test/compiled/test"
114-
:source-map true
115-
:optimizations :none
116-
:pretty-print true}}]}
82+
:cljsbuild {:builds [{:id "demo"
83+
:source-paths ["src" "dev"]
84+
:compiler {:output-to "run/resources/public/compiled_dev/demo.js"
85+
:output-dir "run/resources/public/compiled_dev/demo"
86+
:main "figwheel-start.core"
87+
:asset-path "compiled_dev/demo"
88+
:source-map true
89+
:optimizations :none
90+
:pretty-print true}}
91+
{:id "prod"
92+
:source-paths ["src"]
93+
:compiler {:output-to "run/resources/public/compiled_prod/demo.js"
94+
:source-map "run/resources/public/compiled_prod/demo.js.map"
95+
:output-dir "run/resources/public/compiled_prod/demo"
96+
:closure-defines {:goog.DEBUG false}
97+
;:source-map-path "js/out" ;; https://github.com/clojure/clojurescript/wiki/Source-maps#web-server-integration
98+
;:main "re-demo.core" ;; Works but not required in this case becasue index_prod.html knows which function to call
99+
;:asset-path "compiled_prod/demo"
100+
;:elide-asserts true
101+
:optimizations :advanced
102+
:pretty-print false}}
103+
{:id "test"
104+
:source-paths ["src/re_com" "test"]
105+
:compiler {:output-to "run/test/compiled/test.js"
106+
:output-dir "run/test/compiled/test"
107+
:source-map true
108+
:optimizations :none
109+
:pretty-print true}}]}
117110

118111
:figwheel {:css-dirs ["run/resources/public/resources/css"]
119112
:server-port ~fig-port

‎src/re_com/buttons.cljs

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -376,3 +376,40 @@
376376
:showing? showing?
377377
:anchor the-button]
378378
the-button)))))
379+
380+
381+
;; TODO: Eventually remove
382+
;;----------------------------------------------------------------------
383+
;; Round button with no dependencies - for use in re-frame
384+
;;----------------------------------------------------------------------
385+
386+
#_(defn round-button
387+
"a circular button containing a material design icon"
388+
[]
389+
(let [mouse-over? (reagent/atom false)]
390+
(fn
391+
[& {:keys [md-icon-name on-click disabled? style attr]
392+
:or {md-icon-name "md-add"}}]
393+
[:div
394+
(merge
395+
{:style (merge
396+
{:cursor (when-not disabled? "pointer")
397+
:font-size "24px"
398+
:width "40px"
399+
:height "40px"
400+
:line-height "44px"
401+
:text-align "center"
402+
:-webkit-user-select "none"}
403+
(if disabled?
404+
{:color "lightgrey"}
405+
{:border (str "1px solid " (if @mouse-over? "#428bca" "lightgrey"))
406+
:color (when @mouse-over? "#428bca")
407+
:border-radius "50%"})
408+
style)
409+
:on-mouse-over #(do (reset! mouse-over? true) nil)
410+
:on-mouse-out #(do (reset! mouse-over? false) nil)
411+
:on-click #(when (and on-click (not disabled?))
412+
(on-click)
413+
nil)}
414+
attr)
415+
[:i {:class md-icon-name}]])))

‎src/re_com/core.cljs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -332,7 +332,7 @@
332332
:step step
333333
:value model
334334
:disabled disabled?
335-
:on-change (handler-fn (on-change (double (-> event .-target .-value))))} ;; TODO: Verify that this double fn works
335+
:on-change (handler-fn (on-change (js/Number (-> event .-target .-value))))}
336336
attr)]])))
337337

338338

‎src/re_com/layout.cljs

Lines changed: 11 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
(ns re-com.layout
22
(:require-macros [re-com.core :refer [handler-fn]])
3-
(:require [re-com.validate :refer [extract-arg-data validate-args string-or-hiccup? number-or-string?]]
4-
[reagent.core :as reagent]))
3+
(:require [re-com.util :refer [get-element-by-id sum-scroll-offsets]]
4+
[re-com.validate :refer [extract-arg-data validate-args string-or-hiccup? number-or-string?]]
5+
[reagent.core :as reagent]))
56

67

78
;; CSS
@@ -16,26 +17,6 @@
1617
;; }
1718

1819

19-
;; TODO: MOVE TO utils IF REQUIRED HERE!
20-
21-
(defn sum-scroll-offsets
22-
"Given a DOM node, I traverse through all ascendant nodes (until I reach body), summing any scrollLeft and scrollTop values
23-
and return these sums in a map"
24-
[node]
25-
(let [popover-point-node (.-parentNode node) ;; Get reference to rc-popover-point node
26-
point-left (.-offsetLeft popover-point-node) ;; offsetTop/Left is the viewport pixel offset of the point we want to point to (ignoring scrolls)
27-
point-top (.-offsetTop popover-point-node)]
28-
(loop [current-node popover-point-node
29-
sum-scroll-left 0
30-
sum-scroll-top 0]
31-
;(println "tag" (.-tagName current-node) "scrollTop" (.-scrollTop current-node))
32-
(if (not= (.-tagName current-node) "BODY")
33-
(recur (.-parentNode current-node)
34-
(+ sum-scroll-left (.-scrollLeft current-node))
35-
(+ sum-scroll-top (.-scrollTop current-node)))
36-
{:left (- point-left sum-scroll-left)
37-
:top (- point-top sum-scroll-top)}))))
38-
3920
;; ------------------------------------------------------------------------------------
4021
;; Component: h-layout
4122
;; ------------------------------------------------------------------------------------
@@ -56,18 +37,18 @@
5637
:as args}]
5738
{:pre [(validate-args h-layout-args args "h-layout")]}
5839
(let [container-id (gensym "h-layout-")
59-
this (reagent/current-component)
6040
split-perc (reagent/atom (js/parseInt initial-split)) ;; splitter position as a percentage of width
6141
dragging? (reagent/atom false) ;; is the user dragging the splitter (mouse is down)?
6242
over? (reagent/atom false) ;; is the mouse over the splitter, if so, highlight it
6343

6444
stop-drag #(reset! dragging? false)
6545

6646
calc-perc (fn [mouse-x] ;; turn a mouse y coordinate into a percentage position
67-
(let [container (.getElementById js/document container-id) ;; the outside container
68-
c-width (.-clientWidth container) ;; the container's width
47+
(let [container (get-element-by-id container-id) ;; the outside container
48+
offsets (sum-scroll-offsets container) ;; take any scrolling into account
49+
c-width (.-clientWidth container) ;; the container's width
6950
c-left-x (.-offsetLeft container) ;; the container's left X
70-
relative-x (- mouse-x c-left-x)] ;; the X of the mouse, relative to container
51+
relative-x (+ (- mouse-x c-left-x) (:left offsets))] ;; the X of the mouse, relative to container
7152
(* 100.0 (/ relative-x c-width)))) ;; do the percentage calculation
7253

7354
<html>? #(= % (.-documentElement js/document)) ;; test for the <html> element
@@ -144,24 +125,19 @@
144125
:as args}]
145126
{:pre [(validate-args v-layout-args args "v-layout")]}
146127
(let [container-id (gensym "v-layout-")
147-
this (reagent/current-component)
148128
split-perc (reagent/atom (js/parseInt initial-split)) ;; splitter position as a percentage of height
149129
dragging? (reagent/atom false) ;; is the user dragging the splitter (mouse is down)?
150130
over? (reagent/atom false) ;; is the mouse over the splitter, if so, highlight it
151131

152132
stop-drag #(reset! dragging? false)
153133

154134
calc-perc (fn [mouse-y] ;; turn a mouse y coordinate into a percentage position
155-
(let [container (.getElementById js/document container-id) ;; the outside container
156-
offsets (sum-scroll-offsets container)
135+
(let [container (get-element-by-id container-id) ;; the outside container
136+
offsets (sum-scroll-offsets container) ;; take any scrolling into account
157137
c-height (.-clientHeight container) ;; the container's height
158138
c-top-y (.-offsetTop container) ;; the container's top Y
159-
c-top-y-2 (:top offsets) ;; the container's top Y
160-
relative-y (- mouse-y c-top-y)
161-
relative-y-2 (- mouse-y c-top-y-2)
162-
;_ (println "mouse-y" mouse-y "offsets" offsets "c-height" c-height "c-top-y" c-top-y "relative-y" relative-y "c-top-y-2" c-top-y-2 "relative-y-2" relative-y-2)
163-
] ;; the Y of the mouse, relative to container
164-
(* 100.0 (/ relative-y-2 c-height)))) ;; do the percentage calculation
139+
relative-y (+ (- mouse-y c-top-y) (:top offsets))] ;; the Y of the mouse, relative to container
140+
(* 100.0 (/ relative-y c-height)))) ;; do the percentage calculation
165141

166142
<html>? #(= % (.-documentElement js/document)) ;; test for the <html> element
167143

‎src/re_com/popover.cljs

Lines changed: 8 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
(ns re-com.popover
22
(:require-macros [re-com.core :refer [handler-fn]])
3-
(:require [re-com.util :refer [get-element-by-id px deref-or-value]]
3+
(:require [re-com.util :refer [get-element-by-id px deref-or-value sum-scroll-offsets]]
44
[re-com.validate :refer [extract-arg-data validate-args position? position-options-list popover-status-type? popover-status-types-list
55
number-or-string? string-or-hiccup? string-or-atom? vector-of-maps? css-style? html-attr?]]
66
[clojure.string :as string]
@@ -96,25 +96,6 @@
9696
:stroke (when-not no-border? "rgba(0, 0, 0, .2)")
9797
:stroke-width "1"}}]]))
9898

99-
100-
(defn sum-scroll-offsets
101-
"Given a DOM node, I traverse through all ascendant nodes (until I reach body), summing any scrollLeft and scrollTop values
102-
and return these sums in a map"
103-
[node]
104-
(let [popover-point-node (.-parentNode node) ;; Get reference to rc-popover-point node
105-
point-left (.-offsetLeft popover-point-node) ;; offsetTop/Left is the viewport pixel offset of the point we want to point to (ignoring scrolls)
106-
point-top (.-offsetTop popover-point-node)]
107-
(loop [current-node popover-point-node
108-
sum-scroll-left 0
109-
sum-scroll-top 0]
110-
(if (not= (.-tagName current-node) "BODY")
111-
(recur (.-parentNode current-node)
112-
(+ sum-scroll-left (.-scrollLeft current-node))
113-
(+ sum-scroll-top (.-scrollTop current-node)))
114-
{:left (- point-left sum-scroll-left)
115-
:top (- point-top sum-scroll-top)}))))
116-
117-
11899
;;--------------------------------------------------------------------------------------------------
119100
;; Component: backdrop
120101
;;--------------------------------------------------------------------------------------------------
@@ -306,9 +287,13 @@
306287
{:component-did-mount
307288
(fn [event]
308289
(when no-clip?
309-
(let [offsets (sum-scroll-offsets (reagent/dom-node event))]
310-
(reset! left-offset (:left offsets))
311-
(reset! top-offset (:top offsets)))))
290+
(let [node (reagent/dom-node event)
291+
offsets (sum-scroll-offsets node)
292+
popover-point-node (.-parentNode node) ;; Get reference to rc-popover-point node
293+
point-left (.-offsetLeft popover-point-node) ;; offsetTop/Left is the viewport pixel offset of the point we want to point to (ignoring scrolls)
294+
point-top (.-offsetTop popover-point-node)]
295+
(reset! left-offset (- point-left (:left offsets)))
296+
(reset! top-offset (- point-top (:top offsets))))))
312297

313298
:component-function
314299
(fn

‎src/re_com/util.cljs

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -109,3 +109,17 @@
109109
(let [c (dec (count coll))
110110
f (fn [index item] [index item (= 0 index) (= c index)])]
111111
(map-indexed f coll)))
112+
113+
(defn sum-scroll-offsets
114+
"Given a DOM node, I traverse through all ascendant nodes (until I reach body), summing any scrollLeft and scrollTop values
115+
and return these sums in a map"
116+
[node]
117+
(loop [current-node (.-parentNode node) ;; Begin at parent
118+
sum-scroll-left 0
119+
sum-scroll-top 0]
120+
(if (not= (.-tagName current-node) "BODY")
121+
(recur (.-parentNode current-node)
122+
(+ sum-scroll-left (.-scrollLeft current-node))
123+
(+ sum-scroll-top (.-scrollTop current-node)))
124+
{:left sum-scroll-left
125+
:top sum-scroll-top})))

0 commit comments

Comments
 (0)