diff --git a/lib/amd/build/paged_content_paging_bar.min.js b/lib/amd/build/paged_content_paging_bar.min.js index 99ef99de133..01423d22a17 100644 --- a/lib/amd/build/paged_content_paging_bar.min.js +++ b/lib/amd/build/paged_content_paging_bar.min.js @@ -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&&d1?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||a1?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=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 * @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 { diff --git a/lib/templates/paged_content_paging_bar.mustache b/lib/templates/paged_content_paging_bar.mustache index 15fe2234938..c8e36a40a6a 100644 --- a/lib/templates/paged_content_paging_bar.mustache +++ b/lib/templates/paged_content_paging_bar.mustache @@ -141,6 +141,9 @@ {{^arialabels.paginationactivenavitemcomponents}} data-aria-label-components-pagination-active-item="pagedcontentnavigationactiveitem, core" {{/arialabels.paginationactivenavitemcomponents}} + {{#barsize}} + data-bar-size="{{.}}" + {{/barsize}} >
    @@ -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}} + + {{/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}} + + {{/item-content}} + {{$attributes}}data-dots="ending"{{/attributes}} + {{/ core/paged_content_paging_bar_item }} + {{/barsize}} {{#last}} {{< core/paged_content_paging_bar_item }} {{$item-content}}