`; can be omitted if the items are
49 | strings, numbers or anything else that converts to a string that browsers
50 | can display
51 | * `match-fn` (optional but recommended) - a function that takes two
52 | arguments, an item and the text currently entered into the Selectable;
53 | the function must return a true-ish value if the item is to be included
54 | in the matches for the text
55 | * `match-element-fn` (optional but recommended) - a function that takes
56 | on argument, an item, and must return a React element for the item; this
57 | element is then rendered inside a `
` in
58 | the popup showing the matches for the current text; can be omitted if the
59 | items are strings, numbers or anything else that converts to a string that
60 | browsers can display
61 | * `change-fn` (optional) - a function that takes one argument, an ordered
62 | collection of a subset of the input items; this function is called
63 | whenever the selected items change; it can be used to sync the change to
64 | your application state")
65 |
66 | (defcard
67 | "## Keyboard navigation
68 |
69 | In addition to typing text into the selectable, special behaviour is
70 | defined for the following keys:
71 |
72 | * *Backspace* - removes the selected item before the caret
73 | * *Delete* - removes the selected item after the caret
74 | * *Escape* - hides the matches popup
75 | * *Return* - adds the highlighted match in the popup to the selection
76 | * *Up* - highlights the previous match in the popup
77 | * *Down* - highlights the next match in the popup
78 | * *Left* - moves the caret to the left
79 | * *Right* - moves the caret to the right
80 | * *Home* - moves the caret to the beginning of the selection
81 | * *End* - moves the caret to the end of the selection")
82 |
83 | (defcard-doc
84 | "## Usage examples")
85 |
86 | (defn style-container1 [child]
87 | (dom/div #js {:className "style-container1"}
88 | (dom/style nil
89 | (css [:.style-container1 {}
90 | [[:.selectable {:box-sizing "border-box"
91 | :border "thin solid #ddd"
92 | :position "relative"
93 | :padding "5px"
94 | :padding-left "5px"}]
95 | [:.selectable-selected-item {:display "inline-block"
96 | :padding "5px"
97 | :margin-right "5px"
98 | :background "#00b8d4"
99 | :color "#fff"}]
100 | [:.selectable-input-box {:display "inline-block"}]
101 | [:.selectable-input {:padding "5px"
102 | :padding-left "0px"
103 | :margin "0"}]
104 | [:.selectable-matches {:position "absolute"
105 | :top "100%"
106 | :left 0
107 | :z-index 99
108 | :box-sizing "border-box"
109 | :width "100%"
110 | :background "#fff"
111 | :border-left "thin solid #ddd"
112 | :border-right "thin solid #ddd"
113 | :border-bottom "thin solid #ddd"}]
114 | [:.selectable-match {:padding "5px"}]
115 | [:.selectable-match-active {:background "#eee"}]]]))
116 | child))
117 |
118 | (defcard
119 | "Selectable list of numbers
120 |
121 | ```
122 | (selectable {:items (:numbers @state)
123 | :key-fn identity
124 | :match-fn #(re-matches (re-pattern (str \".*\" %2 \".*\"))
125 | (str %1))
126 | :change-fn #(swap! state assoc :selected %)})
127 | ```"
128 | (fn [state _]
129 | (style-container1
130 | (selectable {:items (:numbers @state)
131 | :key-fn identity
132 | :match-fn #(re-matches (re-pattern (str ".*" %2 ".*"))
133 | (str %1))
134 | :change-fn #(swap! state assoc :selected %)})))
135 | {:numbers [1 10 100 1000 2 25 250 1025 3330 130]}
136 | {:inspect-data true :history false})
137 |
138 | (defcard
139 | "Selectable list of maps (blog posts), matched by tags.
140 |
141 | ```
142 | (selectable {:items (:maps @state)
143 | :key-fn :id
144 | :element-fn #(dom/button nil (:title %))
145 | :match-element-fn
146 | (fn [item]
147 | (dom/p nil
148 | (dom/strong nil (:title item))
149 | (dom/span #js {:style #js {:marginLeft \"10px\"}}
150 | \"Tags: \" (join \", \" (:tags item)))))
151 | :match-fn
152 | (fn [item text]
153 | (let [pattern (re-pattern (str \".*\" text \".*\"))]
154 | (some #(re-matches pattern %) (:tags item))))
155 | :change-fn #(swap! state assoc :selected %)})))
156 | ```"
157 | (fn [state _]
158 | (style-container1
159 | (selectable {:items (:maps @state)
160 | :key-fn :id
161 | :element-fn #(dom/button nil (:title %))
162 | :match-element-fn
163 | (fn [item]
164 | (dom/p nil
165 | (dom/strong nil (:title item))
166 | (dom/span #js {:style #js {:marginLeft "10px"}}
167 | "Tags: " (join ", " (:tags item)))))
168 | :match-fn
169 | (fn [item text]
170 | (let [pattern (re-pattern (str ".*" text ".*"))]
171 | (some #(re-matches pattern %) (:tags item))))
172 | :change-fn #(swap! state assoc :selected %)})))
173 | {:maps [{:id 1 :title "Post 1" :tags ["personal" "work"]}
174 | {:id 2 :title "Post 3" :tags ["work"]}
175 | {:id 3 :title "Post 4" :tags ["personal" "work" "community"]}]}
176 | {:inspect-data true :history false})
177 |
178 | (defcard
179 | "Basic styling
180 |
181 | ```
182 | .selectable {
183 | position: relative;
184 | box-sizing: border-box;
185 | border: thin solid #ddd;
186 | padding: 5px;
187 | padding-left: 5px;
188 | }
189 |
190 | .selectable-selected-item {
191 | display: inline-block;
192 | margin-right: 5px;
193 | padding: 5px;
194 | background: #00b8d4;
195 | color: #fff;
196 | }
197 |
198 | .selectable-input-box {
199 | display: inline-block;
200 | }
201 |
202 | .selectable-input {
203 | margin: 0;
204 | padding: 5px;
205 | padding-left: 0px;
206 | }
207 |
208 | .selectable-matches {
209 | position: absolute;
210 | width: 100%;
211 | top: 100%;
212 | left: 0;
213 | z-index: 99;
214 | box-sizing: border-box;
215 | border-bottom: thin solid #ddd;
216 | border-left: thin solid #ddd;
217 | border-right: thin solid #ddd;
218 | background: #fff;
219 | }
220 |
221 | .selectable-match {
222 | padding: 5px;
223 | }
224 |
225 | .selectable-match-active {
226 | background: #eee;
227 | }
228 | ```"
229 | (fn [state _]
230 | (style-container1
231 | (selectable {:items (:items @state)
232 | :key-fn identity
233 | :match-fn #(re-matches (re-pattern (str ".*" %2 ".*")) %1)
234 | :change-fn #(swap! state assoc :selected %)})))
235 | {:items ["First" "Second" "Third" "Fourth" "Fifth"]}
236 | {:inspect-data true :history false})
237 |
--------------------------------------------------------------------------------
/src/docs/om_mantras/docs/sortable.cljs:
--------------------------------------------------------------------------------
1 | (ns om-mantras.docs.sortable
2 | (:require [clojure.string :refer [split]]
3 | [devcards.core :refer-macros [defcard defcard-doc]]
4 | [garden.core :refer [css]]
5 | [om.dom :as dom]
6 | [om-mantras.sortable :refer [sortable]]))
7 |
8 | (defcard-doc
9 | "# Sortable
10 |
11 | Sortable is a reusable Om Next component for rendering an ordered
12 | collection of items as a vertical or horizontal list and reordering
13 | its items using drag and drop. Sortable can be used in flexible ways,
14 | preserves all freedom of styling and allows custom elements to be
15 | defined for the items. It also supports a callback to notify the
16 | outside world whenever the order of items has changed.")
17 |
18 | (defcard-doc
19 | "## Interface
20 |
21 | Sortable is created as follows:
22 |
23 | ```
24 | (sortable {:items ...
25 | :direction ...
26 | :key-fn ...
27 | :element-fn ...
28 | :change-fn ...})
29 | ```
30 |
31 | ### Parameters
32 |
33 | * `items` (mandatory) - an ordered collection of items; these can be anything:
34 | numbers, strings, maps, vectors, it doesn't matter
35 | * `direction` (optional) - the direction along which the items are rendered;
36 | either `:vertical` (default) or `:horizontal`; this has no effect on
37 | rendering, it only affects how the drag position is calculated
38 | * `key-fn` (optional but recommended) - a function that takes one argument,
39 | an item, and must return a unique key for the item in the collection; can
40 | be omitted if the items themselves are distinct strings or numbers
41 | * `element-fn` (optional but recommended) - a function that takes one
42 | argument, an item, and must return a React element for the item; inside
43 | Sortable, the returned elements are each wrapped in a
44 | `
`; can be optional if the items are strings,
45 | numbers or anything else that converts to a string that browsers can
46 | display
47 | * `change-fn` (optional) - a function that takes one argument, a reordered
48 | collection of the input items; this function is called whenever the items
49 | are reordered using drag and drop; it can be used to sync the change to
50 | your application state")
51 |
52 | (defcard-doc
53 | "## Usage examples")
54 |
55 | (defcard
56 | "Sortable list of numbers
57 |
58 | ```
59 | (sortable {:items (:numbers @state)
60 | :key-fn identity
61 | :change-fn (fn [items]
62 | (js/alert items)
63 | (swap! state assoc :numbers items))})
64 | ```"
65 | (fn [state _]
66 | (sortable {:items (:numbers @state)
67 | :change-fn (fn [items]
68 | (js/alert items)
69 | (swap! state assoc :numbers items))}))
70 | {:numbers [1 2 3 4]}
71 | {:inspect-data true :history true})
72 |
73 | (defcard
74 | "Sortable list of maps
75 |
76 | ```
77 | (sortable {:items (:maps @state)
78 | :key-fn :id
79 | :element-fn #(dom/span nil (str (:id %) \" - \" (:text %)))
80 | :change-fn (fn [items]
81 | (swap! state assoc :maps items))})
82 | ```"
83 | (fn [state _]
84 | (sortable {:items (:maps @state)
85 | :key-fn :id
86 | :element-fn #(dom/span nil (str (:id %) " - " (:text %)))
87 | :change-fn (fn [items]
88 | (swap! state assoc :maps items))}))
89 | {:maps [{:id 1 :text "Foo"} {:id 2 :text "Bar"} {:id 3 :text "Baz"}]}
90 | {:inspect-data true :history true})
91 |
92 | (defcard
93 | "Sortable list of vectors
94 |
95 | ```
96 | (sortable {:items (:vectors @state)
97 | :key-fn first
98 | :element-fn #(dom/span nil (str (first %) \" - \" (second %)))
99 | :change-fn (fn [items]
100 | (swap! state assoc :vectors items))})
101 | ```"
102 | (fn [state _]
103 | (sortable {:items (:vectors @state)
104 | :key-fn first
105 | :element-fn #(dom/span nil (str (first %) " - " (second %)))
106 | :change-fn (fn [items]
107 | (swap! state assoc :vectors items))}))
108 | {:vectors [[1 "Foo"] [2 "Bar"] [3 "Baz"]]}
109 | {:inspect-data true :history true})
110 |
111 | (defcard-doc
112 | "## Styling
113 |
114 | Sortable can be styled freely. It defines three CSS classes that you
115 | can customize to whatever degree you like. They are:
116 |
117 | * `.sortable` - set on the sortable container (a `div`)
118 | * `.sortable-item` - set on the items (`div`) that wrap the elements
119 | created for each item in the collection
120 | * `.sortable-item-dragged` - set on the item that is currently being
121 | dragged
122 |
123 | In addition, the selector `.sortable-item-dragged *` is often useful
124 | to hide the content of the item currently being dragged or apply other
125 | transformations (opacity, scaling etc.) to it.
126 |
127 | ### Vertical vs. horizontal
128 |
129 | Styling is entirely up to your app. The `:direction` parameter that can
130 | be passed to Sortable does not affect rendering in any way. The HTML element
131 | structure of Sortable looks like this:
132 |
133 | ```
134 |
135 |
136 | Some item
137 |
138 |
139 | Another item
140 |
141 |
142 | Dragged item
143 |
144 |
145 | ```
146 |
147 | Since `div`s are, by default, rendered as block elements, the default
148 | rendering is vertical. To change Sortable to be horizontal, your app
149 | can employ style hints like
150 |
151 | ```
152 | .sortable-item { display: inline-block; }
153 | ```
154 |
155 | or even
156 |
157 | ```
158 | .sortable { display: table; }
159 | .sortable-item { display: table-cell; }
160 | ```")
161 |
162 | (defcard-doc
163 | "### Styling examples")
164 |
165 | (defcard
166 | "No styling at all"
167 | (fn [state _]
168 | (sortable {:items (:items @state)
169 | :change-fn #(swap! state assoc :items %)}))
170 | {:items ["First" "Second" "Third" "Fourth" "Fifth"]}
171 | {:inspect-data true :history true})
172 |
173 | (defn style-container1 [child]
174 | (dom/div #js {:className "style-container1"}
175 | (dom/style nil
176 | (css [:.style-container1 {}
177 | [[:.sortable {:border "thin solid #eee"}]
178 | [:.sortable-item {:margin "10px"
179 | :padding "10px"
180 | :border "thin solid #ddd"
181 | :background "#f8f8f8"
182 | :cursor "move"}]]]))
183 | child))
184 |
185 | (defcard
186 | "Basic styling, excluding the dragged item
187 |
188 | ```
189 | .sortable {
190 | border: thin solid #eee;
191 | }
192 | .sortable-item {
193 | margin: 10px;
194 | padding: 10px;
195 | border: thin solid #ddd;
196 | background: #f8f8f8;
197 | cursor: move;
198 | }
199 | ```"
200 | (fn [state _]
201 | (style-container1
202 | (sortable {:items (:items @state)
203 | :change-fn #(swap! state assoc :items %)})))
204 | {:items ["First" "Second" "Third" "Fourth" "Fifth"]}
205 | {:inspect-data true :history true})
206 |
207 | (defn style-container2 [child]
208 | (dom/div #js {:className "style-container2"}
209 | (dom/style nil
210 | (css [:.style-container2 {}
211 | [[:.sortable {:border "thin solid #eee"}]
212 | [:.sortable-item {:margin "10px"
213 | :padding "10px"
214 | :border "thin solid #ddd"
215 | :background "#f8f8f8"
216 | :cursor "move"}]
217 | [:.sortable-item-dragged {:opacity "0"}]]]))
218 | child))
219 |
220 | (defcard
221 | "Hiding the dragged item to make it look like other items are
222 | pushed out of the way.
223 |
224 | ```
225 | .sortable {
226 | border: thin solid #eee;
227 | }
228 | .sortable-item {
229 | margin: 10px;
230 | padding: 10px;
231 | border: thin solid #ddd;
232 | background: #f8f8f8;
233 | cursor: move;
234 | }
235 | .sortable-item-dragged {
236 | opacity: 0;
237 | }
238 | ```"
239 | (fn [state _]
240 | (style-container2
241 | (sortable {:items (:items @state)
242 | :change-fn #(swap! state assoc :items %)})))
243 | {:items ["First" "Second" "Third" "Fourth" "Fifth"]}
244 | {:inspect-data true :history true})
245 |
246 | (defn style-container3 [child]
247 | (dom/div #js {:className "style-container3"}
248 | (dom/style nil
249 | (css [:.style-container3 {}
250 | [[:.sortable {:border "thin solid #eee"}]
251 | [:.sortable-item {:margin "10px"
252 | :padding "10px"
253 | :border "thin solid #ddd"
254 | :background "#f8f8f8"
255 | :cursor "move"}]
256 | [:.sortable-item-dragged {:border "thin solid transparent"}
257 | [:* {:opacity "0"}]]]]))
258 | child))
259 |
260 | (defcard
261 | "Hiding the contents of the dragged item to make it look like a drop area.
262 |
263 | ```
264 | .sortable {
265 | border: thin solid #eee;
266 | }
267 | .sortable-item {
268 | margin: 10px;
269 | padding: 10px;
270 | border: thin solid #ddd;
271 | background: #f8f8f8;
272 | cursor: move;
273 | }
274 | .sortable-item-dragged {
275 | border: thin solid transparent;
276 | * {
277 | opacity: 0;
278 | }
279 | }
280 | ```"
281 | (fn [state _]
282 | (style-container3
283 | (sortable {:items (:items @state)
284 | :element-fn #(dom/span nil %)
285 | :change-fn #(swap! state assoc :items %)})))
286 | {:items ["First" "Second" "Third" "Fourth" "Fifth"]}
287 | {:inspect-data true :history true})
288 |
289 | (defn style-container4 [child]
290 | (dom/div #js {:className "style-container4"}
291 | (dom/style nil
292 | (css [:.style-container4 {}
293 | [[:.sortable {:padding "10px"}]
294 | [:.sortable-item {:margin "10px"
295 | :padding "10px"
296 | :background "#00b8d4"
297 | :color "#fff"
298 | :cursor "move"
299 | :transition "transform 0.1s ease-in"}]
300 | [:.sortable-item-dragged {:opacity "0.5"
301 | :transform "scale(0.8, 0.8)"}]]]))
302 | child))
303 |
304 | (defcard
305 | "Applying a scale transition to the dragged item
306 |
307 | ```
308 | .sortable {
309 | padding: 10px;
310 | }
311 | .sortable-item {
312 | margin: 10px;
313 | padding: 10px;
314 | background: #00b8d4;
315 | color: #fff;
316 | cursor: move;
317 | transition: transform 0.1s ease-in;
318 | }
319 | .sortable-item-dragged {
320 | opacity: 0.5;
321 | transform: scale(0.8, 0.8);
322 | }
323 | ```"
324 | (fn [state _]
325 | (style-container4
326 | (sortable {:items (:items @state)
327 | :element-fn #(dom/span nil %)
328 | :change-fn #(swap! state assoc :items %)})))
329 | {:items ["First" "Second" "Third" "Fourth" "Fifth"]}
330 | {:inspect-data true :history true})
331 |
332 | (defn style-container5 [child]
333 | (dom/div #js {:className "style-container5"}
334 | (dom/style nil
335 | (css [:.style-container5 {}
336 | [[:.sortable {:padding "10px"}]
337 | [:.sortable-item {:display "inline-block"
338 | :margin "10px"
339 | :background "#eee"
340 | :cursor "move"}
341 | [:* {:display "inline-block"
342 | :padding "10px"
343 | :background "#00b8d4"
344 | :color "#fff"}]]
345 | [:.sortable-item-dragged {}
346 | [:* {:opacity "0"}]]]]))
347 | child))
348 |
349 | (defcard
350 | "Horizontal sortable with drop area look
351 |
352 | ```
353 | .sortable {
354 | padding: 10px;
355 | }
356 | .sortable-item {
357 | display: inline-block;
358 | margin: 10px;
359 | background: #eee;
360 | cursor: move;
361 | * {
362 | display: inline-block;
363 | padding: 10px;
364 | background: #00b8d4;
365 | color: #fff;
366 | }
367 | }
368 | .sortable-item-dragged {
369 | * { opacity: 0; }
370 | }
371 | ```"
372 | (fn [state _]
373 | (style-container5
374 | (sortable {:items (:items @state)
375 | :direction :horizontal
376 | :element-fn #(dom/span nil %)
377 | :change-fn #(swap! state assoc :items %)})))
378 | {:items ["First" "Second" "Third" "Fourth" "Fifth"]}
379 | {:inspect-data true :history true})
380 |
--------------------------------------------------------------------------------
/src/main/om_mantras/core.cljs:
--------------------------------------------------------------------------------
1 | (ns om-mantras.core)
2 |
--------------------------------------------------------------------------------
/src/main/om_mantras/selectable.cljs:
--------------------------------------------------------------------------------
1 | (ns om-mantras.selectable
2 | (:require [om.next :as om :refer-macros [defui]]
3 | [om.dom :as dom]
4 | [om-mantras.util :refer [index-of]]))
5 |
6 | (defn selectable-key [x]
7 | (let [props (cond-> x (om/component? x) om/props)
8 | key-fn (:key-fn props)]
9 | (if key-fn
10 | (key-fn (:item props))
11 | (:item props))))
12 |
13 | (defui SelectableMatch
14 | Object
15 | (render [this]
16 | (let [{:keys [item key-fn match-element-fn hover-fn select-fn active?]}
17 | (om/props this)]
18 | (dom/div #js {:className (str "selectable-match"
19 | (when active? " selectable-match-active"))
20 | :style #js {:cursor "pointer"}
21 | :key (cond-> item key-fn key-fn)
22 | :onMouseOver #(some-> hover-fn (apply [this]))
23 | :onClick #(some-> select-fn (apply [this]))}
24 | (cond-> item match-element-fn match-element-fn)))))
25 |
26 | (def selectable-match (om/factory SelectableMatch {:keyfn selectable-key}))
27 |
28 | (defui SelectableInput
29 | Object
30 | (set-width [this n]
31 | (om/update-state! this assoc :width n))
32 |
33 | (componentDidMount [this]
34 | (let [width (-> this (om/react-ref :input/hidden) .-offsetWidth)]
35 | (.set-width this width)))
36 |
37 | (componentDidUpdate [this old-props old-state]
38 | (let [width (-> this (om/react-ref :input/hidden) .-offsetWidth)]
39 | (when-not (= width (:width (om/get-state this)))
40 | (.set-width this width))))
41 |
42 | (render [this]
43 | (let [{:keys [ref text key-down-fn change-fn]} (om/props this)
44 | {:keys [width]} (om/get-state this)]
45 | (dom/div #js {:ref ref
46 | :className "selectable-input-box"}
47 | (dom/span #js {:ref :input/hidden
48 | :style #js {:position "absolute"
49 | :left -9999
50 | :visibility "hidden"}}
51 | text)
52 | (dom/input #js {:ref :input/input
53 | :className "selectable-input"
54 | :style #js {:font "inherit"
55 | :border "none"
56 | :outline "none"
57 | :MozOutline "none"
58 | :WebkitOutline "none"
59 | :width (max 5 width)}
60 | :value text
61 | :onKeyDown #(some-> key-down-fn (apply [this %]))
62 | :onChange (fn [e]
63 | (some-> change-fn
64 | (apply [this (.. e -target -value)]))
65 | (.preventDefault e))})))))
66 |
67 | (def selectable-input (om/factory SelectableInput))
68 |
69 | (defui Selectable
70 | Object
71 | (matches-for-text [this text]
72 | (if (empty? text)
73 | (->> this om/props :items)
74 | (let [match-fn (:match-fn (om/props this))]
75 | (->> this om/props :items
76 | (filter #(cond-> % match-fn (match-fn text)))))))
77 |
78 | (update-matches [this]
79 | (->> this om/get-state :text
80 | (.matches-for-text this)
81 | (remove #(some #{%} (:selected (om/get-state this))))
82 | (into [])
83 | (om/update-state! this assoc :matches)))
84 |
85 | (recalculate-active-match [this]
86 | (let [matches (:matches (om/get-state this))]
87 | (om/update-state! this update :active-match
88 | #(if (some #{%} matches) % (first matches)))))
89 |
90 | (update-text [this text]
91 | (om/update-state! this assoc :text text)
92 | (.update-matches this)
93 | (.recalculate-active-match this)
94 | (.show-matches this true))
95 |
96 | (update-selected [this f]
97 | (let [selected (f (:selected (om/get-state this)))]
98 | (om/update-state! this assoc :selected selected)
99 | (some-> this om/props :change-fn (apply [selected]))))
100 |
101 | (select-match [this match]
102 | (let [match (cond-> match (om/component? match) (-> om/props :item))
103 | caret (:caret (om/get-state this))]
104 | (.update-selected this
105 | (fn [selected]
106 | (let [[before after] (split-at caret selected)]
107 | (into [] (concat before [match] after))))))
108 | (.update-caret this inc)
109 | (.update-text this ""))
110 |
111 | (show-matches [this show?]
112 | (om/update-state! this assoc :show-matches show?))
113 |
114 | (focus [this e]
115 | (-> this
116 | (om/react-ref :input/box)
117 | (om/react-ref :input/input)
118 | dom/node
119 | .focus)
120 | (.show-matches this true))
121 |
122 | (set-active-match [this child]
123 | (om/update-state! this assoc :active-match (-> child om/props :item)))
124 |
125 | (update-caret [this f]
126 | (let [selected (:selected (om/get-state this))]
127 | (om/update-state! this update :caret
128 | (fn [caret]
129 | (-> (f caret)
130 | (max 0)
131 | (min (count selected)))))))
132 |
133 | (key-backspace [this e]
134 | (when (empty? (:text (om/get-state this)))
135 | (let [caret (:caret (om/get-state this))]
136 | (.update-selected this
137 | (fn [selected]
138 | (let [[before after] (split-at caret selected)]
139 | (into [] (concat (butlast before) after))))))
140 | (.update-caret this dec)))
141 |
142 | (key-delete [this e]
143 | (when (empty? (:text (om/get-state this)))
144 | (let [caret (:caret (om/get-state this))]
145 | (.update-selected this
146 | (fn [selected]
147 | (let [[before after] (split-at caret selected)]
148 | (into [] (concat before (rest after)))))))
149 | (.update-caret this identity)))
150 |
151 | (key-escape [this e]
152 | (.show-matches this false))
153 |
154 | (key-return [this e]
155 | (some->> this om/get-state :active-match (.select-match this)))
156 |
157 | (key-up [this e]
158 | (let [{:keys [matches active-match]} (om/get-state this)
159 | index (index-of active-match matches)]
160 | (->> (max (dec index) 0)
161 | (get matches)
162 | (om/update-state! this assoc :active-match)))
163 | (.preventDefault e))
164 |
165 | (key-down [this e]
166 | (let [{:keys [matches active-match]} (om/get-state this)
167 | index (index-of active-match matches)]
168 | (->> (min (inc index) (-> matches count (- 1)))
169 | (get matches)
170 | (om/update-state! this assoc :active-match)))
171 | (.preventDefault e))
172 |
173 | (key-left [this e]
174 | (when (empty? (:text (om/get-state this)))
175 | (.update-caret this dec)))
176 |
177 | (key-right [this e]
178 | (when (empty? (:text (om/get-state this)))
179 | (.update-caret this inc)))
180 |
181 | (key-home [this e]
182 | (when (empty? (:text (om/get-state this)))
183 | (.update-caret this (constantly 0))))
184 |
185 | (key-end [this e]
186 | (when (empty? (:text (om/get-state this)))
187 | (.update-caret this #(count (:selected (om/get-state this))))))
188 |
189 | (key-press [this e]
190 | (case (.-keyCode e)
191 | 8 (.key-backspace this e)
192 | 46 (.key-delete this e)
193 | 27 (.key-escape this e)
194 | 13 (.key-return this e)
195 | 38 (.key-up this e)
196 | 40 (.key-down this e)
197 | 37 (.key-left this e)
198 | 39 (.key-right this e)
199 | 36 (.key-home this e)
200 | 35 (.key-end this e)
201 | true))
202 |
203 | (componentWillMount [this]
204 | (.update-text this "")
205 | (.update-selected this (constantly []))
206 | (.update-caret this (constantly 0))
207 | (.show-matches this false))
208 |
209 | (componentWillReceiveProps [this props]
210 | (.update-matches this))
211 |
212 | (render [this]
213 | (let [{:keys [key-fn element-fn match-element-fn]} (om/props this)
214 | {:keys [text selected show-matches matches active-match caret]}
215 | (om/get-state this)]
216 | (dom/div #js {:className "selectable"
217 | :style #js {:cursor "text"}
218 | :onClick #(.focus this)}
219 | (for [item (take caret selected)]
220 | (dom/div #js {:className "selectable-selected-item"
221 | :key (cond-> item key-fn key-fn)}
222 | (cond-> item element-fn element-fn)))
223 | (selectable-input {:text text
224 | :ref :input/box
225 | :key-down-fn #(.key-press this %2)
226 | :change-fn #(.update-text this %2)})
227 | (for [item (drop caret selected)]
228 | (dom/div #js {:className "selectable-selected-item"
229 | :key (cond-> item key-fn key-fn)}
230 | (cond-> item element-fn element-fn)))
231 | (when (and show-matches matches)
232 | (dom/div #js {:className "selectable-matches"}
233 | (for [match (remove #(some #{%} (or selected [])) matches)]
234 | (selectable-match {:item match
235 | :active? (and active-match
236 | (= active-match match))
237 | :key-fn key-fn
238 | :match-element-fn match-element-fn
239 | :hover-fn #(.set-active-match this %)
240 | :select-fn #(.select-match this %)}))))))))
241 |
242 | (def selectable (om/factory Selectable))
243 |
--------------------------------------------------------------------------------
/src/main/om_mantras/sortable.cljs:
--------------------------------------------------------------------------------
1 | (ns om-mantras.sortable
2 | (:require [om.next :as om :refer-macros [defui]]
3 | [om.dom :as dom]
4 | [om-mantras.util :refer [index-of]]))
5 |
6 | (defn sortable-key [x]
7 | (let [props (cond-> x (om/component? x) om/props)
8 | key-fn (:key-fn props)]
9 | (if key-fn
10 | (key-fn (:item props))
11 | (:item props))))
12 |
13 | (defui SortableItem
14 | Object
15 | (render [this]
16 | (let [{:keys [item dragged element-fn drag-fns]} (om/props this)]
17 | (dom/div #js {:className (str "sortable-item"
18 | (when dragged
19 | " sortable-item-dragged"))
20 | :draggable true
21 | ; :style #js {:opacity (if dragged "0.0" "1.0")}
22 | :onDragStart #(some-> drag-fns :start (apply [% this]))
23 | :onDrag #(some-> drag-fns :drag (apply [% this]))
24 | :onDragEnd #(some-> drag-fns :end (apply [% this]))
25 | :onDragOver #(some-> drag-fns :over (apply [% this]))
26 | :onDrop #(some-> drag-fns :drop (apply [% this]))}
27 | (cond-> item element-fn element-fn)))))
28 |
29 | (def sortable-item (om/factory SortableItem {:keyfn sortable-key}))
30 |
31 | (defui Sortable
32 | Object
33 | (drag-start [this e child]
34 | (.. e -dataTransfer (setData "text/plain" (sortable-key child)))
35 | (let [item (-> child om/props :item)]
36 | (om/update-state! this assoc :drag-item item)))
37 |
38 | (drag [this e child]
39 | (om/update-state! this assoc :dragging true))
40 |
41 | (drag-over [this e]
42 | (-> e .-dataTransfer .-dropEffect (set! "move"))
43 | (.preventDefault e))
44 |
45 | (reorder-items [this drag-item target-item after? items]
46 | (->> items
47 | (split-at (-> target-item
48 | (index-of items)
49 | (cond-> after? inc)))
50 | (map #(remove #{drag-item} %))
51 | ((fn [[before after]] (concat before [drag-item] after)))))
52 |
53 | (drag-over-child [this e child]
54 | (-> e .-dataTransfer .-dropEffect (set! "move"))
55 | (.preventDefault e)
56 | (let [drag-item (:drag-item (om/get-state this))
57 | target-item (:item (om/props child))]
58 | (when (and drag-item (not= drag-item target-item))
59 | (let [x (.-clientX e)
60 | y (.-clientY e)
61 | rect (-> child dom/node (.getBoundingClientRect))
62 | center-x (-> (.-left rect) (+ (.-right rect)) (/ 2))
63 | center-y (-> (.-top rect) (+ (.-bottom rect)) (/ 2))
64 | after? (if (-> this om/props :direction (= :horizontal))
65 | (>= x center-x)
66 | (>= y center-y))
67 | items (or (:items (om/get-state this))
68 | (:items (om/props this)))]
69 | (->> items
70 | (.reorder-items this drag-item target-item after?)
71 | (om/update-state! this assoc :items))))))
72 |
73 | (drag-end [this e child]
74 | (.preventDefault e)
75 | (let [items (or (:items (om/get-state this))
76 | (:items (om/props this)))]
77 | (some-> this om/props :change-fn (apply [items])))
78 | (om/update-state! this (fn [state] (-> state
79 | (dissoc :drag-item)
80 | (dissoc :dragging)))))
81 |
82 | (drop [this e]
83 | (.preventDefault e))
84 |
85 | (componentWillReceiveProps [this new-props]
86 | (om/update-state! this (fn [state] (-> state
87 | (dissoc :items)
88 | (dissoc :drag-item)
89 | (dissoc :dragging)))))
90 |
91 | (render [this]
92 | (let [{:keys [key-fn element-fn]} (om/props this)
93 | {:keys [dragging drag-item]} (om/get-state this)]
94 | (dom/div #js {:className "sortable"
95 | :dragOver #(.drag-over this %)
96 | :drop #(.drop this %)}
97 | (for [item (or (:items (om/get-state this))
98 | (:items (om/props this)))]
99 | (sortable-item
100 | {:item item
101 | :dragged (and dragging drag-item (= item drag-item))
102 | :key-fn key-fn
103 | :element-fn element-fn
104 | :drag-fns {:start #(.drag-start this %1 %2)
105 | :drag #(.drag this %1 %2)
106 | :end #(.drag-end this %1 %2)
107 | :over #(.drag-over-child this %1 %2)
108 | :drop #(.drop this %1)}}))))))
109 |
110 | (def sortable (om/factory Sortable))
111 |
--------------------------------------------------------------------------------
/src/main/om_mantras/util.cljs:
--------------------------------------------------------------------------------
1 | (ns om-mantras.util)
2 |
3 | (defn indexes-of [x coll]
4 | (keep-indexed #(when (= x %2) %1) coll))
5 |
6 | (defn index-of [x coll]
7 | (first (indexes-of x coll)))
8 |
--------------------------------------------------------------------------------
/update-gh-pages:
--------------------------------------------------------------------------------
1 | #!/bin/bash
2 |
3 | # Create temporary directory
4 |
5 | tmpdir=$(mktemp -d)
6 |
7 | # Copy the latest build to it
8 |
9 | cp -R target/docs.* target/*.html "$tmpdir"
10 |
11 | # Switch to the gh-pages branch
12 | git checkout gh-pages
13 |
14 | # Remove the old sources
15 | git rm -rf docs.* *.html
16 |
17 | # Copy the build into it
18 | cp -R "$tmpdir"/* .
19 | rm -rf "$tmpdir"
20 |
21 | # Determine the latest commit in master
22 | commit=$(git log -n1 --format="%H" master)
23 |
24 | # Create a new commit from the new sources
25 | git add docs.* *.html
26 | git commit -a -m "Update to $commit"
27 |
28 | # Push gh-pages to GitHub
29 | git push origin gh-pages:gh-pages
30 |
31 | # Switch back to master
32 | git checkout master
33 |
--------------------------------------------------------------------------------