These are chat archives for GetmeUK/ContentTools

10th
Aug 2016
Anthony Blackshaw
@anthonyjb
Aug 10 2016 07:36

@Yopi - so I copied your code in to my sandbox demo in the repo and the element you create is draggable for me. The only thing I had to do was insert the element into the html with the following format:

<div data-ce-tag="yogobe-readmore" width="200" height="200" style="display: block; background: red; width: 200px; height: 200px;"></div>

But this is because I'm missing any CSS for the element. Other than that using your code and the HTML above I get a red box I can drag vertically above and below elements.

In addition I noticed you've set the droppers to use ContentEdit.Element._dropBoth but restricted the replacements to just @placements: ['above', 'below'] when you probably want @placements: ['above', 'below', 'left', 'right'] - you will however need CSS in place to handle the element being left/right aligned
Jesper Bränn
@Yopi
Aug 10 2016 14:01
@anthonyjb interesting. And you changed them to Element instead of ResizableElement?
and yeah I realise now that they should be dropVert 😅
Anthony Blackshaw
@anthonyjb
Aug 10 2016 15:10
Hi @Yopi - I didn't change spot you'd inherited from ResizableElement will look at that now - 2 secs
Jesper Bränn
@Yopi
Aug 10 2016 15:10
Sorry! Could've clarified that before
Anthony Blackshaw
@anthonyjb
Aug 10 2016 15:10
np :)
OK so the reason is that you wont have defined any handlers for mouse/down/over/up, for example -
 _onMouseDown: (ev) ->
        # Give the element focus
        super(ev)

        # We add a small delay to prevent drag engaging instantly
        clearTimeout(@_dragTimeout)
        @_dragTimeout = setTimeout(
            () =>
                @drag(ev.pageX, ev.pageY)
            150
            )

    _onMouseOver: (ev) ->
        super(ev)

        # Don't highlight that we're over the element
        @_removeCSSClass('ce-element--over')

    _onMouseUp: (ev) ->
        super(ev)

        # If we're waiting to see if the user wants to drag the element, stop
        # waiting they don't.
        if @_dragTimeout
            clearTimeout(@_dragTimeout)
These are taken from the Static element - most elements have a slightly different approach to how they can be dragged depending on their content and or child / parent relationship - and so there's no base behaviour for these methods
Jesper Bränn
@Yopi
Aug 10 2016 15:13
Ahh
Anthony Blackshaw
@anthonyjb
Aug 10 2016 15:13
by the way the data-ce-moveable but should be ignored here
Jesper Bränn
@Yopi
Aug 10 2016 15:14
All right, that makes some sense
Anthony Blackshaw
@anthonyjb
Aug 10 2016 15:14
have updated the code example
Jesper Bränn
@Yopi
Aug 10 2016 15:16
I see I see, thanks for the help! I was thinking it would be something like that, but it also felt like Elements should've been moveable by default which is why I was confused
Anthony Blackshaw
@anthonyjb
Aug 10 2016 16:29
np @Yopi :) let me know how you get on using CT
Jesper Bränn
@Yopi
Aug 10 2016 17:11
Haha, it's going mostly fine. I am pretty uncertain if I'm doing things correctly but at least it seems to work like it should! Something I've been wondering though is how your development setup is, because when adding elements and things it is a real hassle to copy the built scripts over to content tools, and then copy the built files from there into my project. So, maybe there's a smarter way to go about things 😅
Anthony Blackshaw
@anthonyjb
Aug 10 2016 18:28
My plan longer term now npm support is in is to use browserify and npm so I can just upgrade the version in CT package.json and update. Either way there's some work to do because I've deliberately kept the packages separate (quite a few people use the other libraries separately, especially ContentEdit), but at least this would stop the copy/paste requirement.
while you're developing on a separate branch one option you might try is to softlink the CE file in your CT external folder to the CE build output file in your CE repo, so that updates are instantly seen by CT - you'd also need to change the grunt in CT to watch JS in the external folder but if you want to develop in both environments it's a small changes and should make the integration more seamless
@Yopi (forgot to mention you in my comments above :))
Jesper Bränn
@Yopi
Aug 10 2016 19:37
Ahh, all right, I can see how that would speed it up a bit