mirror of
https://github.com/koalyptus/TableFilter.git
synced 2024-05-02 22:53:17 +02:00
Fixed columns visibility styling under IE
This commit is contained in:
parent
a9d7fa7c76
commit
ad6812391b
|
@ -108,7 +108,7 @@ module.exports = function (grunt) {
|
|||
|
||||
watch: {
|
||||
app: {
|
||||
files: ['src/**/*'],
|
||||
files: ['src/**/*', 'static/style/**/*'],
|
||||
tasks: ['dev'],
|
||||
options: {
|
||||
spawn: false
|
||||
|
|
|
@ -6,7 +6,7 @@
|
|||
<style type="text/css">
|
||||
body{
|
||||
font-family: Helvetica, arial, nimbussansl, liberationsans, freesans,
|
||||
clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
clean, sans-serif;
|
||||
padding: 0 1em;
|
||||
}
|
||||
pre{
|
||||
|
|
|
@ -6,7 +6,7 @@
|
|||
<style type="text/css">
|
||||
body{
|
||||
font-family: Helvetica, arial, nimbussansl, liberationsans, freesans,
|
||||
clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
clean, sans-serif;
|
||||
padding: 0 1em;
|
||||
}
|
||||
pre{
|
||||
|
@ -25,6 +25,7 @@
|
|||
padding: 1em;
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" type="text/css" href="../dist/tablefilter/style/colsVisibility.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>TableFilter v0.0.0</h1>
|
||||
|
@ -35,11 +36,11 @@
|
|||
|
||||
<p>
|
||||
<button onclick="javascript:
|
||||
tf.getExtension('colsVisibility').hideCol(0);">Hide Column 0</button>
|
||||
tf.extension('colsVisibility').hideCol(0);">Hide Column 0</button>
|
||||
<button onclick="javascript:
|
||||
tf.getExtension('colsVisibility').showCol(0);">Show Column 0</button>
|
||||
tf.extension('colsVisibility').showCol(0);">Show Column 0</button>
|
||||
<button onclick="javascript:
|
||||
tf.getExtension('colsVisibility').toggleCol(2);">Toggle Column 2</button>
|
||||
tf.extension('colsVisibility').toggleCol(2);">Toggle Column 2</button>
|
||||
</p>
|
||||
<pre></pre>
|
||||
|
||||
|
|
|
@ -6,7 +6,7 @@
|
|||
<style type="text/css">
|
||||
body{
|
||||
font-family: Helvetica, arial, nimbussansl, liberationsans, freesans,
|
||||
clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
clean, sans-serif;
|
||||
padding: 0 1em;
|
||||
}
|
||||
pre{
|
||||
|
|
|
@ -6,7 +6,7 @@
|
|||
<style type="text/css">
|
||||
body{
|
||||
font-family: Helvetica, arial, nimbussansl, liberationsans, freesans,
|
||||
clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
clean, sans-serif;
|
||||
padding: 0 1em;
|
||||
}
|
||||
pre{
|
||||
|
|
|
@ -6,7 +6,7 @@
|
|||
<style type="text/css">
|
||||
body{
|
||||
font-family: Helvetica, arial, nimbussansl, liberationsans, freesans,
|
||||
clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
clean, sans-serif;
|
||||
padding: 0 1em;
|
||||
}
|
||||
pre{
|
||||
|
|
|
@ -6,7 +6,7 @@
|
|||
<style type="text/css">
|
||||
body{
|
||||
font-family: Helvetica, arial, nimbussansl, liberationsans, freesans,
|
||||
clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
clean, sans-serif;
|
||||
padding: 0 1em;
|
||||
}
|
||||
pre{
|
||||
|
|
|
@ -6,7 +6,7 @@
|
|||
<style type="text/css">
|
||||
body{
|
||||
font-family: Helvetica, arial, nimbussansl, liberationsans, freesans,
|
||||
clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
clean, sans-serif;
|
||||
padding: 0 1em;
|
||||
}
|
||||
pre{
|
||||
|
|
|
@ -6,7 +6,7 @@
|
|||
<style type="text/css">
|
||||
body{
|
||||
font-family: Helvetica, arial, nimbussansl, liberationsans, freesans,
|
||||
clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
clean, sans-serif;
|
||||
padding: 0 1em;
|
||||
}
|
||||
pre{
|
||||
|
|
|
@ -6,7 +6,7 @@
|
|||
<style type="text/css">
|
||||
body{
|
||||
font-family: Helvetica, arial, nimbussansl, liberationsans, freesans,
|
||||
clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
clean, sans-serif;
|
||||
padding: 0 1em;
|
||||
}
|
||||
pre{
|
||||
|
|
|
@ -6,7 +6,7 @@
|
|||
<style type="text/css">
|
||||
body{
|
||||
font-family: Helvetica, arial, nimbussansl, liberationsans, freesans,
|
||||
clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
clean, sans-serif;
|
||||
padding: 0 1em;
|
||||
}
|
||||
pre{
|
||||
|
|
|
@ -6,7 +6,7 @@
|
|||
<style type="text/css">
|
||||
body{
|
||||
font-family: Helvetica, arial, nimbussansl, liberationsans, freesans,
|
||||
clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
clean, sans-serif;
|
||||
padding: 0 1em;
|
||||
}
|
||||
pre{
|
||||
|
|
|
@ -6,7 +6,7 @@
|
|||
<style type="text/css">
|
||||
body{
|
||||
font-family: Helvetica, arial, nimbussansl, liberationsans, freesans,
|
||||
clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
clean, sans-serif;
|
||||
padding: 0 1em;
|
||||
}
|
||||
pre{
|
||||
|
|
|
@ -6,7 +6,7 @@
|
|||
<style type="text/css">
|
||||
body{
|
||||
font-family: Helvetica, arial, nimbussansl, liberationsans, freesans,
|
||||
clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
clean, sans-serif;
|
||||
padding: 0 1em;
|
||||
}
|
||||
pre{
|
||||
|
|
|
@ -6,7 +6,7 @@
|
|||
<style type="text/css">
|
||||
body{
|
||||
font-family: Helvetica, arial, nimbussansl, liberationsans, freesans,
|
||||
clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
clean, sans-serif;
|
||||
padding: 0 1em;
|
||||
}
|
||||
pre{
|
||||
|
|
|
@ -6,7 +6,7 @@
|
|||
<style type="text/css">
|
||||
body{
|
||||
font-family: Helvetica, arial, nimbussansl, liberationsans, freesans,
|
||||
clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
clean, sans-serif;
|
||||
padding: 0 1em;
|
||||
}
|
||||
pre{
|
||||
|
|
|
@ -6,7 +6,7 @@
|
|||
<style type="text/css">
|
||||
body{
|
||||
font-family: Helvetica, arial, nimbussansl, liberationsans, freesans,
|
||||
clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
clean, sans-serif;
|
||||
padding: 0 1em;
|
||||
}
|
||||
pre{
|
||||
|
|
|
@ -6,7 +6,7 @@
|
|||
<style type="text/css">
|
||||
body{
|
||||
font-family: Helvetica, arial, nimbussansl, liberationsans, freesans,
|
||||
clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
clean, sans-serif;
|
||||
padding: 0 1em;
|
||||
}
|
||||
pre{
|
||||
|
|
9
dist/tablefilter/style/colsVisibility.css
vendored
9
dist/tablefilter/style/colsVisibility.css
vendored
|
@ -21,19 +21,14 @@ div.colVisCont{
|
|||
margin:18px 0 0 0; z-index:10000;
|
||||
padding:10px 10px 10px 10px;
|
||||
text-align:left; font-size:12px;
|
||||
border-radius:4px;
|
||||
-moz-border-radius:4px;
|
||||
-webkit-border-radius:4px;
|
||||
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; }
|
||||
|
||||
ul.cols_checklist{ padding:0; margin:0; list-style: none; }
|
||||
li.cols_checklist_item{ /*check list item*/
|
||||
padding:1px; margin:0; font-size:11px;
|
||||
border-bottom:1px solid #ccc;
|
||||
padding:4px;
|
||||
margin:0;
|
||||
}
|
||||
li.cols_checklist_item:hover{
|
||||
background-color:#335EA8;
|
||||
|
|
17
dist/tablefilter/style/tablefilter.css
vendored
17
dist/tablefilter/style/tablefilter.css
vendored
|
@ -186,22 +186,23 @@ div.cont{ /*table container div*/
|
|||
div.head{ width:auto; overflow:hidden; }
|
||||
|
||||
/* 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 */
|
||||
position:absolute; display:none;
|
||||
max-width:300px; overflow:auto;
|
||||
padding:7px 7px 7px 7px; margin:15px 0;
|
||||
border:1px solid #CCC; line-height:19px;
|
||||
padding:10px; margin:15px 0;
|
||||
border:1px solid #CCC; line-height:20px;
|
||||
font-size:12px; color:#333;
|
||||
background:#fff; text-align:left;
|
||||
border-radius:4px;
|
||||
-moz-border-radius:4px;
|
||||
-webkit-border-radius:4px;
|
||||
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.close{ color:#333; text-decoration:none; font-weight:bold; }
|
||||
div.helpCont a:hover{ text-decoration:none; }
|
||||
div.helpCont hr{ border:1px solid #ccc; }
|
||||
div.helpFooter{ margin:10px 0 0 0; }
|
||||
|
|
11
dist/tablefilter/tablefilter.js
vendored
11
dist/tablefilter/tablefilter.js
vendored
File diff suppressed because one or more lines are too long
|
@ -1,6 +1,6 @@
|
|||
/**
|
||||
* 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
|
||||
*/
|
||||
|
|
@ -24,7 +24,7 @@ export class Help{
|
|||
'operators: <br /><b><</b>, <b><=</b>, <b>></b>, ' +
|
||||
'<b>>=</b>, <b>=</b>, <b>*</b>, <b>!</b>, <b>{</b>, <b>}</b>, ' +
|
||||
'<b>||</b>,<b>&&</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/' +
|
||||
'4.-Filter-operators" target="_blank">https://github.com/' +
|
||||
'koalyptus/TableFilter/wiki/4.-Filter-operators</a><hr/>';
|
||||
|
@ -49,7 +49,7 @@ export class Help{
|
|||
' target="_blank">https://github.com/koalyptus/TableFilter/</a>' +
|
||||
'<br/><span>©2015-'+ tf.year +' Max Guglielmi.</span>' +
|
||||
'<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
|
||||
this.prfxHelpSpan = 'helpSpan_';
|
||||
|
@ -124,13 +124,13 @@ export class Help{
|
|||
}
|
||||
var divDisplay = this.cont.style.display;
|
||||
if(divDisplay==='' || divDisplay==='none'){
|
||||
this.cont.style.display = 'block';
|
||||
this.cont.style.display = 'inline';
|
||||
// TODO: use CSS instead for element positioning
|
||||
var btnLeft = Dom.position(this.btn).left;
|
||||
if(!this.contTgtId){
|
||||
this.cont.style.left =
|
||||
(btnLeft - this.cont.clientWidth + 25) + 'px';
|
||||
}
|
||||
// var btnLeft = Dom.position(this.btn).left;
|
||||
// if(!this.contTgtId){
|
||||
// this.cont.style.left =
|
||||
// (btnLeft - this.cont.clientWidth + 25) + 'px';
|
||||
// }
|
||||
} else {
|
||||
this.cont.style.display = 'none';
|
||||
}
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
import Dom from '../dom';
|
||||
import Types from '../types';
|
||||
import Helpers from '../helpers';
|
||||
// import Helpers from '../helpers';
|
||||
|
||||
var global = window;
|
||||
|
||||
|
@ -71,9 +71,9 @@ export class StatusBar{
|
|||
tf.lDiv : Dom.id(this.statusBarTgtId);
|
||||
|
||||
// TODO: use alternative to outerHTML
|
||||
if(this.statusBarDiv && Helpers.isIE()){
|
||||
this.statusBarDiv.outerHTML = '';
|
||||
}
|
||||
// if(this.statusBarDiv && Helpers.isIE()){
|
||||
// this.statusBarDiv.outerHTML = '';
|
||||
// }
|
||||
|
||||
//default container: 'lDiv'
|
||||
if(!this.statusBarTgtId){
|
||||
|
|
|
@ -7,7 +7,7 @@ import Arr from './array';
|
|||
import DateHelper from './date';
|
||||
import Helpers from './helpers';
|
||||
|
||||
// Modules
|
||||
// Features
|
||||
import {Store} from './modules/store';
|
||||
import {GridLayout} from './modules/gridLayout';
|
||||
import {Loader} from './modules/loader';
|
||||
|
@ -56,8 +56,7 @@ export class TableFilter{
|
|||
|
||||
if(!this.tbl || this.tbl.nodeName != 'TABLE' || this.getRowsNb() === 0){
|
||||
throw new Error(
|
||||
'Could not instantiate TableFilter class: ' +
|
||||
'HTML table not found.');
|
||||
'Could not instantiate TableFilter: HTML table not found.');
|
||||
}
|
||||
|
||||
if(arguments.length > 1){
|
||||
|
@ -103,8 +102,6 @@ export class TableFilter{
|
|||
this.gridLayout = Boolean(f.grid_layout);
|
||||
this.sourceTblHtml = null;
|
||||
if(this.gridLayout){
|
||||
//Firefox does not support outerHTML property...
|
||||
// if(this.tbl.outerHTML===undefined){ setOuterHtml(); }
|
||||
this.sourceTblHtml = this.tbl.outerHTML;
|
||||
}
|
||||
/*** ***/
|
||||
|
|
|
@ -2,7 +2,7 @@
|
|||
<style type="text/css">
|
||||
body{
|
||||
font-family: Helvetica, arial, nimbussansl, liberationsans, freesans,
|
||||
clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
clean, sans-serif;
|
||||
padding: 0 1em;
|
||||
}
|
||||
pre{
|
||||
|
|
|
@ -21,19 +21,14 @@ div.colVisCont{
|
|||
margin:18px 0 0 0; z-index:10000;
|
||||
padding:10px 10px 10px 10px;
|
||||
text-align:left; font-size:12px;
|
||||
border-radius:4px;
|
||||
-moz-border-radius:4px;
|
||||
-webkit-border-radius:4px;
|
||||
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; }
|
||||
|
||||
ul.cols_checklist{ padding:0; margin:0; list-style: none; }
|
||||
li.cols_checklist_item{ /*check list item*/
|
||||
padding:1px; margin:0; font-size:11px;
|
||||
border-bottom:1px solid #ccc;
|
||||
padding:4px;
|
||||
margin:0;
|
||||
}
|
||||
li.cols_checklist_item:hover{
|
||||
background-color:#335EA8;
|
||||
|
|
|
@ -186,22 +186,23 @@ div.cont{ /*table container div*/
|
|||
div.head{ width:auto; overflow:hidden; }
|
||||
|
||||
/* 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 */
|
||||
position:absolute; display:none;
|
||||
max-width:300px; overflow:auto;
|
||||
padding:7px 7px 7px 7px; margin:15px 0;
|
||||
border:1px solid #CCC; line-height:19px;
|
||||
padding:10px; margin:15px 0;
|
||||
border:1px solid #CCC; line-height:20px;
|
||||
font-size:12px; color:#333;
|
||||
background:#fff; text-align:left;
|
||||
border-radius:4px;
|
||||
-moz-border-radius:4px;
|
||||
-webkit-border-radius:4px;
|
||||
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.close{ color:#333; text-decoration:none; font-weight:bold; }
|
||||
div.helpCont a:hover{ text-decoration:none; }
|
||||
div.helpCont hr{ border:1px solid #ccc; }
|
||||
div.helpFooter{ margin:10px 0 0 0; }
|
||||
|
|
|
@ -3,6 +3,7 @@
|
|||
<head>
|
||||
<title>{NAME} v{VERSION} - Columns Visibility Extension Demo</title>
|
||||
<!-- @import partials/style.html -->
|
||||
<link rel="stylesheet" type="text/css" href="../dist/tablefilter/style/colsVisibility.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>{NAME} v{VERSION}</h1>
|
||||
|
@ -13,11 +14,11 @@
|
|||
|
||||
<p>
|
||||
<button onclick="javascript:
|
||||
tf.getExtension('colsVisibility').hideCol(0);">Hide Column 0</button>
|
||||
tf.extension('colsVisibility').hideCol(0);">Hide Column 0</button>
|
||||
<button onclick="javascript:
|
||||
tf.getExtension('colsVisibility').showCol(0);">Show Column 0</button>
|
||||
tf.extension('colsVisibility').showCol(0);">Show Column 0</button>
|
||||
<button onclick="javascript:
|
||||
tf.getExtension('colsVisibility').toggleCol(2);">Toggle Column 2</button>
|
||||
tf.extension('colsVisibility').toggleCol(2);">Toggle Column 2</button>
|
||||
</p>
|
||||
<!-- @import partials/pre.html -->
|
||||
<!-- @import partials/countries-by-continent.html -->
|
||||
|
|
|
@ -13,7 +13,7 @@ module.exports = {
|
|||
path: path.join(__dirname, '/dist/tablefilter'),
|
||||
filename: 'tablefilter.js',
|
||||
// chunkFilename: '[name]-[chunkhash].js',
|
||||
chunkFilename: 'tf-[chunkhash].js',
|
||||
chunkFilename: 'tf-[name].js',
|
||||
libraryTarget: 'umd'
|
||||
},
|
||||
resolve: {
|
||||
|
@ -68,7 +68,6 @@ module.exports = {
|
|||
devtool: 'sourcemap',
|
||||
debug: true,
|
||||
plugins: [
|
||||
new Clean(['dist']),
|
||||
new webpack.optimize.DedupePlugin(),
|
||||
new StringReplacePlugin()
|
||||
]
|
||||
|
|
Loading…
Reference in a new issue