From dbffabffe0db5f45e7d668884689db56e4c0fdf6 Mon Sep 17 00:00:00 2001 From: Vitaliy Vlasov Date: Thu, 25 Jan 2018 17:04:00 +0200 Subject: [PATCH] Remove scroll-div; pass container element ref to on-click handlers --- src/cljs/commiteth/activity.cljs | 9 ++++----- src/cljs/commiteth/bounties.cljs | 9 ++++----- src/cljs/commiteth/common.cljs | 29 ++++++++++------------------- 3 files changed, 18 insertions(+), 29 deletions(-) diff --git a/src/cljs/commiteth/activity.cljs b/src/cljs/commiteth/activity.cljs index 2e9444e..887b8c7 100644 --- a/src/cljs/commiteth/activity.cljs +++ b/src/cljs/commiteth/activity.cljs @@ -4,7 +4,6 @@ [commiteth.common :refer [moment-timestamp items-per-page display-data-page - scroll-div issue-url]])) @@ -58,7 +57,8 @@ [:div.time (moment-timestamp updated)]]]]) (defn activity-list [{:keys [items item-count page-number total-count] - :as activity-page-data}] + :as activity-page-data} + container-element] (if (empty? (:items activity-page-data)) [:div.view-no-data-container [:p "No recent activity yet"]] @@ -67,7 +67,7 @@ right (dec (+ left item-count))] [:div.item-counts-label [:span (str "Showing " left "-" right " of " total-count)]]) - (display-data-page activity-page-data activity-item)])) + (display-data-page activity-page-data activity-item container-element)])) (defn activity-page [] (let [activity-page-data (rf/subscribe [:activities-page]) @@ -80,6 +80,5 @@ [:div.ui.text.loader.view-loading-label "Loading"]]] [:div.ui.container.activity-container {:ref #(reset! container-element %1)} - [scroll-div container-element] [:div.activity-header "Activities"] - [activity-list @activity-page-data]])))) + [activity-list @activity-page-data container-element]])))) diff --git a/src/cljs/commiteth/bounties.cljs b/src/cljs/commiteth/bounties.cljs index fdf741d..bfa73a4 100644 --- a/src/cljs/commiteth/bounties.cljs +++ b/src/cljs/commiteth/bounties.cljs @@ -3,7 +3,6 @@ [reagent.core :as r] [commiteth.common :refer [moment-timestamp display-data-page - scroll-div items-per-page issue-url]])) @@ -47,7 +46,8 @@ [:img {:src avatar-url}]]]])) (defn bounties-list [{:keys [items item-count page-number total-count] - :as bounty-page-data}] + :as bounty-page-data} + container-element] (if (empty? items) [:div.view-no-data-container [:p "No recent activity yet"]] @@ -56,7 +56,7 @@ right (dec (+ left item-count))] [:div.item-counts-label [:span (str "Showing " left "-" right " of " total-count)]]) - (display-data-page bounty-page-data bounty-item)])) + (display-data-page bounty-page-data bounty-item container-element)])) (defn bounties-page [] (let [bounty-page-data (rf/subscribe [:open-bounties-page]) @@ -69,7 +69,6 @@ [:div.ui.text.loader.view-loading-label "Loading"]]] [:div.ui.container.open-bounties-container {:ref #(reset! container-element %1)} - [scroll-div container-element] [:div.open-bounties-header "Bounties"] - [bounties-list @bounty-page-data]])) + [bounties-list @bounty-page-data container-element]])) )) diff --git a/src/cljs/commiteth/common.cljs b/src/cljs/commiteth/common.cljs index 25b47b3..f89e5e1 100644 --- a/src/cljs/commiteth/common.cljs +++ b/src/cljs/commiteth/common.cljs @@ -31,22 +31,9 @@ (defn issue-url [owner repo number] (str "https://github.com/" owner "/" repo "/issues/" number)) -(defn scroll-div [container-element] - "This is an invisible div that exists - for the sole purpose of scrolling the container-element into view - when page-number is updated" - (let [page-number (rf/subscribe [:page-number])] - (r/create-class - {:component-did-update (fn [] - (when @container-element - (.scrollIntoView @container-element))) - :reagent-render (fn [] - [:div {:style {:display "none"}} - @page-number])}))) - (def items-per-page 15) -(defn draw-page-numbers [page-number page-count] +(defn draw-page-numbers [page-number page-count container-element] "Draw page numbers for the pagination component. Inserts ellipsis when list is too long, by default max 6 items are allowed" @@ -56,7 +43,9 @@ (if current? {:class "page-num-active"} {:class "grayed-out-page-num" - :on-click #(rf/dispatch [:set-page-number i])}) + :on-click #(do + (rf/dispatch [:set-page-number i]) + (.scrollIntoView @container-element))}) i]) max-page-nums 6] [:div.page-nums-container @@ -92,7 +81,8 @@ total-count page-number page-count]} - draw-item-fn] + draw-item-fn + container-element] "Draw data items along with pagination controls" (let [draw-items (fn [] (into [:div.ui.items] @@ -106,11 +96,12 @@ (rf/dispatch [:set-page-number (if forward? (inc page-number) - (dec page-number))]))) + (dec page-number))]) + (.scrollIntoView @container-element))) draw-rect (fn [direction] (let [forward? (= direction :forward) gray-out? (or (and forward? (= page-number page-count)) - (and (not forward?) (= page-number 1))) ] + (and (not forward?) (= page-number 1)))] [:div.rectangle-rounded (cond-> {:on-click (on-direction-click forward?)} gray-out? (assoc :class "grayed-out-direction")) @@ -127,6 +118,6 @@ [draw-rect :backward] [draw-rect :forward]] [:div.page-nav-text [:span (str "Page " page-number " of " page-count)]] - [draw-page-numbers page-number page-count]]]))) + [draw-page-numbers page-number page-count container-element]]])))