MDL-66293 javascript: Added support to set bar size for paging bars
This commit is contained in:
Shamim Rezaie
+1
-1
@@ -1 +1 @@
|
||||
define(["jquery","core/custom_interaction_events","core/paged_content_events","core/str","core/pubsub"],function(a,b,c,d,e){var f={ROOT:'[data-region="paging-bar"]',PAGE:"[data-page]",PAGE_ITEM:'[data-region="page-item"]',PAGE_LINK:'[data-region="page-link"]',FIRST_BUTTON:'[data-control="first"]',LAST_BUTTON:'[data-control="last"]',NEXT_BUTTON:'[data-control="next"]',PREVIOUS_BUTTON:'[data-control="previous"]'},g=function(a,b){return a.find(f.PAGE_ITEM+'[data-page-number="'+b+'"]')},h=function(a){return a.find(f.NEXT_BUTTON)},i=function(a,b){a.attr("data-last-page-number",b)},j=function(a){return parseInt(a.attr("data-last-page-number"),10)},k=function(a){return parseInt(a.attr("data-active-page-number"),10)},l=function(a,b){a.attr("data-active-page-number",b)},m=function(a){var b=k(a);return!isNaN(b)&&0!=b},n=function(a,b){if(void 0!=b.attr("data-page"))return parseInt(b.attr("data-page-number"),10);var c=1,d=null;switch(b.attr("data-control")){case"first":c=1;break;case"last":c=j(a);break;case"next":d=k(a);var e=j(a);c=e?d&&d<e?d+1:e:d+1;break;case"previous":d=k(a),c=d&&d>1?d-1:1;break;default:c=1}return parseInt(c,10)},o=function(a){return parseInt(a.attr("data-items-per-page"),10)},p=function(a,b){a.attr("data-items-per-page",b)},q=function(a){a.removeClass("hidden")},r=function(a){a.addClass("hidden")},s=function(a){var b=a.find(f.NEXT_BUTTON),c=a.find(f.LAST_BUTTON);b.addClass("disabled"),b.attr("aria-disabled",!0),c.addClass("disabled"),c.attr("aria-disabled",!0)},t=function(a){var b=a.find(f.NEXT_BUTTON),c=a.find(f.LAST_BUTTON);b.removeClass("disabled"),b.removeAttr("aria-disabled"),c.removeClass("disabled"),c.removeAttr("aria-disabled")},u=function(a){var b=a.find(f.PREVIOUS_BUTTON),c=a.find(f.FIRST_BUTTON);b.addClass("disabled"),b.attr("aria-disabled",!0),c.addClass("disabled"),c.attr("aria-disabled",!0)},v=function(a){var b=a.find(f.PREVIOUS_BUTTON),c=a.find(f.FIRST_BUTTON);b.removeClass("disabled"),b.removeAttr("aria-disabled"),c.removeClass("disabled"),c.removeAttr("aria-disabled")},w=function(a){var b=a.attr("data-aria-label-components-pagination-item"),c=b.split(",").map(function(a){return a.trim()});return c},x=function(a){var b=a.attr("data-aria-label-components-pagination-active-item"),c=b.split(",").map(function(a){return a.trim()});return c},y=function(b,c){var d=0;l(b,0),c.each(function(c,e){var f=c+1;e=a(e),e.attr("data-page-number",f),d++,e.hasClass("active")&&l(b,f)}),i(b,d)},z=function(b){var c=w(b),e=x(b),g=k(b),h=b.find(f.PAGE_ITEM),i=h.map(function(d,f){f=a(f);var h=n(b,f);return h===g?{key:e[0],component:e[1],param:h}:{key:c[0],component:c[1],param:h}});d.get_strings(i).then(function(b){return h.each(function(c,d){d=a(d);var e=b[c];d.attr("aria-label",e),d.find(f.PAGE_LINK).attr("aria-label",e)}),b})["catch"](function(){})},A=function(a,b,d){var h=j(a),i=b==k(a),m=o(a),n=(b-1)*m;if(!i){a.find(f.PAGE_ITEM).removeClass("active").removeAttr("aria-current");var p=g(a,b);p.addClass("active"),p.attr("aria-current",!0),l(a,b)}h&&b>=h?s(a):t(a),b>1?v(a):u(a),z(a),e.publish(d+c.SHOW_PAGES,[{pageNumber:b,limit:m,offset:n}])},B=function(d,g){var h=d.attr("data-ignore-control-while-loading"),k=!1;""==h&&(h=!0),b.define(d,[b.events.activate]),d.on(b.events.activate,f.PAGE_ITEM,function(b,c){if(c.originalEvent.preventDefault(),c.originalEvent.stopPropagation(),!h||!k){var e=a(b.target).closest(f.PAGE_ITEM);if(!e.hasClass("disabled")){var i=n(d,e);A(d,i,g),k=!0}}}),e.subscribe(g+c.ALL_ITEMS_LOADED,function(a){k=!1;var b=j(d);(!b||a<b)&&i(d,a),1===a&&d.attr("data-hide-control-on-single-page")?(r(d),s(d),u(d)):(q(d),s(d))}),e.subscribe(g+c.PAGES_SHOWN,function(){k=!1}),e.subscribe(g+c.SET_ITEMS_PER_PAGE_LIMIT,function(a){p(d,a),i(d,0),l(d,0),q(d),A(d,1,g)})},C=function(b,c){b=a(b);var d=b.find(f.PAGE);if(y(b,d),B(b,c),m(b)){var e=k(b);g(b,e).click(),1==e&&u(b)}else h(b).click()};return{init:C,disableNextControlButtons:s,enableNextControlButtons:t,disablePreviousControlButtons:u,enablePreviousControlButtons:v,showPage:A,rootSelector:f.ROOT}});
|
||||
define(["jquery","core/custom_interaction_events","core/paged_content_events","core/str","core/pubsub"],function(a,b,c,d,e){var f={ROOT:'[data-region="paging-bar"]',PAGE:"[data-page]",PAGE_ITEM:'[data-region="page-item"]',PAGE_LINK:'[data-region="page-link"]',FIRST_BUTTON:'[data-control="first"]',LAST_BUTTON:'[data-control="last"]',NEXT_BUTTON:'[data-control="next"]',PREVIOUS_BUTTON:'[data-control="previous"]',DOTS_BUTTONS:"[data-dots]",BEGINNING_DOTS_BUTTON:'[data-dots="beginning"]',ENDING_DOTS_BUTTON:'[data-dots="ending"]'},g=function(a,b){return a.find(f.PAGE_ITEM+'[data-page-number="'+b+'"]')},h=function(a){return a.find(f.NEXT_BUTTON)},i=function(a,b){a.attr("data-last-page-number",b)},j=function(a){return parseInt(a.attr("data-last-page-number"),10)},k=function(a){return parseInt(a.attr("data-active-page-number"),10)},l=function(a,b){a.attr("data-active-page-number",b)},m=function(a){var b=k(a);return!isNaN(b)&&0!=b},n=function(a,b){if(void 0!=b.attr("data-page"))return parseInt(b.attr("data-page-number"),10);var c=1,d=null;switch(b.attr("data-control")){case"first":c=1;break;case"last":c=j(a);break;case"next":d=k(a);var e=j(a);c=e?d&&d<e?d+1:e:d+1;break;case"previous":d=k(a),c=d&&d>1?d-1:1;break;default:c=1}return parseInt(c,10)},o=function(a){return parseInt(a.attr("data-items-per-page"),10)},p=function(a,b){a.attr("data-items-per-page",b)},q=function(a){a.removeClass("hidden")},r=function(a){a.addClass("hidden")},s=function(a){var b=a.find(f.NEXT_BUTTON),c=a.find(f.LAST_BUTTON);b.addClass("disabled"),b.attr("aria-disabled",!0),c.addClass("disabled"),c.attr("aria-disabled",!0)},t=function(a){var b=a.find(f.NEXT_BUTTON),c=a.find(f.LAST_BUTTON);b.removeClass("disabled"),b.removeAttr("aria-disabled"),c.removeClass("disabled"),c.removeAttr("aria-disabled")},u=function(a){var b=a.find(f.PREVIOUS_BUTTON),c=a.find(f.FIRST_BUTTON);b.addClass("disabled"),b.attr("aria-disabled",!0),c.addClass("disabled"),c.attr("aria-disabled",!0)},v=function(b){var c=k(b),d=j(b),e=b.find(f.DOTS_BUTTONS),g=b.find(f.BEGINNING_DOTS_BUTTON),h=b.find(f.ENDING_DOTS_BUTTON),i=b.find(f.PAGE),l=parseInt(b.attr("data-bar-size"),10);if(l&&d>l){var m=Math.max(c-Math.round(l/2),1),n=m+l-1;n>=d&&(n=d,m=n-l+1),m>1?(q(g),m++):r(g),n<d?(q(h),n--):r(h),e.addClass("disabled"),e.attr("aria-disabled",!0),r(i),i.each(function(b,c){c=a(c),b+1>=m&&b+1<=n&&q(c)})}else r(e)},w=function(a){var b=a.find(f.PREVIOUS_BUTTON),c=a.find(f.FIRST_BUTTON);b.removeClass("disabled"),b.removeAttr("aria-disabled"),c.removeClass("disabled"),c.removeAttr("aria-disabled")},x=function(a){var b=a.attr("data-aria-label-components-pagination-item"),c=b.split(",").map(function(a){return a.trim()});return c},y=function(a){var b=a.attr("data-aria-label-components-pagination-active-item"),c=b.split(",").map(function(a){return a.trim()});return c},z=function(b,c){var d=0;l(b,0),c.each(function(c,e){var f=c+1;e=a(e),e.attr("data-page-number",f),d++,e.hasClass("active")&&l(b,f)}),i(b,d)},A=function(b){var c=x(b),e=y(b),g=k(b),h=b.find(f.PAGE_ITEM),i=h.map(function(d,f){f=a(f);var h=n(b,f);return h===g?{key:e[0],component:e[1],param:h}:{key:c[0],component:c[1],param:h}});d.get_strings(i).then(function(b){return h.each(function(c,d){d=a(d);var e=b[c];d.attr("aria-label",e),d.find(f.PAGE_LINK).attr("aria-label",e)}),b})["catch"](function(){})},B=function(a,b,d){var h=j(a),i=b==k(a),m=o(a),n=(b-1)*m;if(!i){a.find(f.PAGE_ITEM).removeClass("active").removeAttr("aria-current");var p=g(a,b);p.addClass("active"),p.attr("aria-current",!0),l(a,b),v(a)}h&&b>=h?s(a):t(a),b>1?w(a):u(a),A(a),e.publish(d+c.SHOW_PAGES,[{pageNumber:b,limit:m,offset:n}])},C=function(d,g){var h=d.attr("data-ignore-control-while-loading"),k=!1;""==h&&(h=!0),b.define(d,[b.events.activate]),d.on(b.events.activate,f.PAGE_ITEM,function(b,c){if(c.originalEvent.preventDefault(),c.originalEvent.stopPropagation(),!h||!k){var e=a(b.target).closest(f.PAGE_ITEM);if(!e.hasClass("disabled")){var i=n(d,e);B(d,i,g),k=!0}}}),e.subscribe(g+c.ALL_ITEMS_LOADED,function(a){k=!1;var b=j(d);(!b||a<b)&&i(d,a),1===a&&d.attr("data-hide-control-on-single-page")?(r(d),s(d),u(d)):(q(d),s(d))}),e.subscribe(g+c.PAGES_SHOWN,function(){k=!1}),e.subscribe(g+c.SET_ITEMS_PER_PAGE_LIMIT,function(a){p(d,a),i(d,0),l(d,0),q(d),B(d,1,g)})},D=function(b,c){b=a(b);var d=b.find(f.PAGE);if(z(b,d),C(b,c),m(b)){var e=k(b);g(b,e).click(),1==e&&u(b)}else h(b).click();v(b)};return{init:D,disableNextControlButtons:s,enableNextControlButtons:t,disablePreviousControlButtons:u,enablePreviousControlButtons:w,showPage:B,rootSelector:f.ROOT}});
|
||||
@@ -20,21 +20,20 @@
|
||||
* @copyright 2018 Ryan Wyllie <[email protected]>
|
||||
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
|
||||
*/
|
||||
define(
|
||||
[
|
||||
'jquery',
|
||||
'core/custom_interaction_events',
|
||||
'core/paged_content_events',
|
||||
'core/str',
|
||||
'core/pubsub'
|
||||
],
|
||||
function(
|
||||
$,
|
||||
CustomEvents,
|
||||
PagedContentEvents,
|
||||
Str,
|
||||
PubSub
|
||||
) {
|
||||
define([
|
||||
'jquery',
|
||||
'core/custom_interaction_events',
|
||||
'core/paged_content_events',
|
||||
'core/str',
|
||||
'core/pubsub'
|
||||
],
|
||||
function(
|
||||
$,
|
||||
CustomEvents,
|
||||
PagedContentEvents,
|
||||
Str,
|
||||
PubSub
|
||||
) {
|
||||
|
||||
var SELECTORS = {
|
||||
ROOT: '[data-region="paging-bar"]',
|
||||
@@ -44,7 +43,10 @@ define(
|
||||
FIRST_BUTTON: '[data-control="first"]',
|
||||
LAST_BUTTON: '[data-control="last"]',
|
||||
NEXT_BUTTON: '[data-control="next"]',
|
||||
PREVIOUS_BUTTON: '[data-control="previous"]'
|
||||
PREVIOUS_BUTTON: '[data-control="previous"]',
|
||||
DOTS_BUTTONS: '[data-dots]',
|
||||
BEGINNING_DOTS_BUTTON: '[data-dots="beginning"]',
|
||||
ENDING_DOTS_BUTTON: '[data-dots="ending"]',
|
||||
};
|
||||
|
||||
/**
|
||||
@@ -259,6 +261,61 @@ define(
|
||||
firstButton.attr('aria-disabled', true);
|
||||
};
|
||||
|
||||
/**
|
||||
* Adjusts the size of the paging bar and hides unnecessary pages.
|
||||
*
|
||||
* @param {object} root The root element.
|
||||
*/
|
||||
var adjustPagingBarSize = function(root) {
|
||||
var activePageNumber = getActivePageNumber(root);
|
||||
var lastPageNumber = getLastPageNumber(root);
|
||||
|
||||
var dotsButtons = root.find(SELECTORS.DOTS_BUTTONS);
|
||||
var beginningDotsButton = root.find(SELECTORS.BEGINNING_DOTS_BUTTON);
|
||||
var endingDotsButton = root.find(SELECTORS.ENDING_DOTS_BUTTON);
|
||||
|
||||
var pages = root.find(SELECTORS.PAGE);
|
||||
var barSize = parseInt(root.attr('data-bar-size'), 10);
|
||||
|
||||
if (barSize && lastPageNumber > barSize) {
|
||||
|
||||
var minpage = Math.max(activePageNumber - Math.round(barSize / 2), 1);
|
||||
var maxpage = minpage + barSize - 1;
|
||||
|
||||
if (maxpage >= lastPageNumber) {
|
||||
maxpage = lastPageNumber;
|
||||
minpage = maxpage - barSize + 1;
|
||||
}
|
||||
|
||||
if (minpage > 1) {
|
||||
show(beginningDotsButton);
|
||||
minpage++;
|
||||
} else {
|
||||
hide(beginningDotsButton);
|
||||
}
|
||||
if (maxpage < lastPageNumber) {
|
||||
show(endingDotsButton);
|
||||
maxpage--;
|
||||
} else {
|
||||
hide(endingDotsButton);
|
||||
}
|
||||
dotsButtons.addClass('disabled');
|
||||
dotsButtons.attr('aria-disabled', true);
|
||||
|
||||
hide(pages);
|
||||
|
||||
pages.each(function(index, page) {
|
||||
page = $(page);
|
||||
if ((index + 1) >= minpage && (index + 1) <= maxpage) {
|
||||
show(page);
|
||||
}
|
||||
});
|
||||
|
||||
} else {
|
||||
hide(dotsButtons);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Enable the previous and first buttons in the paging bar.
|
||||
*
|
||||
@@ -407,6 +464,8 @@ define(
|
||||
page.addClass('active');
|
||||
page.attr('aria-current', true);
|
||||
setActivePageNumber(root, pageNumber);
|
||||
|
||||
adjustPagingBarSize(root);
|
||||
}
|
||||
|
||||
// Make sure the control buttons are disabled as the user navigates
|
||||
@@ -546,6 +605,8 @@ define(
|
||||
// the next button. This allows the infinite pagination to work.
|
||||
getNextButton(root).click();
|
||||
}
|
||||
|
||||
adjustPagingBarSize(root);
|
||||
};
|
||||
|
||||
return {
|
||||
|
||||
@@ -141,6 +141,9 @@
|
||||
{{^arialabels.paginationactivenavitemcomponents}}
|
||||
data-aria-label-components-pagination-active-item="pagedcontentnavigationactiveitem, core"
|
||||
{{/arialabels.paginationactivenavitemcomponents}}
|
||||
{{#barsize}}
|
||||
data-bar-size="{{.}}"
|
||||
{{/barsize}}
|
||||
>
|
||||
|
||||
<ul class="pagination mb-0">
|
||||
@@ -161,11 +164,27 @@
|
||||
{{$attributes}}data-control="first"{{/attributes}}
|
||||
{{/ core/paged_content_paging_bar_item }}
|
||||
{{/first}}
|
||||
{{#barsize}}
|
||||
{{< core/paged_content_paging_bar_item }}
|
||||
{{$item-content}}
|
||||
<span aria-hidden="true">…</span>
|
||||
{{/item-content}}
|
||||
{{$attributes}}data-dots="beginning"{{/attributes}}
|
||||
{{/ core/paged_content_paging_bar_item }}
|
||||
{{/barsize}}
|
||||
{{#pages}}
|
||||
{{< core/paged_content_paging_bar_item }}
|
||||
{{$attributes}}data-page="true"{{/attributes}}
|
||||
{{/ core/paged_content_paging_bar_item }}
|
||||
{{/pages}}
|
||||
{{#barsize}}
|
||||
{{< core/paged_content_paging_bar_item }}
|
||||
{{$item-content}}
|
||||
<span aria-hidden="true">…</span>
|
||||
{{/item-content}}
|
||||
{{$attributes}}data-dots="ending"{{/attributes}}
|
||||
{{/ core/paged_content_paging_bar_item }}
|
||||
{{/barsize}}
|
||||
{{#last}}
|
||||
{{< core/paged_content_paging_bar_item }}
|
||||
{{$item-content}}
|
||||
|
||||
Reference in New Issue
Block a user