This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2019-02-04
Channels
- # announcements (7)
- # beginners (37)
- # boot (6)
- # calva (13)
- # cider (13)
- # cljdoc (52)
- # cljs-dev (9)
- # clojure (117)
- # clojure-europe (3)
- # clojure-italy (12)
- # clojure-nl (21)
- # clojure-russia (8)
- # clojure-spec (77)
- # clojure-uk (20)
- # clojurescript (142)
- # community-development (6)
- # cursive (5)
- # datomic (13)
- # emacs (9)
- # figwheel-main (20)
- # fulcro (33)
- # graphql (11)
- # instaparse (6)
- # klipse (1)
- # off-topic (7)
- # om (8)
- # quil (7)
- # re-frame (11)
- # reagent (39)
- # reitit (10)
- # shadow-cljs (36)
- # spacemacs (3)
- # test-check (3)
- # tools-deps (83)
- # utah-clojurians (31)
- # vim (14)
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!
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.
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.
Have you seen the basic documentation at: http://reagent-project.github.io, more specifically “Managing state in Reagent”
(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]]])))
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.
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?
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
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 😄
i'm trying to hack out something quickly for now, so functionality is more important than aesthetic
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.
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.
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.
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)
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.
That onchange was a remnant of the example source you pasted, actually. It was defined as atom-input in the example source
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
And then later, there will be a button you can click to generate X number of nodes on the screen
(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]]))
Do have a look at https://www.learnreagent.com as well
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.
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.
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)