Handle html5 history better

This commit is contained in:
Dan Holmsand 2014-01-27 22:30:42 +01:00
parent 4a537af429
commit f1bbd7d99e
3 changed files with 27 additions and 9 deletions

View File

@ -26,9 +26,9 @@ runtest:
$(MAKE) run PROF=test,$(PROF) $(MAKE) run PROF=test,$(PROF)
runsite: setup runsite: setup
(sleep 3 && open "http://127.0.0.1:$(PORT)") & (sleep 3 && open "http://127.0.0.1:$(PORT)/$$(basename $$PWD)") &
( trap "kill 0" SIGINT SIGTERM EXIT; \ ( trap "kill 0" SIGINT SIGTERM EXIT; \
( python -m SimpleHTTPServer $(PORT) & ); \ ( cd .. && python -m SimpleHTTPServer $(PORT) & ); \
lein -o with-profile $(PROF) cljsbuild auto $(CLJSBUILD) ) lein -o with-profile $(PROF) cljsbuild auto $(CLJSBUILD) )
install: leinbuild install: leinbuild

View File

@ -33,13 +33,14 @@
[github-badge]]) [github-badge]])
(defn ^:export mountdemo [p] (defn ^:export mountdemo [p]
(when p (reset! page p)) (when p (page/set-start-page p))
(reagent/render-component [demo] (.-body js/document))) (reagent/render-component [demo] (.-body js/document)))
(defn gen-page [p timestamp] (defn gen-page [p timestamp]
(reset! page p) (reset! page p)
(let [body (reagent/render-component-to-string [demo]) (let [body (reagent/render-component-to-string [demo])
title @page/title-atom] title @page/title-atom
load-page (case p "index.html" "" p)]
(str "<!doctype html> (str "<!doctype html>
<html> <html>
<head> <head>
@ -53,7 +54,7 @@
<script type='text/javascript' <script type='text/javascript'
src='" (prefix "assets/demo.js") timestamp "'></script> src='" (prefix "assets/demo.js") timestamp "'></script>
<script type='text/javascript'> <script type='text/javascript'>
setTimeout(function() {demo.mountdemo('" p "')}, 200); setTimeout(function() {demo.mountdemo('" load-page "')}, 200);
</script> </script>
</body> </body>
</html>"))) </html>")))

View File

@ -8,27 +8,44 @@
[goog.history EventType])) [goog.history EventType]))
(def page (atom "")) (def page (atom ""))
(def base-path (atom nil))
(def html5-history false)
(defn create-history [] (defn create-history []
(when reagent/is-client (when reagent/is-client
(let [proto (-> js/window .-location .-protocol)] (let [proto (-> js/window .-location .-protocol)]
(if (and (.isSupported Html5History) (if (and (.isSupported Html5History)
(case proto "http:" true "https:" true false)) (case proto "http:" true "https:" true false))
(do (set! html5-history true)
(doto (Html5History.) (doto (Html5History.)
(.setUseFragment false)) (.setUseFragment false)))
(History.))))) (History.)))))
(defn setup-history [] (defn setup-history []
(when-let [h (create-history)] (when-let [h (create-history)]
(events/listen h EventType/NAVIGATE (events/listen h EventType/NAVIGATE
(fn [e] (reset! page (.-token e)))) (fn [e] (reset! page (subs (.-token e)
(count @base-path)))))
(add-watch page ::history (fn [_ _ oldp newp] (add-watch page ::history (fn [_ _ oldp newp]
(.setToken h newp))) (.setToken h (str @base-path newp))))
(.setEnabled h true) (.setEnabled h true)
h)) h))
(def history (setup-history)) (def history (setup-history))
(defn set-start-page [p]
(when html5-history
;; Find base-path for html5 history
(let [loc (-> js/window .-location .-pathname)
split #".[^/]*"
loc-parts (re-seq split loc)
page-parts (re-seq split (case p "" "." p))
base (str (apply str
(drop-last (count page-parts) loc-parts))
"/")]
(reset! base-path (string/replace base #"^/" ""))))
(reset! page p))
(def title-atom (atom "")) (def title-atom (atom ""))
(def page-map (atom nil)) (def page-map (atom nil))