deblan-mirror/TableFilter
1
0
Fork 0
mirror of https://github.com/koalyptus/TableFilter.git synced 2024-05-10 18:36:43 +02:00
Code Issues Releases Wiki Activity

Started UI building

Browse source
This commit is contained in:
Max Guglielmi 2015-04-20 17:20:28 +10:00
parent 95991ba4a3
commit 79cf6a19a0
9 changed files with 175 additions and 55 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
Gruntfile.js
View file

@ -24,9 +24,11 @@ module.exports = function (grunt) {
watch: {
files: [
'src-es6/**/*.js',
'<%= source_folder %>**/*.js',
'<%= source_folder %>**/*.css',
'<%= source_folder %>**/*.html'
'src-es6/**/*.css'
// ,
// '<%= source_folder %>**/*.js',
// '<%= source_folder %>**/*.css',
// '<%= source_folder %>**/*.html'
],
tasks: ['dev']
},
@ -202,10 +204,11 @@ module.exports = function (grunt) {
tablefilter: {
files: [
{ src: 'libs/sortabletable.js', dest: '<%= source_folder %>extensions/sortabletable/sortabletable.js' },
{ src: 'src-es6/extensions/colsVisibility/colsVisibility.css', dest: '<%= source_folder %>extensions/colsVisibility/colsVisibility.css' },
// { src: 'libs/requirejs/require.js', dest: '<%= dist_folder %>require.js' },
// { src: ['**'], cwd: '<%= source_folder %>TF_Modules/', dest: '<%= dist_folder %>TF_Modules/', expand: true },
// TODO: remove ezEditTable
// TODO: remove ezEditTable and other extensions
{ src: ['**'], cwd: 'libs/ezEditTable/', dest: '<%= source_folder %>extensions/ezEditTable/', expand: true },
{ src: ['**'], cwd: 'libs/ezEditTable/', dest: '<%= dist_folder %>extensions/ezEditTable/', expand: true },
//

2
dist/filtergrid.css vendored
View file

@ -1,6 +1,6 @@
/*------------------------------------------------------------------------
- TableFilter stylesheet by Max Guglielmi
- (build date: Sun Apr 19 2015 21:04:24)
- (build date: Mon Apr 20 2015 16:50:53)
- Edit below for your projects' needs
------------------------------------------------------------------------*/

3
src-es6/event.js
View file

@ -43,6 +43,9 @@ var Event = {
evt.returnValue = false;
}
},
target(evt){
return (evt && evt.target) || (window.event && window.event.srcElement);
},
keyCode(evt){
return evt.charCode ? evt.charCode :
(evt.keyCode ? evt.keyCode: (evt.which ? evt.which : 0));

47
src-es6/extensions/colsVisibility/colsVisibility.css Normal file
View file

@ -0,0 +1,47 @@
/*====================================================
- HTML Table Filter Generator
- Columns Visibility Manager Extension
- do not hesitate to edit classes below to
change extension appearance
=====================================================*/
span.colVisSpan{ text-align:left; }
span.colVisSpan a.colVis{
/* Link */
margin:0 5px 0 5px;
}
div.colVisCont{
/* Container div */
position:absolute;
display:none;
border:1px solid #ccc;
height:auto; width:250px;
background:#fff;
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;
}
li.cols_checklist_item:hover{
background-color:#335EA8;
color:#fff;
}
.cols_checklist_slc_item{ /*selected check list item*/
background-color:#335EA8;
color:#fff;
}
ul.cols_checklist label{ display:block; }
ul.cols_checklist input{ vertical-align:middle; margin:2px 5px 2px 1px; }

59
src-es6/extensions/colsVisibility/colsVisibility.js
View file

@ -10,7 +10,13 @@ export class ColsVisibility{
* Columns Visibility extension
* @param {Object} tf TableFilter instance
*/
constructor(tf, ext){
constructor(
tf,
ext={
name:'ColsVisibility',
description:'Columns visibility manager'
}){
// Configuration object
var f = tf.config();
@ -18,7 +24,7 @@ export class ColsVisibility{
this.colVisInitialized = false;
this.colVisExtName = ext.name;
this.colVisExtDesc = ext.description;
this.colVisExtDesc = ext.description ;
//show/hide cols span element
this.colVisSpanEl = null;
@ -42,7 +48,7 @@ export class ColsVisibility{
//id of button container element
this.btnColVisTgtId = f.btn_colvis_target_id || null;
//defines show/hide cols text
this.btnColVisText = f.btn_colvis_text || 'Display columns&#9660;';
this.btnColVisText = f.btn_colvis_text || 'Columns&#9660;';
//defines show/hide cols button innerHtml
this.btnColVisHtml = f.btn_colvis_html || null;
//defines css class for show/hide cols button
@ -55,8 +61,8 @@ export class ColsVisibility{
this.btnColVisCloseCssClass =
f.btn_colvis_close_css_class || this.btnColVisCssClass;
this.colVisExtPath = ext.path || 'TFExt_ColsVisibility/';
this.colVisStylesheet = 'TFExt_ColsVisibility.css';
this.colVisExtPath = ext.path || tf.extensionsPath + 'colsVisibility/';
this.colVisStylesheet = 'colsVisibility.css';
//span containing show/hide cols button
this.prfxColVisSpan = 'colVis_';
//defines css class span containing show/hide cols
@ -159,6 +165,7 @@ export class ColsVisibility{
var onBeforeOpenColsManager = this.onBeforeOpenColsManager;
var onBeforeCloseColsManager = this.onBeforeCloseColsManager;
var onAfterOpenColsManager = this.onAfterOpenColsManager;
var onAfterCloseColsManager = this.onAfterCloseColsManager;
if(onBeforeOpenColsManager && contDisplay !== 'inline'){
onBeforeOpenColsManager.call(null, this);
@ -178,23 +185,21 @@ export class ColsVisibility{
}
}
checkItem(evt){
var li = event.target;
var lbl = Dom.tag(el, 'label')[0];
if(!li || !li.firstChild || !lbl){
checkItem(lbl){
var li = lbl.parentNode;
if(!li || !lbl){
return;
}
var isChecked = lbl.firstChild.checked;
var colIndex = lbl.firstChild.getAttribute('id').split('_')[1];
var parentNode = li.parentNode;
if(isChecked){
Dom.addClass(parentNode, this.colVisListSlcItemCssClass);
Dom.addClass(li, this.colVisListSlcItemCssClass);
} else {
Dom.removeClass(parentNode, this.colVisListSlcItemCssClass);
Dom.removeClass(li, this.colVisListSlcItemCssClass);
}
// var hide = (this.TickToHide && isChecked) || (!this.TickToHide && !isChecked) ? true : false;
var hide = false;
if((this.colViseTickToHide && isChecked) ||
if((this.colVisTickToHide && isChecked) ||
(!this.colVisTickToHide && !isChecked)){
hide = true;
}
@ -202,9 +207,11 @@ export class ColsVisibility{
}
init(){
if(this.colVisManager){
this.buildBtn();
if(!this.colVisManager){
return;
}
this.buildBtn();
this.buildManager();
}
buildBtn(){
@ -266,7 +273,7 @@ export class ColsVisibility{
this.btnColVisEl = this.colVisSpanEl.firstChild;
// this.SetColsVisibilityManager();
this.buildManager();
// this.buildManager();
if(this.onColsManagerLoaded){
this.onColsManagerLoaded.call(null, this);
@ -298,7 +305,7 @@ export class ColsVisibility{
//Tick all option
if(this.colVisEnableTickAll){
var li = tf_CreateCheckItem(
var li = Dom.createCheckItem(
'col__'+tf.id, this.colVisTickAllText, this.colVisTickAllText);
Dom.addClass(li, this.colVisListItemCssClass);
ul.appendChild(li);
@ -352,8 +359,9 @@ export class ColsVisibility{
}
// liElm.check.onclick = function(){ o.Evt._CheckItem(this.parentNode); };
Event.add(liElm.check, 'click', (evt)=> {
var elm = evt.target;
this.checkItem(elm.parentNode);
var elm = Event.target(evt);
var lbl = elm.parentNode;
this.checkItem(lbl);
});
// if(tf_isIE)
@ -404,7 +412,8 @@ export class ColsVisibility{
setHidden(colIndex, hide){
var tf = this.tf;
var col = Dom.tag(this.tbl, 'col')[colIndex];
var tbl = tf.tbl;
var col = Dom.tag(tbl, 'col')[colIndex];
//External headers
var col1 = this.colVisHeadersTbl ?
Dom.tag(this.colVisHeadersTbl, 'col')[colIndex] : null;
@ -418,7 +427,7 @@ export class ColsVisibility{
//cols can be hidden only under IE
if(this.tblHasColTag && Helpers.isIE()){
var tbl = this.colVisHeadersTbl || tf.tbl;
tbl = this.colVisHeadersTbl || tbl;
var filtersRow = tbl.rows[tf.getFiltersRowIndex()];
var a1 = tf.getFiltersByType(tf.fltTypeSlc, true);
var a2 = tf.getFiltersByType(tf.fltTypeMulti, true);
@ -442,9 +451,9 @@ export class ColsVisibility{
col1.style.display = hide ? 'none' : '';
}
} else {
this._hideCells(o.tbl, colIndex, true);
this._hideCells(tbl, colIndex, hide);
if(this.colVisHeadersTbl){
this._hideCells(this.colVisHeadersTbl, colIndex, true);
this._hideCells(this.colVisHeadersTbl, colIndex, hide);
}
}
@ -485,7 +494,7 @@ export class ColsVisibility{
headTbl = gridLayout.headTbl;
gridColElms = gridLayout.gridColElms;
if(Helpers.isIE()){
tf.tbl.style.width = headTbl.clientWidth + 'px';
tbl.style.width = headTbl.clientWidth + 'px';
} else {
var ths = headTbl.rows[this.colVisHeadersIndex].cells;
var hiddenWidth = 0;
@ -499,7 +508,7 @@ export class ColsVisibility{
var headTblW = parseInt(headTbl.style.width, 10);
headTbl.style.width = headTblW - hiddenWidth + 'px';
tf.tbl.style.width = headTbl.style.width;
tbl.style.width = headTbl.style.width;
gridColElms[colIndex].style.display = 'none';
}
}

3
src/event.js
View file

@ -44,6 +44,9 @@ define(["exports"], function (exports) {
evt.returnValue = false;
}
},
target: function target(evt) {
return evt && evt.target || window.event && window.event.srcElement;
},
keyCode: function keyCode(evt) {
return evt.charCode ? evt.charCode : evt.keyCode ? evt.keyCode : evt.which ? evt.which : 0;
}

47
src/extensions/colsVisibility/colsVisibility.css Normal file
View file

@ -0,0 +1,47 @@
/*====================================================
- HTML Table Filter Generator
- Columns Visibility Manager Extension
- do not hesitate to edit classes below to
change extension appearance
=====================================================*/
span.colVisSpan{ text-align:left; }
span.colVisSpan a.colVis{
/* Link */
margin:0 5px 0 5px;
}
div.colVisCont{
/* Container div */
position:absolute;
display:none;
border:1px solid #ccc;
height:auto; width:250px;
background:#fff;
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;
}
li.cols_checklist_item:hover{
background-color:#335EA8;
color:#fff;
}
.cols_checklist_slc_item{ /*selected check list item*/
background-color:#335EA8;
color:#fff;
}
ul.cols_checklist label{ display:block; }
ul.cols_checklist input{ vertical-align:middle; margin:2px 5px 2px 1px; }

56
src/extensions/colsVisibility/colsVisibility.js
View file

@ -21,7 +21,12 @@ define(["exports", "../../dom", "../../types", "../../event", "../../helpers", "
* @param {Object} tf TableFilter instance
*/
function ColsVisibility(tf, ext) {
function ColsVisibility(tf) {
var ext = arguments[1] === undefined ? {
name: "ColsVisibility",
description: "Columns visibility manager"
} : arguments[1];
_classCallCheck(this, ColsVisibility);
// Configuration object
@ -55,7 +60,7 @@ define(["exports", "../../dom", "../../types", "../../event", "../../helpers", "
//id of button container element
this.btnColVisTgtId = f.btn_colvis_target_id || null;
//defines show/hide cols text
this.btnColVisText = f.btn_colvis_text || "Display columns&#9660;";
this.btnColVisText = f.btn_colvis_text || "Columns&#9660;";
//defines show/hide cols button innerHtml
this.btnColVisHtml = f.btn_colvis_html || null;
//defines css class for show/hide cols button
@ -67,8 +72,8 @@ define(["exports", "../../dom", "../../types", "../../event", "../../helpers", "
//defines css class for close button
this.btnColVisCloseCssClass = f.btn_colvis_close_css_class || this.btnColVisCssClass;
this.colVisExtPath = ext.path || "TFExt_ColsVisibility/";
this.colVisStylesheet = "TFExt_ColsVisibility.css";
this.colVisExtPath = ext.path || tf.extensionsPath + "colsVisibility/";
this.colVisStylesheet = "colsVisibility.css";
//span containing show/hide cols button
this.prfxColVisSpan = "colVis_";
//defines css class span containing show/hide cols
@ -158,6 +163,7 @@ define(["exports", "../../dom", "../../types", "../../event", "../../helpers", "
var onBeforeOpenColsManager = this.onBeforeOpenColsManager;
var onBeforeCloseColsManager = this.onBeforeCloseColsManager;
var onAfterOpenColsManager = this.onAfterOpenColsManager;
var onAfterCloseColsManager = this.onAfterCloseColsManager;
if (onBeforeOpenColsManager && contDisplay !== "inline") {
onBeforeOpenColsManager.call(null, this);
@ -177,23 +183,21 @@ define(["exports", "../../dom", "../../types", "../../event", "../../helpers", "
}
},
checkItem: {
value: function checkItem(evt) {
var li = event.target;
var lbl = Dom.tag(el, "label")[0];
if (!li || !li.firstChild || !lbl) {
value: function checkItem(lbl) {
var li = lbl.parentNode;
if (!li || !lbl) {
return;
}
var isChecked = lbl.firstChild.checked;
var colIndex = lbl.firstChild.getAttribute("id").split("_")[1];
var parentNode = li.parentNode;
if (isChecked) {
Dom.addClass(parentNode, this.colVisListSlcItemCssClass);
Dom.addClass(li, this.colVisListSlcItemCssClass);
} else {
Dom.removeClass(parentNode, this.colVisListSlcItemCssClass);
Dom.removeClass(li, this.colVisListSlcItemCssClass);
}
// var hide = (this.TickToHide && isChecked) || (!this.TickToHide && !isChecked) ? true : false;
var hide = false;
if (this.colViseTickToHide && isChecked || !this.colVisTickToHide && !isChecked) {
if (this.colVisTickToHide && isChecked || !this.colVisTickToHide && !isChecked) {
hide = true;
}
this.setHidden(colIndex, hide);
@ -201,9 +205,11 @@ define(["exports", "../../dom", "../../types", "../../event", "../../helpers", "
},
init: {
value: function init() {
if (this.colVisManager) {
this.buildBtn();
if (!this.colVisManager) {
return;
}
this.buildBtn();
this.buildManager();
}
},
buildBtn: {
@ -272,7 +278,7 @@ define(["exports", "../../dom", "../../types", "../../event", "../../helpers", "
this.btnColVisEl = this.colVisSpanEl.firstChild;
// this.SetColsVisibilityManager();
this.buildManager();
// this.buildManager();
if (this.onColsManagerLoaded) {
this.onColsManagerLoaded.call(null, this);
@ -304,7 +310,7 @@ define(["exports", "../../dom", "../../types", "../../event", "../../helpers", "
//Tick all option
if (this.colVisEnableTickAll) {
var li = tf_CreateCheckItem("col__" + tf.id, this.colVisTickAllText, this.colVisTickAllText);
var li = Dom.createCheckItem("col__" + tf.id, this.colVisTickAllText, this.colVisTickAllText);
Dom.addClass(li, this.colVisListItemCssClass);
ul.appendChild(li);
var isAllTicked = false;
@ -355,8 +361,9 @@ define(["exports", "../../dom", "../../types", "../../event", "../../helpers", "
}
// liElm.check.onclick = function(){ o.Evt._CheckItem(this.parentNode); };
Event.add(liElm.check, "click", function (evt) {
var elm = evt.target;
_this.checkItem(elm.parentNode);
var elm = Event.target(evt);
var lbl = elm.parentNode;
_this.checkItem(lbl);
});
// if(tf_isIE)
@ -412,7 +419,8 @@ define(["exports", "../../dom", "../../types", "../../event", "../../helpers", "
setHidden: {
value: function setHidden(colIndex, hide) {
var tf = this.tf;
var col = Dom.tag(this.tbl, "col")[colIndex];
var tbl = tf.tbl;
var col = Dom.tag(tbl, "col")[colIndex];
//External headers
var col1 = this.colVisHeadersTbl ? Dom.tag(this.colVisHeadersTbl, "col")[colIndex] : null;
@ -425,7 +433,7 @@ define(["exports", "../../dom", "../../types", "../../event", "../../helpers", "
//cols can be hidden only under IE
if (this.tblHasColTag && Helpers.isIE()) {
var tbl = this.colVisHeadersTbl || tf.tbl;
tbl = this.colVisHeadersTbl || tbl;
var filtersRow = tbl.rows[tf.getFiltersRowIndex()];
var a1 = tf.getFiltersByType(tf.fltTypeSlc, true);
var a2 = tf.getFiltersByType(tf.fltTypeMulti, true);
@ -447,9 +455,9 @@ define(["exports", "../../dom", "../../types", "../../event", "../../helpers", "
col1.style.display = hide ? "none" : "";
}
} else {
this._hideCells(o.tbl, colIndex, true);
this._hideCells(tbl, colIndex, hide);
if (this.colVisHeadersTbl) {
this._hideCells(this.colVisHeadersTbl, colIndex, true);
this._hideCells(this.colVisHeadersTbl, colIndex, hide);
}
}
@ -490,7 +498,7 @@ define(["exports", "../../dom", "../../types", "../../event", "../../helpers", "
headTbl = gridLayout.headTbl;
gridColElms = gridLayout.gridColElms;
if (Helpers.isIE()) {
tf.tbl.style.width = headTbl.clientWidth + "px";
tbl.style.width = headTbl.clientWidth + "px";
} else {
var ths = headTbl.rows[this.colVisHeadersIndex].cells;
var hiddenWidth = 0;
@ -504,7 +512,7 @@ define(["exports", "../../dom", "../../types", "../../event", "../../helpers", "
var headTblW = parseInt(headTbl.style.width, 10);
headTbl.style.width = headTblW - hiddenWidth + "px";
tf.tbl.style.width = headTbl.style.width;
tbl.style.width = headTbl.style.width;
gridColElms[colIndex].style.display = "none";
}
}

2
src/index.html
View file

@ -136,7 +136,7 @@
extensions: [{
/*** Columns Visibility Manager extension load ***/
name: 'ColsVisibility',
src: 'TableFilter/TFExt_ColsVisibility/TFExt_ColsVisibility.js',
//src: 'extensions/colsVisibility/colsVisibility.js',
description: 'Columns visibility manager'/*,
initialize: function(o){o.SetColsVisibility();}*/
}]