Draggable lightbox modal

mguinness

Similar to question Move editor popup window on the screen, I was able to get it working with some code, but I have a minor issue which I hope someone can help with.

$("body").on("mousedown", ".DTE_Header", function (mousedownEvt) {
    var $draggable = $(this);
    var x = mousedownEvt.pageX - $draggable.offset().left,
        y = mousedownEvt.pageY - $draggable.offset().top;
    $("body").on("mousemove.draggable", function (mousemoveEvt) {
        $draggable.closest(".DTED_Lightbox_Content").offset({
            "left": mousemoveEvt.pageX - x,
            "top": mousemoveEvt.pageY - y
        });
    });
    $("body").one("mouseup", function () {
        $("body").off("mousemove.draggable");
    });
    editor.one('close', function (e) {
        $(e.target.dom.wrapper.parentElement).css({ "left": "auto", "top": "auto" });
    });
});

Is there a way to hook into the close events of editor modals at a global level? On some pages I have multiple editors with different names so I would like a generic way to hook into the close event of the open modal.

Also the close event completes before the dialog actually disappears from the screen - is there anyway to hook into an event that completes after animation is complete? Is the lightbox wrapper element hidden or removed from DOM when closed?

allan

Is there a way to hook into the close events of editor modals at a global level?

I'm afraid that I don't think there is. The event doesn't bubble, but perhaps this is one where that would be useful. Generally the Editor events don't bubble, for performance.

Likewise with the animation closed we should perhaps introduce a closed event.

I've added both to our features list.

Thanks,
Allan

mguinness

Likewise with the animation closed we should perhaps introduce a closed event.

Is it also possible to add a opened event? I say this since I tried manipulating a Select2 control in open event and I was unable to - maybe since the control wasn't visible at the time.

Can you also explain how the lightbox wrapper element is shown/hidden? Is the element hidden or removed from the DOM? I'd like to understand so I can possibly come up with a workaround until the new features are added.

allan

Its been a while, but just to say that opened and closed events will be included in Editor 1.9.1.

Allan

allan

A related commit - I've just added a new initEditor event which is triggered at the document level when a new Editor instance is created, so you can now do:

$(document).on( 'initEditor', function ( e, inst ) {
    inst.on( 'opened', function () {
        console.log( 'Form displayed' );
    } );
} );

Allan

mguinness

This is great Allan, thanks for adding these events!

rf1234

@mguinness
I couldn't get your code running but I found an example somewhere that showed how to use jQuery UI jointly with Bootstrap 3. (I use Data Tables and Editor with Bootstrap 3.)
I thought this doesn't go together but I guess I was wrong. There seems to be no issue.

All I do now is use this on "open" of my Editor instance:

$('.modal-dialog').draggable();

An this on "close" of the Editor:

$('.modal-dialog').draggable("destroy");

I only included these two files in addition to bootstrap:

... CSS
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" />
.... JS
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

@allan
Is there any risk of using Bootstrap 3 and jQuery UI jointly like this?

rf1234

This is where I found the example for anyone who might be interested in this:
https://embed.plnkr.co/plunk/C240xY

allan

Is there any risk of using Bootstrap 3 and jQuery UI jointly like this?

I don't think so. Its possible some of their style might clash, but I doubt there will be any functional errors in terms of Javascript.

Allan

rf1234

thanks, Allan. I don't think I really need the jQuery UI styles at all. Just tested without the css include and it worked fine.

So all I need to make it work is this:

<!--jQuery UI-->    
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

mguinness

@rf1234
Sorry for the late response. You also need the following style to get the draggable modal working, see http://live.datatables.net/xajusora for a demo.

.DTE_Header {
    cursor: move;
    z-index: 10;
}

rf1234

I am using Data Tables and Editor with Bootstrap 3 and I can assure you that I don't need the CSS mentioned above. It works without it in my case.

mguinness

Yes it's not needed when using jQuery UI, but for using the original code I posted. Apologies for not making that clear. Useful for those that don't want an additional library just for dragging.

rf1234

ok, but your code doesn't work for me. It had no effect. Only jQuery ui did the job. So we have two different solutions that may or may not do the job. One of them should hopefully work for everyone