From 2fe85e248b776d061e721de3f20a4a1a52234803 Mon Sep 17 00:00:00 2001 From: Tony Germaneri Date: Fri, 9 Dec 2016 20:30:58 -0800 Subject: [PATCH] fixed copy function, fixed tree scrolling bug, made css section less ugly --- bower.json | 2 +- lib/main.js | 124 +++++++++++++++++++++++++++++++++++++-------------- package.json | 2 +- 3 files changed, 92 insertions(+), 36 deletions(-) diff --git a/bower.json b/bower.json index 66c1d793..20fe23ee 100644 --- 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 index 87d3e760..7c978e6f 100644 --- 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: ;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 px!important;', - 'font-size: !important; font-family: !important; }', - '.canvas-datagrid-context-menu-item { margin: ; border-radius: ; }', - '.canvas-datagrid-context-menu-item:hover { background: ;', - ' color: ; margin: ; }', - '.canvas-datagrid-context-menu-label { display: ; min-width: ; }', - '.canvas-datagrid-context-menu { font-family: ;', - 'font-size: ; background: ; color: ;', - 'border: ; padding: ;', - ' border-radius: ; opacity: ;}', - '.canvas-datagrid-invalid-search-regExp { background: ; }' - ].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 index ca8e9505..cef6fe65 100644 --- 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": {