Skip to content

Commit

Permalink
feat(controls): remove jQuery from Slick Pager control (#762)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ghiscoding
ghiscoding authored May 7, 2023
1 parent c39cdd4 commit ed0507b
Show file tree
Hide file tree
Showing 8 changed files with 440 additions and 417 deletions.
264 changes: 144 additions & 120 deletions controls/slick.pager.js
View file
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

0 comments on commit ed0507b

Please sign in to comment.