1
0
Fork 0
mirror of https://github.com/koalyptus/TableFilter.git synced 2024-05-05 16:13:34 +02:00

Removed font css definitions from themes + fixed bug in alternate backgrounds

This commit is contained in:
Max Guglielmi 2015-06-27 20:52:40 +10:00
parent 1db14d73da
commit 06d787e24b
17 changed files with 61 additions and 2506 deletions

View file

@ -168,7 +168,7 @@ module.exports = function (grunt) {
grunt.registerTask('test', ['qunit:all']);
// Custom task running QUnit tests for specified files.
// Usage: grunt test-only:test.html,test-help.html
// Usage example: grunt test-only:test.html,test-help.html
grunt.registerTask('test-only',
'A task that runs only specified tests.',
function(tests) {

170
README.md
View file

@ -88,175 +88,5 @@ Find the complete documentation in the [WIKI](https://github.com/koalyptus/Table
[MIT](LICENSE.md)
<table>
<thead>
<tr>
<th>Property</th>
<th>Type</th>
<th>Description</th>
<th>Remarks</th>
<th>Example</th>
</tr>
</thead>
<tbody>
<tr>
<th>target_id</th>
<td>string</td>
<td>defines the id of the container element that will contain the link/button showing / hiding filters row (default - null)</td>
<td></td>
<td>
<code>var tfConfig = {
extensions: [{
name: 'filtersVisibility'
target_id: 'my_container_id'
}]
};</code>
</td>
</tr>
<tr>
<th>enable_icon</th>
<td>boolean</td>
<td>enable/disable default icon placed just before the link (default - true)</td>
<td></td>
<td>
<code>var tfConfig = {
extensions: [{
name: 'filtersVisibility'
target_id: 'my_container_id',
enable_icon: false
}]
};</code>
</td>
</tr>
<tr>
<th>btn_text</th>
<td>string</td>
<td>sets the text of the link showing / hiding filters row (default - '')</td>
<td></td>
<td>
<code>var tfConfig = {
extensions: [{
name: 'filtersVisibility'
target_id: 'my_container_id',
enable_icon: false,
btn_text: 'Filters'
}]
};</code>
</td>
</tr>
<tr>
<th>btn_filters_row_visibility_html</th>
<td>string</td>
<td>defines the HTML of the button showing / hiding filters row (default
* null) </td>
<td>note that the
<code>onclick</code> event is added automatically
to the html element and overwrites any eventual
<code>onclick</code>
attribute
</td>
<td>
<code>var tfConfig = { btn_filters_row_visibility_html: '&lt;button
class="myCssClass"&gt;Expand/collapse filters&lt;/button&gt;'
}</code>
</td>
</tr>
<tr>
<th>btn_filters_row_visibility_css_class</th>
<td>string</td>
<td>defines the css class of the link showing / hiding filters row&nbsp;(default
* 'btnExpClpFlt')</td>
<td></td>
<td>
<code>var tfConfig = { btn_filters_row_visibility_css_class: 'myClass'
}</code>
</td>
</tr>
<tr>
<th>filters_row_visibility_css_class</th>
<td>string</td>
<td>defines the css class of the container (default - 'expClpFlt')</td>
<td></td>
<td>
<code>var tfConfig = { filters_row_visibility_css_class: 'myClass'
}</code>
</td>
</tr>
<tr>
<th>filters_row_visibility_filters_table</th>
<td>string</td>
<td>If filters are in a separated table, this is the id of the filters
table (default - null)</td>
<td></td>
<td>
<code>var tfConfig = { filters_row_visibility_filters_table: 'myTableId'
}</code>
</td>
</tr>
<tr>
<th>filters_row_visibility_filters_index</th>
<td>number</td>
<td>Only with external filters, this tells the scripts which row contains
the filters (default - 1)</td>
<td></td>
<td>
<code>var tfConfig = { filters_row_visibility_filters_index: 1 }</code>
</td>
</tr>
<tr>
<th>filters_row_visibility_at_start</th>
<td>boolean</td>
<td>if set false it will hide the filters row at extension first load</td>
<td></td>
<td>
<code>var tfConfig = { filters_row_visibility_at_start: false }</code>
</td>
</tr>
<tr>
<th>on_before_filters_row_is_displayed</th>
<td>function</td>
<td>calls defined function before filters row is displayed</td>
<td></td>
<td>
<code>var tfConfig = { on_before_filters_row_is_displayed: function(o){
alert(o.id); }</code>
</td>
</tr>
<tr>
<th>on_after_filters_row_is_displayed</th>
<td>function</td>
<td>calls defined function after filters row is displayed</td>
<td></td>
<td>
<code>var tfConfig = { on_after_filters_row_is_displayed: function(o){
alert(o.id); }</code>
</td>
</tr>
<tr>
<th>on_before_filters_row_is_hidden</th>
<td>function</td>
<td>calls defined function before filters row is hidden</td>
<td></td>
<td>
<code>var tfConfig = { on_before_filters_row_is_hidden: function(o){
alert(o.id); }</code>
</td>
</tr>
<tr>
<th>on_after_filters_row_is_hidden</th>
<td>function</td>
<td>calls defined function after filters row is hidden</td>
<td></td>
<td>
<code>var tfConfig = { on_after_filters_row_is_hidden: function(o){
alert(o.id); }</code>
</td>
</tr>
</tbody>
</table>

File diff suppressed because one or more lines are too long

View file

@ -7,8 +7,6 @@
/* TABLE LAYOUT
=====================================================*/
table.TF{
/*font:normal 12px arial, tahoma, helvetica, sans-serif;*/
font:inherit;
border-spacing: 0;
border-top:1px solid #D0D0D0; border-left:1px solid #D0D0D0;
border-bottom:1px solid #ccc; border-right:1px solid #ccc;

View file

@ -1,18 +1,17 @@
/*====================================================
- HTML Table Filter Generator Default Theme
- Do not hesitate to edit classes below to
- Table Filter Default Theme
- Do not hesitate to edit classes below to
change theme appearance
=====================================================*/
/* TABLE LAYOUT
=====================================================*/
table.TF{
font:normal 12px arial, tahoma, helvetica, sans-serif !important;
border-left:1px solid #ccc !important; border-top:none !important;
border-right:none !important; border-bottom:none !important;
}
table.TF th{
background:#EBECEE url(images/bg_th.jpg) left top repeat-x !important;
background:#EBECEE url(images/bg_th.jpg) left top repeat-x !important;
border-bottom:1px solid #D0D0D0 !important; border-right:1px solid #D0D0D0 !important;
border-left:1px solid #fff !important; border-top:1px solid #fff !important;
padding:2px !important; color:#333 !important; height:25px !important;
@ -77,8 +76,8 @@ div.grd_tblCont table th, div.grd_headTblCont table th, div.grd_headTblCont tabl
border-left:1px solid #fff !important; border-top:1px solid #fff !important;
}
/* div containing left, middle and right divs */
.grd_inf{
background:#D7D7D7 url(images/bg_infDiv.jpg) 0 0 repeat-x !important;
.grd_inf{
background:#D7D7D7 url(images/bg_infDiv.jpg) 0 0 repeat-x !important;
border-top:1px solid #D0D0D0 !important; height:29px !important;
}
/*row bg alternating color*/

View file

@ -1,18 +1,17 @@
/*====================================================
- HTML Table Filter Generator Custom Theme
- Do not hesitate to edit classes below to
- Table Filter MyTheme Theme
- Do not hesitate to edit classes below to
change theme appearance
=====================================================*/
/* TABLE LAYOUT
=====================================================*/
table.TF{
font:13px "Trebuchet MS",Verdana,Helvetica,Arial,sans-serif !important;
border-left:1px dotted #81963B !important; border-top:none !important;
border-right:0 !important; border-bottom:none !important;
}
table.TF th{
background:#39424B url(images/bg_headers.jpg) left top repeat-x !important;;
background:#39424B url(images/bg_headers.jpg) left top repeat-x !important;;
border-bottom:0 !important; border-right:1px dotted #D0D0D0 !important;
border-left:0 !important; border-top:0 !important;
padding:0 4px 0 4px !important; color:#fff !important; height:35px !important;
@ -24,10 +23,10 @@ table.TF td{ border-bottom:1px dotted #81963B; border-right:1px dotted #81963B;
=====================================================*/
/* filter grid row appearance */
.fltrow{ background-color:#81963B !important; }
.fltrow th, .fltrow td{
.fltrow th, .fltrow td{
border-bottom:1px dotted #39424B !important; border-right:1px dotted #fff !important;
border-left:0 !important; border-top:0 !important;
padding:1px 3px 1px 3px !important;
border-left:0 !important; border-top:0 !important;
padding:1px 3px 1px 3px !important;
}
/* filter (input) appearance */
@ -84,7 +83,7 @@ div.grd_headTblCont{ background-color:#EBECEE !important; border-bottom:none !im
div.grd_tblCont table{ border-right:none !important; }
/* Headers */
div.grd_tblCont table th, div.grd_headTblCont table th{
background:transparent url(images/bg_headers.jpg) 0 0 repeat-x !important;;
background:transparent url(images/bg_headers.jpg) 0 0 repeat-x !important;;
border-bottom:0 !important; border-right:1px dotted #D0D0D0 !important;
border-left:0 !important; border-top:0 !important;
padding:0 4px 0 4px !important; color:#fff !important; height:35px !important;
@ -92,13 +91,13 @@ div.grd_tblCont table th, div.grd_headTblCont table th{
/* filters cells */
div.grd_headTblCont table td{
border-bottom:1px dotted #39424B !important; border-right:1px dotted #fff !important;
border-left:0 !important; border-top:0 !important;
border-left:0 !important; border-top:0 !important;
background-color:#81963B !important;
padding:1px 3px 1px 3px !important;
padding:1px 3px 1px 3px !important;
}
/* div containing left, middle and right divs */
.grd_inf{
/* div containing left, middle and right divs */
.grd_inf{
background:#f4f4f4 url(images/bg_infDiv.jpg) center bottom repeat-x !important;
border-top:1px solid #D0D0D0 !important; height:29px !important; padding-top:2px !important;
}

View file

@ -1,6 +1,6 @@
/*====================================================
- HTML Table Filter Generator SkyBlue Theme
- Do not hesitate to edit classes below to
- Table Filter SkyBlue Theme
- Do not hesitate to edit classes below to
change theme appearance
=====================================================*/
@ -8,7 +8,6 @@
=====================================================*/
table.TF{
padding:0; color:#000;
font:12px/13px "Trebuchet MS", Verdana, Helvetica, Arial, sans-serif !important;
border-right:1px solid #A4BED4;
border-top:1px solid #A4BED4;
border-left:1px solid #A4BED4;
@ -50,10 +49,10 @@ input.flt{ width:99% !important; }
}
div.tot, div.status{ border-right:0 !important; }
.helpBtn{
margin:0 5px 0 5px; padding: 2px 4px 2px 4px;
color:#004A6F !important; font-size:13px;
border:1px solid transparent !important;
.helpBtn{
margin:0 5px 0 5px; padding: 2px 4px 2px 4px;
color:#004A6F !important; font-size:13px;
border:1px solid transparent !important;
} /* help button */
.helpBtn:hover{ background-color:#FFE4AB; border:1px solid #FFB552 !important; text-decoration:none; }
div.helpCont{ color:inherit !important: }
@ -110,7 +109,7 @@ div.grd_tblCont table td{
}
/* div containing left, middle and right divs */
.grd_inf{
.grd_inf{
background:#D9EAED !important;
height:25px; color:#004A6F;
border-top:1px solid #99CCCC !important;
@ -143,6 +142,6 @@ div.grd_Cont .odd{ background-color:#E3EFFF; }
.ezSelectedRow{ background-color:#FFE4AB !important; color:inherit; }
.ezActiveCell{
background-color:#fff !important;
color:#000 !important; font-weight:bold;
color:#000 !important; font-weight:bold;
}
.ezETSelectedCell{ background-color:#FFF !important; font-weight:bold; color:rgb(0,0,0)!important; }

View file

@ -1285,7 +1285,7 @@ return /******/ (function(modules) { // webpackBootstrap
}
if (!this.isImported(path, 'link')) {
this['import'](_name, path, null, 'link');
this['import']('tf-' + _name, path, null, 'link');
}
}
}
@ -2374,7 +2374,7 @@ return /******/ (function(modules) { // webpackBootstrap
*/
value: function validateRow(rowIndex, isValid) {
var row = this.tbl.rows[rowIndex];
if (!row || _Str2['default'].lower(typeof isValid) !== 'boolean') {
if (!row || typeof isValid !== 'boolean') {
return;
}
@ -2860,9 +2860,6 @@ return /******/ (function(modules) { // webpackBootstrap
* @return {Array} List of row indexes
*/
value: function getValidRows(reCalc) {
if (!this._hasGrid) {
return;
}
if (!reCalc) {
return this.validRowsIndex;
}
@ -2890,9 +2887,6 @@ return /******/ (function(modules) { // webpackBootstrap
* @return {Number}
*/
value: function getFiltersRowIndex() {
if (!this._hasGrid) {
return;
}
return this.filtersRowIndex;
}
}, {
@ -2903,9 +2897,6 @@ return /******/ (function(modules) { // webpackBootstrap
* @return {Number}
*/
value: function getHeadersRowIndex() {
if (!this._hasGrid) {
return;
}
return this.headersRow;
}
}, {
@ -2917,9 +2908,6 @@ return /******/ (function(modules) { // webpackBootstrap
* @return {Number}
*/
value: function getStartRowIndex() {
if (!this._hasGrid) {
return;
}
return this.refRow;
}
}, {
@ -3411,7 +3399,7 @@ return /******/ (function(modules) { // webpackBootstrap
exports['default'] = {
/**
* Check if argument exists and is an object
* Check if argument is an object or a global object
* @param {String or Object} v
* @return {Boolean}
*/
@ -7099,8 +7087,9 @@ return /******/ (function(modules) { // webpackBootstrap
return;
}
var rows = this.tf.tbl.rows;
var i = !idx ? rowIdx : idx;
var i = isNaN(idx) ? rowIdx : idx;
this.removeRowBg(rowIdx);
_Dom2['default'].addClass(rows[rowIdx], i % 2 ? this.evenCss : this.oddCss);
}
}, {

View file

@ -388,7 +388,7 @@ var THEMES = {
};
function changeTheme(name){
var styleId = 'default';
var styleId = 'tf-default';
var stylesheet = document.getElementById(styleId);
if(!stylesheet){
tf.import(styleId, THEMES[name], null, 'link');

View file

@ -51,8 +51,9 @@ export class AlternateRows{
return;
}
var rows = this.tf.tbl.rows;
var i = !idx ? rowIdx : idx;
var i = isNaN(idx) ? rowIdx : idx;
this.removeRowBg(rowIdx);
Dom.addClass(
rows[rowIdx],
(i%2) ? this.evenCss : this.oddCss

View file

@ -1148,7 +1148,7 @@ export class TableFilter{
}
if(!this.isImported(path, 'link')){
this.import(name, path, null, 'link');
this.import('tf-' + name, path, null, 'link');
}
}
}
@ -2220,7 +2220,7 @@ export class TableFilter{
*/
validateRow(rowIndex, isValid){
let row = this.tbl.rows[rowIndex];
if(!row || Str.lower(typeof isValid)!=='boolean'){
if(!row || typeof isValid !== 'boolean'){
return;
}
@ -2691,9 +2691,6 @@ export class TableFilter{
* @return {Array} List of row indexes
*/
getValidRows(reCalc){
if(!this._hasGrid){
return;
}
if(!reCalc){
return this.validRowsIndex;
}
@ -2720,9 +2717,6 @@ export class TableFilter{
* @return {Number}
*/
getFiltersRowIndex(){
if(!this._hasGrid){
return;
}
return this.filtersRowIndex;
}
@ -2731,9 +2725,6 @@ export class TableFilter{
* @return {Number}
*/
getHeadersRowIndex(){
if(!this._hasGrid){
return;
}
return this.headersRow;
}
@ -2743,9 +2734,6 @@ export class TableFilter{
* @return {Number}
*/
getStartRowIndex(){
if(!this._hasGrid){
return;
}
return this.refRow;
}

View file

@ -6,7 +6,7 @@ const UNDEFINED = void 0;
export default {
/**
* Check if argument exists and is an object
* Check if argument is an object or a global object
* @param {String or Object} v
* @return {Boolean}
*/

View file

@ -7,8 +7,6 @@
/* TABLE LAYOUT
=====================================================*/
table.TF{
/*font:normal 12px arial, tahoma, helvetica, sans-serif;*/
font:inherit;
border-spacing: 0;
border-top:1px solid #D0D0D0; border-left:1px solid #D0D0D0;
border-bottom:1px solid #ccc; border-right:1px solid #ccc;

View file

@ -1,18 +1,17 @@
/*====================================================
- HTML Table Filter Generator Default Theme
- Do not hesitate to edit classes below to
- Table Filter Default Theme
- Do not hesitate to edit classes below to
change theme appearance
=====================================================*/
/* TABLE LAYOUT
=====================================================*/
table.TF{
font:normal 12px arial, tahoma, helvetica, sans-serif !important;
border-left:1px solid #ccc !important; border-top:none !important;
border-right:none !important; border-bottom:none !important;
}
table.TF th{
background:#EBECEE url(images/bg_th.jpg) left top repeat-x !important;
background:#EBECEE url(images/bg_th.jpg) left top repeat-x !important;
border-bottom:1px solid #D0D0D0 !important; border-right:1px solid #D0D0D0 !important;
border-left:1px solid #fff !important; border-top:1px solid #fff !important;
padding:2px !important; color:#333 !important; height:25px !important;
@ -77,8 +76,8 @@ div.grd_tblCont table th, div.grd_headTblCont table th, div.grd_headTblCont tabl
border-left:1px solid #fff !important; border-top:1px solid #fff !important;
}
/* div containing left, middle and right divs */
.grd_inf{
background:#D7D7D7 url(images/bg_infDiv.jpg) 0 0 repeat-x !important;
.grd_inf{
background:#D7D7D7 url(images/bg_infDiv.jpg) 0 0 repeat-x !important;
border-top:1px solid #D0D0D0 !important; height:29px !important;
}
/*row bg alternating color*/

View file

@ -1,18 +1,17 @@
/*====================================================
- HTML Table Filter Generator Custom Theme
- Do not hesitate to edit classes below to
- Table Filter MyTheme Theme
- Do not hesitate to edit classes below to
change theme appearance
=====================================================*/
/* TABLE LAYOUT
=====================================================*/
table.TF{
font:13px "Trebuchet MS",Verdana,Helvetica,Arial,sans-serif !important;
border-left:1px dotted #81963B !important; border-top:none !important;
border-right:0 !important; border-bottom:none !important;
}
table.TF th{
background:#39424B url(images/bg_headers.jpg) left top repeat-x !important;;
background:#39424B url(images/bg_headers.jpg) left top repeat-x !important;;
border-bottom:0 !important; border-right:1px dotted #D0D0D0 !important;
border-left:0 !important; border-top:0 !important;
padding:0 4px 0 4px !important; color:#fff !important; height:35px !important;
@ -24,10 +23,10 @@ table.TF td{ border-bottom:1px dotted #81963B; border-right:1px dotted #81963B;
=====================================================*/
/* filter grid row appearance */
.fltrow{ background-color:#81963B !important; }
.fltrow th, .fltrow td{
.fltrow th, .fltrow td{
border-bottom:1px dotted #39424B !important; border-right:1px dotted #fff !important;
border-left:0 !important; border-top:0 !important;
padding:1px 3px 1px 3px !important;
border-left:0 !important; border-top:0 !important;
padding:1px 3px 1px 3px !important;
}
/* filter (input) appearance */
@ -84,7 +83,7 @@ div.grd_headTblCont{ background-color:#EBECEE !important; border-bottom:none !im
div.grd_tblCont table{ border-right:none !important; }
/* Headers */
div.grd_tblCont table th, div.grd_headTblCont table th{
background:transparent url(images/bg_headers.jpg) 0 0 repeat-x !important;;
background:transparent url(images/bg_headers.jpg) 0 0 repeat-x !important;;
border-bottom:0 !important; border-right:1px dotted #D0D0D0 !important;
border-left:0 !important; border-top:0 !important;
padding:0 4px 0 4px !important; color:#fff !important; height:35px !important;
@ -92,13 +91,13 @@ div.grd_tblCont table th, div.grd_headTblCont table th{
/* filters cells */
div.grd_headTblCont table td{
border-bottom:1px dotted #39424B !important; border-right:1px dotted #fff !important;
border-left:0 !important; border-top:0 !important;
border-left:0 !important; border-top:0 !important;
background-color:#81963B !important;
padding:1px 3px 1px 3px !important;
padding:1px 3px 1px 3px !important;
}
/* div containing left, middle and right divs */
.grd_inf{
/* div containing left, middle and right divs */
.grd_inf{
background:#f4f4f4 url(images/bg_infDiv.jpg) center bottom repeat-x !important;
border-top:1px solid #D0D0D0 !important; height:29px !important; padding-top:2px !important;
}

View file

@ -1,6 +1,6 @@
/*====================================================
- HTML Table Filter Generator SkyBlue Theme
- Do not hesitate to edit classes below to
- Table Filter SkyBlue Theme
- Do not hesitate to edit classes below to
change theme appearance
=====================================================*/
@ -8,7 +8,6 @@
=====================================================*/
table.TF{
padding:0; color:#000;
font:12px/13px "Trebuchet MS", Verdana, Helvetica, Arial, sans-serif !important;
border-right:1px solid #A4BED4;
border-top:1px solid #A4BED4;
border-left:1px solid #A4BED4;
@ -50,10 +49,10 @@ input.flt{ width:99% !important; }
}
div.tot, div.status{ border-right:0 !important; }
.helpBtn{
margin:0 5px 0 5px; padding: 2px 4px 2px 4px;
color:#004A6F !important; font-size:13px;
border:1px solid transparent !important;
.helpBtn{
margin:0 5px 0 5px; padding: 2px 4px 2px 4px;
color:#004A6F !important; font-size:13px;
border:1px solid transparent !important;
} /* help button */
.helpBtn:hover{ background-color:#FFE4AB; border:1px solid #FFB552 !important; text-decoration:none; }
div.helpCont{ color:inherit !important: }
@ -110,7 +109,7 @@ div.grd_tblCont table td{
}
/* div containing left, middle and right divs */
.grd_inf{
.grd_inf{
background:#D9EAED !important;
height:25px; color:#004A6F;
border-top:1px solid #99CCCC !important;
@ -143,6 +142,6 @@ div.grd_Cont .odd{ background-color:#E3EFFF; }
.ezSelectedRow{ background-color:#FFE4AB !important; color:inherit; }
.ezActiveCell{
background-color:#fff !important;
color:#000 !important; font-weight:bold;
color:#000 !important; font-weight:bold;
}
.ezETSelectedCell{ background-color:#FFF !important; font-weight:bold; color:rgb(0,0,0)!important; }

View file

@ -93,7 +93,7 @@ var THEMES = {
};
function changeTheme(name){
var styleId = 'default';
var styleId = 'tf-default';
var stylesheet = document.getElementById(styleId);
if(!stylesheet){
tf.import(styleId, THEMES[name], null, 'link');