Popper Integration

Bindrid2

Anyone know of an easy way to ingrate popper with Editor for better control of where the bubble editor pops up?

The issue that I am having is that when I use the bubble editor on a horizontal scroll-able table, is that the bubble can be partial obscured by the table container when the user clicks on a far right column to edit it.

allan

There is no option to replace Editor's built in bubble view with Popper I'm afraid. While the main view can use display controller plug-ins to change the display control, bubble and inline do not have any such option.

The issue that I am having is that when I use the bubble editor on a horizontal scroll-able table, is that the bubble can be partial obscured by the table container

The bubble is inside the scrolling container. Popper would also have this issue. There are two options:

1. Attach the popover to the document body and then attempt to position it to appear over the scrolling element and also update the position whenever the scrolling container is scrolled. This is easier said than done.
2. Attempt to shift either the popover to fit in the viewport or shift the viewport to show the whole bubble. The former is probably better.

I'm afraid I don't have an immediate fix for this, but I've filed an internal enhancement to look into implementing this.

Allan

Bindrid2

I am using popper because it is already loaded for Bootstrap and Tippy on my pages.
Within the context of my pages, this is how I implemented it.

// Save the original method for use when popper is  not
// specifically requested in the editor definition
$.fn.DataTable.Editor.prototype.dtBubblePosition =
    $.fn.DataTable.Editor.prototype.bubblePosition;
$.fn.DataTable.Editor.prototype.bubblePosition = function () {
    // if anything goes wrong just eat it and revert back to the 
    // orginal Editor code
    try {
        // get the specific field info for this bubble
        var fieldName = this.s.includeFields[0];
        var field = this.s.fields[fieldName];

        // if no popper definition, used orignal method
        if (!(this.s.formOptions.bubble.popper || field.s.opts.popper)) {
            return this.dtBubblePosition();
        }
        var popperDef = $.extend(true, {},this.s.formOptions.bubble.popper, field.s.opts.popper);
    
        var
            wrapper = $('div.DTE_Bubble'),
            liner = $('div.DTE_Bubble_Liner'),
            td = this.s.bubbleNodes;
        // The orginal class contains positioning info so replace 
        // so replace it with a class with the same styles but no positioning
        liner.removeClass("DTE_Bubble_Liner"). addClass("DTE_Bubble_Liner_Local"); 

        var pp = new Popper(td[0], wrapper[0],  popperDef);
 
        return this;
    }
    catch (e) {
        // if anything goes wrong, eat it and return to the original method.
        console.log(e);
        return this.dtBubblePosition();
    }
};

Then my definition looks like

            this.editor = new $.fn.dataTable.Editor(
                 {
                     table: this.$refs.targetEl,
                     fields: [
                         { name: "LastName", "label": "Last Name:", attr: { maxlength: 50 } },
                         { name: "FirstName", "label": "First Name:", attr: { maxlength: 50 } },
 
//// and so on
 }],
                     display:"bootstrap",
                     formOptions: {
                         bubble: {
                             // Updates data when field loses focus.
                             // does not actually submit form.
                             onBlur: 'submit',
                             onReturn: 'submit',
                             buttons: [
                                 { text: 'Update', className: 'btn-primary btn-sm', action: function () { this.submit(); } },
                                 { text: 'Cancel', className: 'btn-secondary btn-sm', action: function () { this.close(); } }],

// and my popper definition
                             popper: {
                                 placement: 'top',
                                 modifiers: {
                                     flip: {
                                         behavior: ['top', 'left', 'right']
                                     },
                                     preventOverflow: {
                                         boundariesElement: $("#divFrameHolder")[0],
                                     },
                                 },
                             }

                         },
                         inline: {
                             // Updates data when field loses focus.
                             // does not actually submit form.
                             onBlur: 'submit',
                             onReturn: 'submit'
                         }
                     }
                 }
            );