mirror of
https://github.com/koalyptus/TableFilter.git
synced 2024-04-27 04:22:10 +02:00
Merge pull request #780 from koalyptus/772-fix
Fix for #772: help instructions pop-up position with responsive behaviour
This commit is contained in:
koalyptus
GitHub
commit
571c31e8da
4
dist/starter.html
vendored
4
dist/starter.html
vendored
|
|
@ -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>
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
2
dist/tablefilter/tablefilter.js
vendored
2
dist/tablefilter/tablefilter.js
vendored
File diff suppressed because one or more lines are too long
1
dist/tablefilter/tf-1-568c8f8ffed8693fa686.js
vendored
Normal file
1
dist/tablefilter/tf-1-568c8f8ffed8693fa686.js
vendored
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
1175
package-lock.json
generated
1175
package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
|
@ -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": {
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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,21 @@ 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 = '';
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
79
test/test-help-responsive.html
Normal file
79
test/test-help-responsive.html
Normal file
|
|
@ -0,0 +1,79 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>TableFilter help pop-up with responsive behaviour</title>
|
||||
<link rel="stylesheet" href="libs/qunit/qunit.css">
|
||||
<script src="libs/qunit/qunit.js"></script>
|
||||
<script src="libs/polyfill.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div style="float: right; width: 80%; border: 1px solid #f4f4f4;"></div>
|
||||
<table id="demo" cellpadding="0" cellspacing="0">
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>From</th>
|
||||
<th>Destination</th>
|
||||
<th>Road Distance (km)</th>
|
||||
<th>By Air (hrs)</th>
|
||||
<th>By Rail (hrs)</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Sydney</strong></td>
|
||||
<td>Adelaide</td>
|
||||
<td>1412</td>
|
||||
<td>1.4</td>
|
||||
<td>25.3</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Sydney</strong></td>
|
||||
<td>Brisbane</td>
|
||||
<td>982</td>
|
||||
<td>1.5</td>
|
||||
<td>16</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Sydney</strong></td>
|
||||
<td>Canberra</td>
|
||||
<td>286</td>
|
||||
<td>.6</td>
|
||||
<td>4.3</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Sydney</strong></td>
|
||||
<td>Melbourne</td>
|
||||
<td>872</td>
|
||||
<td>1.1</td>
|
||||
<td>10.5</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Adelaide</strong></td>
|
||||
<td>Perth</td>
|
||||
<td>2781</td>
|
||||
<td>3.1</td>
|
||||
<td>38</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Adelaide</strong></td>
|
||||
<td>Alice Springs</td>
|
||||
<td>1533</td>
|
||||
<td>2</td>
|
||||
<td>20.25</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Adelaide</strong></td>
|
||||
<td>Brisbane</td>
|
||||
<td>2045</td>
|
||||
<td>2.15</td>
|
||||
<td>40</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<script src="../dist/tablefilter/tablefilter.js"></script>
|
||||
<script src="test-help-responsive.js"></script>
|
||||
|
||||
<div id="qunit"></div>
|
||||
<div id="qunit-fixture"></div>
|
||||
</body>
|
||||
</html>
|
||||
70
test/test-help-responsive.js
Normal file
70
test/test-help-responsive.js
Normal file
|
|
@ -0,0 +1,70 @@
|
|||
|
||||
var tf = new TableFilter('demo', {
|
||||
base_path: '../dist/tablefilter/',
|
||||
help_instructions: {
|
||||
container_adjust_left_position: 20
|
||||
},
|
||||
responsive: true
|
||||
});
|
||||
tf.init();
|
||||
|
||||
var help = tf.feature('help');
|
||||
module('Sanity checks');
|
||||
test('Button element', function() {
|
||||
deepEqual(typeof help, 'object', 'Help instanciated');
|
||||
notEqual(help.btn, null, 'btn property');
|
||||
});
|
||||
|
||||
module('Pop-up container position');
|
||||
test('Help UI elements', function() {
|
||||
var container = help.cont,
|
||||
helpBtn = help.btn;
|
||||
deepEqual(container.nodeName, 'DIV', 'Help container');
|
||||
deepEqual(helpBtn.nodeName, 'SPAN', 'Help button');
|
||||
});
|
||||
|
||||
// 772 issue: pop-up container position when table feature horizontal scroll
|
||||
test('When table has horizontal scroll', function() {
|
||||
// setup
|
||||
tf.dom().scrollLeft = 10000;
|
||||
|
||||
// act
|
||||
help.toggle();
|
||||
|
||||
// assert
|
||||
deepEqual(
|
||||
parseFloat(help.cont.style.left),
|
||||
(help.btn.offsetLeft
|
||||
- tf.dom().scrollLeft
|
||||
+ help.contAdjustLeftPosition),
|
||||
'Pop-up container position'
|
||||
);
|
||||
});
|
||||
|
||||
test('When table does not have horizontal scroll', function() {
|
||||
tf.destroy();
|
||||
tf = new TableFilter('demo', {
|
||||
base_path: '../dist/tablefilter/',
|
||||
help_instructions: true,
|
||||
responsive: false
|
||||
});
|
||||
tf.init();
|
||||
var help = tf.feature('help');
|
||||
|
||||
// act
|
||||
help.toggle();
|
||||
|
||||
// assert
|
||||
deepEqual(help.cont.style.left, '', 'Pop-up container position');
|
||||
});
|
||||
|
||||
module('Tear-down');
|
||||
test('can destroy Help UI component', function() {
|
||||
// act
|
||||
tf.destroy();
|
||||
var help = tf.feature('help');
|
||||
|
||||
// assert
|
||||
deepEqual(help.btn, null, 'Help button removed');
|
||||
deepEqual(help.cont, null, 'Help pop-up container removed');
|
||||
});
|
||||
Loading…
Reference in a new issue