deblan-mirror/TableFilter
1
0
Fork 0
mirror of https://github.com/koalyptus/TableFilter.git synced 2024-06-03 14:32:21 +02:00
Code Issues Releases Wiki Activity
TableFilter/docs/file/src/extensions/colsVisibility/colsVisibility.js.html
koalyptus 4481fbe361 publish Docs to gh-pages (auto) 
branch:       master
SHA:          c7d6de72f7
range SHA:    81f31a3106fb...c7d6de72f785
build id:     375208741
build number: 1103
2018-05-05 08:21:30 +00:00

880 lines
42 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<base data-ice="baseUrl" href="../../../../">
<title data-ice="title">src/extensions/colsVisibility/colsVisibility.js | tablefilter</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>
<script src="script/manual.js"></script>
<meta name="description" content="A Javascript library making HTML tables filterable and a bit more"><meta property="twitter:card" content="summary"><meta property="twitter:title" content="tablefilter"><meta property="twitter:description" content="A Javascript library making HTML tables filterable and a bit more"></head>
<body class="layout-container" data-ice="rootContainer">
<header>
<a href="./">Home</a>
<a href="identifiers.html">Reference</a>
<a href="source.html">Source</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>
<a style="position:relative; top:3px;" href="https://github.com/koalyptus/TableFilter.git"><img width="20px" src="./image/github.png"></a></header>
<nav class="navigation" data-ice="nav"><div>
<ul>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/emitter.js~Emitter.html">Emitter</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/feature.js~Feature.html">Feature</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/tablefilter.js~TableFilter.html">TableFilter</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-has">has</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-addClass">addClass</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-createCheckItem">createCheckItem</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-createElm">createElm</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-createOpt">createOpt</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-createText">createText</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-elm">elm</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-getFirstTextNode">getFirstTextNode</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-getText">getText</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-hasClass">hasClass</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-removeClass">removeClass</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-removeElm">removeElm</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-tag">tag</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-addEvt">addEvt</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-cancelEvt">cancelEvt</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-isKeyPressed">isKeyPressed</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-keyCode">keyCode</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-removeEvt">removeEvt</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-stopEvt">stopEvt</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-targetEvt">targetEvt</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-parse">parse</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-defaultsArr">defaultsArr</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-defaultsBool">defaultsBool</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-defaultsFn">defaultsFn</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-defaultsNb">defaultsNb</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-defaultsStr">defaultsStr</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-dateSortAsc">dateSortAsc</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-dateSortDesc">dateSortDesc</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-ignoreCase">ignoreCase</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-numSortAsc">numSortAsc</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-numSortDesc">numSortDesc</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-sortDateStr">sortDateStr</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-sortNumberStr">sortNumberStr</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-contains">contains</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-isEmpty">isEmpty</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-matchCase">matchCase</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-rgxEsc">rgxEsc</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-trim">trim</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-EMPTY_FN">EMPTY_FN</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-isArray">isArray</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-isBoolean">isBoolean</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-isEmpty">isEmpty</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-isFn">isFn</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-isNull">isNull</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-isNumber">isNumber</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-isObj">isObj</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-isString">isString</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-isUndef">isUndef</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-variable">V</span><span data-ice="name"><span><a href="variable/index.html#static-variable-AUTO_FILTER_DELAY">AUTO_FILTER_DELAY</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-variable">V</span><span data-ice="name"><span><a href="variable/index.html#static-variable-CELL_TAG">CELL_TAG</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-variable">V</span><span data-ice="name"><span><a href="variable/index.html#static-variable-CHECKLIST">CHECKLIST</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-variable">V</span><span data-ice="name"><span><a href="variable/index.html#static-variable-DATE">DATE</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-variable">V</span><span data-ice="name"><span><a href="variable/index.html#static-variable-DOWN_ARROW_KEY">DOWN_ARROW_KEY</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-variable">V</span><span data-ice="name"><span><a href="variable/index.html#static-variable-ENTER_KEY">ENTER_KEY</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-variable">V</span><span data-ice="name"><span><a href="variable/index.html#static-variable-ESC_KEY">ESC_KEY</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-variable">V</span><span data-ice="name"><span><a href="variable/index.html#static-variable-FEATURES">FEATURES</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-variable">V</span><span data-ice="name"><span><a href="variable/index.html#static-variable-FORMATTED_NUMBER">FORMATTED_NUMBER</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-variable">V</span><span data-ice="name"><span><a href="variable/index.html#static-variable-HEADER_TAG">HEADER_TAG</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-variable">V</span><span data-ice="name"><span><a href="variable/index.html#static-variable-INPUT">INPUT</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-variable">V</span><span data-ice="name"><span><a href="variable/index.html#static-variable-IP_ADDRESS">IP_ADDRESS</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-variable">V</span><span data-ice="name"><span><a href="variable/index.html#static-variable-MULTIPLE">MULTIPLE</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-variable">V</span><span data-ice="name"><span><a href="variable/index.html#static-variable-NONE">NONE</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-variable">V</span><span data-ice="name"><span><a href="variable/index.html#static-variable-NUMBER">NUMBER</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-variable">V</span><span data-ice="name"><span><a href="variable/index.html#static-variable-SELECT">SELECT</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-variable">V</span><span data-ice="name"><span><a href="variable/index.html#static-variable-STRING">STRING</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-variable">V</span><span data-ice="name"><span><a href="variable/index.html#static-variable-TAB_KEY">TAB_KEY</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-variable">V</span><span data-ice="name"><span><a href="variable/index.html#static-variable-UP_ARROW_KEY">UP_ARROW_KEY</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-variable">V</span><span data-ice="name"><span><a href="variable/index.html#static-variable-root">root</a></span></span></li>
<li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#extensions-advancedgrid">extensions/advancedGrid</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/extensions/advancedGrid/adapterEzEditTable.js~AdapterEzEditTable.html">AdapterEzEditTable</a></span></span></li>
<li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#extensions-colops">extensions/colOps</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/extensions/colOps/colOps.js~ColOps.html">ColOps</a></span></span></li>
<li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#extensions-colsvisibility">extensions/colsVisibility</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/extensions/colsVisibility/colsVisibility.js~ColsVisibility.html">ColsVisibility</a></span></span></li>
<li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#extensions-filtersvisibility">extensions/filtersVisibility</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/extensions/filtersVisibility/filtersVisibility.js~FiltersVisibility.html">FiltersVisibility</a></span></span></li>
<li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#extensions-sort">extensions/sort</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/extensions/sort/adapterSortabletable.js~AdapterSortableTable.html">AdapterSortableTable</a></span></span></li>
<li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#modules">modules</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/modules/alternateRows.js~AlternateRows.html">AlternateRows</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/modules/baseDropdown.js~BaseDropdown.html">BaseDropdown</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/modules/checkList.js~CheckList.html">CheckList</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/modules/clearButton.js~ClearButton.html">ClearButton</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/modules/dateType.js~DateType.html">DateType</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/modules/dropdown.js~Dropdown.html">Dropdown</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/modules/gridLayout.js~GridLayout.html">GridLayout</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/modules/hash.js~Hash.html">Hash</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/modules/help.js~Help.html">Help</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/modules/highlightKeywords.js~HighlightKeyword.html">HighlightKeyword</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/modules/loader.js~Loader.html">Loader</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/modules/markActiveColumns.js~MarkActiveColumns.html">MarkActiveColumns</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/modules/noResults.js~NoResults.html">NoResults</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/modules/paging.js~Paging.html">Paging</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/modules/popupFilter.js~PopupFilter.html">PopupFilter</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/modules/rowsCounter.js~RowsCounter.html">RowsCounter</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/modules/state.js~State.html">State</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/modules/statusBar.js~StatusBar.html">StatusBar</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/modules/storage.js~Storage.html">Storage</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/modules/toolbar.js~Toolbar.html">Toolbar</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-hasHashChange">hasHashChange</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-hasStorage">hasStorage</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-variable">V</span><span data-ice="name"><span><a href="variable/index.html#static-variable-CENTER">CENTER</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-variable">V</span><span data-ice="name"><span><a href="variable/index.html#static-variable-LEFT">LEFT</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-variable">V</span><span data-ice="name"><span><a href="variable/index.html#static-variable-RIGHT">RIGHT</a></span></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 raw-source-code"><code class="prettyprint linenums" data-ice="content">import {Feature} from &apos;../../feature&apos;;
import {
addClass, removeClass, createCheckItem, createElm, elm, removeElm,
getText, tag
} from &apos;../../dom&apos;;
import {isUndef, EMPTY_FN, isNull} from &apos;../../types&apos;;
import {addEvt, targetEvt, removeEvt} from &apos;../../event&apos;;
import {root} from &apos;../../root&apos;;
import {NONE} from &apos;../../const&apos;;
import {
defaultsBool, defaultsStr, defaultsFn, defaultsNb, defaultsArr
} from &apos;../../settings&apos;;
import {RIGHT} from &apos;../../modules/toolbar&apos;;
/**
* Columns Visibility extension
*/
export default class ColsVisibility extends Feature {
/**
* Creates an instance of ColsVisibility
* @param {TableFilter} tf TableFilter instance
* @param {Object} Configuration object
*/
constructor(tf, f) {
super(tf, f.name);
// Configuration object
let cfg = this.config;
/**
* Module name
* @type {String}
*/
this.name = f.name;
/**
* Module description
* @type {String}
*/
this.desc = defaultsStr(f.description, &apos;Columns visibility manager&apos;);
/**
* show/hide columns container element
* @private
*/
this.spanEl = null;
/**
* show/hide columns button element
* @private
*/
this.btnEl = null;
/**
* show/hide columns main container element
* @private
*/
this.contEl = null;
/**
* Enable tick to hide a column, defaults to true
* @type {Boolean}
*/
this.tickToHide = defaultsBool(f.tick_to_hide, true);
/**
* Enable columns manager UI, defaults to true
* @type {Boolean}
*/
this.manager = defaultsBool(f.manager, true);
/**
* Headers HTML table reference only if headers are external
* @type {DOMElement}
*/
this.headersTbl = f.headers_table || null;
/**
* Headers row index only if headers are external
* @type {Number}
*/
this.headersIndex = defaultsNb(f.headers_index, 1);
/**
* ID of main container element
* @type {String}
*/
this.contElTgtId = defaultsStr(f.container_target_id, null);
/**
* Alternative text for column headers in column manager UI
* @type {Array}
*/
this.headersText = defaultsArr(f.headers_text, []);
/**
* ID of button&apos;s container element
* @type {String}
*/
this.btnTgtId = defaultsStr(f.btn_target_id, null);
/**
* Button&apos;s text, defaults to Columns&amp;#9660;
* @type {String}
*/
this.btnText = defaultsStr(f.btn_text, &apos;Columns&amp;#9660;&apos;);
/**
* Button&apos;s inner HTML
* @type {String}
*/
this.btnHtml = defaultsStr(f.btn_html, null);
/**
* Css class for button
* @type {String}
*/
this.btnCssClass = defaultsStr(f.btn_css_class, &apos;colVis&apos;);
/**
* Columns manager UI close link text, defaults to &apos;Close&apos;
* @type {String}
*/
this.btnCloseText = defaultsStr(f.btn_close_text, &apos;Close&apos;);
/**
* Columns manager UI close link HTML
* @type {String}
*/
this.btnCloseHtml = defaultsStr(f.btn_close_html, null);
/**
* Css for columns manager UI close link
* @type {String}
*/
this.btnCloseCssClass = defaultsStr(f.btn_close_css_class,
this.btnCssClass);
/**
* Extension&apos;s stylesheet filename
* @type {String}
*/
this.stylesheet = defaultsStr(f.stylesheet, &apos;colsVisibility.css&apos;);
/**
* Css for columns manager UI span
* @type {String}
*/
this.spanCssClass = defaultsStr(f.span_css_class, &apos;colVisSpan&apos;);
/**
* Css for columns manager UI main container
* @type {String}
*/
this.contCssClass = defaultsStr(f.cont_css_class, &apos;colVisCont&apos;);
/**
* Css for columns manager UI checklist (ul)
* @type {String}
*/
this.listCssClass = defaultsStr(cfg.list_css_class, &apos;cols_checklist&apos;);
/**
* Css for columns manager UI checklist item (li)
* @type {String}
*/
this.listItemCssClass = defaultsStr(cfg.checklist_item_css_class,
&apos;cols_checklist_item&apos;);
/**
* Css for columns manager UI checklist item selected state (li)
* @type {String}
*/
this.listSlcItemCssClass = defaultsStr(
cfg.checklist_selected_item_css_class,
&apos;cols_checklist_slc_item&apos;
);
/**
* Text preceding the columns list, defaults to &apos;Hide&apos; or &apos;Show&apos;
* depending on tick mode (tick_to_hide option)
* @type {String}
*/
this.text = defaultsStr(f.text, this.tickToHide ? &apos;Hide: &apos; : &apos;Show: &apos;);
/**
* List of columns indexes to be hidden at initialization
* @type {Array}
*/
this.atStart = defaultsArr(f.at_start, []);
/**
* Enable hover behaviour on columns manager button/link
* @type {Boolean}
*/
this.enableHover = Boolean(f.enable_hover);
/**
* Enable select all option, disabled by default
* @type {Boolean}
*/
this.enableTickAll = Boolean(f.enable_tick_all);
/**
* Text for select all option, defaults to &apos;Select all:&apos;
* @type {String}
*/
this.tickAllText = defaultsStr(f.tick_all_text, &apos;Select all:&apos;);
/**
* Default position in toolbar (&apos;left&apos;|&apos;center&apos;|&apos;right&apos;)
* @type {String}
*/
this.toolbarPosition = defaultsStr(f.toolbar_position, RIGHT);
/**
* List of indexes of hidden columns
* @private
*/
this.hiddenCols = [];
/**
* Bound mouseup wrapper
* @private
*/
this.boundMouseup = null;
/**
* Callback fired when the extension is initialized
* @type {Function}
*/
this.onLoaded = defaultsFn(f.on_loaded, EMPTY_FN);
/**
* Callback fired before the columns manager is opened
* @type {Function}
*/
this.onBeforeOpen = defaultsFn(f.on_before_open, EMPTY_FN);
/**
* Callback fired after the columns manager is opened
* @type {Function}
*/
this.onAfterOpen = defaultsFn(f.on_after_open, EMPTY_FN);
/**
* Callback fired before the columns manager is closed
* @type {Function}
*/
this.onBeforeClose = defaultsFn(f.on_before_close, EMPTY_FN);
/**
* Callback fired after the columns manager is closed
* @type {Function}
*/
this.onAfterClose = defaultsFn(f.on_after_close, EMPTY_FN);
/**
* Callback fired before a column is hidden
* @type {Function}
*/
this.onBeforeColHidden = defaultsFn(f.on_before_col_hidden, EMPTY_FN);
/**
* Callback fired after a column is hidden
* @type {Function}
*/
this.onAfterColHidden = defaultsFn(f.on_after_col_hidden, EMPTY_FN);
/**
* Callback fired before a column is displayed
* @type {Function}
*/
this.onBeforeColDisplayed = defaultsFn(f.on_before_col_displayed,
EMPTY_FN);
/**
* Callback fired after a column is displayed
* @type {Function}
*/
this.onAfterColDisplayed = defaultsFn(f.on_after_col_displayed,
EMPTY_FN);
//Grid layout support
if (tf.gridLayout) {
this.headersTbl = tf.feature(&apos;gridLayout&apos;).headTbl; //headers table
this.headersIndex = 0; //headers index
}
//Loads extension stylesheet
tf.import(f.name + &apos;Style&apos;, tf.getStylePath() + this.stylesheet, null,
&apos;link&apos;);
this.enable();
}
/**
* Mouse-up event handler handling popup auto-close behaviour
* @private
*/
onMouseup(evt) {
let targetElm = targetEvt(evt);
while (targetElm &amp;&amp; targetElm !== this.contEl
&amp;&amp; targetElm !== this.btnEl) {
targetElm = targetElm.parentNode;
}
if (targetElm !== this.contEl &amp;&amp; targetElm !== this.btnEl) {
this.toggle();
}
return;
}
/**
* Toggle columns manager UI
*/
toggle() {
// ensure mouseup event handler is removed
removeEvt(root, &apos;mouseup&apos;, this.boundMouseup);
let contDisplay = this.contEl.style.display;
if (contDisplay !== &apos;inline&apos;) {
this.onBeforeOpen(this);
}
if (contDisplay === &apos;inline&apos;) {
this.onBeforeClose(this);
}
this.contEl.style.display = contDisplay === &apos;inline&apos; ?
NONE : &apos;inline&apos;;
if (contDisplay !== &apos;inline&apos;) {
this.onAfterOpen(this);
addEvt(root, &apos;mouseup&apos;, this.boundMouseup);
}
if (contDisplay === &apos;inline&apos;) {
this.onAfterClose(this);
}
}
/**
* Check an item in columns manager UI
* @private
*/
checkItem(lbl) {
let li = lbl.parentNode;
if (!li || !lbl) {
return;
}
let isChecked = lbl.firstChild.checked;
let colIndex = lbl.firstChild.getAttribute(&apos;id&apos;).split(&apos;_&apos;)[1];
colIndex = parseInt(colIndex, 10);
if (isChecked) {
addClass(li, this.listSlcItemCssClass);
} else {
removeClass(li, this.listSlcItemCssClass);
}
let hide = false;
if ((this.tickToHide &amp;&amp; isChecked) ||
(!this.tickToHide &amp;&amp; !isChecked)) {
hide = true;
}
this.setHidden(colIndex, hide);
}
/**
* Initializes ColsVisibility instance
*/
init() {
if (this.initialized || !this.manager) {
return;
}
this.emitter.emit(&apos;initializing-extension&apos;, this,
!isNull(this.btnTgtId));
this.emitter.on([&apos;hide-column&apos;],
(tf, colIndex) =&gt; this.hideCol(colIndex));
this.buildBtn();
this.buildManager();
/** @inherited */
this.initialized = true;
this.boundMouseup = this.onMouseup.bind(this);
this.emitter.emit(&apos;columns-visibility-initialized&apos;, this.tf, this);
this.emitter.emit(&apos;extension-initialized&apos;, this);
// Hide columns at start at very end of initialization, do not move
// as order is important
this._hideAtStart();
}
/**
* Build main button UI
*/
buildBtn() {
if (this.btnEl) {
return;
}
let tf = this.tf;
let span = createElm(&apos;span&apos;);
span.className = this.spanCssClass;
// Container element (rdiv or custom element)
let targetEl = !this.btnTgtId ?
tf.feature(&apos;toolbar&apos;).container(this.toolbarPosition) :
elm(this.btnTgtId);
if (!this.btnTgtId) {
let firstChild = targetEl.firstChild;
firstChild.parentNode.insertBefore(span, firstChild);
} else {
targetEl.appendChild(span);
}
if (!this.btnHtml) {
let btn = createElm(&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) {
addEvt(btn, &apos;click&apos;, (evt) =&gt; this.toggle(evt));
} else {
addEvt(btn, &apos;mouseover&apos;, (evt) =&gt; this.toggle(evt));
}
} else { // Custom html
span.innerHTML = this.btnHtml;
let colVisEl = span.firstChild;
if (!this.enableHover) {
addEvt(colVisEl, &apos;click&apos;, (evt) =&gt; this.toggle(evt));
} else {
addEvt(colVisEl, &apos;mouseover&apos;, (evt) =&gt; this.toggle(evt));
}
}
this.spanEl = span;
this.btnEl = this.spanEl.firstChild;
this.onLoaded(this);
}
/**
* Build columns manager UI
*/
buildManager() {
let tf = this.tf;
let container = !this.contElTgtId ?
createElm(&apos;div&apos;) :
elm(this.contElTgtId);
container.className = this.contCssClass;
//Extension description
let extNameLabel = createElm(&apos;p&apos;);
extNameLabel.innerHTML = this.text;
container.appendChild(extNameLabel);
//Headers list
let ul = createElm(&apos;ul&apos;);
ul.className = this.listCssClass;
let tbl = this.headersTbl || tf.dom();
let headerIndex = this.headersTbl ?
this.headersIndex : tf.getHeadersRowIndex();
let headerRow = tbl.rows[headerIndex];
//Tick all option
if (this.enableTickAll) {
let li = createCheckItem(&apos;col__&apos; + tf.id, this.tickAllText,
this.tickAllText);
addClass(li, this.listItemCssClass);
ul.appendChild(li);
li.check.checked = !this.tickToHide;
addEvt(li.check, &apos;click&apos;, () =&gt; {
for (let h = 0; h &lt; headerRow.cells.length; h++) {
let itm = elm(&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 (let i = 0; i &lt; headerRow.cells.length; i++) {
let cell = headerRow.cells[i];
let cellText = this.headersText[i] || this._getHeaderText(cell);
let liElm = createCheckItem(&apos;col_&apos; + i + &apos;_&apos; + tf.id, cellText,
cellText);
addClass(liElm, this.listItemCssClass);
if (!this.tickToHide) {
addClass(liElm, this.listSlcItemCssClass);
}
ul.appendChild(liElm);
if (!this.tickToHide) {
liElm.check.checked = true;
}
addEvt(liElm.check, &apos;click&apos;, (evt) =&gt; {
let elm = targetEvt(evt);
let lbl = elm.parentNode;
this.checkItem(lbl);
});
}
//separator
let p = createElm(&apos;p&apos;, [&apos;align&apos;, &apos;center&apos;]);
let btn;
//Close link
if (!this.btnCloseHtml) {
btn = createElm(&apos;a&apos;, [&apos;href&apos;, &apos;javascript:;&apos;]);
btn.className = this.btnCloseCssClass;
btn.innerHTML = this.btnCloseText;
addEvt(btn, &apos;click&apos;, (evt) =&gt; this.toggle(evt));
p.appendChild(btn);
} else {
p.innerHTML = this.btnCloseHtml;
btn = p.firstChild;
addEvt(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;
}
/**
* Hide or show specified columns
* @param {Number} colIndex Column index
* @param {Boolean} hide Hide column if true or show if false
*/
setHidden(colIndex, hide) {
let tf = this.tf;
let tbl = tf.dom();
if (hide) {
this.onBeforeColHidden(this, colIndex);
} else {
this.onBeforeColDisplayed(this, colIndex);
}
this._hideElements(tbl, colIndex, hide);
if (this.headersTbl) {
this._hideElements(this.headersTbl, colIndex, hide);
}
let hiddenCols = this.hiddenCols;
let itemIndex = hiddenCols.indexOf(colIndex);
if (hide) {
if (itemIndex === -1) {
this.hiddenCols.push(colIndex);
}
} else {
if (itemIndex !== -1) {
this.hiddenCols.splice(itemIndex, 1);
}
}
if (hide) {
this.onAfterColHidden(this, colIndex);
this.emitter.emit(&apos;column-hidden&apos;, tf, this, colIndex,
this.hiddenCols);
} else {
this.onAfterColDisplayed(this, colIndex);
this.emitter.emit(&apos;column-shown&apos;, tf, this, colIndex,
this.hiddenCols);
}
}
/**
* Show specified column
* @param {Number} colIndex Column index
*/
showCol(colIndex) {
if (isUndef(colIndex) || !this.isColHidden(colIndex)) {
return;
}
if (this.manager &amp;&amp; this.contEl) {
let itm = elm(&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 (isUndef(colIndex) || this.isColHidden(colIndex)) {
return;
}
if (this.manager &amp;&amp; this.contEl) {
let itm = elm(&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 (isUndef(colIndex) || this.isColHidden(colIndex)) {
this.showCol(colIndex);
} else {
this.hideCol(colIndex);
}
}
/**
* Return the indexes of the columns currently hidden
* @return {Array} column indexes
*/
getHiddenCols() {
return this.hiddenCols;
}
/**
* Remove the columns manager
*/
destroy() {
if (!this.initialized) {
return;
}
if (elm(this.contElTgtId)) {
elm(this.contElTgtId).innerHTML = &apos;&apos;;
} else {
this.contEl.innerHTML = &apos;&apos;;
removeElm(this.contEl);
this.contEl = null;
}
this.btnEl.innerHTML = &apos;&apos;;
removeElm(this.btnEl);
this.btnEl = null;
this.emitter.off([&apos;hide-column&apos;],
(tf, colIndex) =&gt; this.hideCol(colIndex));
this.boundMouseup = null;
this.initialized = false;
}
_getHeaderText(cell) {
if (!cell.hasChildNodes) {
return &apos;&apos;;
}
for (let i = 0; i &lt; cell.childNodes.length; i++) {
let 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 getText(n);
}
}
continue;
}
return &apos;&apos;;
}
_hideElements(tbl, colIdx, hide) {
this._hideCells(tbl, colIdx, hide);
this._hideCol(tbl, colIdx, hide);
}
_hideCells(tbl, colIdx, hide) {
for (let i = 0; i &lt; tbl.rows.length; i++) {
let row = tbl.rows[i];
let cell = row.cells[colIdx];
if (cell) {
cell.style.display = hide ? NONE : &apos;&apos;;
}
}
}
_hideCol(tbl, colIdx, hide) {
let colElms = tag(this.tf.dom(), &apos;col&apos;);
if (colElms.length === 0) {
return;
}
colElms[colIdx].style.display = hide ? NONE : &apos;&apos;;
}
_hideAtStart() {
this.atStart.forEach((colIdx) =&gt; {
this.hideCol(colIdx);
});
}
}
</code></pre>
</div>
<footer class="footer">
Generated by <a href="https://esdoc.org">ESDoc<span data-ice="esdocVersion">(1.1.0)</span><img src="./image/esdoc-logo-mini-black.png"></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>
Reference in a new issue View git blame Copy permalink