nice
This commit is contained in:
commit
3b0c4c2e50
6 changed files with 256 additions and 0 deletions
13
.gitignore
vendored
Normal file
13
.gitignore
vendored
Normal file
|
@ -0,0 +1,13 @@
|
||||||
|
/resources/public/js/compiled/**
|
||||||
|
figwheel_server.log
|
||||||
|
pom.xml
|
||||||
|
*jar
|
||||||
|
/lib/
|
||||||
|
/classes/
|
||||||
|
/out/
|
||||||
|
/target/
|
||||||
|
.lein-deps-sum
|
||||||
|
.lein-repl-history
|
||||||
|
.lein-plugins/
|
||||||
|
.repl
|
||||||
|
.nrepl-port
|
39
README.md
Normal file
39
README.md
Normal file
|
@ -0,0 +1,39 @@
|
||||||
|
# apintro2
|
||||||
|
|
||||||
|
FIXME: Write a one-line description of your library/project.
|
||||||
|
|
||||||
|
## Overview
|
||||||
|
|
||||||
|
FIXME: Write a paragraph about the library/project and highlight its goals.
|
||||||
|
|
||||||
|
## Setup
|
||||||
|
|
||||||
|
To get an interactive development environment run:
|
||||||
|
|
||||||
|
lein figwheel
|
||||||
|
|
||||||
|
and open your browser at [localhost:3449](http://localhost:3449/).
|
||||||
|
This will auto compile and send all changes to the browser without the
|
||||||
|
need to reload. After the compilation process is complete, you will
|
||||||
|
get a Browser Connected REPL. An easy way to try it is:
|
||||||
|
|
||||||
|
(js/alert "Am I connected?")
|
||||||
|
|
||||||
|
and you should see an alert in the browser window.
|
||||||
|
|
||||||
|
To clean all compiled files:
|
||||||
|
|
||||||
|
lein clean
|
||||||
|
|
||||||
|
To create a production build run:
|
||||||
|
|
||||||
|
lein cljsbuild once min
|
||||||
|
|
||||||
|
And open your browser in `resources/public/index.html`. You will not
|
||||||
|
get live reloading, nor a REPL.
|
||||||
|
|
||||||
|
## License
|
||||||
|
|
||||||
|
Copyright © 2014 FIXME
|
||||||
|
|
||||||
|
Distributed under the Eclipse Public License either version 1.0 or (at your option) any later version.
|
69
project.clj
Normal file
69
project.clj
Normal file
|
@ -0,0 +1,69 @@
|
||||||
|
(defproject apintro2 "0.1.0-SNAPSHOT"
|
||||||
|
:description "FIXME: write this!"
|
||||||
|
:url "http://example.com/FIXME"
|
||||||
|
:license {:name "Eclipse Public License"
|
||||||
|
:url "http://www.eclipse.org/legal/epl-v10.html"}
|
||||||
|
|
||||||
|
:dependencies [[org.clojure/clojure "1.7.0"]
|
||||||
|
[org.clojure/clojurescript "0.0-3297"]
|
||||||
|
[org.clojure/core.async "0.1.346.0-17112a-alpha"]
|
||||||
|
[freactive "0.2.0-SNAPSHOT"]
|
||||||
|
[bardo "0.1.2-SNAPSHOT"]
|
||||||
|
]
|
||||||
|
|
||||||
|
:plugins [[lein-cljsbuild "1.0.5"]
|
||||||
|
[lein-figwheel "0.3.5"]]
|
||||||
|
|
||||||
|
:source-paths ["src"]
|
||||||
|
|
||||||
|
:clean-targets ^{:protect false} ["resources/public/js/compiled" "target"]
|
||||||
|
|
||||||
|
:cljsbuild {
|
||||||
|
:builds [{:id "dev"
|
||||||
|
:source-paths ["src"]
|
||||||
|
|
||||||
|
:figwheel { :on-jsload "apintro2.core/on-js-reload" }
|
||||||
|
|
||||||
|
:compiler {:main apintro2.core
|
||||||
|
:asset-path "js/compiled/out"
|
||||||
|
:output-to "resources/public/js/compiled/apintro2.js"
|
||||||
|
:output-dir "resources/public/js/compiled/out"
|
||||||
|
:source-map-timestamp true }}
|
||||||
|
{:id "min"
|
||||||
|
:source-paths ["src"]
|
||||||
|
:compiler {:output-to "resources/public/js/compiled/apintro2.js"
|
||||||
|
:main apintro2.core
|
||||||
|
:optimizations :advanced
|
||||||
|
:pretty-print false}}]}
|
||||||
|
|
||||||
|
:figwheel {
|
||||||
|
;; :http-server-root "public" ;; default and assumes "resources"
|
||||||
|
;; :server-port 3449 ;; default
|
||||||
|
;; :server-ip "127.0.0.1"
|
||||||
|
|
||||||
|
:css-dirs ["resources/public/css"] ;; watch and update CSS
|
||||||
|
|
||||||
|
;; Start an nREPL server into the running figwheel process
|
||||||
|
;; :nrepl-port 7888
|
||||||
|
|
||||||
|
;; Server Ring Handler (optional)
|
||||||
|
;; if you want to embed a ring handler into the figwheel http-kit
|
||||||
|
;; server, this is for simple ring servers, if this
|
||||||
|
;; doesn't work for you just run your own server :)
|
||||||
|
;; :ring-handler hello_world.server/handler
|
||||||
|
|
||||||
|
;; To be able to open files in your editor from the heads up display
|
||||||
|
;; you will need to put a script on your path.
|
||||||
|
;; that script will have to take a file path and a line number
|
||||||
|
;; ie. in ~/bin/myfile-opener
|
||||||
|
;; #! /bin/sh
|
||||||
|
;; emacsclient -n +$2 $1
|
||||||
|
;;
|
||||||
|
;; :open-file-command "myfile-opener"
|
||||||
|
|
||||||
|
;; if you want to disable the REPL
|
||||||
|
;; :repl false
|
||||||
|
|
||||||
|
;; to configure a different figwheel logfile path
|
||||||
|
;; :server-logfile "tmp/logs/figwheel-logfile.log"
|
||||||
|
})
|
2
resources/public/css/style.css
Normal file
2
resources/public/css/style.css
Normal file
|
@ -0,0 +1,2 @@
|
||||||
|
/* some style */
|
||||||
|
|
41
resources/public/index.html
Normal file
41
resources/public/index.html
Normal file
|
@ -0,0 +1,41 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<link href="css/style.css" rel="stylesheet" type="text/css">
|
||||||
|
<style>
|
||||||
|
html, body, div, span, applet, object, iframe,
|
||||||
|
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||||
|
a, abbr, acronym, address, big, cite, code,
|
||||||
|
del, dfn, em, img, ins, kbd, q, s, samp,
|
||||||
|
small, strike, strong, sub, sup, tt, var,
|
||||||
|
b, u, i, center,
|
||||||
|
dl, dt, dd, ol, ul, li,
|
||||||
|
fieldset, form, label, legend,
|
||||||
|
table, caption, tbody, tfoot, thead, tr, th, td,
|
||||||
|
article, aside, canvas, details, embed,
|
||||||
|
figure, figcaption, footer, header, hgroup,
|
||||||
|
menu, nav, output, ruby, section, summary,
|
||||||
|
time, mark, audio, video {margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;}
|
||||||
|
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
|
||||||
|
body {line-height: 1;}
|
||||||
|
ol, ul {list-style: none;}
|
||||||
|
blockquote, q {quotes: none;}
|
||||||
|
blockquote:before, blockquote:after, q:before, q:after {content: '';content: none;}
|
||||||
|
table {border-collapse: collapse;border-spacing: 0;}
|
||||||
|
|
||||||
|
|
||||||
|
html,body{margin:0;padding:0;font-family: "Hoefler Text",sans-serif;height:100vh;text-align: center;
|
||||||
|
color: rgba(255,255,255,0.9);}
|
||||||
|
a{color:inherit; text-decoration: none;border-bottom: none;}
|
||||||
|
.anchor {position: absolute;opacity:0.5;}
|
||||||
|
.anchor:hover {opacity:0.9;}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="root"></div>
|
||||||
|
<script src="js/compiled/apintro2.js" type="text/javascript"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
92
src/apintro2/core.cljs
Normal file
92
src/apintro2/core.cljs
Normal file
|
@ -0,0 +1,92 @@
|
||||||
|
(ns ^:figwheel-always apintro2.core
|
||||||
|
(:refer-clojure :exclude [atom])
|
||||||
|
(:require [freactive.core :refer [atom cursor]]
|
||||||
|
[freactive.dom :as dom]
|
||||||
|
[freactive.animation :as animation]
|
||||||
|
[bardo.ease :refer [ease]]
|
||||||
|
)
|
||||||
|
(:require-macros [freactive.macros :refer [rx]])
|
||||||
|
)
|
||||||
|
|
||||||
|
(enable-console-print!)
|
||||||
|
|
||||||
|
;; define your app data so that it doesn't get over-written on reload
|
||||||
|
(defonce state (atom {:text "Hello world!"}))
|
||||||
|
|
||||||
|
(defn on-js-reload []
|
||||||
|
;; optionally touch your app-state to force rerendering depending on
|
||||||
|
;; your application
|
||||||
|
;; (swap! app-state update-in [:__figwheel_counter] inc)
|
||||||
|
)
|
||||||
|
|
||||||
|
|
||||||
|
(defonce mouse-pos (atom nil))
|
||||||
|
|
||||||
|
(def ease1 (animation/easer 0.0))
|
||||||
|
(def ease2 (animation/easer 1.0))
|
||||||
|
(def ease3 (animation/easer 2.0))
|
||||||
|
|
||||||
|
(def complex-transition
|
||||||
|
(animation/easing-chain
|
||||||
|
[[ease1 0.5 1.0 1000 animation/linear]
|
||||||
|
[ease2 1.0 2.0 1000 animation/linear]
|
||||||
|
]))
|
||||||
|
|
||||||
|
(def orange "#E67E22")
|
||||||
|
(def green "#1ABC9C")
|
||||||
|
|
||||||
|
(defn anchor [n link title]
|
||||||
|
[:a.anchor {:href link
|
||||||
|
:style {:width "100%"
|
||||||
|
:top (str (+ 90 (* 100 n)) "%")
|
||||||
|
:left 0}} title])
|
||||||
|
|
||||||
|
(defn ease-view []
|
||||||
|
[:div
|
||||||
|
[:div#title {:style {:height "100vh"
|
||||||
|
:background orange
|
||||||
|
:padding 0}}
|
||||||
|
|
||||||
|
[:h1 {:style
|
||||||
|
{:font-size (rx (str (* 80 @ease1) "px"))
|
||||||
|
:margin 0
|
||||||
|
:text-align "center"
|
||||||
|
:text-shadow (str "1px 3px 0 rgba(0,0,0,0.1)")
|
||||||
|
:line-height "2em"
|
||||||
|
:color "rgba(255,255,255,0.9)"
|
||||||
|
}
|
||||||
|
:node/on-attached (fn [x] (complex-transition))
|
||||||
|
}
|
||||||
|
"Title"]
|
||||||
|
[anchor 0 "#subtitle" "Go to Sub Title »"]]
|
||||||
|
[:div#subtitle {:style {:height "100vh"
|
||||||
|
:background green
|
||||||
|
:padding 0}}
|
||||||
|
|
||||||
|
[:h2 {:style
|
||||||
|
{:font-size (rx (str (* 80 @ease1) "px"))
|
||||||
|
:margin 0
|
||||||
|
:text-align "center"
|
||||||
|
:text-shadow (str "1px 3px 0 rgba(0,0,0,0.1)")
|
||||||
|
:line-height "2em"
|
||||||
|
:color "rgba(255,255,255,0.9)"
|
||||||
|
}
|
||||||
|
:node/on-attached (fn [x] (complex-transition))
|
||||||
|
}
|
||||||
|
"Sub Title"]
|
||||||
|
[anchor 1 "#title" "« Back to Title"]]])
|
||||||
|
|
||||||
|
(defn view []
|
||||||
|
[:div
|
||||||
|
{:width "100%"
|
||||||
|
:height "100%"
|
||||||
|
:style {:border "1px solid black"}
|
||||||
|
:on-mousemove (fn [e] (swap! state assoc-in [:mouse-pos] [(.-clientX e) (.-clientY e)]))
|
||||||
|
}
|
||||||
|
[:h1 (:text @state)]
|
||||||
|
[:p "Your mouse is at: " (rx (str (:mouse-pos @state)))]
|
||||||
|
])
|
||||||
|
|
||||||
|
(dom/mount! (.getElementById js/document "root") (ease-view))
|
||||||
|
|
||||||
|
(println "Edits to this text should show up in your developer console.")
|
Loading…
Reference in a new issue