deblan-mirror/TableFilter
1
0
Fork 0
mirror of https://github.com/koalyptus/TableFilter.git synced 2024-05-17 22:06:41 +02:00
Code Issues Releases Wiki Activity

Fixed columns visibility styling under IE

Browse source
This commit is contained in:
Max Guglielmi 2015-07-04 18:49:30 +10:00
parent a9d7fa7c76
commit ad6812391b
30 changed files with 70 additions and 81 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
Gruntfile.js
View file

@ -108,7 +108,7 @@ module.exports = function (grunt) {
watch: { watch: {
app: { app: {
files: ['src/**/*'], files: ['src/**/*', 'static/style/**/*'],
tasks: ['dev'], tasks: ['dev'],
options: { options: {
spawn: false spawn: false

2
demos/auto-filter.html
View file

@ -6,7 +6,7 @@
<style type="text/css"> <style type="text/css">
body{ body{
font-family: Helvetica, arial, nimbussansl, liberationsans, freesans, font-family: Helvetica, arial, nimbussansl, liberationsans, freesans,
clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol"; clean, sans-serif;
padding: 0 1em; padding: 0 1em;
} }
pre{ pre{

9
demos/columns-visibility.html
View file

@ -6,7 +6,7 @@
<style type="text/css"> <style type="text/css">
body{ body{
font-family: Helvetica, arial, nimbussansl, liberationsans, freesans, font-family: Helvetica, arial, nimbussansl, liberationsans, freesans,
clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol"; clean, sans-serif;
padding: 0 1em; padding: 0 1em;
} }
pre{ pre{
@ -25,6 +25,7 @@
padding: 1em; padding: 1em;
} }
</style> </style>
<link rel="stylesheet" type="text/css" href="../dist/tablefilter/style/colsVisibility.css">
</head> </head>
<body> <body>
<h1>TableFilter v0.0.0</h1> <h1>TableFilter v0.0.0</h1>
@ -35,11 +36,11 @@
<p> <p>
<button onclick="javascript: <button onclick="javascript:
tf.getExtension('colsVisibility').hideCol(0);">Hide Column 0</button> tf.extension('colsVisibility').hideCol(0);">Hide Column 0</button>
<button onclick="javascript: <button onclick="javascript:
tf.getExtension('colsVisibility').showCol(0);">Show Column 0</button> tf.extension('colsVisibility').showCol(0);">Show Column 0</button>
<button onclick="javascript: <button onclick="javascript:
tf.getExtension('colsVisibility').toggleCol(2);">Toggle Column 2</button> tf.extension('colsVisibility').toggleCol(2);">Toggle Column 2</button>
</p> </p>
<pre></pre> <pre></pre>

2
demos/data-types.html
View file

@ -6,7 +6,7 @@
<style type="text/css"> <style type="text/css">
body{ body{
font-family: Helvetica, arial, nimbussansl, liberationsans, freesans, font-family: Helvetica, arial, nimbussansl, liberationsans, freesans,
clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol"; clean, sans-serif;
padding: 0 1em; padding: 0 1em;
} }
pre{ pre{

2
demos/demo.html
View file

@ -6,7 +6,7 @@
<style type="text/css"> <style type="text/css">
body{ body{
font-family: Helvetica, arial, nimbussansl, liberationsans, freesans, font-family: Helvetica, arial, nimbussansl, liberationsans, freesans,
clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol"; clean, sans-serif;
padding: 0 1em; padding: 0 1em;
} }
pre{ pre{

2
demos/external-filters-visibility-commad.html
View file

@ -6,7 +6,7 @@
<style type="text/css"> <style type="text/css">
body{ body{
font-family: Helvetica, arial, nimbussansl, liberationsans, freesans, font-family: Helvetica, arial, nimbussansl, liberationsans, freesans,
clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol"; clean, sans-serif;
padding: 0 1em; padding: 0 1em;
} }
pre{ pre{

2
demos/external-filters.html
View file

@ -6,7 +6,7 @@
<style type="text/css"> <style type="text/css">
body{ body{
font-family: Helvetica, arial, nimbussansl, liberationsans, freesans, font-family: Helvetica, arial, nimbussansl, liberationsans, freesans,
clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol"; clean, sans-serif;
padding: 0 1em; padding: 0 1em;
} }
pre{ pre{

2
demos/filter-images.html
View file

@ -6,7 +6,7 @@
<style type="text/css"> <style type="text/css">
body{ body{
font-family: Helvetica, arial, nimbussansl, liberationsans, freesans, font-family: Helvetica, arial, nimbussansl, liberationsans, freesans,
clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol"; clean, sans-serif;
padding: 0 1em; padding: 0 1em;
} }
pre{ pre{

2
demos/filters-visibility.html
View file

@ -6,7 +6,7 @@
<style type="text/css"> <style type="text/css">
body{ body{
font-family: Helvetica, arial, nimbussansl, liberationsans, freesans, font-family: Helvetica, arial, nimbussansl, liberationsans, freesans,
clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol"; clean, sans-serif;
padding: 0 1em; padding: 0 1em;
} }
pre{ pre{

2
demos/grid-layout.html
View file

@ -6,7 +6,7 @@
<style type="text/css"> <style type="text/css">
body{ body{
font-family: Helvetica, arial, nimbussansl, liberationsans, freesans, font-family: Helvetica, arial, nimbussansl, liberationsans, freesans,
clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol"; clean, sans-serif;
padding: 0 1em; padding: 0 1em;
} }
pre{ pre{

2
demos/grouped-headers.html
View file

@ -6,7 +6,7 @@
<style type="text/css"> <style type="text/css">
body{ body{
font-family: Helvetica, arial, nimbussansl, liberationsans, freesans, font-family: Helvetica, arial, nimbussansl, liberationsans, freesans,
clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol"; clean, sans-serif;
padding: 0 1em; padding: 0 1em;
} }
pre{ pre{

2
demos/linked-filters-disabled.html
View file

@ -6,7 +6,7 @@
<style type="text/css"> <style type="text/css">
body{ body{
font-family: Helvetica, arial, nimbussansl, liberationsans, freesans, font-family: Helvetica, arial, nimbussansl, liberationsans, freesans,
clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol"; clean, sans-serif;
padding: 0 1em; padding: 0 1em;
} }
pre{ pre{

2
demos/linked-filters.html
View file

@ -6,7 +6,7 @@
<style type="text/css"> <style type="text/css">
body{ body{
font-family: Helvetica, arial, nimbussansl, liberationsans, freesans, font-family: Helvetica, arial, nimbussansl, liberationsans, freesans,
clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol"; clean, sans-serif;
padding: 0 1em; padding: 0 1em;
} }
pre{ pre{

2
demos/load-filters-on-demand.html
View file

@ -6,7 +6,7 @@
<style type="text/css"> <style type="text/css">
body{ body{
font-family: Helvetica, arial, nimbussansl, liberationsans, freesans, font-family: Helvetica, arial, nimbussansl, liberationsans, freesans,
clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol"; clean, sans-serif;
padding: 0 1em; padding: 0 1em;
} }
pre{ pre{

2
demos/pagination.html
View file

@ -6,7 +6,7 @@
<style type="text/css"> <style type="text/css">
body{ body{
font-family: Helvetica, arial, nimbussansl, liberationsans, freesans, font-family: Helvetica, arial, nimbussansl, liberationsans, freesans,
clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol"; clean, sans-serif;
padding: 0 1em; padding: 0 1em;
} }
pre{ pre{

2
demos/requirejs-dev.html
View file

@ -6,7 +6,7 @@
<style type="text/css"> <style type="text/css">
body{ body{
font-family: Helvetica, arial, nimbussansl, liberationsans, freesans, font-family: Helvetica, arial, nimbussansl, liberationsans, freesans,
clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol"; clean, sans-serif;
padding: 0 1em; padding: 0 1em;
} }
pre{ pre{

2
demos/requirejs.html
View file

@ -6,7 +6,7 @@
<style type="text/css"> <style type="text/css">
body{ body{
font-family: Helvetica, arial, nimbussansl, liberationsans, freesans, font-family: Helvetica, arial, nimbussansl, liberationsans, freesans,
clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol"; clean, sans-serif;
padding: 0 1em; padding: 0 1em;
} }
pre{ pre{

2
demos/theme-roller.html
View file

@ -6,7 +6,7 @@
<style type="text/css"> <style type="text/css">
body{ body{
font-family: Helvetica, arial, nimbussansl, liberationsans, freesans, font-family: Helvetica, arial, nimbussansl, liberationsans, freesans,
clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol"; clean, sans-serif;
padding: 0 1em; padding: 0 1em;
} }
pre{ pre{

9
dist/tablefilter/style/colsVisibility.css vendored
View file

@ -21,19 +21,14 @@ div.colVisCont{
margin:18px 0 0 0; z-index:10000; margin:18px 0 0 0; z-index:10000;
padding:10px 10px 10px 10px; padding:10px 10px 10px 10px;
text-align:left; font-size:12px; text-align:left; font-size:12px;
border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
box-shadow:3px 3px 2px #888; box-shadow:3px 3px 2px #888;
-moz-box-shadow:3px 3px 2px #888;
-webkit-box-shadow:3px 3px 2px #888;
} }
div.colVisCont p{ margin:6px auto 6px auto; } div.colVisCont p{ margin:6px auto 6px auto; }
ul.cols_checklist{ padding:0; margin:0; list-style: none; } ul.cols_checklist{ padding:0; margin:0; list-style: none; }
li.cols_checklist_item{ /*check list item*/ li.cols_checklist_item{ /*check list item*/
padding:1px; margin:0; font-size:11px; padding:4px;
border-bottom:1px solid #ccc; margin:0;
} }
li.cols_checklist_item:hover{ li.cols_checklist_item:hover{
background-color:#335EA8; background-color:#335EA8;

17
dist/tablefilter/style/tablefilter.css vendored
View file

@ -186,22 +186,23 @@ div.cont{ /*table container div*/
div.head{ width:auto; overflow:hidden; } div.head{ width:auto; overflow:hidden; }
/* Help elements */ /* Help elements */
.helpBtn{ margin:0 5px 0 5px; padding: 2px 4px 2px 4px; border-left:1px solid #ccc; border-right:1px solid #ccc; } /* help button */ .helpBtn{
margin:0 5px 0 5px;
padding: 2px 4px 2px 4px;
border-left:1px solid #ccc;
border-right:1px solid #ccc;
} /* help button */
div.helpCont{ /* help container */ div.helpCont{ /* help container */
position:absolute; display:none; position:absolute; display:none;
max-width:300px; overflow:auto; max-width:300px; overflow:auto;
padding:7px 7px 7px 7px; margin:15px 0; padding:10px; margin:15px 0;
border:1px solid #CCC; line-height:19px; border:1px solid #CCC; line-height:20px;
font-size:12px; color:#333; font-size:12px; color:#333;
background:#fff; text-align:left; background:#fff; text-align:left;
border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
box-shadow:3px 3px 2px #888; box-shadow:3px 3px 2px #888;
-moz-box-shadow:3px 3px 2px #888;
-webkit-box-shadow:3px 3px 2px #888;
} }
div.helpCont a{ color:#cc0000; text-decoration:underline; font-weight:normal; } div.helpCont a{ color:#cc0000; text-decoration:underline; font-weight:normal; }
div.helpCont a.close{ color:#333; text-decoration:none; font-weight:bold; }
div.helpCont a:hover{ text-decoration:none; } div.helpCont a:hover{ text-decoration:none; }
div.helpCont hr{ border:1px solid #ccc; } div.helpCont hr{ border:1px solid #ccc; }
div.helpFooter{ margin:10px 0 0 0; } div.helpFooter{ margin:10px 0 0 0; }

11
dist/tablefilter/tablefilter.js vendored
View file

File diff suppressed because one or more lines are too long

2
dist/tablefilter/tf-0019047e8c6e8f3fb286.js → dist/tablefilter/tf-1.js vendored
View file

@ -1,6 +1,6 @@
/** /**
* TableFilter v0.0.0 by Max Guglielmi * TableFilter v0.0.0 by Max Guglielmi
* build date: 2015-07-03T07:38:53.819Z * build date: 2015-07-04T08:46:42.412Z
* MIT License * MIT License
*/ */

16
src/modules/help.js
View file

@ -24,7 +24,7 @@ export class Help{
'operators: <br /><b>&lt;</b>, <b>&lt;=</b>, <b>&gt;</b>, ' + 'operators: <br /><b>&lt;</b>, <b>&lt;=</b>, <b>&gt;</b>, ' +
'<b>&gt;=</b>, <b>=</b>, <b>*</b>, <b>!</b>, <b>{</b>, <b>}</b>, ' + '<b>&gt;=</b>, <b>=</b>, <b>*</b>, <b>!</b>, <b>{</b>, <b>}</b>, ' +
'<b>||</b>,<b>&amp;&amp;</b>, <b>[empty]</b>, <b>[nonempty]</b>, ' + '<b>||</b>,<b>&amp;&amp;</b>, <b>[empty]</b>, <b>[nonempty]</b>, ' +
'<b>rgx:</b><br/> These operators are described here:<br/>' + '<b>rgx:</b><br/> Learn more:<br/>' +
'<a href="https://github.com/koalyptus/TableFilter/wiki/' + '<a href="https://github.com/koalyptus/TableFilter/wiki/' +
'4.-Filter-operators" target="_blank">https://github.com/' + '4.-Filter-operators" target="_blank">https://github.com/' +
'koalyptus/TableFilter/wiki/4.-Filter-operators</a><hr/>'; 'koalyptus/TableFilter/wiki/4.-Filter-operators</a><hr/>';
@ -49,7 +49,7 @@ export class Help{
' target="_blank">https://github.com/koalyptus/TableFilter/</a>' + ' target="_blank">https://github.com/koalyptus/TableFilter/</a>' +
'<br/><span>&copy;2015-'+ tf.year +' Max Guglielmi.</span>' + '<br/><span>&copy;2015-'+ tf.year +' Max Guglielmi.</span>' +
'<div align="center" style="margin-top:8px;">' + '<div align="center" style="margin-top:8px;">' +
'<a href="javascript:void(0);">Close</a></div></div>'; '<a href="javascript:void(0);" class="close">Close</a></div></div>';
//id prefix for help elements //id prefix for help elements
this.prfxHelpSpan = 'helpSpan_'; this.prfxHelpSpan = 'helpSpan_';
@ -124,13 +124,13 @@ export class Help{
} }
var divDisplay = this.cont.style.display; var divDisplay = this.cont.style.display;
if(divDisplay==='' || divDisplay==='none'){ if(divDisplay==='' || divDisplay==='none'){
this.cont.style.display = 'block'; this.cont.style.display = 'inline';
// TODO: use CSS instead for element positioning // TODO: use CSS instead for element positioning
var btnLeft = Dom.position(this.btn).left; // var btnLeft = Dom.position(this.btn).left;
if(!this.contTgtId){ // if(!this.contTgtId){
this.cont.style.left = // this.cont.style.left =
(btnLeft - this.cont.clientWidth + 25) + 'px'; // (btnLeft - this.cont.clientWidth + 25) + 'px';
} // }
} else { } else {
this.cont.style.display = 'none'; this.cont.style.display = 'none';
} }

8
src/modules/statusBar.js
View file

@ -1,6 +1,6 @@
import Dom from '../dom'; import Dom from '../dom';
import Types from '../types'; import Types from '../types';
import Helpers from '../helpers'; // import Helpers from '../helpers';
var global = window; var global = window;
@ -71,9 +71,9 @@ export class StatusBar{
tf.lDiv : Dom.id(this.statusBarTgtId); tf.lDiv : Dom.id(this.statusBarTgtId);
// TODO: use alternative to outerHTML // TODO: use alternative to outerHTML
if(this.statusBarDiv && Helpers.isIE()){ // if(this.statusBarDiv && Helpers.isIE()){
this.statusBarDiv.outerHTML = ''; // this.statusBarDiv.outerHTML = '';
} // }
//default container: 'lDiv' //default container: 'lDiv'
if(!this.statusBarTgtId){ if(!this.statusBarTgtId){

7
src/tablefilter.js
View file

@ -7,7 +7,7 @@ import Arr from './array';
import DateHelper from './date'; import DateHelper from './date';
import Helpers from './helpers'; import Helpers from './helpers';
// Modules // Features
import {Store} from './modules/store'; import {Store} from './modules/store';
import {GridLayout} from './modules/gridLayout'; import {GridLayout} from './modules/gridLayout';
import {Loader} from './modules/loader'; import {Loader} from './modules/loader';
@ -56,8 +56,7 @@ export class TableFilter{
if(!this.tbl || this.tbl.nodeName != 'TABLE' || this.getRowsNb() === 0){ if(!this.tbl || this.tbl.nodeName != 'TABLE' || this.getRowsNb() === 0){
throw new Error( throw new Error(
'Could not instantiate TableFilter class: ' + 'Could not instantiate TableFilter: HTML table not found.');
'HTML table not found.');
} }
if(arguments.length > 1){ if(arguments.length > 1){
@ -103,8 +102,6 @@ export class TableFilter{
this.gridLayout = Boolean(f.grid_layout); this.gridLayout = Boolean(f.grid_layout);
this.sourceTblHtml = null; this.sourceTblHtml = null;
if(this.gridLayout){ if(this.gridLayout){
//Firefox does not support outerHTML property...
// if(this.tbl.outerHTML===undefined){ setOuterHtml(); }
this.sourceTblHtml = this.tbl.outerHTML; this.sourceTblHtml = this.tbl.outerHTML;
} }
/*** ***/ /*** ***/

2
static/partials/style.html
View file

@ -2,7 +2,7 @@
<style type="text/css"> <style type="text/css">
body{ body{
font-family: Helvetica, arial, nimbussansl, liberationsans, freesans, font-family: Helvetica, arial, nimbussansl, liberationsans, freesans,
clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol"; clean, sans-serif;
padding: 0 1em; padding: 0 1em;
} }
pre{ pre{

9
static/style/colsVisibility.css
View file

@ -21,19 +21,14 @@ div.colVisCont{
margin:18px 0 0 0; z-index:10000; margin:18px 0 0 0; z-index:10000;
padding:10px 10px 10px 10px; padding:10px 10px 10px 10px;
text-align:left; font-size:12px; text-align:left; font-size:12px;
border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
box-shadow:3px 3px 2px #888; box-shadow:3px 3px 2px #888;
-moz-box-shadow:3px 3px 2px #888;
-webkit-box-shadow:3px 3px 2px #888;
} }
div.colVisCont p{ margin:6px auto 6px auto; } div.colVisCont p{ margin:6px auto 6px auto; }
ul.cols_checklist{ padding:0; margin:0; list-style: none; } ul.cols_checklist{ padding:0; margin:0; list-style: none; }
li.cols_checklist_item{ /*check list item*/ li.cols_checklist_item{ /*check list item*/
padding:1px; margin:0; font-size:11px; padding:4px;
border-bottom:1px solid #ccc; margin:0;
} }
li.cols_checklist_item:hover{ li.cols_checklist_item:hover{
background-color:#335EA8; background-color:#335EA8;

17
static/style/tablefilter.css
View file

@ -186,22 +186,23 @@ div.cont{ /*table container div*/
div.head{ width:auto; overflow:hidden; } div.head{ width:auto; overflow:hidden; }
/* Help elements */ /* Help elements */
.helpBtn{ margin:0 5px 0 5px; padding: 2px 4px 2px 4px; border-left:1px solid #ccc; border-right:1px solid #ccc; } /* help button */ .helpBtn{
margin:0 5px 0 5px;
padding: 2px 4px 2px 4px;
border-left:1px solid #ccc;
border-right:1px solid #ccc;
} /* help button */
div.helpCont{ /* help container */ div.helpCont{ /* help container */
position:absolute; display:none; position:absolute; display:none;
max-width:300px; overflow:auto; max-width:300px; overflow:auto;
padding:7px 7px 7px 7px; margin:15px 0; padding:10px; margin:15px 0;
border:1px solid #CCC; line-height:19px; border:1px solid #CCC; line-height:20px;
font-size:12px; color:#333; font-size:12px; color:#333;
background:#fff; text-align:left; background:#fff; text-align:left;
border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
box-shadow:3px 3px 2px #888; box-shadow:3px 3px 2px #888;
-moz-box-shadow:3px 3px 2px #888;
-webkit-box-shadow:3px 3px 2px #888;
} }
div.helpCont a{ color:#cc0000; text-decoration:underline; font-weight:normal; } div.helpCont a{ color:#cc0000; text-decoration:underline; font-weight:normal; }
div.helpCont a.close{ color:#333; text-decoration:none; font-weight:bold; }
div.helpCont a:hover{ text-decoration:none; } div.helpCont a:hover{ text-decoration:none; }
div.helpCont hr{ border:1px solid #ccc; } div.helpCont hr{ border:1px solid #ccc; }
div.helpFooter{ margin:10px 0 0 0; } div.helpFooter{ margin:10px 0 0 0; }

7
static/templates/columns-visibility.html
View file

@ -3,6 +3,7 @@
<head> <head>
<title>{NAME} v{VERSION} - Columns Visibility Extension Demo</title> <title>{NAME} v{VERSION} - Columns Visibility Extension Demo</title>
<!-- @import partials/style.html --> <!-- @import partials/style.html -->
<link rel="stylesheet" type="text/css" href="../dist/tablefilter/style/colsVisibility.css">
</head> </head>
<body> <body>
<h1>{NAME} v{VERSION}</h1> <h1>{NAME} v{VERSION}</h1>
@ -13,11 +14,11 @@
<p> <p>
<button onclick="javascript: <button onclick="javascript:
tf.getExtension('colsVisibility').hideCol(0);">Hide Column 0</button> tf.extension('colsVisibility').hideCol(0);">Hide Column 0</button>
<button onclick="javascript: <button onclick="javascript:
tf.getExtension('colsVisibility').showCol(0);">Show Column 0</button> tf.extension('colsVisibility').showCol(0);">Show Column 0</button>
<button onclick="javascript: <button onclick="javascript:
tf.getExtension('colsVisibility').toggleCol(2);">Toggle Column 2</button> tf.extension('colsVisibility').toggleCol(2);">Toggle Column 2</button>
</p> </p>
<!-- @import partials/pre.html --> <!-- @import partials/pre.html -->
<!-- @import partials/countries-by-continent.html --> <!-- @import partials/countries-by-continent.html -->

3
webpack.config.js
View file

@ -13,7 +13,7 @@ module.exports = {
path: path.join(__dirname, '/dist/tablefilter'), path: path.join(__dirname, '/dist/tablefilter'),
filename: 'tablefilter.js', filename: 'tablefilter.js',
// chunkFilename: '[name]-[chunkhash].js', // chunkFilename: '[name]-[chunkhash].js',
chunkFilename: 'tf-[chunkhash].js', chunkFilename: 'tf-[name].js',
libraryTarget: 'umd' libraryTarget: 'umd'
}, },
resolve: { resolve: {
@ -68,7 +68,6 @@ module.exports = {
devtool: 'sourcemap', devtool: 'sourcemap',
debug: true, debug: true,
plugins: [ plugins: [
new Clean(['dist']),
new webpack.optimize.DedupePlugin(), new webpack.optimize.DedupePlugin(),
new StringReplacePlugin() new StringReplacePlugin()
] ]