Support for pagination

dev/snippets/pagination/active.cljs

@@ -0,0 +1,9 @@
+#_
+(:require [om-bootstrap.pager :as pg])
+
+(pg/pagination {}
+  (pg/previous {:disabled? true})
+  (pg/page {} "1")
+  (pg/page {} "2")
+  (pg/page {:active? true} "3")
+  (pg/next {}))

dev/snippets/pagination/basic.cljs

@@ -0,0 +1,7 @@
+#_
+(:require [om-bootstrap.pager :as pg])
+
+(pg/pagination {}
+  (pg/page {} "1")
+  (pg/page {} "2")
+  (pg/page {} "3"))

dev/snippets/pagination/disabled.cljs

@@ -0,0 +1,9 @@
+#_
+(:require [om-bootstrap.pager :as pg])
+
+(pg/pagination {}
+  (pg/previous {:disabled? true})
+  (pg/page {} "1")
+  (pg/page {} "2")
+  (pg/page {} "3")
+  (pg/next {}))

dev/snippets/pagination/navigation.cljs

@@ -0,0 +1,9 @@
+#_
+(:require [om-bootstrap.pager :as pg])
+
+(pg/pagination {}
+  (pg/previous {})
+  (pg/page {} "1")
+  (pg/page {} "2")
+  (pg/page {} "3")
+  (pg/next {}))

docs/src/cljs/om_bootstrap/docs/components.cljs

@@ -8,6 +8,7 @@
             [om-bootstrap.input :as i]
             [om-bootstrap.mixins :as m]
             [om-bootstrap.nav :as n]
+            [om-bootstrap.pagination :as pg]
             [om-bootstrap.panel :as p]
             [om-bootstrap.progress-bar :as pb]
             [om-bootstrap.random :as r]
@@ -405,6 +406,24 @@
      (d/a {:href "#navs"} "tabbed navigation component")
      " to add tabbable areas."])))
 
+;; ## Pagination
+(defn pagination-block []
+  (section
+    "pagination"
+    ["Pagination " (d/small "basic.cljs")]
+    (d/p "Creates pages that can have " (d/code ":href") " or " (d/code ":on-click") " set to navigate between pages")
+    (d/h3 "Basic Pagination")
+    (->example (slurp-example "pagination/basic"))
+
+    (d/h3 "Pagination with previous and next")
+    (->example (slurp-example "pagination/navigation"))
+
+    (d/h3 "Pages can be disabled")
+    (->example (slurp-example "pagination/disabled"))
+
+    (d/h3 "Pages can be marked as active")
+    (->example (slurp-example "pagination/active"))))
+
 ;; ## Pager
 
 (defn pager-block []
@@ -639,6 +658,7 @@
            (n/nav-item {:href "#navs"} "Navs")
            (n/nav-item {:href "#navbars"} "Navbars")
            (n/nav-item {:href "#tabs"} "Toggleable Tabs")
+           (n/nav-item {:href "#pagination"} "Pagination")
            (n/nav-item {:href "#pager"} "Pager")
            (n/nav-item {:href "#alerts"} "Alerts")
            (n/nav-item {:href "#carousels"} "Carousels")
@@ -681,6 +701,7 @@
       (nav-block)
       (navbar-block)
       (tab-block)
+      (pagination-block)
       (pager-block)
       (alert-block)
       (carousel-block)

src/om_bootstrap/pagination.cljs

@@ -0,0 +1,38 @@
+(ns om-bootstrap.pagination
+  (:require [om.core :as om]
+            [om-bootstrap.types :as t]
+            [om-bootstrap.util :as u]
+            [om-tools.dom :as d :include-macros true]
+            [schema.core :as s])
+  (:require-macros [schema.macros :as sm]))
+
+(def Page
+  (t/bootstrap
+    {(s/optional-key :disabled?) s/Bool
+     (s/optional-key :active?) s/Bool
+     (s/optional-key :href) s/Str
+     (s/optional-key :on-click) (sm/=> s/Any s/Any)}))
+
+(sm/defn page :- t/Component [opts :- Page & children]
+  (let [[bs props] (t/separate Page opts {:href "#"})
+        classes {:disabled (:disabled? bs)
+                 :active (:active? bs)}
+        on-click (when-let [f (:on-click bs)]
+                   (fn [e]
+                     (.preventDefault e)
+                     (f e)))]
+    (d/li (u/merge-props props {:class (d/class-set classes)})
+      (d/a {:href (:href bs)
+            :on-click on-click}
+        children))))
+
+(sm/defn previous :- t/Component [opts :- Page]
+  (page (assoc opts :aria-label "Previous") (d/span {:aria-hidden "true"} "«")))
+
+(sm/defn next :- t/Component [opts :- Page]
+  (page (assoc opts :aria-label "Next") (d/span {:aria-hidden "true"} "»")))
+
+(sm/defn pagination :- t/Component [opts & children]
+  (d/nav
+    (d/ul {:class "pagination"}
+          children)))