jingrow/datatable
1
0
Fork 0
Code Pull Requests Activity

Removed jQuery 💃

Browse Source
This commit is contained in:
Faris Ansari 2017-11-05 21:31:20 +05:30
parent 1d7278d3d6
commit 785cf8f466
11 changed files with 644 additions and 426 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.eslintrc
View File

@ -22,7 +22,7 @@
"it": true,
"expect": true,
"sinon": true,
"$": true
"Clusterize": true
},
"parser": "babel-eslint",

4
index.html
View File

@ -21,11 +21,11 @@
<section style="width: 60%; font-size: 12px;">
</section>
<script src="./node_modules/jquery/dist/jquery.js"></script>
<script src="./node_modules/clusterize.js/clusterize.js"></script>
<script src="./lib/frappe-datatable.js"></script>
<script>
$(() => {
document.addEventListener('DOMContentLoaded', () => {
var data = {
"columns": [

585
lib/frappe-datatable.js
View File

File diff suppressed because it is too large Load Diff

2
lib/frappe-datatable.js.map
View File

File diff suppressed because one or more lines are too long

109
src/cellmanager.js
View File

@ -1,23 +1,18 @@
import { getCellContent, copyTextToClipboard } from './utils';
import keyboard from 'keyboard';
import perf from './performance';
import $ from './dom';
export default class CellManager {
constructor(instance) {
this.instance = instance;
this.wrapper = this.instance.wrapper;
this.options = this.instance.options;
this.style = this.instance.style;
this.bodyScrollable = this.instance.bodyScrollable;
this.prepare();
this.bindEvents();
}
prepare() {
this.$borderOutline = this.instance.$borders.find('.border-outline');
this.$borderBg = this.instance.$borders.find('.border-background');
}
bindEvents() {
this.bindFocusCell();
this.bindEditCell();
@ -31,11 +26,10 @@ export default class CellManager {
}
bindEditCell() {
const self = this;
this.$editingCell = null;
this.bodyScrollable.on('dblclick', '.data-table-col', function () {
self.activateEditing($(this));
$.on(this.bodyScrollable, 'dblclick', '.data-table-col', (e, cell) => {
this.activateEditing(cell);
});
keyboard.on('enter', (e) => {
@ -49,8 +43,8 @@ export default class CellManager {
}
});
$(document.body).on('click', e => {
if ($(e.target).is('.edit-cell, .edit-cell *')) return;
$.on(document.body, 'click', e => {
if (e.target.matches('.edit-cell, .edit-cell *')) return;
this.deactivateEditing();
});
}
@ -161,23 +155,23 @@ export default class CellManager {
bindMouseEvents() {
let mouseDown = null;
this.bodyScrollable.on('mousedown', '.data-table-col', (e) => {
$.on(this.bodyScrollable, 'mousedown', '.data-table-col', (e) => {
mouseDown = true;
this.focusCell($(e.currentTarget));
this.focusCell($(e.delegatedTarget));
});
this.bodyScrollable.on('mouseup', () => {
$.on(this.bodyScrollable, 'mouseup', () => {
mouseDown = false;
});
this.bodyScrollable.on('mousemove', '.data-table-col', (e) => {
$.on(this.bodyScrollable, 'mousemove', '.data-table-col', (e) => {
if (!mouseDown) return;
this.selectArea($(e.currentTarget));
this.selectArea($(e.delegatedTarget));
});
}
focusCell($cell) {
if (!$cell.length) return;
if (!$cell) return;
const { colIndex } = this.getCellAttr($cell);
@ -193,11 +187,11 @@ export default class CellManager {
}
if (this.$focusedCell) {
this.$focusedCell.removeClass('selected');
this.$focusedCell.classList.remove('selected');
}
this.$focusedCell = $cell;
$cell.addClass('selected');
$cell.classList.add('selected');
this.highlightRowColumnHeader($cell);
}
@ -209,13 +203,13 @@ export default class CellManager {
const rowHeaderSelector = `.data-table-col[data-row-index="${rowIndex}"][data-col-index="${_colIndex}"]`;
if (this.lastHeaders) {
this.style.unset(this.lastHeaders, 'backgroundColor');
$.removeStyle(this.lastHeaders, 'backgroundColor');
}
const colHeader = document.querySelector(colHeaderSelector);
const rowHeader = document.querySelector(rowHeaderSelector);
const colHeader = $(colHeaderSelector, this.wrapper);
const rowHeader = $(rowHeaderSelector, this.wrapper);
this.style.set([colHeader, rowHeader], {
$.style([colHeader, rowHeader], {
backgroundColor: 'var(--light-bg)'
});
@ -232,13 +226,11 @@ export default class CellManager {
};
_selectArea($cell1, $cell2) {
const cells = this.getCellsInRange(...arguments);
const cells = this.getCellsInRange($cell1, $cell2);
if (!cells) return false;
this.clearSelection();
const $cells = cells.map(([c, r]) => this.getCell$(r, c)[0]);
$($cells).addClass('highlight');
this.clearSelection();
cells.map(index => this.getCell$(...index)).map($cell => $cell.classList.add('highlight'));
return true;
}
@ -250,7 +242,7 @@ export default class CellManager {
} else
if (typeof $cell1 === 'object') {
if (!($cell1.length && $cell2.length)) {
if (!($cell1 && $cell2)) {
return false;
}
@ -297,7 +289,9 @@ export default class CellManager {
}
clearSelection() {
this.bodyScrollable.find('.data-table-col.highlight').removeClass('highlight');
$.each('.data-table-col.highlight', this.bodyScrollable)
.map(cell => cell.classList.remove('highlight'));
this.$selectionCursor = null;
}
@ -323,9 +317,11 @@ export default class CellManager {
}
this.$editingCell = $cell;
$cell.addClass('editing');
$cell.classList.add('editing');
const $editCell = $('.edit-cell', $cell);
$editCell.innerHTML = '';
const $editCell = $cell.find('.edit-cell').empty();
const cell = this.getCell(colIndex, rowIndex);
const editing = this.getEditingObject(colIndex, rowIndex, cell.content, $editCell);
@ -338,7 +334,7 @@ export default class CellManager {
deactivateEditing() {
if (!this.$editingCell) return;
this.$editingCell.removeClass('editing');
this.$editingCell.classList.remove('editing');
this.$editingCell = null;
}
@ -348,20 +344,21 @@ export default class CellManager {
}
// editing fallback
const $input = $('<input type="text" />');
parent.append($input);
const $input = $.create('input', {
type: 'text',
inside: parent
});
return {
initValue(value) {
$input.focus();
return $input.val(value);
$input.value = value;
},
getValue() {
return $input.val();
return $input.value;
},
setValue(value) {
return $input.val(value);
$input.value = value;
}
};
}
@ -391,7 +388,7 @@ export default class CellManager {
}
copyCellContents($cell1, $cell2) {
const cells = this.getCellsInRange(...arguments);
const cells = this.getCellsInRange($cell1, $cell2);
if (!cells) return;
@ -424,9 +421,9 @@ export default class CellManager {
refreshCell(cell) {
const selector = `.data-table-col[data-row-index="${cell.rowIndex}"][data-col-index="${cell.colIndex}"]`;
const $cell = this.bodyScrollable.find(selector);
const $cell = $(selector, this.bodyScrollable);
$cell.html(getCellContent(cell));
$cell.innerHTML = getCellContent(cell);
}
isStandardCell(colIndex) {
@ -434,30 +431,30 @@ export default class CellManager {
return colIndex < this.instance.getFirstColumnIndex();
}
getCell$(rowIndex, colIndex) {
return this.bodyScrollable.find(`.data-table-col[data-row-index="${rowIndex}"][data-col-index="${colIndex}"]`);
getCell$(colIndex, rowIndex) {
return $(`.data-table-col[data-row-index="${rowIndex}"][data-col-index="${colIndex}"]`, this.bodyScrollable);
}
getAboveCell$($cell) {
const { colIndex } = this.getCellAttr($cell);
const $aboveRow = $cell.parent().prev();
const $aboveRow = $cell.parentElement.previousElementSibling;
return $aboveRow.find(`[data-col-index="${colIndex}"]`);
return $(`[data-col-index="${colIndex}"]`, $aboveRow);
}
getBelowCell$($cell) {
const { colIndex } = this.getCellAttr($cell);
const $belowRow = $cell.parent().next();
const $belowRow = $cell.parentElement.nextElementSibling;
return $belowRow.find(`[data-col-index="${colIndex}"]`);
return $(`[data-col-index="${colIndex}"]`, $belowRow);
}
getLeftCell$($cell) {
return $cell.prev();
return $cell.previousElementSibling;
}
getRightCell$($cell) {
return $cell.next();
return $cell.nextElementSibling;
}
getLeftMostCell$(rowIndex) {
@ -481,11 +478,11 @@ export default class CellManager {
}
getCellAttr($cell) {
return $cell.data();
return this.instance.getCellAttr($cell);
}
getRowHeight() {
return this.bodyScrollable.find('.data-table-row:first').height();
return $.style($('.data-table-row', this.bodyScrollable), 'height');
}
inViewport($cell) {
@ -504,7 +501,7 @@ export default class CellManager {
const rowHeight = this.getRowHeight();
const rowOffset = rowIndex * rowHeight;
const scrollTopOffset = this.bodyScrollable[0].scrollTop;
const scrollTopOffset = this.bodyScrollable.scrollTop;
if (rowOffset - scrollTopOffset + rowHeight < viewportHeight) {
return true;
@ -526,7 +523,7 @@ export default class CellManager {
scrollToRow(rowIndex) {
const offset = rowIndex * this.getRowHeight();
this.bodyScrollable[0].scrollTop = offset;
this.bodyScrollable.scrollTop = offset;
}
}

3
src/datamanager.js
View File

@ -36,7 +36,8 @@ export default class DataManager {
const val = {
content: '<input type="checkbox" />',
editable: false,
resizable: false
resizable: false,
sortable: false
};
columns = [val].concat(columns);

185
src/datatable.js
View File

@ -1,4 +1,3 @@
/* globals $, Clusterize */
import {
getHeaderHTML,
getBodyHTML,
@ -6,6 +5,8 @@ import {
getDefault
} from './utils';
import $ from './dom';
import DataManager from './datamanager';
import CellManager from './cellmanager';
import Style from './style';
@ -29,8 +30,8 @@ const DEFAULT_OPTIONS = {
export default class DataTable {
constructor(wrapper, options) {
this.wrapper = $(wrapper);
if (this.wrapper.length === 0) {
this.wrapper = wrapper;
if (!this.wrapper) {
throw new Error('Invalid argument given for `wrapper`');
}
@ -52,15 +53,13 @@ export default class DataTable {
}
make() {
if (this.wrapper.find('.data-table').length === 0) {
this.makeDom();
this.makeStyle();
this.bindEvents();
}
this.makeDom();
this.makeStyle();
this.bindEvents();
}
makeDom() {
this.wrapper.html(`
this.wrapper.innerHTML = `
<div class="data-table">
<table class="data-table-header">
</table>
@ -73,13 +72,10 @@ export default class DataTable {
<div class="border-background"></div>
</div>
</div>
`);
`;
this.header = this.wrapper.find('.data-table-header');
this.bodyScrollable = this.wrapper.find('.body-scrollable');
// this.body = this.wrapper.find('.data-table-body');
this.footer = this.wrapper.find('.data-table-footer');
this.$borders = this.wrapper.find('.data-table-borders');
this.header = $('.data-table-header', this.wrapper);
this.bodyScrollable = $('.body-scrollable', this.wrapper);
}
refresh(data) {
@ -101,7 +97,7 @@ export default class DataTable {
renderHeader() {
const columns = this.datamanager.getColumns();
this.header.html(getHeaderHTML(columns));
this.header.innerHTML = getHeaderHTML(columns);
}
renderBody() {
@ -115,22 +111,22 @@ export default class DataTable {
renderBodyHTML() {
const rows = this.datamanager.getRows();
this.bodyScrollable.html(`
<table class="data-table-body table table-bordered">
this.bodyScrollable.innerHTML = `
<table class="data-table-body">
${getBodyHTML(rows)}
</table>
`);
`;
}
renderBodyWithClusterize() {
const self = this;
// empty body
this.bodyScrollable.html(`
<table class="data-table-body table table-bordered">
this.bodyScrollable.innerHTML = `
<table class="data-table-body">
${getBodyHTML([])}
</table>
`);
`;
this.start = 0;
this.pageLength = 1000;
@ -143,8 +139,8 @@ export default class DataTable {
this.clusterize = new Clusterize({
rows: initialData,
scrollElem: this.bodyScrollable.get(0),
contentElem: this.bodyScrollable.find('tbody').get(0),
scrollElem: this.bodyScrollable,
contentElem: $('tbody', this.bodyScrollable),
callbacks: {
clusterChanged() {
self.highlightCheckedRows();
@ -213,21 +209,21 @@ export default class DataTable {
if (!this.options.takeAvailableSpace) {
// setting width as 0 will ensure that the
// header doesn't take the available space
this.header.css({
$.style(this.header, {
width: 0
});
}
this.header.css({
$.style(this.header, {
margin: 0
});
// cache minWidth for each column
this.minWidthMap = getDefault(this.minWidthMap, []);
this.header.find('.data-table-col').each(function () {
const col = $(this);
const width = parseInt(col.find('.content').css('width'), 10);
const colIndex = col.attr('data-col-index');
$.each('.data-table-col', this.header).map(col => {
const width = $.style($('.content', col), 'width');
const { colIndex } = $.data(col);
if (!self.minWidthMap[colIndex]) {
// only set this once
@ -236,10 +232,10 @@ export default class DataTable {
});
// set initial width as naturally calculated by table's first row
this.bodyScrollable.find('.data-table-row[data-row-index="0"] .data-table-col').each(function () {
const $cell = $(this);
let width = parseInt($cell.find('.content').css('width'), 10);
const height = parseInt($cell.find('.content').css('height'), 10);
$.each('.data-table-row[data-row-index="0"] .data-table-col', this.bodyScrollable).map($cell => {
let width = $.style($('.content', $cell), 'width');
const height = $.style($('.content', $cell), 'height');
const { colIndex } = self.getCellAttr($cell);
const minWidth = self.getColumnMinWidth(colIndex);
@ -252,8 +248,8 @@ export default class DataTable {
this.setBodyWidth();
this.style.set(this.bodyScrollable[0], {
marginTop: this.header.height() + 'px'
$.style(this.bodyScrollable, {
marginTop: $.style(this.header, 'height') + 'px'
});
// center align Sr. No column
@ -265,7 +261,9 @@ export default class DataTable {
});
}
this.bodyScrollable.find('.table').css('margin', 0);
$.style($('table', this.bodyScrollable), {
margin: 0
});
}
bindResizeColumn() {
@ -273,9 +271,9 @@ export default class DataTable {
let isDragging = false;
let $currCell, startWidth, startX;
this.header.on('mousedown', '.data-table-col', function (e) {
$currCell = $(this);
const colIndex = $currCell.attr('data-col-index');
$.on(this.header, 'mousedown', '.data-table-col', (e, cell) => {
$currCell = cell;
const { colIndex } = this.getCellAttr($currCell);
const col = self.getColumn(colIndex);
if (col && col.resizable === false) {
@ -283,28 +281,26 @@ export default class DataTable {
}
isDragging = true;
startWidth = $currCell.find('.content').width();
startWidth = $.style($('.content', $currCell), 'width');
startX = e.pageX;
});
$('body').on('mouseup', function (e) {
$.on(document.body, 'mouseup', (e) => {
if (!$currCell) return;
isDragging = false;
const colIndex = $currCell.attr('data-col-index');
if ($currCell) {
const width = parseInt($currCell.find('.content').css('width'), 10);
const { colIndex } = this.getCellAttr($currCell);
const width = $.style($('.content', $currCell), 'width');
self.setColumnWidth(colIndex, width);
self.setBodyWidth();
$currCell = null;
}
self.setColumnWidth(colIndex, width);
self.setBodyWidth();
$currCell = null;
});
$('body').on('mousemove', function (e) {
$.on(document.body, 'mousemove', (e) => {
if (!isDragging) return;
const finalWidth = startWidth + (e.pageX - startX);
const colIndex = $currCell.attr('data-col-index');
const { colIndex } = this.getCellAttr($currCell);
if (self.getColumnMinWidth(colIndex) > finalWidth) {
// don't resize past minWidth
@ -318,10 +314,10 @@ export default class DataTable {
bindSortColumn() {
const self = this;
this.header.on('click', '.data-table-col .content span', function () {
const $cell = $(this).closest('.data-table-col');
let sortOrder = getDefault($cell.attr('data-sort-order'), 'none');
const colIndex = $cell.attr('data-col-index');
$.on(this.header, 'click', '.data-table-col .content span', (e, span) => {
const $cell = span.closest('.data-table-col');
let { colIndex, sortOrder } = this.getCellAttr($cell);
sortOrder = getDefault(sortOrder, 'none');
const col = self.getColumn(colIndex);
if (col && col.sortable === false) {
@ -329,22 +325,24 @@ export default class DataTable {
}
// reset sort indicator
self.header.find('.sort-indicator').text('');
self.header.find('.data-table-col').attr('data-sort-order', 'none');
$('.sort-indicator', this.header).textContent = '';
$.each('.data-table-col', this.header).map($cell => {
$cell.setAttribute('data-sort-order', 'none');
});
if (sortOrder === 'none') {
$cell.attr('data-sort-order', 'asc');
$cell.find('.sort-indicator').text('▲');
$cell.setAttribute('data-sort-order', 'asc');
$('.sort-indicator', $cell).textContent = '▲';
} else if (sortOrder === 'asc') {
$cell.attr('data-sort-order', 'desc');
$cell.find('.sort-indicator').text('▼');
$cell.setAttribute('data-sort-order', 'desc');
$('.sort-indicator', $cell).textContent = '▼';
} else if (sortOrder === 'desc') {
$cell.attr('data-sort-order', 'none');
$cell.find('.sort-indicator').text('');
$cell.setAttribute('data-sort-order', 'none');
$('.sort-indicator', $cell).textContent = '';
}
// sortWith this action
sortOrder = $cell.attr('data-sort-order');
sortOrder = $cell.getAttribute('data-sort-order');
if (self.events && self.events.onSort) {
self.events.onSort(colIndex, sortOrder);
@ -361,24 +359,21 @@ export default class DataTable {
bindCheckbox() {
if (!this.options.addCheckboxColumn) return;
const self = this;
this.wrapper.on('click', '.data-table-col[data-col-index="0"] [type="checkbox"]', function () {
const $checkbox = $(this);
$.on(this.wrapper, 'click', '.data-table-col[data-col-index="0"] [type="checkbox"]', (e, $checkbox) => {
const $cell = $checkbox.closest('.data-table-col');
const { rowIndex, isHeader } = self.getCellAttr($cell);
const checked = $checkbox.is(':checked');
const { rowIndex, isHeader } = this.getCellAttr($cell);
const checked = $checkbox.checked;
if (isHeader) {
self.checkAll(checked);
this.checkAll(checked);
} else {
self.checkRow(rowIndex, checked);
this.checkRow(rowIndex, checked);
}
});
}
getCheckedRows() {
return this.checkMap
.map((c, rowIndex) => {
if (c) {
@ -402,9 +397,10 @@ export default class DataTable {
// update internal map
this.checkMap[rowIndex] = value;
// set checkbox value explicitly
this.bodyScrollable
.find(`.data-table-col[data-row-index="${rowIndex}"][data-col-index="0"] [type="checkbox"]`)
.prop('checked', toggle);
$.each(`.data-table-col[data-row-index="${rowIndex}"][data-col-index="0"] [type="checkbox"]`, this.bodyScrollable)
.map(input => {
input.checked = toggle;
});
// highlight row
this.highlightRow(rowIndex, toggle);
}
@ -419,28 +415,30 @@ export default class DataTable {
this.checkMap = [];
}
// set checkbox value
this.bodyScrollable
.find('.data-table-col[data-col-index="0"] [type="checkbox"]')
.prop('checked', toggle);
$.each('.data-table-col[data-col-index="0"] [type="checkbox"]', this.bodyScrollable)
.map(input => {
input.checked = toggle;
});
// highlight all
this.highlightAll(toggle);
}
highlightRow(rowIndex, toggle = true) {
const $row = this.bodyScrollable
.find(`.data-table-row[data-row-index="${rowIndex}"]`);
const $row = $(`.data-table-row[data-row-index="${rowIndex}"]`, this.bodyScrollable);
if (toggle) {
$row.addClass('row-highlight');
$row.classList.add('row-highlight');
} else {
$row.removeClass('row-highlight');
$row.classList.remove('row-highlight');
}
}
highlightAll(toggle = true) {
this.bodyScrollable
.find('.data-table-row')
.toggleClass('row-highlight', toggle);
if (toggle) {
this.bodyScrollable.classList.add('row-highlight-all');
} else {
this.bodyScrollable.classList.remove('row-highlight-all');
}
}
setColumnWidth(colIndex, width) {
@ -485,7 +483,7 @@ export default class DataTable {
const deltaWidth = (availableWidth - headerWidth) / this.datamanager.getColumnCount();
columns.map(col => {
const width = this.getColumnHeaderElement(col.colIndex).width();
const width = $.style(this.getColumnHeaderElement(col.colIndex), 'width');
let finalWidth = width + deltaWidth - 16;
if (this.options.addSerialNoColumn && col.colIndex === 0) {
@ -499,10 +497,9 @@ export default class DataTable {
}
setBodyWidth() {
this.bodyScrollable.css(
'width',
parseInt(this.header.css('width'), 10)
);
const width = $.style(this.header, 'width');
$.style(this.bodyScrollable, { width });
}
makeStyle() {
@ -524,9 +521,7 @@ export default class DataTable {
getColumnHeaderElement(colIndex) {
colIndex = +colIndex;
if (colIndex < 0) return null;
return this.wrapper.find(
`.data-table-col[data-is-header][data-col-index="${colIndex}"]`
);
return $(`.data-table-col[data-is-header][data-col-index="${colIndex}"]`, this.wrapper);
}
getColumnMinWidth(colIndex) {
@ -535,7 +530,7 @@ export default class DataTable {
}
getCellAttr($cell) {
return $cell.data();
return $.data($cell);
}
getTotalRows() {
@ -570,7 +565,7 @@ export default class DataTable {
getViewportHeight() {
if (!this.viewportHeight) {
this.viewportHeight = this.bodyScrollable.height();
this.viewportHeight = $.style(this.bodyScrollable, 'height');
}
return this.viewportHeight;

139
src/dom.js Normal file
View File

@ -0,0 +1,139 @@
export default function $(expr, con) {
return typeof expr === 'string' ?
(con || document).querySelector(expr) :
expr || null;
}
$.each = (expr, con) => {
return typeof expr === 'string' ?
Array.from((con || document).querySelectorAll(expr)) :
expr || null;
};
$.create = (tag, o) => {
let element = document.createElement(tag);
for (let i in o) {
let val = o[i];
if (i === 'inside') {
$(val).appendChild(element);
} else
if (i === 'around') {
let ref = $(val);
ref.parentNode.insertBefore(element, ref);
element.appendChild(ref);
} else
if (i === 'styles') {
if (typeof val === 'object') {
Object.keys(val).map(prop => {
element.style[prop] = val[prop];
});
}
} else
if (i in element) {
element[i] = val;
} else {
element.setAttribute(i, val);
}
}
return element;
};
$.on = (element, event, selector, callback) => {
if (!callback) {
callback = selector;
$.bind(element, event, callback);
} else {
$.delegate(element, event, selector, callback);
}
};
$.bind = (element, event, callback) => {
event.split(/\s+/).forEach(function (event) {
element.addEventListener(event, callback);
});
};
$.delegate = (element, event, selector, callback) => {
element.addEventListener(event, function (e) {
const delegatedTarget = e.target.closest(selector);
if (delegatedTarget) {
e.delegatedTarget = delegatedTarget;
callback.call(this, e, delegatedTarget);
}
});
};
$.unbind = (element, o) => {
if (element) {
for (let event in o) {
let callback = o[event];
event.split(/\s+/).forEach(function (event) {
element.removeEventListener(event, callback);
});
}
}
};
$.fire = (target, type, properties) => {
let evt = document.createEvent('HTMLEvents');
evt.initEvent(type, true, true);
for (let j in properties) {
evt[j] = properties[j];
}
return target.dispatchEvent(evt);
};
$.data = (element) => {
return element.dataset;
};
$.style = (elements, styleMap) => { // eslint-disable-line
if (typeof styleMap === 'string') {
return $.getStyle(elements, styleMap);
}
if (!Array.isArray(elements)) {
elements = [elements];
}
elements.map(element => {
for (const prop in styleMap) {
element.style[prop] = styleMap[prop];
}
});
};
$.removeStyle = (elements, styleProps) => {
if (!Array.isArray(elements)) {
elements = [elements];
}
if (!Array.isArray(styleProps)) {
styleProps = [styleProps];
}
elements.map(element => {
for (const prop of styleProps) {
element.style[prop] = '';
}
});
};
$.getStyle = (element, prop) => {
let val = getComputedStyle(element)[prop];
if (['width', 'height'].includes(prop)) {
val = parseFloat(val);
}
return val;
};

9
src/keyboard.js
View File

@ -1,3 +1,5 @@
import $ from './dom';
const KEYCODES = {
13: 'enter',
91: 'meta',
@ -16,7 +18,7 @@ const KEYCODES = {
const handlers = {};
function bind() {
$(document).on('keydown', handler);
$.on(document, 'keydown', handler);
}
function handler(e) {
@ -37,12 +39,9 @@ function handler(e) {
const preventBubbling = handler();
if (preventBubbling === undefined || preventBubbling === true) {
if (!e.isDefaultPrevented()) {
e.preventDefault();
}
e.preventDefault();
}
});
}
}

28
src/style.js
View File

@ -22,32 +22,4 @@ export default class Style {
this.styleSheet.insertRule(ruleString, this.styleSheet.cssRules.length);
}
set(elements, styleMap) {
if (!Array.isArray(elements)) {
elements = [elements];
}
elements.map(element => {
for (const prop in styleMap) {
element.style[prop] = styleMap[prop];
}
});
}
unset(elements, styleProps) {
if (!Array.isArray(elements)) {
elements = [elements];
}
if (!Array.isArray(styleProps)) {
styleProps = [styleProps];
}
elements.map(element => {
for (const prop of styleProps) {
element.style[prop] = '';
}
});
}
}

4
src/style.scss
View File

@ -48,6 +48,10 @@ button, input {
max-height: 500px;
overflow: auto;
border-bottom: 1px solid var(--border-color);
&.row-highlight-all .data-table-row {
background-color: var(--light-bg);
}
}
.data-table-header {