Skip to content

Commit

Permalink
fix: replace string literals by string concat to support IE11
Browse files Browse the repository at this point in the history 
- in order to still support IE11, we shoudl replace all string literals (with backtick) with string concatenation
- see https://caniuse.com/template-literals
  • Loading branch information
@ghiscoding
ghiscoding committed Jul 15, 2023
1 parent 4b06690 commit 0864159
Show file tree
Hide file tree
Showing 18 changed files with 108 additions and 109 deletions.
24 changes: 12 additions & 12 deletions controls/slick.columnmenu.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@
_options = Slick.Utils.extend({}, defaults, options);

_menuElm = document.createElement('div');
_menuElm.className = `slick-columnpicker ${_gridUid}`;
_menuElm.className = 'slick-columnpicker ' + _gridUid;
_menuElm.style.display = 'none';
document.body.appendChild(_menuElm);

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

const checkboxElm = document.createElement('input');
checkboxElm.type = 'checkbox';
checkboxElm.id = `${_gridUid}colpicker-${columnId}`;
checkboxElm.id = _gridUid + 'colpicker-' + columnId;
checkboxElm.dataset.columnid = columns[i].id;
liElm.appendChild(checkboxElm);

Expand All @@ -151,7 +151,7 @@
}

const labelElm = document.createElement('label');
labelElm.htmlFor = `${_gridUid}colpicker-${columnId}`;
labelElm.htmlFor = _gridUid + 'colpicker-' + columnId;
labelElm.innerHTML = columnLabel;
liElm.appendChild(labelElm);
_listElm.appendChild(liElm);
Expand All @@ -170,12 +170,12 @@

const forceFitCheckboxElm = document.createElement('input');
forceFitCheckboxElm.type = 'checkbox';
forceFitCheckboxElm.id = `${_gridUid}colpicker-forcefit`;
forceFitCheckboxElm.id = _gridUid + 'colpicker-forcefit';
forceFitCheckboxElm.dataset.option = 'autoresize';
liElm.appendChild(forceFitCheckboxElm);

const labelElm = document.createElement('label');
labelElm.htmlFor = `${_gridUid}colpicker-forcefit`;
labelElm.htmlFor = _gridUid + 'colpicker-forcefit';
labelElm.textContent = forceFitTitle;
liElm.appendChild(labelElm);

Expand All @@ -193,12 +193,12 @@

const syncResizeCheckboxElm = document.createElement('input');
syncResizeCheckboxElm.type = 'checkbox';
syncResizeCheckboxElm.id = `${_gridUid}colpicker-syncresize`;
syncResizeCheckboxElm.id = _gridUid + 'colpicker-syncresize';
syncResizeCheckboxElm.dataset.option = 'syncresize';
liElm.appendChild(syncResizeCheckboxElm);

const labelElm = document.createElement('label');
labelElm.htmlFor = `${_gridUid}colpicker-syncresize`;
labelElm.htmlFor = _gridUid + 'colpicker-syncresize';
labelElm.textContent = syncResizeTitle;
liElm.appendChild(labelElm);

Expand All @@ -212,9 +212,9 @@

function repositionMenu(event) {
const targetEvent = event && event.touches && event.touches[0] || event;
_menuElm.style.top = `${targetEvent.pageY - 10}px`;
_menuElm.style.left = `${targetEvent.pageX - 10}px`;
_menuElm.style.maxHeight = `${window.innerHeight - targetEvent.clientY}px`;
_menuElm.style.top = (targetEvent.pageY - 10) + 'px';
_menuElm.style.left = (targetEvent.pageX - 10) + 'px';
_menuElm.style.maxHeight = (window.innerHeight - targetEvent.clientY) + 'px';
_menuElm.style.display = 'block';
_menuElm.setAttribute('aria-expanded', 'true');
_menuElm.appendChild(_listElm);
Expand Down Expand Up @@ -300,13 +300,13 @@
col.hidden = false;
visibleColumns.splice(idx, 0, col);
} else {
let newVisibleColumns = [];
let newVisibleColumns = [];
for (let i = 0; i < visibleColumns.length; i++) {
if (visibleColumns[i].id !== col.id) { newVisibleColumns.push(visibleColumns[i]); }
}
visibleColumns = newVisibleColumns;
}

_grid.setColumns(visibleColumns);
onColumnsChanged.notify({ columnId: col.id, showing: show, allColumns: columns, columns: visibleColumns, grid: _grid });
}
Expand Down
24 changes: 12 additions & 12 deletions controls/slick.columnpicker.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@
_options = Slick.Utils.extend({}, defaults, options);

_menuElm = document.createElement('div');
_menuElm.className = `slick-columnpicker ${_gridUid}`;
_menuElm.className = 'slick-columnpicker ' + _gridUid;
_menuElm.style.display = 'none';
document.body.appendChild(_menuElm);

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

const checkboxElm = document.createElement('input');
checkboxElm.type = 'checkbox';
checkboxElm.id = `${_gridUid}colpicker-${columnId}`;
checkboxElm.id = _gridUid + 'colpicker-' + columnId;
checkboxElm.dataset.columnid = columns[i].id;
liElm.appendChild(checkboxElm);

Expand All @@ -152,7 +152,7 @@
}

const labelElm = document.createElement('label');
labelElm.htmlFor = `${_gridUid}colpicker-${columnId}`;
labelElm.htmlFor = _gridUid + 'colpicker-' + columnId;
labelElm.innerHTML = columnLabel;
liElm.appendChild(labelElm);
_listElm.appendChild(liElm);
Expand All @@ -171,12 +171,12 @@

const forceFitCheckboxElm = document.createElement('input');
forceFitCheckboxElm.type = 'checkbox';
forceFitCheckboxElm.id = `${_gridUid}colpicker-forcefit`;
forceFitCheckboxElm.id = _gridUid + 'colpicker-forcefit';
forceFitCheckboxElm.dataset.option = 'autoresize';
liElm.appendChild(forceFitCheckboxElm);

const labelElm = document.createElement('label');
labelElm.htmlFor = `${_gridUid}colpicker-forcefit`;
labelElm.htmlFor = _gridUid + 'colpicker-forcefit';
labelElm.textContent = forceFitTitle;
liElm.appendChild(labelElm);

Expand All @@ -194,12 +194,12 @@

const syncResizeCheckboxElm = document.createElement('input');
syncResizeCheckboxElm.type = 'checkbox';
syncResizeCheckboxElm.id = `${_gridUid}colpicker-syncresize`;
syncResizeCheckboxElm.id = _gridUid + 'colpicker-syncresize';
syncResizeCheckboxElm.dataset.option = 'syncresize';
liElm.appendChild(syncResizeCheckboxElm);

const labelElm = document.createElement('label');
labelElm.htmlFor = `${_gridUid}colpicker-syncresize`;
labelElm.htmlFor = _gridUid + 'colpicker-syncresize';
labelElm.textContent = syncResizeTitle;
liElm.appendChild(labelElm);

Expand All @@ -213,9 +213,9 @@

function repositionMenu(event) {
const targetEvent = event && event.touches && event.touches[0] || event;
_menuElm.style.top = `${targetEvent.pageY - 10}px`;
_menuElm.style.left = `${targetEvent.pageX - 10}px`;
_menuElm.style.maxHeight = `${window.innerHeight - targetEvent.clientY}px`;
_menuElm.style.top = (targetEvent.pageY - 10) + 'px';
_menuElm.style.left = (targetEvent.pageX - 10) + 'px';
_menuElm.style.maxHeight = (window.innerHeight - targetEvent.clientY) + 'px';
_menuElm.style.display = 'block';
_menuElm.setAttribute('aria-expanded', 'true');
_menuElm.appendChild(_listElm);
Expand Down Expand Up @@ -301,13 +301,13 @@
col.hidden = false;
visibleColumns.splice(idx, 0, col);
} else {
let newVisibleColumns = [];
let newVisibleColumns = [];
for (let i = 0; i < visibleColumns.length; i++) {
if (visibleColumns[i].id !== col.id) { newVisibleColumns.push(visibleColumns[i]); }
}
visibleColumns = newVisibleColumns;
}

_grid.setColumns(visibleColumns);
onColumnsChanged.notify({ columnId: col.id, showing: show, allColumns: columns, columns: visibleColumns, grid: _grid });
}
Expand Down
36 changes: 18 additions & 18 deletions controls/slick.gridmenu.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -185,18 +185,18 @@
function createGridMenu() {
var gridMenuWidth = (_options.gridMenu && _options.gridMenu.menuWidth) || _defaults.menuWidth;
if (_gridOptions && _gridOptions.hasOwnProperty('frozenColumn') && _gridOptions.frozenColumn >= 0) {
_headerElm = document.querySelector(`.${_gridUid} .slick-header-right`);
_headerElm = document.querySelector('.' + _gridUid + ' .slick-header-right');
} else {
_headerElm = document.querySelector(`.${_gridUid} .slick-header-left`);
_headerElm = document.querySelector('.' + _gridUid + ' .slick-header-left');
}
_headerElm.style.width = `calc(100% - ${gridMenuWidth}px)`;
_headerElm.style.width = 'calc(100% - ' + gridMenuWidth + 'px)';

// if header row is enabled, we need to resize its width also
var enableResizeHeaderRow = (_options.gridMenu && _options.gridMenu.resizeOnShowHeaderRow != undefined) ? _options.gridMenu.resizeOnShowHeaderRow : _defaults.resizeOnShowHeaderRow;
if (enableResizeHeaderRow && _options.showHeaderRow) {
const headerRow = document.querySelector(`.${_gridUid}.slick-headerrow`);
const headerRow = document.querySelector('.' + _gridUid + '.slick-headerrow');
if (headerRow) {
headerRow.style.width = `calc(100% - ${gridMenuWidth}px)`;
headerRow.style.width = 'calc(100% - ' + gridMenuWidth + 'px)';
}
}

Expand All @@ -223,7 +223,7 @@
}

_menuElm = document.createElement('div');
_menuElm.className = `slick-gridmenu ${_gridUid}`;
_menuElm.className = 'slick-gridmenu ' + _gridUid;
_menuElm.style.display = 'none';
document.body.appendChild(_menuElm);

Expand Down Expand Up @@ -276,7 +276,7 @@
/** Delete the menu DOM element but without unsubscribing any events */
function deleteMenu() {
_bindingEventService.unbindAll();
const gridMenuElm = document.querySelector(`div.slick-gridmenu.${_gridUid}`);
const gridMenuElm = document.querySelector('div.slick-gridmenu.' + _gridUid);
if (gridMenuElm) {
gridMenuElm.style.display = 'none';
}
Expand Down Expand Up @@ -450,7 +450,7 @@

const checkboxElm = document.createElement('input');
checkboxElm.type = 'checkbox';
checkboxElm.id = `${_gridUid}-gridmenu-colpicker-${columnId}`;
checkboxElm.id = _gridUid + '-gridmenu-colpicker-' + columnId;
checkboxElm.dataset.columnid = columns[i].id;
liElm.appendChild(checkboxElm);

Expand All @@ -468,7 +468,7 @@
}

const labelElm = document.createElement('label');
labelElm.htmlFor = `${_gridUid}-gridmenu-colpicker-${columnId}`;
labelElm.htmlFor = _gridUid + '-gridmenu-colpicker-' + columnId;
labelElm.innerHTML = columnLabel;
liElm.appendChild(labelElm);
_listElm.appendChild(liElm);
Expand All @@ -488,12 +488,12 @@

const forceFitCheckboxElm = document.createElement('input');
forceFitCheckboxElm.type = 'checkbox';
forceFitCheckboxElm.id = `${_gridUid}-gridmenu-colpicker-forcefit`;
forceFitCheckboxElm.id = _gridUid + '-gridmenu-colpicker-forcefit';
forceFitCheckboxElm.dataset.option = 'autoresize';
liElm.appendChild(forceFitCheckboxElm);

const labelElm = document.createElement('label');
labelElm.htmlFor = `${_gridUid}-gridmenu-colpicker-forcefit`;
labelElm.htmlFor = _gridUid + '-gridmenu-colpicker-forcefit';
labelElm.textContent = forceFitTitle;
liElm.appendChild(labelElm);

Expand All @@ -511,12 +511,12 @@

const syncResizeCheckboxElm = document.createElement('input');
syncResizeCheckboxElm.type = 'checkbox';
syncResizeCheckboxElm.id = `${_gridUid}-gridmenu-colpicker-syncresize`;
syncResizeCheckboxElm.id = _gridUid + '-gridmenu-colpicker-syncresize';
syncResizeCheckboxElm.dataset.option = 'syncresize';
liElm.appendChild(syncResizeCheckboxElm);

const labelElm = document.createElement('label');
labelElm.htmlFor = `${_gridUid}-gridmenu-colpicker-syncresize`;
labelElm.htmlFor = _gridUid + '-gridmenu-colpicker-syncresize';
labelElm.textContent = syncResizeTitle;
liElm.appendChild(labelElm);

Expand All @@ -543,18 +543,18 @@
let nextPositionLeft = (useClickToRepositionMenu && targetEvent.pageX > 0) ? targetEvent.pageX : menuIconOffset.left + 10;
let menuMarginBottom = (_options.gridMenu && _options.gridMenu.marginBottom !== undefined) ? _options.gridMenu.marginBottom : _defaults.marginBottom;

_menuElm.style.top = `${nextPositionTop + 10}px`;
_menuElm.style.left = `${nextPositionLeft - currentMenuWidth + 10}px`;
_menuElm.style.top = nextPositionTop + 10 + 'px';
_menuElm.style.left = (nextPositionLeft - currentMenuWidth + 10) + 'px';

if (contentMinWidth > 0) {
_menuElm.style.minWidth = `${contentMinWidth}px`;
_menuElm.style.minWidth = contentMinWidth + 'px';
}

// set "height" when defined OR ELSE use the "max-height" with available window size and optional margin bottom
if (_options.gridMenu && _options.gridMenu.height !== undefined) {
_menuElm.style.height = `${_options.gridMenu.height}px`;
_menuElm.style.height = _options.gridMenu.height + 'px';
} else {
_menuElm.style.maxHeight = `${window.innerHeight - targetEvent.clientY - menuMarginBottom}px`;
_menuElm.style.maxHeight = (window.innerHeight - targetEvent.clientY - menuMarginBottom) + 'px';
}

_menuElm.style.display = 'block';
Expand Down
2 changes: 1 addition & 1 deletion controls/slick.pager.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -178,7 +178,7 @@
const innerIconElm = document.createElement('span');
innerIconElm.role = 'button';
innerIconElm.ariaLabel = pageBtn.ariaLabel;
innerIconElm.className = `ui-icon ui-icon-seek-${pageBtn.key} slick-icon-seek-${pageBtn.key}`;
innerIconElm.className = 'ui-icon ui-icon-seek-' + pageBtn.key + ' slick-icon-seek-' + pageBtn.key;
_bindingEventService.bind(innerIconElm, 'click', pageBtn.callback);

iconElm.appendChild(innerIconElm);
Expand Down
10 changes: 5 additions & 5 deletions plugins/slick.cellmenu.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -218,12 +218,12 @@
let width = isNaN(_cellMenuProperties.width) ? _cellMenuProperties.width : _cellMenuProperties.width + "px";

_menuElm = document.createElement('div');
_menuElm.className = `slick-cell-menu ${_gridUid}`;
_menuElm.className = 'slick-cell-menu ' + _gridUid;
_menuElm.role = 'menu';
_menuElm.style.width = width;
_menuElm.style.maxHeight = maxHeight;
_menuElm.style.top = `${e.pageY + 5}px`;
_menuElm.style.left = `${e.pageX}px`;
_menuElm.style.top = (e.pageY + 5) + 'px';
_menuElm.style.left = e.pageX + 'px';
_menuElm.style.display = 'none';

const closeButtonElm = document.createElement('button');
Expand Down Expand Up @@ -369,8 +369,8 @@
}

// ready to reposition the menu
_menuElm.style.top = `${menuOffsetTop}px`;
_menuElm.style.left = `${menuOffsetLeft}px`;
_menuElm.style.top = menuOffsetTop + 'px';
_menuElm.style.left = menuOffsetLeft + 'px';
}

function handleCellClick(e, args) {
Expand Down
8 changes: 4 additions & 4 deletions plugins/slick.cellrangedecorator.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,10 +48,10 @@
var to = grid.getCellNodeBox(range.toRow, range.toCell);

if (from && to && options && options.offset) {
_elem.style.top = `${from.top + options.offset.top}px`;
_elem.style.left = `${from.left + options.offset.left}px`;
_elem.style.height = `${to.bottom - from.top + options.offset.height}px`;
_elem.style.width = `${to.right - from.left + options.offset.width}px`;
_elem.style.top = (from.top + options.offset.top) + 'px';
_elem.style.left = (from.left + options.offset.left) + 'px';
_elem.style.height = (to.bottom - from.top + options.offset.height) + 'px';
_elem.style.width = (to.right - from.left + options.offset.width) + 'px';
}

return _elem;
Expand Down
4 changes: 2 additions & 2 deletions plugins/slick.cellrangeselector.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,7 +105,7 @@
_isBottomCanvas = _activeCanvas.classList.contains('grid-canvas-bottom');

if (_gridOptions.frozenRow > -1 && _isBottomCanvas) {
const canvasSelector = `.${_grid.getUID()} .grid-canvas-${_gridOptions.frozenBottom ? 'bottom' : 'top'}`;
const canvasSelector = '.' + _grid.getUID() + ' .grid-canvas-' + _gridOptions.frozenBottom ? 'bottom' : 'top';
const canvasElm = document.querySelector(canvasSelector);
if (canvasElm) {
_rowOffset = canvasElm.clientHeight || 0;
Expand All @@ -115,7 +115,7 @@
_isRightCanvas = _activeCanvas.classList.contains('grid-canvas-right');

if (_gridOptions.frozenColumn > -1 && _isRightCanvas) {
const canvasLeftElm = document.querySelector(`.${_grid.getUID()} .grid-canvas-left`);
const canvasLeftElm = document.querySelector('.' + _grid.getUID() + ' .grid-canvas-left');
if (canvasLeftElm) {
_columnOffset = canvasLeftElm.clientWidth || 0;
}
Expand Down
8 changes: 4 additions & 4 deletions plugins/slick.checkboxselectcolumn.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -152,7 +152,7 @@
renderSelectAllCheckbox(_isSelectAllChecked);
}
if (!_options.hideInFilterHeaderRow) {
const selectAllElm = _headerRowNode && _headerRowNode.querySelector(`#header-filter-selector${_selectAll_UID}`);
const selectAllElm = _headerRowNode && _headerRowNode.querySelector('#header-filter-selector' + _selectAll_UID);
if (selectAllElm) {
selectAllElm.checked = _isSelectAllChecked;
}
Expand Down Expand Up @@ -194,7 +194,7 @@
renderSelectAllCheckbox(_isSelectAllChecked);
}
if (!_options.hideInFilterHeaderRow) {
const selectAllElm = _headerRowNode && _headerRowNode.querySelector(`#header-filter-selector${_selectAll_UID}`);
const selectAllElm = _headerRowNode && _headerRowNode.querySelector('#header-filter-selector' + _selectAll_UID);
if (selectAllElm) {
selectAllElm.checked = _isSelectAllChecked;
}
Expand Down Expand Up @@ -350,10 +350,10 @@

const inputElm = document.createElement('input');
inputElm.type = 'checkbox';
inputElm.id = `header-filter-selector${_selectAll_UID}`;
inputElm.id = 'header-filter-selector' + _selectAll_UID;

const labelElm = document.createElement('label');
labelElm.htmlFor = `header-filter-selector${_selectAll_UID}`;
labelElm.htmlFor = 'header-filter-selector' + _selectAll_UID;

spanElm.appendChild(inputElm);
spanElm.appendChild(labelElm);
Expand Down
Loading

0 comments on commit 0864159

Please sign in to comment.