123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531 |
- var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
- function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
- import { addClass, outerHeight, outerWidth } from './../helpers/dom/element';
- import { arrayEach } from './../helpers/array';
- /**
- * @class GhostTable
- * @util
- */
- var GhostTable = function () {
- function GhostTable(hotInstance) {
- _classCallCheck(this, GhostTable);
- /**
- * Handsontable instance.
- *
- * @type {Core}
- */
- this.hot = hotInstance;
- /**
- * Container element where every table will be injected.
- *
- * @type {HTMLElement|null}
- */
- this.container = null;
- /**
- * Flag which determine is table was injected to DOM.
- *
- * @type {Boolean}
- */
- this.injected = false;
- /**
- * Added rows collection.
- *
- * @type {Array}
- */
- this.rows = [];
- /**
- * Added columns collection.
- *
- * @type {Array}
- */
- this.columns = [];
- /**
- * Samples prepared for calculations.
- *
- * @type {Map}
- * @default {null}
- */
- this.samples = null;
- /**
- * Ghost table settings.
- *
- * @type {Object}
- * @default {Object}
- */
- this.settings = {
- useHeaders: true
- };
- }
- /**
- * Add row.
- *
- * @param {Number} row Row index.
- * @param {Map} samples Samples Map object.
- */
- _createClass(GhostTable, [{
- key: 'addRow',
- value: function addRow(row, samples) {
- if (this.columns.length) {
- throw new Error('Doesn\'t support multi-dimensional table');
- }
- if (!this.rows.length) {
- this.container = this.createContainer(this.hot.rootElement.className);
- }
- var rowObject = { row: row };
- this.rows.push(rowObject);
- this.samples = samples;
- this.table = this.createTable(this.hot.table.className);
- this.table.colGroup.appendChild(this.createColGroupsCol());
- this.table.tr.appendChild(this.createRow(row));
- this.container.container.appendChild(this.table.fragment);
- rowObject.table = this.table.table;
- }
- /**
- * Add a row consisting of the column headers.
- */
- }, {
- key: 'addColumnHeadersRow',
- value: function addColumnHeadersRow(samples) {
- if (this.hot.getColHeader(0) != null) {
- var rowObject = { row: -1 };
- this.rows.push(rowObject);
- this.container = this.createContainer(this.hot.rootElement.className);
- this.samples = samples;
- this.table = this.createTable(this.hot.table.className);
- this.table.colGroup.appendChild(this.createColGroupsCol());
- this.table.tHead.appendChild(this.createColumnHeadersRow());
- this.container.container.appendChild(this.table.fragment);
- rowObject.table = this.table.table;
- }
- }
- /**
- * Add column.
- *
- * @param {Number} column Column index.
- * @param {Map} samples Samples Map object.
- */
- }, {
- key: 'addColumn',
- value: function addColumn(column, samples) {
- if (this.rows.length) {
- throw new Error('Doesn\'t support multi-dimensional table');
- }
- if (!this.columns.length) {
- this.container = this.createContainer(this.hot.rootElement.className);
- }
- var columnObject = { col: column };
- this.columns.push(columnObject);
- this.samples = samples;
- this.table = this.createTable(this.hot.table.className);
- if (this.getSetting('useHeaders') && this.hot.getColHeader(column) !== null) {
- this.hot.view.appendColHeader(column, this.table.th);
- }
- this.table.tBody.appendChild(this.createCol(column));
- this.container.container.appendChild(this.table.fragment);
- columnObject.table = this.table.table;
- }
- /**
- * Get calculated heights.
- *
- * @param {Function} callback Callback which will be fired for each calculated row.
- */
- }, {
- key: 'getHeights',
- value: function getHeights(callback) {
- if (!this.injected) {
- this.injectTable();
- }
- arrayEach(this.rows, function (row) {
- // -1 <- reduce border-top from table
- callback(row.row, outerHeight(row.table) - 1);
- });
- }
- /**
- * Get calculated widths.
- *
- * @param {Function} callback Callback which will be fired for each calculated column.
- */
- }, {
- key: 'getWidths',
- value: function getWidths(callback) {
- if (!this.injected) {
- this.injectTable();
- }
- arrayEach(this.columns, function (column) {
- callback(column.col, outerWidth(column.table));
- });
- }
- /**
- * Set the Ghost Table settings to the provided object.
- *
- * @param {Object} settings New Ghost Table Settings
- */
- }, {
- key: 'setSettings',
- value: function setSettings(settings) {
- this.settings = settings;
- }
- /**
- * Set a single setting of the Ghost Table.
- *
- * @param {String} name Setting name.
- * @param {*} value Setting value.
- */
- }, {
- key: 'setSetting',
- value: function setSetting(name, value) {
- if (!this.settings) {
- this.settings = {};
- }
- this.settings[name] = value;
- }
- /**
- * Get the Ghost Table settings.
- *
- * @returns {Object|null}
- */
- }, {
- key: 'getSettings',
- value: function getSettings() {
- return this.settings;
- }
- /**
- * Get a single Ghost Table setting.
- *
- * @param {String} name
- * @returns {Boolean|null}
- */
- }, {
- key: 'getSetting',
- value: function getSetting(name) {
- if (this.settings) {
- return this.settings[name];
- }
- return null;
- }
- /**
- * Create colgroup col elements.
- *
- * @returns {DocumentFragment}
- */
- }, {
- key: 'createColGroupsCol',
- value: function createColGroupsCol() {
- var _this = this;
- var d = document;
- var fragment = d.createDocumentFragment();
- if (this.hot.hasRowHeaders()) {
- fragment.appendChild(this.createColElement(-1));
- }
- this.samples.forEach(function (sample) {
- arrayEach(sample.strings, function (string) {
- fragment.appendChild(_this.createColElement(string.col));
- });
- });
- return fragment;
- }
- /**
- * Create table row element.
- *
- * @param {Number} row Row index.
- * @returns {DocumentFragment} Returns created table row elements.
- */
- }, {
- key: 'createRow',
- value: function createRow(row) {
- var _this2 = this;
- var d = document;
- var fragment = d.createDocumentFragment();
- var th = d.createElement('th');
- if (this.hot.hasRowHeaders()) {
- this.hot.view.appendRowHeader(row, th);
- fragment.appendChild(th);
- }
- this.samples.forEach(function (sample) {
- arrayEach(sample.strings, function (string) {
- var column = string.col;
- var cellProperties = _this2.hot.getCellMeta(row, column);
- cellProperties.col = column;
- cellProperties.row = row;
- var renderer = _this2.hot.getCellRenderer(cellProperties);
- var td = d.createElement('td');
- renderer(_this2.hot, td, row, column, _this2.hot.colToProp(column), string.value, cellProperties);
- fragment.appendChild(td);
- });
- });
- return fragment;
- }
- }, {
- key: 'createColumnHeadersRow',
- value: function createColumnHeadersRow() {
- var _this3 = this;
- var d = document;
- var fragment = d.createDocumentFragment();
- if (this.hot.hasRowHeaders()) {
- var th = d.createElement('th');
- this.hot.view.appendColHeader(-1, th);
- fragment.appendChild(th);
- }
- this.samples.forEach(function (sample) {
- arrayEach(sample.strings, function (string) {
- var column = string.col;
- var th = d.createElement('th');
- _this3.hot.view.appendColHeader(column, th);
- fragment.appendChild(th);
- });
- });
- return fragment;
- }
- /**
- * Create table column elements.
- *
- * @param {Number} column Column index.
- * @returns {DocumentFragment} Returns created column table column elements.
- */
- }, {
- key: 'createCol',
- value: function createCol(column) {
- var _this4 = this;
- var d = document;
- var fragment = d.createDocumentFragment();
- this.samples.forEach(function (sample) {
- arrayEach(sample.strings, function (string) {
- var row = string.row;
- var cellProperties = _this4.hot.getCellMeta(row, column);
- cellProperties.col = column;
- cellProperties.row = row;
- var renderer = _this4.hot.getCellRenderer(cellProperties);
- var td = d.createElement('td');
- var tr = d.createElement('tr');
- renderer(_this4.hot, td, row, column, _this4.hot.colToProp(column), string.value, cellProperties);
- tr.appendChild(td);
- fragment.appendChild(tr);
- });
- });
- return fragment;
- }
- /**
- * Remove table from document and reset internal state.
- */
- }, {
- key: 'clean',
- value: function clean() {
- this.rows.length = 0;
- this.rows[-1] = void 0;
- this.columns.length = 0;
- if (this.samples) {
- this.samples.clear();
- }
- this.samples = null;
- this.removeTable();
- }
- /**
- * Inject generated table into document.
- *
- * @param {HTMLElement} [parent=null]
- */
- }, {
- key: 'injectTable',
- value: function injectTable() {
- var parent = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
- if (!this.injected) {
- (parent || this.hot.rootElement).appendChild(this.container.fragment);
- this.injected = true;
- }
- }
- /**
- * Remove table from document.
- */
- }, {
- key: 'removeTable',
- value: function removeTable() {
- if (this.injected && this.container.container.parentNode) {
- this.container.container.parentNode.removeChild(this.container.container);
- this.container = null;
- this.injected = false;
- }
- }
- /**
- * Create col element.
- *
- * @param {Number} column Column index.
- * @returns {HTMLElement}
- */
- }, {
- key: 'createColElement',
- value: function createColElement(column) {
- var d = document;
- var col = d.createElement('col');
- col.style.width = this.hot.view.wt.wtTable.getStretchedColumnWidth(column) + 'px';
- return col;
- }
- /**
- * Create table element.
- *
- * @param {String} className
- * @returns {Object}
- */
- }, {
- key: 'createTable',
- value: function createTable() {
- var className = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
- var d = document;
- var fragment = d.createDocumentFragment();
- var table = d.createElement('table');
- var tHead = d.createElement('thead');
- var tBody = d.createElement('tbody');
- var colGroup = d.createElement('colgroup');
- var tr = d.createElement('tr');
- var th = d.createElement('th');
- if (this.isVertical()) {
- table.appendChild(colGroup);
- }
- if (this.isHorizontal()) {
- tr.appendChild(th);
- tHead.appendChild(tr);
- table.style.tableLayout = 'auto';
- table.style.width = 'auto';
- }
- table.appendChild(tHead);
- if (this.isVertical()) {
- tBody.appendChild(tr);
- }
- table.appendChild(tBody);
- addClass(table, className);
- fragment.appendChild(table);
- return { fragment: fragment, table: table, tHead: tHead, tBody: tBody, colGroup: colGroup, tr: tr, th: th };
- }
- /**
- * Create container for tables.
- *
- * @param {String} className
- * @returns {Object}
- */
- }, {
- key: 'createContainer',
- value: function createContainer() {
- var className = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
- var d = document;
- var fragment = d.createDocumentFragment();
- var container = d.createElement('div');
- className = 'htGhostTable htAutoSize ' + className.trim();
- addClass(container, className);
- fragment.appendChild(container);
- return { fragment: fragment, container: container };
- }
- /**
- * Checks if table is raised vertically (checking rows).
- *
- * @returns {Boolean}
- */
- }, {
- key: 'isVertical',
- value: function isVertical() {
- return !!(this.rows.length && !this.columns.length);
- }
- /**
- * Checks if table is raised horizontally (checking columns).
- *
- * @returns {Boolean}
- */
- }, {
- key: 'isHorizontal',
- value: function isHorizontal() {
- return !!(this.columns.length && !this.rows.length);
- }
- }]);
- return GhostTable;
- }();
- export default GhostTable;
|