Merge remote-tracking branch 'upstream/master' into cypress

dist/frappe-datatable.cjs.js

@@ -1585,6 +1585,7 @@ class CellManager {
 
         this.keyboard.on('esc', () => {
             this.deactivateEditing();
+            this.columnmanager.toggleFilter(false);
         });
 
         if (this.options.inlineFilters) {
@@ -2213,7 +2214,11 @@ class CellManager {
         const editCellHTML = editable ? this.getEditCellHTML(colIndex) : '';
 
         const sortable = isHeader && cell.sortable !== false;
-        const sortIndicator = sortable ? '<span class="sort-indicator"></span>' : '';
+        const sortIndicator = sortable ?
+            `<span class="sort-indicator">
+                ${this.options.sortIndicator[cell.sortOrder]}
+            </span>` :
+            '';
 
         const resizable = isHeader && cell.resizable !== false;
         const resizeColumn = resizable ? '<span class="dt-cell__resize-handle"></span>' : '';
@@ -2297,15 +2302,7 @@ class ColumnManager {
 
     refreshHeader() {
         const columns = this.datamanager.getColumns();
-        const $cols = $.each('.dt-cell--header', this.header);
 
-        const refreshHTML =
-            // first init
-            !$('.dt-cell', this.header) ||
-            // deleted column
-            columns.length < $cols.length;
-
-        if (refreshHTML) {
         // refresh html
         $('thead', this.header).innerHTML = this.getHeaderHTML(columns);
 
@@ -2313,25 +2310,9 @@ class ColumnManager {
         if (this.$filterRow) {
             $.style(this.$filterRow, { display: 'none' });
         }
-        } else {
-            // update data-attributes
-            $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 = [];
+        this.bindMoveColumn();
     }
 
     getHeaderHTML(columns) {
@@ -2349,7 +2330,6 @@ class ColumnManager {
     bindEvents() {
         this.bindDropdown();
         this.bindResizeColumn();
-        this.bindMoveColumn();
         this.bindFilter();
     }
 
@@ -2450,16 +2430,6 @@ class ColumnManager {
     }
 
     bindMoveColumn() {
-        let initialized;
-
-        const initialize = () => {
-            if (initialized) {
-                $.off(document.body, 'mousemove', initialize);
-                return;
-            }
-            const ready = $('.dt-cell', this.header);
-            if (!ready) return;
-
         const $parent = $('.dt-row', this.header);
 
         this.sortable = Sortable.create($parent, {
@@ -2481,9 +2451,6 @@ class ColumnManager {
             chosenClass: 'dt-cell--dragging',
             animation: 150
         });
-        };
-
-        $.on(document.body, 'mousemove', initialize);
     }
 
     sortColumn(colIndex, nextSortOrder) {
@@ -2592,11 +2559,9 @@ class ColumnManager {
 
     setColumnWidth(colIndex, width) {
         colIndex = +colIndex;
-        this._columnWidthMap = this._columnWidthMap || [];
 
         let columnWidth = width || this.getColumn(colIndex).width;
 
-        let index = this._columnWidthMap[colIndex];
         const selector = [
             `.dt-cell__content--col-${colIndex}`,
             `.dt-cell__edit--col-${colIndex}`
@@ -2606,11 +2571,7 @@ class ColumnManager {
             width: columnWidth + 'px'
         };
 
-        index = this.style.setStyle(selector, styles, index);
+        this.style.setStyle(selector, styles);
-
-        if (index !== undefined) {
-            this._columnWidthMap[colIndex] = index;
-        }
     }
 
     setColumnHeaderWidth(colIndex) {
@@ -3093,32 +3054,50 @@ class Style {
         this.styleEl.remove();
     }
 
-    setStyle(selector, styleMap, index = -1) {
+    setStyle(selector, styleObject) {
-        const styles = Object.keys(styleMap)
+        if (selector.includes(',')) {
-            .map(prop => {
+            selector.split(',')
-                if (!prop.includes('-')) {
+                .map(s => s.trim())
-                    prop = camelCaseToDash(prop);
+                .forEach(selector => {
+                    this.setStyle(selector, styleObject);
+                });
+            return;
         }
-                return `${prop}:${styleMap[prop]};`;
+
+        this._styleRulesMap = this._styleRulesMap || {};
+        const prefixedSelector = this._getPrefixedSelector(selector);
+
+        if (this._styleRulesMap[prefixedSelector]) {
+            // find and remove
+            const index = Array.from(this.stylesheet.cssRules)
+                .findIndex(rule => rule.selectorText === prefixedSelector);
+            this.stylesheet.deleteRule(index);
+
+            // merge with old styleobject
+            styleObject = Object.assign({}, this._styleRulesMap[prefixedSelector], styleObject);
+        }
+
+        const styleString = this._getRuleString(styleObject);
+        const ruleString = `${prefixedSelector} { ${styleString} }`;
+
+        this._styleRulesMap[prefixedSelector] = styleObject;
+        this.stylesheet.insertRule(ruleString);
+    }
+
+    _getPrefixedSelector(selector) {
+        return `.${this.scopeClass} ${selector}`;
+    }
+
+    _getRuleString(styleObject) {
+        return Object.keys(styleObject)
+            .map(prop => {
+                let dashed = prop;
+                if (!prop.includes('-')) {
+                    dashed = camelCaseToDash(prop);
+                }
+                return `${dashed}:${styleObject[prop]};`;
             })
             .join('');
-        let prefixedSelector = selector
-            .split(',')
-            .map(r => `.${this.scopeClass} ${r}`)
-            .join(',');
-
-        let ruleString = `${prefixedSelector} { ${styles} }`;
-
-        if (!this.stylesheet) return;
-
-        let _index = this.stylesheet.cssRules.length;
-        if (index !== -1) {
-            this.stylesheet.deleteRule(index);
-            _index = index;
-        }
-
-        this.stylesheet.insertRule(ruleString, _index);
-        return _index; // eslint-disable-line
     }
 
     setDimensions() {
@@ -3281,11 +3260,16 @@ class Style {
         this.datamanager.getColumns()
             .map(column => {
                 // alignment
-                if (['left', 'center', 'right'].includes(column.align)) {
+                if (!column.align) {
+                    column.align = 'left';
+                }
+                if (!['left', 'center', 'right'].includes(column.align)) {
+                    column.align = 'left';
+                }
                 this.setStyle(`.dt-cell--col-${column.colIndex}`, {
                     'text-align': column.align
                 });
-                }
+
                 // width
                 this.columnmanager.setColumnHeaderWidth(column.colIndex);
                 this.columnmanager.setColumnWidth(column.colIndex);
@@ -3658,7 +3642,7 @@ class DataTable {
 DataTable.instances = 0;
 
 var name = "frappe-datatable";
-var version = "0.0.5";
+var version = "0.0.7";
 var description = "A modern datatable library for the web";
 var main = "dist/frappe-datatable.cjs.js";
 var scripts = {"start":"yarn run dev","build":"rollup -c","production":"rollup -c --production","build:docs":"rollup -c --docs","dev":"rollup -c -w","test":"mocha --compilers js:babel-core/register --colors ./test/*.spec.js"};

dist/frappe-datatable.js

@@ -1584,6 +1584,7 @@ var DataTable = (function (Sortable,Clusterize) {
 
             this.keyboard.on('esc', () => {
                 this.deactivateEditing();
+                this.columnmanager.toggleFilter(false);
             });
 
             if (this.options.inlineFilters) {
@@ -2212,7 +2213,11 @@ var DataTable = (function (Sortable,Clusterize) {
             const editCellHTML = editable ? this.getEditCellHTML(colIndex) : '';
 
             const sortable = isHeader && cell.sortable !== false;
-            const sortIndicator = sortable ? '<span class="sort-indicator"></span>' : '';
+            const sortIndicator = sortable ?
+                `<span class="sort-indicator">
+                ${this.options.sortIndicator[cell.sortOrder]}
+            </span>` :
+                '';
 
             const resizable = isHeader && cell.resizable !== false;
             const resizeColumn = resizable ? '<span class="dt-cell__resize-handle"></span>' : '';
@@ -2296,15 +2301,7 @@ var DataTable = (function (Sortable,Clusterize) {
 
         refreshHeader() {
             const columns = this.datamanager.getColumns();
-            const $cols = $.each('.dt-cell--header', this.header);
 
-            const refreshHTML =
-                // first init
-                !$('.dt-cell', this.header) ||
-                // deleted column
-                columns.length < $cols.length;
-
-            if (refreshHTML) {
             // refresh html
             $('thead', this.header).innerHTML = this.getHeaderHTML(columns);
 
@@ -2312,25 +2309,9 @@ var DataTable = (function (Sortable,Clusterize) {
             if (this.$filterRow) {
                 $.style(this.$filterRow, { display: 'none' });
             }
-            } else {
-                // update data-attributes
-                $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 = [];
+            this.bindMoveColumn();
         }
 
         getHeaderHTML(columns) {
@@ -2348,7 +2329,6 @@ var DataTable = (function (Sortable,Clusterize) {
         bindEvents() {
             this.bindDropdown();
             this.bindResizeColumn();
-            this.bindMoveColumn();
             this.bindFilter();
         }
 
@@ -2449,16 +2429,6 @@ var DataTable = (function (Sortable,Clusterize) {
         }
 
         bindMoveColumn() {
-            let initialized;
-
-            const initialize = () => {
-                if (initialized) {
-                    $.off(document.body, 'mousemove', initialize);
-                    return;
-                }
-                const ready = $('.dt-cell', this.header);
-                if (!ready) return;
-
             const $parent = $('.dt-row', this.header);
 
             this.sortable = Sortable.create($parent, {
@@ -2480,9 +2450,6 @@ var DataTable = (function (Sortable,Clusterize) {
                 chosenClass: 'dt-cell--dragging',
                 animation: 150
             });
-            };
-
-            $.on(document.body, 'mousemove', initialize);
         }
 
         sortColumn(colIndex, nextSortOrder) {
@@ -2591,11 +2558,9 @@ var DataTable = (function (Sortable,Clusterize) {
 
         setColumnWidth(colIndex, width) {
             colIndex = +colIndex;
-            this._columnWidthMap = this._columnWidthMap || [];
 
             let columnWidth = width || this.getColumn(colIndex).width;
 
-            let index = this._columnWidthMap[colIndex];
             const selector = [
                 `.dt-cell__content--col-${colIndex}`,
                 `.dt-cell__edit--col-${colIndex}`
@@ -2605,11 +2570,7 @@ var DataTable = (function (Sortable,Clusterize) {
                 width: columnWidth + 'px'
             };
 
-            index = this.style.setStyle(selector, styles, index);
+            this.style.setStyle(selector, styles);
-
-            if (index !== undefined) {
-                this._columnWidthMap[colIndex] = index;
-            }
         }
 
         setColumnHeaderWidth(colIndex) {
@@ -3092,32 +3053,50 @@ var DataTable = (function (Sortable,Clusterize) {
             this.styleEl.remove();
         }
 
-        setStyle(selector, styleMap, index = -1) {
+        setStyle(selector, styleObject) {
-            const styles = Object.keys(styleMap)
+            if (selector.includes(',')) {
-                .map(prop => {
+                selector.split(',')
-                    if (!prop.includes('-')) {
+                    .map(s => s.trim())
-                        prop = camelCaseToDash(prop);
+                    .forEach(selector => {
+                        this.setStyle(selector, styleObject);
+                    });
+                return;
             }
-                    return `${prop}:${styleMap[prop]};`;
+
+            this._styleRulesMap = this._styleRulesMap || {};
+            const prefixedSelector = this._getPrefixedSelector(selector);
+
+            if (this._styleRulesMap[prefixedSelector]) {
+                // find and remove
+                const index = Array.from(this.stylesheet.cssRules)
+                    .findIndex(rule => rule.selectorText === prefixedSelector);
+                this.stylesheet.deleteRule(index);
+
+                // merge with old styleobject
+                styleObject = Object.assign({}, this._styleRulesMap[prefixedSelector], styleObject);
+            }
+
+            const styleString = this._getRuleString(styleObject);
+            const ruleString = `${prefixedSelector} { ${styleString} }`;
+
+            this._styleRulesMap[prefixedSelector] = styleObject;
+            this.stylesheet.insertRule(ruleString);
+        }
+
+        _getPrefixedSelector(selector) {
+            return `.${this.scopeClass} ${selector}`;
+        }
+
+        _getRuleString(styleObject) {
+            return Object.keys(styleObject)
+                .map(prop => {
+                    let dashed = prop;
+                    if (!prop.includes('-')) {
+                        dashed = camelCaseToDash(prop);
+                    }
+                    return `${dashed}:${styleObject[prop]};`;
                 })
                 .join('');
-            let prefixedSelector = selector
-                .split(',')
-                .map(r => `.${this.scopeClass} ${r}`)
-                .join(',');
-
-            let ruleString = `${prefixedSelector} { ${styles} }`;
-
-            if (!this.stylesheet) return;
-
-            let _index = this.stylesheet.cssRules.length;
-            if (index !== -1) {
-                this.stylesheet.deleteRule(index);
-                _index = index;
-            }
-
-            this.stylesheet.insertRule(ruleString, _index);
-            return _index; // eslint-disable-line
         }
 
         setDimensions() {
@@ -3280,11 +3259,16 @@ var DataTable = (function (Sortable,Clusterize) {
             this.datamanager.getColumns()
                 .map(column => {
                     // alignment
-                    if (['left', 'center', 'right'].includes(column.align)) {
+                    if (!column.align) {
+                        column.align = 'left';
+                    }
+                    if (!['left', 'center', 'right'].includes(column.align)) {
+                        column.align = 'left';
+                    }
                     this.setStyle(`.dt-cell--col-${column.colIndex}`, {
                         'text-align': column.align
                     });
-                    }
+
                     // width
                     this.columnmanager.setColumnHeaderWidth(column.colIndex);
                     this.columnmanager.setColumnWidth(column.colIndex);
@@ -3657,7 +3641,7 @@ var DataTable = (function (Sortable,Clusterize) {
     DataTable.instances = 0;
 
     var name = "frappe-datatable";
-    var version = "0.0.5";
+    var version = "0.0.7";
     var description = "A modern datatable library for the web";
     var main = "dist/frappe-datatable.cjs.js";
     var scripts = {"start":"yarn run dev","build":"rollup -c","production":"rollup -c --production","build:docs":"rollup -c --docs","dev":"rollup -c -w","test":"mocha --compilers js:babel-core/register --colors ./test/*.spec.js"};

package.json

@@ -1,6 +1,6 @@
 {
   "name": "frappe-datatable",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "description": "A modern datatable library for the web",
   "main": "dist/frappe-datatable.cjs.js",
   "scripts": {

src/cellmanager.js

@@ -110,6 +110,7 @@ export default class CellManager {
 
         this.keyboard.on('esc', () => {
             this.deactivateEditing();
+            this.columnmanager.toggleFilter(false);
         });
 
         if (this.options.inlineFilters) {
@@ -738,7 +739,11 @@ export default class CellManager {
         const editCellHTML = editable ? this.getEditCellHTML(colIndex) : '';
 
         const sortable = isHeader && cell.sortable !== false;
-        const sortIndicator = sortable ? '<span class="sort-indicator"></span>' : '';
+        const sortIndicator = sortable ?
+            `<span class="sort-indicator">
+                ${this.options.sortIndicator[cell.sortOrder]}
+            </span>` :
+            '';
 
         const resizable = isHeader && cell.resizable !== false;
         const resizeColumn = resizable ? '<span class="dt-cell__resize-handle"></span>' : '';

src/columnmanager.js

@@ -30,15 +30,7 @@ export default class ColumnManager {
 
     refreshHeader() {
         const columns = this.datamanager.getColumns();
-        const $cols = $.each('.dt-cell--header', this.header);
 
-        const refreshHTML =
-            // first init
-            !$('.dt-cell', this.header) ||
-            // deleted column
-            columns.length < $cols.length;
-
-        if (refreshHTML) {
         // refresh html
         $('thead', this.header).innerHTML = this.getHeaderHTML(columns);
 
@@ -46,25 +38,9 @@ export default class ColumnManager {
         if (this.$filterRow) {
             $.style(this.$filterRow, { display: 'none' });
         }
-        } else {
-            // update data-attributes
-            $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 = [];
+        this.bindMoveColumn();
     }
 
     getHeaderHTML(columns) {
@@ -82,7 +58,6 @@ export default class ColumnManager {
     bindEvents() {
         this.bindDropdown();
         this.bindResizeColumn();
-        this.bindMoveColumn();
         this.bindFilter();
     }
 
@@ -183,16 +158,6 @@ export default class ColumnManager {
     }
 
     bindMoveColumn() {
-        let initialized;
-
-        const initialize = () => {
-            if (initialized) {
-                $.off(document.body, 'mousemove', initialize);
-                return;
-            }
-            const ready = $('.dt-cell', this.header);
-            if (!ready) return;
-
         const $parent = $('.dt-row', this.header);
 
         this.sortable = Sortable.create($parent, {
@@ -214,9 +179,6 @@ export default class ColumnManager {
             chosenClass: 'dt-cell--dragging',
             animation: 150
         });
-        };
-
-        $.on(document.body, 'mousemove', initialize);
     }
 
     sortColumn(colIndex, nextSortOrder) {
@@ -325,11 +287,9 @@ export default class ColumnManager {
 
     setColumnWidth(colIndex, width) {
         colIndex = +colIndex;
-        this._columnWidthMap = this._columnWidthMap || [];
 
         let columnWidth = width || this.getColumn(colIndex).width;
 
-        let index = this._columnWidthMap[colIndex];
         const selector = [
             `.dt-cell__content--col-${colIndex}`,
             `.dt-cell__edit--col-${colIndex}`
@@ -339,11 +299,7 @@ export default class ColumnManager {
             width: columnWidth + 'px'
         };
 
-        index = this.style.setStyle(selector, styles, index);
+        this.style.setStyle(selector, styles);
-
-        if (index !== undefined) {
-            this._columnWidthMap[colIndex] = index;
-        }
     }
 
     setColumnHeaderWidth(colIndex) {

src/style.js

@@ -44,32 +44,50 @@ export default class Style {
         this.styleEl.remove();
     }
 
-    setStyle(selector, styleMap, index = -1) {
+    setStyle(selector, styleObject) {
-        const styles = Object.keys(styleMap)
+        if (selector.includes(',')) {
-            .map(prop => {
+            selector.split(',')
-                if (!prop.includes('-')) {
+                .map(s => s.trim())
-                    prop = camelCaseToDash(prop);
+                .forEach(selector => {
+                    this.setStyle(selector, styleObject);
+                });
+            return;
         }
-                return `${prop}:${styleMap[prop]};`;
+
+        this._styleRulesMap = this._styleRulesMap || {};
+        const prefixedSelector = this._getPrefixedSelector(selector);
+
+        if (this._styleRulesMap[prefixedSelector]) {
+            // find and remove
+            const index = Array.from(this.stylesheet.cssRules)
+                .findIndex(rule => rule.selectorText === prefixedSelector);
+            this.stylesheet.deleteRule(index);
+
+            // merge with old styleobject
+            styleObject = Object.assign({}, this._styleRulesMap[prefixedSelector], styleObject);
+        }
+
+        const styleString = this._getRuleString(styleObject);
+        const ruleString = `${prefixedSelector} { ${styleString} }`;
+
+        this._styleRulesMap[prefixedSelector] = styleObject;
+        this.stylesheet.insertRule(ruleString);
+    }
+
+    _getPrefixedSelector(selector) {
+        return `.${this.scopeClass} ${selector}`;
+    }
+
+    _getRuleString(styleObject) {
+        return Object.keys(styleObject)
+            .map(prop => {
+                let dashed = prop;
+                if (!prop.includes('-')) {
+                    dashed = camelCaseToDash(prop);
+                }
+                return `${dashed}:${styleObject[prop]};`;
             })
             .join('');
-        let prefixedSelector = selector
-            .split(',')
-            .map(r => `.${this.scopeClass} ${r}`)
-            .join(',');
-
-        let ruleString = `${prefixedSelector} { ${styles} }`;
-
-        if (!this.stylesheet) return;
-
-        let _index = this.stylesheet.cssRules.length;
-        if (index !== -1) {
-            this.stylesheet.deleteRule(index);
-            _index = index;
-        }
-
-        this.stylesheet.insertRule(ruleString, _index);
-        return _index; // eslint-disable-line
     }
 
     setDimensions() {
@@ -232,11 +250,16 @@ export default class Style {
         this.datamanager.getColumns()
             .map(column => {
                 // alignment
-                if (['left', 'center', 'right'].includes(column.align)) {
+                if (!column.align) {
+                    column.align = 'left';
+                }
+                if (!['left', 'center', 'right'].includes(column.align)) {
+                    column.align = 'left';
+                }
                 this.setStyle(`.dt-cell--col-${column.colIndex}`, {
                     'text-align': column.align
                 });
-                }
+
                 // width
                 this.columnmanager.setColumnHeaderWidth(column.colIndex);
                 this.columnmanager.setColumnWidth(column.colIndex);