px-jspreadsheet-ce 0.0.1

package/src/utils/factory.js

@@ -0,0 +1,216 @@
+import jSuites from 'jsuites';
+
+import libraryBase from './libraryBase.js';
+import { setEvents } from './events.js';
+import { fullscreen, getWorksheetActive } from './internal.js';
+import { hideToolbar, showToolbar, updateToolbar } from './toolbar.js';
+import { buildWorksheet, createWorksheetObj, getNextDefaultWorksheetName } from './worksheets.js';
+import dispatch from './dispatch.js';
+import { createFromTable } from './helpers.js';
+import { getSpreadsheetConfig, setConfig } from './config.js';
+
+const factory = function () {};
+
+const createWorksheets = async function (spreadsheet, options, el) {
+    // Create worksheets
+    let o = options.worksheets;
+    if (o) {
+        let tabsOptions = {
+            animation: true,
+            onbeforecreate: function (element, title) {
+                if (title) {
+                    return title;
+                } else {
+                    return getNextDefaultWorksheetName(spreadsheet);
+                }
+            },
+            oncreate: function (element, newTabContent) {
+                if (!spreadsheet.creationThroughJss) {
+                    const worksheetName = element.tabs.headers.children[element.tabs.headers.children.length - 2].innerHTML;
+
+                    createWorksheetObj.call(spreadsheet.worksheets[0], {
+                        minDimensions: [10, 15],
+                        worksheetName: worksheetName,
+                    });
+                } else {
+                    spreadsheet.creationThroughJss = false;
+                }
+
+                const newWorksheet = spreadsheet.worksheets[spreadsheet.worksheets.length - 1];
+
+                newWorksheet.element = newTabContent;
+
+                buildWorksheet.call(newWorksheet).then(function () {
+                    updateToolbar(newWorksheet);
+
+                    dispatch.call(newWorksheet, 'oncreateworksheet', newWorksheet, options, spreadsheet.worksheets.length - 1);
+                });
+            },
+            onchange: function (element, instance, tabIndex) {
+                if (spreadsheet.worksheets.length != 0 && spreadsheet.worksheets[tabIndex]) {
+                    updateToolbar(spreadsheet.worksheets[tabIndex]);
+                }
+            },
+        };
+
+        if (options.tabs == true) {
+            tabsOptions.allowCreate = true;
+        } else {
+            tabsOptions.hideHeaders = true;
+        }
+
+        tabsOptions.data = [];
+
+        let sheetNumber = 1;
+
+        for (let i = 0; i < o.length; i++) {
+            if (!o[i].worksheetName) {
+                o[i].worksheetName = 'Sheet' + sheetNumber++;
+            }
+
+            tabsOptions.data.push({
+                title: o[i].worksheetName,
+                content: '',
+            });
+        }
+
+        el.classList.add('jss_spreadsheet');
+        el.tabIndex = 0;
+
+        const tabs = jSuites.tabs(el, tabsOptions);
+
+        const spreadsheetStyles = options.style;
+        delete options.style;
+
+        for (let i = 0; i < o.length; i++) {
+            if (o[i].style) {
+                Object.entries(o[i].style).forEach(function ([cellName, value]) {
+                    if (typeof value === 'number') {
+                        o[i].style[cellName] = spreadsheetStyles[value];
+                    }
+                });
+            }
+
+            spreadsheet.worksheets.push({
+                parent: spreadsheet,
+                element: tabs.content.children[i],
+                options: o[i],
+                filters: [],
+                formula: [],
+                history: [],
+                selection: [],
+                historyIndex: -1,
+            });
+
+            await buildWorksheet.call(spreadsheet.worksheets[i]);
+        }
+    } else {
+        throw new Error('JSS: worksheets are not defined');
+    }
+};
+
+factory.spreadsheet = async function (el, options, worksheets) {
+    if (el.tagName == 'TABLE') {
+        if (!options) {
+            options = {};
+        }
+
+        if (!options.worksheets) {
+            options.worksheets = [];
+        }
+
+        const tableOptions = createFromTable(el, options.worksheets[0]);
+
+        options.worksheets[0] = tableOptions;
+
+        const div = document.createElement('div');
+        el.parentNode.insertBefore(div, el);
+        el.remove();
+        el = div;
+    }
+
+    let spreadsheet = {
+        worksheets: worksheets,
+        config: options,
+        element: el,
+        el,
+    };
+
+    // Contextmenu container
+    spreadsheet.contextMenu = document.createElement('div');
+    spreadsheet.contextMenu.className = 'jss_contextmenu';
+
+    spreadsheet.getWorksheetActive = getWorksheetActive.bind(spreadsheet);
+    spreadsheet.fullscreen = fullscreen.bind(spreadsheet);
+    spreadsheet.showToolbar = showToolbar.bind(spreadsheet);
+    spreadsheet.hideToolbar = hideToolbar.bind(spreadsheet);
+    spreadsheet.getConfig = getSpreadsheetConfig.bind(spreadsheet);
+    spreadsheet.setConfig = setConfig.bind(spreadsheet);
+
+    spreadsheet.setPlugins = function (newPlugins) {
+        if (!spreadsheet.plugins) {
+            spreadsheet.plugins = {};
+        }
+
+        if (typeof newPlugins == 'object') {
+            Object.entries(newPlugins).forEach(function ([pluginName, plugin]) {
+                spreadsheet.plugins[pluginName] = plugin.call(libraryBase.jspreadsheet, spreadsheet, {}, spreadsheet.config);
+            });
+        }
+    };
+
+    spreadsheet.setPlugins(options.plugins);
+
+    // Create as worksheets
+    await createWorksheets(spreadsheet, options, el);
+
+    spreadsheet.element.appendChild(spreadsheet.contextMenu);
+
+    // Create element
+    jSuites.contextmenu(spreadsheet.contextMenu, {
+        onclick: function () {
+            spreadsheet.contextMenu.contextmenu.close(false);
+        },
+    });
+
+    // Fullscreen
+    if (spreadsheet.config.fullscreen == true) {
+        spreadsheet.element.classList.add('fullscreen');
+    }
+
+    showToolbar.call(spreadsheet);
+
+    // Build handlers
+    if (options.root) {
+        setEvents(options.root);
+    } else {
+        setEvents(document);
+    }
+
+    el.spreadsheet = spreadsheet;
+
+    return spreadsheet;
+};
+
+factory.worksheet = function (spreadsheet, options, position) {
+    // Worksheet object
+    let w = {
+        // Parent of a worksheet is always the spreadsheet
+        parent: spreadsheet,
+        // Options for this worksheet
+        options: {},
+    };
+
+    // Create the worksheets object
+    if (typeof position === 'undefined') {
+        spreadsheet.worksheets.push(w);
+    } else {
+        spreadsheet.worksheets.splice(position, 0, w);
+    }
+    // Keep configuration used
+    Object.assign(w.options, options);
+
+    return w;
+};
+
+export default factory;

package/src/utils/filter.js

@@ -0,0 +1,128 @@
+import jSuites from 'jsuites';
+import { updateResult } from './internal.js';
+import { refreshSelection } from './selection.js';
+
+/**
+ * Open the column filter
+ */
+export const openFilter = function (columnId) {
+    const obj = this;
+
+    if (!obj.options.filters) {
+        console.log('Jspreadsheet: filters not enabled.');
+    } else {
+        // Make sure is integer
+        columnId = parseInt(columnId);
+        // Reset selection
+        obj.resetSelection();
+        // Load options
+        let optionsFiltered = [];
+        if (obj.options.columns[columnId].type == 'checkbox') {
+            optionsFiltered.push({ id: 'true', name: 'True' });
+            optionsFiltered.push({ id: 'false', name: 'False' });
+        } else {
+            const options = [];
+            let hasBlanks = false;
+            for (let j = 0; j < obj.options.data.length; j++) {
+                const k = obj.options.data[j][columnId];
+                const v = obj.records[j][columnId].element.innerHTML;
+                if (k && v) {
+                    options[k] = v;
+                } else {
+                    hasBlanks = true;
+                }
+            }
+            const keys = Object.keys(options);
+            optionsFiltered = [];
+            for (let j = 0; j < keys.length; j++) {
+                optionsFiltered.push({ id: keys[j], name: options[keys[j]] });
+            }
+            // Has blank options
+            if (hasBlanks) {
+                optionsFiltered.push({ value: '', id: '', name: '(Blanks)' });
+            }
+        }
+
+        // Create dropdown
+        const div = document.createElement('div');
+        obj.filter.children[columnId + 1].innerHTML = '';
+        obj.filter.children[columnId + 1].appendChild(div);
+        obj.filter.children[columnId + 1].style.paddingLeft = '0px';
+        obj.filter.children[columnId + 1].style.paddingRight = '0px';
+        obj.filter.children[columnId + 1].style.overflow = 'initial';
+
+        const opt = {
+            data: optionsFiltered,
+            multiple: true,
+            autocomplete: true,
+            opened: true,
+            value: obj.filters[columnId] !== undefined ? obj.filters[columnId] : null,
+            width: '100%',
+            position: obj.options.tableOverflow == true || obj.parent.config.fullscreen == true ? true : false,
+            onclose: function (o) {
+                resetFilters.call(obj);
+                obj.filters[columnId] = o.dropdown.getValue(true);
+                obj.filter.children[columnId + 1].innerHTML = o.dropdown.getText();
+                obj.filter.children[columnId + 1].style.paddingLeft = '';
+                obj.filter.children[columnId + 1].style.paddingRight = '';
+                obj.filter.children[columnId + 1].style.overflow = '';
+                closeFilter.call(obj, columnId);
+                refreshSelection.call(obj);
+            },
+        };
+
+        // Dynamic dropdown
+        jSuites.dropdown(div, opt);
+    }
+};
+
+export const closeFilter = function (columnId) {
+    const obj = this;
+
+    if (!columnId) {
+        for (let i = 0; i < obj.filter.children.length; i++) {
+            if (obj.filters[i]) {
+                columnId = i;
+            }
+        }
+    }
+
+    // Search filter
+    const search = function (query, x, y) {
+        for (let i = 0; i < query.length; i++) {
+            const value = '' + obj.options.data[y][x];
+            const label = '' + obj.records[y][x].element.innerHTML;
+            if (query[i] == value || query[i] == label) {
+                return true;
+            }
+        }
+        return false;
+    };
+
+    const query = obj.filters[columnId];
+    obj.results = [];
+    for (let j = 0; j < obj.options.data.length; j++) {
+        if (search(query, columnId, j)) {
+            obj.results.push(j);
+        }
+    }
+    if (!obj.results.length) {
+        obj.results = null;
+    }
+
+    updateResult.call(obj);
+};
+
+export const resetFilters = function () {
+    const obj = this;
+
+    if (obj.options.filters) {
+        for (let i = 0; i < obj.filter.children.length; i++) {
+            obj.filter.children[i].innerHTML = '&nbsp;';
+            obj.filters[i] = null;
+        }
+    }
+
+    obj.results = null;
+    updateResult.call(obj);
+};

package/src/utils/footer.js

@@ -0,0 +1,51 @@
+import { parseValue } from './internal.js';
+
+export const setFooter = function (data) {
+    const obj = this;
+
+    if (data) {
+        obj.options.footers = data;
+    }
+
+    if (obj.options.footers) {
+        if (!obj.tfoot) {
+            obj.tfoot = document.createElement('tfoot');
+            obj.table.appendChild(obj.tfoot);
+        }
+
+        for (let j = 0; j < obj.options.footers.length; j++) {
+            let tr;
+
+            if (obj.tfoot.children[j]) {
+                tr = obj.tfoot.children[j];
+            } else {
+                tr = document.createElement('tr');
+                const td = document.createElement('td');
+                tr.appendChild(td);
+                obj.tfoot.appendChild(tr);
+            }
+            for (let i = 0; i < obj.headers.length; i++) {
+                if (!obj.options.footers[j][i]) {
+                    obj.options.footers[j][i] = '';
+                }
+
+                let td;
+
+                if (obj.tfoot.children[j].children[i + 1]) {
+                    td = obj.tfoot.children[j].children[i + 1];
+                } else {
+                    td = document.createElement('td');
+                    tr.appendChild(td);
+
+                    // Text align
+                    const colAlign = obj.options.columns[i].align || obj.options.defaultColAlign || 'center';
+                    td.style.textAlign = colAlign;
+                }
+                td.textContent = parseValue.call(obj, +obj.records.length + i, j, obj.options.footers[j][i]);
+
+                // Hide/Show with hideColumn()/showColumn()
+                td.style.display = obj.cols[i].colElement.style.display;
+            }
+        }
+    }
+};

package/src/utils/freeze.js

@@ -0,0 +1,19 @@
+// Get width of all freezed cells together
+export const getFreezeWidth = function () {
+    const obj = this;
+
+    let width = 0;
+    if (obj.options.freezeColumns > 0) {
+        for (let i = 0; i < obj.options.freezeColumns; i++) {
+            let columnWidth;
+            if (obj.options.columns && obj.options.columns[i] && obj.options.columns[i].width !== undefined) {
+                columnWidth = parseInt(obj.options.columns[i].width);
+            } else {
+                columnWidth = obj.options.defaultColWidth !== undefined ? parseInt(obj.options.defaultColWidth) : 100;
+            }
+
+            width += columnWidth;
+        }
+    }
+    return width;
+};

package/src/utils/headers.js

@@ -0,0 +1,74 @@
+import { setHistory } from './history.js';
+import dispatch from './dispatch.js';
+import { getColumnName } from './helpers.js';
+
+/**
+ * Get the column title
+ *
+ * @param column - column number (first column is: 0)
+ * @param title - new column title
+ */
+export const getHeader = function (column) {
+    const obj = this;
+
+    return obj.headers[column].textContent;
+};
+
+/**
+ * Get the headers
+ *
+ * @param asArray
+ * @return mixed
+ */
+export const getHeaders = function (asArray) {
+    const obj = this;
+
+    const title = [];
+
+    for (let i = 0; i < obj.headers.length; i++) {
+        title.push(obj.getHeader(i));
+    }
+
+    return asArray ? title : title.join(obj.options.csvDelimiter);
+};
+
+/**
+ * Set the column title
+ *
+ * @param column - column number (first column is: 0)
+ * @param title - new column title
+ */
+export const setHeader = function (column, newValue) {
+    const obj = this;
+
+    if (obj.headers[column]) {
+        const oldValue = obj.headers[column].textContent;
+        const onchangeheaderOldValue = (obj.options.columns && obj.options.columns[column] && obj.options.columns[column].title) || '';
+
+        if (!newValue) {
+            newValue = getColumnName(column);
+        }
+
+        obj.headers[column].textContent = newValue;
+        // Keep the title property
+        obj.headers[column].setAttribute('title', newValue);
+        // Update title
+        if (!obj.options.columns) {
+            obj.options.columns = [];
+        }
+        if (!obj.options.columns[column]) {
+            obj.options.columns[column] = {};
+        }
+        obj.options.columns[column].title = newValue;
+
+        setHistory.call(obj, {
+            action: 'setHeader',
+            column: column,
+            oldValue: oldValue,
+            newValue: newValue,
+        });
+
+        // On onchange header
+        dispatch.call(obj, 'onchangeheader', obj, parseInt(column), newValue, onchangeheaderOldValue);
+    }
+};