1
0
Fork 0
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:
Max Guglielmi 2015-07-04 18:49:30 +10:00
parent a9d7fa7c76
commit ad6812391b
30 changed files with 70 additions and 81 deletions

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

File diff suppressed because one or more lines are too long

View file

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

View file

@ -24,7 +24,7 @@ export class Help{
'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>||</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/' +
'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>&copy;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';
}

View file

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

View file

@ -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;
}
/*** ***/

View file

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

View file

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

View file

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

View file

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

View file

@ -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()
]