diff --git a/.gitignore b/.gitignore index 2f20902..887edb5 100644 --- a/.gitignore +++ b/.gitignore @@ -23,3 +23,4 @@ misc/ *.swp .DS_Store .rebel_readline_history +deploy-token.txt \ No newline at end of file diff --git a/project.clj b/project.clj index 90b29a6..d33a9f2 100644 --- a/project.clj +++ b/project.clj @@ -1,4 +1,5 @@ -(defproject re-dnd "0.1.14" +(defproject re-dnd "0.1.17" + :description "A configurable drag/drop widget + API for re-frame apps" :url "https://github.com/Kah0ona/re-dnd.git" diff --git a/src/cljs/re_dnd/events.cljs b/src/cljs/re_dnd/events.cljs index dadd20e..2504cb7 100644 --- a/src/cljs/re_dnd/events.cljs +++ b/src/cljs/re_dnd/events.cljs @@ -87,13 +87,49 @@ (defn move-element-in-list [m k new-pos] - (let [e (-> (filter (fn [{id :id}] - (= id k)) m) - first) - [h t] (split-at new-pos m) - comparator #(= (:id %) k)] + (let [comparator (comp #{k} :id) + e (->> m + (filter comparator) + first) + [h t] (split-at new-pos m)] + (debug (map :id m) k (:id e) new-pos) (concat (remove comparator h) [e] (remove comparator t)))) +(defn positions + [pred coll] + (keep-indexed (fn [idx x] + (when (pred x) + idx)) + coll)) + +(defn index-of + [search coll] + (first (positions #{search} coll))) + +(defn get-position-of-element + [db dz-id elt-id] + (let [elts (get-in db [:dnd/state :drop-zones dz-id])] + (index-of elt-id (mapv :id elts)))) + +(rf/reg-event-fx + :dnd/move-up + (fn [{db :db} [_ dz-id elt-id]] + (let [idx (get-position-of-element db dz-id elt-id)] + (if (pos? idx) + {:db db + :dispatch [:dnd/move-drop-zone-element dz-id elt-id (dec idx)]} + ;;else + {:db db})))) + +(rf/reg-event-fx + :dnd/move-down + (fn [{db :db} [_ dz-id elt-id]] + (let [num-elts (count (get-in db [:dnd/state :drop-zones dz-id])) + idx (get-position-of-element db dz-id elt-id)] + {:db db + :dispatch [:dnd/move-drop-zone-element dz-id elt-id (inc (inc idx))]}))) + + (re-frame/reg-event-db :dnd/delete-drop-zone-element (fn [db [_ dz-id elt-id]] diff --git a/src/cljs/re_dnd/subs.cljs b/src/cljs/re_dnd/subs.cljs index 6ef05cb..f9829ba 100644 --- a/src/cljs/re_dnd/subs.cljs +++ b/src/cljs/re_dnd/subs.cljs @@ -34,12 +34,10 @@ :dnd/drag-box (fn [db _] (let [[drop-zone-id draggable-id] (h/find-first-dragging-element db) - {:keys [left top] :as rr} (drag-box-parent-bounding-rect)] + ] (if (and drop-zone-id draggable-id) - (-> (:position - (get-dz-element db drop-zone-id draggable-id)) - (update :x - left) - (update :y - top)) + (-> (get-dz-element db drop-zone-id draggable-id) + :position) ;;else (when draggable-id (get-in db [:dnd/state :draggables draggable-id :position])))))) diff --git a/src/cljs/re_dnd/views.cljs b/src/cljs/re_dnd/views.cljs index 26d612e..ee1af0d 100644 --- a/src/cljs/re_dnd/views.cljs +++ b/src/cljs/re_dnd/views.cljs @@ -69,7 +69,8 @@ (defn dropped-element [id de] - (let [drag-status (rf/subscribe [:dnd/drag-status (:id de) id])] + (let [drag-status (rf/subscribe [:dnd/drag-status (:id de) id]) + options (rf/subscribe [:dnd/dragdrop-options id])] (fn [id de] [:div.dropped-element.row {:id (str "dropped-element-" (name (:id de)))} @@ -79,14 +80,26 @@ :height "100%"}}]) [:div.drag-handle.col-md-1 - {:on-mouse-over (partial hover-fn (:id de) id true) - :on-mouse-out (partial hover-fn (:id de) id false) - :on-mouse-down (partial start-drag-fn (:id de) id) - ;;drop-zone elements can be re-ordered, this is the only functionality - :on-mouse-up (partial reorder-fn id (:id de))} + (when-not (:three-part-drag-handle @options) + {:on-mouse-over (partial hover-fn (:id de) id true) + :on-mouse-out (partial hover-fn (:id de) id false) + :on-mouse-down (partial start-drag-fn (:id de) id) + :on-mouse-up (partial reorder-fn id (:id de))}) + (when (:three-part-drag-handle @options) + [:i.zmdi.zmdi-caret-up + {:on-click #(rf/dispatch [:dnd/move-up id (:id de)])}]) + (when (:three-part-drag-handle @options) + [:i.zmdi.zmdi-menu + {:on-mouse-over (partial hover-fn (:id de) id true) + :on-mouse-out (partial hover-fn (:id de) id false) + :on-mouse-down (partial start-drag-fn (:id de) id) + :on-mouse-up (partial reorder-fn (:id de) id)}]) + (when (:three-part-drag-handle @options) + [:i.zmdi.zmdi-caret-down + {:on-click #(rf/dispatch [:dnd/move-down id (:id de)])}]) [drag-handle de]] [:div.dropped-element-body.col-md-11 - ^{:key (hash de)} ;;force rerender everytime `de` changes. since it's an multimethods, this might otherwise fail sometimes. + ^{:key (:id de)#_(hash de)} ;;force rerender everytime `de` changes. since it's an multimethod, this might otherwise fail sometimes. [dropped-widget de]] [:div {:style {:clear :both}}]]))) diff --git a/src/cljs/re_dnd_demo/views.cljs b/src/cljs/re_dnd_demo/views.cljs index 845dcd1..da9c4ee 100644 --- a/src/cljs/re_dnd_demo/views.cljs +++ b/src/cljs/re_dnd_demo/views.cljs @@ -82,9 +82,9 @@ [:div {:style {:position :absolute :border "1px solid black" :top "400px"}} - [dndv/drag-box] #_(when @drag-box-state [dndv/drag-box]) ;;this thing follows the mouse, and takes over the draggable's size + [dndv/drag-box] [:div [:p "Drag draggables to the drop-zone to the right, or re-order dropped elements in the drop-zone"] #_[debug-panel @db]