theming moved to JS completely

resources/public/js/main.js

@@ -13,7 +13,8 @@ function md2html(input){
     return marked(input);
 }
 
-function loadPage() {
+function onLoad() {
+    applyTheme();
     $note = $("note");
     $action = $("action");
     $preview = $("preview");

resources/public/js/themes.js

@@ -60,3 +60,45 @@ var themes = {
     }
   }
 };
+
+function applyTheme() {
+  if (location.search.length > 0) {
+    var ui = { theme: "default" };
+    location.search.slice(1).split("&").reduce(function(acc, e){
+      var p = e.split("=");
+      acc[p[0]] = p[1];
+      return acc
+    }, ui);
+
+    var vars = {
+      '@background': themes[ui.theme].background.normal,
+      '@background_halftone': themes[ui.theme].background.halftone,
+      '@foreground': themes[ui.theme].foreground.normal,
+      '@foreground_halftone': themes[ui.theme].foreground.halftone,
+      '@link_fresh': themes[ui.theme].link.fresh,
+      '@link_visited': themes[ui.theme].link.visited,
+      '@link_hover': themes[ui.theme].link.hover
+    };
+
+    if(ui["header-font"] || ui["text-font"]) {
+      var fontURL = "http://fonts.googleapis.com/" +
+          "css?family=PT+Serif:700|Noticia+Text:700%s" +
+          "&subset=latin,cyrillic";
+
+      var injection = ["header-font", "text-font"].reduce(function(acc, font){
+        if(ui[font]) {
+          vars['@' + font.replace(/-/, "_")] = ui[font].replace(/\+/g," ");
+          return acc + "|" + ui[font];
+        } else return acc;
+      }, "");
+
+      fontURL = fontURL.replace(/%s/, injection);
+      var fileref = document.createElement("link")
+      fileref.setAttribute("rel", "stylesheet")
+      fileref.setAttribute("type", "text/css")
+      fileref.setAttribute("href", fontURL)
+      document.getElementsByTagName("head")[0].appendChild(fileref)
+    }
+    less.modifyVars(vars);
+  }
+}

resources/public/style.less

@@ -118,9 +118,9 @@ html, body {
     margin: 2em;
 }
 article {
+    font-family: @text_font, 'Georgia';
     .central-element;
     margin-top: 5em;
-    font-family: @text_font, 'Georgia';
     text-align: justify;
     font-size: @font_size;
 }

src/NoteHub/views/common.clj

@@ -1,66 +0,0 @@
-(ns NoteHub.views.common
-  (:use
-    [NoteHub.settings :only [get-message]]
-    [noir.core :only [defpartial]]
-    [noir.options :only [dev-mode?]]
-    [hiccup.util :only [escape-html]]
-    [ring.util.codec :only [url-encode]]
-    [hiccup.core]
-    [hiccup.page :only [include-js html5]]
-    [hiccup.element :only [javascript-tag]]))
-
-(defn url
-  "Creates a local url from the given substrings"
-  [& args]
-  (apply str (interpose "/" (cons "" (map url-encode args)))))
-
-; Creates the main html layout
-(defpartial generate-layout 
-  [params title & content]
-  ; for the sake of security: escape all symbols of the param values
-  (let [params (into {} (for [[k v] params] [k (escape-html v)]))
-        theme (:theme params "default")
-        header-font (:header-font params)
-        text-font (:text-font params)]
-    (html5
-      [:head
-       [:title (print-str (get-message :name) "—" title)]
-       [:meta {:charset "UTF-8"}]
-       ; generating a link to google's webfonts
-       [:link {:href 
-               (clojure.string/replace
-                 (str "http://fonts.googleapis.com/css?family="
-                      (apply str
-                        (interpose "|" ["PT+Serif:700" "Noticia+Text:700" header-font text-font]))
-                      "&subset=latin,cyrillic") " " "+")
-               :rel "stylesheet"
-               :type "text/css"}]
-       [:link {:rel "stylesheet/less" :type "text/css" :href "/style.less"}]
-       (html
-         (include-js "/js/less.js")
-         (include-js "/js/md5.js")
-         (include-js "/js/marked.js")
-         (include-js "/js/main.js")
-         (include-js "/js/themes.js")
-         (javascript-tag (str "less.modifyVars({
-                              '@background': themes['" theme "'].background.normal,
-                              '@background_halftone': themes['" theme "'].background.halftone,
-                              '@foreground': themes['" theme "'].foreground.normal,
-                              '@foreground_halftone': themes['" theme "'].foreground.halftone,
-                              '@link_fresh': themes['" theme "'].link.fresh,
-                              '@link_visited': themes['" theme "'].link.visited,
-                              '@link_hover': themes['" theme "'].link.hover"
-                              (when header-font (str ", '@header_font': '" header-font "'"))
-                              (when text-font (str ",'@text_font': '" text-font "'"))
-                              "});")))
-       ; google analytics code should appear in prod mode only
-       (if-not (dev-mode?) (include-js "/js/google-analytics.js"))]
-      [:body {:onload "loadPage()"} content])))
-
-(defn layout
-  "Generates the main html layout"
-  [& args]
-  ; if some parameter weren't added we provide an empty map
-  (if (map? (first args))
-    (apply generate-layout args)
-    (apply generate-layout {} args)))

src/NoteHub/views/pages.clj

@@ -5,14 +5,17 @@
             [cheshire.core :refer :all])
   (:use
    [NoteHub.settings]
-    [NoteHub.views.common]
    [clojure.string :rename {replace sreplace}
     :only [escape split replace blank? split-lines lower-case]]
    [clojure.core.incubator :only [-?>]]
    [noir.util.crypt :only [encrypt]]
    [hiccup.form]
    [hiccup.core]
+   [noir.options :only [dev-mode?]]
+   [ring.util.codec :only [url-encode]]
    [hiccup.element]
+   [hiccup.util :only [escape-html]]
+   [hiccup.page :only [include-js html5]]
    [noir.response :only [redirect status content-type]]
    [noir.core :only [defpage defpartial]]
    [noir.statuses]))
@@ -20,6 +23,36 @@
 (when-not (storage/valid-publisher? api/domain)
   (storage/register-publisher api/domain))
 
+; Creates the main html layout
+(defpartial generate-layout
+  [params title & content]
+  ; for the sake of security: escape all symbols of the param values
+  (let [params (into {} (for [[k v] params] [k (escape-html v)]))
+        theme (:theme params "default")
+        header-font (:header-font params)
+        text-font (:text-font params)]
+    (html5
+     [:head
+      [:title (print-str (get-message :name) "—" title)]
+      [:meta {:charset "UTF-8"}]
+      [:link {:rel "stylesheet/less" :type "text/css" :href "/style.less"}]
+      (html
+       (include-js "/js/less.js")
+       (include-js "/js/md5.js")
+       (include-js "/js/marked.js")
+       (include-js "/js/main.js")
+       (include-js "/js/themes.js"))
+      ; google analytics code should appear in prod mode only
+      (if-not (dev-mode?) (include-js "/js/google-analytics.js"))]
+     [:body {:onload "onLoad()"} content])))
+
+(defn layout
+  "Generates the main html layout"
+  [& args]
+  (if (map? (first args))
+    (apply generate-layout args)
+    (apply generate-layout {} args)))
+
 ; Sets a custom message for each needed HTTP status.
 ; The message to be assigned is extracted with a dynamically generated key
 (doseq [code [400 403 404 500]]
@@ -32,6 +65,11 @@
 (defn- response [code]
   (status code (get-page code)))
 
+(defn url
+  "Creates a local url from the given substrings"
+  [& args]
+  (apply str (interpose "/" (cons "" (map url-encode args)))))
+
 ; Converts given markdown to html and wraps with the main layout
 (defn- wrap [short-url params md-text]
   (when md-text

test/NoteHub/test/views/pages.clj

@@ -2,7 +2,6 @@
   (:use [NoteHub.views.pages]
         [NoteHub.api :only [build-key get-signature get-date]]
         [noir.util.test]
-        [NoteHub.views.common :only [url]]
         [NoteHub.storage]
         [clojure.test]))