introduce adjust_container_left_position option in help_instructions configuration

1 year ago · 8eddc6f35c
7 changed files with 27937 additions and 786 deletions
--- a/dist/starter.html
+++ b/dist/starter.html
@ -1,10 +1,10 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <title>tablefilter v0.6.110 - Starter</title>
+    <title>tablefilter v0.7.0 - Starter</title>
 </head>
 <body>
-<h1>tablefilter v0.6.110</h1>
+<h1>tablefilter v0.7.0</h1>



--- a/dist/tablefilter/tablefilter.js
+++ b/dist/tablefilter/tablefilter.js
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "tablefilter",
-  "version": "0.6.110",
+  "version": "0.7.0",
  "description": "A Javascript library making HTML tables filterable and a bit more",
  "license": "MIT",
  "author": {
--- a/src/dom.js
+++ b/src/dom.js
@ -36,7 +36,7 @@ export const getFirstTextNode = (node) => {

 /**
 * Creates an html element with given collection of attributes
- * @param  {String} tag a string of the html tag to create
+ * @param  {String} tag html tag name
 * @param  {Array} an undetermined number of arrays containing the with 2
 *                    items, the attribute name and its value ['id','myId']
 * @return {Object}     created element
--- a/src/modules/help.js
+++ b/src/modules/help.js
@ -4,7 +4,7 @@ import {addEvt, targetEvt, removeEvt} from '../event';
 import {NONE} from '../const';
 import {root} from '../root';
 import {isEmpty, isNull} from '../types';
-import {defaultsStr} from '../settings';
+import {defaultsStr, defaultsNb} from '../settings';
 import {RIGHT} from './toolbar';

 const WIKI_URL = 'https://github.com/koalyptus/TableFilter/wiki/' +
@ -92,6 +92,15 @@ export class Help extends Feature {
         */
        this.cont = null;

+        /**
+         * Adjust container left position when table's horizontal scroll is
+         * on, typically when `responsive` option is enabled.
+         * @type {Number}
+         * @defaultValue 25
+         */
+        this.contAdjustLeftPosition =
+            defaultsNb(f.container_adjust_left_position, 25);
+
        /**
         * Bound mouseup wrapper
         * @private
@ -214,9 +223,20 @@ export class Help extends Feature {
        let divDisplay = this.cont.style.display;
        if (divDisplay === '' || divDisplay === NONE) {
            this.cont.style.display = 'inline';
+
+            // if table element has an horizontal scrollbar adjust container
+            // left position accordingly
+            if (this.tf.dom().scrollLeft > 0) {
+                this.cont.style.left = `${
+                    this.btn.offsetLeft
+                    - this.tf.dom().scrollLeft
+                    + this.contAdjustLeftPosition
+                }px`;
+            }
            addEvt(root, 'mouseup', this.boundMouseup);
        } else {
            this.cont.style.display = NONE;
+            this.cont.style.left = '';
        }
    }

--- a/static/templates/pagination.html
+++ b/static/templates/pagination.html
@ -40,6 +40,10 @@
            page_length: true,
            sort: true
        },
+        responsive: true,
+        help_instructions: {
+            container_adjust_left_position: 30
+        },
        alternate_rows: true,
        btn_reset: true,
        rows_counter: true,