request textarea with more options; alpha release

README.md

@@ -11,7 +11,7 @@ Previews http://repo.quamolit.org/phlox/ .
 [![Clojars Project](https://img.shields.io/clojars/v/quamolit/phlox.svg)](https://clojars.org/quamolit/phlox)
 
 ```edn
-[quamolit/phlox "0.2.1-a4"]
+[quamolit/phlox "0.2.1-a5"]
 ```
 
 `render!` to add canvas to `<body/>`:
@@ -265,7 +265,12 @@ Also `comp-slider-point` is a minimal version for `comp-slider`, it does not acc
 To interact with text input:
 
 ```clojure
-(phlox.input/request-text! e {} (fn [result] (println "got:" result)))
+(phlox.input/request-text! e
+  {:placeholder "text.."
+   :initial "demo"
+   :textarea? false
+   :style {}}
+  (fn [result] (println "got:" result)))
 ```
 
 ### Workflow

package.json

@@ -1,6 +1,6 @@
 {
   "name": "phlox",
-  "version": "0.1.0",
+  "version": "0.2.1-a5",
   "description": "a PIXI DSL in ClojureScript",
   "main": "index.js",
   "scripts": {
@@ -18,7 +18,7 @@
   "author": "jiyinyiyong",
   "license": "MIT",
   "devDependencies": {
-    "shadow-cljs": "^2.8.95"
+    "shadow-cljs": "^2.8.98"
   },
   "dependencies": {
     "fontfaceobserver": "^2.1.0",

release.edn

@@ -1,4 +1,4 @@
-{:version "0.2.1-a4"
+{:version "0.2.1-a5"
  :group-id "quamolit"
  :artifact-id "phlox"
  :skip-tag true

src/phlox/app/container.cljs

@@ -11,7 +11,8 @@
             [phlox.app.comp.slider-demo :refer [comp-slider-demo comp-slider-point-demo]]
             [phlox.input :refer [request-text!]]
             [phlox.comp.messages :refer [comp-messages]]
-            ["shortid" :as shortid]))
+            ["shortid" :as shortid]
+            [respo-ui.core :as ui]))
 
 (defcomp
  comp-buttons
@@ -182,14 +183,37 @@
 
 (defcomp
  comp-text-input
- ()
- (container
-  {}
-  (rect
-   {:position [200 10],
-    :size [40 20],
-    :fill (hslx 0 0 20),
-    :on {:click (fn [e d!] (request-text! e {} (fn [result] (println "got:" result))))}})))
+ (states)
+ (let [cursor (:cursor states)
+       state (or (:data states) {:text "initial text", :long-text "long.."})]
+   (container
+    {}
+    (rect
+     {:position [240 110],
+      :size [80 24],
+      :fill (hslx 0 0 20),
+      :on {:click (fn [e d!]
+             (request-text!
+              e
+              {:initial (:text state), :style {:color "blue"}}
+              (fn [result] (d! cursor (assoc state :text result)))))}}
+     (text
+      {:text (:text state), :position [6 4], :style {:font-size 14, :fill (hslx 0 0 80)}}))
+    (rect
+     {:position [240 180],
+      :size [200 100],
+      :fill (hslx 0 0 20),
+      :on {:click (fn [e d!]
+             (request-text!
+              e
+              {:initial (:long-text state),
+               :style {:font-family ui/font-code},
+               :textarea? true}
+              (fn [result] (d! cursor (assoc state :long-text result)))))}}
+     (text
+      {:text (:long-text state),
+       :position [6 4],
+       :style {:font-size 14, :fill (hslx 0 0 80)}})))))
 
 (def tabs
   [[:drafts "Drafts"]
@@ -230,7 +254,7 @@
       :slider (comp-slider-demo (>> states :slider))
       :points (comp-points-demo (>> states :points))
       :switch (comp-switch-demo (>> states :switch))
-      :input (comp-text-input)
+      :input (comp-text-input (>> states :input))
       :messages (comp-messages-demo (>> states :messages))
       :slider-point (comp-slider-point-demo (>> states :slider-point))
       (text

src/phlox/input.cljs

@@ -2,11 +2,38 @@
 (ns phlox.input
   (:require [respo.render.html :refer [style->string]]
             [hsl.core :refer [hsl]]
-            [respo-ui.core :as ui]))
+            [respo-ui.core :as ui]
+            [lilac.core
+             :refer
+             [record+
+              number+
+              string+
+              optional+
+              tuple+
+              enum+
+              map+
+              fn+
+              any+
+              keyword+
+              boolean+
+              vector+
+              or+
+              is+]]
+            [phlox.check :refer [dev-check]]))
+
+(def lilac-input
+  (record+
+   {:placeholder (string+),
+    :initial (string+),
+    :style (map+ (keyword+) (any+)),
+    :textarea? (boolean+)}
+   {:all-optional? true, :check-keys? true}))
 
 (defn request-text! [e options cb]
+  (dev-check options lilac-input)
   (let [root (js/document.createElement "div")
-        input (js/document.createElement "input")
+        textarea? (:textarea? options)
+        input (js/document.createElement (if textarea? "textarea" "input"))
         x (-> e .-data .-global .-x)
         y (-> e .-data .-global .-y)
         close (js/document.createElement "span")]
@@ -23,9 +50,10 @@
         :padding "10px 12px",
         :background-color (hsl 0 0 30 0.9),
         :border (str "1px solid " (hsl 0 0 30)),
-        :width 200,
+        :width 240,
         :border-radius "2px"}
-       (if (< (- js/window.innerWidth x) 200) {:left nil, :right 8})
+       (if textarea? {:width 320})
+       (if (< (- js/window.innerWidth x) 240) {:left nil, :right 8})
        (if (< (- js/window.innerHeight y) 70) {:top nil, :bottom 8}))))
     (set!
      (.-style input)
@@ -40,7 +68,9 @@
         :width "100%",
         :border-radius "2px",
         :border :none,
-        :height 28})))
+        :height 28}
+       (if textarea? {:height 80})
+       (:style options))))
     (set!
      (.-style close)
      (style->string
@@ -51,12 +81,15 @@
        :color (hsl 0 80 80),
        :cursor :pointer}))
     (set! (.-placeholder input) (or (:placeholder options) "text..."))
-    (set! (.-value input) (or (:inital options) ""))
+    (set! (.-value input) (or (:initial options) ""))
     (set! (.-innerText close) "×")
     (.addEventListener
      input
      "keydown"
-     (fn [event] (when (= "Enter" (.-key event)) (cb (.-value input)) (.remove root))))
+     (fn [event]
+       (when (and (= "Enter" (.-key event)) (if textarea? (.-metaKey event) true))
+         (cb (.-value input))
+         (.remove root))))
     (.addEventListener close "click" (fn [event] (.remove root)))
     (.appendChild js/document.body root)
-    (.focus input)))
+    (.select input)))