2482 lines
72 KiB
JavaScript
2482 lines
72 KiB
JavaScript
(function webpackUniversalModuleDefinition(root, factory) {
|
|
if(typeof exports === 'object' && typeof module === 'object')
|
|
module.exports = factory();
|
|
else if(typeof define === 'function' && define.amd)
|
|
define("DataTable", [], factory);
|
|
else if(typeof exports === 'object')
|
|
exports["DataTable"] = factory();
|
|
else
|
|
root["DataTable"] = factory();
|
|
})(this, function() {
|
|
return /******/ (function(modules) { // webpackBootstrap
|
|
/******/ // The module cache
|
|
/******/ var installedModules = {};
|
|
/******/
|
|
/******/ // The require function
|
|
/******/ function __webpack_require__(moduleId) {
|
|
/******/
|
|
/******/ // Check if module is in cache
|
|
/******/ if(installedModules[moduleId]) {
|
|
/******/ return installedModules[moduleId].exports;
|
|
/******/ }
|
|
/******/ // Create a new module (and put it into the cache)
|
|
/******/ var module = installedModules[moduleId] = {
|
|
/******/ i: moduleId,
|
|
/******/ l: false,
|
|
/******/ exports: {}
|
|
/******/ };
|
|
/******/
|
|
/******/ // Execute the module function
|
|
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
|
|
/******/
|
|
/******/ // Flag the module as loaded
|
|
/******/ module.l = true;
|
|
/******/
|
|
/******/ // Return the exports of the module
|
|
/******/ return module.exports;
|
|
/******/ }
|
|
/******/
|
|
/******/
|
|
/******/ // expose the modules object (__webpack_modules__)
|
|
/******/ __webpack_require__.m = modules;
|
|
/******/
|
|
/******/ // expose the module cache
|
|
/******/ __webpack_require__.c = installedModules;
|
|
/******/
|
|
/******/ // define getter function for harmony exports
|
|
/******/ __webpack_require__.d = function(exports, name, getter) {
|
|
/******/ if(!__webpack_require__.o(exports, name)) {
|
|
/******/ Object.defineProperty(exports, name, {
|
|
/******/ configurable: false,
|
|
/******/ enumerable: true,
|
|
/******/ get: getter
|
|
/******/ });
|
|
/******/ }
|
|
/******/ };
|
|
/******/
|
|
/******/ // getDefaultExport function for compatibility with non-harmony modules
|
|
/******/ __webpack_require__.n = function(module) {
|
|
/******/ var getter = module && module.__esModule ?
|
|
/******/ function getDefault() { return module['default']; } :
|
|
/******/ function getModuleExports() { return module; };
|
|
/******/ __webpack_require__.d(getter, 'a', getter);
|
|
/******/ return getter;
|
|
/******/ };
|
|
/******/
|
|
/******/ // Object.prototype.hasOwnProperty.call
|
|
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
|
|
/******/
|
|
/******/ // __webpack_public_path__
|
|
/******/ __webpack_require__.p = "";
|
|
/******/
|
|
/******/ // Load entry module and return exports
|
|
/******/ return __webpack_require__(__webpack_require__.s = 1);
|
|
/******/ })
|
|
/************************************************************************/
|
|
/******/ ([
|
|
/* 0 */
|
|
/***/ (function(module, exports, __webpack_require__) {
|
|
|
|
"use strict";
|
|
|
|
|
|
Object.defineProperty(exports, "__esModule", {
|
|
value: true
|
|
});
|
|
function camelCaseToDash(str) {
|
|
return str.replace(/([A-Z])/g, function (g) {
|
|
return '-' + g[0].toLowerCase();
|
|
});
|
|
}
|
|
|
|
function makeDataAttributeString(props) {
|
|
var keys = Object.keys(props);
|
|
|
|
return keys.map(function (key) {
|
|
var _key = camelCaseToDash(key);
|
|
var val = props[key];
|
|
|
|
if (val === undefined) return '';
|
|
return 'data-' + _key + '="' + val + '" ';
|
|
}).join('').trim();
|
|
}
|
|
|
|
function getEditCellHTML() {
|
|
return '\n <div class="edit-cell"></div>\n ';
|
|
}
|
|
|
|
function getColumnHTML(column) {
|
|
var rowIndex = column.rowIndex,
|
|
colIndex = column.colIndex,
|
|
isHeader = column.isHeader;
|
|
|
|
var dataAttr = makeDataAttributeString({
|
|
rowIndex: rowIndex,
|
|
colIndex: colIndex,
|
|
isHeader: isHeader
|
|
});
|
|
|
|
return '\n <td class="data-table-col noselect" ' + dataAttr + '>\n ' + getCellContent(column) + '\n </td>\n ';
|
|
}
|
|
|
|
function getCellContent(column) {
|
|
var isHeader = column.isHeader;
|
|
|
|
var editCellHTML = isHeader ? '' : getEditCellHTML();
|
|
var sortIndicator = isHeader ? '<span class="sort-indicator"></span>' : '';
|
|
|
|
return '\n <div class="content ellipsis">\n ' + (column.format ? column.format(column.content) : column.content) + '\n ' + sortIndicator + '\n </div>\n ' + editCellHTML + '\n ';
|
|
}
|
|
|
|
function getRowHTML(columns, props) {
|
|
var dataAttr = makeDataAttributeString(props);
|
|
|
|
return '\n <tr class="data-table-row" ' + dataAttr + '>\n ' + columns.map(getColumnHTML).join('') + '\n </tr>\n ';
|
|
}
|
|
|
|
function getHeaderHTML(columns) {
|
|
var $header = '\n <thead>\n ' + getRowHTML(columns, { isHeader: 1, rowIndex: -1 }) + '\n </thead>\n ';
|
|
|
|
// columns.map(col => {
|
|
// if (!col.width) return;
|
|
// const $cellContent = $header.find(
|
|
// `.data-table-col[data-col-index="${col.colIndex}"] .content`
|
|
// );
|
|
|
|
// $cellContent.width(col.width);
|
|
// });
|
|
|
|
return $header;
|
|
}
|
|
|
|
function getBodyHTML(rows) {
|
|
return '\n <tbody>\n ' + rows.map(function (row) {
|
|
return getRowHTML(row, { rowIndex: row[0].rowIndex });
|
|
}).join('') + '\n </tbody>\n ';
|
|
}
|
|
|
|
function prepareColumn(col, i) {
|
|
if (typeof col === 'string') {
|
|
col = {
|
|
content: col
|
|
};
|
|
}
|
|
return Object.assign(col, {
|
|
colIndex: i
|
|
});
|
|
}
|
|
|
|
function prepareColumns(columns) {
|
|
var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
|
|
var _columns = columns.map(prepareColumn);
|
|
|
|
return _columns.map(function (col) {
|
|
return Object.assign({}, col, props);
|
|
});
|
|
}
|
|
|
|
function prepareRowHeader(columns) {
|
|
return prepareColumns(columns, {
|
|
rowIndex: -1,
|
|
isHeader: 1,
|
|
format: function format(content) {
|
|
return '<span>' + content + '</span>';
|
|
}
|
|
});
|
|
}
|
|
|
|
function prepareRow(row, i) {
|
|
return prepareColumns(row, {
|
|
rowIndex: i
|
|
});
|
|
}
|
|
|
|
function prepareRows(rows) {
|
|
return rows.map(prepareRow);
|
|
}
|
|
|
|
function getDefault(a, b) {
|
|
return a !== undefined ? a : b;
|
|
}
|
|
|
|
function escapeRegExp(str) {
|
|
// https://stackoverflow.com/a/6969486
|
|
return str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, '\\$&');
|
|
}
|
|
|
|
function getCSSString(styleMap) {
|
|
var style = '';
|
|
|
|
for (var prop in styleMap) {
|
|
if (styleMap.hasOwnProperty(prop)) {
|
|
style += prop + ': ' + styleMap[prop] + '; ';
|
|
}
|
|
}
|
|
|
|
return style.trim();
|
|
}
|
|
|
|
function getCSSRuleBlock(rule, styleMap) {
|
|
return rule + ' { ' + getCSSString(styleMap) + ' }';
|
|
}
|
|
|
|
function namespaceSelector(selector) {
|
|
return '.data-table ' + selector;
|
|
}
|
|
|
|
function buildCSSRule(rule, styleMap) {
|
|
var cssRulesString = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
|
|
|
|
// build css rules efficiently,
|
|
// append new rule if doesnt exist,
|
|
// update existing ones
|
|
|
|
var rulePatternStr = escapeRegExp(rule) + ' {([^}]*)}';
|
|
var rulePattern = new RegExp(rulePatternStr, 'g');
|
|
|
|
if (cssRulesString && cssRulesString.match(rulePattern)) {
|
|
var _loop = function _loop(property) {
|
|
var value = styleMap[property];
|
|
var propPattern = new RegExp(escapeRegExp(property) + ':([^;]*);');
|
|
|
|
cssRulesString = cssRulesString.replace(rulePattern, function (match, propertyStr) {
|
|
if (propertyStr.match(propPattern)) {
|
|
// property exists, replace value with new value
|
|
propertyStr = propertyStr.replace(propPattern, function (match, valueStr) {
|
|
return property + ': ' + value + ';';
|
|
});
|
|
}
|
|
propertyStr = propertyStr.trim();
|
|
|
|
var replacer = rule + ' { ' + propertyStr + ' }';
|
|
|
|
return replacer;
|
|
});
|
|
};
|
|
|
|
for (var property in styleMap) {
|
|
_loop(property);
|
|
}
|
|
|
|
return cssRulesString;
|
|
}
|
|
// no match, append new rule block
|
|
return '' + cssRulesString + getCSSRuleBlock(rule, styleMap);
|
|
}
|
|
|
|
function removeCSSRule(rule) {
|
|
var cssRulesString = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
|
|
|
|
var rulePatternStr = escapeRegExp(rule) + ' {([^}]*)}';
|
|
var rulePattern = new RegExp(rulePatternStr, 'g');
|
|
var output = cssRulesString;
|
|
|
|
if (cssRulesString && cssRulesString.match(rulePattern)) {
|
|
output = cssRulesString.replace(rulePattern, '');
|
|
}
|
|
|
|
return output.trim();
|
|
}
|
|
|
|
function copyTextToClipboard(text) {
|
|
// https://stackoverflow.com/a/30810322/5353542
|
|
var textArea = document.createElement('textarea');
|
|
|
|
//
|
|
// *** This styling is an extra step which is likely not required. ***
|
|
//
|
|
// Why is it here? To ensure:
|
|
// 1. the element is able to have focus and selection.
|
|
// 2. if element was to flash render it has minimal visual impact.
|
|
// 3. less flakyness with selection and copying which **might** occur if
|
|
// the textarea element is not visible.
|
|
//
|
|
// The likelihood is the element won't even render, not even a flash,
|
|
// so some of these are just precautions. However in IE the element
|
|
// is visible whilst the popup box asking the user for permission for
|
|
// the web page to copy to the clipboard.
|
|
//
|
|
|
|
// Place in top-left corner of screen regardless of scroll position.
|
|
textArea.style.position = 'fixed';
|
|
textArea.style.top = 0;
|
|
textArea.style.left = 0;
|
|
|
|
// Ensure it has a small width and height. Setting to 1px / 1em
|
|
// doesn't work as this gives a negative w/h on some browsers.
|
|
textArea.style.width = '2em';
|
|
textArea.style.height = '2em';
|
|
|
|
// We don't need padding, reducing the size if it does flash render.
|
|
textArea.style.padding = 0;
|
|
|
|
// Clean up any borders.
|
|
textArea.style.border = 'none';
|
|
textArea.style.outline = 'none';
|
|
textArea.style.boxShadow = 'none';
|
|
|
|
// Avoid flash of white box if rendered for any reason.
|
|
textArea.style.background = 'transparent';
|
|
|
|
textArea.value = text;
|
|
|
|
document.body.appendChild(textArea);
|
|
|
|
textArea.select();
|
|
|
|
try {
|
|
document.execCommand('copy');
|
|
} catch (err) {
|
|
console.log('Oops, unable to copy');
|
|
}
|
|
|
|
document.body.removeChild(textArea);
|
|
}
|
|
|
|
exports.default = {
|
|
getHeaderHTML: getHeaderHTML,
|
|
getBodyHTML: getBodyHTML,
|
|
getRowHTML: getRowHTML,
|
|
getColumnHTML: getColumnHTML,
|
|
getEditCellHTML: getEditCellHTML,
|
|
prepareRowHeader: prepareRowHeader,
|
|
prepareRows: prepareRows,
|
|
namespaceSelector: namespaceSelector,
|
|
getCSSString: getCSSString,
|
|
buildCSSRule: buildCSSRule,
|
|
removeCSSRule: removeCSSRule,
|
|
makeDataAttributeString: makeDataAttributeString,
|
|
getDefault: getDefault,
|
|
escapeRegExp: escapeRegExp,
|
|
getCellContent: getCellContent,
|
|
copyTextToClipboard: copyTextToClipboard
|
|
};
|
|
module.exports = exports['default'];
|
|
|
|
/***/ }),
|
|
/* 1 */
|
|
/***/ (function(module, exports, __webpack_require__) {
|
|
|
|
"use strict";
|
|
|
|
|
|
Object.defineProperty(exports, "__esModule", {
|
|
value: true
|
|
});
|
|
|
|
var _datatable = __webpack_require__(2);
|
|
|
|
var _datatable2 = _interopRequireDefault(_datatable);
|
|
|
|
var _package = __webpack_require__(11);
|
|
|
|
var _package2 = _interopRequireDefault(_package);
|
|
|
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
|
|
_datatable2.default.__version__ = _package2.default.version;
|
|
|
|
exports.default = _datatable2.default;
|
|
module.exports = exports['default'];
|
|
|
|
/***/ }),
|
|
/* 2 */
|
|
/***/ (function(module, exports, __webpack_require__) {
|
|
|
|
"use strict";
|
|
|
|
|
|
Object.defineProperty(exports, "__esModule", {
|
|
value: true
|
|
});
|
|
|
|
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; }; }(); /* globals $, Clusterize */
|
|
|
|
|
|
var _utils = __webpack_require__(0);
|
|
|
|
var _datamanager = __webpack_require__(3);
|
|
|
|
var _datamanager2 = _interopRequireDefault(_datamanager);
|
|
|
|
var _cellmanager = __webpack_require__(4);
|
|
|
|
var _cellmanager2 = _interopRequireDefault(_cellmanager);
|
|
|
|
__webpack_require__(6);
|
|
|
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
|
|
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
|
|
|
var DEFAULT_OPTIONS = {
|
|
events: null,
|
|
data: {
|
|
columns: [],
|
|
rows: []
|
|
},
|
|
editing: null,
|
|
addSerialNoColumn: true,
|
|
addCheckboxColumn: true,
|
|
enableClusterize: true,
|
|
enableLogs: false,
|
|
takeAvailableSpace: false
|
|
};
|
|
|
|
var DataTable = function () {
|
|
function DataTable(wrapper, options) {
|
|
_classCallCheck(this, DataTable);
|
|
|
|
this.wrapper = $(wrapper);
|
|
if (this.wrapper.length === 0) {
|
|
throw new Error('Invalid argument given for `wrapper`');
|
|
}
|
|
|
|
this.options = Object.assign({}, DEFAULT_OPTIONS, options);
|
|
// custom user events
|
|
this.events = this.options.events;
|
|
// map of checked rows
|
|
this.checkMap = [];
|
|
|
|
// make dom, make style, bind events
|
|
this.make();
|
|
|
|
this.datamanager = new _datamanager2.default(this.options);
|
|
this.cellmanager = new _cellmanager2.default(this);
|
|
|
|
if (this.options.data) {
|
|
this.refresh(this.options.data);
|
|
}
|
|
}
|
|
|
|
_createClass(DataTable, [{
|
|
key: 'make',
|
|
value: function make() {
|
|
if (this.wrapper.find('.data-table').length === 0) {
|
|
this.makeDom();
|
|
this.makeStyle();
|
|
this.bindEvents();
|
|
}
|
|
}
|
|
}, {
|
|
key: 'makeDom',
|
|
value: function makeDom() {
|
|
this.wrapper.html('\n <div class="data-table">\n <table class="data-table-header">\n </table>\n <div class="body-scrollable">\n </div>\n <div class="data-table-footer">\n </div>\n <div class="data-table-borders">\n <div class="border-outline"></div>\n <div class="border-background"></div>\n </div>\n </div>\n ');
|
|
|
|
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');
|
|
}
|
|
}, {
|
|
key: 'refresh',
|
|
value: function refresh(data) {
|
|
this.datamanager.init(data);
|
|
this.render();
|
|
}
|
|
}, {
|
|
key: 'appendRows',
|
|
value: function appendRows(rows) {
|
|
this.datamanager.appendRows(rows);
|
|
this.render();
|
|
}
|
|
}, {
|
|
key: 'render',
|
|
value: function render() {
|
|
this.renderHeader();
|
|
this.renderBody();
|
|
this.setDimensions();
|
|
}
|
|
}, {
|
|
key: 'renderHeader',
|
|
value: function renderHeader() {
|
|
var columns = this.datamanager.getColumns();
|
|
|
|
this.header.html((0, _utils.getHeaderHTML)(columns));
|
|
}
|
|
}, {
|
|
key: 'renderBody',
|
|
value: function renderBody() {
|
|
if (this.options.enableClusterize) {
|
|
this.renderBodyWithClusterize();
|
|
} else {
|
|
this.renderBodyHTML();
|
|
}
|
|
}
|
|
}, {
|
|
key: 'renderBodyHTML',
|
|
value: function renderBodyHTML() {
|
|
var rows = this.datamanager.getRows();
|
|
|
|
this.bodyScrollable.html('\n <table class="data-table-body table table-bordered">\n ' + (0, _utils.getBodyHTML)(rows) + '\n </table>\n ');
|
|
}
|
|
}, {
|
|
key: 'renderBodyWithClusterize',
|
|
value: function renderBodyWithClusterize() {
|
|
var self = this;
|
|
|
|
// empty body
|
|
this.bodyScrollable.html('\n <table class="data-table-body table table-bordered">\n ' + (0, _utils.getBodyHTML)([]) + '\n </table>\n ');
|
|
|
|
this.start = 0;
|
|
this.pageLength = 1000;
|
|
this.end = this.start + this.pageLength;
|
|
|
|
// only append ${this.pageLength} rows in the beginning,
|
|
// defer remaining
|
|
var rows = this.datamanager.getRows(this.start, this.end);
|
|
var initialData = this.getDataForClusterize(rows);
|
|
|
|
this.clusterize = new Clusterize({
|
|
rows: initialData,
|
|
scrollElem: this.bodyScrollable.get(0),
|
|
contentElem: this.bodyScrollable.find('tbody').get(0),
|
|
callbacks: {
|
|
clusterChanged: function clusterChanged() {
|
|
self.highlightCheckedRows();
|
|
}
|
|
}
|
|
});
|
|
this.log('dataAppended', this.pageLength);
|
|
this.appendRemainingData();
|
|
}
|
|
}, {
|
|
key: 'appendRemainingData',
|
|
value: function appendRemainingData() {
|
|
var dataAppended = this.pageLength;
|
|
var promises = [];
|
|
var rowCount = this.datamanager.getRowCount();
|
|
|
|
while (dataAppended + this.pageLength < rowCount) {
|
|
this.start = this.end;
|
|
this.end = this.start + this.pageLength;
|
|
promises.push(this.appendNextPagePromise(this.start, this.end));
|
|
dataAppended += this.pageLength;
|
|
}
|
|
|
|
if (rowCount % this.pageLength > 0) {
|
|
// last page
|
|
this.start = this.end;
|
|
this.end = this.start + this.pageLength;
|
|
promises.push(this.appendNextPagePromise(this.start, this.end));
|
|
}
|
|
|
|
return promises.reduce(function (prev, cur) {
|
|
return prev.then(cur);
|
|
}, Promise.resolve());
|
|
}
|
|
}, {
|
|
key: 'appendNextPagePromise',
|
|
value: function appendNextPagePromise(start, end) {
|
|
var _this = this;
|
|
|
|
return new Promise(function (resolve) {
|
|
setTimeout(function () {
|
|
var rows = _this.datamanager.getRows(start, end);
|
|
var data = _this.getDataForClusterize(rows);
|
|
|
|
_this.clusterize.append(data);
|
|
_this.log('dataAppended', rows.length);
|
|
resolve();
|
|
}, 0);
|
|
});
|
|
}
|
|
}, {
|
|
key: 'getDataForClusterize',
|
|
value: function getDataForClusterize(rows) {
|
|
return rows.map(function (row) {
|
|
return (0, _utils.getRowHTML)(row, { rowIndex: row[0].rowIndex });
|
|
});
|
|
}
|
|
}, {
|
|
key: 'refreshRows',
|
|
value: function refreshRows() {
|
|
this.renderBody();
|
|
this.setDimensions();
|
|
}
|
|
}, {
|
|
key: 'bindEvents',
|
|
value: function bindEvents() {
|
|
this.bindResizeColumn();
|
|
this.bindSortColumn();
|
|
this.bindCheckbox();
|
|
}
|
|
}, {
|
|
key: 'setDimensions',
|
|
value: function setDimensions() {
|
|
var self = this;
|
|
|
|
if (!this.options.takeAvailableSpace) {
|
|
// setting width as 0 will ensure that the
|
|
// header doesn't take the available space
|
|
this.header.css({
|
|
width: 0
|
|
});
|
|
}
|
|
|
|
this.header.css({
|
|
margin: 0
|
|
});
|
|
|
|
// cache minWidth for each column
|
|
this.minWidthMap = (0, _utils.getDefault)(this.minWidthMap, []);
|
|
this.header.find('.data-table-col').each(function () {
|
|
var col = $(this);
|
|
var width = parseInt(col.find('.content').css('width'), 10);
|
|
var colIndex = col.attr('data-col-index');
|
|
|
|
if (!self.minWidthMap[colIndex]) {
|
|
// only set this once
|
|
self.minWidthMap[colIndex] = width;
|
|
}
|
|
});
|
|
|
|
// 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 () {
|
|
var $cell = $(this);
|
|
var width = parseInt($cell.find('.content').css('width'), 10);
|
|
var height = parseInt($cell.find('.content').css('height'), 10);
|
|
|
|
var _self$getCellAttr = self.getCellAttr($cell),
|
|
colIndex = _self$getCellAttr.colIndex;
|
|
|
|
var minWidth = self.getColumnMinWidth(colIndex);
|
|
|
|
if (width < minWidth) {
|
|
width = minWidth;
|
|
}
|
|
self.setColumnWidth(colIndex, width);
|
|
self.setDefaultCellHeight(height);
|
|
});
|
|
|
|
this.setBodyWidth();
|
|
|
|
this.setStyle('.data-table .body-scrollable', {
|
|
'margin-top': this.header.height() + 'px'
|
|
});
|
|
|
|
// center align Sr. No column
|
|
if (this.options.addSerialNoColumn) {
|
|
var index = this.getSerialColumnIndex();
|
|
|
|
this.setStyle('.data-table [data-col-index="' + index + '"]', {
|
|
'text-align': 'center'
|
|
});
|
|
}
|
|
|
|
this.bodyScrollable.find('.table').css('margin', 0);
|
|
}
|
|
}, {
|
|
key: 'bindResizeColumn',
|
|
value: function bindResizeColumn() {
|
|
var self = this;
|
|
var isDragging = false;
|
|
var $currCell = void 0,
|
|
startWidth = void 0,
|
|
startX = void 0;
|
|
|
|
this.header.on('mousedown', '.data-table-col', function (e) {
|
|
$currCell = $(this);
|
|
var colIndex = $currCell.attr('data-col-index');
|
|
var col = self.getColumn(colIndex);
|
|
|
|
if (col && col.resizable === false) {
|
|
return;
|
|
}
|
|
|
|
isDragging = true;
|
|
startWidth = $currCell.find('.content').width();
|
|
startX = e.pageX;
|
|
});
|
|
|
|
$('body').on('mouseup', function (e) {
|
|
if (!$currCell) return;
|
|
isDragging = false;
|
|
var colIndex = $currCell.attr('data-col-index');
|
|
|
|
if ($currCell) {
|
|
var width = parseInt($currCell.find('.content').css('width'), 10);
|
|
|
|
self.setColumnWidth(colIndex, width);
|
|
self.setBodyWidth();
|
|
$currCell = null;
|
|
}
|
|
});
|
|
|
|
$('body').on('mousemove', function (e) {
|
|
if (!isDragging) return;
|
|
var finalWidth = startWidth + (e.pageX - startX);
|
|
var colIndex = $currCell.attr('data-col-index');
|
|
|
|
if (self.getColumnMinWidth(colIndex) > finalWidth) {
|
|
// don't resize past minWidth
|
|
return;
|
|
}
|
|
|
|
self.setColumnHeaderWidth(colIndex, finalWidth);
|
|
});
|
|
}
|
|
}, {
|
|
key: 'bindSortColumn',
|
|
value: function bindSortColumn() {
|
|
var self = this;
|
|
|
|
this.header.on('click', '.data-table-col .content span', function () {
|
|
var $cell = $(this).closest('.data-table-col');
|
|
var sortOrder = (0, _utils.getDefault)($cell.attr('data-sort-order'), 'none');
|
|
var colIndex = $cell.attr('data-col-index');
|
|
var col = self.getColumn(colIndex);
|
|
|
|
if (col && col.sortable === false) {
|
|
return;
|
|
}
|
|
|
|
// reset sort indicator
|
|
self.header.find('.sort-indicator').text('');
|
|
self.header.find('.data-table-col').attr('data-sort-order', 'none');
|
|
|
|
if (sortOrder === 'none') {
|
|
$cell.attr('data-sort-order', 'asc');
|
|
$cell.find('.sort-indicator').text('▲');
|
|
} else if (sortOrder === 'asc') {
|
|
$cell.attr('data-sort-order', 'desc');
|
|
$cell.find('.sort-indicator').text('▼');
|
|
} else if (sortOrder === 'desc') {
|
|
$cell.attr('data-sort-order', 'none');
|
|
$cell.find('.sort-indicator').text('');
|
|
}
|
|
|
|
// sortWith this action
|
|
sortOrder = $cell.attr('data-sort-order');
|
|
|
|
if (self.events && self.events.onSort) {
|
|
self.events.onSort(colIndex, sortOrder);
|
|
} else {
|
|
self.sortRows(colIndex, sortOrder);
|
|
self.refreshRows();
|
|
}
|
|
});
|
|
}
|
|
}, {
|
|
key: 'sortRows',
|
|
value: function sortRows(colIndex, sortOrder) {
|
|
this.datamanager.sortRows(colIndex, sortOrder);
|
|
}
|
|
}, {
|
|
key: 'bindCheckbox',
|
|
value: function bindCheckbox() {
|
|
if (!this.options.addCheckboxColumn) return;
|
|
var self = this;
|
|
|
|
this.wrapper.on('click', '.data-table-col[data-col-index="0"] [type="checkbox"]', function () {
|
|
var $checkbox = $(this);
|
|
var $cell = $checkbox.closest('.data-table-col');
|
|
|
|
var _self$getCellAttr2 = self.getCellAttr($cell),
|
|
rowIndex = _self$getCellAttr2.rowIndex,
|
|
isHeader = _self$getCellAttr2.isHeader;
|
|
|
|
var checked = $checkbox.is(':checked');
|
|
|
|
if (isHeader) {
|
|
self.checkAll(checked);
|
|
} else {
|
|
self.checkRow(rowIndex, checked);
|
|
}
|
|
});
|
|
}
|
|
}, {
|
|
key: 'getCheckedRows',
|
|
value: function getCheckedRows() {
|
|
|
|
return this.checkMap.map(function (c, rowIndex) {
|
|
if (c) {
|
|
return rowIndex;
|
|
}
|
|
return null;
|
|
}).filter(function (c) {
|
|
return c !== null || c !== undefined;
|
|
});
|
|
}
|
|
}, {
|
|
key: 'highlightCheckedRows',
|
|
value: function highlightCheckedRows() {
|
|
var _this2 = this;
|
|
|
|
this.getCheckedRows().map(function (rowIndex) {
|
|
return _this2.checkRow(rowIndex, true);
|
|
});
|
|
}
|
|
}, {
|
|
key: 'checkRow',
|
|
value: function checkRow(rowIndex, toggle) {
|
|
var value = toggle ? 1 : 0;
|
|
|
|
// 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);
|
|
// highlight row
|
|
this.highlightRow(rowIndex, toggle);
|
|
}
|
|
}, {
|
|
key: 'checkAll',
|
|
value: function checkAll(toggle) {
|
|
var value = toggle ? 1 : 0;
|
|
|
|
// update internal map
|
|
if (toggle) {
|
|
this.checkMap = Array.from(Array(this.getTotalRows())).map(function (c) {
|
|
return value;
|
|
});
|
|
} else {
|
|
this.checkMap = [];
|
|
}
|
|
// set checkbox value
|
|
this.bodyScrollable.find('.data-table-col[data-col-index="0"] [type="checkbox"]').prop('checked', toggle);
|
|
// highlight all
|
|
this.highlightAll(toggle);
|
|
}
|
|
}, {
|
|
key: 'highlightRow',
|
|
value: function highlightRow(rowIndex) {
|
|
var toggle = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
|
|
|
|
var $row = this.bodyScrollable.find('.data-table-row[data-row-index="' + rowIndex + '"]');
|
|
|
|
if (toggle) {
|
|
$row.addClass('row-highlight');
|
|
} else {
|
|
$row.removeClass('row-highlight');
|
|
}
|
|
}
|
|
}, {
|
|
key: 'highlightAll',
|
|
value: function highlightAll() {
|
|
var toggle = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
|
|
|
|
this.bodyScrollable.find('.data-table-row').toggleClass('row-highlight', toggle);
|
|
}
|
|
}, {
|
|
key: 'setColumnWidth',
|
|
value: function setColumnWidth(colIndex, width) {
|
|
// set width for content
|
|
this.setStyle('[data-col-index="' + colIndex + '"] .content', {
|
|
width: width + 'px'
|
|
});
|
|
// set width for edit cell
|
|
this.setStyle('[data-col-index="' + colIndex + '"] .edit-cell', {
|
|
width: width + 'px'
|
|
});
|
|
}
|
|
}, {
|
|
key: 'setColumnHeaderWidth',
|
|
value: function setColumnHeaderWidth(colIndex, width) {
|
|
this.setStyle('[data-col-index="' + colIndex + '"][data-is-header] .content', {
|
|
width: width + 'px'
|
|
});
|
|
}
|
|
}, {
|
|
key: 'setDefaultCellHeight',
|
|
value: function setDefaultCellHeight(height) {
|
|
this.setStyle('.data-table-col .content', {
|
|
height: height + 'px'
|
|
});
|
|
}
|
|
}, {
|
|
key: 'setRowHeight',
|
|
value: function setRowHeight(rowIndex, height) {
|
|
this.setStyle('[data-row-index="' + rowIndex + '"] .content', {
|
|
height: height + 'px'
|
|
});
|
|
}
|
|
}, {
|
|
key: 'setColumnWidths',
|
|
value: function setColumnWidths() {
|
|
var _this3 = this;
|
|
|
|
var availableWidth = this.wrapper.width();
|
|
var headerWidth = this.header.width();
|
|
|
|
if (headerWidth > availableWidth) {
|
|
// don't resize, horizontal scroll takes place
|
|
return;
|
|
}
|
|
|
|
var columns = this.datamanager.getColumns();
|
|
var deltaWidth = (availableWidth - headerWidth) / this.datamanager.getColumnCount();
|
|
|
|
columns.map(function (col) {
|
|
var width = _this3.getColumnHeaderElement(col.colIndex).width();
|
|
var finalWidth = width + deltaWidth - 16;
|
|
|
|
if (_this3.options.addSerialNoColumn && col.colIndex === 0) {
|
|
return;
|
|
}
|
|
|
|
_this3.setColumnHeaderWidth(col.colIndex, finalWidth);
|
|
_this3.setColumnWidth(col.colIndex, finalWidth);
|
|
});
|
|
this.setBodyWidth();
|
|
}
|
|
}, {
|
|
key: 'setBodyWidth',
|
|
value: function setBodyWidth() {
|
|
this.bodyScrollable.css('width', parseInt(this.header.css('width'), 10));
|
|
}
|
|
}, {
|
|
key: 'setStyle',
|
|
value: function setStyle(rule, styleMap) {
|
|
var styles = this.$style.text();
|
|
|
|
styles = (0, _utils.buildCSSRule)(rule, styleMap, styles);
|
|
this.$style.html(styles);
|
|
}
|
|
}, {
|
|
key: 'removeStyle',
|
|
value: function removeStyle(rule) {
|
|
var styles = this.$style.text();
|
|
|
|
styles = (0, _utils.removeCSSRule)(rule, styles);
|
|
this.$style.html(styles);
|
|
}
|
|
}, {
|
|
key: 'makeStyle',
|
|
value: function makeStyle() {
|
|
this.$style = $('<style data-id="datatable"></style>').prependTo(this.wrapper);
|
|
}
|
|
}, {
|
|
key: 'getColumn',
|
|
value: function getColumn(colIndex) {
|
|
return this.datamanager.getColumn(colIndex);
|
|
}
|
|
}, {
|
|
key: 'getRow',
|
|
value: function getRow(rowIndex) {
|
|
return this.datamanager.getRow(rowIndex);
|
|
}
|
|
}, {
|
|
key: 'getCell',
|
|
value: function getCell(colIndex, rowIndex) {
|
|
return this.datamanager.getCell(colIndex, rowIndex);
|
|
}
|
|
}, {
|
|
key: 'getColumnHeaderElement',
|
|
value: function getColumnHeaderElement(colIndex) {
|
|
colIndex = +colIndex;
|
|
if (colIndex < 0) return null;
|
|
return this.wrapper.find('.data-table-col[data-is-header][data-col-index="' + colIndex + '"]');
|
|
}
|
|
}, {
|
|
key: 'getColumnMinWidth',
|
|
value: function getColumnMinWidth(colIndex) {
|
|
colIndex = +colIndex;
|
|
return this.minWidthMap && this.minWidthMap[colIndex];
|
|
}
|
|
}, {
|
|
key: 'getCellAttr',
|
|
value: function getCellAttr($cell) {
|
|
return $cell.data();
|
|
}
|
|
}, {
|
|
key: 'getTotalRows',
|
|
value: function getTotalRows() {
|
|
return this.datamanager.getRowCount();
|
|
}
|
|
}, {
|
|
key: 'getFirstColumnIndex',
|
|
value: function getFirstColumnIndex() {
|
|
if (this.options.addCheckboxColumn && this.options.addSerialNoColumn) {
|
|
return 2;
|
|
}
|
|
|
|
if (this.options.addCheckboxColumn || this.options.addSerialNoColumn) {
|
|
return 1;
|
|
}
|
|
|
|
return 0;
|
|
}
|
|
}, {
|
|
key: 'getSerialColumnIndex',
|
|
value: function getSerialColumnIndex() {
|
|
var columns = this.datamanager.getColumns();
|
|
|
|
return columns.findIndex(function (column) {
|
|
return column.content.includes('Sr. No');
|
|
});
|
|
}
|
|
}, {
|
|
key: 'log',
|
|
value: function log() {
|
|
if (this.options.enableLogs) {
|
|
console.log.apply(console, arguments);
|
|
}
|
|
}
|
|
}]);
|
|
|
|
return DataTable;
|
|
}();
|
|
|
|
exports.default = DataTable;
|
|
module.exports = exports['default'];
|
|
|
|
/***/ }),
|
|
/* 3 */
|
|
/***/ (function(module, exports, __webpack_require__) {
|
|
|
|
"use strict";
|
|
|
|
|
|
Object.defineProperty(exports, "__esModule", {
|
|
value: true
|
|
});
|
|
|
|
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
|
|
|
|
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"); } }
|
|
|
|
var DataManager = function () {
|
|
function DataManager(options) {
|
|
_classCallCheck(this, DataManager);
|
|
|
|
this.options = options;
|
|
this.rowCount = 0;
|
|
this.currentSort = {
|
|
sortBy: -1, // colIndex
|
|
sortOrder: 'none' // asc, desc, none
|
|
};
|
|
}
|
|
|
|
_createClass(DataManager, [{
|
|
key: 'init',
|
|
value: function init(data) {
|
|
var columns = data.columns,
|
|
rows = data.rows;
|
|
|
|
|
|
this.columns = this.prepareColumns(columns);
|
|
this.rows = this.prepareRows(rows);
|
|
}
|
|
}, {
|
|
key: 'prepareColumns',
|
|
value: function prepareColumns(columns) {
|
|
if (!Array.isArray(columns)) {
|
|
throw new TypeError('`columns` must be an array');
|
|
}
|
|
|
|
if (this.options.addSerialNoColumn && !this._serialNoColumnAdded) {
|
|
var val = {
|
|
content: 'Sr. No',
|
|
editable: false,
|
|
resizable: false
|
|
};
|
|
|
|
columns = [val].concat(columns);
|
|
this._serialNoColumnAdded = true;
|
|
}
|
|
|
|
if (this.options.addCheckboxColumn && !this._checkboxColumnAdded) {
|
|
var _val = {
|
|
content: '<input type="checkbox" />',
|
|
editable: false,
|
|
resizable: false
|
|
};
|
|
|
|
columns = [_val].concat(columns);
|
|
this._checkboxColumnAdded = true;
|
|
}
|
|
|
|
// wrap the title in span
|
|
columns = columns.map(function (column) {
|
|
if (typeof column === 'string') {
|
|
column = '<span>' + column + '</span>';
|
|
} else if ((typeof column === 'undefined' ? 'undefined' : _typeof(column)) === 'object') {
|
|
column.content = '<span>' + column.content + '</span>';
|
|
}
|
|
|
|
return column;
|
|
});
|
|
|
|
return _prepareColumns(columns, {
|
|
isHeader: 1
|
|
});
|
|
}
|
|
}, {
|
|
key: 'prepareRows',
|
|
value: function prepareRows(rows) {
|
|
var _this = this;
|
|
|
|
if (!Array.isArray(rows) || !Array.isArray(rows[0])) {
|
|
throw new TypeError('`rows` must be an array of arrays');
|
|
}
|
|
|
|
rows = rows.map(function (row, i) {
|
|
var index = _this._getNextRowCount();
|
|
|
|
if (row.length < _this.columns.length) {
|
|
if (_this._serialNoColumnAdded) {
|
|
var val = index + 1 + '';
|
|
|
|
row = [val].concat(row);
|
|
}
|
|
|
|
if (_this._checkboxColumnAdded) {
|
|
var _val2 = '<input type="checkbox" />';
|
|
|
|
row = [_val2].concat(row);
|
|
}
|
|
}
|
|
|
|
return prepareRow(row, index);
|
|
});
|
|
|
|
return rows;
|
|
}
|
|
}, {
|
|
key: 'appendRows',
|
|
value: function appendRows(rows) {
|
|
if (Array.isArray(rows) && !Array.isArray(rows[0])) {
|
|
rows = [rows];
|
|
}
|
|
var _rows = this.prepareRows(rows);
|
|
|
|
this.rows = this.rows.concat(_rows);
|
|
}
|
|
}, {
|
|
key: 'sortRows',
|
|
value: function sortRows(colIndex) {
|
|
var sortOrder = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'none';
|
|
|
|
colIndex = +colIndex;
|
|
|
|
if (this.currentSort.colIndex === colIndex) {
|
|
// reverse the array if only sortOrder changed
|
|
if (this.currentSort.sortOrder === 'asc' && sortOrder === 'desc' || this.currentSort.sortOrder === 'desc' && sortOrder === 'asc') {
|
|
this.reverseArray(this.rows);
|
|
this.currentSort.sortOrder = sortOrder;
|
|
return;
|
|
}
|
|
}
|
|
|
|
this.rows.sort(function (a, b) {
|
|
var _aIndex = a[0].rowIndex;
|
|
var _bIndex = b[0].rowIndex;
|
|
var _a = a[colIndex].content;
|
|
var _b = b[colIndex].content;
|
|
|
|
if (sortOrder === 'none') {
|
|
return _aIndex - _bIndex;
|
|
} else if (sortOrder === 'asc') {
|
|
if (_a < _b) return -1;
|
|
if (_a > _b) return 1;
|
|
if (_a === _b) return 0;
|
|
} else if (sortOrder === 'desc') {
|
|
if (_a < _b) return 1;
|
|
if (_a > _b) return -1;
|
|
if (_a === _b) return 0;
|
|
}
|
|
return 0;
|
|
});
|
|
|
|
this.currentSort.colIndex = colIndex;
|
|
this.currentSort.sortOrder = sortOrder;
|
|
}
|
|
}, {
|
|
key: 'reverseArray',
|
|
value: function reverseArray(array) {
|
|
var left = null;
|
|
var right = null;
|
|
var length = array.length;
|
|
|
|
for (left = 0, right = length - 1; left < right; left += 1, right -= 1) {
|
|
var temporary = array[left];
|
|
|
|
array[left] = array[right];
|
|
array[right] = temporary;
|
|
}
|
|
}
|
|
}, {
|
|
key: 'getRowCount',
|
|
value: function getRowCount() {
|
|
return this.rowCount;
|
|
}
|
|
}, {
|
|
key: '_getNextRowCount',
|
|
value: function _getNextRowCount() {
|
|
var val = this.rowCount;
|
|
|
|
this.rowCount++;
|
|
return val;
|
|
}
|
|
}, {
|
|
key: 'getRows',
|
|
value: function getRows(start, end) {
|
|
return this.rows.slice(start, end);
|
|
}
|
|
}, {
|
|
key: 'getColumns',
|
|
value: function getColumns() {
|
|
return this.columns;
|
|
}
|
|
}, {
|
|
key: 'getColumnCount',
|
|
value: function getColumnCount() {
|
|
return this.columns.length;
|
|
}
|
|
}, {
|
|
key: 'getColumn',
|
|
value: function getColumn(colIndex) {
|
|
colIndex = +colIndex;
|
|
return this.columns.find(function (col) {
|
|
return col.colIndex === colIndex;
|
|
});
|
|
}
|
|
}, {
|
|
key: 'getRow',
|
|
value: function getRow(rowIndex) {
|
|
rowIndex = +rowIndex;
|
|
return this.rows.find(function (row) {
|
|
return row[0].rowIndex === rowIndex;
|
|
});
|
|
}
|
|
}, {
|
|
key: 'getCell',
|
|
value: function getCell(colIndex, rowIndex) {
|
|
rowIndex = +rowIndex;
|
|
colIndex = +colIndex;
|
|
return this.rows.find(function (row) {
|
|
return row[0].rowIndex === rowIndex;
|
|
})[colIndex];
|
|
}
|
|
}, {
|
|
key: 'get',
|
|
value: function get() {
|
|
return {
|
|
columns: this.columns,
|
|
rows: this.rows
|
|
};
|
|
}
|
|
}]);
|
|
|
|
return DataManager;
|
|
}();
|
|
|
|
exports.default = DataManager;
|
|
|
|
|
|
function _prepareColumns(columns) {
|
|
var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
|
|
var _columns = columns.map(prepareCell);
|
|
|
|
return _columns.map(function (col) {
|
|
return Object.assign({}, col, props);
|
|
});
|
|
}
|
|
|
|
function prepareRow(row, i) {
|
|
return _prepareColumns(row, {
|
|
rowIndex: i
|
|
});
|
|
}
|
|
|
|
function prepareCell(col, i) {
|
|
if (typeof col === 'string') {
|
|
col = {
|
|
content: col
|
|
};
|
|
}
|
|
return Object.assign(col, {
|
|
colIndex: i
|
|
});
|
|
}
|
|
module.exports = exports['default'];
|
|
|
|
/***/ }),
|
|
/* 4 */
|
|
/***/ (function(module, exports, __webpack_require__) {
|
|
|
|
"use strict";
|
|
|
|
|
|
Object.defineProperty(exports, "__esModule", {
|
|
value: true
|
|
});
|
|
|
|
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
|
|
|
|
var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
|
|
|
|
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; }; }();
|
|
|
|
var _utils = __webpack_require__(0);
|
|
|
|
var _keyboard = __webpack_require__(5);
|
|
|
|
var _keyboard2 = _interopRequireDefault(_keyboard);
|
|
|
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
|
|
function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
|
|
|
|
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
|
|
|
var CellManager = function () {
|
|
function CellManager(instance) {
|
|
_classCallCheck(this, CellManager);
|
|
|
|
this.instance = instance;
|
|
this.options = this.instance.options;
|
|
this.bodyScrollable = this.instance.bodyScrollable;
|
|
|
|
this.prepare();
|
|
this.bindEvents();
|
|
}
|
|
|
|
_createClass(CellManager, [{
|
|
key: 'prepare',
|
|
value: function prepare() {
|
|
this.$borderOutline = this.instance.$borders.find('.border-outline');
|
|
this.$borderBg = this.instance.$borders.find('.border-background');
|
|
}
|
|
}, {
|
|
key: 'bindEvents',
|
|
value: function bindEvents() {
|
|
this.bindFocusCell();
|
|
this.bindEditCell();
|
|
this.bindKeyboardNav();
|
|
this.bindKeyboardSelection();
|
|
this.bindCopyCellContents();
|
|
}
|
|
}, {
|
|
key: 'bindFocusCell',
|
|
value: function bindFocusCell() {
|
|
var _this = this;
|
|
|
|
var bodyScrollable = this.instance.bodyScrollable;
|
|
|
|
this.$focusedCell = null;
|
|
bodyScrollable.on('click', '.data-table-col', function (e) {
|
|
_this.focusCell($(e.currentTarget));
|
|
});
|
|
}
|
|
}, {
|
|
key: 'bindEditCell',
|
|
value: function bindEditCell() {
|
|
var _this2 = this;
|
|
|
|
var self = this;
|
|
|
|
this.$editingCell = null;
|
|
this.bodyScrollable.on('dblclick', '.data-table-col', function () {
|
|
self.activateEditing($(this));
|
|
});
|
|
|
|
_keyboard2.default.on('enter', function (e) {
|
|
if (_this2.$focusedCell && !_this2.$editingCell) {
|
|
// enter keypress on focused cell
|
|
_this2.activateEditing(_this2.$focusedCell);
|
|
} else if (_this2.$editingCell) {
|
|
// enter keypress on editing cell
|
|
_this2.submitEditing(_this2.$editingCell);
|
|
_this2.deactivateEditing();
|
|
}
|
|
});
|
|
|
|
$(document.body).on('click', function (e) {
|
|
if ($(e.target).is('.edit-cell, .edit-cell *')) return;
|
|
_this2.deactivateEditing();
|
|
});
|
|
}
|
|
}, {
|
|
key: 'bindKeyboardNav',
|
|
value: function bindKeyboardNav() {
|
|
var _this3 = this;
|
|
|
|
var focusCell = function focusCell(direction) {
|
|
if (!_this3.$focusedCell) return;
|
|
var $cell = _this3.$focusedCell;
|
|
|
|
if (direction === 'left') {
|
|
$cell = _this3.getLeftCell$($cell);
|
|
} else if (direction === 'right') {
|
|
$cell = _this3.getRightCell$($cell);
|
|
} else if (direction === 'up') {
|
|
$cell = _this3.getAboveCell$($cell);
|
|
} else if (direction === 'down') {
|
|
$cell = _this3.getBelowCell$($cell);
|
|
}
|
|
|
|
_this3.focusCell($cell);
|
|
};
|
|
|
|
['left', 'right', 'up', 'down'].map(function (direction) {
|
|
return _keyboard2.default.on(direction, function () {
|
|
return focusCell(direction);
|
|
});
|
|
});
|
|
|
|
_keyboard2.default.on('esc', function () {
|
|
_this3.deactivateEditing();
|
|
});
|
|
}
|
|
}, {
|
|
key: 'bindKeyboardSelection',
|
|
value: function bindKeyboardSelection() {
|
|
var _this4 = this;
|
|
|
|
var getNextSelectionCursor = function getNextSelectionCursor(direction) {
|
|
var $selectionCursor = _this4.getSelectionCursor();
|
|
|
|
if (direction === 'left') {
|
|
$selectionCursor = _this4.getLeftCell$($selectionCursor);
|
|
} else if (direction === 'right') {
|
|
$selectionCursor = _this4.getRightCell$($selectionCursor);
|
|
} else if (direction === 'up') {
|
|
$selectionCursor = _this4.getAboveCell$($selectionCursor);
|
|
} else if (direction === 'down') {
|
|
$selectionCursor = _this4.getBelowCell$($selectionCursor);
|
|
}
|
|
|
|
return $selectionCursor;
|
|
};
|
|
|
|
var selectArea = function selectArea($selectionCursor) {
|
|
if (!_this4.$focusedCell) return;
|
|
|
|
if (_this4.selectArea(_this4.$focusedCell, $selectionCursor)) {
|
|
// valid selection
|
|
_this4.$selectionCursor = $selectionCursor;
|
|
}
|
|
};
|
|
|
|
['left', 'right', 'up', 'down'].map(function (direction) {
|
|
return _keyboard2.default.on('shift+' + direction, function () {
|
|
return selectArea(getNextSelectionCursor(direction));
|
|
});
|
|
});
|
|
}
|
|
}, {
|
|
key: 'bindCopyCellContents',
|
|
value: function bindCopyCellContents() {
|
|
var _this5 = this;
|
|
|
|
_keyboard2.default.on('ctrl+c', function () {
|
|
_this5.copyCellContents(_this5.$focusedCell, _this5.$selectionCursor);
|
|
});
|
|
}
|
|
}, {
|
|
key: 'focusCell',
|
|
value: function focusCell($cell) {
|
|
if (!$cell.length) return;
|
|
|
|
var _getCellAttr = this.getCellAttr($cell),
|
|
colIndex = _getCellAttr.colIndex;
|
|
|
|
if (colIndex < this.instance.getFirstColumnIndex()) {
|
|
return;
|
|
}
|
|
|
|
this.deactivateEditing();
|
|
this.clearSelection();
|
|
|
|
if (this.options.addCheckboxColumn && colIndex === 0) {
|
|
return;
|
|
}
|
|
|
|
if (this.$focusedCell) {
|
|
this.$focusedCell.removeClass('selected');
|
|
}
|
|
|
|
this.$focusedCell = $cell;
|
|
$cell.addClass('selected');
|
|
|
|
this.highlightRowColumnHeader($cell);
|
|
}
|
|
}, {
|
|
key: 'highlightRowColumnHeader',
|
|
value: function highlightRowColumnHeader($cell) {
|
|
var _getCellAttr2 = this.getCellAttr($cell),
|
|
colIndex = _getCellAttr2.colIndex,
|
|
rowIndex = _getCellAttr2.rowIndex;
|
|
|
|
var _colIndex = this.instance.getSerialColumnIndex();
|
|
var colHeaderSelector = '.data-table-header .data-table-col[data-col-index="' + colIndex + '"]';
|
|
var rowHeaderSelector = '.data-table-col[data-row-index="' + rowIndex + '"][data-col-index="' + _colIndex + '"]';
|
|
|
|
if (this.lastSelectors) {
|
|
this.instance.removeStyle(this.lastSelectors.colHeaderSelector);
|
|
this.instance.removeStyle(this.lastSelectors.rowHeaderSelector);
|
|
}
|
|
|
|
this.instance.setStyle(colHeaderSelector, {
|
|
'background-color': 'var(--light-bg)'
|
|
});
|
|
|
|
this.instance.setStyle(rowHeaderSelector, {
|
|
'background-color': 'var(--light-bg)'
|
|
});
|
|
|
|
this.lastSelectors = {
|
|
colHeaderSelector: colHeaderSelector,
|
|
rowHeaderSelector: rowHeaderSelector
|
|
};
|
|
}
|
|
}, {
|
|
key: 'selectArea',
|
|
value: function selectArea($cell1, $cell2) {
|
|
var _this6 = this;
|
|
|
|
var cells = this.getCellsInRange.apply(this, arguments);
|
|
|
|
if (!cells) return false;
|
|
this.clearSelection();
|
|
var $cells = cells.map(function (_ref) {
|
|
var _ref2 = _slicedToArray(_ref, 2),
|
|
c = _ref2[0],
|
|
r = _ref2[1];
|
|
|
|
return _this6.getCell$(r, c)[0];
|
|
});
|
|
|
|
$($cells).addClass('highlight');
|
|
return true;
|
|
}
|
|
}, {
|
|
key: 'getCellsInRange',
|
|
value: function getCellsInRange($cell1, $cell2) {
|
|
var colIndex1 = void 0,
|
|
rowIndex1 = void 0,
|
|
colIndex2 = void 0,
|
|
rowIndex2 = void 0;
|
|
|
|
if (typeof $cell1 === 'number') {
|
|
var _arguments = Array.prototype.slice.call(arguments);
|
|
|
|
colIndex1 = _arguments[0];
|
|
rowIndex1 = _arguments[1];
|
|
colIndex2 = _arguments[2];
|
|
rowIndex2 = _arguments[3];
|
|
} else if ((typeof $cell1 === 'undefined' ? 'undefined' : _typeof($cell1)) === 'object') {
|
|
|
|
if (!($cell1.length && $cell2.length)) {
|
|
return false;
|
|
}
|
|
|
|
var cell1 = this.getCellAttr($cell1);
|
|
var cell2 = this.getCellAttr($cell2);
|
|
|
|
colIndex1 = cell1.colIndex;
|
|
rowIndex1 = cell1.rowIndex;
|
|
colIndex2 = cell2.colIndex;
|
|
rowIndex2 = cell2.rowIndex;
|
|
}
|
|
|
|
if (rowIndex1 > rowIndex2) {
|
|
var _ref3 = [rowIndex2, rowIndex1];
|
|
rowIndex1 = _ref3[0];
|
|
rowIndex2 = _ref3[1];
|
|
}
|
|
|
|
if (colIndex1 > colIndex2) {
|
|
var _ref4 = [colIndex2, colIndex1];
|
|
colIndex1 = _ref4[0];
|
|
colIndex2 = _ref4[1];
|
|
}
|
|
|
|
var cells = [];
|
|
var colIndex = colIndex1;
|
|
var rowIndex = rowIndex1;
|
|
var rowIndices = [];
|
|
|
|
while (rowIndex <= rowIndex2) {
|
|
rowIndices.push(rowIndex);
|
|
rowIndex++;
|
|
}
|
|
|
|
rowIndices.map(function (rowIndex) {
|
|
while (colIndex <= colIndex2) {
|
|
cells.push([colIndex, rowIndex]);
|
|
colIndex++;
|
|
}
|
|
colIndex = colIndex1;
|
|
});
|
|
|
|
return cells;
|
|
}
|
|
}, {
|
|
key: 'clearSelection',
|
|
value: function clearSelection() {
|
|
this.bodyScrollable.find('.data-table-col.highlight').removeClass('highlight');
|
|
this.$selectionCursor = null;
|
|
}
|
|
}, {
|
|
key: 'getSelectionCursor',
|
|
value: function getSelectionCursor() {
|
|
return this.$selectionCursor || this.$focusedCell;
|
|
}
|
|
}, {
|
|
key: 'activateEditing',
|
|
value: function activateEditing($cell) {
|
|
var _getCellAttr3 = this.getCellAttr($cell),
|
|
rowIndex = _getCellAttr3.rowIndex,
|
|
colIndex = _getCellAttr3.colIndex;
|
|
|
|
var col = this.instance.getColumn(colIndex);
|
|
|
|
if (col && col.editable === false) {
|
|
return;
|
|
}
|
|
|
|
if (this.$editingCell) {
|
|
var _getCellAttr4 = this.getCellAttr(this.$editingCell),
|
|
_rowIndex = _getCellAttr4._rowIndex,
|
|
_colIndex = _getCellAttr4._colIndex;
|
|
|
|
if (rowIndex === _rowIndex && colIndex === _colIndex) {
|
|
// editing the same cell
|
|
return;
|
|
}
|
|
}
|
|
|
|
this.$editingCell = $cell;
|
|
$cell.addClass('editing');
|
|
|
|
var $editCell = $cell.find('.edit-cell').empty();
|
|
var cell = this.getCell(colIndex, rowIndex);
|
|
var editing = this.getEditingObject(colIndex, rowIndex, cell.content, $editCell);
|
|
|
|
if (editing) {
|
|
this.currentCellEditing = editing;
|
|
// initialize editing input with cell value
|
|
editing.initValue(cell.content);
|
|
}
|
|
}
|
|
}, {
|
|
key: 'deactivateEditing',
|
|
value: function deactivateEditing() {
|
|
if (!this.$editingCell) return;
|
|
this.$editingCell.removeClass('editing');
|
|
this.$editingCell = null;
|
|
}
|
|
}, {
|
|
key: 'getEditingObject',
|
|
value: function getEditingObject(colIndex, rowIndex, value, parent) {
|
|
if (this.options.editing) {
|
|
return this.options.editing(colIndex, rowIndex, value, parent);
|
|
}
|
|
|
|
// editing fallback
|
|
var $input = $('<input type="text" />');
|
|
|
|
parent.append($input);
|
|
|
|
return {
|
|
initValue: function initValue(value) {
|
|
$input.focus();
|
|
return $input.val(value);
|
|
},
|
|
getValue: function getValue() {
|
|
return $input.val();
|
|
},
|
|
setValue: function setValue(value) {
|
|
return $input.val(value);
|
|
}
|
|
};
|
|
}
|
|
}, {
|
|
key: 'submitEditing',
|
|
value: function submitEditing($cell) {
|
|
var _this7 = this;
|
|
|
|
var _getCellAttr5 = this.getCellAttr($cell),
|
|
rowIndex = _getCellAttr5.rowIndex,
|
|
colIndex = _getCellAttr5.colIndex;
|
|
|
|
if ($cell) {
|
|
var editing = this.currentCellEditing;
|
|
|
|
if (editing) {
|
|
var value = editing.getValue();
|
|
var done = editing.setValue(value);
|
|
|
|
if (done && done.then) {
|
|
// wait for promise then update internal state
|
|
done.then(function () {
|
|
return _this7.updateCell(rowIndex, colIndex, value);
|
|
});
|
|
} else {
|
|
this.updateCell(rowIndex, colIndex, value);
|
|
}
|
|
}
|
|
}
|
|
|
|
this.currentCellEditing = null;
|
|
}
|
|
}, {
|
|
key: 'copyCellContents',
|
|
value: function copyCellContents($cell1, $cell2) {
|
|
var _this8 = this;
|
|
|
|
var cells = this.getCellsInRange.apply(this, arguments);
|
|
|
|
if (!cells) return;
|
|
|
|
var values = cells
|
|
// get cell objects
|
|
.map(function (index) {
|
|
return _this8.getCell.apply(_this8, _toConsumableArray(index));
|
|
})
|
|
// convert to array of rows
|
|
.reduce(function (acc, curr) {
|
|
var rowIndex = curr.rowIndex;
|
|
|
|
acc[rowIndex] = acc[rowIndex] || [];
|
|
acc[rowIndex].push(curr.content);
|
|
|
|
return acc;
|
|
}, [])
|
|
// join values by tab
|
|
.map(function (row) {
|
|
return row.join('\t');
|
|
})
|
|
// join rows by newline
|
|
.join('\n');
|
|
|
|
(0, _utils.copyTextToClipboard)(values);
|
|
}
|
|
}, {
|
|
key: 'updateCell',
|
|
value: function updateCell(rowIndex, colIndex, value) {
|
|
var cell = this.getCell(colIndex, rowIndex);
|
|
|
|
cell.content = value;
|
|
this.refreshCell(cell);
|
|
}
|
|
}, {
|
|
key: 'refreshCell',
|
|
value: function refreshCell(cell) {
|
|
var selector = '.data-table-col[data-row-index="' + cell.rowIndex + '"][data-col-index="' + cell.colIndex + '"]';
|
|
var $cell = this.bodyScrollable.find(selector);
|
|
|
|
$cell.html((0, _utils.getCellContent)(cell));
|
|
}
|
|
}, {
|
|
key: 'getCell$',
|
|
value: function getCell$(rowIndex, colIndex) {
|
|
return this.bodyScrollable.find('.data-table-col[data-row-index="' + rowIndex + '"][data-col-index="' + colIndex + '"]');
|
|
}
|
|
}, {
|
|
key: 'getAboveCell$',
|
|
value: function getAboveCell$($cell) {
|
|
var _getCellAttr6 = this.getCellAttr($cell),
|
|
colIndex = _getCellAttr6.colIndex;
|
|
|
|
var $aboveRow = $cell.parent().prev();
|
|
|
|
return $aboveRow.find('[data-col-index="' + colIndex + '"]');
|
|
}
|
|
}, {
|
|
key: 'getBelowCell$',
|
|
value: function getBelowCell$($cell) {
|
|
var _getCellAttr7 = this.getCellAttr($cell),
|
|
colIndex = _getCellAttr7.colIndex;
|
|
|
|
var $belowRow = $cell.parent().next();
|
|
|
|
return $belowRow.find('[data-col-index="' + colIndex + '"]');
|
|
}
|
|
}, {
|
|
key: 'getLeftCell$',
|
|
value: function getLeftCell$($cell) {
|
|
return $cell.prev();
|
|
}
|
|
}, {
|
|
key: 'getRightCell$',
|
|
value: function getRightCell$($cell) {
|
|
return $cell.next();
|
|
}
|
|
}, {
|
|
key: 'getCell',
|
|
value: function getCell(colIndex, rowIndex) {
|
|
return this.instance.datamanager.getCell(colIndex, rowIndex);
|
|
}
|
|
}, {
|
|
key: 'getCellAttr',
|
|
value: function getCellAttr($cell) {
|
|
return $cell.data();
|
|
}
|
|
}]);
|
|
|
|
return CellManager;
|
|
}();
|
|
|
|
exports.default = CellManager;
|
|
module.exports = exports['default'];
|
|
|
|
/***/ }),
|
|
/* 5 */
|
|
/***/ (function(module, exports, __webpack_require__) {
|
|
|
|
"use strict";
|
|
|
|
|
|
Object.defineProperty(exports, "__esModule", {
|
|
value: true
|
|
});
|
|
var KEYCODES = {
|
|
13: 'enter',
|
|
91: 'meta',
|
|
16: 'shift',
|
|
17: 'ctrl',
|
|
18: 'alt',
|
|
37: 'left',
|
|
38: 'up',
|
|
39: 'right',
|
|
40: 'down',
|
|
9: 'tab',
|
|
27: 'esc',
|
|
67: 'c'
|
|
};
|
|
|
|
var handlers = {};
|
|
|
|
function bind() {
|
|
$(document).on('keydown', handler);
|
|
}
|
|
|
|
function handler(e) {
|
|
var key = KEYCODES[e.keyCode];
|
|
|
|
if (e.shiftKey && key !== 'shift') {
|
|
key = 'shift+' + key;
|
|
}
|
|
|
|
if (e.ctrlKey && key !== 'ctrl' || e.metaKey && key !== 'meta') {
|
|
key = 'ctrl+' + key;
|
|
}
|
|
|
|
var _handlers = handlers[key];
|
|
|
|
if (_handlers && _handlers.length > 0) {
|
|
_handlers.map(function (h) {
|
|
return h();
|
|
});
|
|
|
|
if (!e.isDefaultPrevented()) {
|
|
e.preventDefault();
|
|
}
|
|
}
|
|
}
|
|
|
|
bind();
|
|
|
|
exports.default = {
|
|
on: function on(key, handler) {
|
|
var keys = key.split(',').map(function (k) {
|
|
return k.trim();
|
|
});
|
|
|
|
keys.map(function (key) {
|
|
handlers[key] = handlers[key] || [];
|
|
handlers[key].push(handler);
|
|
});
|
|
}
|
|
};
|
|
module.exports = exports['default'];
|
|
|
|
/***/ }),
|
|
/* 6 */
|
|
/***/ (function(module, exports, __webpack_require__) {
|
|
|
|
// style-loader: Adds some css to the DOM by adding a <style> tag
|
|
|
|
// load the styles
|
|
var content = __webpack_require__(7);
|
|
if(typeof content === 'string') content = [[module.i, content, '']];
|
|
// Prepare cssTransformation
|
|
var transform;
|
|
|
|
var options = {}
|
|
options.transform = transform
|
|
// add the styles to the DOM
|
|
var update = __webpack_require__(9)(content, options);
|
|
if(content.locals) module.exports = content.locals;
|
|
// Hot Module Replacement
|
|
if(false) {
|
|
// When the styles change, update the <style> tags
|
|
if(!content.locals) {
|
|
module.hot.accept("!!../node_modules/css-loader/index.js!../node_modules/sass-loader/lib/loader.js!./style.scss", function() {
|
|
var newContent = require("!!../node_modules/css-loader/index.js!../node_modules/sass-loader/lib/loader.js!./style.scss");
|
|
if(typeof newContent === 'string') newContent = [[module.id, newContent, '']];
|
|
update(newContent);
|
|
});
|
|
}
|
|
// When the module is disposed, remove the <style> tags
|
|
module.hot.dispose(function() { update(); });
|
|
}
|
|
|
|
/***/ }),
|
|
/* 7 */
|
|
/***/ (function(module, exports, __webpack_require__) {
|
|
|
|
exports = module.exports = __webpack_require__(8)(undefined);
|
|
// imports
|
|
|
|
|
|
// module
|
|
exports.push([module.i, "/* variables */\n:root {\n --border-color: #d1d8dd;\n --primary-color: #5292f7;\n --light-bg: #f5f7fa; }\n\n/* resets */\n*, *::after, *::before {\n box-sizing: border-box; }\n\nbutton, input {\n overflow: visible;\n font-family: inherit;\n font-size: inherit;\n line-height: inherit;\n margin: 0; }\n\n/* styling */\n.data-table * {\n outline: none; }\n\n.data-table {\n width: 100%;\n position: relative;\n overflow: auto; }\n .data-table table {\n border-collapse: collapse; }\n .data-table table td {\n padding: 0;\n border: 1px solid var(--border-color); }\n .data-table thead td {\n border-bottom-width: 2px; }\n\n.body-scrollable {\n max-height: 500px;\n overflow: auto;\n border-bottom: 1px solid var(--border-color); }\n\n.data-table-header {\n position: absolute;\n top: 0;\n left: 0;\n background-color: white;\n font-weight: bold;\n cursor: col-resize; }\n .data-table-header .content span {\n cursor: pointer; }\n .data-table-header .sort-indicator {\n position: absolute;\n right: 8px;\n top: 9px; }\n\n.data-table-col {\n position: relative; }\n .data-table-col .content {\n padding: 8px;\n border: 2px solid transparent; }\n .data-table-col .content.ellipsis {\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden; }\n .data-table-col .edit-cell {\n display: none;\n padding: 8px;\n background: #fff;\n z-index: 1;\n height: 100%; }\n .data-table-col .edit-cell input {\n outline: none;\n width: 100%;\n border: none;\n height: 1em; }\n .data-table-col.selected .content {\n border: 2px solid var(--primary-color); }\n .data-table-col.editing .content {\n display: none; }\n .data-table-col.editing .edit-cell {\n border: 2px solid var(--primary-color);\n display: block; }\n .data-table-col.highlight {\n background-color: var(--light-bg); }\n\n.data-table-row.row-highlight {\n background-color: var(--light-bg); }\n\n.noselect {\n -webkit-touch-callout: none;\n -webkit-user-select: none;\n -khtml-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none; }\n", ""]);
|
|
|
|
// exports
|
|
|
|
|
|
/***/ }),
|
|
/* 8 */
|
|
/***/ (function(module, exports) {
|
|
|
|
/*
|
|
MIT License http://www.opensource.org/licenses/mit-license.php
|
|
Author Tobias Koppers @sokra
|
|
*/
|
|
// css base code, injected by the css-loader
|
|
module.exports = function(useSourceMap) {
|
|
var list = [];
|
|
|
|
// return the list of modules as css string
|
|
list.toString = function toString() {
|
|
return this.map(function (item) {
|
|
var content = cssWithMappingToString(item, useSourceMap);
|
|
if(item[2]) {
|
|
return "@media " + item[2] + "{" + content + "}";
|
|
} else {
|
|
return content;
|
|
}
|
|
}).join("");
|
|
};
|
|
|
|
// import a list of modules into the list
|
|
list.i = function(modules, mediaQuery) {
|
|
if(typeof modules === "string")
|
|
modules = [[null, modules, ""]];
|
|
var alreadyImportedModules = {};
|
|
for(var i = 0; i < this.length; i++) {
|
|
var id = this[i][0];
|
|
if(typeof id === "number")
|
|
alreadyImportedModules[id] = true;
|
|
}
|
|
for(i = 0; i < modules.length; i++) {
|
|
var item = modules[i];
|
|
// skip already imported module
|
|
// this implementation is not 100% perfect for weird media query combinations
|
|
// when a module is imported multiple times with different media queries.
|
|
// I hope this will never occur (Hey this way we have smaller bundles)
|
|
if(typeof item[0] !== "number" || !alreadyImportedModules[item[0]]) {
|
|
if(mediaQuery && !item[2]) {
|
|
item[2] = mediaQuery;
|
|
} else if(mediaQuery) {
|
|
item[2] = "(" + item[2] + ") and (" + mediaQuery + ")";
|
|
}
|
|
list.push(item);
|
|
}
|
|
}
|
|
};
|
|
return list;
|
|
};
|
|
|
|
function cssWithMappingToString(item, useSourceMap) {
|
|
var content = item[1] || '';
|
|
var cssMapping = item[3];
|
|
if (!cssMapping) {
|
|
return content;
|
|
}
|
|
|
|
if (useSourceMap && typeof btoa === 'function') {
|
|
var sourceMapping = toComment(cssMapping);
|
|
var sourceURLs = cssMapping.sources.map(function (source) {
|
|
return '/*# sourceURL=' + cssMapping.sourceRoot + source + ' */'
|
|
});
|
|
|
|
return [content].concat(sourceURLs).concat([sourceMapping]).join('\n');
|
|
}
|
|
|
|
return [content].join('\n');
|
|
}
|
|
|
|
// Adapted from convert-source-map (MIT)
|
|
function toComment(sourceMap) {
|
|
// eslint-disable-next-line no-undef
|
|
var base64 = btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap))));
|
|
var data = 'sourceMappingURL=data:application/json;charset=utf-8;base64,' + base64;
|
|
|
|
return '/*# ' + data + ' */';
|
|
}
|
|
|
|
|
|
/***/ }),
|
|
/* 9 */
|
|
/***/ (function(module, exports, __webpack_require__) {
|
|
|
|
/*
|
|
MIT License http://www.opensource.org/licenses/mit-license.php
|
|
Author Tobias Koppers @sokra
|
|
*/
|
|
|
|
var stylesInDom = {};
|
|
|
|
var memoize = function (fn) {
|
|
var memo;
|
|
|
|
return function () {
|
|
if (typeof memo === "undefined") memo = fn.apply(this, arguments);
|
|
return memo;
|
|
};
|
|
};
|
|
|
|
var isOldIE = memoize(function () {
|
|
// Test for IE <= 9 as proposed by Browserhacks
|
|
// @see http://browserhacks.com/#hack-e71d8692f65334173fee715c222cb805
|
|
// Tests for existence of standard globals is to allow style-loader
|
|
// to operate correctly into non-standard environments
|
|
// @see https://github.com/webpack-contrib/style-loader/issues/177
|
|
return window && document && document.all && !window.atob;
|
|
});
|
|
|
|
var getElement = (function (fn) {
|
|
var memo = {};
|
|
|
|
return function(selector) {
|
|
if (typeof memo[selector] === "undefined") {
|
|
memo[selector] = fn.call(this, selector);
|
|
}
|
|
|
|
return memo[selector]
|
|
};
|
|
})(function (target) {
|
|
return document.querySelector(target)
|
|
});
|
|
|
|
var singleton = null;
|
|
var singletonCounter = 0;
|
|
var stylesInsertedAtTop = [];
|
|
|
|
var fixUrls = __webpack_require__(10);
|
|
|
|
module.exports = function(list, options) {
|
|
if (typeof DEBUG !== "undefined" && DEBUG) {
|
|
if (typeof document !== "object") throw new Error("The style-loader cannot be used in a non-browser environment");
|
|
}
|
|
|
|
options = options || {};
|
|
|
|
options.attrs = typeof options.attrs === "object" ? options.attrs : {};
|
|
|
|
// Force single-tag solution on IE6-9, which has a hard limit on the # of <style>
|
|
// tags it will allow on a page
|
|
if (!options.singleton) options.singleton = isOldIE();
|
|
|
|
// By default, add <style> tags to the <head> element
|
|
if (!options.insertInto) options.insertInto = "head";
|
|
|
|
// By default, add <style> tags to the bottom of the target
|
|
if (!options.insertAt) options.insertAt = "bottom";
|
|
|
|
var styles = listToStyles(list, options);
|
|
|
|
addStylesToDom(styles, options);
|
|
|
|
return function update (newList) {
|
|
var mayRemove = [];
|
|
|
|
for (var i = 0; i < styles.length; i++) {
|
|
var item = styles[i];
|
|
var domStyle = stylesInDom[item.id];
|
|
|
|
domStyle.refs--;
|
|
mayRemove.push(domStyle);
|
|
}
|
|
|
|
if(newList) {
|
|
var newStyles = listToStyles(newList, options);
|
|
addStylesToDom(newStyles, options);
|
|
}
|
|
|
|
for (var i = 0; i < mayRemove.length; i++) {
|
|
var domStyle = mayRemove[i];
|
|
|
|
if(domStyle.refs === 0) {
|
|
for (var j = 0; j < domStyle.parts.length; j++) domStyle.parts[j]();
|
|
|
|
delete stylesInDom[domStyle.id];
|
|
}
|
|
}
|
|
};
|
|
};
|
|
|
|
function addStylesToDom (styles, options) {
|
|
for (var i = 0; i < styles.length; i++) {
|
|
var item = styles[i];
|
|
var domStyle = stylesInDom[item.id];
|
|
|
|
if(domStyle) {
|
|
domStyle.refs++;
|
|
|
|
for(var j = 0; j < domStyle.parts.length; j++) {
|
|
domStyle.parts[j](item.parts[j]);
|
|
}
|
|
|
|
for(; j < item.parts.length; j++) {
|
|
domStyle.parts.push(addStyle(item.parts[j], options));
|
|
}
|
|
} else {
|
|
var parts = [];
|
|
|
|
for(var j = 0; j < item.parts.length; j++) {
|
|
parts.push(addStyle(item.parts[j], options));
|
|
}
|
|
|
|
stylesInDom[item.id] = {id: item.id, refs: 1, parts: parts};
|
|
}
|
|
}
|
|
}
|
|
|
|
function listToStyles (list, options) {
|
|
var styles = [];
|
|
var newStyles = {};
|
|
|
|
for (var i = 0; i < list.length; i++) {
|
|
var item = list[i];
|
|
var id = options.base ? item[0] + options.base : item[0];
|
|
var css = item[1];
|
|
var media = item[2];
|
|
var sourceMap = item[3];
|
|
var part = {css: css, media: media, sourceMap: sourceMap};
|
|
|
|
if(!newStyles[id]) styles.push(newStyles[id] = {id: id, parts: [part]});
|
|
else newStyles[id].parts.push(part);
|
|
}
|
|
|
|
return styles;
|
|
}
|
|
|
|
function insertStyleElement (options, style) {
|
|
var target = getElement(options.insertInto)
|
|
|
|
if (!target) {
|
|
throw new Error("Couldn't find a style target. This probably means that the value for the 'insertInto' parameter is invalid.");
|
|
}
|
|
|
|
var lastStyleElementInsertedAtTop = stylesInsertedAtTop[stylesInsertedAtTop.length - 1];
|
|
|
|
if (options.insertAt === "top") {
|
|
if (!lastStyleElementInsertedAtTop) {
|
|
target.insertBefore(style, target.firstChild);
|
|
} else if (lastStyleElementInsertedAtTop.nextSibling) {
|
|
target.insertBefore(style, lastStyleElementInsertedAtTop.nextSibling);
|
|
} else {
|
|
target.appendChild(style);
|
|
}
|
|
stylesInsertedAtTop.push(style);
|
|
} else if (options.insertAt === "bottom") {
|
|
target.appendChild(style);
|
|
} else {
|
|
throw new Error("Invalid value for parameter 'insertAt'. Must be 'top' or 'bottom'.");
|
|
}
|
|
}
|
|
|
|
function removeStyleElement (style) {
|
|
if (style.parentNode === null) return false;
|
|
style.parentNode.removeChild(style);
|
|
|
|
var idx = stylesInsertedAtTop.indexOf(style);
|
|
if(idx >= 0) {
|
|
stylesInsertedAtTop.splice(idx, 1);
|
|
}
|
|
}
|
|
|
|
function createStyleElement (options) {
|
|
var style = document.createElement("style");
|
|
|
|
options.attrs.type = "text/css";
|
|
|
|
addAttrs(style, options.attrs);
|
|
insertStyleElement(options, style);
|
|
|
|
return style;
|
|
}
|
|
|
|
function createLinkElement (options) {
|
|
var link = document.createElement("link");
|
|
|
|
options.attrs.type = "text/css";
|
|
options.attrs.rel = "stylesheet";
|
|
|
|
addAttrs(link, options.attrs);
|
|
insertStyleElement(options, link);
|
|
|
|
return link;
|
|
}
|
|
|
|
function addAttrs (el, attrs) {
|
|
Object.keys(attrs).forEach(function (key) {
|
|
el.setAttribute(key, attrs[key]);
|
|
});
|
|
}
|
|
|
|
function addStyle (obj, options) {
|
|
var style, update, remove, result;
|
|
|
|
// If a transform function was defined, run it on the css
|
|
if (options.transform && obj.css) {
|
|
result = options.transform(obj.css);
|
|
|
|
if (result) {
|
|
// If transform returns a value, use that instead of the original css.
|
|
// This allows running runtime transformations on the css.
|
|
obj.css = result;
|
|
} else {
|
|
// If the transform function returns a falsy value, don't add this css.
|
|
// This allows conditional loading of css
|
|
return function() {
|
|
// noop
|
|
};
|
|
}
|
|
}
|
|
|
|
if (options.singleton) {
|
|
var styleIndex = singletonCounter++;
|
|
|
|
style = singleton || (singleton = createStyleElement(options));
|
|
|
|
update = applyToSingletonTag.bind(null, style, styleIndex, false);
|
|
remove = applyToSingletonTag.bind(null, style, styleIndex, true);
|
|
|
|
} else if (
|
|
obj.sourceMap &&
|
|
typeof URL === "function" &&
|
|
typeof URL.createObjectURL === "function" &&
|
|
typeof URL.revokeObjectURL === "function" &&
|
|
typeof Blob === "function" &&
|
|
typeof btoa === "function"
|
|
) {
|
|
style = createLinkElement(options);
|
|
update = updateLink.bind(null, style, options);
|
|
remove = function () {
|
|
removeStyleElement(style);
|
|
|
|
if(style.href) URL.revokeObjectURL(style.href);
|
|
};
|
|
} else {
|
|
style = createStyleElement(options);
|
|
update = applyToTag.bind(null, style);
|
|
remove = function () {
|
|
removeStyleElement(style);
|
|
};
|
|
}
|
|
|
|
update(obj);
|
|
|
|
return function updateStyle (newObj) {
|
|
if (newObj) {
|
|
if (
|
|
newObj.css === obj.css &&
|
|
newObj.media === obj.media &&
|
|
newObj.sourceMap === obj.sourceMap
|
|
) {
|
|
return;
|
|
}
|
|
|
|
update(obj = newObj);
|
|
} else {
|
|
remove();
|
|
}
|
|
};
|
|
}
|
|
|
|
var replaceText = (function () {
|
|
var textStore = [];
|
|
|
|
return function (index, replacement) {
|
|
textStore[index] = replacement;
|
|
|
|
return textStore.filter(Boolean).join('\n');
|
|
};
|
|
})();
|
|
|
|
function applyToSingletonTag (style, index, remove, obj) {
|
|
var css = remove ? "" : obj.css;
|
|
|
|
if (style.styleSheet) {
|
|
style.styleSheet.cssText = replaceText(index, css);
|
|
} else {
|
|
var cssNode = document.createTextNode(css);
|
|
var childNodes = style.childNodes;
|
|
|
|
if (childNodes[index]) style.removeChild(childNodes[index]);
|
|
|
|
if (childNodes.length) {
|
|
style.insertBefore(cssNode, childNodes[index]);
|
|
} else {
|
|
style.appendChild(cssNode);
|
|
}
|
|
}
|
|
}
|
|
|
|
function applyToTag (style, obj) {
|
|
var css = obj.css;
|
|
var media = obj.media;
|
|
|
|
if(media) {
|
|
style.setAttribute("media", media)
|
|
}
|
|
|
|
if(style.styleSheet) {
|
|
style.styleSheet.cssText = css;
|
|
} else {
|
|
while(style.firstChild) {
|
|
style.removeChild(style.firstChild);
|
|
}
|
|
|
|
style.appendChild(document.createTextNode(css));
|
|
}
|
|
}
|
|
|
|
function updateLink (link, options, obj) {
|
|
var css = obj.css;
|
|
var sourceMap = obj.sourceMap;
|
|
|
|
/*
|
|
If convertToAbsoluteUrls isn't defined, but sourcemaps are enabled
|
|
and there is no publicPath defined then lets turn convertToAbsoluteUrls
|
|
on by default. Otherwise default to the convertToAbsoluteUrls option
|
|
directly
|
|
*/
|
|
var autoFixUrls = options.convertToAbsoluteUrls === undefined && sourceMap;
|
|
|
|
if (options.convertToAbsoluteUrls || autoFixUrls) {
|
|
css = fixUrls(css);
|
|
}
|
|
|
|
if (sourceMap) {
|
|
// http://stackoverflow.com/a/26603875
|
|
css += "\n/*# sourceMappingURL=data:application/json;base64," + btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))) + " */";
|
|
}
|
|
|
|
var blob = new Blob([css], { type: "text/css" });
|
|
|
|
var oldSrc = link.href;
|
|
|
|
link.href = URL.createObjectURL(blob);
|
|
|
|
if(oldSrc) URL.revokeObjectURL(oldSrc);
|
|
}
|
|
|
|
|
|
/***/ }),
|
|
/* 10 */
|
|
/***/ (function(module, exports) {
|
|
|
|
|
|
/**
|
|
* When source maps are enabled, `style-loader` uses a link element with a data-uri to
|
|
* embed the css on the page. This breaks all relative urls because now they are relative to a
|
|
* bundle instead of the current page.
|
|
*
|
|
* One solution is to only use full urls, but that may be impossible.
|
|
*
|
|
* Instead, this function "fixes" the relative urls to be absolute according to the current page location.
|
|
*
|
|
* A rudimentary test suite is located at `test/fixUrls.js` and can be run via the `npm test` command.
|
|
*
|
|
*/
|
|
|
|
module.exports = function (css) {
|
|
// get current location
|
|
var location = typeof window !== "undefined" && window.location;
|
|
|
|
if (!location) {
|
|
throw new Error("fixUrls requires window.location");
|
|
}
|
|
|
|
// blank or null?
|
|
if (!css || typeof css !== "string") {
|
|
return css;
|
|
}
|
|
|
|
var baseUrl = location.protocol + "//" + location.host;
|
|
var currentDir = baseUrl + location.pathname.replace(/\/[^\/]*$/, "/");
|
|
|
|
// convert each url(...)
|
|
/*
|
|
This regular expression is just a way to recursively match brackets within
|
|
a string.
|
|
|
|
/url\s*\( = Match on the word "url" with any whitespace after it and then a parens
|
|
( = Start a capturing group
|
|
(?: = Start a non-capturing group
|
|
[^)(] = Match anything that isn't a parentheses
|
|
| = OR
|
|
\( = Match a start parentheses
|
|
(?: = Start another non-capturing groups
|
|
[^)(]+ = Match anything that isn't a parentheses
|
|
| = OR
|
|
\( = Match a start parentheses
|
|
[^)(]* = Match anything that isn't a parentheses
|
|
\) = Match a end parentheses
|
|
) = End Group
|
|
*\) = Match anything and then a close parens
|
|
) = Close non-capturing group
|
|
* = Match anything
|
|
) = Close capturing group
|
|
\) = Match a close parens
|
|
|
|
/gi = Get all matches, not the first. Be case insensitive.
|
|
*/
|
|
var fixedCss = css.replace(/url\s*\(((?:[^)(]|\((?:[^)(]+|\([^)(]*\))*\))*)\)/gi, function(fullMatch, origUrl) {
|
|
// strip quotes (if they exist)
|
|
var unquotedOrigUrl = origUrl
|
|
.trim()
|
|
.replace(/^"(.*)"$/, function(o, $1){ return $1; })
|
|
.replace(/^'(.*)'$/, function(o, $1){ return $1; });
|
|
|
|
// already a full url? no change
|
|
if (/^(#|data:|http:\/\/|https:\/\/|file:\/\/\/)/i.test(unquotedOrigUrl)) {
|
|
return fullMatch;
|
|
}
|
|
|
|
// convert the url to a full url
|
|
var newUrl;
|
|
|
|
if (unquotedOrigUrl.indexOf("//") === 0) {
|
|
//TODO: should we add protocol?
|
|
newUrl = unquotedOrigUrl;
|
|
} else if (unquotedOrigUrl.indexOf("/") === 0) {
|
|
// path should be relative to the base url
|
|
newUrl = baseUrl + unquotedOrigUrl; // already starts with '/'
|
|
} else {
|
|
// path should be relative to current directory
|
|
newUrl = currentDir + unquotedOrigUrl.replace(/^\.\//, ""); // Strip leading './'
|
|
}
|
|
|
|
// send back the fixed url(...)
|
|
return "url(" + JSON.stringify(newUrl) + ")";
|
|
});
|
|
|
|
// send back the fixed css
|
|
return fixedCss;
|
|
};
|
|
|
|
|
|
/***/ }),
|
|
/* 11 */
|
|
/***/ (function(module, exports) {
|
|
|
|
module.exports = {"name":"frappe-datatable","version":"0.0.1","description":"A modern datatable library for the web","main":"lib/frappe-datatable.js","scripts":{"build":"webpack --env build","dev":"webpack --progress --colors --watch --env dev","test":"mocha --compilers js:babel-core/register --colors ./test/*.spec.js","test:watch":"mocha --compilers js:babel-core/register --colors -w ./test/*.spec.js"},"devDependencies":{"babel-cli":"6.24.1","babel-core":"6.24.1","babel-eslint":"7.2.3","babel-loader":"7.0.0","babel-plugin-add-module-exports":"0.2.1","babel-preset-es2015":"6.24.1","chai":"3.5.0","css-loader":"^0.28.7","eslint":"3.19.0","eslint-loader":"1.7.1","mocha":"3.3.0","node-sass":"^4.5.3","sass-loader":"^6.0.6","style-loader":"^0.18.2","webpack":"^3.1.0","yargs":"7.1.0"},"repository":{"type":"git","url":"https://github.com/frappe/datatable.git"},"keywords":["webpack","es6","starter","library","universal","umd","commonjs"],"author":"Faris Ansari","license":"MIT","bugs":{"url":"https://github.com/frappe/datatable/issues"},"homepage":"https://frappe.github.io/datatable","dependencies":{"bootstrap":"^4.0.0-beta","popper.js":"^1.12.5"}}
|
|
|
|
/***/ })
|
|
/******/ ]);
|
|
});
|
|
//# sourceMappingURL=frappe-datatable.js.map
|