This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
- # 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
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
so i'd expect
((.getElementById js/document "my-div") :myattr "myval") to work, right?
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.
And heres where it sets the event listeners on it.
thedavidmeister https://github.com/alandipert/embedded-hoplon-example is an example of "mounting" a hoplon element
@chromalchemy wouldn't the events bubble through all the divs when attached to the dom?
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.
I think the events would bubble properly. But it is missing the
draggable= declaration that makes the browser invoke the event.
(j/with-let [el (h/div (h/div))] ((.-firstElementChild el) :draggable "true"))
@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");
(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-letor those js methods yet.
"<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>"
(j/with-let [el (elem "hello")] ((hoplon.ui.elems/-mid el) :draggable "true"))
Do i need
with-let? What if I just use
((hoplon.ui.elems/-mid (elem "hello")) :draggable "true") somewhere?
(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.
definitely works well with cells, especially if you want to add watch functions to a cell
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?