introduce adjust_container_left_position option in help_instructions configuration

This commit is contained in:
koalyptus 2020-05-13 20:46:23 +10:00
parent 577fb0b90a
commit 8eddc6f35c
7 changed files with 27907 additions and 756 deletions

4
dist/starter.html vendored
View File

@ -1,10 +1,10 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<title>tablefilter v0.6.110 - Starter</title> <title>tablefilter v0.7.0 - Starter</title>
</head> </head>
<body> <body>
<h1>tablefilter v0.6.110</h1> <h1>tablefilter v0.7.0</h1>

File diff suppressed because one or more lines are too long

1175
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -1,6 +1,6 @@
{ {
"name": "tablefilter", "name": "tablefilter",
"version": "0.6.110", "version": "0.7.0",
"description": "A Javascript library making HTML tables filterable and a bit more", "description": "A Javascript library making HTML tables filterable and a bit more",
"license": "MIT", "license": "MIT",
"author": { "author": {

View File

@ -36,7 +36,7 @@ export const getFirstTextNode = (node) => {
/** /**
* Creates an html element with given collection of attributes * 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 * @param {Array} an undetermined number of arrays containing the with 2
* items, the attribute name and its value ['id','myId'] * items, the attribute name and its value ['id','myId']
* @return {Object} created element * @return {Object} created element

View File

@ -4,7 +4,7 @@ import {addEvt, targetEvt, removeEvt} from '../event';
import {NONE} from '../const'; import {NONE} from '../const';
import {root} from '../root'; import {root} from '../root';
import {isEmpty, isNull} from '../types'; import {isEmpty, isNull} from '../types';
import {defaultsStr} from '../settings'; import {defaultsStr, defaultsNb} from '../settings';
import {RIGHT} from './toolbar'; import {RIGHT} from './toolbar';
const WIKI_URL = 'https://github.com/koalyptus/TableFilter/wiki/' + const WIKI_URL = 'https://github.com/koalyptus/TableFilter/wiki/' +
@ -92,6 +92,15 @@ export class Help extends Feature {
*/ */
this.cont = null; 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 * Bound mouseup wrapper
* @private * @private
@ -214,9 +223,20 @@ export class Help extends Feature {
let divDisplay = this.cont.style.display; let divDisplay = this.cont.style.display;
if (divDisplay === '' || divDisplay === NONE) { if (divDisplay === '' || divDisplay === NONE) {
this.cont.style.display = 'inline'; 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); addEvt(root, 'mouseup', this.boundMouseup);
} else { } else {
this.cont.style.display = NONE; this.cont.style.display = NONE;
this.cont.style.left = '';
} }
} }

View File

@ -40,6 +40,10 @@
page_length: true, page_length: true,
sort: true sort: true
}, },
responsive: true,
help_instructions: {
container_adjust_left_position: 30
},
alternate_rows: true, alternate_rows: true,
btn_reset: true, btn_reset: true,
rows_counter: true, rows_counter: true,