1
0
Fork 0
mirror of https://github.com/koalyptus/TableFilter.git synced 2024-05-17 13:56:38 +02:00
TableFilter/doc/file/src/extensions/colsVisibility/colsVisibility.js.html
2015-08-02 18:27:59 +10:00

605 lines
22 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<base data-ice="baseUrl" href="../../../../">
<title data-ice="title">src/extensions/colsVisibility/colsVisibility.js | TableFilter v0.0.0 API Document</title>
<link type="text/css" rel="stylesheet" href="css/style.css">
<link type="text/css" rel="stylesheet" href="css/prettify-tomorrow.css">
<script src="script/prettify/prettify.js"></script>
</head>
<body class="layout-container">
<header>
<a href="./">Home</a>
<a href="identifiers.html">Identifier</a>
<a href="source.html">Source</a>
<a data-ice="repoURL" href="https://github.com/koalyptus/TableFilter.git" class="repo-url-github">Repository</a>
<div class="search-box">
<span>
<img src="./image/search.png">
<span class="search-input-edge"></span><input class="search-input"><span class="search-input-edge"></span>
</span>
<ul class="search-result"></ul>
</div>
</header>
<nav class="navigation" data-ice="nav"><div data-ice="classWrap">
<h2>Class</h2>
<ul>
<li data-ice="classDoc"><span><a href="class/src/extensions/advancedGrid/adapterEzEditTable.js~AdapterEzEditTable.html">AdapterEzEditTable</a></span></li>
<li data-ice="classDoc"><span><a href="class/src/extensions/sort/adapterSortabletable.js~AdapterSortableTable.html">AdapterSortableTable</a></span></li>
<li data-ice="classDoc"><span><a href="class/src/modules/alternateRows.js~AlternateRows.html">AlternateRows</a></span></li>
<li data-ice="classDoc"><span><a href="class/src/modules/checkList.js~CheckList.html">CheckList</a></span></li>
<li data-ice="classDoc"><span><a href="class/src/modules/clearButton.js~ClearButton.html">ClearButton</a></span></li>
<li data-ice="classDoc"><span><a href="class/src/extensions/colOps/colOps.js~ColOps.html">ColOps</a></span></li>
<li data-ice="classDoc"><span><a href="class/src/extensions/colsVisibility/colsVisibility.js~ColsVisibility.html">ColsVisibility</a></span></li>
<li data-ice="classDoc"><span><a href="class/src/modules/dropdown.js~Dropdown.html">Dropdown</a></span></li>
<li data-ice="classDoc"><span><a href="class/src/extensions/filtersVisibility/filtersVisibility.js~FiltersVisibility.html">FiltersVisibility</a></span></li>
<li data-ice="classDoc"><span><a href="class/src/modules/gridLayout.js~GridLayout.html">GridLayout</a></span></li>
<li data-ice="classDoc"><span><a href="class/src/modules/help.js~Help.html">Help</a></span></li>
<li data-ice="classDoc"><span><a href="class/src/modules/highlightKeywords.js~HighlightKeyword.html">HighlightKeyword</a></span></li>
<li data-ice="classDoc"><span><a href="class/src/modules/loader.js~Loader.html">Loader</a></span></li>
<li data-ice="classDoc"><span><a href="class/src/modules/paging.js~Paging.html">Paging</a></span></li>
<li data-ice="classDoc"><span><a href="class/src/modules/popupFilter.js~PopupFilter.html">PopupFilter</a></span></li>
<li data-ice="classDoc"><span><a href="class/src/modules/rowsCounter.js~RowsCounter.html">RowsCounter</a></span></li>
<li data-ice="classDoc"><span><a href="class/src/modules/statusBar.js~StatusBar.html">StatusBar</a></span></li>
<li data-ice="classDoc"><span><a href="class/src/modules/store.js~Store.html">Store</a></span></li>
<li data-ice="classDoc"><span><a href="class/src/tablefilter.js~TableFilter.html">TableFilter</a></span></li>
</ul>
</div>
</nav>
<div class="content" data-ice="content"><h1 data-ice="title">src/extensions/colsVisibility/colsVisibility.js</h1>
<pre class="source-code line-number"><code class="prettyprint linenums" data-ice="content">import Dom from &apos;../../dom&apos;;
import Types from &apos;../../types&apos;;
import Event from &apos;../../event&apos;;
import Arr from &apos;../../array&apos;;
export default class ColsVisibility{
/**
* Columns Visibility extension
* @param {Object} tf TableFilter instance
* @param {Object} f Config
*/
constructor(tf, f){
// Configuration object
var cfg = tf.config();
this.initialized = false;
this.name = f.name;
this.desc = f.description || &apos;Columns visibility manager&apos;;
//show/hide cols span element
this.spanEl = null;
//show/hide cols button element
this.btnEl = null;
//show/hide cols container div element
this.contEl = null;
//tick to hide or show column
this.tickToHide = f.tick_to_hide===false ? false : true;
//enables/disables cols manager generation
this.manager = f.manager===false ? false : true;
//only if external headers
this.headersTbl = f.headers_table || false;
//only if external headers
this.headersIndex = f.headers_index || 1;
//id of container element
this.contElTgtId = f.container_target_id || null;
//alternative headers text
this.headersText = f.headers_text || null;
//id of button container element
this.btnTgtId = f.btn_target_id || null;
//defines show/hide cols text
this.btnText = f.btn_text || &apos;Columns&amp;#9660;&apos;;
//defines show/hide cols button innerHtml
this.btnHtml = f.btn_html || null;
//defines css class for show/hide cols button
this.btnCssClass = f.btn_css_class || &apos;colVis&apos;;
//defines close link text
this.btnCloseText = f.btn_close_text || &apos;Close&apos;;
//defines close button innerHtml
this.btnCloseHtml = f.btn_close_html || null;
//defines css class for close button
this.btnCloseCssClass = f.btn_close_css_class || this.btnCssClass;
this.stylesheet = f.stylesheet || &apos;colsVisibility.css&apos;;
//span containing show/hide cols button
this.prfx = &apos;colVis_&apos;;
//defines css class span containing show/hide cols
this.spanCssClass = f.span_css_class || &apos;colVisSpan&apos;;
this.prfxCont = this.prfx + &apos;Cont_&apos;;
//defines css class div containing show/hide cols
this.contCssClass = f.cont_css_class || &apos;colVisCont&apos;;
//defines css class for cols list (ul)
this.listCssClass = cfg.list_css_class ||&apos;cols_checklist&apos;;
//defines css class for list item (li)
this.listItemCssClass = cfg.checklist_item_css_class ||
&apos;cols_checklist_item&apos;;
//defines css class for selected list item (li)
this.listSlcItemCssClass = cfg.checklist_selected_item_css_class ||
&apos;cols_checklist_slc_item&apos;;
//text preceding columns list
this.text = f.text || (this.tickToHide ? &apos;Hide: &apos; : &apos;Show: &apos;);
this.atStart = f.at_start || null;
this.enableHover = Boolean(f.enable_hover);
//enables select all option
this.enableTickAll = Boolean(f.enable_tick_all);
//text preceding columns list
this.tickAllText = f.tick_all_text || &apos;Select all:&apos;;
//array containing hidden columns indexes
this.hiddenCols = [];
this.tblHasColTag = (Dom.tag(tf.tbl,&apos;col&apos;).length &gt; 0);
//callback invoked just after cols manager is loaded
this.onLoaded = Types.isFn(f.on_loaded) ? f.on_loaded : null;
//calls function before cols manager is opened
this.onBeforeOpen = Types.isFn(f.on_before_open) ?
f.on_before_open : null;
//calls function after cols manager is opened
this.onAfterOpen = Types.isFn(f.on_after_open) ? f.on_after_open : null;
//calls function before cols manager is closed
this.onBeforeClose = Types.isFn(f.on_before_close) ?
f.on_before_close : null;
//calls function after cols manager is closed
this.onAfterClose = Types.isFn(f.on_after_close) ?
f.on_after_close : null;
//callback before col is hidden
this.onBeforeColHidden = Types.isFn(f.on_before_col_hidden) ?
f.on_before_col_hidden : null;
//callback after col is hidden
this.onAfterColHidden = Types.isFn(f.on_after_col_hidden) ?
f.on_after_col_hidden : null;
//callback before col is displayed
this.onBeforeColDisplayed = Types.isFn(f.on_before_col_displayed) ?
f.on_before_col_displayed : null;
//callback after col is displayed
this.onAfterColDisplayed = Types.isFn(f.on_after_col_displayed) ?
f.on_after_col_displayed : null;
//Grid layout compatibility
if(tf.gridLayout){
this.headersTbl = tf.feature(&apos;gridLayout&apos;).headTbl; //headers table
this.headersIndex = 0; //headers index
this.onAfterColDisplayed = function(){};
this.onAfterColHidden = function(){};
}
//Loads extension stylesheet
tf.import(f.name+&apos;Style&apos;, tf.stylePath + this.stylesheet, null, &apos;link&apos;);
this.tf = tf;
}
toggle(){
var contDisplay = this.contEl.style.display;
var onBeforeOpen = this.onBeforeOpen;
var onBeforeClose = this.onBeforeClose;
var onAfterOpen = this.onAfterOpen;
var onAfterClose = this.onAfterClose;
if(onBeforeOpen &amp;&amp; contDisplay !== &apos;inline&apos;){
onBeforeOpen.call(null, this);
}
if(onBeforeClose &amp;&amp; contDisplay === &apos;inline&apos;){
onBeforeClose.call(null, this);
}
this.contEl.style.display = contDisplay === &apos;inline&apos; ?
&apos;none&apos; : &apos;inline&apos;;
if(onAfterOpen &amp;&amp; contDisplay !== &apos;inline&apos;){
onAfterOpen.call(null, this);
}
if(onAfterClose &amp;&amp; contDisplay === &apos;inline&apos;){
onAfterClose.call(null, this);
}
}
checkItem(lbl){
var li = lbl.parentNode;
if(!li || !lbl){
return;
}
var isChecked = lbl.firstChild.checked;
var colIndex = lbl.firstChild.getAttribute(&apos;id&apos;).split(&apos;_&apos;)[1];
colIndex = parseInt(colIndex, 10);
if(isChecked){
Dom.addClass(li, this.listSlcItemCssClass);
} else {
Dom.removeClass(li, this.listSlcItemCssClass);
}
var hide = false;
if((this.tickToHide &amp;&amp; isChecked) || (!this.tickToHide &amp;&amp; !isChecked)){
hide = true;
}
this.setHidden(colIndex, hide);
}
init(){
if(!this.manager){
return;
}
this.buildBtn();
this.buildManager();
this.initialized = true;
}
/**
* Build main button UI
*/
buildBtn(){
if(this.btnEl){
return;
}
var tf = this.tf;
var span = Dom.create(&apos;span&apos;, [&apos;id&apos;, this.prfx+tf.id]);
span.className = this.spanCssClass;
//Container element (rdiv or custom element)
if(!this.btnTgtId){
tf.setToolbar();
}
var targetEl = !this.btnTgtId ? tf.rDiv : Dom.id(this.btnTgtId);
if(!this.btnTgtId){
var firstChild = targetEl.firstChild;
firstChild.parentNode.insertBefore(span, firstChild);
} else {
targetEl.appendChild(span);
}
if(!this.btnHtml){
var btn = Dom.create(&apos;a&apos;, [&apos;href&apos;,&apos;javascript:;&apos;]);
btn.className = this.btnCssClass;
btn.title = this.desc;
btn.innerHTML = this.btnText;
span.appendChild(btn);
if(!this.enableHover){
Event.add(btn, &apos;click&apos;, (evt)=&gt; { this.toggle(evt); });
} else {
Event.add(btn, &apos;mouseover&apos;, (evt)=&gt; { this.toggle(evt); });
}
} else { //Custom html
span.innerHTML = this.btnHtml;
var colVisEl = span.firstChild;
if(!this.enableHover){
Event.add(colVisEl, &apos;click&apos;, (evt)=&gt; { this.toggle(evt); });
} else {
Event.add(colVisEl, &apos;mouseover&apos;, (evt)=&gt; { this.toggle(evt); });
}
}
this.spanEl = span;
this.btnEl = this.spanEl.firstChild;
if(this.onLoaded){
this.onLoaded.call(null, this);
}
}
/**
* Build columns manager UI
*/
buildManager(){
var tf = this.tf;
var container = !this.contElTgtId ?
Dom.create(&apos;div&apos;, [&apos;id&apos;, this.prfxCont+tf.id]) :
Dom.id(this.contElTgtId);
container.className = this.contCssClass;
//Extension description
var extNameLabel = Dom.create(&apos;p&apos;);
extNameLabel.innerHTML = this.text;
container.appendChild(extNameLabel);
//Headers list
var ul = Dom.create(&apos;ul&apos; ,[&apos;id&apos;, &apos;ul&apos;+this.name+&apos;_&apos;+tf.id]);
ul.className = this.listCssClass;
var tbl = this.headersTbl ? this.headersTbl : tf.tbl;
var headerIndex = this.headersTbl ?
this.headersIndex : tf.getHeadersRowIndex();
var headerRow = tbl.rows[headerIndex];
//Tick all option
if(this.enableTickAll){
var li = Dom.createCheckItem(
&apos;col__&apos;+tf.id, this.tickAllText, this.tickAllText);
Dom.addClass(li, this.listItemCssClass);
ul.appendChild(li);
li.check.checked = !this.tickToHide;
Event.add(li.check, &apos;click&apos;, ()=&gt; {
for(var h = 0; h &lt; headerRow.cells.length; h++){
var itm = Dom.id(&apos;col_&apos;+h+&apos;_&apos;+tf.id);
if(itm &amp;&amp; li.check.checked !== itm.checked){
itm.click();
itm.checked = li.check.checked;
}
}
});
}
for(var i = 0; i &lt; headerRow.cells.length; i++){
var cell = headerRow.cells[i];
var cellText = this.headersText &amp;&amp; this.headersText[i] ?
this.headersText[i] : this._getHeaderText(cell);
var liElm = Dom.createCheckItem(
&apos;col_&apos;+i+&apos;_&apos;+tf.id, cellText, cellText);
Dom.addClass(liElm, this.listItemCssClass);
if(!this.tickToHide){
Dom.addClass(liElm, this.listSlcItemCssClass);
}
ul.appendChild(liElm);
if(!this.tickToHide){
liElm.check.checked = true;
}
Event.add(liElm.check, &apos;click&apos;, (evt)=&gt; {
var elm = Event.target(evt);
var lbl = elm.parentNode;
this.checkItem(lbl);
});
}
//separator
var p = Dom.create(&apos;p&apos;, [&apos;align&apos;,&apos;center&apos;]);
var btn;
//Close link
if(!this.btnCloseHtml){
btn = Dom.create(&apos;a&apos;, [&apos;href&apos;,&apos;javascript:;&apos;]);
btn.className = this.btnCloseCssClass;
btn.innerHTML = this.btnCloseText;
Event.add(btn, &apos;click&apos;, (evt)=&gt; { this.toggle(evt); });
p.appendChild(btn);
} else {
p.innerHTML = this.btnCloseHtml;
btn = p.firstChild;
Event.add(btn, &apos;click&apos;, (evt)=&gt; { this.toggle(evt); });
}
container.appendChild(ul);
container.appendChild(p);
this.btnEl.parentNode.insertBefore(container, this.btnEl);
this.contEl = container;
if(this.atStart){
var a = this.atStart;
for(var k=0; k&lt;a.length; k++){
var itm = Dom.id(&apos;col_&apos;+a[k]+&apos;_&apos;+tf.id);
if(itm){
itm.click();
}
}
}
}
/**
* Hide or show specified columns
* @param {Numner} colIndex Column index
* @param {Boolean} hide hide column if true or show if false
*/
setHidden(colIndex, hide){
var tf = this.tf;
var tbl = tf.tbl;
if(this.onBeforeColHidden &amp;&amp; hide){
this.onBeforeColHidden.call(null, this, colIndex);
}
if(this.onBeforeColDisplayed &amp;&amp; !hide){
this.onBeforeColDisplayed.call(null, this, colIndex);
}
this._hideCells(tbl, colIndex, hide);
if(this.headersTbl){
this._hideCells(this.headersTbl, colIndex, hide);
}
var hiddenCols = this.hiddenCols;
if(hide){
if(hiddenCols.indexOf(colIndex) === -1){
this.hiddenCols.push(colIndex);
}
} else {
var itemIndex = Arr.indexByValue(hiddenCols, colIndex, true);
if(hiddenCols.indexOf(colIndex) !== -1){
this.hiddenCols.splice(itemIndex, 1);
}
}
var gridLayout;
var headTbl;
var gridColElms;
if(this.onAfterColHidden &amp;&amp; hide){
//This event is fired just after a column is displayed for
//grid_layout support
//TODO: grid layout module should be responsible for those
//calculations
if(tf.gridLayout){
gridLayout = tf.feature(&apos;gridLayout&apos;);
headTbl = gridLayout.headTbl;
gridColElms = gridLayout.gridColElms;
var hiddenWidth = parseInt(
gridColElms[colIndex].style.width, 10);
var headTblW = parseInt(headTbl.style.width, 10);
headTbl.style.width = headTblW - hiddenWidth + &apos;px&apos;;
tbl.style.width = headTbl.style.width;
}
this.onAfterColHidden.call(null, this, colIndex);
}
if(this.onAfterColDisplayed &amp;&amp; !hide){
//This event is fired just after a column is displayed for
//grid_layout support
//TODO: grid layout module should be responsible for those
//calculations
if(tf.gridLayout){
gridLayout = tf.feature(&apos;gridLayout&apos;);
headTbl = gridLayout.headTbl;
gridColElms = gridLayout.gridColElms;
var width = parseInt(gridColElms[colIndex].style.width, 10);
headTbl.style.width =
(parseInt(headTbl.style.width, 10) + width) + &apos;px&apos;;
tf.tbl.style.width = headTbl.style.width;
}
this.onAfterColDisplayed.call(null, this, colIndex);
}
}
/**
* Show specified column
* @param {Number} colIndex Column index
*/
showCol(colIndex){
if(colIndex === undefined || !this.isColHidden(colIndex)){
return;
}
if(this.manager &amp;&amp; this.contEl){
var itm = Dom.id(&apos;col_&apos;+colIndex+&apos;_&apos;+this.tf.id);
if(itm){ itm.click(); }
} else {
this.setHidden(colIndex, false);
}
}
/**
* Hide specified column
* @param {Number} colIndex Column index
*/
hideCol(colIndex){
if(colIndex === undefined || this.isColHidden(colIndex)){
return;
}
if(this.manager &amp;&amp; this.contEl){
var itm = Dom.id(&apos;col_&apos;+colIndex+&apos;_&apos;+this.tf.id);
if(itm){ itm.click(); }
} else {
this.setHidden(colIndex, true);
}
}
/**
* Determine if specified column is hidden
* @param {Number} colIndex Column index
*/
isColHidden(colIndex){
if(this.hiddenCols.indexOf(colIndex) !== -1){
return true;
}
return false;
}
/**
* Toggle visibility of specified column
* @param {Number} colIndex Column index
*/
toggleCol(colIndex){
if(colIndex === undefined || this.isColHidden(colIndex)){
this.showCol(colIndex);
} else {
this.hideCol(colIndex);
}
}
/**
* Returns the indexes of the columns currently hidden
* @return {Array} column indexes
*/
getHiddenCols(){
return this.hiddenCols;
}
/**
* Remove the columns manager
*/
destroy(){
if(!this.btnEl &amp;&amp; !this.contEl){
return;
}
if(Dom.id(this.contElTgtId)){
Dom.id(this.contElTgtId).innerHTML = &apos;&apos;;
} else {
this.contEl.innerHTML = &apos;&apos;;
this.contEl.parentNode.removeChild(this.contEl);
this.contEl = null;
}
this.btnEl.innerHTML = &apos;&apos;;
this.btnEl.parentNode.removeChild(this.btnEl);
this.btnEl = null;
this.initialized = false;
}
_getHeaderText(cell){
if(!cell.hasChildNodes){
return &apos;&apos;;
}
for(var i=0; i&lt;cell.childNodes.length; i++){
var n = cell.childNodes[i];
if(n.nodeType === 3){
return n.nodeValue;
} else if(n.nodeType === 1){
if(n.id &amp;&amp; n.id.indexOf(&apos;popUp&apos;) !== -1){
continue;
} else {
return Dom.getText(n);
}
}
continue;
}
return &apos;&apos;;
}
_hideCells(tbl, colIndex, hide){
for(var i=0; i&lt;tbl.rows.length; i++){
var row = tbl.rows[i];
var cell = row.cells[colIndex];
if(cell){
cell.style.display = hide ? &apos;none&apos; : &apos;&apos;;
}
}
}
}
</code></pre>
</div>
<footer class="footer">
Generated by <a href="https://esdoc.org">ESDoc<span data-ice="esdocVersion">(0.1.4)</span></a>
</footer>
<script src="script/search_index.js"></script>
<script src="script/search.js"></script>
<script src="script/pretty-print.js"></script>
<script src="script/inherited-summary.js"></script>
<script src="script/test-summary.js"></script>
<script src="script/inner-link.js"></script>
<script src="script/patch-for-local.js"></script>
</body>
</html>