Definition and usage example of custom tags for Twitter Bootstrap

custom_tags_bt_example

(ns custom-tags-bt-example
  (:require [hiccup.core :refer [deftag]]))

(defn accordion-panel-tag [{:keys [title collapse class] :as attrs} body]
  (let [collapse-id (str (string/replace title #"\s+" "-") (rand-int 999999999))]
    [:div (merge {:class (str "panel panel-default " class)}
                 (dissoc attrs :title :collapse :class))
      [:div {:class "panel-heading"}
        [:h4 {:class "panel-title"}
          [:a {:data-toggle "collapse"
               :data-parent "#accordion"
               :href (str "#" collapse-id)}
            title]]]
      [:div {:id collapse-id
             :class (str "panel-collapse collapse" (if-not collapse " in"))}
        [:div {:class "panel-body"} body]]]))

(defn container-tag [attrs body]
  [:div (merge-with str {:class "container "} attrs)
    body])

(defn accordion-panel-group-tag [attrs body]
  [:div#accordion
    (merge-with str {:class "panel-group "} attrs)
    body])

(defn row-tag [attrs body]
  [:div (merge-with str {:class "row "} attrs)
    body])

(defn form-horizontal-tag [attrs body]
  [:form (merge-with str {:class "form-horizontal "} attrs)
    body])

(defn control-input-tag [attrs _]
  [:div (select-keys attrs [:class])
    [:input.form-control (dissoc attrs :class)]])

(defn control-text-input-tag [{:keys [id] :as attrs} _]
  [:control-input (merge {:type "text" :name id} attrs)])

(defn control-label-tag [attrs [content]]
  [:label (merge-with str {:class "control-label "} attrs)
    content])

(defn help-block-tag [attrs [body]]
  [:span (merge-with str {:class "help-block "} attrs)
    body])

(defn form-group-tag [attrs content]
  [:div (merge-with str {:class "form-group "} attrs)
    content])

(defn submit-tag [attrs [body]]
  [:a (merge-with str {:class "btn btn-primary " :href "#"} attrs) body])

;OPTIMIZE this may be incomplete, and isn't even used
(defn dropdown-tag [{:keys [title] :as attrs} [body]]
  [:div.input-group-btn (dissoc attrs :title)
    [:button {:type "button"
              :class "btn btn-default dropdown-toggle"
              :data-toggle "dropdown"}
      (str title " ") [:span {:class "caret"}]]
    `[:ul {:class "dropdown-menu pull-right"}
      ~@(map #(identity [:li [:a {:href "#"} %]]) body)]])

(defn btn-group-tag [attrs body]
  [:div (merge-with #(str %1 " " %2) {:class "btn-group"} attrs)
    body])

(defn radio-tag
  "Doesn't do anything with attrs yet."
  [attrs [value]]
  [:span (merge-with str {:style "padding-right:15px;"} attrs)
    [:label {:style "padding-right:6px;font-weight:normal!important"} value]
    [:input {:type "radio" :value value}]])

(defn alert-tag [{:keys [type] :as attrs} [message]]
  [:div (merge-with str {:style "margin-top:15px;"
                    :class (str "alert-" type " alert fade ")}
                   (dissoc attrs :type))
    message])

(deftag :container container-tag)
(deftag :accordion-panel-group accordion-panel-group-tag)
(deftag :accordion-panel accordion-panel-tag)
(deftag :form-horizontal form-horizontal-tag)
(deftag :control-input control-input-tag)
(deftag :control-text-input control-text-input-tag)
(deftag :control-label control-label-tag)
(deftag :help-block help-block-tag)
(deftag :row row-tag)
(deftag :form-group form-group-tag)
(deftag :dropdown dropdown-tag)
(deftag :btn-group btn-group-tag)
(deftag :radio radio-tag)
(deftag :submit submit-tag)
(deftag :alert alert-tag)

(defn invite-menu [user-id to]
  [:container#invite-menu {:style "display:none"}
    [:accordion-panel-group
      [:form-horizontal {:name "invite_form" :action "/invite"}
        [:accordion-panel {:title "Invitation"}

          [:form-group.has-error.has-feedback
            [:control-label.col-xs-2 {:for "to-email"} "Send to"]
            [:control-text-input#to-email.col-xs-4
              {:placeholder "Email address of the person you wish to invite"}]
            [:help-block.col-xs-2 "Email must be filled."]]

          [:form-group
            [:control-label.col-xs-2 {:for "role" :style "padding-top:0px"}
              "What is the role?"]
            [:btn-group#role.col-xs-3
              [:radio "Heir"] [:radio "Valuer"] [:radio "Proxy"]]]

          [:form-group
            [:control-label.col-xs-2 {:for "item"} "Which item?"]
            [:div#inheritance.col-xs-3 {:style "width:19%"}
              [:select.form-control
                [:option {:value "some-value" :selected ""} "this"]
                [:option {:value "some-value2" :selected ""} "that"]]]]

          [:form-group
            [:control-label.col-xs-2 {:for "name"} "Name of recipient"]
            [:form-group#name.last
              [:control-text-input.col-xs-2 {:placeholder "Given name(s)"}]
              [:control-text-input.col-xs-2 {:placeholder "Surname"}]
              [:help-block.col-xs-2 ""]]]

          [:accordion-panel {:title "Personal message" :collapse true}
            [:textarea#invite-textarea.form-control
              {:rows "3"
               :name "text"
               :placeholder
                 (str "I invite you to this awesome place where the sun shines brighter.")}]]

          [:submit#submit-invite {:style "margin-top:15px"} "Send invitation"]
          [:alert#invite-success.last {:type "success" :style "display: none;"}
            "The invite was sent with success."]
          [:alert#invite-error.last {:type "danger" :style "display: none;"}
            "Please correct the errors."]]]

        [:accordion-panel {:title "Pending Invitations" :collapse true}
          [:div.left-padded
            [:p "You were invited by someone to come at his place."
              [:button {:type "button" :class "btn btn-default btn-xs"} "Accept"]
              " "
              [:button {:type "button" :class "btn btn-default btn-xs"} "Dismiss"]]]]

        [:accordion-panel {:title "History" :collapse true}
          [:div.left-padded
            [:p "Invitation sent to [email protected] for the role of Batman."]
            [:p "[email protected] accepted the invitation for the role of Batman."]
            [:p.last "Invitation sent to [email protected] for the role of Robin."]]]]])