adore-datatable 2.0.0

package/src/datatable.js

@@ -0,0 +1,296 @@
+import $ from './dom';
+import DataManager from './datamanager';
+import CellManager from './cellmanager';
+import ColumnManager from './columnmanager';
+import RowManager from './rowmanager';
+import BodyRenderer from './body-renderer';
+import Style from './style';
+import Keyboard from './keyboard';
+import TranslationManager from './translationmanager';
+import getDefaultOptions from './defaults';
+
+let defaultComponents = {
+    DataManager,
+    CellManager,
+    ColumnManager,
+    RowManager,
+    BodyRenderer,
+    Style,
+    Keyboard
+};
+
+class DataTable {
+    constructor(wrapper, options) {
+        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.initializeTranslations(options);
+        this.setDefaultOptions();
+        this.buildOptions(options);
+        this.prepare();
+        this.initializeComponents();
+
+        if (this.options.data) {
+            this.refresh();
+            this.columnmanager.applyDefaultSortOrder();
+            if (this.options.saveSorting) {
+                this.setupSaveSorting();
+                this.columnmanager.applySavedSortOrder();
+            }
+        }
+    }
+
+    initializeTranslations(options) {
+        this.language = options.language || 'en';
+        this.translationManager = new TranslationManager(this.language);
+
+        if (options.translations) {
+            this.translationManager.addTranslations(options.translations);
+        }
+    }
+
+    setDefaultOptions() {
+        this.DEFAULT_OPTIONS = getDefaultOptions(this);
+    }
+
+    buildOptions(options) {
+        this.options = this.options || {};
+
+        this.options = Object.assign(
+            {}, this.DEFAULT_OPTIONS,
+            this.options || {}, options
+        );
+
+        options.headerDropdown = options.headerDropdown || [];
+        this.options.headerDropdown = [
+            ...this.DEFAULT_OPTIONS.headerDropdown,
+            ...options.headerDropdown
+        ];
+
+        // custom user events
+        this.events = Object.assign(
+            {}, this.DEFAULT_OPTIONS.events,
+            this.options.events || {},
+            options.events || {}
+        );
+        this.fireEvent = this.fireEvent.bind(this);
+    }
+
+    prepare() {
+        this.prepareDom();
+        this.unfreeze();
+    }
+
+    initializeComponents() {
+        let components = Object.assign({}, defaultComponents, this.options.overrideComponents);
+        let {
+            Style,
+            Keyboard,
+            DataManager,
+            RowManager,
+            ColumnManager,
+            CellManager,
+            BodyRenderer
+        } = components;
+
+        this.style = new Style(this);
+        this.keyboard = new Keyboard(this.wrapper);
+        this.datamanager = new DataManager(this.options);
+        this.rowmanager = new RowManager(this);
+        this.columnmanager = new ColumnManager(this);
+        this.cellmanager = new CellManager(this);
+        this.bodyRenderer = new BodyRenderer(this);
+    }
+
+    prepareDom() {
+        this.wrapper.innerHTML = `
+            <div class="datatable" dir="${this.options.direction}">
+                <div class="dt-header"></div>
+                <div class="dt-scrollable"></div>
+                <div class="dt-footer"></div>
+                <div class="dt-freeze">
+                    <span class="dt-freeze__message">
+                        ${this.options.freezeMessage}
+                    </span>
+                </div>
+                <div class="dt-toast"></div>
+                <div class="dt-dropdown-container"></div>
+                <textarea class="dt-paste-target"></textarea>
+            </div>
+        `;
+
+        this.datatableWrapper = $('.datatable', this.wrapper);
+        this.header = $('.dt-header', this.wrapper);
+        this.footer = $('.dt-footer', this.wrapper);
+        this.bodyScrollable = $('.dt-scrollable', this.wrapper);
+        this.freezeContainer = $('.dt-freeze', this.wrapper);
+        this.toastMessage = $('.dt-toast', this.wrapper);
+        this.pasteTarget = $('.dt-paste-target', this.wrapper);
+        this.dropdownContainer = $('.dt-dropdown-container', this.wrapper);
+    }
+
+    refresh(data, columns) {
+        this.datamanager.init(data, columns);
+        this.render();
+        this.setDimensions();
+    }
+
+    destroy() {
+        this.wrapper.innerHTML = '';
+        this.style.destroy();
+        this.fireEvent('onDestroy');
+    }
+
+    appendRows(rows) {
+        this.datamanager.appendRows(rows);
+        this.rowmanager.refreshRows();
+    }
+
+    refreshRow(row, rowIndex) {
+        this.rowmanager.refreshRow(row, rowIndex);
+    }
+
+    render() {
+        this.renderHeader();
+        this.renderBody();
+    }
+
+    renderHeader() {
+        this.columnmanager.renderHeader();
+    }
+
+    renderBody() {
+        this.bodyRenderer.render();
+    }
+
+    setDimensions() {
+        this.style.setDimensions();
+    }
+
+    showToastMessage(message, hideAfter) {
+        this.bodyRenderer.showToastMessage(message, hideAfter);
+    }
+
+    clearToastMessage() {
+        this.bodyRenderer.clearToastMessage();
+    }
+
+    getColumn(colIndex) {
+        return this.datamanager.getColumn(colIndex);
+    }
+
+    getColumns() {
+        return this.datamanager.getColumns();
+    }
+
+    getRows() {
+        return this.datamanager.getRows();
+    }
+
+    getCell(colIndex, rowIndex) {
+        return this.datamanager.getCell(colIndex, rowIndex);
+    }
+
+    getColumnHeaderElement(colIndex) {
+        return this.columnmanager.getColumnHeaderElement(colIndex);
+    }
+
+    getViewportHeight() {
+        if (!this.viewportHeight) {
+            this.viewportHeight = $.style(this.bodyScrollable, 'height');
+        }
+
+        return this.viewportHeight;
+    }
+
+    sortColumn(colIndex, sortOrder) {
+        this.columnmanager.sortColumn(colIndex, sortOrder);
+    }
+    saveSorting(colIndex, nextSortOrder) {
+        this.columnmanager.saveSorting(colIndex, nextSortOrder);
+    }
+
+    removeColumn(colIndex) {
+        this.columnmanager.removeColumn(colIndex);
+    }
+
+    scrollToLastColumn() {
+        this.datatableWrapper.scrollLeft = 9999;
+    }
+
+    freeze() {
+        $.style(this.freezeContainer, {
+            display: ''
+        });
+    }
+
+    unfreeze() {
+        $.style(this.freezeContainer, {
+            display: 'none'
+        });
+    }
+
+    updateOptions(options) {
+        this.buildOptions(options);
+    }
+
+    fireEvent(eventName, ...args) {
+        // fire internalEventHandlers if any
+        // and then user events
+        const handlers = [
+            ...(this._internalEventHandlers[eventName] || []),
+            this.events[eventName]
+        ].filter(Boolean);
+
+        for (let handler of handlers) {
+            handler.apply(this, args);
+        }
+    }
+
+    on(event, handler) {
+        this._internalEventHandlers = this._internalEventHandlers || {};
+        this._internalEventHandlers[event] = this._internalEventHandlers[event] || [];
+        this._internalEventHandlers[event].push(handler);
+    }
+
+    log() {
+        if (this.options.logs) {
+            console.log.apply(console, arguments);
+        }
+    }
+
+    translate(str, args) {
+        return this.translationManager.translate(str, args);
+    }
+    setupSaveSorting() {
+        // add options in default headerdropdown
+        let action = {
+            label: this.translate('Save Sorting'),
+            action: function (column) {
+                this.saveSorting(column.colIndex, column.sotOrder);
+            },
+            display: 'hidden'
+        };
+        this.options.headerDropdown.push(action);
+        this.columnmanager.bindDropdown();
+        // add events for onSortColumn
+        this.on('onSortColumn', function (column) {
+            this.columnmanager.toggleDropdownItem(4);
+            if (column.sortOrder === 'none') {
+                localStorage.removeItem(this.columnmanager.sortingKey);
+            }
+        });
+    }
+}
+
+DataTable.instances = 0;
+
+export default DataTable;

package/src/defaults.js

@@ -0,0 +1,73 @@
+import filterRows from './filterRows';
+import icons from './icons';
+
+export default function getDefaultOptions(instance) {
+    return {
+        columns: [],
+        data: [],
+        dropdownButton: icons.chevronDown,
+        headerDropdown: [
+            {
+                label: instance.translate('Sort Ascending'),
+                action: function (column) {
+                    this.sortColumn(column.colIndex, 'asc');
+                }
+            },
+            {
+                label: instance.translate('Sort Descending'),
+                action: function (column) {
+                    this.sortColumn(column.colIndex, 'desc');
+                }
+            },
+            {
+                label: instance.translate('Reset sorting'),
+                action: function (column) {
+                    this.sortColumn(column.colIndex, 'none');
+                }
+            },
+            {
+                label: instance.translate('Remove column'),
+                action: function (column) {
+                    this.removeColumn(column.colIndex);
+                }
+            }
+        ],
+        events: {
+            onRemoveColumn(column) {},
+            onSwitchColumn(column1, column2) {},
+            onSortColumn(column) {},
+            onCheckRow(row) {},
+            onDestroy() {}
+        },
+        hooks: {
+            columnTotal: null
+        },
+        sortIndicator: {
+            asc: '↑',
+            desc: '↓',
+            none: ''
+        },
+        overrideComponents: {
+            // ColumnManager: CustomColumnManager
+        },
+        filterRows: filterRows,
+        freezeMessage: '',
+        getEditor: null,
+        serialNoColumn: true,
+        checkboxColumn: false,
+        clusterize: true,
+        logs: false,
+        layout: 'fixed', // fixed, fluid, ratio
+        noDataMessage: instance.translate('No Data'),
+        cellHeight: 40,
+        minimumColumnWidth: 30,
+        inlineFilters: false,
+        treeView: false,
+        checkedRowStatus: true,
+        dynamicRowHeight: false,
+        pasteFromClipboard: false,
+        showTotalRow: false,
+        direction: 'ltr',
+        disableReorderColumn: false
+    };
+};

package/src/dom.js

@@ -0,0 +1,235 @@
+export default function $(expr, con) {
+    return typeof expr === 'string' ?
+        (con || document).querySelector(expr) :
+        expr || null;
+}
+
+$.each = (expr, con) => {
+    return typeof expr === 'string' ?
+        Array.from((con || document).querySelectorAll(expr)) :
+        expr || null;
+};
+
+$.create = (tag, o) => {
+    let element = document.createElement(tag);
+
+    for (let i in o) {
+        let val = o[i];
+
+        if (i === 'inside') {
+            $(val).appendChild(element);
+        } else
+        if (i === 'around') {
+            let ref = $(val);
+            ref.parentNode.insertBefore(element, ref);
+            element.appendChild(ref);
+        } else
+        if (i === 'styles') {
+            if (typeof val === 'object') {
+                Object.keys(val).map(prop => {
+                    element.style[prop] = val[prop];
+                });
+            }
+        } else
+        if (i in element) {
+            element[i] = val;
+        } else {
+            element.setAttribute(i, val);
+        }
+    }
+
+    return element;
+};
+
+$.on = (element, event, selector, callback) => {
+    if (!callback) {
+        callback = selector;
+        $.bind(element, event, callback);
+    } else {
+        $.delegate(element, event, selector, callback);
+    }
+};
+
+$.off = (element, event, handler) => {
+    element.removeEventListener(event, handler);
+};
+
+$.bind = (element, event, callback) => {
+    event.split(/\s+/).forEach(function (event) {
+        element.addEventListener(event, callback);
+    });
+};
+
+$.delegate = (element, event, selector, callback) => {
+    element.addEventListener(event, function (e) {
+        const delegatedTarget = e.target.closest(selector);
+        if (delegatedTarget) {
+            e.delegatedTarget = delegatedTarget;
+            callback.call(this, e, delegatedTarget);
+        }
+    });
+};
+
+$.unbind = (element, o) => {
+    if (element) {
+        for (let event in o) {
+            let callback = o[event];
+
+            event.split(/\s+/).forEach(function (event) {
+                element.removeEventListener(event, callback);
+            });
+        }
+    }
+};
+
+$.fire = (target, type, properties) => {
+    let evt = document.createEvent('HTMLEvents');
+
+    evt.initEvent(type, true, true);
+
+    for (let j in properties) {
+        evt[j] = properties[j];
+    }
+
+    return target.dispatchEvent(evt);
+};
+
+$.data = (element, attrs) => { // eslint-disable-line
+    if (!attrs) {
+        return element.dataset;
+    }
+
+    for (const attr in attrs) {
+        element.dataset[attr] = attrs[attr];
+    }
+};
+
+$.style = (elements, styleMap) => { // eslint-disable-line
+
+    if (typeof styleMap === 'string') {
+        return $.getStyle(elements, styleMap);
+    }
+
+    if (!Array.isArray(elements)) {
+        elements = [elements];
+    }
+
+    elements.map(element => {
+        for (const prop in styleMap) {
+            element.style[prop] = styleMap[prop];
+        }
+    });
+};
+
+$.removeStyle = (elements, styleProps) => {
+    if (!Array.isArray(elements)) {
+        elements = [elements];
+    }
+
+    if (!Array.isArray(styleProps)) {
+        styleProps = [styleProps];
+    }
+
+    elements.map(element => {
+        for (const prop of styleProps) {
+            element.style[prop] = '';
+        }
+    });
+};
+
+$.getStyle = (element, prop) => {
+    if (!prop) {
+        return getComputedStyle(element);
+    }
+
+    let val = getComputedStyle(element)[prop];
+
+    if (['width', 'height'].includes(prop)) {
+        val = parseFloat(val);
+    }
+
+    return val;
+};
+
+$.closest = (selector, element) => {
+    if (!element) return null;
+
+    if (element.matches(selector)) {
+        return element;
+    }
+
+    return $.closest(selector, element.parentNode);
+};
+
+$.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(() => {
+        element.scrollTop = pixels;
+    });
+};
+
+$.scrollbarSize = function scrollbarSize() {
+    if (!$.scrollBarSizeValue) {
+        $.scrollBarSizeValue = getScrollBarSize();
+    }
+    return $.scrollBarSizeValue;
+};
+
+function getScrollBarSize() {
+    // assume scrollbar width and height would be the same
+
+    // Create the measurement node
+    const scrollDiv = document.createElement('div');
+    $.style(scrollDiv, {
+        width: '100px',
+        height: '100px',
+        overflow: 'scroll',
+        position: 'absolute',
+        top: '-9999px'
+    });
+    document.body.appendChild(scrollDiv);
+
+    // Get the scrollbar width
+    const scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
+
+    // Delete the DIV
+    document.body.removeChild(scrollDiv);
+
+    return scrollbarWidth;
+}
+
+$.hasVerticalOverflow = function (element) {
+    return element.scrollHeight > element.offsetHeight + 10;
+};
+
+$.hasHorizontalOverflow = function (element) {
+    return element.scrollWidth > element.offsetWidth + 10;
+};
+
+$.measureTextWidth = function (text) {
+    const div = document.createElement('div');
+    div.style.position = 'absolute';
+    div.style.visibility = 'hidden';
+    div.style.height = 'auto';
+    div.style.width = 'auto';
+    div.style.whiteSpace = 'nowrap';
+    div.innerText = text;
+    document.body.appendChild(div);
+    return div.clientWidth + 1;
+};