Draggable lightbox modal

Draggable lightbox modal

mguinnessmguinness Posts: 85Questions: 12Answers: 1

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?

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 61,584Questions: 1Answers: 10,084 Site admin
    Answer ✓

    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

  • mguinnessmguinness Posts: 85Questions: 12Answers: 1

    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.

  • allanallan Posts: 61,584Questions: 1Answers: 10,084 Site admin

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

    Allan

  • allanallan Posts: 61,584Questions: 1Answers: 10,084 Site admin

    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

  • mguinnessmguinness Posts: 85Questions: 12Answers: 1

    This is great Allan, thanks for adding these events!

  • rf1234rf1234 Posts: 2,802Questions: 85Answers: 406

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

  • rf1234rf1234 Posts: 2,802Questions: 85Answers: 406

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

  • allanallan Posts: 61,584Questions: 1Answers: 10,084 Site admin

    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

  • rf1234rf1234 Posts: 2,802Questions: 85Answers: 406

    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>
    
    
  • mguinnessmguinness Posts: 85Questions: 12Answers: 1

    @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;
    }
    
  • rf1234rf1234 Posts: 2,802Questions: 85Answers: 406

    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.

  • mguinnessmguinness Posts: 85Questions: 12Answers: 1
    edited September 2019

    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.

  • rf1234rf1234 Posts: 2,802Questions: 85Answers: 406

    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 :smile:

This discussion has been closed.