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

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",
"version": "0.6.110",
"version": "0.7.0",
"description": "A Javascript library making HTML tables filterable and a bit more",
"license": "MIT",
"author": {

View File

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

View File

@ -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 = '';
}
}

View File

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