preview function works now

.gitignore

@@ -1,3 +1,4 @@
+resources/
 pom.xml
 *jar
 /lib/

project.clj

@@ -3,6 +3,8 @@
             :dependencies [[org.clojure/clojure "1.4.0"]
                            [hiccup "1.0.0"]
                            [cssgen "0.2.6"]
+                           [jayq "0.1.0-alpha2"]
+                           [fetch "0.1.0-alpha2"]
                            [org.pegdown/pegdown "1.1.0"]
                            [noir "1.3.0-beta1"]]
             :plugins [[lein-cljsbuild "0.1.10"]]
@@ -13,7 +15,8 @@
                 ; The standard ClojureScript compiler options:
                 ; (See the ClojureScript compiler documentation for details.)
                 :compiler {
-                  :output-to "resources/public/js/main.js"  ; default: main.js in current directory
+                  :output-dir "resources/public/cljs/"
+                  :output-to "resources/public/cljs/main.js"  ; default: main.js in current directory
                   :optimizations :whitespace
                   :pretty-print true}}]}
             :main NoteHub.server)

src-cljs/main.cljs

@@ -1,21 +1,32 @@
 (ns NoteHub.main
-  (:require [clojure.browser.dom :as dom]
-            [goog.dom :as gdom]
-            [goog.style :as style]
-            [goog.dom.classes :as classes]
-            [clojure.browser.event :as event]
-            [goog.editor.focus :as focus]))
+  (:use [jayq.core :only [$ css inner val anim]])
+  (:require [fetch.remotes :as remotes]
+            [clojure.browser.dom :as dom]
+            [clojure.browser.event :as event])
+  (:require-macros [fetch.macros :as fm]))
 
-(defn $ 
-  "The DOM-element selector."
-  [selector]
-    (dom/get-element selector))
+; frequently used selectors
+(def $draft ($ :#draft))
+(def $preview ($ :#preview))
 
-(if-let [draft ($ "draft")]
-  (focus/focusInputField draft))
+(defn scroll-to 
+  "scrolls to the given selector"
+  [$id]
+  (anim ($ :body) {:scrollTop ((js->clj (.offset $id)) "top")} 500))
 
-; Show the Preview button as soon as the user starts typing.
-(event/listen ($ "draft")
-              :keypress
-              (fn [e]
-                (style/setStyle ($ "preview-button") "display" "block")))
+; set focus to the draft textarea (if there is one)
+(.focus $draft)
+
+; show the preview & publish buttons as soon as the user starts typing.
+(.keypress $draft
+           (fn [e]
+             (css ($ :#buttons) {:display :block})))
+
+; on a preview button click, transform markdown to html, put it 
+; to the preview layer and scroll to it
+(.click ($ :#preview-button)
+        (fn [e]
+          (do
+            (fm/remote (md-to-html (val $draft)) [result] 
+                       (inner $preview result)
+                       (scroll-to $preview)))))

src/NoteHub/views/common.clj

@@ -19,7 +19,7 @@
     (css 
       (rule ".centerized"
           :text-align :center)
-      (rule ".button"
+      (rule ".landing-button"
             :box-shadow [0 :2px :5px :#aaa]
             :text-decoration :none
             :font-size :1.5em
@@ -30,7 +30,7 @@
             :padding :10px
             helvetica-neue
             (rule "&:hover"
-                  :background :#2b3))
+                  :background :#0b2))
       (rule "html, body"
             :color :#333
             :margin 0
@@ -50,30 +50,39 @@
             (rule "& > h1:first-child"
                   :text-align :center
                   :margin :2em))
+      (rule "pre"
+            :padding :1em
+            :border [:1px :dashed :gray]
+            :background :#efefef)
       (rule "*:focus"
             :outline [:0px :none :transparent])
       (rule "textarea"
             :width "900px"
             :font-family :Courier
-            :font-size :1.3em
+            :font-size :1.2em
             :border :none
-            :height :600px)
-      (rule "#preview-button"
+            :height :600px
+            :margin-bottom :2em)
+      (rule ".hidden"
+            :display :none)
+      (rule ".button"
             helvetica-neue
-            :display :none
             :cursor :pointer
             :border [:1px :solid]
-            :background :white
-            :font-size :0.8em
-            :opacity :0.8)
+            :opacity 0.7
+            :font-size :1em
+            :background :white)
       (rule ".central-body"
             :width "900px"
             :margin-top :5em
-            :margin-bottom :5em
+            :margin-bottom :10em
             :margin-left "auto"
             :margin-right "auto")
       (rule "h1"
             :font-size :2em)
+      (rule "#preview-start"
+            :border-bottom [:1px :dashed :gray]
+            :margin-bottom :10em)
       (rule "h1, h2, h3, h4" 
             :font-family (gen-comma-list
                            "'Noticia Text'" "Georgia"))))
@@ -82,6 +91,7 @@
             (html5
               [:head
                [:title "NoteHub - " title]
+               (include-js "https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js")
                [:link {:href "http://fonts.googleapis.com/css?family=Noticia+Text:400,700" 
                        :rel "stylesheet"
                        :type "text/css"}]
@@ -89,4 +99,4 @@
               [:body 
                 content
                 (javascript-tag "var CLOSURE_NO_DEPS = true;")
-                (include-js "/js/main.js")]))
+                (include-js "/cljs/main.js")]))

src/NoteHub/views/pages.clj

@@ -1,31 +1,34 @@
 (ns NoteHub.views.pages
   (:require [NoteHub.views.common :as common])
   (:use
-        [clojure.string :rename {replace sreplace} :only [trim split replace]]
-        [noir.core :only [defpage]]
-        [hiccup.form])
+    [noir.response :only [content-type]]
+    [clojure.string :rename {replace sreplace} :only [trim split replace]]
+    [noir.core :only [defpage]]
+    [hiccup.form]
+    [noir.fetch.remotes])
   (:import [org.pegdown PegDownProcessor]))
 
 (defpage "/" {}
          (common/layout "Free Markdown Hosting"
-           [:div#hero
-            [:h1 "NoteHub"]
-            [:h2 "Free hosting for markdown pages."]
-            [:br]
-            [:br]
-            [:a.button {:href "/new"} "New Page"]]))
+                        [:div#hero
+                         [:h1 "NoteHub"]
+                         [:h2 "Free hosting for markdown pages."]
+                         [:br]
+                         [:br]
+                         [:a.landing-button {:href "/new"} "New Page"]]))
 
 (defpage "/new" {}
          (common/layout "New Markdown Note"
-           [:div.central-body
-            (form-to [:post "/preview-note"]
-              (text-area {:class "max-width"} :draft)
-              (submit-button {:id "preview-button"} "Preview"))]))
+                        [:div.central-body
+                         (form-to [:get "/preview-note"]
+                                  (text-area {:class "max-width"} :draft)
+                                  [:div#buttons.hidden
+                                   (submit-button {:style "float: left" :class "button"} "Publish")
+                                   [:button#preview-button.button {:type :button :style "float: right"} "Preview"]])]
+                        [:div#preview-start]
+                        [:article#preview.central-body]))
 
 ; Actions.
 
-(defpage [:post "/preview-note"] {:keys [draft]}
-         (let [get-title (comp trim #(sreplace % "#" "") first #(split % #"\n"))]
-           (common/layout (get-title draft)
-              [:article.central-body
-                (.markdownToHtml (PegDownProcessor.) draft)])))
+(defremote md-to-html [draft]
+           (.markdownToHtml (PegDownProcessor.) draft))