tabs

Author: jonase

externs.js

@@ -0,0 +1,10 @@
+var CodeMirror;
+function CodeMirror(){};
+CodeMirror.fromTextArea = {};
+CodeMirror.refresh = {};
+CodeMirror.getValue = {};
+CodeMirror.setValue = {};
+CodeMirror.setSize = {};
+var $;
+function $(){};
+$.on = {};

project.clj

@@ -22,7 +22,14 @@
   :min-lein-version "2.0.0"
   :profiles {:dev {:dependencies [[ring-mock "0.1.5"]]}}
   :ring {:handler cljsfiddle.handler/app}
-  :cljsbuild {:builds [{:source-paths ["src/cljs"]
+  :cljsbuild {:builds [{:id "dev"
+                        :source-paths ["src/cljs"]
                         :compiler {:output-to "resources/public/js/app.js"  
-                                   :optimizations :whitespace
-                                   :pretty-print true}}]})
+                                   :optimizations :simple
+                                   :pretty-print true}}
+                       {:id "prod"
+                        :source-paths ["src/cljs"]
+                        :compiler {:output-to "resources/public/js/app.js"  
+                                   :optimizations :advanced
+                                   :static-fns true
+                                   :externs ["externs.js"]}}]})

resources/public/favicon.ico

@@ -38,6 +38,6 @@
   (optimize-ws (output-dir version))
   (println "done."))
 
-;; (-main "2")
+;; (-main "1")
 
 

src/clj/cljsfiddle/gendeps.clj

@@ -28,33 +28,46 @@
 
 (defn main-view 
   [fiddle user] 
-  (base [:hr {:style "margin-top:4px;margin-bottom:4px;"}]
-        [:div.row
-         [:div.col-lg-12
-          [:button#run-btn.btn.btn-default {:type "Button"} "Run"] " "
-          [:button#save-btn.btn.btn-default {:type "Button"} "Save"] " "
-          [:button#recent-btn.btn.btn-default {:type "Button"} "Recent"] " "
-          [:button#about-btn.btn.btn-default {:type "Button"} "About"] " "
-          [:button#about-btn.btn.btn-default {:type "Button"} "Help"]
-          [:span.pull-right (if user
-                              [:a {:href "/logout"} "Logout (" user ")"]
-                              [:a {:href github-login-url} 
-                               "Login with github"])]]]
-        [:hr {:style "margin-top:4px;margin-bottom:4px;"}]
+  (base [:nav.navbar.navbar-default {:role "navigation"}
+         [:div.navbar-header
+          [:button.navbar-toggle {:type "button"
+                                  :data-toggle "collapse"
+                                  :data-target ".navbar-ex1-collapse"}
+           [:span.sr-only "Toggle navigation"]
+           [:span.icon-bar]
+           [:span.icon-bar]
+           [:span.icon-bar]]
+          [:a.navbar-brand "CLJSFiddle"]]
+         [:div.collapse.navbar-collapse.navbar-ex1-collapse
+          [:ul.nav.navbar-nav
+           [:li [:button#run-btn.btn.btn-default.navbar-btn {:type "button"} "Run"] " "]
+           [:li [:button#save-btn.btn.btn-default.navbar-btn {:type "button"} "Save"] " "]
+           [:li [:button#about-btn.btn.btn-default.navbar-btn {:type "button"} "About"]]]
+          [:ul.nav.navbar-nav.navbar-right
+           [:li (if user 
+                  [:a {:href "/logout"} "Logout (" user ")"] 
+                  [:a {:href github-login-url} "Login"])]]]]
         [:div.row
          [:div.col-lg-12
           [:div#alert]]]
         [:div.row
-         [:div.col-lg-6 [:textarea#html-editor (escape-html (:fiddle/html fiddle))]]
-         [:div.col-lg-6 [:textarea#css-editor (escape-html (:fiddle/css fiddle))]]]
-        [:div.row
-         [:div.col-lg-6 [:textarea#cljs-editor (escape-html (:fiddle/cljs fiddle))]]
+         [:div.col-lg-6 [:ul.nav.nav-tabs
+                         [:li.active [:a {:href "#cljs-editor-tab" :data-toggle "tab"} "cljs"]]
+                         [:li [:a {:href "#html-editor-tab" :data-toggle "tab"} "html"]]
+                         [:li [:a {:href "#css-editor-tab" :data-toggle "tab"} "css"]]] 
+          [:div.tab-content
+           [:div#cljs-editor-tab.tab-pane.active
+            [:textarea#cljs-editor.tab-pane.active (escape-html (:fiddle/cljs fiddle))]] 
+           [:div#html-editor-tab.tab-pane
+            [:textarea#html-editor.tab-pane (escape-html (:fiddle/html fiddle))]]
+           [:div#css-editor-tab.tab-pane
+            [:textarea#css-editor.tab-pane (escape-html (:fiddle/css fiddle))]]]]
          [:div.col-lg-6 [:iframe#result-frame {:seamless "seamless"
                                                :sandbox "allow-scripts"
                                                :width "100%"
-                                               :style "border: 1px solid lightgray;height:260px;"}]]]
+                                               :style "border: 1px solid lightgray;height:500px;"}]]]
         [:hr]
         [:div.row
          [:div.col-lg-12
           [:p.text-center {:style "margin-bottom: 10px;"} 
-           [:a {:href "http://www.cljsfiddle.net"} "cljsfiddle"] " © 2013 Jonas Enlund"]]]))
+           [:a {:href "http://cljsfiddle.net"} "cljsfiddle.net"] " © 2013 Jonas Enlund"]]]))

src/clj/cljsfiddle/views.clj

@@ -1,6 +1,7 @@
 (ns cljsfiddle.core
   (:require [clojure.string :as s]
             [domina :as dom]
+            [domina.css :as css]
             [domina.events :as events]
             [hylla.remote :as remote]))
 
@@ -34,16 +35,21 @@
 (defn alert-error [msg]
   (alert "danger" msg))
 
-(defn init
+(defn ^:export init
   [] 
+  (alert-error "This is work-in-progress. Expect bugs/downtime and don't expect your saved work to be durable.")
+
   (let [html-editor (code-mirror "html-editor" {:lineNumbers true})
         css-editor (code-mirror "css-editor" {:mode :css :lineNumbers true})
         cljs-editor (code-mirror "cljs-editor" {:mode :clojure :lineNumbers true})
         result-frame (domina/by-id "result-frame")
         run-btn (domina/by-id "run-btn")
         save-btn (domina/by-id "save-btn")]
-    (.setSize html-editor "100%" "150px")
-    (.setSize css-editor "100%" "150px")
+    
+    (.setSize cljs-editor "100%" "455px")
+    (.setSize html-editor "100%" "455px")
+    (.setSize css-editor  "100%" "455px")
+
     (events/listen! run-btn :click
                     (fn [e] 
                       (remote/post "/compiler/compile" {:src (.getValue cljs-editor)}
@@ -62,4 +68,12 @@
                                    (fn [res]
                                      (if (= (:status res) :success)
                                        (alert-success "Fiddle saved successfully!")
-                                       (alert-error (:msg res)))))))))
+                                       (alert-error (:msg res)))))))
+
+    (.on (js/$ "a[data-toggle=\"tab\"]") 
+         "shown.bs.tab" 
+         (fn [evt]
+           (condp = (dom/attr (.-target evt) :href)
+             "#cljs-editor-tab" (.refresh cljs-editor)
+             "#html-editor-tab" (.refresh html-editor)
+             "#css-editor-tab" (.refresh css-editor))))))