fixed copy function, fixed tree scrolling bug, made css section less …

…ugly
TonyGermaneri · Dec 10, 2016 · 2fe85e2 · 2fe85e2
1 parent dd1fad2
commit 2fe85e2
Show file tree

Hide file tree

Showing 3 changed files with 92 additions and 36 deletions.
diff --git a/bower.json b/bower.json
@@ -1,7 +1,7 @@
 {
   "name": "canvas-datagrid",
   "main": "lib/main.js",
-  "version": "0.9.14",
+  "version": "0.9.15",
   "ignore": [
     "**/.*",
     "node_modules",

diff --git a/lib/main.js b/lib/main.js
@@ -50,7 +50,7 @@
                 ['editCellFontSize', '16px'],
                 ['editCellFontFamily', 'sans-serif'],
                 ['editCellPaddingLeft', 4],
-                ['contextMenuStyleSheet', false],
+                ['styleSheet', ''],
                 ['contextMenuItemMargin', '2px'],
                 ['contextMenuItemBorderRadius', '3px'],
                 ['contextMenuLabelDisplay', 'inline-block'],
@@ -1778,24 +1778,75 @@
             window.removeEventListener('resize', resize);
         }
         function attachCss() {
-            var styleSheet, css = [
-                '.canvas-datagrid-canvas { z-index: -1; }',
-                '.canvas-datagrid-scrollBox { overflow: auto!important; z-index: 1!important; }',
-                '.canvas-datagrid { background: <backgroundColor>;z-index: 1;box-sizing: content-box!important; padding: 0!important; }',
-                '.canvas-datagrid-edit-input { box-sizing: content-box!important; outline: none!important; margin: 0!important; padding: 0 0 0 <editCellPaddingLeft>px!important;',
-                'font-size: <editCellFontSize>!important; font-family: <editCellFontFamily>!important; }',
-                '.canvas-datagrid-context-menu-item { margin: <contextMenuItemMargin>; border-radius: <contextMenuItemBorderRadius>; }',
-                '.canvas-datagrid-context-menu-item:hover { background: <contextMenuHoverBackground>;',
-                ' color: <contextMenuHoverColor>; margin: <contextMenuItemMargin>; }',
-                '.canvas-datagrid-context-menu-label { display: <contextMenuLabelDisplay>; min-width: <contextMenuLabelMinWidth>; }',
-                '.canvas-datagrid-context-menu { font-family: <contextMenuFontFamily>;',
-                'font-size: <contextMenuFontSize>; background: <contextMenuBackground>; color: <contextMenuColor>;',
-                'border: <contextMenuBorder>; padding: <contextMenuPadding>;',
-                ' border-radius: <contextMenuBorderRadius>; opacity: <contextMenuOpacity>;}',
-                '.canvas-datagrid-invalid-search-regExp { background: <contextMenuFilterInvalidExpresion>; }'
-            ].join('\n');
-            Object.keys(style).forEach(function (i) {
-                css = css.replace('<' + i + '>', style[i]);
+            var styleSheet,
+                styleSheetBody = [],
+                css = {
+                    'canvas-datagrid-canvas': {
+                        position: 'absolute!important',
+                        'z-index': '-1'
+                    },
+                    'canvas-datagrid-scrollBox': {
+                        position: 'absolute!important',
+                        overflow: 'auto!important',
+                        'z-index': '1!important'
+                    },
+                    'canvas-datagrid': {
+                        position: 'absolute!important',
+                        background: style.backgroundColor,
+                        'z-index': '1',
+                        'box-sizing': 'content-box!important',
+                        padding: '0!important'
+                    },
+                    'canvas-datagrid-control-input': {
+                        position: 'absolute!important',
+                        border: 'none!important',
+                        background: 'transparet!important',
+                        opacity: '0!important',
+                        cursor: 'pointer!important',
+                        width: '1px',
+                        height: '1px'
+                    },
+                    'canvas-datagrid-edit-input': {
+                        'box-sizing': 'content-box!important',
+                        outline: 'none!important',
+                        margin: '0!important',
+                        padding: '0 0 0 ' + style.editCellPaddingLeft + 'px!important',
+                        'font-size': style.editCellFontSize + '!important',
+                        'font-family': style.editCellFontFamily + '!important'
+                    },
+                    'canvas-datagrid-context-menu-item': {
+                        margin: style.contextMenuItemMargin,
+                        'border-radius': style.contextMenuItemBorderRadius
+                    },
+                    'canvas-datagrid-context-menu-item:hover': {
+                        background: style.contextMenuHoverBackground,
+                        color: style.contextMenuHoverColor,
+                        margin: style.contextMenuItemMargin
+                    },
+                    'canvas-datagrid-context-menu-label': {
+                        display: style.contextMenuLabelDisplay,
+                        'min-width': style.contextMenuLabelMinWidth
+                    },
+                    'canvas-datagrid-context-menu': {
+                        'font-family': style.contextMenuFontFamily,
+                        'font-size': style.contextMenuFontSize,
+                        background: style.contextMenuBackground,
+                        color: style.contextMenuColor,
+                        border: style.contextMenuBorder,
+                        padding: style.contextMenuPadding,
+                        'border-radius': style.contextMenuBorderRadius,
+                        opacity: style.contextMenuOpacity
+                    },
+                    'canvas-datagrid-invalid-search-regExp': {
+                        background: style.contextMenuFilterInvalidExpresion
+                    }
+                };
+            Object.keys(css).forEach(function (className) {
+                styleSheetBody.push('.' + className + '{');
+                Object.keys(css[className]).forEach(function (propertyName) {
+                    styleSheetBody.push(propertyName + ':' + css[className][propertyName] + ';');
+                });
+                styleSheetBody.push('}');
             });
             if (document.getElementById(uniqueId)) {
                 return;
@@ -1808,7 +1859,8 @@
             } else {
                 document.head.appendChild(styleSheet);
             }
-            styleSheet.href = 'data:text/css;base64,' + btoa(style.contextMenuStyleSheet || css);
+            styleSheet.href = 'data:text/css;base64,'
+                + btoa(style.styleSheet || styleSheetBody.join(''));
         }
         function hideChildGrids() {
             Object.keys(childGrids).forEach(function (gridId) {
@@ -1825,7 +1877,9 @@
             function resizeChildGrid() {
                 var rowId = cell.data[uniqueId];
                 if (cell.style === 'tree') {
-                    childGridContainer.style.width = parentGrid.canvas.offsetWidth
+                    childGridContainer.style.width =
+                        (attributes.treeHorizontalScroll
+                            ? parentGrid.scrollWidth + headerCellWidth : parentGrid.canvas.offsetWidth)
                         - headerCellWidth + 'px';
                     childGridContainer.style.height = (parentGrid.sizes.rows[rowId]
                         || parentGrid.style.treeGridHeight) - parentGrid.style.cellBorderWidth
@@ -1835,7 +1889,8 @@
                         || cell.width) - parentGrid.style.cellBorderWidth + 'px';
                     childGridContainer.style.height = (parentGrid.sizes.rows[rowId]
                         || parentGrid.style.cellHeight)
-                        - (parentGrid.openChildren[rowId] ? intf.originalRowHeight : 0) - parentGrid.style.cellBorderWidth + 'px';
+                        - (parentGrid.openChildren[rowId] ? intf.originalRowHeight : 0)
+                        - parentGrid.style.cellBorderWidth + 'px';
                 }
                 args.parentNode = childGridContainer;
                 draw();
@@ -1875,16 +1930,7 @@
             canvas.className = 'canvas-datagrid-canvas';
             container.className = 'canvas-datagrid';
             scrollBox.className = 'canvas-datagrid-scrollBox';
-            controlInput.style.outline = 'none';
-            controlInput.style.border = 'none';
-            controlInput.style.background = 'transparet';
-            controlInput.style.opacity = '0';
-            controlInput.style.height = '1px';
-            controlInput.style.width = '1px';
-            controlInput.style.cursor = 'pointer';
-            [container, scrollBox, canvas, controlInput].forEach(function eachEle(el) {
-                el.style.position = 'absolute';
-            });
+            controlInput.className = 'canvas-datagrid-control-input';
             window.addEventListener('resize', function resizeEvent() { requestAnimationFrame(resize); });
             if (container.parentNode) {
                 container.parentNode.addEventListener('resize', resize);
@@ -1899,8 +1945,18 @@
             container.addEventListener('contextmenu', contextmenu, false);
             container.addEventListener('mousemove', mousemove, false);
             container.addEventListener('copy', function (e) {
-                var sData = getSelectedData();
-                e.clipboardData.setData('text/plain', sData);
+                var rows = [], sData = getSelectedData();
+                sData.forEach(function (row) {
+                    if (row) {
+                        var r = [];
+                        Object.keys(row).forEach(function (key) {
+                            r.push(row[key]);
+                        });
+                        r.join(',');
+                        rows.push(r);
+                    }
+                });
+                e.clipboardData.setData('text/plain', rows.join('\n'));
                 e.preventDefault();
             });
             scrollBox.addEventListener('scroll', scroll, false);

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "canvas-datagrid",
-  "version": "0.9.14",
+  "version": "0.9.15",
   "description": "Canvas based data grid",
   "main": "./lib/main.js",
   "scripts": {