Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(plugins): remove jQuery from header buttons/menus plugins #748

Merged
merged 1 commit into from
May 1, 2023
Merged

feat(plugins): remove jQuery from header buttons/menus plugins #748

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 34 additions & 1 deletion cypress/integration/example-plugin-headerbuttons.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -122,14 +122,47 @@ describe('Example - Header Button', () => {
.invoke('show');

cy.get('.slick-header-column:nth(0)')
.should('have.css', 'width', '140px');
.should($el => expect(parseInt(`${$el.width()}`, 10)).to.eq(140));

cy.get('.slick-header-columns')
.children('.slick-header-column:nth(0)')
.find('.slick-header-button')
.should('have.length', 4);
});

it('should click on first "Red Tag Day" header button and expect an alert with that text when clicked', (done) => {
const stub = cy.stub();
cy.on('window:alert', stub);

cy.on('window:alert', (text) => {
expect(text).to.eq('command: Red Tag Day');
done();
});

// header buttons are displayed in inverse mode by default,
// so we need to start at the end
cy.get('.slick-header-columns')
.children('.slick-header-column:nth(0)')
.find('.slick-header-button:nth(3)')
.click();
});

it('should click on second "Write a comment!" header button and expect an alert with that text when clicked', (done) => {
const stub = cy.stub();
cy.on('window:alert', stub);

cy.on('window:alert', (text) => {
expect(text).to.eq('Write a comment!');
done();
});

// header buttons are displayed in inverse mode by default
cy.get('.slick-header-columns')
.children('.slick-header-column:nth(0)')
.find('.slick-header-button:nth(2)')
.click();
});

it('should go on the 2nd column "Hover me!" and expect the header button to appear only when doing hover over it', () => {
cy.get('.slick-header-columns')
.children('.slick-header-column:nth(1)')
Expand Down
43 changes: 21 additions & 22 deletions examples/example-plugin-headerbuttons.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,6 @@ <h2>View Source:</h2>

<script src="../lib/firebugx.js"></script>

<script src="../lib/jquery-3.1.0.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sortablejs/Sortable.min.js"></script>

<script src="../slick.core.js"></script>
Expand Down Expand Up @@ -161,33 +160,33 @@ <h2>View Source:</h2>



$(function () {
grid = new Slick.Grid("#myGrid", data, columns, options);
(function () {
grid = new Slick.Grid("#myGrid", data, columns, options);

var headerButtonsPlugin = new Slick.Plugins.HeaderButtons();
var headerButtonsPlugin = new Slick.Plugins.HeaderButtons();

headerButtonsPlugin.onCommand.subscribe(function (e, args) {
var column = args.column;
var button = args.button;
var command = args.command;
headerButtonsPlugin.onCommand.subscribe(function (e, args) {
var column = args.column;
var button = args.button;
var command = args.command;

if (command == "toggle-highlight") {
if (button.cssClass == "icon-highlight-on") {
delete columnsWithHighlightingById[column.id];
button.cssClass = "icon-highlight-off";
button.tooltip = "Highlight negative numbers."
} else {
columnsWithHighlightingById[column.id] = true;
button.cssClass = "icon-highlight-on";
button.tooltip = "Remove highlight."
}

grid.invalidate();
if (command == "toggle-highlight") {
if (button.cssClass == "icon-highlight-on") {
delete columnsWithHighlightingById[column.id];
button.cssClass = "icon-highlight-off";
button.tooltip = "Highlight negative numbers."
} else {
columnsWithHighlightingById[column.id] = true;
button.cssClass = "icon-highlight-on";
button.tooltip = "Remove highlight."
}
});

grid.registerPlugin(headerButtonsPlugin);
grid.invalidate();
}
});

grid.registerPlugin(headerButtonsPlugin);
})();
</script>
</body>

Expand Down
53 changes: 24 additions & 29 deletions plugins/slick.headerbuttons.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
(function ($) {
(function (window) {
// register namespace
$.extend(true, window, {
Slick.Utils.extend(true, window, {
"Slick": {
"Plugins": {
"HeaderButtons": HeaderButtons
Expand Down Expand Up @@ -78,13 +78,14 @@
var _grid;
var _self = this;
var _handler = new Slick.EventHandler();
var _bindingEventService = new Slick.BindingEventService();
var _defaults = {
buttonCssClass: "slick-header-button"
};


function init(grid) {
options = $.extend(true, {}, _defaults, options);
options = Slick.Utils.extend(true, {}, _defaults, options);
_grid = grid;
_handler
.subscribe(_grid.onHeaderCellRendered, handleHeaderCellRendered)
Expand All @@ -97,6 +98,7 @@

function destroy() {
_handler.unsubscribeAll();
_bindingEventService.unbindAll();
}


Expand Down Expand Up @@ -124,42 +126,35 @@
button.disabled = isItemUsable ? false : true;
}

var btn = $("<div></div>")
.addClass(options.buttonCssClass)
.data("column", column)
.data("button", button);
const btn = document.createElement('div');
btn.className = options.buttonCssClass;

if (button.disabled) {
btn.addClass("slick-header-button-disabled");
btn.classList.add("slick-header-button-disabled");
}

if (button.showOnHover) {
btn.addClass("slick-header-button-hidden");
btn.classList.add("slick-header-button-hidden");
}

if (button.image) {
btn.css("backgroundImage", "url(" + button.image + ")");
btn.style.backgroundImage = "url(" + button.image + ")";
}

if (button.cssClass) {
btn.addClass(button.cssClass);
btn.classList.add(button.cssClass);
}

if (button.tooltip) {
btn.attr("title", button.tooltip);
}

if (button.command) {
btn.data("command", button.command);
btn.title = button.tooltip;
}

if (button.handler) {
btn.on("click", button.handler);
_bindingEventService.bind(btn, 'click', button.handler);
}

btn
.on("click", handleButtonClick)
.appendTo(args.node);
_bindingEventService.bind(btn, 'click', handleButtonClick.bind(this, button, args.column));
args.node.appendChild(btn);
}
}
}
Expand All @@ -172,17 +167,17 @@
// Removing buttons via jQuery will also clean up any event handlers and data.
// NOTE: If you attach event handlers directly or using a different framework,
// you must also clean them up here to avoid memory leaks.
$(args.node).find("." + options.buttonCssClass).remove();
const buttonCssClass = (options.buttonCssClass || '').replace(/(\s+)/g, '.');
if (buttonCssClass) {
args.node.querySelectorAll(`.${buttonCssClass}`).forEach(elm => elm.remove());
}
}
}


function handleButtonClick(e) {
var command = $(this).data("command");
var columnDef = $(this).data("column");
var button = $(this).data("button");

var callbackArgs = {
function handleButtonClick(button, columnDef, e) {
const command = button.command || '';
const callbackArgs = {
"grid": _grid,
"column": columnDef,
"button": button
Expand Down Expand Up @@ -222,12 +217,12 @@
return true;
}

$.extend(this, {
Slick.Utils.extend(this, {
"init": init,
"destroy": destroy,
"pluginName": "HeaderButtons",

"onCommand": new Slick.Event()
});
}
})(jQuery);
})(window);
Loading