The :hoplon: ClojureScript Web Framework - http://hoplon.io/

@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)))


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

flyboarder 2019-06-04T00:43:32.030Z

is that the correct name of the event?

flyboarder 2019-06-04T00:44:21.030500Z

@chromalchemy you shouldn’t need to implement that

flyboarder 2019-06-04T00:44:41.031Z

all the default events are natively supported

flyboarder 2019-06-04T00:45:38.032200Z

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


Oh, I thought only the jquery ones

flyboarder 2019-06-04T00:46:27.033100Z

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


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

flyboarder 2019-06-04T00:47:41.034300Z


flyboarder 2019-06-04T00:47:52.034500Z

well there is a default handler

flyboarder 2019-06-04T00:48:55.035Z

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

flyboarder 2019-06-04T00:49:37.035700Z

the default handler is similar to this:

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

flyboarder 2019-06-04T00:50:15.036200Z

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


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

flyboarder 2019-06-04T00:52:01.037500Z


flyboarder 2019-06-04T00:52:33.038400Z

same goes for jquery touch

flyboarder 2019-06-04T00:52:51.039100Z

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


O, nice!!! 👍


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]
      (div attr kids)
    width (cell= (.-width elem))
    height (cell= (.-height elem))]
     (cell= (str width "/" height)))))

flyboarder 2019-06-04T00:55:30.041100Z

Why would you ever do that?

flyboarder 2019-06-04T00:56:28.043Z

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


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


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

flyboarder 2019-06-04T00:58:58.045700Z

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

flyboarder 2019-06-04T00:59:01.046Z

it has none

flyboarder 2019-06-04T00:59:22.046400Z

as it’s not in the dom

flyboarder 2019-06-04T00:59:37.046900Z

it’s placed into the dom at runtime when rendered

flyboarder 2019-06-04T00:59:49.047300Z

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

flyboarder 2019-06-04T00:59:54.047700Z

not asking the element for it


What about when size changes from changing text content?

flyboarder 2019-06-04T01:00:54.048900Z

what about it?


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

flyboarder 2019-06-04T01:01:45.050200Z

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


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


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


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


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

flyboarder 2019-06-04T01:04:11.053700Z

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

flyboarder 2019-06-04T01:04:20.054100Z

how do you usually draw a line with html?

flyboarder 2019-06-04T01:04:28.054500Z

or recompute something with HTML?

flyboarder 2019-06-04T01:04:38.054700Z

you dont


like graphviz diagrams, but dynamic input, selection, dragging


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

flyboarder 2019-06-04T01:06:15.056800Z

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

flyboarder 2019-06-04T01:06:51.057700Z

you would probably want something like d3 for that


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


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


Also hoplon encompases SVG right?

flyboarder 2019-06-04T01:10:10.061800Z

you can include hoplon with svg yes

flyboarder 2019-06-04T01:10:36.062300Z

^this is probably more what you are looking for