[CLJS] tutorial-04

frozar · Sep 26, 2019 · f39d968 · f39d968
1 parent 4779957
commit f39d968
Showing 8 changed files with 254 additions and 0 deletions.
diff --git a/cljs/modern-cljs/tutorial-04/boot.properties b/cljs/modern-cljs/tutorial-04/boot.properties
@@ -0,0 +1,5 @@
+#http://boot-clj.com
+#Tue Sep 24 14:00:00 CEST 2019
+BOOT_CLOJURE_NAME=org.clojure/clojure
+BOOT_CLOJURE_VERSION=1.8.0
+BOOT_VERSION=2.8.3
diff --git a/cljs/modern-cljs/tutorial-04/build.boot b/cljs/modern-cljs/tutorial-04/build.boot
@@ -0,0 +1,32 @@
+(set-env!
+ :source-paths #{"src/cljs"}
+ :resource-paths #{"html"}
+
+ :dependencies '[[org.clojure/clojure "1.8.0"]         ;; add CLJ
+                 [org.clojure/clojurescript "1.10.520"] ;; add CLJS
+                 [adzerk/boot-cljs "2.1.5"]
+                 [pandeiro/boot-http "0.8.3"] ;; add http dependency
+                 [adzerk/boot-reload "0.6.0"] ;; add boot-reload
+                 [adzerk/boot-cljs-repl "0.4.0"]
+                 ;; Dependancies for boot-cljs-repl
+                 [cider/piggieback "0.3.9"]
+                 [weasel "0.7.0"]
+                 [nrepl "0.4.5"]
+                 ])
+
+(require '[adzerk.boot-cljs :refer [cljs]]
+         '[pandeiro.boot-http :refer [serve]] ;; make serve task visible
+         '[adzerk.boot-reload :refer [reload]] ;; make reload visible
+         '[adzerk.boot-cljs-repl :refer [cljs-repl start-repl]]) ;; make cljs-repl visible
+
+;; define dev task as composition of subtasks
+(deftask dev
+  "Launch Immediate Feedback Development Environment"
+  []
+  (comp
+   (serve :dir "target")
+   (watch)
+   (reload)
+   (cljs-repl) ;; before cljs task
+   (cljs)
+   (target :dir #{"target"})))
diff --git a/cljs/modern-cljs/tutorial-04/cmd.txt b/cljs/modern-cljs/tutorial-04/cmd.txt
@@ -0,0 +1,9 @@
+terminal 1:
+boot dev
+
+terminal 2:
+boot repl -c
+boot.user=> (start-repl)
+cljs.user=> (js/alert "Hello, ClojureScript")
+cljs.user=> :cljs/quit
+boot.user=> (quit)
diff --git a/cljs/modern-cljs/tutorial-04/html/css/styles.css b/cljs/modern-cljs/tutorial-04/html/css/styles.css
@@ -0,0 +1,148 @@
+/* From: http://www.assemblesoft.com/examples/form/simpleform.html */
+* {margin:0; padding:0;}
+
+html {
+	font: 90%/1.3 arial,sans-serif;
+	padding:1em;
+	background:#B9C2CC;
+}
+form {
+	background:#fff;
+	padding:1em;
+	border:1px solid #eee;
+}
+
+fieldset div {
+	margin:0.3em 0;
+	clear:both;
+}
+
+form {
+	margin:1em;
+	width:15em;
+}
+
+label {
+	float:none;
+	width:12em;
+	display:block;
+	clear:both;
+}
+
+legend {
+	color:#0b77b7;
+	font-size:1.4em;
+}
+legend span {
+	width:10em;
+	text-align:right;
+}
+input {
+	padding:0.15em;
+	width:10em;
+	border:1px solid #ddd;
+	background:#fafafa;
+	font:bold 1em arial, sans-serif;
+	display:block;
+	float:left;
+}
+input:hover, input:focus {
+	border-color:#c5c5c5;
+	background:#f6f6f6;
+} 
+fieldset {
+	border:1px solid #ddd;
+	padding:0 0.5em 0.5em;
+}
+.date input {
+	background-image:url(../gfx/calendar-small.gif);
+	background-repeat:no-repeat;
+	background-position:100% 50%;
+}
+
+.date fieldset label {
+	float:none;
+	display:block;
+	text-align:left;
+	width:auto;
+}
+.date fieldset div {
+	float:left;
+	clear:none;
+	margin-right:0.2em;
+}
+.radio, .date {
+	position:relative;
+}
+.radio fieldset, .date fieldset {
+	border:none;
+	width:auto;
+	padding:1px 0 0 11em;
+}
+.radio legend, .date legend {
+	font-size:1em;
+	color:#000;
+}
+.radio legend span, .date legend span {
+	position:absolute;
+	left:0;
+	top:0.3em;
+	width:10em;
+	display:block;
+}
+.radio label, .radio input {
+	vertical-align:middle;
+	display:inline;
+	float:none;
+	width:auto;
+	background:none;
+	border:none;
+}
+.radio div {
+	float:left;
+	white-space:nowrap;
+	clear:none;
+}
+
+.email {
+	width:14em;
+}
+
+input.default {
+	color:#bbb;
+}
+
+#submit {
+	margin:1em;
+	width:69px;
+	height:26px;
+	overflow:hidden;
+	border:0;
+	display:block;
+	cursor:pointer !important;
+}
+#submit:hover {
+	background-position:0 -26px;
+}
+
+.error {
+	color: #FF1400;
+}
+/*
+:invalid {
+	color:red;
+}
+*/
+/*
+input[type=checkbox], input[type=radio] { visibility: hidden; width:0; height:0; padding:0; margin:0; }
+input[type=checkbox] + label, input[type=radio] + label { padding-left:18px; }
+input[type=checkbox] + label{ background: url(../gfx/check_radio.png) 0 0 no-repeat; }
+input[type=checkbox]:focus + label{ background-position: 0 -16px; }
+input[type=checkbox] + label:hover{ background-position: 0 -32px; } 
+input[type=checkbox]:checked + label{ background-position: 0 -48px; }
+
+input[type=radio] + label{ background: url(../gfx/check_radio.png) 0 -64px no-repeat; }
+input[type=radio]:focus + label{ background-position: 0 -80px; }
+input[type=radio] + label:hover{ background-position: 0 -96px; } 
+input[type=radio]:checked + label{ background-position: 0 -112px; }
+*/
diff --git a/cljs/modern-cljs/tutorial-04/html/index.html b/cljs/modern-cljs/tutorial-04/html/index.html
@@ -0,0 +1,23 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>Login</title>
+    <!--[if lt IE 9]>
+    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+    <link rel="stylesheet" href="css/styles.css">
+</head>
+<body>
+    <!-- Script 2.2 - login.html -->
+    <form action="login.php" method="post" id="loginForm" novalidate>
+        <fieldset>
+            <legend>Login</legend>
+            <div><label for="email">Email Address</label><input type="email" name="email" id="email" required></div>
+            <div><label for="password">Password</label><input type="password" name="password" id="password" required></div>
+            <div><label for="submit"></label><input type="submit" value="Login &rarr;" id="submit"></div>
+        </fieldset>
+    </form>
+    <script src="js/main.js"></script>
+</body>
+</html>
diff --git a/cljs/modern-cljs/tutorial-04/html/js/main.cljs.edn b/cljs/modern-cljs/tutorial-04/html/js/main.cljs.edn
@@ -0,0 +1,2 @@
+{:require [modern-cljs.core modern-cljs.login]
+ :compiler-options {:asset-path "js/main.out"}}
diff --git a/cljs/modern-cljs/tutorial-04/src/cljs/modern_cljs/core.cljs b/cljs/modern-cljs/tutorial-04/src/cljs/modern_cljs/core.cljs
@@ -0,0 +1,8 @@
+;; create the main project namespace
+(ns modern-cljs.core)
+
+;; enable cljs to print to the JS console of the browser
+(enable-console-print!)
+
+;; print to the console
+(println "Hello, CLJS!")
diff --git a/cljs/modern-cljs/tutorial-04/src/cljs/modern_cljs/login.cljs b/cljs/modern-cljs/tutorial-04/src/cljs/modern_cljs/login.cljs
@@ -0,0 +1,27 @@
+(ns modern-cljs.login)
+
+;; define the function to be attached to form submission event
+(defn validate-form []
+  ;; get email and password element from their ids in the HTML form
+  (let [email (.getElementById js/document "email")
+        password (.getElementById js/document "password")]
+    (if (and (> (count (.-value email)) 0)
+             (> (count (.-value password)) 0))
+      true
+      (do (js/alert "Please, complete the form!")
+          false))))
+
+;; define the function to attach validate-form to onsubmit event of
+;; the form
+(defn init []
+  ;; verify that js/document exists and that it has a getElementById
+  ;; property
+  (if (and js/document
+           (.-getElementById js/document))
+    ;; get loginForm by element id and set its onsubmit property to
+    ;; our validate-form function
+    (let [login-form (.getElementById js/document "loginForm")]
+      (set! (.-onsubmit login-form) validate-form))))
+
+;; initialize the HTML page in unobtrusive way
+(set! (.-onload js/window) init)
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		{:require [modern-cljs.core modern-cljs.login]
		:compiler-options {:asset-path "js/main.out"}}