gistfile1.clj

(ns ptv.scratch
  (:require-macros [cljs.core.async.macros :refer [go alt!]])
  (:use [domina :only [by-id value]])
  (:require
   [goog.dom :as gdom]
   [cljs-http.client :as http]
   [cljs.core.async :refer [put! <! >! chan timeout map<]]
   [om.core :as om :include-macros true]
   [sablono.core :as html :refer-macros [html]]
   [om.dom :as dom :include-macros true]))

(def app-state (atom {}))

(defn build-tab [tab-config tab-key owner]
  (let [class (str "nav-element " (when (= (om/get-state owner :active-tab) tab-key) " active"))]
    [:div {:onClick (fn [e]
                      (om/set-state! owner :active-tab tab-key))
           :class class}
     [:div {:class "nav-element-inner"}
      [:a {:onClick (fn [e]
                      (om/set-state! owner :active-tab tab-key)
                      false)
           :href "#"} (:label tab-config)]]]))

(defn tabs [data owner opts]
  (reify
    om/IInitState
    (init-state [_]
      {:active-tab (first (keys (:tabs opts)))})
    om/IRenderState
    (render-state [_ state]
      (html
       [:div
        [:div {:class "navigation navbar-main"}
         (map (fn [e]
                (build-tab (get (:tabs opts) e) e owner)
                ) (keys (:tabs opts)))]
        ((:build (get (:tabs opts) (om/get-state owner :active-tab))))]))))

(defn component-one [data owner opts]
  (reify
    om/IDidMount
    (did-mount [this]
      (om/set-state! owner :mounted true))
    om/IRenderState
    (render-state [_ state]
      (html
       (if (om/get-state owner :mounted)
         [:div "COMPONENT ONE"]
         [:div "STILL WAITING TO MOUNT"])))))

(defn component-two [data owner opts]
  (reify
    om/IRenderState
    (render-state [_ state]
      (html
       [:div "COMPONENT TWO"]))))

(defn app-view [data owner]
  (reify
    om/IRenderState
    (render-state [_ state]
      (html [:div
             [:h3 "THESE ARE THE TABS"]
             (om/build tabs data {:opts
                                    {:tabs
                                     {:photos {:label "PHOTOS"
                                               :build (fn [e]
                                                        (om/build component-one data))}
                                      :photographers {:label "PHOTOGRAPHERS"
                                                      :build (fn [e]
                                                               (om/build component-two data))}}}})]))))

(om/root app-view {} {
                      :target (gdom/getElement "app")})