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(controls): remove jQuery from Slick Pager control #762

Merged
merged 1 commit into from
May 7, 2023
Merged

feat(controls): remove jQuery from Slick Pager control #762

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
264 changes: 144 additions & 120 deletions controls/slick.pager.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,39 +1,37 @@
(function ($) {
function SlickGridPager(dataView, grid, $container, options) {
var $status;
var _options;
var _defaults = {
(function (window) {
// Slick.Controls.Pager
Slick.Utils.extend(true, window, {
"Slick": {
"Controls": {
"Pager": SlickGridPager
}
}
});

function SlickGridPager(dataView, grid, selectorOrElm, options) {
// the container might be a string, a jQuery object or a native element
const container = getContainerElement(selectorOrElm);

let statusElm;
let _options;
let _defaults = {
showAllText: "Showing all {rowCount} rows",
showPageText: "Showing page {pageNum} of {pageCount}",
showCountText: "From {countBegin} to {countEnd} of {rowCount} rows",
showCount: false,
pagingOptions:[
{
data: 0,
name: "All"
},
{
data: -1,
name: "Auto"
},
{
data: 25,
name: "25"
},
{
data: 50,
name: "50"
},
{
data: 100,
name: "100"
}
pagingOptions: [
{ data: 0, name: "All" },
{ data: -1, name: "Auto" },
{ data: 25, name: "25" },
{ data: 50, name: "50" },
{ data: 100, name: "100" }
],
showPageSizes: false
};
var _bindingEventService = new Slick.BindingEventService();

function init() {
_options = $.extend(true, {}, _defaults, options);
_options = Slick.Utils.extend(true, {}, _defaults, options);

dataView.onPagingInfoChanged.subscribe(function (e, pagingInfo) {
updatePager(pagingInfo);
Expand All @@ -43,10 +41,17 @@
updatePager(dataView.getPagingInfo());
}

/** Destroy function when element is destroyed */
function destroy() {
setPageSize(0);
_bindingEventService.unbindAll();
container.innerHTML = '';
}

function getNavState() {
var cannotLeaveEditMode = !Slick.GlobalEditorLock.commitCurrentEdit();
var pagingInfo = dataView.getPagingInfo();
var lastPage = pagingInfo.totalPages - 1;
let cannotLeaveEditMode = !Slick.GlobalEditorLock.commitCurrentEdit();
let pagingInfo = dataView.getPagingInfo();
let lastPage = pagingInfo.totalPages - 1;

return {
canGotoFirst: !cannotLeaveEditMode && pagingInfo.pageSize !== 0 && pagingInfo.pageNum > 0,
Expand All @@ -71,153 +76,172 @@
}

function gotoLast() {
var state = getNavState();
let state = getNavState();
if (state.canGotoLast) {
dataView.setPagingOptions({pageNum: state.pagingInfo.totalPages - 1});
}
}

function gotoPrev() {
var state = getNavState();
let state = getNavState();
if (state.canGotoPrev) {
dataView.setPagingOptions({pageNum: state.pagingInfo.pageNum - 1});
}
}

function gotoNext() {
var state = getNavState();
let state = getNavState();
if (state.canGotoNext) {
dataView.setPagingOptions({pageNum: state.pagingInfo.pageNum + 1});
}
}

function constructPagerUI() {
$container.empty();

var $nav = $("<span class='slick-pager-nav' />").appendTo($container);
var $settings = $("<span class='slick-pager-settings' />").appendTo($container);
$status = $("<span class='slick-pager-status' />").appendTo($container);

var pagingOptions = '';

for (var o = 0; o < _options.pagingOptions.length; o++)
{
var p = _options.pagingOptions[o];
function getContainerElement(selectorOrElm) {
// the container might be a string, a jQuery object or a native element
return typeof selectorOrElm === 'string'
? document.querySelector(selectorOrElm)
: typeof selectorOrElm === 'object' && selectorOrElm[0]
? selectorOrElm[0]
: selectorOrElm;
}

pagingOptions += "<a data=" +p.data + ">" + p.name + "</a>";
function constructPagerUI() {
// the container might be a string, a jQuery object or a native element
const container = getContainerElement(selectorOrElm);

const navElm = document.createElement('span');
navElm.className = 'slick-pager-nav';

const settingsElm = document.createElement('span');
settingsElm.className = 'slick-pager-settings';

statusElm = document.createElement('span');
statusElm.className = 'slick-pager-status';

const pagerSettingsElm = document.createElement('span');
pagerSettingsElm.className = 'slick-pager-settings-expanded';
pagerSettingsElm.textContent = 'Show: ';

for (let o = 0; o < _options.pagingOptions.length; o++) {
let p = _options.pagingOptions[o];

const anchorElm = document.createElement('a');
anchorElm.textContent = p.name;
anchorElm.dataset.val = p.data;
pagerSettingsElm.appendChild(anchorElm);

_bindingEventService.bind(anchorElm, 'click', (function (e) {
let pagesize = e.target.dataset.val;
if (pagesize !== undefined) {
if (Number(pagesize) === -1) {
let vp = grid.getViewport();
setPageSize(vp.bottom - vp.top);
} else {
setPageSize(parseInt(pagesize));
}
}
}));
}

pagingOptions = $("<span class='slick-pager-settings-expanded'>Show: " + pagingOptions + "</span>");
pagerSettingsElm.style.display = _options.showPageSizes ? 'block' : 'none';

if (_options.showPageSizes)
{
pagingOptions.show();
}
else
{
pagingOptions.hide();
}
settingsElm.appendChild(pagerSettingsElm);

$settings
.append(pagingOptions);

$settings.find("a[data]").click(function (e) {
var pagesize = $(e.target).attr("data");
if (pagesize !== undefined) {
if (pagesize == -1) {
var vp = grid.getViewport();
setPageSize(vp.bottom - vp.top);
} else {
setPageSize(parseInt(pagesize));
}
}
});
// light bulb icon
const displayPaginationContainer = document.createElement('span');
const displayIconElm = document.createElement('span');
displayPaginationContainer.className = 'ui-state-default ui-corner-all ui-icon-container';
displayIconElm.className = 'ui-icon ui-icon-lightbulb slick-icon-lightbulb';
displayPaginationContainer.appendChild(displayIconElm);

var icon_prefix = "<span class='ui-state-default ui-corner-all ui-icon-container'><span class='ui-icon ";
var icon_suffix = "' /></span>";
_bindingEventService.bind(displayIconElm, 'click', () => {
const styleDisplay = pagerSettingsElm.style.display;
pagerSettingsElm.style.display = styleDisplay === 'none' ? 'inline' : 'none';
});
settingsElm.appendChild(displayPaginationContainer);

$(icon_prefix + "ui-icon-lightbulb slick-icon-lightbulb" + icon_suffix)
.click(function () {
$(".slick-pager-settings-expanded").toggle();
})
.appendTo($settings);
const directions = [
{ key: 'first', callback: gotoFirst },
{ key: 'prev', callback: gotoPrev },
{ key: 'next', callback: gotoNext },
{ key: 'end', callback: gotoLast },
];

$(icon_prefix + "ui-icon-seek-first slick-icon-seek-first" + icon_suffix)
.click(gotoFirst)
.appendTo($nav);
directions.forEach(direction => {
const iconElm = document.createElement('span');
iconElm.className = 'ui-state-default ui-corner-all ui-icon-container';

$(icon_prefix + "ui-icon-seek-prev slick-icon-seek-prev" + icon_suffix)
.click(gotoPrev)
.appendTo($nav);
const innerIconElm = document.createElement('span');
innerIconElm.className = `ui-icon ui-icon-seek-${direction.key} slick-icon-seek-${direction.key}`;
_bindingEventService.bind(innerIconElm, 'click', direction.callback);

$(icon_prefix + "ui-icon-seek-next slick-icon-seek-next" + icon_suffix)
.click(gotoNext)
.appendTo($nav);
iconElm.appendChild(innerIconElm);
navElm.appendChild(iconElm);
});

$(icon_prefix + "ui-icon-seek-end slick-icon-seek-end" + icon_suffix)
.click(gotoLast)
.appendTo($nav);
const slickPagerElm = document.createElement('div');
slickPagerElm.className = 'slick-pager';

$container.find(".ui-icon-container")
.hover(function () {
$(this).toggleClass("ui-state-hover");
});
slickPagerElm.appendChild(navElm);
slickPagerElm.appendChild(settingsElm);
slickPagerElm.appendChild(statusElm);

$container.children().wrapAll("<div class='slick-pager' />");
container.appendChild(slickPagerElm);
}


function updatePager(pagingInfo) {
var state = getNavState();
let state = getNavState();

// remove disabled class on all icons
container.querySelectorAll(".slick-pager-nav span")
.forEach(pagerIcon => pagerIcon.classList.remove("ui-state-disabled", "slick-icon-state-disabled"));

$container.find(".slick-pager-nav span").removeClass("ui-state-disabled");
$container.find(".slick-pager-nav span").removeClass("slick-icon-state-disabled");
// add back disabled class to only necessary icons
if (!state.canGotoFirst) {
$container.find(".ui-icon-seek-first").addClass("ui-state-disabled");
$container.find(".slick-icon-seek-first").addClass("slick-icon-state-disabled");
container.querySelector(".ui-icon-seek-first").classList.add("ui-state-disabled");
container.querySelector(".slick-icon-seek-first").classList.add("slick-icon-state-disabled");
}
if (!state.canGotoLast) {
$container.find(".ui-icon-seek-end").addClass("ui-state-disabled");
$container.find(".slick-icon-seek-end").addClass("slick-icon-state-disabled");
container.querySelector(".ui-icon-seek-end").classList.add("ui-state-disabled");
container.querySelector(".slick-icon-seek-end").classList.add("slick-icon-state-disabled");
}
if (!state.canGotoNext) {
$container.find(".ui-icon-seek-next").addClass("ui-state-disabled");
$container.find(".slick-icon-seek-next").addClass("slick-icon-state-disabled");
container.querySelector(".ui-icon-seek-next").classList.add("ui-state-disabled");
container.querySelector(".slick-icon-seek-next").classList.add("slick-icon-state-disabled");
}
if (!state.canGotoPrev) {
$container.find(".ui-icon-seek-prev").addClass("ui-state-disabled");
$container.find(".slick-icon-seek-prev").addClass("slick-icon-state-disabled");
container.querySelector(".ui-icon-seek-prev").classList.add("ui-state-disabled");
container.querySelector(".slick-icon-seek-prev").classList.add("slick-icon-state-disabled");
}

if (pagingInfo.pageSize === 0) {
$status.text(_options.showAllText.replace('{rowCount}', pagingInfo.totalRows + "").replace('{pageCount}', pagingInfo.totalPages + ""));
statusElm.textContent = (_options.showAllText.replace('{rowCount}', pagingInfo.totalRows + "").replace('{pageCount}', pagingInfo.totalPages + ""));
} else {
$status.text(_options.showPageText.replace('{pageNum}', pagingInfo.pageNum + 1 + "").replace('{pageCount}', pagingInfo.totalPages + ""));
statusElm.textContent = (_options.showPageText.replace('{pageNum}', pagingInfo.pageNum + 1 + "").replace('{pageCount}', pagingInfo.totalPages + ""));
}

if (_options.showCount && pagingInfo.pageSize!==0)
{
var pageBegin = pagingInfo.pageNum * pagingInfo.pageSize;
var currentText = $status.text();
if (_options.showCount && pagingInfo.pageSize !== 0) {
let pageBegin = pagingInfo.pageNum * pagingInfo.pageSize;
let currentText = statusElm.textContent;

if (currentText)
{
if (currentText) {
currentText += " - ";
}

$status.text(
statusElm.textContent =
currentText +
_options.showCountText
.replace('{rowCount}', pagingInfo.totalRows + "")
.replace("{countBegin}", pageBegin + 1)
.replace("{countEnd}", Math.min(pageBegin + pagingInfo.pageSize, pagingInfo.totalRows))
);
.replace("{countEnd}", Math.min(pageBegin + pagingInfo.pageSize, pagingInfo.totalRows));
}
}

init();
}

// Slick.Controls.Pager
$.extend(true, window, { Slick:{ Controls:{ Pager:SlickGridPager }}});
})(jQuery);
Slick.Utils.extend(this, {
"init": init,
"destroy": destroy,
});
}
})(window);
Loading