Skip to content

Commit

Permalink
chore: better use of DOM element creation and innerHTML (#770)
Browse files Browse the repository at this point in the history 
- also remove `passive` mode to certain events that use preventDefault since that is not compatible with `passive` mode
  • Loading branch information
@ghiscoding
ghiscoding authored May 13, 2023
1 parent b62e25d commit 84b2319
Show file tree
Hide file tree
Showing 4 changed files with 29 additions and 37 deletions.
4 changes: 2 additions & 2 deletions cypress/integration/example-grid-menu.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
import '@4tw/cypress-drag-drop';

describe('Example - Grid Menu', () => {
const fullTitles = ['#', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J'];
const fullTitles = ['', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J'];

beforeEach(() => {
// create a console.log spy for later use
Expand Down Expand Up @@ -53,7 +53,7 @@ describe('Example - Grid Menu', () => {
});

it('should click on the Grid Menu to hide the column "A"', () => {
const expectedTitleList = ['#', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J']; // without "A"
const expectedTitleList = ['', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J']; // without "A"

cy.get('#myGrid')
.find('button.slick-gridmenu-button')
Expand Down
4 changes: 3 additions & 1 deletion examples/example-grid-menu.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -245,7 +245,9 @@ <h2>View Source:</h2>
]
}
};
var columns = [{ id: 'id', field: 'id', name: '#', width: 40, excludeFromGridMenu: true }];

// show 1st column with font-awesome hashtag icon
var columns = [{ id: 'id', field: 'id', name: '<i class="fa fa-hashtag"></i>', width: 40, excludeFromGridMenu: true }];
var columnFilters = {};
var sortcol = "id";
var sortdir = 1;
Expand Down
54 changes: 22 additions & 32 deletions slick.grid.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1080,8 +1080,9 @@ if (typeof Slick === "undefined") {
});

header.setAttribute("title", toolTip || "");
if(title !== undefined)
header.children[0].innerHTML = title;
if (title !== undefined) {
header.children[0].innerHTML = sanitizeHtmlString(title);
}

trigger(self.onHeaderCellRendered, {
"node": header,
Expand Down Expand Up @@ -1221,13 +1222,14 @@ if (typeof Slick === "undefined") {
frozenColumnsValid = true;
}

const el = utils.createDomElement('div', { className: 'ui-state-default slick-group-header-column' }, hasFrozenColumns() && (columnsLength - 1) > options.frozenColumn ? _groupHeadersR[index] : _groupHeadersL[index]);
el.innerHTML = "<span class='slick-column-name'>" + m.name + "</span>";
el.setAttribute("id", "" + uid + m.id);
el.setAttribute("title", m.toolTip || "");
el.classList.add(m.headerCssClass || "")
el.classList.add(hasFrozenColumns() && (columnsLength - 1) > options.frozenColumn? 'frozen': '');
utils.storage.put(el, "column", m);
const el = utils.createDomElement('div',
{ id: `${uid + m.id}`, className: 'ui-state-default slick-group-header-column', title: m.toolTip || '' },
hasFrozenColumns() && (columnsLength - 1) > options.frozenColumn ? _groupHeadersR[index] : _groupHeadersL[index]
);
utils.createDomElement('span', { className: 'slick-column-name', innerHTML: sanitizeHtmlString(m.name) }, el);
el.classList.add(m.headerCssClass || "")
el.classList.add(hasFrozenColumns() && (columnsLength - 1) > options.frozenColumn ? 'frozen' : '');
utils.storage.put(el, "column", m);
}

if (hasFrozenColumns() && index === 0 && !frozenColumnsValid) {
Expand Down Expand Up @@ -1325,13 +1327,9 @@ if (typeof Slick === "undefined") {
const headerTarget = hasFrozenColumns() ? ((i <= options.frozenColumn) ? _headerL : _headerR) : _headerL;
const headerRowTarget = hasFrozenColumns() ? ((i <= options.frozenColumn) ? _headerRowL : _headerRowR) : _headerRowL;

const header = utils.createDomElement('div', { className: 'ui-state-default slick-header-column' }, headerTarget);

header.innerHTML = "<span class='slick-column-name'>" + m.name + "</span>";
const header = utils.createDomElement('div', { id: `${uid + m.id}`, dataset: { id: m.id }, className: 'ui-state-default slick-header-column', title: m.toolTip || '' }, headerTarget);
utils.createDomElement('span', { className: 'slick-column-name', innerHTML: sanitizeHtmlString(m.name) }, header);
utils.width(header, m.width - headerColumnWidthDiff);
header.setAttribute("id", "" + uid + m.id);
header.setAttribute("title", m.toolTip || "");
header.setAttribute("data-id", m.id);

let classname = m.headerCssClass || null;
if (classname) {
Expand Down Expand Up @@ -2141,8 +2139,7 @@ if (typeof Slick === "undefined") {
}

function createCssRules() {
const template = document.createElement('template');
template.innerHTML = '<style type="text/css" rel="stylesheet" />';
const template = utils.createDomElement('template', { innerHTML: '<style type="text/css" rel="stylesheet" />' });
_style = template.content.firstChild;
document.head.appendChild(_style);

Expand Down Expand Up @@ -2820,10 +2817,9 @@ if (typeof Slick === "undefined") {
clone.parentNode.removeChild(clone);
} else {
// headers have not yet been created, create a new node
var header = getHeader(columnDef);
headerColEl = utils.createDomElement('div', { className: 'ui-state-default slick-header-column' }, header);
headerColEl.innerHTML = `<span class="slick-column-name">${columnDef.name}</span>`;
headerColEl.id = dummyHeaderColElId;
let header = getHeader(columnDef);
headerColEl = utils.createDomElement('div', { id: dummyHeaderColElId, className: 'ui-state-default slick-header-column', }, header);
utils.createDomElement('span', { className: 'slick-column-name', innerHTML: sanitizeHtmlString(columnDef.name) }, headerColEl);
clone.style.cssText = 'position: absolute; visibility: hidden;right: auto;text-overflow: initial;white-space: nowrap;';
headerColEl.classList.add(columnDef.headerCssClass || '');
width = headerColEl.offsetWidth;
Expand Down Expand Up @@ -3458,7 +3454,7 @@ if (typeof Slick === "undefined") {

var frozenRowOffset = getFrozenRowOffset(row);

var rowHtml = "<div class='ui-widget-content " + rowCss + "' style='top:" + (getRowTop(row) - frozenRowOffset) + "px'>";
var rowHtml = `<div class="ui-widget-content ${rowCss}" style="top:${(getRowTop(row) - frozenRowOffset)}px">`;

stringArrayL.push(rowHtml);

Expand Down Expand Up @@ -3513,8 +3509,7 @@ if (typeof Slick === "undefined") {
// item: grid data for row

var m = columns[cell];
var cellCss = "slick-cell l" + cell + " r" + Math.min(columns.length - 1, cell + colspan - 1) +
(m.cssClass ? " " + m.cssClass : "");
var cellCss = "slick-cell l" + cell + " r" + Math.min(columns.length - 1, cell + colspan - 1) + (m.cssClass ? " " + m.cssClass : "");

if (hasFrozenColumns() && cell <= options.frozenColumn) {
cellCss += (" frozen");
Expand Down Expand Up @@ -4198,9 +4193,7 @@ if (typeof Slick === "undefined") {
return;
}

var x = document.createElement("div");
x.innerHTML = sanitizeHtmlString(stringArray.join(""));

var x = utils.createDomElement('div', { innerHTML: sanitizeHtmlString(stringArray.join('')) });
var processedRow;
var node;
while ((processedRow = processedRows.pop()) != null) {
Expand Down Expand Up @@ -4260,11 +4253,8 @@ if (typeof Slick === "undefined") {

if (!rows.length) { return; }

var x = document.createElement("div"),
xRight = document.createElement("div");

x.innerHTML = sanitizeHtmlString(stringArrayL.join(""));
xRight.innerHTML = sanitizeHtmlString(stringArrayR.join(""));
let x = utils.createDomElement('div', { innerHTML: sanitizeHtmlString(stringArrayL.join('')) });
let xRight = utils.createDomElement('div', { innerHTML: sanitizeHtmlString(stringArrayR.join('')) });

for (var i = 0, ii = rows.length; i < ii; i++) {
if (( hasFrozenRows ) && ( rows[i] >= actualFrozenRow )) {
Expand Down
4 changes: 2 additions & 2 deletions slick.interactions.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -204,7 +204,7 @@
function destroy() {
if (resizeableHandleElement && typeof resizeableHandleElement.removeEventListener === 'function') {
resizeableHandleElement.removeEventListener('mousedown', resizeStartHandler);
resizeableHandleElement.removeEventListener('touchstart', resizeStartHandler, Slick.Utils.enablePassiveWhenSupported());
resizeableHandleElement.removeEventListener('touchstart', resizeStartHandler);
}
}

Expand Down Expand Up @@ -247,7 +247,7 @@

// add event listeners on the draggable element
resizeableHandleElement.addEventListener('mousedown', resizeStartHandler);
resizeableHandleElement.addEventListener('touchstart', resizeStartHandler, Slick.Utils.enablePassiveWhenSupported());
resizeableHandleElement.addEventListener('touchstart', resizeStartHandler);

return { destroy };
}
Expand Down

0 comments on commit 84b2319

Please sign in to comment.