nice
This commit is contained in:
Yann Esposito
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