datatables.net-autofill 2.7.1 → 3.0.0

package/js/dataTables.autoFill.mjs

@@ -1,1247 +1,951 @@
-/*! AutoFill 2.7.1
- * © SpryMedia Ltd - datatables.net/license
+/*! AutoFill 3.0.0 for DataTables
+ * Copyright (c) SpryMedia Ltd - datatables.net/license
  */
 
-import jQuery from 'jquery';
-import DataTable from 'datatables.net';
+import DataTable, { Dom, util, Api } from 'datatables.net';
 
-// Allow reassignment of the $ variable
-let $ = jQuery;
-
-
-/**
- * @summary     AutoFill
- * @description Add Excel like click and drag auto-fill options to DataTables
- * @version     2.7.1
- * @author      SpryMedia Ltd (www.sprymedia.co.uk)
- * @copyright   SpryMedia Ltd.
- *
- * This source file is free software, available under the following license:
- *   MIT license - http://datatables.net/license/mit
- *
- * This source file is distributed in the hope that it will be useful, but
- * WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY
- * or FITNESS FOR A PARTICULAR PURPOSE. See the license files for details.
- *
- * For details please refer to: http://www.datatables.net
- */
 
+if (!DataTable || !DataTable.versionCheck || !DataTable.versionCheck('3')) {
+    throw 'Warning: AutoFill requires DataTables 3 or greater';
+}
 var _instance = 0;
-
-/** 
- * AutoFill provides Excel like auto-fill features for a DataTable
- *
- * @class AutoFill
- * @constructor
- * @param {object} oTD DataTables settings object
- * @param {object} oConfig Configuration object for AutoFill
+class AutoFill {
+    /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+     * Public methods (exposed via the DataTables API below)
+     */
+    enabled() {
+        return this.s.enabled;
+    }
+    enable(flag = true) {
+        let that = this;
+        let namespace = this.s.namespace;
+        if (flag === false) {
+            return this.disable();
+        }
+        this.s.enabled = true;
+        this._focusListener();
+        this.dom.handle.on('mousedown touchstart', function (e) {
+            that._mousedown(e);
+            return false;
+        });
+        let orientationReset = function () {
+            that.s.handle = {
+                height: 0,
+                width: 0
+            };
+            that.dom.handle.css({
+                height: '',
+                width: ''
+            });
+            if (that.dom.attachedTo) {
+                that._attach(that.dom.attachedTo);
+            }
+        };
+        Dom.w.on('resize' + namespace, function () {
+            let handle = Dom.s('div.dtaf-handle');
+            if (handle.count() > 0 && that.dom.attachedTo) {
+                that._attach(that.dom.attachedTo);
+            }
+        });
+        Dom.w.on('orientationchange' + namespace, function () {
+            setTimeout(function () {
+                orientationReset();
+                setTimeout(orientationReset, 150);
+            }, 50);
+        });
+        return this;
+    }
+    disable() {
+        this.s.enabled = false;
+        this._focusListenerRemove();
+        return this;
+    }
+    /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+     * Constructor
+     */
+    constructor(dt, opts) {
+        this.c = util.object.assignDeep({}, AutoFill.defaults, opts);
+        this.s = {
+            dt: new DataTable.Api(dt),
+            enabled: false,
+            end: { column: 0, row: 0 },
+            handle: {
+                height: 0,
+                width: 0
+            },
+            namespace: '.autoFill' + _instance++,
+            scroll: {
+                windowHeight: 0,
+                windowWidth: 0,
+                dtTop: 0,
+                dtLeft: 0,
+                dtHeight: 0,
+                dtWidth: 0
+            },
+            scrollInterval: null,
+            start: { column: 0, row: 0 }
+        };
+        this.dom = {
+            attachedTo: null,
+            container: Dom.c('div').classAdd('dtaf-container'),
+            closeButton: Dom.c('button')
+                .classAdd(AutoFill.classes.close)
+                .html('×'),
+            dtScroll: null,
+            handle: Dom.c('div').classAdd('dtaf-handle'),
+            list: Dom.c('div')
+                .classAdd('dtaf-list')
+                .html(this.s.dt.i18n('autoFill.info', ''))
+                .attr('aria-modal', true)
+                .attr('role', 'dialog')
+                .append(Dom.c('div').classAdd('dtaf-list-items')),
+            offsetParent: null,
+            start: null,
+            select: {
+                top: Dom.c('div').classAdd('dtaf-select top'),
+                right: Dom.c('div').classAdd('dtaf-select right'),
+                bottom: Dom.c('div').classAdd('dtaf-select bottom'),
+                left: Dom.c('div').classAdd('dtaf-select left')
+            }
+        };
+        this.dom.list.appendTo(this.dom.container);
+        // Go!
+        this._init();
+    }
+    /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+     * Private methods
+     */
+    /**
+     * Initialise the RowReorder instance
+     */
+    _init() {
+        let dt = this.s.dt;
+        // Need to account for scrolling as it has a different DOM structure
+        let dtScroll = Dom.s(this.s.dt.table().container()).find('div.dt-scroll-body');
+        // Make the instance accessible to the API
+        dt.settings()[0].autoFill = this;
+        if (dtScroll.count()) {
+            this.dom.dtScroll = dtScroll;
+            // Need to scroll container to be the offset parent
+            if (dtScroll.css('position') === 'static') {
+                dtScroll.css('position', 'relative');
+            }
+        }
+        if (this.c.enable !== false) {
+            this.enable();
+        }
+        dt.on('destroy.autoFill', () => {
+            this._focusListenerRemove();
+            this.dom.handle.off();
+        });
+    }
+    /**
+     * Display the AutoFill drag handle by appending it to a table cell. This is
+     * the opposite of the _detach method.
+     *
+     * @param node Cell to insert the handle into
+     */
+    _attach(node) {
+        let dt = this.s.dt;
+        let idx = dt.cell(node).index();
+        let handle = this.dom.handle;
+        let handleDim = this.s.handle;
+        if (!idx ||
+            dt.columns(this.c.columns).indexes().indexOf(idx.column) === -1) {
+            this._detach();
+            return;
+        }
+        if (!this.dom.offsetParent) {
+            // We attach to the table's offset parent
+            this.dom.offsetParent = dt.table().node()
+                .offsetParent;
+        }
+        if (!handleDim.height || !handleDim.width) {
+            // Append to document so we can get its size. Not expecting it to
+            // change during the life time of the page
+            handle.appendTo('body');
+            handleDim.height = handle.height('outer');
+            handleDim.width = handle.width('outer');
+        }
+        // Might need to go through multiple offset parents
+        let offset = this._getPosition(node, this.dom.offsetParent);
+        this.dom.attachedTo = node;
+        handle
+            .css({
+            top: offset.top + node.offsetHeight - handleDim.height + 'px',
+            left: offset.left + node.offsetWidth - handleDim.width + 'px'
+        })
+            .appendTo(this.dom.offsetParent);
+    }
+    /**
+     * Determine can the fill type should be. This can be automatic, or ask the
+     * end user.
+     *
+     * @param cells Information about the selected cells from the key up
+     *   function
+     */
+    _actionSelector(cells) {
+        let that = this;
+        let dt = this.s.dt;
+        let actions = AutoFill.actions;
+        let available = [];
+        // "Ask" each plug-in if it wants to handle this data
+        util.object.each(actions, function (key, action) {
+            if (action.available(dt, cells)) {
+                available.push(key);
+            }
+        });
+        if (available.length === 1 && this.c.alwaysAsk === false) {
+            // Only one action available - enact it immediately
+            let result = actions[available[0]].execute(dt, cells, null);
+            this._update(result, cells);
+        }
+        else if (available.length > 1 || this.c.alwaysAsk) {
+            // Multiple actions available - ask the end user what they want to
+            // do
+            let list = this.dom.list.children('div.dtaf-list-items').empty();
+            // Add a cancel option
+            available.push('cancel');
+            for (let i = 0; i < available.length; i++) {
+                let name = available[i];
+                list.append(Dom.c('button')
+                    .classAdd(AutoFill.classes.btn)
+                    .html(actions[name].option(dt, cells))
+                    .append(Dom.c('span')
+                    .classAdd('dtaf-button')
+                    .html(dt.i18n('autoFill.button', '')))
+                    .on('click', function (e) {
+                    if (e.target.nodeName.toLowerCase() !== 'button') {
+                        return;
+                    }
+                    let result = actions[name].execute(dt, cells, Dom.s(this).closest('button'));
+                    that._update(result, cells);
+                    that.dom.container.remove();
+                }));
+            }
+            this.dom.container.appendTo('body');
+            this.dom.container.on('click', function (e) {
+                // Ignore clicks that aren't on the background
+                if (e.target !== that.dom.container.get(0)) {
+                    return;
+                }
+                that.dom.container.remove();
+            });
+            if (this.c.closeButton) {
+                this.dom.list
+                    .prepend(this.dom.closeButton)
+                    .classAdd(AutoFill.classes.closeable);
+                this.dom.closeButton.on('click', function () {
+                    return that.dom.container.trigger('click');
+                });
+            }
+        }
+    }
+    /**
+     * Remove the AutoFill handle from the document
+     */
+    _detach() {
+        this.dom.attachedTo = null;
+        this.dom.handle.detach();
+    }
+    /**
+     * Draw the selection outline by calculating the range between the start
+     * and end cells, then placing the highlighting elements to draw a rectangle
+     *
+     * @param target End cell
+     * @param e Originating event
+     * @private
+     */
+    _drawSelection(target, e) {
+        // Calculate boundary for start cell to this one
+        var dt = this.s.dt;
+        var start = this.s.start;
+        var startCell = Dom.s(this.dom.start);
+        var end = {
+            row: this.c.vertical
+                ? dt
+                    .rows({ page: 'current' })
+                    .nodes()
+                    .indexOf(target.parentNode)
+                : start.row,
+            column: this.c.horizontal ? Dom.s(target).index() : start.column
+        };
+        var colIndx = dt.column.index('toData', end.column);
+        var endRow = dt.row(':eq(' + end.row + ')', { page: 'current' }); // Workaround for M581
+        var endCell = Dom.s(dt.cell(endRow.index(), colIndx).node());
+        // Be sure that is a DataTables controlled cell
+        if (!dt.cell(endCell.get(0)).any()) {
+            return;
+        }
+        // if target is not in the columns available - do nothing
+        if (dt.columns(this.c.columns).indexes().indexOf(colIndx) === -1 ||
+            end.row === -1) {
+            return;
+        }
+        this.s.end = end;
+        var top, bottom, left, right, height, width;
+        top = start.row < end.row ? startCell : endCell;
+        bottom = start.row < end.row ? endCell : startCell;
+        left = start.column < end.column ? startCell : endCell;
+        right = start.column < end.column ? endCell : startCell;
+        top = this._getPosition(top.get(0)).top;
+        left = this._getPosition(left.get(0)).left;
+        height =
+            this._getPosition(bottom.get(0)).top + bottom.height('outer') - top;
+        width =
+            this._getPosition(right.get(0)).left + right.width('outer') - left;
+        var select = this.dom.select;
+        select.top.css({
+            top: top + 'px',
+            left: left + 'px',
+            width: width + 'px'
+        });
+        select.left.css({
+            top: top + 'px',
+            left: left + 'px',
+            height: height + 'px'
+        });
+        select.bottom.css({
+            top: top + height + 'px',
+            left: left + 'px',
+            width: width + 'px'
+        });
+        select.right.css({
+            top: top + 'px',
+            left: left + width + 'px',
+            height: height + 'px'
+        });
+    }
+    /**
+     * Use the Editor API to perform an update based on the new data for the
+     * cells
+     *
+     * @param cells Information about the selected cells from the key up
+     *   function
+     */
+    _editor(cells) {
+        let dt = this.s.dt;
+        let editor = this.c.editor;
+        if (!editor) {
+            return;
+        }
+        // Build the object structure for Editor's multi-row editing
+        let idValues = {};
+        let nodes = [];
+        let fields = editor.fields();
+        for (let i = 0, ien = cells.length; i < ien; i++) {
+            for (let j = 0, jen = cells[i].length; j < jen; j++) {
+                let cell = cells[i][j];
+                // Determine the field name for the cell being edited
+                let col = dt.settings()[0].columns[cell.index.column];
+                let fieldName = col.editField;
+                if (fieldName === undefined) {
+                    let dataSrc = col.data;
+                    // dataSrc is the `field.data` property, but we need to set
+                    // using the field name, so we need to translate from the
+                    // data to the name
+                    for (let k = 0, ken = fields.length; k < ken; k++) {
+                        let field = editor.field(fields[k]);
+                        if (field.dataSrc() === dataSrc) {
+                            fieldName = field.name();
+                            break;
+                        }
+                    }
+                }
+                if (!fieldName) {
+                    throw ('Could not automatically determine field data. ' +
+                        'Please see https://datatables.net/tn/11');
+                }
+                if (typeof fieldName !== 'string') {
+                    throw 'AutoFill with multiple edit fields is not supported';
+                }
+                if (!idValues[fieldName]) {
+                    idValues[fieldName] = {};
+                }
+                let id = dt.row(cell.index.row).id();
+                idValues[fieldName][id] = cell.set;
+                // Keep a list of cells so we can activate the bubble editing
+                // with them
+                nodes.push(cell.index);
+            }
+        }
+        // Perform the edit using bubble editing as it allows us to specify
+        // the cells to be edited, rather than using full rows
+        editor
+            .bubble(nodes, false)
+            .multiSet(idValues)
+            .submit(null, function () {
+            // If an error happens, Editor will show an alert, and then we
+            // need to finish the edit since we can't do anything else.
+            editor.close();
+        });
+    }
+    /**
+     * Emit an event on the DataTable for listeners
+     *
+     * @param name Event name
+     * @param args Event arguments
+     */
+    _emitEvent(name, args) {
+        this.s.dt.trigger(name, args);
+    }
+    /**
+     * Attach suitable listeners (based on the configuration) that will attach
+     * and detach the AutoFill handle in the document.
+     */
+    _focusListener() {
+        var that = this;
+        var dt = this.s.dt;
+        var namespace = this.s.namespace;
+        var focus = this.c.focus !== null
+            ? this.c.focus
+            : dt.init().keys || dt.settings()[0].keytable
+                ? 'focus'
+                : 'hover';
+        // All event listeners attached here are removed in the `destroy`
+        // callback in the constructor
+        if (focus === 'focus') {
+            dt.on('key-focus.autoFill', function (e, dt, cell) {
+                that._attach(cell.node());
+            }).on('key-blur.autoFill', function (e, dt, cell) {
+                that._detach();
+            });
+        }
+        else if (focus === 'click') {
+            Dom.s(dt.table().body()).on('click' + namespace, 'td, th', function (e) {
+                that._attach(this);
+            });
+            Dom.s(document.body).on('click' + namespace, function (e) {
+                if (!Dom.s(e.target).closest(dt.table().body()).count()) {
+                    that._detach();
+                }
+            });
+        }
+        else {
+            Dom.s(dt.table().body())
+                .on('mouseenter' + namespace + ' touchstart' + namespace, 'td, th', function (e) {
+                that._attach(this);
+            })
+                .on('mouseleave' + namespace + 'touchend' + namespace, function (e) {
+                if (Dom.s(e.relatedTarget).classHas('dtaf-handle')) {
+                    return;
+                }
+                that._detach();
+            });
+        }
+    }
+    /**
+     * Clean up the event listeners
+     */
+    _focusListenerRemove() {
+        let namespace = this.s.namespace;
+        let dt = this.s.dt;
+        dt.off('.autoFill');
+        Dom.s(dt.table().body()).off(namespace);
+        Dom.s(document.body).off(namespace);
+        Dom.w.off(namespace);
+    }
+    /**
+     * Get the position of a node, relative to another, including any scrolling
+     * offsets.
+     *
+     * @param node Node to get the position of
+     * @param targetHost Node to use as the parent
+     * @return Offset calculation
+     */
+    _getPosition(node, targetHost) {
+        let targetParent = Dom.s(this.s.dt.table().node().offsetParent), currNode = node, currOffsetParent, top = 0, left = 0;
+        if (targetHost) {
+            targetParent = Dom.s(targetHost);
+        }
+        do {
+            let positionTop = currNode.offsetTop;
+            let positionLeft = currNode.offsetLeft;
+            currOffsetParent = Dom.s(currNode.offsetParent);
+            top +=
+                positionTop +
+                    parseInt(currOffsetParent.css('border-top-width') || '0') * 1;
+            left +=
+                positionLeft +
+                    parseInt(currOffsetParent.css('border-left-width') || '0') * 1;
+            // Emergency fall back. Shouldn't happen, but just in case!
+            if (currNode.nodeName.toLowerCase() === 'body') {
+                break;
+            }
+            currNode = currOffsetParent.get(0); // for next loop
+        } while (currOffsetParent.get(0) !== targetParent.get(0));
+        return {
+            top: top,
+            left: left
+        };
+    }
+    /**
+     * Start mouse drag - selects the start cell
+     *
+     * @param e Mouse down event
+     */
+    _mousedown(e) {
+        let that = this;
+        let dt = this.s.dt;
+        this.dom.start = this.dom.attachedTo;
+        this.s.start = {
+            row: dt
+                .rows({ page: 'current' })
+                .nodes()
+                .indexOf(Dom.s(this.dom.start).parent().get(0)),
+            column: Dom.s(this.dom.start).index()
+        };
+        Dom.s(document.body)
+            .on('mousemove.autoFill touchmove.autoFill', function (e) {
+            that._mousemove(e);
+            // If it is a touch event then when the touch ends we need to
+            // remove the handle
+            if (e.type === 'touchmove') {
+                Dom.s(document.body).one('touchend.autoFill', function () {
+                    that._detach();
+                });
+            }
+        })
+            .on('mouseup.autoFill touchend.autoFill', function (e) {
+            that._mouseup(e);
+        });
+        let select = this.dom.select;
+        let offsetParent = dt.table().node().offsetParent;
+        select.top.appendTo(offsetParent);
+        select.left.appendTo(offsetParent);
+        select.right.appendTo(offsetParent);
+        select.bottom.appendTo(offsetParent);
+        this._drawSelection(this.dom.start, e);
+        this.dom.handle.css('display', 'none');
+        // Cache scrolling information so mouse move doesn't need to read.
+        // This assumes that the window and DT scroller will not change size
+        // during an AutoFill drag, which I think is a fair assumption
+        let scrollWrapper = this.dom.dtScroll;
+        this.s.scroll = {
+            windowHeight: window.innerHeight,
+            windowWidth: window.innerWidth,
+            dtTop: scrollWrapper ? scrollWrapper.offset().top : 0,
+            dtLeft: scrollWrapper ? scrollWrapper.offset().left : 0,
+            dtHeight: scrollWrapper ? scrollWrapper.height('outer') : 0,
+            dtWidth: scrollWrapper ? scrollWrapper.width('outer') : 0
+        };
+    }
+    /**
+     * Mouse drag - selects the end cell and update the selection display for
+     * the end user
+     *
+     * @param e Mouse move event
+     */
+    _mousemove(e) {
+        let target = e.touches && e.touches.length
+            ? document.elementFromPoint(e.touches[0].clientX, e.touches[0].clientY)
+            : e.target;
+        let name = target.nodeName.toLowerCase();
+        if (name !== 'td' && name !== 'th') {
+            return;
+        }
+        this._drawSelection(target, e);
+        this._shiftScroll(e);
+    }
+    /**
+     * End mouse drag - perform the update actions
+     *
+     * @param e Mouse up event
+     * @private
+     */
+    _mouseup(e) {
+        Dom.s(document.body).off('.autoFill');
+        let that = this;
+        let dt = this.s.dt;
+        let select = this.dom.select;
+        select.top.remove();
+        select.left.remove();
+        select.right.remove();
+        select.bottom.remove();
+        this.dom.handle.css('display', 'block');
+        // Display complete - now do something useful with the selection!
+        let start = this.s.start;
+        let end = this.s.end;
+        // Haven't selected multiple cells, so nothing to do
+        if (start.row === end.row && start.column === end.column) {
+            return;
+        }
+        let startDt = dt.cell(':eq(' + start.row + ')', start.column + ':visible', { page: 'current' });
+        // If Editor is active inside this cell (inline editing) we need to wait
+        // for Editor to submit and then we can loop back and trigger the fill.
+        if (Dom.s(startDt.node()).find('div.DTE').count()) {
+            let editor = dt.editor();
+            editor
+                .on('submitSuccess.dtaf close.dtaf', function () {
+                editor.off('.dtaf');
+                setTimeout(function () {
+                    that._mouseup(e);
+                }, 100);
+            })
+                .on('submitComplete.dtaf preSubmitCancelled.dtaf close.dtaf', function () {
+                editor.off('.dtaf');
+            });
+            // Make the current input submit
+            editor.submit();
+            return;
+        }
+        // Build a matrix representation of the selected rows
+        let rows = this._range(start.row, end.row);
+        let columns = this._range(start.column, end.column);
+        let selected = [];
+        let dtSettings = dt.settings()[0];
+        let dtColumns = dtSettings.columns;
+        let enabledColumns = dt.columns(this.c.columns).indexes();
+        for (let rowIdx = 0; rowIdx < rows.length; rowIdx++) {
+            selected.push(columns
+                .map(function (column) {
+                let row = dt.row(':eq(' + rows[rowIdx] + ')', {
+                    page: 'current'
+                });
+                let cell = dt.cell(row.index(), column + ':visible');
+                let data = cell.data();
+                let cellIndex = cell.index();
+                let editField = dtColumns[cellIndex.column].editField;
+                if (editField !== undefined) {
+                    data = DataTable.util.get(editField)(dt.row(cellIndex.row).data());
+                }
+                if (enabledColumns.indexOf(cellIndex.column) === -1) {
+                    return;
+                }
+                return {
+                    cell: cell,
+                    data: data,
+                    label: cell.data(),
+                    index: cellIndex
+                };
+            })
+                .filter(d => !!d));
+        }
+        this._actionSelector(selected);
+        // Stop shiftScroll
+        if (this.s.scrollInterval) {
+            clearInterval(this.s.scrollInterval);
+            this.s.scrollInterval = null;
+        }
+    }
+    /**
+     * Create an array with a range of numbers defined by the start and end
+     * parameters passed in (inclusive!).
+     *
+     * @param start Start
+     * @param end End
+     */
+    _range(start, end) {
+        var out = [];
+        var i;
+        if (start <= end) {
+            for (i = start; i <= end; i++) {
+                out.push(i);
+            }
+        }
+        else {
+            for (i = start; i >= end; i--) {
+                out.push(i);
+            }
+        }
+        return out;
+    }
+    /**
+     * Move the window and DataTables scrolling during a drag to scroll new
+     * content into view. This is done by proximity to the edge of the scrolling
+     * container of the mouse - for example near the top edge of the window
+     * should scroll up. This is a little complicated as there are two elements
+     * that can be scrolled - the window and the DataTables scrolling view port
+     * (if scrollX and / or scrollY is enabled).
+     *
+     * @param e Mouse move event object
+     */
+    _shiftScroll(e) {
+        var that = this;
+        var scroll = this.s.scroll;
+        var runInterval = false;
+        var scrollSpeed = 5;
+        var buffer = 65;
+        // Different values if using a touchscreen
+        var pageX = !e.type.includes('touch')
+            ? e.pageX - window.scrollX
+            : e.touches[0].clientX;
+        var pageY = !e.type.includes('touch')
+            ? e.pageY - window.scrollY
+            : e.touches[0].clientY;
+        var windowY = pageY, windowX = pageX, windowVert, windowHoriz, dtVert, dtHoriz;
+        // Window calculations - based on the mouse position in the window,
+        // regardless of scrolling
+        if (windowY < buffer) {
+            windowVert = scrollSpeed * -1;
+        }
+        else if (windowY > scroll.windowHeight - buffer) {
+            windowVert = scrollSpeed;
+        }
+        if (windowX < buffer) {
+            windowHoriz = scrollSpeed * -1;
+        }
+        else if (windowX > scroll.windowWidth - buffer) {
+            windowHoriz = scrollSpeed;
+        }
+        // DataTables scrolling calculations - based on the table's position in
+        // the document and the mouse position on the page
+        if (scroll.dtTop !== null && pageY < scroll.dtTop + buffer) {
+            dtVert = scrollSpeed * -1;
+        }
+        else if (scroll.dtTop !== null &&
+            pageY > scroll.dtTop + scroll.dtHeight - buffer) {
+            dtVert = scrollSpeed;
+        }
+        if (scroll.dtLeft !== null && pageX < scroll.dtLeft + buffer) {
+            dtHoriz = scrollSpeed * -1;
+        }
+        else if (scroll.dtLeft !== null &&
+            pageX > scroll.dtLeft + scroll.dtWidth - buffer) {
+            dtHoriz = scrollSpeed;
+        }
+        // This is where it gets interesting. We want to continue scrolling
+        // without requiring a mouse move, so we need an interval to be
+        // triggered. The interval should continue until it is no longer needed,
+        // but it must also use the latest scroll commands (for example consider
+        // that the mouse might move from scrolling up to scrolling left, all
+        // with the same interval running. We use the `scroll` object to "pass"
+        // this information to the interval. Can't use local variables as they
+        // wouldn't be the ones that are used by an already existing interval!
+        if (windowVert || windowHoriz || dtVert || dtHoriz) {
+            scroll.windowVert = windowVert;
+            scroll.windowHoriz = windowHoriz;
+            scroll.dtVert = dtVert;
+            scroll.dtHoriz = dtHoriz;
+            runInterval = true;
+        }
+        else if (this.s.scrollInterval) {
+            // Don't need to scroll - remove any existing timer
+            clearInterval(this.s.scrollInterval);
+            this.s.scrollInterval = null;
+        }
+        // If we need to run the interval to scroll and there is no existing
+        // interval (if there is an existing one, it will continue to run)
+        if (!this.s.scrollInterval && runInterval) {
+            this.s.scrollInterval = setInterval(function () {
+                var _a;
+                // Don't need to worry about setting scroll <0 or beyond the
+                // scroll bound as the browser will just reject that.
+                window.scrollTo(window.scrollX +
+                    (scroll.windowHoriz ? scroll.windowHoriz : 0), window.scrollY + (scroll.windowVert ? scroll.windowVert : 0));
+                // DataTables scrolling
+                if (scroll.dtVert || scroll.dtHoriz) {
+                    var scroller = (_a = that.dom.dtScroll) === null || _a === void 0 ? void 0 : _a.get(0);
+                    if (scroller && scroll.dtVert) {
+                        scroller.scrollTop += scroll.dtVert;
+                    }
+                    if (scroller && scroll.dtHoriz) {
+                        scroller.scrollLeft += scroll.dtHoriz;
+                    }
+                }
+            }, 20);
+        }
+    }
+    /**
+     * Update the DataTable after the user has selected what they want to do
+     *
+     * @param result Return from the `execute` method - can be false internally
+     *   to do nothing. This is not documented for plug-ins and is used only by
+     *   the cancel option.
+     * @param cells Information about the selected cells from the key up
+     *   function, augmented with the set values
+     */
+    _update(result, cells) {
+        // Do nothing on `false` return from an execute function
+        if (result === false) {
+            return;
+        }
+        let dt = this.s.dt;
+        let cell;
+        let columns = dt.columns(this.c.columns).indexes();
+        // Potentially allow modifications to the cells matrix
+        this._emitEvent('preAutoFill', [dt, cells]);
+        this._editor(cells);
+        // Automatic updates are not performed if `update` is null and the
+        // `editor` parameter is passed in - the reason being that Editor will
+        // update the data once submitted
+        let update = this.c.update !== null
+            ? this.c.update
+            : this.c.editor
+                ? false
+                : true;
+        if (update) {
+            for (let i = 0, ien = cells.length; i < ien; i++) {
+                for (let j = 0, jen = cells[i].length; j < jen; j++) {
+                    cell = cells[i][j];
+                    if (columns.indexOf(cell.index.column) !== -1) {
+                        cell.cell.data(cell.set);
+                    }
+                }
+            }
+            dt.draw(false);
+        }
+        this._emitEvent('autoFill', [dt, cells]);
+    }
+}
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ * Statics
  */
-var AutoFill = function( dt, opts )
-{
-	if ( ! DataTable.versionCheck || ! DataTable.versionCheck( '1.11' ) ) {
-		throw( "Warning: AutoFill requires DataTables 1.11 or greater");
-	}
-
-	// User and defaults configuration object
-	this.c = $.extend( true, {},
-		DataTable.defaults.autoFill,
-		AutoFill.defaults,
-		opts
-	);
-
-	/**
-	 * @namespace Settings object which contains customisable information for AutoFill instance
-	 */
-	this.s = {
-		/** @type {DataTable.Api} DataTables' API instance */
-		dt: new DataTable.Api( dt ),
-
-		/** @type {String} Unique namespace for events attached to the document */
-		namespace: '.autoFill'+(_instance++),
-
-		/** @type {Object} Cached dimension information for use in the mouse move event handler */
-		scroll: {},
-
-		/** @type {integer} Interval object used for smooth scrolling */
-		scrollInterval: null,
-
-		handle: {
-			height: 0,
-			width: 0
-		},
-
-		/**
-		 * Enabled setting
-		 * @type {Boolean}
-		 */
-		enabled: false
-	};
-
-
-	/**
-	 * @namespace Common and useful DOM elements for the class instance
-	 */
-	this.dom = {
-		closeButton: $('<div class="dtaf-popover-close">&times;</div>'),
-
-		/** @type {jQuery} AutoFill handle */
-		handle: $('<div class="dt-autofill-handle"/>'),
-
-		/**
-		 * @type {Object} Selected cells outline - Need to use 4 elements,
-		 *   otherwise the mouse over if you back into the selected rectangle
-		 *   will be over that element, rather than the cells!
-		 */
-		select: {
-			top:    $('<div class="dt-autofill-select top"/>'),
-			right:  $('<div class="dt-autofill-select right"/>'),
-			bottom: $('<div class="dt-autofill-select bottom"/>'),
-			left:   $('<div class="dt-autofill-select left"/>')
-		},
-
-		/** @type {jQuery} Fill type chooser background */
-		background: $('<div class="dt-autofill-background"/>'),
-
-		/** @type {jQuery} Fill type chooser */
-		list: $('<div class="dt-autofill-list">'+this.s.dt.i18n('autoFill.info', '')+'</div>')
-			.attr('aria-modal', true)
-			.attr('role', 'dialog')
-			.append('<div class="dt-autofill-list-items"></div>'),
-
-		/** @type {jQuery} DataTables scrolling container */
-		dtScroll: null,
-
-		/** @type {jQuery} Offset parent element */
-		offsetParent: null
-	};
-
-
-	/* Constructor logic */
-	this._constructor();
-};
-
-
-
-$.extend( AutoFill.prototype, {
-	/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
-	 * Public methods (exposed via the DataTables API below)
-	 */
-	enabled: function ()
-	{
-		return this.s.enabled;
-	},
-
-
-	enable: function ( flag )
-	{
-		var that = this;
-
-		if ( flag === false ) {
-			return this.disable();
-		}
-
-		this.s.enabled = true;
-
-		this._focusListener();
-
-		this.dom.handle.on( 'mousedown touchstart', function (e) {
-			that._mousedown( e );
-			return false;
-		} );
-
-		$(window).on('resize', function() {
-			var handle = $('div.dt-autofill-handle');
-			if(handle.length > 0 && that.dom.attachedTo !== undefined) {
-				that._attach(that.dom.attachedTo)
-			}
-		})
-
-		let orientationReset = function() {
-			that.s.handle = {
-				height: false,
-				width: false
-			};
-			$(that.dom.handle).css({
-				'height': '',
-				'width': ''
-			})
-			if(that.dom.attachedTo !== undefined) {
-				that._attach(that.dom.attachedTo)
-			}
-		}
-
-		$(window)
-			.on('orientationchange', function() {
-				setTimeout(function() {
-					orientationReset();
-					setTimeout(orientationReset, 150);
-				}, 50);
-			});
-
-		return this;
-	},
-
-	disable: function ()
-	{
-		this.s.enabled = false;
-
-		this._focusListenerRemove();
-
-		return this;
-	},
-
-
-	/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
-	 * Constructor
-	 */
-
-	/**
-	 * Initialise the RowReorder instance
-	 *
-	 * @private
-	 */
-	_constructor: function ()
-	{
-		var that = this;
-		var dt = this.s.dt;
-
-		// Selectors for DataTables 1 and 2 - only one will be matched
-		var dtScroll = $('div.dataTables_scrollBody, div.dt-scroll-body', this.s.dt.table().container());
-
-		// Make the instance accessible to the API
-		dt.settings()[0].autoFill = this;
-
-		if ( dtScroll.length ) {
-			this.dom.dtScroll = dtScroll;
-
-			// Need to scroll container to be the offset parent
-			if ( dtScroll.css('position') === 'static' ) {
-				dtScroll.css( 'position', 'relative' );
-			}
-		}
-
-		if ( this.c.enable !== false ) {
-			this.enable();
-		}
-
-		dt.on( 'destroy.autoFill', function () {
-			that._focusListenerRemove();
-		} );
-	},
-
-
-	/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
-	 * Private methods
-	 */
-
-	/**
-	 * Display the AutoFill drag handle by appending it to a table cell. This
-	 * is the opposite of the _detach method.
-	 *
-	 * @param  {node} node TD/TH cell to insert the handle into
-	 * @private
-	 */
-	_attach: function ( node )
-	{
-		var dt = this.s.dt;
-		var idx = dt.cell( node ).index();
-		var handle = this.dom.handle;
-		var handleDim = this.s.handle;
-
-		if ( ! idx || dt.columns( this.c.columns ).indexes().indexOf( idx.column ) === -1 ) {
-			this._detach();
-			return;
-		}
-
-		if ( ! this.dom.offsetParent ) {
-			// We attach to the table's offset parent
-			this.dom.offsetParent = $( dt.table().node() ).offsetParent();
-		}
-
-		if ( ! handleDim.height || ! handleDim.width ) {
-			// Append to document so we can get its size. Not expecting it to
-			// change during the life time of the page
-			handle.appendTo( 'body' );
-			handleDim.height = handle.outerHeight();
-			handleDim.width = handle.outerWidth();
-		}
-
-		// Might need to go through multiple offset parents
-		var offset = this._getPosition( node, this.dom.offsetParent );
-		
-		this.dom.attachedTo = node;
-		handle
-			.css( {
-				top: offset.top + node.offsetHeight - handleDim.height,
-				left: offset.left + node.offsetWidth - handleDim.width
-			} )
-			.appendTo( this.dom.offsetParent );
-	},
-
-
-	/**
-	 * Determine can the fill type should be. This can be automatic, or ask the
-	 * end user.
-	 *
-	 * @param {array} cells Information about the selected cells from the key
-	 *     up function
-	 * @private
-	 */
-	_actionSelector: function ( cells )
-	{
-		var that = this;
-		var dt = this.s.dt;
-		var actions = AutoFill.actions;
-		var available = [];
-
-		// "Ask" each plug-in if it wants to handle this data
-		$.each( actions, function ( key, action ) {
-			if ( action.available( dt, cells ) ) {
-				available.push( key );
-			}
-		} );
-
-		if ( available.length === 1 && this.c.alwaysAsk === false ) {
-			// Only one action available - enact it immediately
-			var result = actions[ available[0] ].execute( dt, cells );
-			this._update( result, cells );
-		}
-		else if ( available.length > 1 || this.c.alwaysAsk ) {
-			// Multiple actions available - ask the end user what they want to do
-			var list = this.dom.list.children('div.dt-autofill-list-items').empty();
-
-			// Add a cancel option
-			available.push( 'cancel' );
-
-			$.each( available, function ( i, name ) {
-				list.append( $('<button/>')
-					.html(actions[ name ].option( dt, cells ))
-					.append( $('<span class="dt-autofill-button"/>').html(dt.i18n('autoFill.button', '&gt;')))
-					.on( 'click', function (e) {
-						if (e.target.nodeName.toLowerCase() !== 'button') {
-							return;
-						}
-
-						var result = actions[ name ].execute(
-							dt, cells, $(this).closest('button')
-						);
-						that._update( result, cells );
-
-						that.dom.background.remove();
-						that.dom.list.remove();
-					} )
-				);
-			} );
-
-			this.dom.background.appendTo( 'body' );
-			this.dom.background.one('click', function() {
-				that.dom.background.remove();
-				that.dom.list.remove();
-			})
-			this.dom.list.appendTo( 'body' );
-
-			if (this.c.closeButton) {
-				this.dom.list.prepend(this.dom.closeButton).addClass(AutoFill.classes.closeable)
-				this.dom.closeButton.on('click', function() {
-					return that.dom.background.click()
-				});
-			}
-
-			this.dom.list.css( 'margin-top', this.dom.list.outerHeight()/2 * -1 );
-		}
-	},
-
-
-	/**
-	 * Remove the AutoFill handle from the document
-	 *
-	 * @private
-	 */
-	_detach: function ()
-	{
-		this.dom.attachedTo = null;
-		this.dom.handle.detach();
-	},
-
-
-	/**
-	 * Draw the selection outline by calculating the range between the start
-	 * and end cells, then placing the highlighting elements to draw a rectangle
-	 *
-	 * @param  {node}   target End cell
-	 * @param  {object} e      Originating event
-	 * @private
-	 */
-	_drawSelection: function ( target, e )
-	{
-		// Calculate boundary for start cell to this one
-		var dt = this.s.dt;
-		var start = this.s.start;
-		var startCell = $(this.dom.start);
-		var end = {
-			row: this.c.vertical ?
-				dt.rows( { page: 'current' } ).nodes().indexOf( target.parentNode ) :
-				start.row,
-			column: this.c.horizontal ?
-				$(target).index() :
-				start.column
-		};
-		var colIndx = dt.column.index( 'toData', end.column );
-		var endRow =  dt.row( ':eq('+end.row+')', { page: 'current' } ); // Workaround for M581
-		var endCell = $( dt.cell( endRow.index(), colIndx ).node() );
-
-		// Be sure that is a DataTables controlled cell
-		if ( ! dt.cell( endCell ).any() ) {
-			return;
-		}
-
-		// if target is not in the columns available - do nothing
-		if ( dt.columns( this.c.columns ).indexes().indexOf( colIndx ) === -1 || end.row === -1) {
-			return;
-		}
-
-		this.s.end = end;
-
-		var top, bottom, left, right, height, width;
-
-		top    = start.row    < end.row    ? startCell : endCell;
-		bottom = start.row    < end.row    ? endCell   : startCell;
-		left   = start.column < end.column ? startCell : endCell;
-		right  = start.column < end.column ? endCell   : startCell;
-
-		top    = this._getPosition( top.get(0) ).top;
-		left   = this._getPosition( left.get(0) ).left;
-		height = this._getPosition( bottom.get(0) ).top + bottom.outerHeight() - top;
-		width  = this._getPosition( right.get(0) ).left + right.outerWidth() - left;
-
-		var select = this.dom.select;
-		select.top.css( {
-			top: top,
-			left: left,
-			width: width
-		} );
-
-		select.left.css( {
-			top: top,
-			left: left,
-			height: height
-		} );
-
-		select.bottom.css( {
-			top: top + height,
-			left: left,
-			width: width
-		} );
-
-		select.right.css( {
-			top: top,
-			left: left + width,
-			height: height
-		} );
-	},
-
-
-	/**
-	 * Use the Editor API to perform an update based on the new data for the
-	 * cells
-	 *
-	 * @param {array} cells Information about the selected cells from the key
-	 *     up function
-	 * @private
-	 */
-	_editor: function ( cells )
-	{
-		var dt = this.s.dt;
-		var editor = this.c.editor;
-
-		if ( ! editor ) {
-			return;
-		}
-
-		// Build the object structure for Editor's multi-row editing
-		var idValues = {};
-		var nodes = [];
-		var fields = editor.fields();
-
-		for ( var i=0, ien=cells.length ; i<ien ; i++ ) {
-			for ( var j=0, jen=cells[i].length ; j<jen ; j++ ) {
-				var cell = cells[i][j];
-
-				// Determine the field name for the cell being edited
-				var col = dt.settings()[0].aoColumns[ cell.index.column ];
-				var fieldName = col.editField;
-
-				if ( fieldName === undefined ) {
-					var dataSrc = col.mData;
-
-					// dataSrc is the `field.data` property, but we need to set
-					// using the field name, so we need to translate from the
-					// data to the name
-					for ( var k=0, ken=fields.length ; k<ken ; k++ ) {
-						var field = editor.field( fields[k] );
-
-						if ( field.dataSrc() === dataSrc ) {
-							fieldName = field.name();
-							break;
-						}
-					}
-				}
-
-				if ( ! fieldName ) {
-					throw 'Could not automatically determine field data. '+
-						'Please see https://datatables.net/tn/11';
-				}
-
-				if ( ! idValues[ fieldName ] ) {
-					idValues[ fieldName ] = {};
-				}
-
-				var id = dt.row( cell.index.row ).id();
-				idValues[ fieldName ][ id ] = cell.set;
-
-				// Keep a list of cells so we can activate the bubble editing
-				// with them
-				nodes.push( cell.index );
-			}
-		}
-
-		// Perform the edit using bubble editing as it allows us to specify
-		// the cells to be edited, rather than using full rows
-		editor
-			.bubble( nodes, false )
-			.multiSet( idValues )
-			.submit(null, function () {
-				// If an error happens, Editor will show an alert, and then we need
-				// to finish the edit since we can't do anything else.
-				editor.close();
-			});
-	},
-
-
-	/**
-	 * Emit an event on the DataTable for listeners
-	 *
-	 * @param  {string} name Event name
-	 * @param  {array} args Event arguments
-	 * @private
-	 */
-	_emitEvent: function ( name, args )
-	{
-		this.s.dt.iterator( 'table', function ( ctx, i ) {
-			$(ctx.nTable).triggerHandler( name+'.dt', args );
-		} );
-	},
-
-
-	/**
-	 * Attach suitable listeners (based on the configuration) that will attach
-	 * and detach the AutoFill handle in the document.
-	 *
-	 * @private
-	 */
-	_focusListener: function ()
-	{
-		var that = this;
-		var dt = this.s.dt;
-		var namespace = this.s.namespace;
-		var focus = this.c.focus !== null ?
-			this.c.focus :
-			dt.init().keys || dt.settings()[0].keytable ?
-				'focus' :
-				'hover';
-
-		// All event listeners attached here are removed in the `destroy`
-		// callback in the constructor
-		if ( focus === 'focus' ) {
-			dt
-				.on( 'key-focus.autoFill', function ( e, dt, cell ) {
-					that._attach( cell.node() );
-				} )
-				.on( 'key-blur.autoFill', function ( e, dt, cell ) {
-					that._detach();
-				} );
-		}
-		else if ( focus === 'click' ) {
-			$(dt.table().body()).on( 'click'+namespace, 'td, th', function (e) {
-				that._attach( this );
-			} );
-
-			$(document.body).on( 'click'+namespace, function (e) {
-				if ( ! $(e.target).parents().filter( dt.table().body() ).length ) {
-					that._detach();
-				}
-			} );
-		}
-		else {
-			$(dt.table().body())
-				.on( 'mouseenter'+namespace+' touchstart'+namespace, 'td, th', function (e) {
-					that._attach( this );
-				} )
-				.on( 'mouseleave'+namespace+'touchend'+namespace, function (e) {
-					if ( $(e.relatedTarget).hasClass('dt-autofill-handle') ) {
-						return;
-					}
-
-					that._detach();
-				} );
-
-			
-		}
-	},
-
-
-	_focusListenerRemove: function ()
-	{
-		var dt = this.s.dt;
-
-		dt.off( '.autoFill' );
-		$(dt.table().body()).off( this.s.namespace );
-		$(document.body).off( this.s.namespace );
-	},
-
-
-	/**
-	 * Get the position of a node, relative to another, including any scrolling
-	 * offsets.
-	 * @param  {Node}   node         Node to get the position of
-	 * @param  {jQuery} targetParent Node to use as the parent
-	 * @return {object}              Offset calculation
-	 * @private
-	 */
-	_getPosition: function ( node, targetParent )
-	{
-		var
-			currNode = node,
-			currOffsetParent,
-			top = 0,
-			left = 0;
-
-		if ( ! targetParent ) {
-			targetParent = $( $( this.s.dt.table().node() )[0].offsetParent );
-		}
-
-		do {
-			// Don't use jQuery().position() the behaviour changes between 1.x and 3.x for
-			// tables
-			var positionTop = currNode.offsetTop;
-			var positionLeft = currNode.offsetLeft;
-
-			// jQuery doesn't give a `table` as the offset parent oddly, so use DOM directly
-			currOffsetParent = $( currNode.offsetParent );
-
-			top += positionTop + parseInt( currOffsetParent.css('border-top-width') || 0 ) * 1;
-			left += positionLeft + parseInt( currOffsetParent.css('border-left-width') || 0 ) * 1;
-
-			// Emergency fall back. Shouldn't happen, but just in case!
-			if ( currNode.nodeName.toLowerCase() === 'body' ) {
-				break;
-			}
-
-			currNode = currOffsetParent.get(0); // for next loop
-		}
-		while ( currOffsetParent.get(0) !== targetParent.get(0) )
-
-		return {
-			top: top,
-			left: left
-		};
-	},
-
-
-	/**
-	 * Start mouse drag - selects the start cell
-	 *
-	 * @param  {object} e Mouse down event
-	 * @private
-	 */
-	_mousedown: function ( e )
-	{
-		var that = this;
-		var dt = this.s.dt;
-
-		this.dom.start = this.dom.attachedTo;
-		this.s.start = {
-			row: dt.rows( { page: 'current' } ).nodes().indexOf( $(this.dom.start).parent()[0] ),
-			column: $(this.dom.start).index()
-		};
-
-		$(document.body)
-			.on( 'mousemove.autoFill touchmove.autoFill', function (e) {
-				that._mousemove( e );
-				// If it is a touch event then when the touch ends we need to remove the handle
-				if(e.type === 'touchmove') {
-					$(document.body).one('touchend.autoFill', function() {
-						that._detach();
-					})
-				}
-			} )
-			.on( 'mouseup.autoFill touchend.autoFill', function (e) {
-				that._mouseup( e );
-			} );
-
-		var select = this.dom.select;
-		var offsetParent = $( dt.table().node() ).offsetParent();
-		select.top.appendTo( offsetParent );
-		select.left.appendTo( offsetParent );
-		select.right.appendTo( offsetParent );
-		select.bottom.appendTo( offsetParent );
-
-		this._drawSelection( this.dom.start, e );
-
-		this.dom.handle.css( 'display', 'none' );
-
-		// Cache scrolling information so mouse move doesn't need to read.
-		// This assumes that the window and DT scroller will not change size
-		// during an AutoFill drag, which I think is a fair assumption
-		var scrollWrapper = this.dom.dtScroll;
-		this.s.scroll = {
-			windowHeight: $(window).height(),
-			windowWidth:  $(window).width(),
-			dtTop:        scrollWrapper ? scrollWrapper.offset().top : null,
-			dtLeft:       scrollWrapper ? scrollWrapper.offset().left : null,
-			dtHeight:     scrollWrapper ? scrollWrapper.outerHeight() : null,
-			dtWidth:      scrollWrapper ? scrollWrapper.outerWidth() : null
-		};
-	},
-
-
-	/**
-	 * Mouse drag - selects the end cell and update the selection display for
-	 * the end user
-	 *
-	 * @param  {object} e Mouse move event
-	 * @private
-	 */
-	_mousemove: function ( e )
-	{
-		var target = e.touches && e.touches.length
-			? document.elementFromPoint(e.touches[0].clientX, e.touches[0].clientY)
-			: e.target;
-		var name = target.nodeName.toLowerCase();
-
-		if ( name !== 'td' && name !== 'th' ) {
-			return;
-		}
-
-		this._drawSelection( target, e );
-		this._shiftScroll( e );
-	},
-
-
-	/**
-	 * End mouse drag - perform the update actions
-	 *
-	 * @param  {object} e Mouse up event
-	 * @private
-	 */
-	_mouseup: function ( e )
-	{
-		$(document.body).off( '.autoFill' );
-
-		var that = this;
-		var dt = this.s.dt;
-		var select = this.dom.select;
-		select.top.remove();
-		select.left.remove();
-		select.right.remove();
-		select.bottom.remove();
-
-		this.dom.handle.css( 'display', 'block' );
-
-		// Display complete - now do something useful with the selection!
-		var start = this.s.start;
-		var end = this.s.end;
-
-		// Haven't selected multiple cells, so nothing to do
-		if ( start.row === end.row && start.column === end.column ) {
-			return;
-		}
-
-		var startDt = dt.cell( ':eq('+start.row+')', start.column+':visible', {page:'current'} );
-
-		// If Editor is active inside this cell (inline editing) we need to wait for Editor to
-		// submit and then we can loop back and trigger the fill.
-		if ( $('div.DTE', startDt.node()).length ) {
-			var editor = dt.editor();
-
-			editor
-				.on( 'submitSuccess.dtaf close.dtaf', function () {
-					editor.off( '.dtaf');
-
-					setTimeout( function () {
-						that._mouseup( e );
-					}, 100 );
-				} )
-				.on( 'submitComplete.dtaf preSubmitCancelled.dtaf close.dtaf', function () {
-					editor.off( '.dtaf');
-				} );
-
-			// Make the current input submit
-			editor.submit();
-
-			return;
-		}
-
-		// Build a matrix representation of the selected rows
-		var rows       = this._range( start.row, end.row );
-		var columns    = this._range( start.column, end.column );
-		var selected   = [];
-		var dtSettings = dt.settings()[0];
-		var dtColumns  = dtSettings.aoColumns;
-		var enabledColumns = dt.columns( this.c.columns ).indexes();
-
-		// Can't use Array.prototype.map as IE8 doesn't support it
-		// Can't use $.map as jQuery flattens 2D arrays
-		// Need to use a good old fashioned for loop
-		for ( var rowIdx=0 ; rowIdx<rows.length ; rowIdx++ ) {
-			selected.push(
-				$.map( columns, function (column) {
-					var row = dt.row( ':eq('+rows[rowIdx]+')', {page:'current'} ); // Workaround for M581
-					var cell = dt.cell( row.index(), column+':visible' );
-					var data = cell.data();
-					var cellIndex = cell.index();
-					var editField = dtColumns[ cellIndex.column ].editField;
-
-					if ( editField !== undefined ) {
-						data = DataTable.util.get( editField )( dt.row( cellIndex.row ).data() );
-					}
-
-					if ( enabledColumns.indexOf(cellIndex.column) === -1 ) {
-						return;
-					}
-
-					return {
-						cell:  cell,
-						data:  data,
-						label: cell.data(),
-						index: cellIndex
-					};
-				} )
-			);
-		}
-
-		this._actionSelector( selected );
-		
-		// Stop shiftScroll
-		clearInterval( this.s.scrollInterval );
-		this.s.scrollInterval = null;
-	},
-
-
-	/**
-	 * Create an array with a range of numbers defined by the start and end
-	 * parameters passed in (inclusive!).
-	 * 
-	 * @param  {integer} start Start
-	 * @param  {integer} end   End
-	 * @private
-	 */
-	_range: function ( start, end )
-	{
-		var out = [];
-		var i;
-
-		if ( start <= end ) {
-			for ( i=start ; i<=end ; i++ ) {
-				out.push( i );
-			}
-		}
-		else {
-			for ( i=start ; i>=end ; i-- ) {
-				out.push( i );
-			}
-		}
-
-		return out;
-	},
-
-
-	/**
-	 * Move the window and DataTables scrolling during a drag to scroll new
-	 * content into view. This is done by proximity to the edge of the scrolling
-	 * container of the mouse - for example near the top edge of the window
-	 * should scroll up. This is a little complicated as there are two elements
-	 * that can be scrolled - the window and the DataTables scrolling view port
-	 * (if scrollX and / or scrollY is enabled).
-	 *
-	 * @param  {object} e Mouse move event object
-	 * @private
-	 */
-	_shiftScroll: function ( e )
-	{
-		var that = this;
-		var scroll = this.s.scroll;
-		var runInterval = false;
-		var scrollSpeed = 5;
-		var buffer = 65;
-
-		// Different values if using a touchscreen
-		var pageX = !e.type.includes('touch') ? e.pageX - window.scrollX :e.touches[0].clientX;
-		var pageY = !e.type.includes('touch') ? e.pageY - window.scrollY :e.touches[0].clientY;
-		var
-			windowY = pageY,
-			windowX = pageX,
-			windowVert, windowHoriz,
-			dtVert, dtHoriz;
-
-		// Window calculations - based on the mouse position in the window,
-		// regardless of scrolling
-		if ( windowY < buffer ) {
-			windowVert = scrollSpeed * -1;
-		}
-		else if ( windowY > scroll.windowHeight - buffer ) {
-			windowVert = scrollSpeed;
-		}
-
-		if ( windowX < buffer ) {
-			windowHoriz = scrollSpeed * -1;
-		}
-		else if ( windowX > scroll.windowWidth - buffer ) {
-			windowHoriz = scrollSpeed;
-		}
-
-		// DataTables scrolling calculations - based on the table's position in
-		// the document and the mouse position on the page
-		if ( scroll.dtTop !== null && pageY < scroll.dtTop + buffer ) {
-			dtVert = scrollSpeed * -1;
-		}
-		else if ( scroll.dtTop !== null && pageY > scroll.dtTop + scroll.dtHeight - buffer ) {
-			dtVert = scrollSpeed;
-		}
-
-		if ( scroll.dtLeft !== null && pageX < scroll.dtLeft + buffer ) {
-			dtHoriz = scrollSpeed * -1;
-		}
-		else if ( scroll.dtLeft !== null && pageX > scroll.dtLeft + scroll.dtWidth - buffer ) {
-			dtHoriz = scrollSpeed;
-		}
-
-		// This is where it gets interesting. We want to continue scrolling
-		// without requiring a mouse move, so we need an interval to be
-		// triggered. The interval should continue until it is no longer needed,
-		// but it must also use the latest scroll commands (for example consider
-		// that the mouse might move from scrolling up to scrolling left, all
-		// with the same interval running. We use the `scroll` object to "pass"
-		// this information to the interval. Can't use local variables as they
-		// wouldn't be the ones that are used by an already existing interval!
-		if ( windowVert || windowHoriz || dtVert || dtHoriz ) {
-			scroll.windowVert = windowVert;
-			scroll.windowHoriz = windowHoriz;
-			scroll.dtVert = dtVert;
-			scroll.dtHoriz = dtHoriz;
-			runInterval = true;
-		}
-		else if ( this.s.scrollInterval ) {
-			// Don't need to scroll - remove any existing timer
-			clearInterval( this.s.scrollInterval );
-			this.s.scrollInterval = null;
-		}
-
-		// If we need to run the interval to scroll and there is no existing
-		// interval (if there is an existing one, it will continue to run)
-		if ( ! this.s.scrollInterval && runInterval ) {
-			this.s.scrollInterval = setInterval( function () {
-				// Don't need to worry about setting scroll <0 or beyond the
-				// scroll bound as the browser will just reject that.
-				window.scrollTo(window.scrollX + (scroll.windowHoriz ? scroll.windowHoriz : 0), window.scrollY + (scroll.windowVert ? scroll.windowVert : 0))
-
-				// DataTables scrolling
-				if ( scroll.dtVert || scroll.dtHoriz ) {
-					var scroller = that.dom.dtScroll[0];
-
-					if ( scroll.dtVert ) {
-						scroller.scrollTop += scroll.dtVert;
-					}
-					if ( scroll.dtHoriz ) {
-						scroller.scrollLeft += scroll.dtHoriz;
-					}
-				}
-			}, 20 );
-		}
-	},
-
-
-	/**
-	 * Update the DataTable after the user has selected what they want to do
-	 *
-	 * @param  {false|undefined} result Return from the `execute` method - can
-	 *   be false internally to do nothing. This is not documented for plug-ins
-	 *   and is used only by the cancel option.
-	 * @param {array} cells Information about the selected cells from the key
-	 *     up function, argumented with the set values
-	 * @private
-	 */
-	_update: function ( result, cells )
-	{
-		// Do nothing on `false` return from an execute function
-		if ( result === false ) {
-			return;
-		}
-
-		var dt = this.s.dt;
-		var cell;
-		var columns = dt.columns( this.c.columns ).indexes();
-
-		// Potentially allow modifications to the cells matrix
-		this._emitEvent( 'preAutoFill', [ dt, cells ] );
-
-		this._editor( cells );
-
-		// Automatic updates are not performed if `update` is null and the
-		// `editor` parameter is passed in - the reason being that Editor will
-		// update the data once submitted
-		var update = this.c.update !== null ?
-			this.c.update :
-			this.c.editor ?
-				false :
-				true;
-
-		if ( update ) {
-			for ( var i=0, ien=cells.length ; i<ien ; i++ ) {
-				for ( var j=0, jen=cells[i].length ; j<jen ; j++ ) {
-					cell = cells[i][j];
-
-					if ( columns.indexOf(cell.index.column) !== -1 ) {
-						cell.cell.data( cell.set );
-					}
-				}
-			}
-
-			dt.draw(false);
-		}
-
-		this._emitEvent( 'autoFill', [ dt, cells ] );
-	}
-} );
-
-
 /**
- * AutoFill actions. The options here determine how AutoFill will fill the data
- * in the table when the user has selected a range of cells. Please see the
- * documentation on the DataTables site for full details on how to create plug-
- * ins.
- *
- * @type {Object}
+ * AutoFill actions. The options here determine how AutoFill will fill the
+ * data in the table when the user has selected a range of cells. Please see
+ * the documentation on the DataTables site for full details on how to
+ * create plug- ins.
  */
 AutoFill.actions = {
-	increment: {
-		available: function ( dt, cells ) {
-			var d = cells[0][0].label;
-
-			// is numeric test based on jQuery's old `isNumeric` function
-			return !isNaN( d - parseFloat( d ) );
-		},
-
-		option: function ( dt, cells ) {
-			return dt.i18n(
-				'autoFill.increment',
-				'Increment / decrement each cell by: <input type="number" value="1">'
-			);
-		},
-
-		execute: function ( dt, cells, node ) {
-			var value = cells[0][0].data * 1;
-			var increment = $('input', node).val() * 1;
-
-			for ( var i=0, ien=cells.length ; i<ien ; i++ ) {
-				for ( var j=0, jen=cells[i].length ; j<jen ; j++ ) {
-					cells[i][j].set = value;
-
-					value += increment;
-				}
-			}
-		}
-	},
-
-	fill: {
-		available: function ( dt, cells ) {
-			return true;
-		},
-
-		option: function ( dt, cells ) {
-			return dt.i18n('autoFill.fill', 'Fill all cells with <i>%d</i>', cells[0][0].label );
-		},
-
-		execute: function ( dt, cells, node ) {
-			var value = cells[0][0].data;
-
-			for ( var i=0, ien=cells.length ; i<ien ; i++ ) {
-				for ( var j=0, jen=cells[i].length ; j<jen ; j++ ) {
-					cells[i][j].set = value;
-				}
-			}
-		}
-	},
-
-	fillHorizontal: {
-		available: function ( dt, cells ) {
-			return cells.length > 1 && cells[0].length > 1;
-		},
-
-		option: function ( dt, cells ) {
-			return dt.i18n('autoFill.fillHorizontal', 'Fill cells horizontally' );
-		},
-
-		execute: function ( dt, cells, node ) {
-			for ( var i=0, ien=cells.length ; i<ien ; i++ ) {
-				for ( var j=0, jen=cells[i].length ; j<jen ; j++ ) {
-					cells[i][j].set = cells[i][0].data;
-				}
-			}
-		}
-	},
-
-	fillVertical: {
-		available: function ( dt, cells ) {
-			return cells.length > 1 && cells[0].length > 1;
-		},
-
-		option: function ( dt, cells ) {
-			return dt.i18n('autoFill.fillVertical', 'Fill cells vertically' );
-		},
-
-		execute: function ( dt, cells, node ) {
-			for ( var i=0, ien=cells.length ; i<ien ; i++ ) {
-				for ( var j=0, jen=cells[i].length ; j<jen ; j++ ) {
-					cells[i][j].set = cells[0][j].data;
-				}
-			}
-		}
-	},
-
-	// Special type that does not make itself available, but is added
-	// automatically by AutoFill if a multi-choice list is shown. This allows
-	// sensible code reuse
-	cancel: {
-		available: function () {
-			return false;
-		},
-
-		option: function ( dt ) {
-			return dt.i18n('autoFill.cancel', 'Cancel' );
-		},
-
-		execute: function () {
-			return false;
-		}
-	}
+    increment: {
+        available: function (dt, cells) {
+            let d = cells[0][0].label;
+            // is numeric test based on jQuery's old `isNumeric` function
+            return !isNaN(d - parseFloat(d));
+        },
+        option: function (dt, cells) {
+            return dt.i18n('autoFill.increment', 'Increment / decrement each cell by: <input type="number" value="1">');
+        },
+        execute: function (dt, cells, node) {
+            let value = cells[0][0].data * 1;
+            let increment = node ? parseFloat(node.find('input').val()) : 1;
+            for (let i = 0, ien = cells.length; i < ien; i++) {
+                for (let j = 0, jen = cells[i].length; j < jen; j++) {
+                    cells[i][j].set = value;
+                    value += increment;
+                }
+            }
+        }
+    },
+    fill: {
+        available: function (dt, cells) {
+            return true;
+        },
+        option: function (dt, cells) {
+            return dt.i18n('autoFill.fill', 'Fill all cells with <i>%d</i>', cells[0][0].label);
+        },
+        execute: function (dt, cells, node) {
+            let value = cells[0][0].data;
+            for (let i = 0, ien = cells.length; i < ien; i++) {
+                for (let j = 0, jen = cells[i].length; j < jen; j++) {
+                    cells[i][j].set = value;
+                }
+            }
+        }
+    },
+    fillHorizontal: {
+        available: function (dt, cells) {
+            return cells.length > 1 && cells[0].length > 1;
+        },
+        option: function (dt, cells) {
+            return dt.i18n('autoFill.fillHorizontal', 'Fill cells horizontally');
+        },
+        execute: function (dt, cells, node) {
+            for (let i = 0, ien = cells.length; i < ien; i++) {
+                for (let j = 0, jen = cells[i].length; j < jen; j++) {
+                    cells[i][j].set = cells[i][0].data;
+                }
+            }
+        }
+    },
+    fillVertical: {
+        available: function (dt, cells) {
+            return cells.length > 1 && cells[0].length > 1;
+        },
+        option: function (dt, cells) {
+            return dt.i18n('autoFill.fillVertical', 'Fill cells vertically');
+        },
+        execute: function (dt, cells, node) {
+            for (let i = 0, ien = cells.length; i < ien; i++) {
+                for (let j = 0, jen = cells[i].length; j < jen; j++) {
+                    cells[i][j].set = cells[0][j].data;
+                }
+            }
+        }
+    },
+    // Special type that does not make itself available, but is added
+    // automatically by AutoFill if a multi-choice list is shown. This
+    // allows sensible code reuse
+    cancel: {
+        available: function () {
+            return false;
+        },
+        option: function (dt) {
+            return dt.i18n('autoFill.cancel', 'Cancel');
+        },
+        execute: function () {
+            return false;
+        }
+    }
 };
-
-
-/**
- * AutoFill version
- * 
- * @static
- * @type      String
- */
-AutoFill.version = '2.7.1';
-
-
-/**
- * AutoFill defaults
- * 
- * @namespace
- */
-AutoFill.defaults = {
-	/** @type {Boolean} Ask user what they want to do, even for a single option */
-	alwaysAsk: false,
-
-	closeButton: true,
-
-	/** @type {string|null} What will trigger a focus */
-	focus: null, // focus, click, hover
-
-	/** @type {column-selector} Columns to provide auto fill for */
-	columns: '', // all
-
-	/** @type {Boolean} Enable AutoFill on load */
-	enable: true,
-
-	/** @type {boolean|null} Update the cells after a drag */
-	update: null, // false is editor given, true otherwise
-
-	/** @type {DataTable.Editor} Editor instance for automatic submission */
-	editor: null,
-
-	/** @type {boolean} Enable vertical fill */
-	vertical: true,
-
-	/** @type {boolean} Enable horizontal fill */
-	horizontal: true
-};
-
-
-/**
- * Classes used by AutoFill that are configurable
- * 
- * @namespace
- */
+/** Class names used by AutoFill for customisation */
 AutoFill.classes = {
-	/** @type {String} Class used by the selection button */
-	btn: 'btn',
-
-	closeable: 'dtaf-popover-closeable'
+    btn: 'btn',
+    close: 'dtaf-list-close',
+    closeable: 'dtaf-list-closeable'
 };
-
-
-/*
- * API
- */
-var Api = $.fn.dataTable.Api;
+/** Defaults */
+AutoFill.defaults = {
+    alwaysAsk: false,
+    closeButton: true,
+    focus: null,
+    columns: '',
+    enable: true,
+    update: true,
+    editor: null,
+    vertical: true,
+    horizontal: true
+};
+/** AutoFill version */
+AutoFill.version = '3.0.0';
 
 // Doesn't do anything - Not documented
-Api.register( 'autoFill()', function () {
-	return this;
-} );
-
-Api.register( 'autoFill().enabled()', function () {
-	var ctx = this.context[0];
-
-	return ctx.autoFill ?
-		ctx.autoFill.enabled() :
-		false;
-} );
-
-Api.register( 'autoFill().enable()', function ( flag ) {
-	return this.iterator( 'table', function ( ctx ) {
-		if ( ctx.autoFill ) {
-			ctx.autoFill.enable( flag );
-		}
-	} );
-} );
-
-Api.register( 'autoFill().disable()', function () {
-	return this.iterator( 'table', function ( ctx ) {
-		if ( ctx.autoFill ) {
-			ctx.autoFill.disable();
-		}
-	} );
-} );
-
-
+Api.register('autoFill()', function () {
+    return this.inst(this.context);
+});
+Api.register('autoFill().enabled()', function () {
+    var ctx = this.context[0];
+    return ctx.autoFill ? ctx.autoFill.enabled() : false;
+});
+Api.register('autoFill().enable()', function (flag) {
+    return this.iterator('table', function (ctx) {
+        if (ctx.autoFill) {
+            ctx.autoFill.enable(flag);
+        }
+    });
+});
+Api.register('autoFill().disable()', function () {
+    return this.iterator('table', function (ctx) {
+        if (ctx.autoFill) {
+            ctx.autoFill.disable();
+        }
+    });
+});
 // Attach a listener to the document which listens for DataTables initialisation
 // events so we can automatically initialise
-$(document).on( 'preInit.dt.autofill', function (e, settings, json) {
-	if ( e.namespace !== 'dt' ) {
-		return;
-	}
-
-	var init = settings.oInit.autoFill;
-	var defaults = DataTable.defaults.autoFill;
-
-	if ( init || defaults ) {
-		var opts = $.extend( {}, init, defaults );
-
-		if ( init !== false ) {
-			new AutoFill( settings, opts  );
-		}
-	}
-} );
-
-
+Dom.s(document).on('preInit.dt.autofill', function (e, settings) {
+    if (e.namespace !== 'dt') {
+        return;
+    }
+    let init = settings.init.autoFill;
+    let defaults = DataTable.defaults.autoFill;
+    if (init || defaults) {
+        let opts = {};
+        if (util.is.plainObject(defaults)) {
+            util.object.assign(opts, defaults);
+        }
+        if (util.is.plainObject(init)) {
+            util.object.assign(opts, init);
+        }
+        if (init !== false) {
+            new AutoFill(settings, opts);
+        }
+    }
+});
 // Alias for access
 DataTable.AutoFill = AutoFill;
-$.fn.DataTable.AutoFill = AutoFill;
 
 
 export default DataTable;
+