This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2017-10-27
Channels
- # aws (3)
- # aws-lambda (8)
- # bangalore-clj (1)
- # beginners (155)
- # boot (13)
- # cider (88)
- # cljs-dev (3)
- # cljsrn (9)
- # clojure (120)
- # clojure-india (1)
- # clojure-italy (2)
- # clojure-norway (1)
- # clojure-romania (2)
- # clojure-russia (41)
- # clojure-spec (4)
- # clojure-uk (34)
- # clojurescript (68)
- # core-logic (16)
- # cursive (11)
- # data-science (9)
- # datomic (19)
- # dirac (6)
- # duct (20)
- # emacs (7)
- # events (2)
- # figwheel (4)
- # fulcro (12)
- # graphql (1)
- # hoplon (68)
- # klipse (1)
- # leiningen (7)
- # lumo (11)
- # off-topic (9)
- # onyx (114)
- # pedestal (4)
- # protorepl (15)
- # re-frame (60)
- # reagent (3)
- # ring (18)
- # shadow-cljs (15)
- # spacemacs (82)
Hoplon.UI provides elem attrs for native js drag events, but does not have a component that sets :draggable "true"
. So I can't use them. The library has a way of handling elem attributes such that I can't just list arbitrary static attributes to pass to the rendered markup <div myattr="myval"></div>
like the native Hoplon way. Is there a way to explicitly pass a static attribute into the HTML markup in a more explicit, late-binding way? Using the the attr
param in a defelem
, or a do-method
? or something like (add-attributes!)
?
Hoplon.UI drag event bindings https://github.com/jumblerg/ui/blob/cbdc3e7980ac59f527fb10c47d847f3d99feb335/lib/src/hoplon/ui.cljs#L249
This fn in the public api looks like it might do what I need. But I don't know how to use it. https://github.com/jumblerg/ui/blob/cbdc3e7980ac59f527fb10c47d847f3d99feb335/lib/src/hoplon/ui/attrs.cljs#L336 @jumblerg Any hints?
Hoplon.UI uses 3 nested divs for a standard component. So I'm not sure if I'm barking up the wrong tree trying to use drag events in a conventional way. (What layer to drag?)
i've been asked to attempt a rescue for some component in an angular project but i don't know much about angular...
is there a way to "mount" hoplon into an existing project if i include a compiled js file and give it an id or something?
the thing that needs fixing would be really really easy to make in hoplon >.<
@chromalchemy not sure what you're looking at but you can call dom elements as functions and they work like normal hoplon
(h/div :foo "bar")
and ((h/div) :foo "bar")
do the same thing
so i'd expect ((.getElementById js/document "my-div") :myattr "myval")
to work, right?
Thanks, I didn't know those patterns.
That works in regular Hoplon. In Hoplon.UI, to create a more consistent and logical box model, things are woven through a series of protocols and such, to create a generic component that consists of 3 nested divs. The middle one i believe is the target for events. But there are no ID's in the generated html, and I can't seem to create any custom attributes in the hoplon.ui components. Stumped about how to target this middle div to simply set a static Dom attribute draggable="true"
. Here is the middleware where it creates the middle div.
https://github.com/jumblerg/ui/blob/cbdc3e7980ac59f527fb10c47d847f3d99feb335/lib/src/hoplon/ui/elems.cljs#L12
And heres where it sets the event listeners on it.
https://github.com/jumblerg/ui/blob/cbdc3e7980ac59f527fb10c47d847f3d99feb335/lib/src/hoplon/ui.cljs#L249
thedavidmeister https://github.com/alandipert/embedded-hoplon-example is an example of "mounting" a hoplon element
@alandipert sweet thanks i'll check it out 🙂
good to have options
@chromalchemy wouldn't the events bubble through all the divs when attached to the dom?
i haven't used hoplon UI, soz 😕
i'm surprised that you can't add attributes
the behaviour i described is just hoplon implementing IFn
for all dom elements
Yeah, its really nice when it works, but I feel a bit boxed in not knowing how to modify things like the way Hoplon normally lets you.
can you use (.-children el)
to get at the children of the outer el?
I think the events would bubble properly. But it is missing the draggable=
declaration that makes the browser invoke the event.
if you have the outer el can you do
((.-firstElementChild el) :draggable "true")
put that in the outer elem?
(j/with-let [el (make-my-el)] ((.-firstElementChild el) :draggable "true"))
How does (with-let)
(make-my-el)
fit in in the context of a (defelem)
(defelem make-my-el ...)
whatever you're currently doing to make and return an element...
(j/with-let [el (h/div (h/div))] ((.-firstElementChild el) :draggable "true"))
e.g. ^^
hopefully puts draggable="true"
on the inner div
@thedavidmeister That works for vanilla Hoplon. But not for UI elems. I get
A sanity hint for incoming uncaught error:
var el = hoplon.ui.elem.call(null,"hello");
el.firstElementChild. <<< ☢ NULL ☢ <<< call(null,new cljs.core.Keyword(null,"draggable","draggable",1676206163),"true");
for (defelem demo []
(j/with-let
[el (elem "hello")]
((.-firstElementChild el) :draggable "true")))
(elem)
is the generic component that has the nested divs.
I guess there is some magic going on that I just don't know how to amend :thinking_face: I guess I can modify the library directly for this change. Or just go with normal Hoplon. Thanks again for more patterns. I have not used with-let
or those js methods yet.@chromalchemy hmm, what do you get from (prn (.-outerHTML (elem "hello")))
?
well you don't have a dom element
you have nil
When i (prn (elem "hello")
i get #<Elem: DIV DIV DIV>
oh, so it's a hoplon.ui.elems/Elem
not a dom element
what about
(prn (.-outerHTML (hoplon.ui.elems/-mid (elem "hello"))))
"<div style=\"box-sizing: border-box; display: table-cell; position: relative; pointer-events: auto; border-color: transparent;\"><div style=\"display: block; position: relative; height: 100%; max-height: inherit; cursor: inherit; user-select: none; margin: 0px;\">hello</div></div>"
so what about
(j/with-let [el (elem "hello")] ((hoplon.ui.elems/-mid el) :draggable "true"))
Omg. Yes, that worked! 🎉
looks like hoplon ui is just wrapping the divs up in that Elem
type
but you can still get them with -out
-mid
and -in
Nice. I'm mystified by all the protocols and types stuff.
Do i need with-let
? What if I just use ((hoplon.ui.elems/-mid (elem "hello")) :draggable "true")
somewhere?
with-let
is not magic
is just shorthand for (let [x ...] ... x)
so, bind something to x
, then do some stuff with x
then return x
(let [el (elem "hello")] ((hoplon.ui.elems/-mid el) :draggable "true") el)
would be the same
Got it, shorthand so you can do something with/to the named thing, then return it at the end.
and j/with-let
plays nicely with cells I guess.
definitely works well with cells, especially if you want to add watch functions to a cell
(j/with-let [c (j/cell ...)] (h/do-watch c ...))
you can get those hard to reach places that cell=
doesn't quite get to
kk i'm off
@thedavidmeister Thanks a ton. Was really enlightening.
in castra is there a preferred way to communicate to the client the nature of an rpc/pre failure? For example if a spec fails I would like the explain-data sent to client. I've been just been using assertion and merging the ex-data with the spec problems. But this composes weirdly (assertions return nil) and is starting to get kinda weird as I'm adding more and more rules. Is there a better way that I'm missing?