Fork me on GitHub
#reagent
<
2019-02-04
>
Ramzi11:02:24

Hello. From a fresh reagent-frontend project... 1. I would like the site background to be gray. I've deleted most of what was there originally, and just have a home-page variable that is still rendering. When I try to put the background color gray on it, it makes such a small portion of the site. How can I set the whole page's body background to be gray? 2. I am trying to use horizontal rows to break my page into meaningful chunks. I want to display a "node" item, which looks like a circle at 50px. The problem is, the next horizontal row I use intersects and goes under the node. I don't understand why the horizontal row doesn't just draw underneath the node. 3. Most importantly, I would like to have an input that dynamically changes the property of a CSS attribute, for example, the node's width or height. And I would like that reflected in the model node in real time. Using the reagent website, I've gotten the inputs on the screen. I'm unsure of how to use atoms in clojure, and I'm also unsure of how to change a CSS property in Reagent. Thanks!

orestis12:02:42

The general idea would be that you attach an on-change handler on the input, and that on-change handler will update a reagent atom with the new value. Then some node would deref via @ that atom where it makes sense. Reagent then would take care of re-rendering whenever the atom changes.

orestis12:02:11

I get the feeling though that this explanation is a little bit further ahead the learning curve for you, @its.ramzi, so let me see if there’s something more concrete around.

orestis12:02:12

Have you seen the basic documentation at: http://reagent-project.github.io, more specifically “Managing state in Reagent”

orestis12:02:32

(ns example
  (:require [reagent.core :as r]))
(defn atom-input [value]
  [:input {:type "text"
           :value @value
           :on-change #(reset! value (-> % .-target .-value))}])

(defn shared-state []
  (let [val (r/atom "foo")]
    (fn []
      [:div
       [:p "The value is now: " @val]
       [:p "Change it here: " [atom-input val]]])))

Ramzi12:02:07

Um, I have played around in Reagent before, but just picked it up again after months off. I'm rusty, and I've never used atoms. But I can also tell I just don't understand simple HTML principles regarding horizontal rows and divs and breaks and such.

orestis12:02:23

Yeah, HTML and CSS are complicated enough on their own…

Ramzi12:02:40

Yes, that's the source I'm working with. If I pasted my current code, would you know how to look at it from a reagent-frontend fresh project? Or, would you?

orestis12:02:30

Re horizontal rows and breaks etc — I’d look at flexbox for how to do that in a sane-ish way: https://www.sketchingwithcss.com/samplechapter/cheatsheet.html

orestis12:02:08

I don’t get what reagent-frontend is — is this some project template? Feel free to paste your code here, and let’s see what happens 😄

Ramzi12:02:10

i'm trying to hack out something quickly for now, so functionality is more important than aesthetic

Ramzi12:02:25

Yes. Through my windows commant line... You're joking

orestis12:02:11

No sorry, I meant to say: I’m willing to help, but I’m also busy at work. So paste your code here, and if I can, I will help… but perhaps some other person will also be able to chime in.

orestis12:02:06

OK, I’m not familiar with that particular template but I don’t think it makes much difference to the generated code. So please share the code you have for now.

orestis12:02:49

OK, I get it.

Ramzi12:02:02

So, from my command prompt, I did: lein new reagent-frontend mindmeld From that, you only need to modify core.cljs Then to run it, I've been using: lein figwheel Then you should see exactly what I see, and what I'm trying to do, and my next steps.

orestis12:02:48

Cool, I need to run to a meeting soon though. You are attaching the on-change handler in a wrong way to the wrong place. Unfortunately reagent doesn’t detect this kind of error and instead of warning you, it does nothing (which is understandably frustrating)

Ramzi12:02:19

That's just where I left off, to get code to you right away. We can talk later.

Ramzi12:02:23

If you get the gist of what I'm going for... Having an input for width, and height, and redrawing the node on the screen accordingly... Then you can implement it however you like.

orestis12:02:40

Is there a single node or many of them?

Ramzi12:02:19

That onchange was a remnant of the example source you pasted, actually. It was defined as atom-input in the example source

Ramzi12:02:44

Right now I just want there to be 1 model node on the screen, that redraws each time you change their height or width attribute

Ramzi12:02:00

and later, backgroundcolor and textarea color

Ramzi12:02:12

And then later, there will be a button you can click to generate X number of nodes on the screen

orestis14:02:28

(defn node [{:keys [width height]}]
  [:div {:style {:background "blue"
                 :position "absolute"
                 :top "100px"
                 :left "50px"
                 :width (str width "px")
                 :height (str height "px")}}])

(defn atom-input [value]
  [:input {:type "text"
           :value @value
           :on-change #(reset! value (-> % .-target .-value))}])



(defn example []
  (r/with-let [width (r/atom "10")
               height (r/atom "10")]
    [:div {:position "relative"}
     [node {:width @width :height @height}]
     [atom-input width]
     [atom-input height]]))

orestis14:02:05

This is what renders out of these:

Ramzi14:02:41

Okay. This is great. Can you add a textarea inside of that div, that equally resizes, but has some padding. That is, the div may be like 20% wider and taller than the textarea. Can can you add that as an input? Can you label the inputs height, width, padding, and color%? I want the textarea to be like 20% paler a shade of blue, so it is known that it is an input text. My original CSS style rounded the corners, and I notices letters kept getting cut off at the corners. So that's why I'd like there to be padding, so we can turn the rectangular node rounded at the corners without cutting off any letters.

Ramzi14:02:07

What is with-let

Ramzi14:02:45

And the @'s? 😞 I cant read any of this. 😞 Like a foreign language.

Ramzi14:02:12

I can try to code by analogy.

orestis14:02:38

Sorry, I’m busy ATM. You have general Clojure questions, which I could answer, but not ATM. I’m sure someone in the #beginners channel can help you with the @, which is about atoms.

orestis14:02:43

with-let is a reagent shortcut

dimovich20:02:47

what is the current best practice to inline an SVG inside a component?

dimovich20:02:29

I've tried this method https://www.mattgreer.org/articles/embedding-svg-into-a-reagent-component/ but it doesn't work for complex SVG's with inner styles and animation (as an option I could clean them up and move the styles to a css file)

dimovich20:02:02

my current solution is this (but it has it's own issues):