From 3b0c4c2e50b80ec0cc10e6f5f2ff771e369cd8a0 Mon Sep 17 00:00:00 2001 From: Yann Esposito Date: Thu, 27 Aug 2015 10:08:49 +0200 Subject: [PATCH] nice --- .gitignore | 13 +++++ README.md | 39 ++++++++++++++ project.clj | 69 +++++++++++++++++++++++++ resources/public/css/style.css | 2 + resources/public/index.html | 41 +++++++++++++++ src/apintro2/core.cljs | 92 ++++++++++++++++++++++++++++++++++ 6 files changed, 256 insertions(+) create mode 100644 .gitignore create mode 100644 README.md create mode 100644 project.clj create mode 100644 resources/public/css/style.css create mode 100644 resources/public/index.html create mode 100644 src/apintro2/core.cljs diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..cdd1de3 --- /dev/null +++ b/.gitignore @@ -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 diff --git a/README.md b/README.md new file mode 100644 index 0000000..de8ad32 --- /dev/null +++ b/README.md @@ -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. diff --git a/project.clj b/project.clj new file mode 100644 index 0000000..d9cc1dd --- /dev/null +++ b/project.clj @@ -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" + }) diff --git a/resources/public/css/style.css b/resources/public/css/style.css new file mode 100644 index 0000000..26163d2 --- /dev/null +++ b/resources/public/css/style.css @@ -0,0 +1,2 @@ +/* some style */ + diff --git a/resources/public/index.html b/resources/public/index.html new file mode 100644 index 0000000..ee1111c --- /dev/null +++ b/resources/public/index.html @@ -0,0 +1,41 @@ + + + + + + + + + +
+ + + diff --git a/src/apintro2/core.cljs b/src/apintro2/core.cljs new file mode 100644 index 0000000..d0ff551 --- /dev/null +++ b/src/apintro2/core.cljs @@ -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.")