Fork me on GitHub
#hoplon
<
2019-06-04
>
chromalchemy00:06:35

@flyboarder the simple on! defmethod worked in the case I was asking about (attribute providers)

(defmethod on! :dragstart
  [elem event callback]
  (let [e (js/jQuery elem)]
    (.on e "dragstart" callback)))

chromalchemy00:06:18

seems like compound attribute names like :drag-start were giving me an error

flyboarder00:06:32

is that the correct name of the event?

flyboarder00:06:21

@chromalchemy you shouldn’t need to implement that

flyboarder00:06:41

all the default events are natively supported

flyboarder00:06:38

(h/div :dragstart #(my-callback @%)) should be all you need

chromalchemy00:06:54

Oh, I thought only the jquery ones

flyboarder00:06:27

(h/div :drag-start #(...)) wont work because drag-start isnt an event

chromalchemy00:06:30

So all the jquery and native javascript events are implemented by default?

flyboarder00:06:52

well there is a default handler

flyboarder00:06:55

all attributes which have a fn as their value are considered an event

flyboarder00:06:37

the default handler is similar to this:

(defmethod on! ::default
  [elem event callback]
  (let [e (js/jQuery elem)]
    (.on e (name event) callback)))

flyboarder00:06:15

so provided the attribute key is a valid event name it will attach to that event

chromalchemy00:06:47

Ok, thanks for the clarification. So in practice the both the jquery and native events "handle" with the same syntactic convention

flyboarder00:06:33

same goes for jquery touch

flyboarder00:06:51

those events are included for free just by including jquery touch into the app

chromalchemy00:06:50

O, nice!!! 👍

chromalchemy00:06:54

Ok another think I think should be simple? How can I get dom attributes as clojure values within an element definition?

(defelem reference-size
 [attr kids]
 (let
   [elem
      (div attr kids)
    width (cell= (.-width elem))
    height (cell= (.-height elem))]
   (elem
     (cell= (str width "/" height)))))

flyboarder00:06:30

Why would you ever do that?

flyboarder00:06:28

state flows into an element I dont recommend pulling state from an element

chromalchemy00:06:59

I want the rendered width and height as values to compute distances between drag event mouse coordinate output, and also render lines connecting "nodes" in a graph diagram

chromalchemy00:06:59

I can probably get the drag -> new position values from mouse events

flyboarder00:06:58

in your example you have an element not attached to the dom and you are asking for it’s dimensions

flyboarder00:06:22

as it’s not in the dom

flyboarder00:06:37

it’s placed into the dom at runtime when rendered

flyboarder00:06:49

so that kind of state you want to be setting on the element

flyboarder00:06:54

not asking the element for it

chromalchemy01:06:26

What about when size changes from changing text content?

flyboarder01:06:54

what about it?

chromalchemy01:06:13

I know that example is broken, just fishing around ...

flyboarder01:06:45

how do you usually know when a dom element has changed size?

chromalchemy01:06:30

So text changes -> box size changes -> maybe need to know size to compute drag reposition?

chromalchemy01:06:06

I'm picturing graph nodes that can be variable size depending on text content

chromalchemy01:06:23

And also the lines between them may need to be recomputed?

chromalchemy01:06:53

Like, how would I draw a line between elements (svg underlayer?), but have it end at the borders of the elements

flyboarder01:06:11

there is no concrete answer here, hoplon is lisp dom elements

flyboarder01:06:20

how do you usually draw a line with html?

flyboarder01:06:28

or recompute something with HTML?

chromalchemy01:06:44

like graphviz diagrams, but dynamic input, selection, dragging

chromalchemy01:06:37

Stack overflow examples indicated dom elements, with an SVG underlayer..

flyboarder01:06:15

I think you should try to actually build the thing you are thinking of

flyboarder01:06:51

you would probably want something like d3 for that

chromalchemy01:06:51

I am, I was just thinking that I might need the size of a dynamically sized element, to compute all the positions

chromalchemy01:06:50

I will check d3. I remember someone recommending a subset of that. But I dont want to lose the hoplon interactivity patterns I know.

chromalchemy01:06:21

Also hoplon encompases SVG right?

flyboarder01:06:10

you can include hoplon with svg yes

flyboarder01:06:36

^this is probably more what you are looking for