diff --git a/.gitignore b/.gitignore index e1df97d..e8375ac 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,4 @@ +resources/ pom.xml *jar /lib/ diff --git a/project.clj b/project.clj index 496ea76..1bc16a2 100644 --- a/project.clj +++ b/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) diff --git a/src-cljs/main.cljs b/src-cljs/main.cljs index f586068..b20c08f 100644 --- a/src-cljs/main.cljs +++ b/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))))) diff --git a/src/NoteHub/views/common.clj b/src/NoteHub/views/common.clj index 6d5dd83..42eb07a 100644 --- a/src/NoteHub/views/common.clj +++ b/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")])) diff --git a/src/NoteHub/views/pages.clj b/src/NoteHub/views/pages.clj index 59894b2..5b1eeb7 100644 --- a/src/NoteHub/views/pages.clj +++ b/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))