From 79cf6a19a0b06c0fda3c7c3e50c61a6ae84a2bd7 Mon Sep 17 00:00:00 2001 From: Max Guglielmi Date: Mon, 20 Apr 2015 17:20:28 +1000 Subject: [PATCH] Started UI building --- Gruntfile.js | 11 ++-- dist/filtergrid.css | 2 +- src-es6/event.js | 3 + .../colsVisibility/colsVisibility.css | 47 +++++++++++++++ .../colsVisibility/colsVisibility.js | 59 +++++++++++-------- src/event.js | 3 + .../colsVisibility/colsVisibility.css | 47 +++++++++++++++ .../colsVisibility/colsVisibility.js | 56 ++++++++++-------- src/index.html | 2 +- 9 files changed, 175 insertions(+), 55 deletions(-) create mode 100644 src-es6/extensions/colsVisibility/colsVisibility.css create mode 100644 src/extensions/colsVisibility/colsVisibility.css diff --git a/Gruntfile.js b/Gruntfile.js index 55c6fb82..ff69dc6e 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -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 }, // diff --git a/dist/filtergrid.css b/dist/filtergrid.css index cc33323f..29d3db6d 100644 --- a/dist/filtergrid.css +++ b/dist/filtergrid.css @@ -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 ------------------------------------------------------------------------*/ diff --git a/src-es6/event.js b/src-es6/event.js index 9edab530..e308a1d1 100644 --- a/src-es6/event.js +++ b/src-es6/event.js @@ -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)); diff --git a/src-es6/extensions/colsVisibility/colsVisibility.css b/src-es6/extensions/colsVisibility/colsVisibility.css new file mode 100644 index 00000000..d6865f79 --- /dev/null +++ b/src-es6/extensions/colsVisibility/colsVisibility.css @@ -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; } \ No newline at end of file diff --git a/src-es6/extensions/colsVisibility/colsVisibility.js b/src-es6/extensions/colsVisibility/colsVisibility.js index 7d1a0b6f..86887196 100644 --- a/src-es6/extensions/colsVisibility/colsVisibility.js +++ b/src-es6/extensions/colsVisibility/colsVisibility.js @@ -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▼'; + this.btnColVisText = f.btn_colvis_text || 'Columns▼'; //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'; } } diff --git a/src/event.js b/src/event.js index 3a24bef9..1c01ff41 100644 --- a/src/event.js +++ b/src/event.js @@ -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; } diff --git a/src/extensions/colsVisibility/colsVisibility.css b/src/extensions/colsVisibility/colsVisibility.css new file mode 100644 index 00000000..d6865f79 --- /dev/null +++ b/src/extensions/colsVisibility/colsVisibility.css @@ -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; } \ No newline at end of file diff --git a/src/extensions/colsVisibility/colsVisibility.js b/src/extensions/colsVisibility/colsVisibility.js index 0a8f4135..558034c1 100644 --- a/src/extensions/colsVisibility/colsVisibility.js +++ b/src/extensions/colsVisibility/colsVisibility.js @@ -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▼"; + this.btnColVisText = f.btn_colvis_text || "Columns▼"; //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"; } } diff --git a/src/index.html b/src/index.html index 3b80c108..f801ddc3 100644 --- a/src/index.html +++ b/src/index.html @@ -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();}*/ }]