diff --git a/dist/css/style.css b/dist/css/style.css index 211c57c9..61de9bce 100644 --- a/dist/css/style.css +++ b/dist/css/style.css @@ -7129,6 +7129,179 @@ div.CodeMirror-dragcursors { /* Help users use markselection to safely style text background */ span.CodeMirror-selectedtext { background: none; } +/* variables */ +.data-table { + /* styling */ + width: 100%; + position: relative; + overflow: auto; } +/* resets */ +.data-table *, .data-table *::after, .data-table *::before { + -webkit-box-sizing: border-box; + box-sizing: border-box; } +.data-table button, .data-table input { + overflow: visible; + font-family: inherit; + font-size: inherit; + line-height: inherit; + margin: 0; + padding: 0; } +.data-table .input-style { + outline: none; + width: 100%; + border: none; } +.data-table *, .data-table *:focus { + outline: none; + border-radius: 0px; + -webkit-box-shadow: none; + box-shadow: none; } +.data-table table { + border-collapse: collapse; } +.data-table table td { + padding: 0; + border: 1px solid #d1d8dd; } +.data-table thead td { + border-bottom-width: 1px; } +.data-table .freeze-container { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -ms-flex-line-pack: center; + align-content: center; + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + background-color: #f5f7fa; + opacity: 0.5; + font-size: 2em; } +.data-table .freeze-container span { + position: absolute; + top: 50%; + -webkit-transform: translateY(-50%); + transform: translateY(-50%); } +.data-table .trash-container { + position: absolute; + bottom: 0; + left: 30%; + right: 30%; + height: 70px; + background: palevioletred; + opacity: 0.5; } +.data-table .hide { + display: none; } +.body-scrollable { + max-height: 500px; + overflow: auto; + border-bottom: 1px solid #d1d8dd; } +.body-scrollable.row-highlight-all .data-table-row:not(.row-unhighlight) { + background-color: #f5f7fa; } +.data-table-header { + position: absolute; + top: 0; + left: 0; + background-color: white; + font-weight: bold; } +.data-table-header .content span:not(.column-resizer) { + cursor: pointer; } +.data-table-header .column-resizer { + display: none; + position: absolute; + right: 0; + top: 0; + width: 4px; + width: 0.25rem; + height: 100%; + background-color: #5292f7; + cursor: col-resize; } +.data-table-header .data-table-dropdown { + position: absolute; + right: 10px; + display: -webkit-inline-box; + display: -ms-inline-flexbox; + display: inline-flex; + vertical-align: top; + text-align: left; } +.data-table-header .data-table-dropdown.is-active .data-table-dropdown-list { + display: block; } +.data-table-header .data-table-dropdown.is-active .data-table-dropdown-toggle { + display: block; } +.data-table-header .data-table-dropdown-toggle { + display: none; + background-color: transparent; + border: none; } +.data-table-header .data-table-dropdown-list { + display: none; + font-weight: normal; + position: absolute; + min-width: 128px; + min-width: 8rem; + top: 100%; + right: 0; + z-index: 1; + background-color: white; + border-radius: 3px; + -webkit-box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1); + box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1); + padding-bottom: 8px; + padding-bottom: 0.5rem; + padding-top: 8px; + padding-top: 0.5rem; } +.data-table-header .data-table-dropdown-list > div { + padding: 8px 16px; + padding: 0.5rem 1rem; } +.data-table-header .data-table-dropdown-list > div:hover { + background-color: #f5f7fa; } +.data-table-header .data-table-col.remove-column { + background-color: #FD8B8B; + -webkit-transition: 300ms background-color ease-in-out; + transition: 300ms background-color ease-in-out; } +.data-table-header .data-table-col.sortable-chosen { + background-color: #f5f7fa; } +.data-table-col { + position: relative; } +.data-table-col .content { + padding: 8px; + padding: 0.5rem; + border: 2px solid transparent; } +.data-table-col .content.ellipsis { + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; } +.data-table-col .edit-cell { + display: none; + padding: 8px; + padding: 0.5rem; + background: #fff; + z-index: 1; + height: 100%; } +.data-table-col.selected .content { + border: 2px solid #5292f7; } +.data-table-col.editing .content { + display: none; } +.data-table-col.editing .edit-cell { + border: 2px solid #5292f7; + display: block; } +.data-table-col.highlight { + background-color: #f5f7fa; } +.data-table-col:hover .column-resizer { + display: inline-block; } +.data-table-col:hover .data-table-dropdown-toggle { + display: block; } +.data-table-row.row-highlight { + background-color: #f5f7fa; } +.noselect { + -webkit-touch-callout: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; } +body.data-table-resize { + cursor: col-resize; } .indicator, .indicator-right { background: none; vertical-align: middle; } @@ -7172,17 +7345,14 @@ html { min-height: 100vh; } .desk-center { border-left: 1px solid #dee2e6; } -.desk-menu .list-group-item { - padding: 0.5rem 1rem; - border: none; } .hide { display: none !important; } .page { padding-bottom: 2rem; } .page .page-head { padding: 0.5rem 1rem; - background-color: #343a40; - color: #f8f9fa; } + background-color: #f8f9fa; + border-bottom: 1px solid #dee2e6; } .page .page-head .page-title { display: inline-block; margin-top: 0.3rem; } @@ -7192,7 +7362,7 @@ html { text-align: center; padding: 200px 0px; } .form-body { - padding: 1rem; } + padding: 2rem; } .form-body .form-control.font-weight-bold { background-color: lightyellow; } .form-body .alert { @@ -7213,6 +7383,26 @@ html { background-color: #e9ecef; } .dropdown-item { padding: 0.5rem 1rem; } +.bottom-right-float { + position: fixed; + margin-bottom: 0px; + bottom: 1rem; + right: 1rem; + max-width: 200px; + padding: 0.5rem 1rem; } +.desk-menu { + background-color: #e9ecef; } +.desk-menu .list-row { + border-bottom: 1px solid #e9ecef; } +.desk-menu .list-row:hover { + background-color: #dee2e6; } +.desk-menu .list-row.active { + background-color: #ced4da; } +.print-page { + padding: 3rem; + line-height: 1.8; } +.print-page td, .print-page th { + padding: 0.5rem; } .CodeMirror { font-family: "SFMono-Regular",Consolas,"Liberation Mono",Menlo,Courier,monospace; border: 1px solid #dee2e6; @@ -7260,8 +7450,3 @@ mark { left: auto; width: auto; min-width: 120px; } -.print-page { - padding: 3rem; - line-height: 1.8; } -.print-page td, .print-page th { - padding: 0.5rem; } diff --git a/dist/js/bundle.js b/dist/js/bundle.js index 440264b3..40765424 100644 --- a/dist/js/bundle.js +++ b/dist/js/bundle.js @@ -18,10 +18,10 @@ var utils = { _(text, args) { // should return translated text - return this.string_replace(text, args); + return this.stringReplace(text, args); }, - string_replace(str, args) { + stringReplace(str, args) { if (!Array.isArray(args)) { args = [args]; } @@ -9190,7 +9190,7 @@ var frappejs = { async getDuplicate(doc) { const newDoc = await this.getNewDoc(doc.doctype); for (let field of this.getMeta(doc.doctype).getValidFields()) { - if (field.fieldname === 'name') continue; + if (['name', 'submitted'].includes(field.fieldname)) continue; if (field.fieldtype === 'Table') { newDoc[field.fieldname] = (doc[field.fieldname] || []).map(d => { let newd = Object.assign({}, d); @@ -9291,6 +9291,7 @@ class ValidationError extends BaseError { var errors = { ValidationError: ValidationError, ValueError: class ValueError extends ValidationError { }, + Conflict: class Conflict extends ValidationError { }, NotFound: class NotFound extends BaseError { constructor(...params) { super(404, ...params); } }, @@ -9301,117 +9302,118 @@ var errors = { var observable = class Observable { constructor() { - this._isHot = {}; - this._eventQueue = {}; + this._observable = { + isHot: {}, + eventQueue: {}, + listeners: {}, + onceListeners: {} + }; } on(event, listener) { - this._addListener('_listeners', event, listener); - if (this._socketClient) { - this._socketClient.on(event, listener); + this._addListener('listeners', event, listener); + if (this._observable.socketClient) { + this._observable.socketClient.on(event, listener); } } // remove listener off(event, listener) { - for (let type of ['_listeners', '_onceListeners']) { - let index = this[type] && this[type][event] && this[type][event].indexOf(listener); + for (let type of ['listeners', 'onceListeners']) { + let index = this._observable[type][event] && this._observable[type][event].indexOf(listener); if (index) { - this[type][event].splice(index, 1); + this._observable[type][event].splice(index, 1); } } } once(event, listener) { - this._addListener('_onceListeners', event, listener); + this._addListener('onceListeners', event, listener); + } + + async trigger(event, params, throttle=false) { + if (throttle) { + if (this._throttled(event, params, throttle)) return; + params = [params]; + } + + await this._executeTriggers(event, params); + } + + async _executeTriggers(event, params) { + let response = await this._triggerEvent('listeners', event, params); + if (response === false) return false; + + response = await this._triggerEvent('onceListeners', event, params); + if (response === false) return false; + + // emit via socket + if (this._observable.socketServer) { + this._observable.socketServer.emit(event, params); + } + + // clear once-listeners + if (this._observable.onceListeners && this._observable.onceListeners[event]) { + delete this._observable.onceListeners[event]; + } + + } + + clearListeners() { + this._observable.listeners = {}; + this._observable.onceListeners = {}; } bindSocketClient(socket) { // also send events with sockets - this._socketClient = socket; + this._observable.socketClient = socket; } bindSocketServer(socket) { // also send events with sockets - this._socketServer = socket; - } - - async trigger(event, params, throttle=false) { - if (this._throttled(event, params, throttle)) return; - - // listify if throttled - if (throttle) params = [params]; - - await this._triggerEvent('_listeners', event, params); - await this._triggerEvent('_onceListeners', event, params); - - if (this._socketServer) { - this._socketServer.emit(event, params); - } - - // clear once-listeners - if (this._onceListeners && this._onceListeners[event]) { - delete this._onceListeners[event]; - } - - + this._observable.socketServer = socket; } _throttled(event, params, throttle) { - if (throttle) { - if (this._isHot[event]) { + if (this._observable.isHot[event]) { + // hot, add to queue + if (!this._observable.eventQueue[event]) this._observable.eventQueue[event] = []; + this._observable.eventQueue[event].push(params); - // hot, add to queue - if (this._eventQueue[event]) { - - // queue exists, just add - this._eventQueue[event].push(params); - } else { - - // create a new queue to be called after cool-off - this._eventQueue[event] = [params]; - - // call after cool-off - setTimeout(() => { - let _queuedParams = this._eventQueue[event]; - - // reset queues - this._isHot[event] = false; - this._eventQueue[event] = null; - - this.trigger(event, _queuedParams, true); - }, throttle); - - } - return true; - } - this._isHot[event] = true; + // aleady hot, quit + return true; } + this._observable.isHot[event] = true; + + // cool-off + setTimeout(() => { + this._observable.isHot[event] = false; + + // flush queue + if (this._observable.eventQueue[event]) { + let _queuedParams = this._observable.eventQueue[event]; + this._observable.eventQueue[event] = null; + this._executeTriggers(event, _queuedParams); + } + }, throttle); + return false; } - _addListener(name, event, listener) { - if (!this[name]) { - this[name] = {}; + _addListener(type, event, listener) { + if (!this._observable[type][event]) { + this._observable[type][event] = []; } - if (!this[name][event]) { - this[name][event] = []; - } - this[name][event].push(listener); + this._observable[type][event].push(listener); } - async _triggerEvent(name, event, params) { - if (this[name] && this[name][event]) { - for (let listener of this[name][event]) { + async _triggerEvent(type, event, params) { + if (this._observable[type][event]) { + for (let listener of this._observable[type][event]) { await listener(params); } } } - - clearListeners() { - this._listeners = {}; - this._onceListeners = {}; - } }; var model = { @@ -9429,12 +9431,12 @@ var model = { let next = await series.next(); return prefix + next; }, - common_fields: [ + commonFields: [ { fieldname: 'name', fieldtype: 'Data', required: 1 } ], - parent_fields: [ + parentFields: [ { fieldname: 'owner', fieldtype: 'Data', required: 1 }, @@ -9449,12 +9451,9 @@ var model = { }, { fieldname: 'keywords', fieldtype: 'Text' - }, - { - fieldname: 'docstatus', fieldtype: 'Int', required: 1, default: 0 } ], - child_fields: [ + childFields: [ { fieldname: 'idx', fieldtype: 'Int', required: 1 }, @@ -9596,16 +9595,17 @@ var document$1 = class BaseDocument extends observable { } setStandardValues() { - let now = new Date(); - if (this.docstatus === null || this.docstatus === undefined) { - this.docstatus = 0; + // set standard values on server-side only + if (frappejs.isServer) { + let now = new Date(); + if (!this.submitted) this.submitted = 0; + if (!this.owner) { + this.owner = frappejs.session.user; + this.creation = now; + } + this.modifieldBy = frappejs.session.user; + this.modified = now; } - if (!this.owner) { - this.owner = frappejs.session.user; - this.creation = now; - } - this.modifieldBy = frappejs.session.user; - this.modified = now; } async load() { @@ -9646,6 +9646,30 @@ var document$1 = class BaseDocument extends observable { } } + async compareWithCurrentDoc() { + if (frappejs.isServer && !this._notInserted) { + let currentDoc = await frappejs.db.get(this.doctype, this.name); + + // check for conflict + if (currentDoc && this.modified != currentDoc.modified) { + throw new frappejs.errors.Conflict(frappejs._('Document {0} {1} has been modified after loading', [this.doctype, this.name])); + } + + if (this.submitted && !this.meta.isSubmittable) { + throw new frappejs.errors.ValidationError(frappejs._('Document type {1} is not submittable', [this.doctype])); + } + + // set submit action flag + if (this.submitted && !currentDoc.submitted) { + this.submitAction = true; + } + + if (currentDoc.submitted && !this.submitted) { + this.unSubmitAction = true; + } + } + } + async applyFormula() { if (!this.meta.hasFormula()) { return false; @@ -9687,20 +9711,25 @@ var document$1 = class BaseDocument extends observable { async insert() { await this.commit(); - await this.trigger('before_insert'); + await this.trigger('beforeInsert'); this.syncValues(await frappejs.db.insert(this.doctype, this.getValidDict())); - await this.trigger('after_insert'); - await this.trigger('after_save'); + await this.trigger('afterInsert'); + await this.trigger('afterSave'); return this; } async update() { + await this.compareWithCurrentDoc(); await this.commit(); - await this.trigger('before_update'); + await this.trigger('beforeUpdate'); + if (this.submitAction) this.trigger('beforeSubmit'); + if (this.unSubmitAction) this.trigger('beforeUnSubmit'); this.syncValues(await frappejs.db.update(this.doctype, this.getValidDict())); - await this.trigger('after_update'); - await this.trigger('after_save'); + await this.trigger('afterUpdate'); + await this.trigger('afterSave'); + if (this.submitAction) this.trigger('afterSubmit'); + if (this.unSubmitAction) this.trigger('afterUnSubmit'); return this; } @@ -9711,6 +9740,8 @@ var document$1 = class BaseDocument extends observable { await this.trigger('after_delete'); } + // trigger methods on the class if they match + // with the trigger name async trigger(event, params) { if (this[event]) { await this[event](params); @@ -9800,36 +9831,40 @@ var meta = class BaseMeta extends document$1 { } getValidFields({ withChildren = true } = {}) { - if (!this._valid_fields) { + if (!this._validFields) { - this._valid_fields = []; - this._valid_fields_withChildren = []; + this._validFields = []; + this._validFieldsWithChildren = []; const _add = (field) => { - this._valid_fields.push(field); - this._valid_fields_withChildren.push(field); + this._validFields.push(field); + this._validFieldsWithChildren.push(field); }; const doctype_fields = this.fields.map((field) => field.fieldname); // standard fields - for (let field of model.common_fields) { - if (frappejs.db.type_map[field.fieldtype] && !doctype_fields.includes(field.fieldname)) { + for (let field of model.commonFields) { + if (frappejs.db.typeMap[field.fieldtype] && !doctype_fields.includes(field.fieldname)) { _add(field); } } + if (this.isSubmittable) { + _add({fieldtype:'Check', fieldname: 'submitted', label: frappejs._('Submitted')}); + } + if (this.isChild) { // child fields - for (let field of model.child_fields) { - if (frappejs.db.type_map[field.fieldtype] && !doctype_fields.includes(field.fieldname)) { + for (let field of model.childFields) { + if (frappejs.db.typeMap[field.fieldtype] && !doctype_fields.includes(field.fieldname)) { _add(field); } } } else { // parent fields - for (let field of model.parent_fields) { - if (frappejs.db.type_map[field.fieldtype] && !doctype_fields.includes(field.fieldname)) { + for (let field of model.parentFields) { + if (frappejs.db.typeMap[field.fieldtype] && !doctype_fields.includes(field.fieldname)) { _add(field); } } @@ -9837,7 +9872,7 @@ var meta = class BaseMeta extends document$1 { // doctype fields for (let field of this.fields) { - let include = frappejs.db.type_map[field.fieldtype]; + let include = frappejs.db.typeMap[field.fieldtype]; if (include) { _add(field); @@ -9845,15 +9880,15 @@ var meta = class BaseMeta extends document$1 { // include tables if (withChildren = True) if (!include && field.fieldtype === 'Table') { - this._valid_fields_withChildren.push(field); + this._validFieldsWithChildren.push(field); } } } if (withChildren) { - return this._valid_fields_withChildren; + return this._validFieldsWithChildren; } else { - return this._valid_fields; + return this._validFields; } } @@ -9893,14 +9928,15 @@ var meta = class BaseMeta extends document$1 { setDefaultIndicators() { if (!this.indicators) { - this.indicators = { - key: 'docstatus', - colors: { - 0: 'gray', - 1: 'blue', - 2: 'red' - } - }; + if (this.isSubmittable) { + this.indicators = { + key: 'submitted', + colors: { + 0: 'gray', + 1: 'blue' + } + }; + } } } @@ -9908,9 +9944,13 @@ var meta = class BaseMeta extends document$1 { if (frappejs.isDirty(this.name, doc.name)) { return 'orange'; } else { - let value = doc[this.indicators.key]; - if (value) { - return this.indicators.colors[value] || 'gray'; + if (this.indicators) { + let value = doc[this.indicators.key]; + if (value) { + return this.indicators.colors[value] || 'gray'; + } else { + return 'gray'; + } } else { return 'gray'; } @@ -10047,7 +10087,7 @@ var http = class HTTPClient extends observable { } initTypeMap() { - this.type_map = { + this.typeMap = { 'Currency': true , 'Int': true , 'Float': true @@ -26875,8 +26915,14 @@ var ui = { make_dropdown(label, parent, btn_class = 'btn-secondary') { return new dropdown({parent: parent, label:label, btn_class:btn_class}); - } + }, + showAlert({message, color='yellow', timeout=4}) { + let alert = this.add('div', 'alert alert-warning bottom-right-float', document.body); + alert.innerHTML = `${message}`; + frappejs.sleep(timeout).then(() => alert.remove()); + return alert; + } }; var router = class Router extends observable { @@ -27050,6 +27096,11 @@ var page = class Page extends observable { } } + addTitleBadge(message, title='', style='secondary') { + this.titleElement.innerHTML += ` + ${message}`; + } + hide() { this.parent.activePage = null; this.wrapper.classList.add('hide'); @@ -27206,9 +27257,11 @@ var list = class BaseList { } async getData() { + let fields = this.getFields(); + this.updateStandardFields(fields); return await frappejs.db.getAll({ doctype: this.doctype, - fields: this.getFields(), + fields: fields, filters: this.getFilters(), start: this.start, limit: this.pageLength + 1 @@ -27216,7 +27269,13 @@ var list = class BaseList { } getFields() { - return ['name']; + return []; + } + + updateStandardFields(fields) { + if (!fields.includes('name')) fields.push('name'); + if (!fields.includes('modified')) fields.push('modified'); + if (this.meta.isSubmittable && !fields.includes('submitted')) fields.push('submitted'); } async append() { @@ -27467,6 +27526,7 @@ class BaseControl { } else { this.setDocValue(); } + this.setDisabled(); } renderTemplate() { @@ -27516,10 +27576,12 @@ class BaseControl { } + isDisabled() { + return this.disabled || this.formula || (this.doc && this.doc.submitted); + } + setDisabled() { - if (this.disabled) { - this.input.disabled = true; - } + this.input.disabled = this.isDisabled(); } getInputParent() { @@ -41670,6 +41732,13 @@ class DateControl extends base { }); } + setDisabled() { + this.input.disabled = this.isDisabled(); + if (this.flatpickr && this.flatpickr.altInput) { + this.flatpickr.altInput.disabled = this.isDisabled(); + } + } + setInputValue(value) { super.setInputValue(value); this.flatpickr.setDate(value); @@ -42254,7 +42323,7 @@ class LinkControl extends base { formModal.form.doc.set('name', this.input.value); } - formModal.once('submit', async () => { + formModal.once('save', async () => { await this.updateDocValue(formModal.form.doc.name); }); } @@ -44167,127 +44236,56 @@ var clusterize = createCommonjsModule(function (module) { })); }); -var frappeDatatable = createCommonjsModule(function (module, exports) { -(function webpackUniversalModuleDefinition(root, factory) { - module.exports = factory(Sortable, clusterize); -})(typeof self !== 'undefined' ? self : commonjsGlobal, function(__WEBPACK_EXTERNAL_MODULE_7__, __WEBPACK_EXTERNAL_MODULE_10__) { -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 = 3); -/******/ }) -/************************************************************************/ -/******/ ([ -/* 0 */ -/***/ (function(module, exports, __webpack_require__) { +var frappeDatatable_cjs = createCommonjsModule(function (module) { +function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; } -Object.defineProperty(exports, "__esModule", { - value: true -}); +var Sortable$$1 = _interopDefault(Sortable); +var Clusterize = _interopDefault(clusterize); -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; }; - -exports.default = $; function $(expr, con) { - return typeof expr === 'string' ? (con || document).querySelector(expr) : expr || null; + return typeof expr === 'string' ? + (con || document).querySelector(expr) : + expr || null; } -$.each = function (expr, con) { - return typeof expr === 'string' ? Array.from((con || document).querySelectorAll(expr)) : expr || null; +$.each = (expr, con) => { + return typeof expr === 'string' ? + Array.from((con || document).querySelectorAll(expr)) : + expr || null; }; -$.create = function (tag, o) { - var element = document.createElement(tag); +$.create = (tag, o) => { + let element = document.createElement(tag); - var _loop = function _loop(i) { - var val = o[i]; + for (let i in o) { + let val = o[i]; if (i === 'inside') { $(val).appendChild(element); - } else if (i === 'around') { - var ref = $(val); - ref.parentNode.insertBefore(element, ref); - element.appendChild(ref); - } else if (i === 'styles') { - if ((typeof val === 'undefined' ? 'undefined' : _typeof(val)) === 'object') { - Object.keys(val).map(function (prop) { - element.style[prop] = val[prop]; - }); - } - } else if (i in element) { - element[i] = val; - } else { - element.setAttribute(i, val); - } - }; - - for (var i in o) { - _loop(i); + } 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 = function (element, event, selector, callback) { +$.on = (element, event, selector, callback) => { if (!callback) { callback = selector; $.bind(element, event, callback); @@ -44296,19 +44294,19 @@ $.on = function (element, event, selector, callback) { } }; -$.off = function (element, event, handler) { +$.off = (element, event, handler) => { element.removeEventListener(event, handler); }; -$.bind = function (element, event, callback) { +$.bind = (element, event, callback) => { event.split(/\s+/).forEach(function (event) { element.addEventListener(event, callback); }); }; -$.delegate = function (element, event, selector, callback) { +$.delegate = (element, event, selector, callback) => { element.addEventListener(event, function (e) { - var delegatedTarget = e.target.closest(selector); + const delegatedTarget = e.target.closest(selector); if (delegatedTarget) { e.delegatedTarget = delegatedTarget; callback.call(this, e, delegatedTarget); @@ -44316,47 +44314,41 @@ $.delegate = function (element, event, selector, callback) { }); }; -$.unbind = function (element, o) { +$.unbind = (element, o) => { if (element) { - var _loop2 = function _loop2(event) { - var callback = o[event]; + for (let event in o) { + let callback = o[event]; event.split(/\s+/).forEach(function (event) { element.removeEventListener(event, callback); }); - }; - - for (var event in o) { - _loop2(event); } } }; -$.fire = function (target, type, properties) { - var evt = document.createEvent('HTMLEvents'); +$.fire = (target, type, properties) => { + let evt = document.createEvent('HTMLEvents'); evt.initEvent(type, true, true); - for (var j in properties) { + for (let j in properties) { evt[j] = properties[j]; } return target.dispatchEvent(evt); }; -$.data = function (element, attrs) { - // eslint-disable-line +$.data = (element, attrs) => { // eslint-disable-line if (!attrs) { return element.dataset; } - for (var attr in attrs) { + for (const attr in attrs) { element.dataset[attr] = attrs[attr]; } }; -$.style = function (elements, styleMap) { - // eslint-disable-line +$.style = (elements, styleMap) => { // eslint-disable-line if (typeof styleMap === 'string') { return $.getStyle(elements, styleMap); @@ -44366,14 +44358,14 @@ $.style = function (elements, styleMap) { elements = [elements]; } - elements.map(function (element) { - for (var prop in styleMap) { + elements.map(element => { + for (const prop in styleMap) { element.style[prop] = styleMap[prop]; } }); }; -$.removeStyle = function (elements, styleProps) { +$.removeStyle = (elements, styleProps) => { if (!Array.isArray(elements)) { elements = [elements]; } @@ -44382,36 +44374,15 @@ $.removeStyle = function (elements, styleProps) { styleProps = [styleProps]; } - elements.map(function (element) { - var _iteratorNormalCompletion = true; - var _didIteratorError = false; - var _iteratorError = undefined; - - try { - for (var _iterator = styleProps[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) { - var prop = _step.value; - - element.style[prop] = ''; - } - } catch (err) { - _didIteratorError = true; - _iteratorError = err; - } finally { - try { - if (!_iteratorNormalCompletion && _iterator.return) { - _iterator.return(); - } - } finally { - if (_didIteratorError) { - throw _iteratorError; - } - } + elements.map(element => { + for (const prop of styleProps) { + element.style[prop] = ''; } }); }; -$.getStyle = function (element, prop) { - var val = getComputedStyle(element)[prop]; +$.getStyle = (element, prop) => { + let val = getComputedStyle(element)[prop]; if (['width', 'height'].includes(prop)) { val = parseFloat(val); @@ -44420,7 +44391,7 @@ $.getStyle = function (element, prop) { return val; }; -$.closest = function (selector, element) { +$.closest = (selector, element) => { if (!element) return null; if (element.matches(selector)) { @@ -44430,147 +44401,584 @@ $.closest = function (selector, element) { return $.closest(selector, element.parentNode); }; -$.inViewport = function (el, parentEl) { - var _el$getBoundingClient = el.getBoundingClientRect(), - top = _el$getBoundingClient.top, - left = _el$getBoundingClient.left, - bottom = _el$getBoundingClient.bottom, - right = _el$getBoundingClient.right; - - var _parentEl$getBounding = parentEl.getBoundingClientRect(), - pTop = _parentEl$getBounding.top, - pLeft = _parentEl$getBounding.left, - pBottom = _parentEl$getBounding.bottom, - pRight = _parentEl$getBounding.right; +$.inViewport = (el, parentEl) => { + const { top, left, bottom, right } = el.getBoundingClientRect(); + const { top: pTop, left: pLeft, bottom: pBottom, right: pRight } = parentEl.getBoundingClientRect(); return top >= pTop && left >= pLeft && bottom <= pBottom && right <= pRight; }; $.scrollTop = function scrollTop(element, pixels) { - requestAnimationFrame(function () { + requestAnimationFrame(() => { element.scrollTop = pixels; }); }; -module.exports = exports['default']; -/***/ }), -/* 1 */ -/***/ (function(module, exports, __webpack_require__) { +/** + * Checks if `value` is the + * [language type](http://www.ecma-international.org/ecma-262/7.0/#sec-ecmascript-language-types) + * of `Object`. (e.g. arrays, functions, objects, regexes, `new Number(0)`, and `new String('')`) + * + * @static + * @memberOf _ + * @since 0.1.0 + * @category Lang + * @param {*} value The value to check. + * @returns {boolean} Returns `true` if `value` is an object, else `false`. + * @example + * + * _.isObject({}); + * // => true + * + * _.isObject([1, 2, 3]); + * // => true + * + * _.isObject(_.noop); + * // => true + * + * _.isObject(null); + * // => false + */ +function isObject(value) { + var type = typeof value; + return value != null && (type == 'object' || type == 'function'); +} -Object.defineProperty(exports, "__esModule", { - value: true -}); -exports.camelCaseToDash = camelCaseToDash; -exports.makeDataAttributeString = makeDataAttributeString; -exports.getDefault = getDefault; -exports.escapeRegExp = escapeRegExp; -exports.getCSSString = getCSSString; -exports.getCSSRuleBlock = getCSSRuleBlock; -exports.buildCSSRule = buildCSSRule; -exports.removeCSSRule = removeCSSRule; -exports.copyTextToClipboard = copyTextToClipboard; -exports.isNumeric = isNumeric; -exports.throttle = throttle; -exports.promisify = promisify; -exports.chainPromises = chainPromises; -exports.linkProperties = linkProperties; -function camelCaseToDash(str) { - return str.replace(/([A-Z])/g, function (g) { - return '-' + g[0].toLowerCase(); +var isObject_1 = isObject; + +var commonjsGlobal$$1 = typeof window !== 'undefined' ? window : typeof commonjsGlobal !== 'undefined' ? commonjsGlobal : typeof self !== 'undefined' ? self : {}; + +/** Detect free variable `global` from Node.js. */ +var freeGlobal = typeof commonjsGlobal$$1 == 'object' && commonjsGlobal$$1 && commonjsGlobal$$1.Object === Object && commonjsGlobal$$1; + +var _freeGlobal = freeGlobal; + +/** Detect free variable `self`. */ +var freeSelf = typeof self == 'object' && self && self.Object === Object && self; + +/** Used as a reference to the global object. */ +var root = _freeGlobal || freeSelf || Function('return this')(); + +var _root = root; + +/** + * Gets the timestamp of the number of milliseconds that have elapsed since + * the Unix epoch (1 January 1970 00:00:00 UTC). + * + * @static + * @memberOf _ + * @since 2.4.0 + * @category Date + * @returns {number} Returns the timestamp. + * @example + * + * _.defer(function(stamp) { + * console.log(_.now() - stamp); + * }, _.now()); + * // => Logs the number of milliseconds it took for the deferred invocation. + */ +var now = function() { + return _root.Date.now(); +}; + +var now_1 = now; + +/** Built-in value references. */ +var Symbol = _root.Symbol; + +var _Symbol = Symbol; + +/** Used for built-in method references. */ +var objectProto = Object.prototype; + +/** Used to check objects for own properties. */ +var hasOwnProperty = objectProto.hasOwnProperty; + +/** + * Used to resolve the + * [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring) + * of values. + */ +var nativeObjectToString = objectProto.toString; + +/** Built-in value references. */ +var symToStringTag = _Symbol ? _Symbol.toStringTag : undefined; + +/** + * A specialized version of `baseGetTag` which ignores `Symbol.toStringTag` values. + * + * @private + * @param {*} value The value to query. + * @returns {string} Returns the raw `toStringTag`. + */ +function getRawTag(value) { + var isOwn = hasOwnProperty.call(value, symToStringTag), + tag = value[symToStringTag]; + + try { + value[symToStringTag] = undefined; + var unmasked = true; + } catch (e) {} + + var result = nativeObjectToString.call(value); + if (unmasked) { + if (isOwn) { + value[symToStringTag] = tag; + } else { + delete value[symToStringTag]; + } + } + return result; +} + +var _getRawTag = getRawTag; + +/** Used for built-in method references. */ +var objectProto$1 = Object.prototype; + +/** + * Used to resolve the + * [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring) + * of values. + */ +var nativeObjectToString$1 = objectProto$1.toString; + +/** + * Converts `value` to a string using `Object.prototype.toString`. + * + * @private + * @param {*} value The value to convert. + * @returns {string} Returns the converted string. + */ +function objectToString(value) { + return nativeObjectToString$1.call(value); +} + +var _objectToString = objectToString; + +/** `Object#toString` result references. */ +var nullTag = '[object Null]', + undefinedTag = '[object Undefined]'; + +/** Built-in value references. */ +var symToStringTag$1 = _Symbol ? _Symbol.toStringTag : undefined; + +/** + * The base implementation of `getTag` without fallbacks for buggy environments. + * + * @private + * @param {*} value The value to query. + * @returns {string} Returns the `toStringTag`. + */ +function baseGetTag(value) { + if (value == null) { + return value === undefined ? undefinedTag : nullTag; + } + return (symToStringTag$1 && symToStringTag$1 in Object(value)) + ? _getRawTag(value) + : _objectToString(value); +} + +var _baseGetTag = baseGetTag; + +/** + * Checks if `value` is object-like. A value is object-like if it's not `null` + * and has a `typeof` result of "object". + * + * @static + * @memberOf _ + * @since 4.0.0 + * @category Lang + * @param {*} value The value to check. + * @returns {boolean} Returns `true` if `value` is object-like, else `false`. + * @example + * + * _.isObjectLike({}); + * // => true + * + * _.isObjectLike([1, 2, 3]); + * // => true + * + * _.isObjectLike(_.noop); + * // => false + * + * _.isObjectLike(null); + * // => false + */ +function isObjectLike(value) { + return value != null && typeof value == 'object'; +} + +var isObjectLike_1 = isObjectLike; + +/** `Object#toString` result references. */ +var symbolTag = '[object Symbol]'; + +/** + * Checks if `value` is classified as a `Symbol` primitive or object. + * + * @static + * @memberOf _ + * @since 4.0.0 + * @category Lang + * @param {*} value The value to check. + * @returns {boolean} Returns `true` if `value` is a symbol, else `false`. + * @example + * + * _.isSymbol(Symbol.iterator); + * // => true + * + * _.isSymbol('abc'); + * // => false + */ +function isSymbol(value) { + return typeof value == 'symbol' || + (isObjectLike_1(value) && _baseGetTag(value) == symbolTag); +} + +var isSymbol_1 = isSymbol; + +/** Used as references for various `Number` constants. */ +var NAN = 0 / 0; + +/** Used to match leading and trailing whitespace. */ +var reTrim = /^\s+|\s+$/g; + +/** Used to detect bad signed hexadecimal string values. */ +var reIsBadHex = /^[-+]0x[0-9a-f]+$/i; + +/** Used to detect binary string values. */ +var reIsBinary = /^0b[01]+$/i; + +/** Used to detect octal string values. */ +var reIsOctal = /^0o[0-7]+$/i; + +/** Built-in method references without a dependency on `root`. */ +var freeParseInt = parseInt; + +/** + * Converts `value` to a number. + * + * @static + * @memberOf _ + * @since 4.0.0 + * @category Lang + * @param {*} value The value to process. + * @returns {number} Returns the number. + * @example + * + * _.toNumber(3.2); + * // => 3.2 + * + * _.toNumber(Number.MIN_VALUE); + * // => 5e-324 + * + * _.toNumber(Infinity); + * // => Infinity + * + * _.toNumber('3.2'); + * // => 3.2 + */ +function toNumber(value) { + if (typeof value == 'number') { + return value; + } + if (isSymbol_1(value)) { + return NAN; + } + if (isObject_1(value)) { + var other = typeof value.valueOf == 'function' ? value.valueOf() : value; + value = isObject_1(other) ? (other + '') : other; + } + if (typeof value != 'string') { + return value === 0 ? value : +value; + } + value = value.replace(reTrim, ''); + var isBinary = reIsBinary.test(value); + return (isBinary || reIsOctal.test(value)) + ? freeParseInt(value.slice(2), isBinary ? 2 : 8) + : (reIsBadHex.test(value) ? NAN : +value); +} + +var toNumber_1 = toNumber; + +/** Error message constants. */ +var FUNC_ERROR_TEXT = 'Expected a function'; + +/* Built-in method references for those with the same name as other `lodash` methods. */ +var nativeMax = Math.max, + nativeMin = Math.min; + +/** + * Creates a debounced function that delays invoking `func` until after `wait` + * milliseconds have elapsed since the last time the debounced function was + * invoked. The debounced function comes with a `cancel` method to cancel + * delayed `func` invocations and a `flush` method to immediately invoke them. + * Provide `options` to indicate whether `func` should be invoked on the + * leading and/or trailing edge of the `wait` timeout. The `func` is invoked + * with the last arguments provided to the debounced function. Subsequent + * calls to the debounced function return the result of the last `func` + * invocation. + * + * **Note:** If `leading` and `trailing` options are `true`, `func` is + * invoked on the trailing edge of the timeout only if the debounced function + * is invoked more than once during the `wait` timeout. + * + * If `wait` is `0` and `leading` is `false`, `func` invocation is deferred + * until to the next tick, similar to `setTimeout` with a timeout of `0`. + * + * See [David Corbacho's article](https://css-tricks.com/debouncing-throttling-explained-examples/) + * for details over the differences between `_.debounce` and `_.throttle`. + * + * @static + * @memberOf _ + * @since 0.1.0 + * @category Function + * @param {Function} func The function to debounce. + * @param {number} [wait=0] The number of milliseconds to delay. + * @param {Object} [options={}] The options object. + * @param {boolean} [options.leading=false] + * Specify invoking on the leading edge of the timeout. + * @param {number} [options.maxWait] + * The maximum time `func` is allowed to be delayed before it's invoked. + * @param {boolean} [options.trailing=true] + * Specify invoking on the trailing edge of the timeout. + * @returns {Function} Returns the new debounced function. + * @example + * + * // Avoid costly calculations while the window size is in flux. + * jQuery(window).on('resize', _.debounce(calculateLayout, 150)); + * + * // Invoke `sendMail` when clicked, debouncing subsequent calls. + * jQuery(element).on('click', _.debounce(sendMail, 300, { + * 'leading': true, + * 'trailing': false + * })); + * + * // Ensure `batchLog` is invoked once after 1 second of debounced calls. + * var debounced = _.debounce(batchLog, 250, { 'maxWait': 1000 }); + * var source = new EventSource('/stream'); + * jQuery(source).on('message', debounced); + * + * // Cancel the trailing debounced invocation. + * jQuery(window).on('popstate', debounced.cancel); + */ +function debounce(func, wait, options) { + var lastArgs, + lastThis, + maxWait, + result, + timerId, + lastCallTime, + lastInvokeTime = 0, + leading = false, + maxing = false, + trailing = true; + + if (typeof func != 'function') { + throw new TypeError(FUNC_ERROR_TEXT); + } + wait = toNumber_1(wait) || 0; + if (isObject_1(options)) { + leading = !!options.leading; + maxing = 'maxWait' in options; + maxWait = maxing ? nativeMax(toNumber_1(options.maxWait) || 0, wait) : maxWait; + trailing = 'trailing' in options ? !!options.trailing : trailing; + } + + function invokeFunc(time) { + var args = lastArgs, + thisArg = lastThis; + + lastArgs = lastThis = undefined; + lastInvokeTime = time; + result = func.apply(thisArg, args); + return result; + } + + function leadingEdge(time) { + // Reset any `maxWait` timer. + lastInvokeTime = time; + // Start the timer for the trailing edge. + timerId = setTimeout(timerExpired, wait); + // Invoke the leading edge. + return leading ? invokeFunc(time) : result; + } + + function remainingWait(time) { + var timeSinceLastCall = time - lastCallTime, + timeSinceLastInvoke = time - lastInvokeTime, + timeWaiting = wait - timeSinceLastCall; + + return maxing + ? nativeMin(timeWaiting, maxWait - timeSinceLastInvoke) + : timeWaiting; + } + + function shouldInvoke(time) { + var timeSinceLastCall = time - lastCallTime, + timeSinceLastInvoke = time - lastInvokeTime; + + // Either this is the first call, activity has stopped and we're at the + // trailing edge, the system time has gone backwards and we're treating + // it as the trailing edge, or we've hit the `maxWait` limit. + return (lastCallTime === undefined || (timeSinceLastCall >= wait) || + (timeSinceLastCall < 0) || (maxing && timeSinceLastInvoke >= maxWait)); + } + + function timerExpired() { + var time = now_1(); + if (shouldInvoke(time)) { + return trailingEdge(time); + } + // Restart the timer. + timerId = setTimeout(timerExpired, remainingWait(time)); + } + + function trailingEdge(time) { + timerId = undefined; + + // Only invoke if we have `lastArgs` which means `func` has been + // debounced at least once. + if (trailing && lastArgs) { + return invokeFunc(time); + } + lastArgs = lastThis = undefined; + return result; + } + + function cancel() { + if (timerId !== undefined) { + clearTimeout(timerId); + } + lastInvokeTime = 0; + lastArgs = lastCallTime = lastThis = timerId = undefined; + } + + function flush() { + return timerId === undefined ? result : trailingEdge(now_1()); + } + + function debounced() { + var time = now_1(), + isInvoking = shouldInvoke(time); + + lastArgs = arguments; + lastThis = this; + lastCallTime = time; + + if (isInvoking) { + if (timerId === undefined) { + return leadingEdge(lastCallTime); + } + if (maxing) { + // Handle invocations in a tight loop. + timerId = setTimeout(timerExpired, wait); + return invokeFunc(lastCallTime); + } + } + if (timerId === undefined) { + timerId = setTimeout(timerExpired, wait); + } + return result; + } + debounced.cancel = cancel; + debounced.flush = flush; + return debounced; +} + +var debounce_1 = debounce; + +/** Error message constants. */ +var FUNC_ERROR_TEXT$1 = 'Expected a function'; + +/** + * Creates a throttled function that only invokes `func` at most once per + * every `wait` milliseconds. The throttled function comes with a `cancel` + * method to cancel delayed `func` invocations and a `flush` method to + * immediately invoke them. Provide `options` to indicate whether `func` + * should be invoked on the leading and/or trailing edge of the `wait` + * timeout. The `func` is invoked with the last arguments provided to the + * throttled function. Subsequent calls to the throttled function return the + * result of the last `func` invocation. + * + * **Note:** If `leading` and `trailing` options are `true`, `func` is + * invoked on the trailing edge of the timeout only if the throttled function + * is invoked more than once during the `wait` timeout. + * + * If `wait` is `0` and `leading` is `false`, `func` invocation is deferred + * until to the next tick, similar to `setTimeout` with a timeout of `0`. + * + * See [David Corbacho's article](https://css-tricks.com/debouncing-throttling-explained-examples/) + * for details over the differences between `_.throttle` and `_.debounce`. + * + * @static + * @memberOf _ + * @since 0.1.0 + * @category Function + * @param {Function} func The function to throttle. + * @param {number} [wait=0] The number of milliseconds to throttle invocations to. + * @param {Object} [options={}] The options object. + * @param {boolean} [options.leading=true] + * Specify invoking on the leading edge of the timeout. + * @param {boolean} [options.trailing=true] + * Specify invoking on the trailing edge of the timeout. + * @returns {Function} Returns the new throttled function. + * @example + * + * // Avoid excessively updating the position while scrolling. + * jQuery(window).on('scroll', _.throttle(updatePosition, 100)); + * + * // Invoke `renewToken` when the click event is fired, but not more than once every 5 minutes. + * var throttled = _.throttle(renewToken, 300000, { 'trailing': false }); + * jQuery(element).on('click', throttled); + * + * // Cancel the trailing throttled invocation. + * jQuery(window).on('popstate', throttled.cancel); + */ +function throttle(func, wait, options) { + var leading = true, + trailing = true; + + if (typeof func != 'function') { + throw new TypeError(FUNC_ERROR_TEXT$1); + } + if (isObject_1(options)) { + leading = 'leading' in options ? !!options.leading : leading; + trailing = 'trailing' in options ? !!options.trailing : trailing; + } + return debounce_1(func, wait, { + 'leading': leading, + 'maxWait': wait, + 'trailing': trailing }); } +var throttle_1 = throttle; + +function camelCaseToDash(str) { + return str.replace(/([A-Z])/g, (g) => `-${g[0].toLowerCase()}`); +} + function makeDataAttributeString(props) { - var keys = Object.keys(props); + const keys = Object.keys(props); - return keys.map(function (key) { - var _key = camelCaseToDash(key); - var val = props[key]; + return keys + .map((key) => { + const _key = camelCaseToDash(key); + const val = props[key]; - if (val === undefined) return ''; - return 'data-' + _key + '="' + val + '" '; - }).join('').trim(); + if (val === undefined) return ''; + return `data-${_key}="${val}" `; + }) + .join('') + .trim(); } 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 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'); @@ -44630,68 +45038,24 @@ function isNumeric(val) { return !isNaN(val); } -// https://stackoverflow.com/a/27078401 -function throttle(func, wait, options) { - var context, args, result; - var timeout = null; - var previous = 0; - if (!options) options = {}; +let throttle$1 = throttle_1; - var later = function later() { - previous = options.leading === false ? 0 : Date.now(); - timeout = null; - result = func.apply(context, args); - if (!timeout) context = args = null; - }; +let debounce$1 = debounce_1; - return function () { - var now = Date.now(); - if (!previous && options.leading === false) previous = now; - var remaining = wait - (now - previous); - context = this; - args = arguments; - if (remaining <= 0 || remaining > wait) { - if (timeout) { - clearTimeout(timeout); - timeout = null; - } - previous = now; - result = func.apply(context, args); - if (!timeout) context = args = null; - } else if (!timeout && options.trailing !== false) { - timeout = setTimeout(later, remaining); - } - return result; - }; -} - -function promisify(fn) { - var context = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null; - - return function () { - for (var _len = arguments.length, args = Array(_len), _key2 = 0; _key2 < _len; _key2++) { - args[_key2] = arguments[_key2]; - } - - return new Promise(function (resolve) { - setTimeout(function () { - fn.apply(context, args); - resolve('done', fn.name); +function promisify(fn, context = null) { + return (...args) => { + return new Promise(resolve => { + setTimeout(() => { + const out = fn.apply(context, args); + resolve(out); }, 0); }); }; } - -function chainPromises(promises) { - return promises.reduce(function (prev, cur) { - return prev.then(cur); - }, Promise.resolve()); -} - function linkProperties(target, source, properties) { - var props = properties.reduce(function (acc, prop) { + const props = properties.reduce((acc, prop) => { acc[prop] = { - get: function get() { + get() { return source[prop]; } }; @@ -44700,999 +45064,220 @@ function linkProperties(target, source, properties) { Object.defineProperties(target, props); } -/***/ }), -/* 2 */ -/***/ (function(module, exports, __webpack_require__) { - -Object.defineProperty(exports, "__esModule", { - value: true -}); -exports.getDropdownHTML = undefined; - -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 _dom = __webpack_require__(0); - -var _dom2 = _interopRequireDefault(_dom); - -var _sortablejs = __webpack_require__(7); - -var _sortablejs2 = _interopRequireDefault(_sortablejs); - -var _utils = __webpack_require__(1); - -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 ColumnManager = function () { - function ColumnManager(instance) { - _classCallCheck(this, ColumnManager); - - this.instance = instance; - - (0, _utils.linkProperties)(this, this.instance, ['options', 'fireEvent', 'header', 'datamanager', 'style', 'wrapper', 'rowmanager', 'bodyScrollable']); - - this.bindEvents(); - exports.getDropdownHTML = getDropdownHTML = getDropdownHTML.bind(this, this.options.dropdownButton); - } - - _createClass(ColumnManager, [{ - key: 'renderHeader', - value: function renderHeader() { - this.header.innerHTML = ''; - this.refreshHeader(); - } - }, { - key: 'refreshHeader', - value: function refreshHeader() { - var _this = this; - - var columns = this.datamanager.getColumns(); - - if (!(0, _dom2.default)('.data-table-col', this.header)) { - // insert html - (0, _dom2.default)('thead', this.header).innerHTML = this.rowmanager.getRowHTML(columns, { isHeader: 1 }); - } else { - // refresh dom state - var $cols = _dom2.default.each('.data-table-col', this.header); - if (columns.length < $cols.length) { - // deleted column - (0, _dom2.default)('thead', this.header).innerHTML = this.rowmanager.getRowHTML(columns, { isHeader: 1 }); - return; - } - - $cols.map(function ($col, i) { - var column = columns[i]; - // column sorted or order changed - // update colIndex of each header cell - _dom2.default.data($col, { - colIndex: column.colIndex - }); - - // refresh sort indicator - var sortIndicator = (0, _dom2.default)('.sort-indicator', $col); - if (sortIndicator) { - sortIndicator.innerHTML = _this.options.sortIndicator[column.sortOrder]; - } - }); - } - // reset columnMap - this.$columnMap = []; - } - }, { - key: 'bindEvents', - value: function bindEvents() { - this.bindDropdown(); - this.bindResizeColumn(); - this.bindMoveColumn(); - } - }, { - key: 'bindDropdown', - value: function bindDropdown() { - var _this2 = this; - - var $activeDropdown = void 0; - _dom2.default.on(this.header, 'click', '.data-table-dropdown-toggle', function (e, $button) { - var $dropdown = _dom2.default.closest('.data-table-dropdown', $button); - - if (!$dropdown.classList.contains('is-active')) { - deactivateDropdown(); - $dropdown.classList.add('is-active'); - $activeDropdown = $dropdown; - } else { - deactivateDropdown(); - } - }); - - _dom2.default.on(document.body, 'click', function (e) { - if (e.target.matches('.data-table-dropdown-toggle')) return; - deactivateDropdown(); - }); - - var dropdownItems = this.options.headerDropdown; - - _dom2.default.on(this.header, 'click', '.data-table-dropdown-list > div', function (e, $item) { - var $col = _dom2.default.closest('.data-table-col', $item); - - var _$$data = _dom2.default.data($item), - index = _$$data.index; - - var _$$data2 = _dom2.default.data($col), - colIndex = _$$data2.colIndex; - - var callback = dropdownItems[index].action; - - callback && callback.call(_this2.instance, _this2.getColumn(colIndex)); - }); - - function deactivateDropdown(e) { - $activeDropdown && $activeDropdown.classList.remove('is-active'); - $activeDropdown = null; - } - } - }, { - key: 'bindResizeColumn', - value: function bindResizeColumn() { - var _this3 = this; - - var isDragging = false; - var $resizingCell = void 0, - startWidth = void 0, - startX = void 0; - - _dom2.default.on(this.header, 'mousedown', '.data-table-col .column-resizer', function (e, $handle) { - document.body.classList.add('data-table-resize'); - var $cell = $handle.parentNode.parentNode; - $resizingCell = $cell; - - var _$$data3 = _dom2.default.data($resizingCell), - colIndex = _$$data3.colIndex; - - var col = _this3.getColumn(colIndex); - - if (col && col.resizable === false) { - return; - } - - isDragging = true; - startWidth = _dom2.default.style((0, _dom2.default)('.content', $resizingCell), 'width'); - startX = e.pageX; - }); - - _dom2.default.on(document.body, 'mouseup', function (e) { - document.body.classList.remove('data-table-resize'); - if (!$resizingCell) return; - isDragging = false; - - var _$$data4 = _dom2.default.data($resizingCell), - colIndex = _$$data4.colIndex; - - _this3.setColumnWidth(colIndex); - _this3.style.setBodyStyle(); - $resizingCell = null; - }); - - _dom2.default.on(document.body, 'mousemove', function (e) { - if (!isDragging) return; - var finalWidth = startWidth + (e.pageX - startX); - - var _$$data5 = _dom2.default.data($resizingCell), - colIndex = _$$data5.colIndex; - - if (_this3.getColumnMinWidth(colIndex) > finalWidth) { - // don't resize past minWidth - return; - } - _this3.datamanager.updateColumn(colIndex, { width: finalWidth }); - _this3.setColumnHeaderWidth(colIndex); - }); - } - }, { - key: 'bindMoveColumn', - value: function bindMoveColumn() { - var _this4 = this; - - var initialized = void 0; - - var initialize = function initialize() { - if (initialized) { - _dom2.default.off(document.body, 'mousemove', initialize); - return; - } - var ready = (0, _dom2.default)('.data-table-col', _this4.header); - if (!ready) return; - - var $parent = (0, _dom2.default)('.data-table-row', _this4.header); - - _this4.sortable = _sortablejs2.default.create($parent, { - onEnd: function onEnd(e) { - var oldIndex = e.oldIndex, - newIndex = e.newIndex; - - var $draggedCell = e.item; - - var _$$data6 = _dom2.default.data($draggedCell), - colIndex = _$$data6.colIndex; - - if (+colIndex === newIndex) return; - - _this4.switchColumn(oldIndex, newIndex); - }, - preventOnFilter: false, - filter: '.column-resizer, .data-table-dropdown', - animation: 150 - }); - }; - - _dom2.default.on(document.body, 'mousemove', initialize); - } - }, { - key: 'bindSortColumn', - value: function bindSortColumn() { - var _this5 = this; - - _dom2.default.on(this.header, 'click', '.data-table-col .column-title', function (e, span) { - var $cell = span.closest('.data-table-col'); - - var _$$data7 = _dom2.default.data($cell), - colIndex = _$$data7.colIndex, - sortOrder = _$$data7.sortOrder; - - sortOrder = (0, _utils.getDefault)(sortOrder, 'none'); - var col = _this5.getColumn(colIndex); - - if (col && col.sortable === false) { - return; - } - - // reset sort indicator - (0, _dom2.default)('.sort-indicator', _this5.header).textContent = ''; - _dom2.default.each('.data-table-col', _this5.header).map(function ($cell) { - _dom2.default.data($cell, { - sortOrder: 'none' - }); - }); - - var nextSortOrder = void 0, - textContent = void 0; - if (sortOrder === 'none') { - nextSortOrder = 'asc'; - textContent = '▲'; - } else if (sortOrder === 'asc') { - nextSortOrder = 'desc'; - textContent = '▼'; - } else if (sortOrder === 'desc') { - nextSortOrder = 'none'; - textContent = ''; - } - - _dom2.default.data($cell, { - sortOrder: nextSortOrder - }); - (0, _dom2.default)('.sort-indicator', $cell).textContent = textContent; - - _this5.sortColumn(colIndex, nextSortOrder); - }); - } - }, { - key: 'sortColumn', - value: function sortColumn(colIndex, nextSortOrder) { - var _this6 = this; - - this.instance.freeze(); - this.sortRows(colIndex, nextSortOrder).then(function () { - _this6.refreshHeader(); - return _this6.rowmanager.refreshRows(); - }).then(function () { - return _this6.instance.unfreeze(); - }).then(function () { - _this6.fireEvent('onSortColumn', _this6.getColumn(colIndex)); - }); - } - }, { - key: 'removeColumn', - value: function removeColumn(colIndex) { - var _this7 = this; - - var removedCol = this.getColumn(colIndex); - this.instance.freeze(); - this.datamanager.removeColumn(colIndex).then(function () { - _this7.refreshHeader(); - return _this7.rowmanager.refreshRows(); - }).then(function () { - return _this7.instance.unfreeze(); - }).then(function () { - _this7.fireEvent('onRemoveColumn', removedCol); - }); - } - }, { - key: 'switchColumn', - value: function switchColumn(oldIndex, newIndex) { - var _this8 = this; - - this.instance.freeze(); - this.datamanager.switchColumn(oldIndex, newIndex).then(function () { - _this8.refreshHeader(); - return _this8.rowmanager.refreshRows(); - }).then(function () { - _this8.setColumnWidth(oldIndex); - _this8.setColumnWidth(newIndex); - _this8.instance.unfreeze(); - }).then(function () { - _this8.fireEvent('onSwitchColumn', _this8.getColumn(oldIndex), _this8.getColumn(newIndex)); - }); - } - }, { - key: 'sortRows', - value: function sortRows(colIndex, sortOrder) { - return this.datamanager.sortRows(colIndex, sortOrder); - } - }, { - key: 'getColumn', - value: function getColumn(colIndex) { - return this.datamanager.getColumn(colIndex); - } - }, { - key: 'getColumns', - value: function getColumns() { - return this.datamanager.getColumns(); - } - }, { - key: 'setColumnWidth', - value: function setColumnWidth(colIndex) { - colIndex = +colIndex; - this._columnWidthMap = this._columnWidthMap || []; - - var _getColumn = this.getColumn(colIndex), - width = _getColumn.width; - - var index = this._columnWidthMap[colIndex]; - var selector = '[data-col-index="' + colIndex + '"] .content, [data-col-index="' + colIndex + '"] .edit-cell'; - var styles = { - width: width + 'px' - }; - - index = this.style.setStyle(selector, styles, index); - this._columnWidthMap[colIndex] = index; - } - }, { - key: 'setColumnHeaderWidth', - value: function setColumnHeaderWidth(colIndex) { - colIndex = +colIndex; - this.$columnMap = this.$columnMap || []; - var selector = '[data-col-index="' + colIndex + '"][data-is-header] .content'; - - var _getColumn2 = this.getColumn(colIndex), - width = _getColumn2.width; - - var $column = this.$columnMap[colIndex]; - if (!$column) { - $column = this.header.querySelector(selector); - this.$columnMap[colIndex] = $column; - } - - $column.style.width = width + 'px'; - } - }, { - key: 'getColumnMinWidth', - value: function getColumnMinWidth(colIndex) { - colIndex = +colIndex; - return this.getColumn(colIndex).minWidth || 24; - } - }, { - 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: 'getHeaderCell$', - value: function getHeaderCell$(colIndex) { - return (0, _dom2.default)('.data-table-col[data-col-index="' + colIndex + '"]', this.header); - } - }, { - key: 'getLastColumnIndex', - value: function getLastColumnIndex() { - return this.datamanager.getColumnCount() - 1; - } - }, { - key: 'getSerialColumnIndex', - value: function getSerialColumnIndex() { - var columns = this.datamanager.getColumns(); - - return columns.findIndex(function (column) { - return column.content.includes('Sr. No'); - }); - } - }]); - - return ColumnManager; -}(); - -// eslint-disable-next-line - - -exports.default = ColumnManager; -var getDropdownHTML = function getDropdownHTML() { - var dropdownButton = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'v'; - - // add dropdown buttons - var dropdownItems = this.options.headerDropdown; - - return '
' + dropdownButton + '
\n
\n ' + dropdownItems.map(function (d, i) { - return '
' + d.label + '
'; - }).join('') + '\n
\n '; -}; - -exports.getDropdownHTML = getDropdownHTML; - -/***/ }), -/* 3 */ -/***/ (function(module, exports, __webpack_require__) { - -Object.defineProperty(exports, "__esModule", { - value: true -}); - -var _datatable = __webpack_require__(4); - -var _datatable2 = _interopRequireDefault(_datatable); - -var _package = __webpack_require__(19); - -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']; - -/***/ }), -/* 4 */ -/***/ (function(module, exports, __webpack_require__) { - -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; }; }(); - -var _dom = __webpack_require__(0); - -var _dom2 = _interopRequireDefault(_dom); - -var _datamanager = __webpack_require__(5); - -var _datamanager2 = _interopRequireDefault(_datamanager); - -var _cellmanager = __webpack_require__(6); - -var _cellmanager2 = _interopRequireDefault(_cellmanager); - -var _columnmanager = __webpack_require__(2); - -var _columnmanager2 = _interopRequireDefault(_columnmanager); - -var _rowmanager = __webpack_require__(8); - -var _rowmanager2 = _interopRequireDefault(_rowmanager); - -var _bodyRenderer = __webpack_require__(9); - -var _bodyRenderer2 = _interopRequireDefault(_bodyRenderer); - -var _style = __webpack_require__(11); - -var _style2 = _interopRequireDefault(_style); - -var _keyboard = __webpack_require__(12); - -var _keyboard2 = _interopRequireDefault(_keyboard); - -var _defaults = __webpack_require__(13); - -var _defaults2 = _interopRequireDefault(_defaults); - -__webpack_require__(14); - -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 DataTable = function () { - function DataTable(wrapper, options) { - _classCallCheck(this, DataTable); - - DataTable.instances++; - - if (typeof wrapper === 'string') { - // css selector - wrapper = document.querySelector(wrapper); - } - this.wrapper = wrapper; - if (!(this.wrapper instanceof HTMLElement)) { - throw new Error('Invalid argument given for `wrapper`'); - } - - this.options = Object.assign({}, _defaults2.default, options); - this.options.headerDropdown = _defaults2.default.headerDropdown.concat(options.headerDropdown || []); - // custom user events - this.events = Object.assign({}, _defaults2.default.events, options.events || {}); - this.fireEvent = this.fireEvent.bind(this); - - this.prepare(); - - this.style = new _style2.default(this); - this.keyboard = new _keyboard2.default(this.wrapper); - this.datamanager = new _datamanager2.default(this.options); - this.rowmanager = new _rowmanager2.default(this); - this.columnmanager = new _columnmanager2.default(this); - this.cellmanager = new _cellmanager2.default(this); - this.bodyRenderer = new _bodyRenderer2.default(this); - - if (this.options.data) { - this.refresh(); - } - } - - _createClass(DataTable, [{ - key: 'prepare', - value: function prepare() { - this.prepareDom(); - this.unfreeze(); - } - }, { - key: 'prepareDom', - value: function prepareDom() { - this.wrapper.innerHTML = '\n
\n \n
\n
\n
\n
\n ' + this.options.freezeMessage + '\n
\n
\n
\n
\n '; - - this.datatableWrapper = (0, _dom2.default)('.data-table', this.wrapper); - this.header = (0, _dom2.default)('.data-table-header', this.wrapper); - this.bodyScrollable = (0, _dom2.default)('.body-scrollable', this.wrapper); - this.freezeContainer = (0, _dom2.default)('.freeze-container', this.wrapper); - } - }, { - key: 'refresh', - value: function refresh(data) { - this.datamanager.init(data); - this.render(); - this.setDimensions(); - } - }, { - key: 'destroy', - value: function destroy() { - this.wrapper.innerHTML = ''; - this.style.destroy(); - } - }, { - key: 'appendRows', - value: function appendRows(rows) { - this.datamanager.appendRows(rows); - this.rowmanager.refreshRows(); - } - }, { - key: 'refreshRow', - value: function refreshRow(row, rowIndex) { - this.rowmanager.refreshRow(row, rowIndex); - } - }, { - key: 'render', - value: function render() { - this.renderHeader(); - this.renderBody(); - } - }, { - key: 'renderHeader', - value: function renderHeader() { - this.columnmanager.renderHeader(); - } - }, { - key: 'renderBody', - value: function renderBody() { - this.bodyRenderer.render(); - } - }, { - key: 'setDimensions', - value: function setDimensions() { - this.style.setDimensions(); - } - }, { - key: 'getColumn', - value: function getColumn(colIndex) { - return this.datamanager.getColumn(colIndex); - } - }, { - key: 'getColumns', - value: function getColumns() { - return this.datamanager.getColumns(); - } - }, { - key: 'getRows', - value: function getRows() { - return this.datamanager.getRows(); - } - }, { - key: 'getCell', - value: function getCell(colIndex, rowIndex) { - return this.datamanager.getCell(colIndex, rowIndex); - } - }, { - key: 'getColumnHeaderElement', - value: function getColumnHeaderElement(colIndex) { - return this.columnmanager.getColumnHeaderElement(colIndex); - } - }, { - key: 'getViewportHeight', - value: function getViewportHeight() { - if (!this.viewportHeight) { - this.viewportHeight = _dom2.default.style(this.bodyScrollable, 'height'); - } - - return this.viewportHeight; - } - }, { - key: 'sortColumn', - value: function sortColumn(colIndex, sortOrder) { - this.columnmanager.sortColumn(colIndex, sortOrder); - } - }, { - key: 'removeColumn', - value: function removeColumn(colIndex) { - this.columnmanager.removeColumn(colIndex); - } - }, { - key: 'scrollToLastColumn', - value: function scrollToLastColumn() { - this.datatableWrapper.scrollLeft = 9999; - } - }, { - key: 'freeze', - value: function freeze() { - _dom2.default.style(this.freezeContainer, { - display: '' - }); - } - }, { - key: 'unfreeze', - value: function unfreeze() { - _dom2.default.style(this.freezeContainer, { - display: 'none' - }); - } - }, { - key: 'fireEvent', - value: function fireEvent(eventName) { - for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) { - args[_key - 1] = arguments[_key]; - } - - this.events[eventName].apply(this, args); - } - }, { - key: 'log', - value: function log() { - if (this.options.enableLogs) { - console.log.apply(console, arguments); - } - } - }]); - - return DataTable; -}(); - -DataTable.instances = 0; - -exports.default = DataTable; -module.exports = exports['default']; - -/***/ }), -/* 5 */ -/***/ (function(module, exports, __webpack_require__) { - -Object.defineProperty(exports, "__esModule", { - value: true -}); -exports.DataError = undefined; - -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; }; }(); - -var _utils = __webpack_require__(1); - -function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } - -function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } - -function _extendableBuiltin(cls) { - function ExtendableBuiltin() { - var instance = Reflect.construct(cls, Array.from(arguments)); - Object.setPrototypeOf(instance, Object.getPrototypeOf(this)); - return instance; - } - - ExtendableBuiltin.prototype = Object.create(cls.prototype, { - constructor: { - value: cls, - enumerable: false, - writable: true, - configurable: true - } - }); - - if (Object.setPrototypeOf) { - Object.setPrototypeOf(ExtendableBuiltin, cls); - } else { - ExtendableBuiltin.__proto__ = cls; - } - - return ExtendableBuiltin; -} - -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); - +class DataManager { + constructor(options) { this.options = options; - this.sortRows = (0, _utils.promisify)(this.sortRows, this); - this.switchColumn = (0, _utils.promisify)(this.switchColumn, this); - this.removeColumn = (0, _utils.promisify)(this.removeColumn, this); + this.sortRows = promisify(this.sortRows, this); + this.switchColumn = promisify(this.switchColumn, this); + this.removeColumn = promisify(this.removeColumn, this); + this.filterRows = promisify(this.filterRows, this); } - _createClass(DataManager, [{ - key: 'init', - value: function init(data) { - if (!data) { - data = this.options.data; - } - - this.data = data; - - this.rowCount = 0; - this.columns = []; - this.rows = []; - - this.prepareColumns(); - this.prepareRows(); - - this.prepareNumericColumns(); + init(data) { + if (!data) { + data = this.options.data; } - // computed property + this.data = data; - }, { - key: 'prepareColumns', - value: function prepareColumns() { - this.columns = []; - this.validateColumns(); - this.prepareDefaultColumns(); - this.prepareHeader(); + this.rowCount = 0; + this.columns = []; + this.rows = []; + + this.prepareColumns(); + this.prepareRows(); + + this.prepareNumericColumns(); + } + + // computed property + get currentSort() { + const col = this.columns.find(col => col.sortOrder !== 'none'); + return col || { + colIndex: -1, + sortOrder: 'none' + }; + } + + prepareColumns() { + this.columns = []; + this.validateColumns(); + this.prepareDefaultColumns(); + this.prepareHeader(); + } + + prepareDefaultColumns() { + if (this.options.addCheckboxColumn && !this.hasColumnById('_checkbox')) { + const cell = { + id: '_checkbox', + content: this.getCheckboxHTML(), + editable: false, + resizable: false, + sortable: false, + focusable: false, + dropdown: false, + width: 25 + }; + this.columns.push(cell); } - }, { - key: 'prepareDefaultColumns', - value: function prepareDefaultColumns() { - if (this.options.addCheckboxColumn && !this.hasColumnById('_checkbox')) { - var cell = { - id: '_checkbox', - content: this.getCheckboxHTML(), - editable: false, - resizable: false, - sortable: false, - focusable: false, - dropdown: false, - width: 25 - }; - this.columns.push(cell); - } - if (this.options.addSerialNoColumn && !this.hasColumnById('_rowIndex')) { - var _cell = { - id: '_rowIndex', - content: '', - align: 'center', - editable: false, - resizable: false, - focusable: false, - dropdown: false, - width: 30 - }; - - this.columns.push(_cell); - } - } - }, { - key: 'prepareRow', - value: function prepareRow(row, i) { - var _this = this; - - var baseRowCell = { - rowIndex: i + if (this.options.addSerialNoColumn && !this.hasColumnById('_rowIndex')) { + let cell = { + id: '_rowIndex', + content: '', + align: 'center', + editable: false, + resizable: false, + focusable: false, + dropdown: false }; - return row.map(function (cell, i) { - return _this.prepareCell(cell, i); - }).map(function (cell) { - return Object.assign({}, baseRowCell, cell); - }); + this.columns.push(cell); } - }, { - key: 'prepareHeader', - value: function prepareHeader() { - var _this2 = this; + } - var columns = this.columns.concat(this.options.columns); - var baseCell = { - isHeader: 1, - editable: true, - sortable: true, - resizable: true, - focusable: true, - dropdown: true, - width: null, - format: function format(value) { - if (value === null || value === undefined) { - return ''; - } - return value + ''; + prepareRow(row, i) { + const baseRowCell = { + rowIndex: i + }; + + return row + .map((cell, i) => this.prepareCell(cell, i)) + .map(cell => Object.assign({}, baseRowCell, cell)); + } + + prepareHeader() { + let columns = this.columns.concat(this.options.columns); + const baseCell = { + isHeader: 1, + editable: true, + sortable: true, + resizable: true, + focusable: true, + dropdown: true, + width: null, + format: (value) => { + if (value === null || value === undefined) { + return ''; } - }; + return value + ''; + } + }; - this.columns = columns.map(function (cell, i) { - return _this2.prepareCell(cell, i); - }).map(function (col) { - return Object.assign({}, baseCell, col); - }).map(function (col) { + this.columns = columns + .map((cell, i) => this.prepareCell(cell, i)) + .map(col => Object.assign({}, baseCell, col)) + .map(col => { col.id = col.id || col.content; return col; }); - } - }, { - key: 'prepareCell', - value: function prepareCell(content, i) { - var cell = { - content: '', - align: 'left', - sortOrder: 'none', - colIndex: i, - column: this.columns[i] - }; + } + + prepareCell(content, i) { + const cell = { + content: '', + align: 'left', + sortOrder: 'none', + colIndex: i, + column: this.columns[i] + }; + + if (content !== null && typeof content === 'object') { + // passed as column/header + Object.assign(cell, content); + } else { + cell.content = content; + } + + return cell; + } + + prepareNumericColumns() { + const row0 = this.getRow(0); + if (!row0) return; + this.columns = this.columns.map((column, i) => { + + const cellValue = row0[i].content; + if (!column.align && cellValue && isNumeric(cellValue)) { + column.align = 'right'; + } + + return column; + }); + } + + prepareRows() { + this.validateData(this.data); + + this.rows = this.data.map((d, i) => { + const index = this._getNextRowCount(); + + let row = []; + + if (Array.isArray(d)) { + // row is an array + if (this.options.addCheckboxColumn) { + row.push(this.getCheckboxHTML()); + } + if (this.options.addSerialNoColumn) { + row.push((index + 1) + ''); + } + row = row.concat(d); + + while (row.length < this.columns.length) { + row.push(''); + } - if (content !== null && (typeof content === 'undefined' ? 'undefined' : _typeof(content)) === 'object') { - // passed as column/header - Object.assign(cell, content); } else { - cell.content = content; - } - - return cell; - } - }, { - key: 'prepareNumericColumns', - value: function prepareNumericColumns() { - var row0 = this.getRow(0); - if (!row0) return; - this.columns = this.columns.map(function (column, i) { - - var cellValue = row0[i].content; - if (!column.align && cellValue && (0, _utils.isNumeric)(cellValue)) { - column.align = 'right'; - } - - return column; - }); - } - }, { - key: 'prepareRows', - value: function prepareRows() { - var _this3 = this; - - this.validateData(this.data); - - this.rows = this.data.map(function (d, i) { - var index = _this3._getNextRowCount(); - - var row = []; - - if (Array.isArray(d)) { - // row is an array - if (_this3.options.addCheckboxColumn) { - row.push(_this3.getCheckboxHTML()); - } - if (_this3.options.addSerialNoColumn) { - row.push(index + 1 + ''); - } - row = row.concat(d); - - while (row.length < _this3.columns.length) { - row.push(''); - } - } else { - // row is a dict - var _iteratorNormalCompletion = true; - var _didIteratorError = false; - var _iteratorError = undefined; - - try { - for (var _iterator = _this3.columns[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) { - var col = _step.value; - - if (col.id === '_checkbox') { - row.push(_this3.getCheckboxHTML()); - } else if (col.id === '_rowIndex') { - row.push(index + 1 + ''); - } else { - row.push(col.format(d[col.id])); - } - } - } catch (err) { - _didIteratorError = true; - _iteratorError = err; - } finally { - try { - if (!_iteratorNormalCompletion && _iterator.return) { - _iterator.return(); - } - } finally { - if (_didIteratorError) { - throw _iteratorError; - } - } + // row is a dict + for (let col of this.columns) { + if (col.id === '_checkbox') { + row.push(this.getCheckboxHTML()); + } else if (col.id === '_rowIndex') { + row.push((index + 1) + ''); + } else { + row.push(d[col.id]); } } - - return _this3.prepareRow(row, index); - }); - } - }, { - key: 'validateColumns', - value: function validateColumns() { - var columns = this.options.columns; - if (!Array.isArray(columns)) { - throw new DataError('`columns` must be an array'); } - columns.forEach(function (column, i) { - if (typeof column !== 'string' && (typeof column === 'undefined' ? 'undefined' : _typeof(column)) !== 'object') { - throw new DataError('column "' + i + '" must be a string or an object'); - } - }); + return this.prepareRow(row, index); + }); + } + + validateColumns() { + const columns = this.options.columns; + if (!Array.isArray(columns)) { + throw new DataError('`columns` must be an array'); } - }, { - key: 'validateData', - value: function validateData(data) { - if (Array.isArray(data) && (data.length === 0 || Array.isArray(data[0]) || _typeof(data[0]) === 'object')) { - return true; + + columns.forEach((column, i) => { + if (typeof column !== 'string' && typeof column !== 'object') { + throw new DataError(`column "${i}" must be a string or an object`); } - throw new DataError('`data` must be an array of arrays or objects'); + }); + } + + validateData(data) { + if (Array.isArray(data) && + (data.length === 0 || Array.isArray(data[0]) || typeof data[0] === 'object')) { + return true; } - }, { - key: 'appendRows', - value: function appendRows(rows) { - this.validateData(rows); + throw new DataError('`data` must be an array of arrays or objects'); + } - this.rows = this.rows.concat(this.prepareRows(rows)); - } - }, { - key: 'sortRows', - value: function sortRows(colIndex) { - var sortOrder = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'none'; + appendRows(rows) { + this.validateData(rows); - colIndex = +colIndex; + this.rows = this.rows.concat(this.prepareRows(rows)); + } - // reset sortOrder and update for colIndex - this.getColumns().map(function (col) { + sortRows(colIndex, sortOrder = 'none') { + colIndex = +colIndex; + + // reset sortOrder and update for colIndex + this.getColumns() + .map(col => { if (col.colIndex === colIndex) { col.sortOrder = sortOrder; } else { @@ -45700,361 +45285,699 @@ var DataManager = function () { } }); - this._sortRows(colIndex, sortOrder); - } - }, { - key: '_sortRows', - value: function _sortRows(colIndex, sortOrder) { - - 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; - }); - - if (this.hasColumnById('_rowIndex')) { - // update row index - var srNoColIndex = this.getColumnIndexById('_rowIndex'); - this.rows = this.rows.map(function (row, index) { - return row.map(function (cell) { - if (cell.colIndex === srNoColIndex) { - cell.content = index + 1 + ''; - } - return cell; - }); - }); - } - } - }, { - 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: 'switchColumn', - value: function switchColumn(index1, index2) { - // update columns - var temp = this.columns[index1]; - this.columns[index1] = this.columns[index2]; - this.columns[index2] = temp; - - this.columns[index1].colIndex = index1; - this.columns[index2].colIndex = index2; - - // update rows - this.rows = this.rows.map(function (row) { - var newCell1 = Object.assign({}, row[index1], { colIndex: index2 }); - var newCell2 = Object.assign({}, row[index2], { colIndex: index1 }); - - var newRow = row.map(function (cell) { - // make object copy - return Object.assign({}, cell); - }); - - newRow[index2] = newCell1; - newRow[index1] = newCell2; - - return newRow; - }); - } - }, { - key: 'removeColumn', - value: function removeColumn(index) { - index = +index; - var filter = function filter(cell) { - return cell.colIndex !== index; - }; - var map = function map(cell, i) { - return Object.assign({}, cell, { colIndex: i }); - }; - // update columns - this.columns = this.columns.filter(filter).map(map); - - // update rows - this.rows = this.rows.map(function (row) { - var newRow = row.filter(filter).map(map); - - return newRow; - }); - } - }, { - key: 'updateRow', - value: function updateRow(row, rowIndex) { - if (row.length < this.columns.length) { - if (this.hasColumnById('_rowIndex')) { - var val = rowIndex + 1 + ''; - - row = [val].concat(row); - } - - if (this.hasColumnById('_checkbox')) { - var _val = ''; - - row = [_val].concat(row); - } - } - - var _row = this.prepareRow(row, rowIndex); - var index = this.rows.findIndex(function (row) { - return row[0].rowIndex === rowIndex; - }); - this.rows[index] = _row; - - return _row; - } - }, { - key: 'updateCell', - value: function updateCell(colIndex, rowIndex, options) { - var cell = void 0; - if ((typeof colIndex === 'undefined' ? 'undefined' : _typeof(colIndex)) === 'object') { - // cell object was passed, - // must have colIndex, rowIndex - cell = colIndex; - colIndex = cell.colIndex; - rowIndex = cell.rowIndex; - // the object passed must be merged with original cell - options = cell; - } - cell = this.getCell(colIndex, rowIndex); - - // mutate object directly - for (var key in options) { - var newVal = options[key]; - if (newVal !== undefined) { - cell[key] = newVal; - } - } - - return cell; - } - }, { - key: 'updateColumn', - value: function updateColumn(colIndex, keyValPairs) { - var column = this.getColumn(colIndex); - for (var key in keyValPairs) { - var newVal = keyValPairs[key]; - if (newVal !== undefined) { - column[key] = newVal; - } - } - return column; - } - }, { - 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(skipStandardColumns) { - var columns = this.columns; - - if (skipStandardColumns) { - columns = columns.slice(this.getStandardColumnCount()); - } - - return columns; - } - }, { - key: 'getStandardColumnCount', - value: function getStandardColumnCount() { - if (this.options.addCheckboxColumn && this.options.addSerialNoColumn) { - return 2; - } - - if (this.options.addCheckboxColumn || this.options.addSerialNoColumn) { - return 1; - } - - return 0; - } - }, { - key: 'getColumnCount', - value: function getColumnCount(skipStandardColumns) { - var val = this.columns.length; - - if (skipStandardColumns) { - val = val - this.getStandardColumnCount(); - } - - return val; - } - }, { - 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 - }; - } - }, { - key: 'hasColumn', - value: function hasColumn(name) { - return Boolean(this.columns.find(function (col) { - return col.content === name; - })); - } - }, { - key: 'hasColumnById', - value: function hasColumnById(id) { - return Boolean(this.columns.find(function (col) { - return col.id === id; - })); - } - }, { - key: 'getColumnIndex', - value: function getColumnIndex(name) { - return this.columns.findIndex(function (col) { - return col.content === name; - }); - } - }, { - key: 'getColumnIndexById', - value: function getColumnIndexById(id) { - return this.columns.findIndex(function (col) { - return col.id === id; - }); - } - }, { - key: 'getCheckboxHTML', - value: function getCheckboxHTML() { - return ''; - } - }, { - key: 'currentSort', - get: function get() { - var col = this.columns.find(function (col) { - return col.sortOrder !== 'none'; - }); - return col || { - colIndex: -1, - sortOrder: 'none' - }; - } - }]); - - return DataManager; -}(); - -// Custom Errors - - -exports.default = DataManager; - -var DataError = exports.DataError = function (_extendableBuiltin2) { - _inherits(DataError, _extendableBuiltin2); - - function DataError() { - _classCallCheck(this, DataError); - - return _possibleConstructorReturn(this, (DataError.__proto__ || Object.getPrototypeOf(DataError)).apply(this, arguments)); + this._sortRows(colIndex, sortOrder); } - return DataError; -}(_extendableBuiltin(TypeError)); + _sortRows(colIndex, sortOrder) { + 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((a, b) => { + const _aIndex = a[0].rowIndex; + const _bIndex = b[0].rowIndex; + const _a = a[colIndex].content; + const _b = b[colIndex].content; -/***/ }), -/* 6 */ -/***/ (function(module, exports, __webpack_require__) { + 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; + }); -Object.defineProperty(exports, "__esModule", { - value: true -}); + if (this.hasColumnById('_rowIndex')) { + // update row index + const srNoColIndex = this.getColumnIndexById('_rowIndex'); + this.rows = this.rows.map((row, index) => { + return row.map(cell => { + if (cell.colIndex === srNoColIndex) { + cell.content = (index + 1) + ''; + } + return cell; + }); + }); + } + } -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; }; + reverseArray(array) { + let left = null; + let right = null; + let length = array.length; -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; }; }(); + for (left = 0, right = length - 1; left < right; left += 1, right -= 1) { + const temporary = array[left]; -var _utils = __webpack_require__(1); + array[left] = array[right]; + array[right] = temporary; + } + } -var _dom = __webpack_require__(0); + switchColumn(index1, index2) { + // update columns + const temp = this.columns[index1]; + this.columns[index1] = this.columns[index2]; + this.columns[index2] = temp; -var _dom2 = _interopRequireDefault(_dom); + this.columns[index1].colIndex = index1; + this.columns[index2].colIndex = index2; -var _columnmanager = __webpack_require__(2); + // update rows + this.rows = this.rows.map(row => { + const newCell1 = Object.assign({}, row[index1], { colIndex: index2 }); + const newCell2 = Object.assign({}, row[index2], { colIndex: index1 }); -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + let newRow = row.map(cell => { + // make object copy + return Object.assign({}, cell); + }); -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); } } + newRow[index2] = newCell1; + newRow[index1] = newCell2; -function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + return newRow; + }); + } -var CellManager = function () { - function CellManager(instance) { - _classCallCheck(this, CellManager); + removeColumn(index) { + index = +index; + const filter = cell => cell.colIndex !== index; + const map = (cell, i) => Object.assign({}, cell, { colIndex: i }); + // update columns + this.columns = this.columns + .filter(filter) + .map(map); + // update rows + this.rows = this.rows.map(row => { + const newRow = row + .filter(filter) + .map(map); + + return newRow; + }); + } + + updateRow(row, rowIndex) { + if (row.length < this.columns.length) { + if (this.hasColumnById('_rowIndex')) { + const val = (rowIndex + 1) + ''; + + row = [val].concat(row); + } + + if (this.hasColumnById('_checkbox')) { + const val = ''; + + row = [val].concat(row); + } + } + + const _row = this.prepareRow(row, rowIndex); + const index = this.rows.findIndex(row => row[0].rowIndex === rowIndex); + this.rows[index] = _row; + + return _row; + } + + updateCell(colIndex, rowIndex, options) { + let cell; + if (typeof colIndex === 'object') { + // cell object was passed, + // must have colIndex, rowIndex + cell = colIndex; + colIndex = cell.colIndex; + rowIndex = cell.rowIndex; + // the object passed must be merged with original cell + options = cell; + } + cell = this.getCell(colIndex, rowIndex); + + // mutate object directly + for (let key in options) { + const newVal = options[key]; + if (newVal !== undefined) { + cell[key] = newVal; + } + } + + return cell; + } + + updateColumn(colIndex, keyValPairs) { + const column = this.getColumn(colIndex); + for (let key in keyValPairs) { + const newVal = keyValPairs[key]; + if (newVal !== undefined) { + column[key] = newVal; + } + } + return column; + } + + filterRows(keyword, colIndex) { + let rowsToHide = []; + let rowsToShow = []; + const cells = this.rows.map(row => row[colIndex]); + + cells.forEach(cell => { + const hay = cell.content.toLowerCase(); + const needle = (keyword || '').toLowerCase(); + + if (!needle || hay.includes(needle)) { + rowsToShow.push(cell.rowIndex); + } else { + rowsToHide.push(cell.rowIndex); + } + }); + + return {rowsToHide, rowsToShow}; + } + + getRowCount() { + return this.rowCount; + } + + _getNextRowCount() { + const val = this.rowCount; + + this.rowCount++; + return val; + } + + getRows(start, end) { + return this.rows.slice(start, end); + } + + getColumns(skipStandardColumns) { + let columns = this.columns; + + if (skipStandardColumns) { + columns = columns.slice(this.getStandardColumnCount()); + } + + return columns; + } + + getStandardColumnCount() { + if (this.options.addCheckboxColumn && this.options.addSerialNoColumn) { + return 2; + } + + if (this.options.addCheckboxColumn || this.options.addSerialNoColumn) { + return 1; + } + + return 0; + } + + getColumnCount(skipStandardColumns) { + let val = this.columns.length; + + if (skipStandardColumns) { + val = val - this.getStandardColumnCount(); + } + + return val; + } + + getColumn(colIndex) { + colIndex = +colIndex; + return this.columns.find(col => col.colIndex === colIndex); + } + + getRow(rowIndex) { + rowIndex = +rowIndex; + return this.rows.find(row => row[0].rowIndex === rowIndex); + } + + getCell(colIndex, rowIndex) { + rowIndex = +rowIndex; + colIndex = +colIndex; + return this.rows.find(row => row[0].rowIndex === rowIndex)[colIndex]; + } + + get() { + return { + columns: this.columns, + rows: this.rows + }; + } + + hasColumn(name) { + return Boolean(this.columns.find(col => col.content === name)); + } + + hasColumnById(id) { + return Boolean(this.columns.find(col => col.id === id)); + } + + getColumnIndex(name) { + return this.columns.findIndex(col => col.content === name); + } + + getColumnIndexById(id) { + return this.columns.findIndex(col => col.id === id); + } + + getCheckboxHTML() { + return ''; + } +} + +// Custom Errors +class DataError extends TypeError {} + +class ColumnManager { + constructor(instance) { + this.instance = instance; + + linkProperties(this, this.instance, [ + 'options', + 'fireEvent', + 'header', + 'datamanager', + 'style', + 'wrapper', + 'rowmanager', + 'bodyScrollable' + ]); + + this.bindEvents(); + getDropdownHTML = getDropdownHTML.bind(this, this.options.dropdownButton); + } + + renderHeader() { + this.header.innerHTML = ''; + this.refreshHeader(); + } + + refreshHeader() { + const columns = this.datamanager.getColumns(); + + if (!$('.data-table-col', this.header)) { + // insert html + + let html = this.rowmanager.getRowHTML(columns, { isHeader: 1 }); + if (this.options.enableInlineFilters) { + html += this.rowmanager.getRowHTML(columns, { isFilter: 1 }); + } + + $('thead', this.header).innerHTML = html; + + this.$filterRow = $('.data-table-row[data-is-filter]', this.header); + + if (this.$filterRow) { + // hide filter row immediately, so it doesn't disturb layout + $.style(this.$filterRow, { + display: 'none' + }); + } + } else { + // refresh dom state + const $cols = $.each('.data-table-col', this.header); + if (columns.length < $cols.length) { + // deleted column + $('thead', this.header).innerHTML = this.rowmanager.getRowHTML(columns, { isHeader: 1 }); + return; + } + + $cols.map(($col, i) => { + const column = columns[i]; + // column sorted or order changed + // update colIndex of each header cell + $.data($col, { + colIndex: column.colIndex + }); + + // refresh sort indicator + const sortIndicator = $('.sort-indicator', $col); + if (sortIndicator) { + sortIndicator.innerHTML = this.options.sortIndicator[column.sortOrder]; + } + }); + } + // reset columnMap + this.$columnMap = []; + } + + bindEvents() { + this.bindDropdown(); + this.bindResizeColumn(); + this.bindMoveColumn(); + this.bindFilter(); + } + + bindDropdown() { + let $activeDropdown; + $.on(this.header, 'click', '.data-table-dropdown-toggle', (e, $button) => { + const $dropdown = $.closest('.data-table-dropdown', $button); + + if (!$dropdown.classList.contains('is-active')) { + deactivateDropdown(); + $dropdown.classList.add('is-active'); + $activeDropdown = $dropdown; + } else { + deactivateDropdown(); + } + }); + + $.on(document.body, 'click', (e) => { + if (e.target.matches('.data-table-dropdown-toggle')) return; + deactivateDropdown(); + }); + + const dropdownItems = this.options.headerDropdown; + + $.on(this.header, 'click', '.data-table-dropdown-list > div', (e, $item) => { + const $col = $.closest('.data-table-col', $item); + const { index } = $.data($item); + const { colIndex } = $.data($col); + let callback = dropdownItems[index].action; + + callback && callback.call(this.instance, this.getColumn(colIndex)); + }); + + function deactivateDropdown(e) { + $activeDropdown && $activeDropdown.classList.remove('is-active'); + $activeDropdown = null; + } + } + + bindResizeColumn() { + let isDragging = false; + let $resizingCell, startWidth, startX; + + $.on(this.header, 'mousedown', '.data-table-col .column-resizer', (e, $handle) => { + document.body.classList.add('data-table-resize'); + const $cell = $handle.parentNode.parentNode; + $resizingCell = $cell; + const { colIndex } = $.data($resizingCell); + const col = this.getColumn(colIndex); + + if (col && col.resizable === false) { + return; + } + + isDragging = true; + startWidth = $.style($('.content', $resizingCell), 'width'); + startX = e.pageX; + }); + + $.on(document.body, 'mouseup', (e) => { + document.body.classList.remove('data-table-resize'); + if (!$resizingCell) return; + isDragging = false; + + const { colIndex } = $.data($resizingCell); + this.setColumnWidth(colIndex); + this.style.setBodyStyle(); + $resizingCell = null; + }); + + $.on(document.body, 'mousemove', (e) => { + if (!isDragging) return; + const finalWidth = startWidth + (e.pageX - startX); + const { colIndex } = $.data($resizingCell); + + if (this.getColumnMinWidth(colIndex) > finalWidth) { + // don't resize past minWidth + return; + } + this.datamanager.updateColumn(colIndex, { width: finalWidth }); + this.setColumnHeaderWidth(colIndex); + }); + } + + bindMoveColumn() { + let initialized; + + const initialize = () => { + if (initialized) { + $.off(document.body, 'mousemove', initialize); + return; + } + const ready = $('.data-table-col', this.header); + if (!ready) return; + + const $parent = $('.data-table-row', this.header); + + this.sortable = Sortable$$1.create($parent, { + onEnd: (e) => { + const { oldIndex, newIndex } = e; + const $draggedCell = e.item; + const { colIndex } = $.data($draggedCell); + if (+colIndex === newIndex) return; + + this.switchColumn(oldIndex, newIndex); + }, + preventOnFilter: false, + filter: '.column-resizer, .data-table-dropdown', + animation: 150 + }); + }; + + $.on(document.body, 'mousemove', initialize); + } + + bindSortColumn() { + + $.on(this.header, 'click', '.data-table-col .column-title', (e, span) => { + const $cell = span.closest('.data-table-col'); + let { colIndex, sortOrder } = $.data($cell); + sortOrder = getDefault(sortOrder, 'none'); + const col = this.getColumn(colIndex); + + if (col && col.sortable === false) { + return; + } + + // reset sort indicator + $('.sort-indicator', this.header).textContent = ''; + $.each('.data-table-col', this.header).map($cell => { + $.data($cell, { + sortOrder: 'none' + }); + }); + + let nextSortOrder, textContent; + if (sortOrder === 'none') { + nextSortOrder = 'asc'; + textContent = '▲'; + } else if (sortOrder === 'asc') { + nextSortOrder = 'desc'; + textContent = '▼'; + } else if (sortOrder === 'desc') { + nextSortOrder = 'none'; + textContent = ''; + } + + $.data($cell, { + sortOrder: nextSortOrder + }); + $('.sort-indicator', $cell).textContent = textContent; + + this.sortColumn(colIndex, nextSortOrder); + }); + } + + sortColumn(colIndex, nextSortOrder) { + this.instance.freeze(); + this.sortRows(colIndex, nextSortOrder) + .then(() => { + this.refreshHeader(); + return this.rowmanager.refreshRows(); + }) + .then(() => this.instance.unfreeze()) + .then(() => { + this.fireEvent('onSortColumn', this.getColumn(colIndex)); + }); + } + + removeColumn(colIndex) { + const removedCol = this.getColumn(colIndex); + this.instance.freeze(); + this.datamanager.removeColumn(colIndex) + .then(() => { + this.refreshHeader(); + return this.rowmanager.refreshRows(); + }) + .then(() => this.instance.unfreeze()) + .then(() => { + this.fireEvent('onRemoveColumn', removedCol); + }); + } + + switchColumn(oldIndex, newIndex) { + this.instance.freeze(); + this.datamanager.switchColumn(oldIndex, newIndex) + .then(() => { + this.refreshHeader(); + return this.rowmanager.refreshRows(); + }) + .then(() => { + this.setColumnWidth(oldIndex); + this.setColumnWidth(newIndex); + this.instance.unfreeze(); + }) + .then(() => { + this.fireEvent('onSwitchColumn', + this.getColumn(oldIndex), this.getColumn(newIndex) + ); + }); + } + + toggleFilter() { + this.isFilterShown = this.isFilterShown || false; + + if (this.isFilterShown) { + $.style(this.$filterRow, { + display: 'none' + }); + } else { + $.style(this.$filterRow, { + display: '' + }); + } + + this.isFilterShown = !this.isFilterShown; + this.style.setBodyStyle(); + } + + focusFilter(colIndex) { + if (!this.isFilterShown) return; + + const $filterInput = $(`[data-col-index="${colIndex}"] .data-table-filter`, this.$filterRow); + $filterInput.focus(); + } + + bindFilter() { + if (!this.options.enableInlineFilters) return; + const handler = e => { + const $filterCell = $.closest('.data-table-col', e.target); + const { colIndex } = $.data($filterCell); + const keyword = e.target.value; + + this.datamanager.filterRows(keyword, colIndex) + .then(({ rowsToHide, rowsToShow }) => { + rowsToHide.map(rowIndex => { + const $tr = $(`.data-table-row[data-row-index="${rowIndex}"]`, this.bodyScrollable); + $tr.classList.add('hide'); + }); + rowsToShow.map(rowIndex => { + const $tr = $(`.data-table-row[data-row-index="${rowIndex}"]`, this.bodyScrollable); + $tr.classList.remove('hide'); + }); + }); + }; + $.on(this.header, 'keydown', '.data-table-filter', debounce$1(handler, 300)); + } + + sortRows(colIndex, sortOrder) { + return this.datamanager.sortRows(colIndex, sortOrder); + } + + getColumn(colIndex) { + return this.datamanager.getColumn(colIndex); + } + + getColumns() { + return this.datamanager.getColumns(); + } + + setColumnWidth(colIndex) { + colIndex = +colIndex; + this._columnWidthMap = this._columnWidthMap || []; + + const { width } = this.getColumn(colIndex); + + let index = this._columnWidthMap[colIndex]; + const selector = `[data-col-index="${colIndex}"] .content, [data-col-index="${colIndex}"] .edit-cell`; + const styles = { + width: width + 'px' + }; + + index = this.style.setStyle(selector, styles, index); + this._columnWidthMap[colIndex] = index; + } + + setColumnHeaderWidth(colIndex) { + colIndex = +colIndex; + this.$columnMap = this.$columnMap || []; + const selector = `.data-table-header [data-col-index="${colIndex}"] .content`; + const { width } = this.getColumn(colIndex); + + let $column = this.$columnMap[colIndex]; + if (!$column) { + $column = this.header.querySelector(selector); + this.$columnMap[colIndex] = $column; + } + + $column.style.width = width + 'px'; + } + + getColumnMinWidth(colIndex) { + colIndex = +colIndex; + return this.getColumn(colIndex).minWidth || 24; + } + + getFirstColumnIndex() { + if (this.options.addCheckboxColumn && this.options.addSerialNoColumn) { + return 2; + } + + if (this.options.addCheckboxColumn || this.options.addSerialNoColumn) { + return 1; + } + + return 0; + } + + getHeaderCell$(colIndex) { + return $(`.data-table-col[data-col-index="${colIndex}"]`, this.header); + } + + getLastColumnIndex() { + return this.datamanager.getColumnCount() - 1; + } + + getSerialColumnIndex() { + const columns = this.datamanager.getColumns(); + + return columns.findIndex(column => column.content.includes('Sr. No')); + } +} + +// eslint-disable-next-line +var getDropdownHTML = function getDropdownHTML(dropdownButton = 'v') { + // add dropdown buttons + const dropdownItems = this.options.headerDropdown; + + return `
${dropdownButton}
+
+ ${dropdownItems.map((d, i) => `
${d.label}
`).join('')} +
+ `; +}; + +class CellManager { + constructor(instance) { this.instance = instance; this.wrapper = this.instance.wrapper; this.options = this.instance.options; @@ -46068,524 +45991,447 @@ var CellManager = function () { this.bindEvents(); } - _createClass(CellManager, [{ - key: 'bindEvents', - value: function bindEvents() { - this.bindFocusCell(); - this.bindEditCell(); - this.bindKeyboardSelection(); - this.bindCopyCellContents(); - this.bindMouseEvents(); - } - }, { - key: 'bindFocusCell', - value: function bindFocusCell() { - this.bindKeyboardNav(); - } - }, { - key: 'bindEditCell', - value: function bindEditCell() { - var _this = this; + bindEvents() { + this.bindFocusCell(); + this.bindEditCell(); + this.bindKeyboardSelection(); + this.bindCopyCellContents(); + this.bindMouseEvents(); + } - this.$editingCell = null; + bindFocusCell() { + this.bindKeyboardNav(); + } - _dom2.default.on(this.bodyScrollable, 'dblclick', '.data-table-col', function (e, cell) { - _this.activateEditing(cell); - }); + bindEditCell() { + this.$editingCell = null; - this.keyboard.on('enter', function (e) { - if (_this.$focusedCell && !_this.$editingCell) { - // enter keypress on focused cell - _this.activateEditing(_this.$focusedCell); - } else if (_this.$editingCell) { - // enter keypress on editing cell - _this.submitEditing(); - _this.deactivateEditing(); - } - }); - } - }, { - key: 'bindKeyboardNav', - value: function bindKeyboardNav() { - var _this2 = this; + $.on(this.bodyScrollable, 'dblclick', '.data-table-col', (e, cell) => { + this.activateEditing(cell); + }); - var focusCell = function focusCell(direction) { - if (!_this2.$focusedCell || _this2.$editingCell) { - return false; - } - - var $cell = _this2.$focusedCell; - - if (direction === 'left' || direction === 'shift+tab') { - $cell = _this2.getLeftCell$($cell); - } else if (direction === 'right' || direction === 'tab') { - $cell = _this2.getRightCell$($cell); - } else if (direction === 'up') { - $cell = _this2.getAboveCell$($cell); - } else if (direction === 'down') { - $cell = _this2.getBelowCell$($cell); - } - - _this2.focusCell($cell); - return true; - }; - - var focusLastCell = function focusLastCell(direction) { - if (!_this2.$focusedCell || _this2.$editingCell) { - return false; - } - - var $cell = _this2.$focusedCell; - - var _$$data = _dom2.default.data($cell), - rowIndex = _$$data.rowIndex, - colIndex = _$$data.colIndex; - - if (direction === 'left') { - $cell = _this2.getLeftMostCell$(rowIndex); - } else if (direction === 'right') { - $cell = _this2.getRightMostCell$(rowIndex); - } else if (direction === 'up') { - $cell = _this2.getTopMostCell$(colIndex); - } else if (direction === 'down') { - $cell = _this2.getBottomMostCell$(colIndex); - } - - _this2.focusCell($cell); - return true; - }; - - ['left', 'right', 'up', 'down', 'tab', 'shift+tab'].map(function (direction) { - return _this2.keyboard.on(direction, function () { - return focusCell(direction); - }); - }); - - ['left', 'right', 'up', 'down'].map(function (direction) { - return _this2.keyboard.on('ctrl+' + direction, function () { - return focusLastCell(direction); - }); - }); - - this.keyboard.on('esc', function () { - _this2.deactivateEditing(); - }); - } - }, { - key: 'bindKeyboardSelection', - value: function bindKeyboardSelection() { - var _this3 = this; - - var getNextSelectionCursor = function getNextSelectionCursor(direction) { - var $selectionCursor = _this3.getSelectionCursor(); - - if (direction === 'left') { - $selectionCursor = _this3.getLeftCell$($selectionCursor); - } else if (direction === 'right') { - $selectionCursor = _this3.getRightCell$($selectionCursor); - } else if (direction === 'up') { - $selectionCursor = _this3.getAboveCell$($selectionCursor); - } else if (direction === 'down') { - $selectionCursor = _this3.getBelowCell$($selectionCursor); - } - - return $selectionCursor; - }; - - ['left', 'right', 'up', 'down'].map(function (direction) { - return _this3.keyboard.on('shift+' + direction, function () { - return _this3.selectArea(getNextSelectionCursor(direction)); - }); - }); - } - }, { - key: 'bindCopyCellContents', - value: function bindCopyCellContents() { - var _this4 = this; - - this.keyboard.on('ctrl+c', function () { - _this4.copyCellContents(_this4.$focusedCell, _this4.$selectionCursor); - }); - } - }, { - key: 'bindMouseEvents', - value: function bindMouseEvents() { - var _this5 = this; - - var mouseDown = null; - - _dom2.default.on(this.bodyScrollable, 'mousedown', '.data-table-col', function (e) { - mouseDown = true; - _this5.focusCell((0, _dom2.default)(e.delegatedTarget)); - }); - - _dom2.default.on(this.bodyScrollable, 'mouseup', function () { - mouseDown = false; - }); - - var selectArea = function selectArea(e) { - if (!mouseDown) return; - _this5.selectArea((0, _dom2.default)(e.delegatedTarget)); - }; - - _dom2.default.on(this.bodyScrollable, 'mousemove', '.data-table-col', (0, _utils.throttle)(selectArea, 50)); - } - }, { - key: 'focusCell', - value: function focusCell($cell) { - var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}, - _ref$skipClearSelecti = _ref.skipClearSelection, - skipClearSelection = _ref$skipClearSelecti === undefined ? 0 : _ref$skipClearSelecti; - - if (!$cell) return; - - // don't focus if already editing cell - if ($cell === this.$editingCell) return; - - var _$$data2 = _dom2.default.data($cell), - colIndex = _$$data2.colIndex, - isHeader = _$$data2.isHeader; - - if (isHeader) { - return; + this.keyboard.on('enter', (e) => { + if (this.$focusedCell && !this.$editingCell) { + // enter keypress on focused cell + this.activateEditing(this.$focusedCell); + } else if (this.$editingCell) { + // enter keypress on editing cell + this.submitEditing(); + this.deactivateEditing(); } + }); + } - var column = this.columnmanager.getColumn(colIndex); - if (column.focusable === false) { - return; - } - - this.deactivateEditing(); - if (!skipClearSelection) { - this.clearSelection(); - } - - if (this.$focusedCell) { - this.$focusedCell.classList.remove('selected'); - } - - this.$focusedCell = $cell; - $cell.classList.add('selected'); - - // so that keyboard nav works - $cell.focus(); - - this.highlightRowColumnHeader($cell); - this.scrollToCell($cell); - } - }, { - key: 'highlightRowColumnHeader', - value: function highlightRowColumnHeader($cell) { - var _$$data3 = _dom2.default.data($cell), - colIndex = _$$data3.colIndex, - rowIndex = _$$data3.rowIndex; - - var _colIndex = this.datamanager.getColumnIndexById('_rowIndex'); - 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.lastHeaders) { - _dom2.default.removeStyle(this.lastHeaders, 'backgroundColor'); - } - - var colHeader = (0, _dom2.default)(colHeaderSelector, this.wrapper); - var rowHeader = (0, _dom2.default)(rowHeaderSelector, this.wrapper); - - _dom2.default.style([colHeader, rowHeader], { - backgroundColor: '#f5f7fa' // light-bg - }); - - this.lastHeaders = [colHeader, rowHeader]; - } - }, { - key: 'selectAreaOnClusterChanged', - value: function selectAreaOnClusterChanged() { - if (!(this.$focusedCell && this.$selectionCursor)) return; - - var _$$data4 = _dom2.default.data(this.$selectionCursor), - colIndex = _$$data4.colIndex, - rowIndex = _$$data4.rowIndex; - - var $cell = this.getCell$(colIndex, rowIndex); - - if (!$cell || $cell === this.$selectionCursor) return; - - // selectArea needs $focusedCell - var fCell = _dom2.default.data(this.$focusedCell); - this.$focusedCell = this.getCell$(fCell.colIndex, fCell.rowIndex); - - this.selectArea($cell); - } - }, { - key: 'focusCellOnClusterChanged', - value: function focusCellOnClusterChanged() { - if (!this.$focusedCell) return; - - var _$$data5 = _dom2.default.data(this.$focusedCell), - colIndex = _$$data5.colIndex, - rowIndex = _$$data5.rowIndex; - - var $cell = this.getCell$(colIndex, rowIndex); - - if (!$cell) return; - // this function is called after selectAreaOnClusterChanged, - // focusCell calls clearSelection which resets the area selection - // so a flag to skip it - this.focusCell($cell, { skipClearSelection: 1 }); - } - }, { - key: 'selectArea', - value: function selectArea($selectionCursor) { - if (!this.$focusedCell) return; - - if (this._selectArea(this.$focusedCell, $selectionCursor)) { - // valid selection - this.$selectionCursor = $selectionCursor; - } - } - }, { - key: '_selectArea', - value: function _selectArea($cell1, $cell2) { - var _this6 = this; - - if ($cell1 === $cell2) return false; - - var cells = this.getCellsInRange($cell1, $cell2); - if (!cells) return false; - - this.clearSelection(); - cells.map(function (index) { - return _this6.getCell$.apply(_this6, _toConsumableArray(index)); - }).map(function ($cell) { - return $cell.classList.add('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 && $cell2)) { - return false; - } - - var cell1 = _dom2.default.data($cell1); - var cell2 = _dom2.default.data($cell2); - - colIndex1 = cell1.colIndex; - rowIndex1 = cell1.rowIndex; - colIndex2 = cell2.colIndex; - rowIndex2 = cell2.rowIndex; - } - - if (rowIndex1 > rowIndex2) { - var _ref2 = [rowIndex2, rowIndex1]; - rowIndex1 = _ref2[0]; - rowIndex2 = _ref2[1]; - } - - if (colIndex1 > colIndex2) { - var _ref3 = [colIndex2, colIndex1]; - colIndex1 = _ref3[0]; - colIndex2 = _ref3[1]; - } - - if (this.isStandardCell(colIndex1) || this.isStandardCell(colIndex2)) { + bindKeyboardNav() { + const focusCell = (direction) => { + if (!this.$focusedCell || this.$editingCell) { return false; } - var cells = []; - var colIndex = colIndex1; - var rowIndex = rowIndex1; - var rowIndices = []; + let $cell = this.$focusedCell; - while (rowIndex <= rowIndex2) { - rowIndices.push(rowIndex); - rowIndex++; + if (direction === 'left' || direction === 'shift+tab') { + $cell = this.getLeftCell$($cell); + } else if (direction === 'right' || direction === 'tab') { + $cell = this.getRightCell$($cell); + } else if (direction === 'up') { + $cell = this.getAboveCell$($cell); + } else if (direction === 'down') { + $cell = this.getBelowCell$($cell); } - rowIndices.map(function (rowIndex) { - while (colIndex <= colIndex2) { - cells.push([colIndex, rowIndex]); - colIndex++; - } - colIndex = colIndex1; - }); - - return cells; - } - }, { - key: 'clearSelection', - value: function clearSelection() { - _dom2.default.each('.data-table-col.highlight', this.bodyScrollable).map(function (cell) { - return cell.classList.remove('highlight'); - }); - - this.$selectionCursor = null; - } - }, { - key: 'getSelectionCursor', - value: function getSelectionCursor() { - return this.$selectionCursor || this.$focusedCell; - } - }, { - key: 'activateEditing', - value: function activateEditing($cell) { this.focusCell($cell); + return true; + }; - var _$$data6 = _dom2.default.data($cell), - rowIndex = _$$data6.rowIndex, - colIndex = _$$data6.colIndex; + const focusLastCell = (direction) => { + if (!this.$focusedCell || this.$editingCell) { + return false; + } - var col = this.columnmanager.getColumn(colIndex); - if (col && (col.editable === false || col.focusable === false)) { + let $cell = this.$focusedCell; + const { rowIndex, colIndex } = $.data($cell); + + if (direction === 'left') { + $cell = this.getLeftMostCell$(rowIndex); + } else if (direction === 'right') { + $cell = this.getRightMostCell$(rowIndex); + } else if (direction === 'up') { + $cell = this.getTopMostCell$(colIndex); + } else if (direction === 'down') { + $cell = this.getBottomMostCell$(colIndex); + } + + this.focusCell($cell); + return true; + }; + + ['left', 'right', 'up', 'down', 'tab', 'shift+tab'].map( + direction => this.keyboard.on(direction, () => focusCell(direction)) + ); + + ['left', 'right', 'up', 'down'].map( + direction => this.keyboard.on('ctrl+' + direction, () => focusLastCell(direction)) + ); + + this.keyboard.on('esc', () => { + this.deactivateEditing(); + }); + + if (this.options.enableInlineFilters) { + this.keyboard.on('ctrl+f', (e) => { + const $cell = $.closest('.data-table-col', e.target); + let { colIndex } = $.data($cell); + + this.activateFilter(colIndex); + return true; + }); + } + } + + bindKeyboardSelection() { + const getNextSelectionCursor = (direction) => { + let $selectionCursor = this.getSelectionCursor(); + + if (direction === 'left') { + $selectionCursor = this.getLeftCell$($selectionCursor); + } else if (direction === 'right') { + $selectionCursor = this.getRightCell$($selectionCursor); + } else if (direction === 'up') { + $selectionCursor = this.getAboveCell$($selectionCursor); + } else if (direction === 'down') { + $selectionCursor = this.getBelowCell$($selectionCursor); + } + + return $selectionCursor; + }; + + ['left', 'right', 'up', 'down'].map( + direction => this.keyboard.on('shift+' + direction, + () => this.selectArea(getNextSelectionCursor(direction))) + ); + } + + bindCopyCellContents() { + this.keyboard.on('ctrl+c', () => { + this.copyCellContents(this.$focusedCell, this.$selectionCursor); + }); + } + + bindMouseEvents() { + let mouseDown = null; + + $.on(this.bodyScrollable, 'mousedown', '.data-table-col', (e) => { + mouseDown = true; + this.focusCell($(e.delegatedTarget)); + }); + + $.on(this.bodyScrollable, 'mouseup', () => { + mouseDown = false; + }); + + const selectArea = (e) => { + if (!mouseDown) return; + this.selectArea($(e.delegatedTarget)); + }; + + $.on(this.bodyScrollable, 'mousemove', '.data-table-col', throttle$1(selectArea, 50)); + } + + focusCell($cell, { skipClearSelection = 0 } = {}) { + if (!$cell) return; + + // don't focus if already editing cell + if ($cell === this.$editingCell) return; + + const { colIndex, isHeader } = $.data($cell); + if (isHeader) { + return; + } + + const column = this.columnmanager.getColumn(colIndex); + if (column.focusable === false) { + return; + } + + this.scrollToCell($cell); + + this.deactivateEditing(); + if (!skipClearSelection) { + this.clearSelection(); + } + + if (this.$focusedCell) { + this.$focusedCell.classList.remove('selected'); + } + + this.$focusedCell = $cell; + $cell.classList.add('selected'); + + // so that keyboard nav works + $cell.focus(); + + this.highlightRowColumnHeader($cell); + } + + highlightRowColumnHeader($cell) { + const { colIndex, rowIndex } = $.data($cell); + const _colIndex = this.datamanager.getColumnIndexById('_rowIndex'); + const colHeaderSelector = `.data-table-header .data-table-col[data-col-index="${colIndex}"]`; + const rowHeaderSelector = `.data-table-col[data-row-index="${rowIndex}"][data-col-index="${_colIndex}"]`; + + if (this.lastHeaders) { + $.removeStyle(this.lastHeaders, 'backgroundColor'); + } + + const colHeader = $(colHeaderSelector, this.wrapper); + const rowHeader = $(rowHeaderSelector, this.wrapper); + + $.style([colHeader, rowHeader], { + backgroundColor: '#f5f7fa' // light-bg + }); + + this.lastHeaders = [colHeader, rowHeader]; + } + + selectAreaOnClusterChanged() { + if (!(this.$focusedCell && this.$selectionCursor)) return; + const { colIndex, rowIndex } = $.data(this.$selectionCursor); + const $cell = this.getCell$(colIndex, rowIndex); + + if (!$cell || $cell === this.$selectionCursor) return; + + // selectArea needs $focusedCell + const fCell = $.data(this.$focusedCell); + this.$focusedCell = this.getCell$(fCell.colIndex, fCell.rowIndex); + + this.selectArea($cell); + } + + focusCellOnClusterChanged() { + if (!this.$focusedCell) return; + + const { colIndex, rowIndex } = $.data(this.$focusedCell); + const $cell = this.getCell$(colIndex, rowIndex); + + if (!$cell) return; + // this function is called after selectAreaOnClusterChanged, + // focusCell calls clearSelection which resets the area selection + // so a flag to skip it + this.focusCell($cell, { skipClearSelection: 1 }); + } + + selectArea($selectionCursor) { + if (!this.$focusedCell) return; + + if (this._selectArea(this.$focusedCell, $selectionCursor)) { + // valid selection + this.$selectionCursor = $selectionCursor; + } + }; + + _selectArea($cell1, $cell2) { + if ($cell1 === $cell2) return false; + + const cells = this.getCellsInRange($cell1, $cell2); + if (!cells) return false; + + this.clearSelection(); + cells.map(index => this.getCell$(...index)).map($cell => $cell.classList.add('highlight')); + return true; + } + + getCellsInRange($cell1, $cell2) { + let colIndex1, rowIndex1, colIndex2, rowIndex2; + + if (typeof $cell1 === 'number') { + [colIndex1, rowIndex1, colIndex2, rowIndex2] = arguments; + } else + if (typeof $cell1 === 'object') { + + if (!($cell1 && $cell2)) { + return false; + } + + const cell1 = $.data($cell1); + const cell2 = $.data($cell2); + + colIndex1 = cell1.colIndex; + rowIndex1 = cell1.rowIndex; + colIndex2 = cell2.colIndex; + rowIndex2 = cell2.rowIndex; + } + + if (rowIndex1 > rowIndex2) { + [rowIndex1, rowIndex2] = [rowIndex2, rowIndex1]; + } + + if (colIndex1 > colIndex2) { + [colIndex1, colIndex2] = [colIndex2, colIndex1]; + } + + if (this.isStandardCell(colIndex1) || this.isStandardCell(colIndex2)) { + return false; + } + + let cells = []; + let colIndex = colIndex1; + let rowIndex = rowIndex1; + let rowIndices = []; + + while (rowIndex <= rowIndex2) { + rowIndices.push(rowIndex); + rowIndex++; + } + + rowIndices.map(rowIndex => { + while (colIndex <= colIndex2) { + cells.push([colIndex, rowIndex]); + colIndex++; + } + colIndex = colIndex1; + }); + + return cells; + } + + clearSelection() { + $.each('.data-table-col.highlight', this.bodyScrollable) + .map(cell => cell.classList.remove('highlight')); + + this.$selectionCursor = null; + } + + getSelectionCursor() { + return this.$selectionCursor || this.$focusedCell; + } + + activateEditing($cell) { + this.focusCell($cell); + const { rowIndex, colIndex } = $.data($cell); + + const col = this.columnmanager.getColumn(colIndex); + if (col && (col.editable === false || col.focusable === false)) { + return; + } + + const cell = this.getCell(colIndex, rowIndex); + if (cell && cell.editable === false) { + return; + } + + if (this.$editingCell) { + const { _rowIndex, _colIndex } = $.data(this.$editingCell); + + if (rowIndex === _rowIndex && colIndex === _colIndex) { + // editing the same cell return; } + } - var cell = this.getCell(colIndex, rowIndex); - if (cell && cell.editable === false) { - return; - } + const $editCell = $('.edit-cell', $cell); + $editCell.innerHTML = ''; - if (this.$editingCell) { - var _$$data7 = _dom2.default.data(this.$editingCell), - _rowIndex = _$$data7._rowIndex, - _colIndex = _$$data7._colIndex; - - if (rowIndex === _rowIndex && colIndex === _colIndex) { - // editing the same cell - return; - } - } + const editor = this.getEditor(colIndex, rowIndex, cell.content, $editCell); + if (editor) { this.$editingCell = $cell; $cell.classList.add('editing'); - var $editCell = (0, _dom2.default)('.edit-cell', $cell); - $editCell.innerHTML = ''; + this.currentCellEditor = editor; + // initialize editing input with cell value + editor.initValue(cell.content, rowIndex, col); + } + } - var editor = this.getEditor(colIndex, rowIndex, cell.content, $editCell); + deactivateEditing() { + // keep focus on the cell so that keyboard navigation works + if (this.$focusedCell) this.$focusedCell.focus(); + + if (!this.$editingCell) return; + this.$editingCell.classList.remove('editing'); + this.$editingCell = null; + } + + getEditor(colIndex, rowIndex, value, parent) { + // debugger; + const obj = this.options.getEditor(colIndex, rowIndex, value, parent); + if (obj && obj.setValue) return obj; + + // let the getEditor method determine dynamically + // if the cell is editable or not + if (obj === false) return null; + + // editing fallback + const $input = $.create('input', { + class: 'input-style', + type: 'text', + inside: parent + }); + + return { + initValue(value) { + $input.focus(); + $input.value = value; + }, + getValue() { + return $input.value; + }, + setValue(value) { + $input.value = value; + } + }; + } + + submitEditing() { + if (!this.$editingCell) return; + const $cell = this.$editingCell; + const { rowIndex, colIndex } = $.data($cell); + const col = this.datamanager.getColumn(colIndex); + + if ($cell) { + const editor = this.currentCellEditor; if (editor) { - this.currentCellEditor = editor; - // initialize editing input with cell value - editor.initValue(cell.content, rowIndex, col); - } - } - }, { - key: 'deactivateEditing', - value: function deactivateEditing() { - // keep focus on the cell so that keyboard navigation works - if (this.$focusedCell) this.$focusedCell.focus(); + const value = editor.getValue(); + const done = editor.setValue(value, rowIndex, col); + const oldValue = this.getCell(colIndex, rowIndex).content; - if (!this.$editingCell) return; - this.$editingCell.classList.remove('editing'); - this.$editingCell = null; - } - }, { - key: 'getEditor', - value: function getEditor(colIndex, rowIndex, value, parent) { - // debugger; - var obj = this.options.getEditor(colIndex, rowIndex, value, parent); - if (obj && obj.setValue) return obj; + // update cell immediately + this.updateCell(colIndex, rowIndex, value); + $cell.focus(); - // editing fallback - var $input = _dom2.default.create('input', { - type: 'text', - inside: parent - }); - - return { - initValue: function initValue(value) { - $input.focus(); - $input.value = value; - }, - getValue: function getValue() { - return $input.value; - }, - setValue: function setValue(value) { - $input.value = value; - } - }; - } - }, { - key: 'submitEditing', - value: function submitEditing() { - var _this7 = this; - - if (!this.$editingCell) return; - var $cell = this.$editingCell; - - var _$$data8 = _dom2.default.data($cell), - rowIndex = _$$data8.rowIndex, - colIndex = _$$data8.colIndex; - - var col = this.datamanager.getColumn(colIndex); - - if ($cell) { - var editor = this.currentCellEditor; - - if (editor) { - var value = editor.getValue(); - var done = editor.setValue(value, rowIndex, col); - var oldValue = this.getCell(colIndex, rowIndex).content; - - // update cell immediately - this.updateCell(colIndex, rowIndex, value); - $cell.focus(); - - if (done && done.then) { - // revert to oldValue if promise fails - done.catch(function (e) { - console.log(e); - _this7.updateCell(colIndex, rowIndex, oldValue); - }); - } + if (done && done.then) { + // revert to oldValue if promise fails + done.catch((e) => { + console.log(e); + this.updateCell(colIndex, rowIndex, oldValue); + }); } } - - this.currentCellEditor = null; } - }, { - key: 'copyCellContents', - value: function copyCellContents($cell1, $cell2) { - var _this8 = this; - if (!$cell2 && $cell1) { - // copy only focusedCell - var _$$data9 = _dom2.default.data($cell1), - colIndex = _$$data9.colIndex, - rowIndex = _$$data9.rowIndex; + this.currentCellEditor = null; + } - var cell = this.getCell(colIndex, rowIndex); - (0, _utils.copyTextToClipboard)(cell.content); - return; - } - var cells = this.getCellsInRange($cell1, $cell2); + copyCellContents($cell1, $cell2) { + if (!$cell2 && $cell1) { + // copy only focusedCell + const { colIndex, rowIndex } = $.data($cell1); + const cell = this.getCell(colIndex, rowIndex); + copyTextToClipboard(cell.content); + return; + } + const cells = this.getCellsInRange($cell1, $cell2); - if (!cells) return; + if (!cells) return; - var values = cells + const values = cells // get cell objects - .map(function (index) { - return _this8.getCell.apply(_this8, _toConsumableArray(index)); - }) + .map(index => this.getCell(...index)) // convert to array of rows - .reduce(function (acc, curr) { - var rowIndex = curr.rowIndex; + .reduce((acc, curr) => { + const rowIndex = curr.rowIndex; acc[rowIndex] = acc[rowIndex] || []; acc[rowIndex].push(curr.content); @@ -46593,470 +46439,376 @@ var CellManager = function () { return acc; }, []) // join values by tab - .map(function (row) { - return row.join('\t'); - }) + .map(row => row.join('\t')) // join rows by newline .join('\n'); - (0, _utils.copyTextToClipboard)(values); + copyTextToClipboard(values); + } + + activateFilter(colIndex) { + this.columnmanager.toggleFilter(); + this.columnmanager.focusFilter(colIndex); + + if (!this.columnmanager.isFilterShown) { + // put focus back on cell + this.$focusedCell.focus(); } - }, { - key: 'updateCell', - value: function updateCell(colIndex, rowIndex, value) { - var cell = this.datamanager.updateCell(colIndex, rowIndex, { - content: value - }); - this.refreshCell(cell); + } + + updateCell(colIndex, rowIndex, value) { + const cell = this.datamanager.updateCell(colIndex, rowIndex, { + content: value + }); + this.refreshCell(cell); + } + + refreshCell(cell) { + const $cell = $(this.cellSelector(cell.colIndex, cell.rowIndex), this.bodyScrollable); + $cell.innerHTML = this.getCellContent(cell); + } + + isStandardCell(colIndex) { + // Standard cells are in Sr. No and Checkbox column + return colIndex < this.columnmanager.getFirstColumnIndex(); + } + + getCell$(colIndex, rowIndex) { + return $(this.cellSelector(colIndex, rowIndex), this.bodyScrollable); + } + + getAboveCell$($cell) { + const { colIndex } = $.data($cell); + const $aboveRow = $cell.parentElement.previousElementSibling; + + return $(`[data-col-index="${colIndex}"]`, $aboveRow); + } + + getBelowCell$($cell) { + const { colIndex } = $.data($cell); + const $belowRow = $cell.parentElement.nextElementSibling; + + return $(`[data-col-index="${colIndex}"]`, $belowRow); + } + + getLeftCell$($cell) { + return $cell.previousElementSibling; + } + + getRightCell$($cell) { + return $cell.nextElementSibling; + } + + getLeftMostCell$(rowIndex) { + return this.getCell$(this.columnmanager.getFirstColumnIndex(), rowIndex); + } + + getRightMostCell$(rowIndex) { + return this.getCell$(this.columnmanager.getLastColumnIndex(), rowIndex); + } + + getTopMostCell$(colIndex) { + return this.getCell$(colIndex, this.rowmanager.getFirstRowIndex()); + } + + getBottomMostCell$(colIndex) { + return this.getCell$(colIndex, this.rowmanager.getLastRowIndex()); + } + + getCell(colIndex, rowIndex) { + return this.instance.datamanager.getCell(colIndex, rowIndex); + } + + getCellAttr($cell) { + return this.instance.getCellAttr($cell); + } + + getRowHeight() { + return $.style($('.data-table-row', this.bodyScrollable), 'height'); + } + + scrollToCell($cell) { + if ($.inViewport($cell, this.bodyScrollable)) return false; + + const { rowIndex } = $.data($cell); + this.rowmanager.scrollToRow(rowIndex); + return false; + } + + getRowCountPerPage() { + return Math.ceil(this.instance.getViewportHeight() / this.getRowHeight()); + } + + getCellHTML(cell) { + const { rowIndex, colIndex, isHeader, isFilter } = cell; + const dataAttr = makeDataAttributeString({ + rowIndex, + colIndex, + isHeader, + isFilter + }); + + return ` + + ${this.getCellContent(cell)} + + `; + } + + getCellContent(cell) { + const { isHeader } = cell; + + const editable = !isHeader && cell.editable !== false; + const editCellHTML = editable ? this.getEditCellHTML() : ''; + + const sortable = isHeader && cell.sortable !== false; + const sortIndicator = sortable ? '' : ''; + + const resizable = isHeader && cell.resizable !== false; + const resizeColumn = resizable ? '' : ''; + + const hasDropdown = isHeader && cell.dropdown !== false; + const dropdown = hasDropdown ? `
${getDropdownHTML()}
` : ''; + + let contentHTML; + if (cell.isHeader || cell.isFilter || !cell.column.format) { + contentHTML = cell.content; + } else { + contentHTML = cell.column.format(cell.content, cell); } - }, { - key: 'refreshCell', - value: function refreshCell(cell) { - var $cell = (0, _dom2.default)(this.cellSelector(cell.colIndex, cell.rowIndex), this.bodyScrollable); - $cell.innerHTML = this.getCellContent(cell); - } - }, { - key: 'isStandardCell', - value: function isStandardCell(colIndex) { - // Standard cells are in Sr. No and Checkbox column - return colIndex < this.columnmanager.getFirstColumnIndex(); - } - }, { - key: 'getCell$', - value: function getCell$(colIndex, rowIndex) { - return (0, _dom2.default)(this.cellSelector(colIndex, rowIndex), this.bodyScrollable); - } - }, { - key: 'getAboveCell$', - value: function getAboveCell$($cell) { - var _$$data10 = _dom2.default.data($cell), - colIndex = _$$data10.colIndex; - var $aboveRow = $cell.parentElement.previousElementSibling; + return ` +
+ ${(contentHTML)} + ${sortIndicator} + ${resizeColumn} + ${dropdown} +
+ ${editCellHTML} + `; + } - return (0, _dom2.default)('[data-col-index="' + colIndex + '"]', $aboveRow); - } - }, { - key: 'getBelowCell$', - value: function getBelowCell$($cell) { - var _$$data11 = _dom2.default.data($cell), - colIndex = _$$data11.colIndex; + getEditCellHTML() { + return ` +
+ `; + } - var $belowRow = $cell.parentElement.nextElementSibling; - - return (0, _dom2.default)('[data-col-index="' + colIndex + '"]', $belowRow); - } - }, { - key: 'getLeftCell$', - value: function getLeftCell$($cell) { - return $cell.previousElementSibling; - } - }, { - key: 'getRightCell$', - value: function getRightCell$($cell) { - return $cell.nextElementSibling; - } - }, { - key: 'getLeftMostCell$', - value: function getLeftMostCell$(rowIndex) { - return this.getCell$(this.columnmanager.getFirstColumnIndex(), rowIndex); - } - }, { - key: 'getRightMostCell$', - value: function getRightMostCell$(rowIndex) { - return this.getCell$(this.columnmanager.getLastColumnIndex(), rowIndex); - } - }, { - key: 'getTopMostCell$', - value: function getTopMostCell$(colIndex) { - return this.getCell$(colIndex, this.rowmanager.getFirstRowIndex()); - } - }, { - key: 'getBottomMostCell$', - value: function getBottomMostCell$(colIndex) { - return this.getCell$(colIndex, this.rowmanager.getLastRowIndex()); - } - }, { - key: 'getCell', - value: function getCell(colIndex, rowIndex) { - return this.instance.datamanager.getCell(colIndex, rowIndex); - } - }, { - key: 'getCellAttr', - value: function getCellAttr($cell) { - return this.instance.getCellAttr($cell); - } - }, { - key: 'getRowHeight', - value: function getRowHeight() { - return _dom2.default.style((0, _dom2.default)('.data-table-row', this.bodyScrollable), 'height'); - } - }, { - key: 'scrollToCell', - value: function scrollToCell($cell) { - if (_dom2.default.inViewport($cell, this.bodyScrollable)) return false; - - var _$$data12 = _dom2.default.data($cell), - rowIndex = _$$data12.rowIndex; - - this.rowmanager.scrollToRow(rowIndex); - return false; - } - }, { - key: 'getRowCountPerPage', - value: function getRowCountPerPage() { - return Math.ceil(this.instance.getViewportHeight() / this.getRowHeight()); - } - }, { - key: 'getCellHTML', - value: function getCellHTML(cell) { - var rowIndex = cell.rowIndex, - colIndex = cell.colIndex, - isHeader = cell.isHeader; - - var dataAttr = (0, _utils.makeDataAttributeString)({ - rowIndex: rowIndex, - colIndex: colIndex, - isHeader: isHeader - }); - - return '\n \n ' + this.getCellContent(cell) + '\n \n '; - } - }, { - key: 'getCellContent', - value: function getCellContent(cell) { - var isHeader = cell.isHeader; - - - var editable = !isHeader && cell.editable !== false; - var editCellHTML = editable ? this.getEditCellHTML() : ''; - - var sortable = isHeader && cell.sortable !== false; - var sortIndicator = sortable ? '' : ''; - - var resizable = isHeader && cell.resizable !== false; - var resizeColumn = resizable ? '' : ''; - - var hasDropdown = isHeader && cell.dropdown !== false; - var dropdown = hasDropdown ? '
' + (0, _columnmanager.getDropdownHTML)() + '
' : ''; - - var contentHTML = !cell.isHeader && cell.column.format ? cell.column.format(cell.content) : cell.content; - - return '\n
\n ' + contentHTML + '\n ' + sortIndicator + '\n ' + resizeColumn + '\n ' + dropdown + '\n
\n ' + editCellHTML + '\n '; - } - }, { - key: 'getEditCellHTML', - value: function getEditCellHTML() { - return '\n
\n '; - } - }, { - key: 'cellSelector', - value: function cellSelector(colIndex, rowIndex) { - return '.data-table-col[data-col-index="' + colIndex + '"][data-row-index="' + rowIndex + '"]'; - } - }]); - - return CellManager; -}(); - -exports.default = CellManager; -module.exports = exports['default']; - -/***/ }), -/* 7 */ -/***/ (function(module, exports) { - -module.exports = __WEBPACK_EXTERNAL_MODULE_7__; - -/***/ }), -/* 8 */ -/***/ (function(module, exports, __webpack_require__) { - -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; }; }(); - -var _dom = __webpack_require__(0); - -var _dom2 = _interopRequireDefault(_dom); - -var _utils = __webpack_require__(1); - -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 RowManager = function () { - function RowManager(instance) { - _classCallCheck(this, RowManager); + cellSelector(colIndex, rowIndex) { + return `.data-table-col[data-col-index="${colIndex}"][data-row-index="${rowIndex}"]`; + } +} +class RowManager { + constructor(instance) { this.instance = instance; this.options = this.instance.options; this.wrapper = this.instance.wrapper; this.bodyScrollable = this.instance.bodyScrollable; this.bindEvents(); - this.refreshRows = (0, _utils.promisify)(this.refreshRows, this); + this.refreshRows = promisify(this.refreshRows, this); } - _createClass(RowManager, [{ - key: 'bindEvents', - value: function bindEvents() { - this.bindCheckbox(); - } - }, { - key: 'bindCheckbox', - value: function bindCheckbox() { - var _this = this; + get datamanager() { + return this.instance.datamanager; + } - if (!this.options.addCheckboxColumn) return; + get cellmanager() { + return this.instance.cellmanager; + } - // map of checked rows - this.checkMap = []; + bindEvents() { + this.bindCheckbox(); + } - _dom2.default.on(this.wrapper, 'click', '.data-table-col[data-col-index="0"] [type="checkbox"]', function (e, $checkbox) { - var $cell = $checkbox.closest('.data-table-col'); + bindCheckbox() { + if (!this.options.addCheckboxColumn) return; - var _$$data = _dom2.default.data($cell), - rowIndex = _$$data.rowIndex, - isHeader = _$$data.isHeader; + // map of checked rows + this.checkMap = []; - var checked = $checkbox.checked; + $.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 } = $.data($cell); + const checked = $checkbox.checked; - if (isHeader) { - _this.checkAll(checked); - } else { - _this.checkRow(rowIndex, checked); - } - }); - } - }, { - key: 'refreshRows', - value: function refreshRows() { - this.instance.renderBody(); - this.instance.setDimensions(); - } - }, { - key: 'refreshRow', - value: function refreshRow(row, rowIndex) { - var _this2 = this; - - var _row = this.datamanager.updateRow(row, rowIndex); - - _row.forEach(function (cell) { - _this2.cellmanager.refreshCell(cell); - }); - } - }, { - key: 'getCheckedRows', - value: function getCheckedRows() { - if (!this.checkMap) { - return []; + if (isHeader) { + this.checkAll(checked); + } else { + this.checkRow(rowIndex, checked); } + }); + } - return this.checkMap.map(function (c, rowIndex) { + refreshRows() { + this.instance.renderBody(); + this.instance.setDimensions(); + } + + refreshRow(row, rowIndex) { + const _row = this.datamanager.updateRow(row, rowIndex); + + _row.forEach(cell => { + this.cellmanager.refreshCell(cell); + }); + } + + getCheckedRows() { + if (!this.checkMap) { + return []; + } + + return this.checkMap + .map((c, rowIndex) => { if (c) { return rowIndex; } return null; - }).filter(function (c) { + }) + .filter(c => { return c !== null || c !== undefined; }); - } - }, { - key: 'highlightCheckedRows', - value: function highlightCheckedRows() { - var _this3 = this; + } - this.getCheckedRows().map(function (rowIndex) { - return _this3.checkRow(rowIndex, true); - }); - } - }, { - key: 'checkRow', - value: function checkRow(rowIndex, toggle) { - var value = toggle ? 1 : 0; + highlightCheckedRows() { + this.getCheckedRows() + .map(rowIndex => this.checkRow(rowIndex, true)); + } - // update internal map - this.checkMap[rowIndex] = value; - // set checkbox value explicitly - _dom2.default.each('.data-table-col[data-row-index="' + rowIndex + '"][data-col-index="0"] [type="checkbox"]', this.bodyScrollable).map(function (input) { + checkRow(rowIndex, toggle) { + const value = toggle ? 1 : 0; + + // update internal map + this.checkMap[rowIndex] = value; + // set checkbox value explicitly + $.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); - } - }, { - key: 'checkAll', - value: function checkAll(toggle) { - var value = toggle ? 1 : 0; + // highlight row + this.highlightRow(rowIndex, toggle); + } - // update internal map - if (toggle) { - this.checkMap = Array.from(Array(this.getTotalRows())).map(function (c) { - return value; - }); - } else { - this.checkMap = []; - } - // set checkbox value - _dom2.default.each('.data-table-col[data-col-index="0"] [type="checkbox"]', this.bodyScrollable).map(function (input) { + checkAll(toggle) { + const value = toggle ? 1 : 0; + + // update internal map + if (toggle) { + this.checkMap = Array.from(Array(this.getTotalRows())).map(c => value); + } else { + this.checkMap = []; + } + // set checkbox value + $.each('.data-table-col[data-col-index="0"] [type="checkbox"]', this.bodyScrollable) + .map(input => { input.checked = toggle; }); - // highlight all - this.highlightAll(toggle); + // highlight all + this.highlightAll(toggle); + } + + highlightRow(rowIndex, toggle = true) { + const $row = this.getRow$(rowIndex); + if (!$row) return; + + if (!toggle && this.bodyScrollable.classList.contains('row-highlight-all')) { + $row.classList.add('row-unhighlight'); + return; } - }, { - key: 'highlightRow', - value: function highlightRow(rowIndex) { - var toggle = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true; - var $row = this.getRow$(rowIndex); - if (!$row) return; + if (toggle && $row.classList.contains('row-unhighlight')) { + $row.classList.remove('row-unhighlight'); + } - if (!toggle && this.bodyScrollable.classList.contains('row-highlight-all')) { - $row.classList.add('row-unhighlight'); - return; - } + this._highlightedRows = this._highlightedRows || {}; - if (toggle && $row.classList.contains('row-unhighlight')) { - $row.classList.remove('row-unhighlight'); - } + if (toggle) { + $row.classList.add('row-highlight'); + this._highlightedRows[rowIndex] = $row; + } else { + $row.classList.remove('row-highlight'); + delete this._highlightedRows[rowIndex]; + } + } - this._highlightedRows = this._highlightedRows || {}; - - if (toggle) { - $row.classList.add('row-highlight'); - this._highlightedRows[rowIndex] = $row; - } else { + highlightAll(toggle = true) { + if (toggle) { + this.bodyScrollable.classList.add('row-highlight-all'); + } else { + this.bodyScrollable.classList.remove('row-highlight-all'); + for (const rowIndex in this._highlightedRows) { + const $row = this._highlightedRows[rowIndex]; $row.classList.remove('row-highlight'); - delete this._highlightedRows[rowIndex]; } + this._highlightedRows = {}; } - }, { - key: 'highlightAll', - value: function highlightAll() { - var toggle = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true; + } - if (toggle) { - this.bodyScrollable.classList.add('row-highlight-all'); - } else { - this.bodyScrollable.classList.remove('row-highlight-all'); - for (var rowIndex in this._highlightedRows) { - var $row = this._highlightedRows[rowIndex]; - $row.classList.remove('row-highlight'); - } - this._highlightedRows = {}; - } + getRow$(rowIndex) { + return $(`.data-table-row[data-row-index="${rowIndex}"]`, this.bodyScrollable); + } + + getTotalRows() { + return this.datamanager.getRowCount(); + } + + getFirstRowIndex() { + return 0; + } + + getLastRowIndex() { + return this.datamanager.getRowCount() - 1; + } + + scrollToRow(rowIndex) { + rowIndex = +rowIndex; + this._lastScrollTo = this._lastScrollTo || 0; + const $row = this.getRow$(rowIndex); + if ($.inViewport($row, this.bodyScrollable)) return; + + const { height } = $row.getBoundingClientRect(); + const { top, bottom } = this.bodyScrollable.getBoundingClientRect(); + const rowsInView = Math.floor((bottom - top) / height); + + let offset = 0; + if (rowIndex > this._lastScrollTo) { + offset = height * ((rowIndex + 1) - rowsInView); + } else { + offset = height * ((rowIndex + 1) - 1); } - }, { - key: 'getRow$', - value: function getRow$(rowIndex) { - return (0, _dom2.default)('.data-table-row[data-row-index="' + rowIndex + '"]', this.bodyScrollable); + + this._lastScrollTo = rowIndex; + $.scrollTop(this.bodyScrollable, offset); + } + + getRowHTML(row, props) { + const dataAttr = makeDataAttributeString(props); + + if (props.isFilter) { + row = row.map(cell => (Object.assign(cell, { + content: this.getFilterInput({ colIndex: cell.colIndex }), + isFilter: 1, + isHeader: undefined, + editable: false + }))); } - }, { - key: 'getTotalRows', - value: function getTotalRows() { - return this.datamanager.getRowCount(); - } - }, { - key: 'getFirstRowIndex', - value: function getFirstRowIndex() { - return 0; - } - }, { - key: 'getLastRowIndex', - value: function getLastRowIndex() { - return this.datamanager.getRowCount() - 1; - } - }, { - key: 'scrollToRow', - value: function scrollToRow(rowIndex) { - rowIndex = +rowIndex; - this._lastScrollTo = this._lastScrollTo || 0; - var $row = this.getRow$(rowIndex); - if (_dom2.default.inViewport($row, this.bodyScrollable)) return; - var _$row$getBoundingClie = $row.getBoundingClientRect(), - height = _$row$getBoundingClie.height; + return ` + + ${row.map(cell => this.cellmanager.getCellHTML(cell)).join('')} + + `; + } - var _bodyScrollable$getBo = this.bodyScrollable.getBoundingClientRect(), - top = _bodyScrollable$getBo.top, - bottom = _bodyScrollable$getBo.bottom; - - var rowsInView = Math.floor((bottom - top) / height); - - var offset = 0; - if (rowIndex > this._lastScrollTo) { - offset = height * (rowIndex + 1 - rowsInView); - } else { - offset = height * (rowIndex + 1 - 1); - } - - this._lastScrollTo = rowIndex; - _dom2.default.scrollTop(this.bodyScrollable, offset); - } - }, { - key: 'getRowHTML', - value: function getRowHTML(row, props) { - var _this4 = this; - - var dataAttr = (0, _utils.makeDataAttributeString)(props); - - return '\n \n ' + row.map(function (cell) { - return _this4.cellmanager.getCellHTML(cell); - }).join('') + '\n \n '; - } - }, { - key: 'datamanager', - get: function get() { - return this.instance.datamanager; - } - }, { - key: 'cellmanager', - get: function get() { - return this.instance.cellmanager; - } - }]); - - return RowManager; -}(); - -exports.default = RowManager; -module.exports = exports['default']; - -/***/ }), -/* 9 */ -/***/ (function(module, exports, __webpack_require__) { - -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; }; }(); - -exports.getBodyHTML = getBodyHTML; - -var _dom = __webpack_require__(0); - -var _dom2 = _interopRequireDefault(_dom); - -var _clusterize = __webpack_require__(10); - -var _clusterize2 = _interopRequireDefault(_clusterize); - -var _utils = __webpack_require__(1); - -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 BodyRenderer = function () { - function BodyRenderer(instance) { - _classCallCheck(this, BodyRenderer); + getFilterInput(props) { + const dataAttr = makeDataAttributeString(props); + return ``; + } +} +class BodyRenderer { + constructor(instance) { this.instance = instance; this.options = instance.options; this.datamanager = instance.datamanager; @@ -47064,142 +46816,105 @@ var BodyRenderer = function () { this.cellmanager = instance.cellmanager; this.bodyScrollable = instance.bodyScrollable; this.log = instance.log; - this.appendRemainingData = (0, _utils.promisify)(this.appendRemainingData, this); + this.appendRemainingData = promisify(this.appendRemainingData, this); } - _createClass(BodyRenderer, [{ - key: 'render', - value: function render() { - if (this.options.enableClusterize) { - this.renderBodyWithClusterize(); - } else { - this.renderBodyHTML(); - } + render() { + if (this.options.enableClusterize) { + this.renderBodyWithClusterize(); + } else { + this.renderBodyHTML(); } - }, { - key: 'renderBodyHTML', - value: function renderBodyHTML() { - var rows = this.datamanager.getRows(); + } - this.bodyScrollable.innerHTML = '\n \n ' + getBodyHTML(rows) + '\n
\n '; - this.instance.setDimensions(); - this.restoreState(); - } - }, { - key: 'renderBodyWithClusterize', - value: function renderBodyWithClusterize() { - var _this = this; + renderBodyHTML() { + const rows = this.datamanager.getRows(); - // first page - var rows = this.datamanager.getRows(0, 20); - var initialData = this.getDataForClusterize(rows); + this.bodyScrollable.innerHTML = ` + + ${getBodyHTML(rows)} +
+ `; + this.instance.setDimensions(); + this.restoreState(); + } - if (!this.clusterize) { - // empty body - this.bodyScrollable.innerHTML = '\n \n ' + getBodyHTML([]) + '\n
\n '; + renderBodyWithClusterize() { + // first page + const rows = this.datamanager.getRows(0, 20); + const initialData = this.getDataForClusterize(rows); - // first 20 rows will appended - // rest of them in nextTick - this.clusterize = new _clusterize2.default({ - rows: initialData, - scrollElem: this.bodyScrollable, - contentElem: (0, _dom2.default)('tbody', this.bodyScrollable), - callbacks: { - clusterChanged: function clusterChanged() { - _this.restoreState(); - } - }, - /* eslint-disable */ - no_data_text: this.options.noDataMessage, - no_data_class: 'empty-state' - /* eslint-enable */ - }); + if (!this.clusterize) { + // empty body + this.bodyScrollable.innerHTML = ` + + ${getBodyHTML([])} +
+ `; - // setDimensions requires atleast 1 row to exist in dom - this.instance.setDimensions(); - } else { - this.clusterize.update(initialData); - } - - this.appendRemainingData(); - } - }, { - key: 'restoreState', - value: function restoreState() { - this.rowmanager.highlightCheckedRows(); - this.cellmanager.selectAreaOnClusterChanged(); - this.cellmanager.focusCellOnClusterChanged(); - } - }, { - key: 'appendRemainingData', - value: function appendRemainingData() { - var rows = this.datamanager.getRows(20); - var data = this.getDataForClusterize(rows); - this.clusterize.append(data); - } - }, { - key: 'getDataForClusterize', - value: function getDataForClusterize(rows) { - var _this2 = this; - - return rows.map(function (row) { - return _this2.rowmanager.getRowHTML(row, { rowIndex: row[0].rowIndex }); + // first 20 rows will appended + // rest of them in nextTick + this.clusterize = new Clusterize({ + rows: initialData, + scrollElem: this.bodyScrollable, + contentElem: $('tbody', this.bodyScrollable), + callbacks: { + clusterChanged: () => { + this.restoreState(); + } + }, + /* eslint-disable */ + no_data_text: this.options.noDataMessage, + no_data_class: 'empty-state' + /* eslint-enable */ }); + + // setDimensions requires atleast 1 row to exist in dom + this.instance.setDimensions(); + } else { + this.clusterize.update(initialData); } - }]); - return BodyRenderer; -}(); + this.appendRemainingData(); + } -exports.default = BodyRenderer; + restoreState() { + this.rowmanager.highlightCheckedRows(); + this.cellmanager.selectAreaOnClusterChanged(); + this.cellmanager.focusCellOnClusterChanged(); + } + appendRemainingData() { + const rows = this.datamanager.getRows(20); + const data = this.getDataForClusterize(rows); + this.clusterize.append(data); + } + getDataForClusterize(rows) { + return rows.map((row) => this.rowmanager.getRowHTML(row, { rowIndex: row[0].rowIndex })); + } +} function getBodyHTML(rows) { - var _this3 = this; - - return '\n \n ' + rows.map(function (row) { - return _this3.rowmanager.getRowHTML(row, { rowIndex: row[0].rowIndex }); - }).join('') + '\n \n '; + return ` + + ${rows.map(row => this.rowmanager.getRowHTML(row, { rowIndex: row[0].rowIndex })).join('')} + + `; } -/***/ }), -/* 10 */ -/***/ (function(module, exports) { - -module.exports = __WEBPACK_EXTERNAL_MODULE_10__; - -/***/ }), -/* 11 */ -/***/ (function(module, exports, __webpack_require__) { - -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; }; }(); - -var _dom = __webpack_require__(0); - -var _dom2 = _interopRequireDefault(_dom); - -var _utils = __webpack_require__(1); - -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 Style = function () { - function Style(instance) { - _classCallCheck(this, Style); - +class Style { + constructor(instance) { this.instance = instance; - (0, _utils.linkProperties)(this, this.instance, ['options', 'datamanager', 'columnmanager', 'header', 'bodyScrollable', 'getColumn']); + linkProperties(this, this.instance, [ + 'options', 'datamanager', 'columnmanager', + 'header', 'bodyScrollable', 'getColumn' + ]); this.scopeClass = 'datatable-instance-' + instance.constructor.instances; instance.datatableWrapper.classList.add(this.scopeClass); - var styleEl = document.createElement('style'); + const styleEl = document.createElement('style'); instance.wrapper.insertBefore(styleEl, instance.datatableWrapper); this.styleEl = styleEl; this.styleSheet = styleEl.sheet; @@ -47207,260 +46922,216 @@ var Style = function () { this.bindResizeWindow(); } - _createClass(Style, [{ - key: 'bindResizeWindow', - value: function bindResizeWindow() { - var _this = this; - - if (this.options.layout === 'fluid') { - _dom2.default.on(window, 'resize', (0, _utils.throttle)(function () { - _this.distributeRemainingWidth(); - _this.refreshColumnWidth(); - _this.setBodyStyle(); - }, 300)); - } + bindResizeWindow() { + if (this.options.layout === 'fluid') { + $.on(window, 'resize', throttle$1(() => { + this.distributeRemainingWidth(); + this.refreshColumnWidth(); + this.setBodyStyle(); + }, 300)); } - }, { - key: 'destroy', - value: function destroy() { - this.styleEl.remove(); - } - }, { - key: 'setStyle', - value: function setStyle(rule, styleMap) { - var index = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : -1; + } - var styles = Object.keys(styleMap).map(function (prop) { + destroy() { + this.styleEl.remove(); + } + + setStyle(rule, styleMap, index = -1) { + const styles = Object.keys(styleMap) + .map(prop => { if (!prop.includes('-')) { - prop = (0, _utils.camelCaseToDash)(prop); + prop = camelCaseToDash(prop); } - return prop + ':' + styleMap[prop] + ';'; - }).join(''); - var ruleString = '.' + this.scopeClass + ' ' + rule + ' { ' + styles + ' }'; + return `${prop}:${styleMap[prop]};`; + }) + .join(''); + let ruleString = `.${this.scopeClass} ${rule} { ${styles} }`; - var _index = this.styleSheet.cssRules.length; - if (index !== -1) { - this.styleSheet.deleteRule(index); - _index = index; + let _index = this.styleSheet.cssRules.length; + if (index !== -1) { + this.styleSheet.deleteRule(index); + _index = index; + } + + this.styleSheet.insertRule(ruleString, _index); + return _index; + } + + setDimensions() { + this.setHeaderStyle(); + + this.setupMinWidth(); + this.setupNaturalColumnWidth(); + this.setupColumnWidth(); + + this.distributeRemainingWidth(); + this.setColumnStyle(); + this.setDefaultCellHeight(); + this.setBodyStyle(); + } + + setHeaderStyle() { + if (this.options.layout === 'fluid') { + // setting width as 0 will ensure that the + // header doesn't take the available space + $.style(this.header, { + width: 0 + }); + } + + $.style(this.header, { + margin: 0 + }); + + // don't show resize cursor on nonResizable columns + const nonResizableColumnsSelector = this.datamanager.getColumns() + .filter(col => col.resizable === false) + .map(col => col.colIndex) + .map(i => `.data-table-header [data-col-index="${i}"]`) + .join(); + + this.setStyle(nonResizableColumnsSelector, { + cursor: 'pointer' + }); + } + + setupMinWidth() { + $.each('.data-table-col[data-is-header]', this.header).map(col => { + const width = $.style($('.content', col), 'width'); + const { + colIndex + } = $.data(col); + const column = this.getColumn(colIndex); + + if (!column.minWidth) { + // only set this once + column.minWidth = width; + } + }); + } + + setupNaturalColumnWidth() { + if (!$('.data-table-row')) return; + + // set initial width as naturally calculated by table's first row + $.each('.data-table-row[data-row-index="0"] .data-table-col', this.bodyScrollable).map($cell => { + const { + colIndex + } = $.data($cell); + const column = this.datamanager.getColumn(colIndex); + + let naturalWidth = $.style($('.content', $cell), 'width'); + + if (column.id === '_rowIndex') { + // width based on rowCount + const rowCount = this.datamanager.getRowCount(); + const digits = (rowCount + '').length; + if (digits > 2) { + naturalWidth = naturalWidth + ((digits - 2) * 8); + } } - this.styleSheet.insertRule(ruleString, _index); - return _index; - } - }, { - key: 'setDimensions', - value: function setDimensions() { - this.setHeaderStyle(); + column.naturalWidth = naturalWidth; + }); + } - this.setupMinWidth(); - this.setupNaturalColumnWidth(); - this.setupColumnWidth(); - - this.distributeRemainingWidth(); - this.setColumnStyle(); - this.setDefaultCellHeight(); - this.setBodyStyle(); - } - }, { - key: 'setHeaderStyle', - value: function setHeaderStyle() { - if (this.options.layout === 'fluid') { - // setting width as 0 will ensure that the - // header doesn't take the available space - _dom2.default.style(this.header, { - width: 0 - }); - } - - _dom2.default.style(this.header, { - margin: 0 - }); - - // don't show resize cursor on nonResizable columns - var nonResizableColumnsSelector = this.datamanager.getColumns().filter(function (col) { - return col.resizable === false; - }).map(function (col) { - return col.colIndex; - }).map(function (i) { - return '.data-table-header [data-col-index="' + i + '"]'; - }).join(); - - this.setStyle(nonResizableColumnsSelector, { - cursor: 'pointer' - }); - } - }, { - key: 'setupMinWidth', - value: function setupMinWidth() { - var _this2 = this; - - _dom2.default.each('.data-table-col', this.header).map(function (col) { - var width = _dom2.default.style((0, _dom2.default)('.content', col), 'width'); - - var _$$data = _dom2.default.data(col), - colIndex = _$$data.colIndex; - - var column = _this2.getColumn(colIndex); - - if (!column.minWidth) { - // only set this once - column.minWidth = width; - } - }); - } - }, { - key: 'setupNaturalColumnWidth', - value: function setupNaturalColumnWidth() { - var _this3 = this; - - if (!(0, _dom2.default)('.data-table-row')) return; - - // set initial width as naturally calculated by table's first row - _dom2.default.each('.data-table-row[data-row-index="0"] .data-table-col', this.bodyScrollable).map(function ($cell) { - var _$$data2 = _dom2.default.data($cell), - colIndex = _$$data2.colIndex; - - var column = _this3.datamanager.getColumn(colIndex); - - var naturalWidth = _dom2.default.style((0, _dom2.default)('.content', $cell), 'width'); - column.naturalWidth = naturalWidth; - }); - } - }, { - key: 'setupColumnWidth', - value: function setupColumnWidth() { - this.datamanager.getColumns().map(function (column) { - if (column.width === null) { + setupColumnWidth() { + this.datamanager.getColumns() + .map(column => { + if (!column.width) { column.width = column.naturalWidth; } if (column.width < column.minWidth) { column.width = column.minWidth; } }); - } - }, { - key: 'distributeRemainingWidth', - value: function distributeRemainingWidth() { - var _this4 = this; + } - if (this.options.layout !== 'fluid') return; + distributeRemainingWidth() { + if (this.options.layout !== 'fluid') return; - var wrapperWidth = _dom2.default.style(this.instance.datatableWrapper, 'width'); - var headerWidth = _dom2.default.style(this.header, 'width'); - var resizableColumns = this.datamanager.getColumns().filter(function (col) { - return col.resizable; + const wrapperWidth = $.style(this.instance.datatableWrapper, 'width'); + const headerWidth = $.style(this.header, 'width'); + const resizableColumns = this.datamanager.getColumns().filter(col => col.resizable); + const deltaWidth = (wrapperWidth - headerWidth) / resizableColumns.length; + + resizableColumns.map(col => { + const width = $.style(this.getColumnHeaderElement(col.colIndex), 'width'); + let finalWidth = Math.floor(width + deltaWidth) - 2; + + this.datamanager.updateColumn(col.colIndex, { + width: finalWidth }); - var deltaWidth = (wrapperWidth - headerWidth) / resizableColumns.length; + }); + } - resizableColumns.map(function (col) { - var width = _dom2.default.style(_this4.getColumnHeaderElement(col.colIndex), 'width'); - var finalWidth = Math.floor(width + deltaWidth) - 2; + setDefaultCellHeight() { + if (this.__cellHeightSet) return; + const height = this.options.cellHeight || $.style($('.data-table-col', this.instance.datatableWrapper), 'height'); + if (height) { + this.setCellHeight(height); + this.__cellHeightSet = true; + } + } - _this4.datamanager.updateColumn(col.colIndex, { - width: finalWidth - }); - }); - } - }, { - key: 'setDefaultCellHeight', - value: function setDefaultCellHeight() { - if (this.__cellHeightSet) return; - var height = _dom2.default.style((0, _dom2.default)('.data-table-col', this.instance.datatableWrapper), 'height'); - if (height) { - this.setCellHeight(height); - this.__cellHeightSet = true; - } - } - }, { - key: 'setCellHeight', - value: function setCellHeight(height) { - this.setStyle('.data-table-col .content', { - height: height + 'px' - }); - this.setStyle('.data-table-col .edit-cell', { - height: height + 'px' - }); - } - }, { - key: 'setColumnStyle', - value: function setColumnStyle() { - var _this5 = this; + setCellHeight(height) { + this.setStyle('.data-table-col .content', { + height: height + 'px' + }); + this.setStyle('.data-table-col .edit-cell', { + height: height + 'px' + }); + } - // align columns - this.datamanager.getColumns().map(function (column) { + setColumnStyle() { + // align columns + this.datamanager.getColumns() + .map(column => { // alignment if (['left', 'center', 'right'].includes(column.align)) { - _this5.setStyle('[data-col-index="' + column.colIndex + '"]', { + this.setStyle(`[data-col-index="${column.colIndex}"]`, { 'text-align': column.align }); } // width - _this5.columnmanager.setColumnHeaderWidth(column.colIndex); - _this5.columnmanager.setColumnWidth(column.colIndex); + this.columnmanager.setColumnHeaderWidth(column.colIndex); + this.columnmanager.setColumnWidth(column.colIndex); }); - this.setBodyStyle(); - } - }, { - key: 'refreshColumnWidth', - value: function refreshColumnWidth() { - var _this6 = this; + this.setBodyStyle(); + } - this.datamanager.getColumns().map(function (column) { - _this6.columnmanager.setColumnHeaderWidth(column.colIndex); - _this6.columnmanager.setColumnWidth(column.colIndex); + refreshColumnWidth() { + this.datamanager.getColumns() + .map(column => { + this.columnmanager.setColumnHeaderWidth(column.colIndex); + this.columnmanager.setColumnWidth(column.colIndex); }); - } - }, { - key: 'setBodyStyle', - value: function setBodyStyle() { - var width = _dom2.default.style(this.header, 'width'); + } - _dom2.default.style(this.bodyScrollable, { - width: width + 'px' - }); + setBodyStyle() { + const width = $.style(this.header, 'width'); - _dom2.default.style(this.bodyScrollable, { - marginTop: _dom2.default.style(this.header, 'height') + 'px' - }); + $.style(this.bodyScrollable, { + width: width + 'px' + }); - _dom2.default.style((0, _dom2.default)('table', this.bodyScrollable), { - margin: 0 - }); - } - }, { - key: 'getColumnHeaderElement', - value: function getColumnHeaderElement(colIndex) { - colIndex = +colIndex; - if (colIndex < 0) return null; - return (0, _dom2.default)('.data-table-col[data-col-index="' + colIndex + '"]', this.header); - } - }]); + $.style(this.bodyScrollable, { + marginTop: $.style(this.header, 'height') + 'px' + }); - return Style; -}(); + $.style($('table', this.bodyScrollable), { + margin: 0 + }); + } -exports.default = Style; -module.exports = exports['default']; + getColumnHeaderElement(colIndex) { + colIndex = +colIndex; + if (colIndex < 0) return null; + return $(`.data-table-col[data-col-index="${colIndex}"]`, this.header); + } +} -/***/ }), -/* 12 */ -/***/ (function(module, exports, __webpack_require__) { - -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; }; }(); - -var _dom = __webpack_require__(0); - -var _dom2 = _interopRequireDefault(_dom); - -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 KEYCODES = { +const KEYCODES = { 13: 'enter', 91: 'meta', 16: 'shift', @@ -47472,120 +47143,83 @@ var KEYCODES = { 40: 'down', 9: 'tab', 27: 'esc', - 67: 'c' + 67: 'c', + 70: 'f' }; -var Keyboard = function () { - function Keyboard(element) { - _classCallCheck(this, Keyboard); - +class Keyboard { + constructor(element) { this.listeners = {}; - _dom2.default.on(element, 'keydown', this.handler.bind(this)); + $.on(element, 'keydown', this.handler.bind(this)); } - _createClass(Keyboard, [{ - key: 'handler', - value: function handler(e) { - var key = KEYCODES[e.keyCode]; + handler(e) { + let key = KEYCODES[e.keyCode]; - if (e.shiftKey && key !== 'shift') { - key = 'shift+' + key; - } + if (e.shiftKey && key !== 'shift') { + key = 'shift+' + key; + } - if (e.ctrlKey && key !== 'ctrl' || e.metaKey && key !== 'meta') { - key = 'ctrl+' + key; - } + if ((e.ctrlKey && key !== 'ctrl') || (e.metaKey && key !== 'meta')) { + key = 'ctrl+' + key; + } - var listeners = this.listeners[key]; + const listeners = this.listeners[key]; - if (listeners && listeners.length > 0) { - var _iteratorNormalCompletion = true; - var _didIteratorError = false; - var _iteratorError = undefined; - - try { - for (var _iterator = listeners[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) { - var listener = _step.value; - - var preventBubbling = listener(); - if (preventBubbling === undefined || preventBubbling === true) { - e.preventDefault(); - } - } - } catch (err) { - _didIteratorError = true; - _iteratorError = err; - } finally { - try { - if (!_iteratorNormalCompletion && _iterator.return) { - _iterator.return(); - } - } finally { - if (_didIteratorError) { - throw _iteratorError; - } - } + if (listeners && listeners.length > 0) { + for (let listener of listeners) { + const preventBubbling = listener(e); + if (preventBubbling === undefined || preventBubbling === true) { + e.preventDefault(); } } } - }, { - key: 'on', - value: function on(key, listener) { - var _this = this; + } - var keys = key.split(',').map(function (k) { - return k.trim(); - }); + on(key, listener) { + const keys = key.split(',').map(k => k.trim()); - keys.map(function (key) { - _this.listeners[key] = _this.listeners[key] || []; - _this.listeners[key].push(listener); - }); - } - }]); + keys.map(key => { + this.listeners[key] = this.listeners[key] || []; + this.listeners[key].push(listener); + }); + } +} - return Keyboard; -}(); - -exports.default = Keyboard; -module.exports = exports['default']; - -/***/ }), -/* 13 */ -/***/ (function(module, exports, __webpack_require__) { - -Object.defineProperty(exports, "__esModule", { - value: true -}); -exports.default = { +var DEFAULT_OPTIONS = { columns: [], data: [], dropdownButton: '▼', - headerDropdown: [{ - label: 'Sort Ascending', - action: function action(column) { - this.sortColumn(column.colIndex, 'asc'); + headerDropdown: [ + { + label: 'Sort Ascending', + action: function (column) { + this.sortColumn(column.colIndex, 'asc'); + } + }, + { + label: 'Sort Descending', + action: function (column) { + this.sortColumn(column.colIndex, 'desc'); + } + }, + { + label: 'Reset sorting', + action: function (column) { + this.sortColumn(column.colIndex, 'none'); + } + }, + { + label: 'Remove column', + action: function (column) { + this.removeColumn(column.colIndex); + } } - }, { - label: 'Sort Descending', - action: function action(column) { - this.sortColumn(column.colIndex, 'desc'); - } - }, { - label: 'Reset sorting', - action: function action(column) { - this.sortColumn(column.colIndex, 'none'); - } - }, { - label: 'Remove column', - action: function action(column) { - this.removeColumn(column.colIndex); - } - }], + ], events: { - onRemoveColumn: function onRemoveColumn(column) {}, - onSwitchColumn: function onSwitchColumn(column1, column2) {}, - onSortColumn: function onSortColumn(column) {} + onRemoveColumn(column) {}, + onSwitchColumn(column1, column2) {}, + onSortColumn(column) {} }, sortIndicator: { asc: '↑', @@ -47593,599 +47227,216 @@ exports.default = { none: '' }, freezeMessage: '', - getEditor: function getEditor() {}, + getEditor: () => {}, addSerialNoColumn: true, addCheckboxColumn: false, enableClusterize: true, enableLogs: false, layout: 'fixed', // fixed, fluid - noDataMessage: 'No Data' -}; -module.exports = exports['default']; - -/***/ }), -/* 14 */ -/***/ (function(module, exports, __webpack_require__) { - -// style-loader: Adds some css to the DOM by adding a