@ebay/ebayui-core - npm Package Compare versions

Comparing version 1.0.0-0 to 1.0.0-1

dist/components/ebay-pagination/index.js

@@ -18,9 +18,3 @@ 'use strict';var processHtmlAttributes = require('../../common/html-attributes');
     var inputItems = input.items || [];
-    var hijax = input.hijax || false;
-    var role = void 0;
 
-    if (hijax) {
-        role = 'button';
-    }
-
     for (var i = 0; i < inputItems.length; ++i) {
@@ -30,3 +24,2 @@ var item = inputItems[i];
         var current = item.current;
-
         var tempItem = {
@@ -36,10 +29,10 @@ htmlAttributes: processHtmlAttributes(item),
             renderBody: item.renderBody,
-            role: role,
             href: href,
-            current: Boolean(current) || false };
+            current: current };
 
+
         if (item.type === 'previous') {
             prevItem = tempItem;
             prevItem.class = ['pagination__previous', item.class];
-            prevItem.disabled = Boolean(item.disabled) || !href;
+            prevItem.disabled = item.disabled;
             continue;
@@ -49,7 +42,9 @@ } else if (item.type === 'next') {
             nextItem.class = ['pagination__next', item.class];
-            nextItem.disabled = Boolean(item.disabled) || !href;
+            nextItem.disabled = item.disabled;
             continue;
         } else {
             tempItem.class = ['pagination__item', item.class];
+            tempItem.current = item.current;
         }
+
         items.push(tempItem);
@@ -62,3 +57,2 @@ }
         style: input.style,
-        hijax: hijax,
         nextItem: nextItem || { class: 'pagination__next', disabled: true, htmlAttributes: {} },
@@ -84,24 +78,70 @@ prevItem: prevItem || { class: 'pagination__previous', disabled: true, htmlAttributes: {} },
     this.subscribeTo(eventUtils.resizeUtil).on('resize', refresh.bind(this));
+    this.timeoutRef = 0;
     this.refresh();
 }
 
+function onBeforeUpdate() {
+    clearTimeout(this.timeoutRef);
+}
+
+function onDestroy() {
+    clearTimeout(this.timeoutRef);
+}
+
+function onUpdate() {
+    this.timeoutRef = setTimeout(this.refresh.bind(this), 0);
+}
+
 function refresh() {
-    var containerWidth = this.containerEl.offsetWidth;
-    var pageNumWidth = this.pageEls[0].offsetWidth + constants.margin;
-    var numPagesAllowed = Math.floor(containerWidth / pageNumWidth) - constants.indexForNavigation;
-    var adjustedNumPages = Math.min(constants.maxPagesAllowed,
-    Math.max(numPagesAllowed, constants.minPagesRequired));
-    var totalPages = this.pageEls.length;
-
-    // Let's show all the pages that we can.
-    for (var i = 5; i < adjustedNumPages && i < totalPages; ++i) {
-        if (this.pageEls[i].hasAttribute('hidden')) {
+    var current = 0;
+    for (var i = 0; i < this.state.items.length; i++) {
+        if (this.state.items[i].current) {
+            current = i;
+        } else {
+            // remove all hidden attribues to get accurate widths
             this.pageEls[i].removeAttribute('hidden');
         }
     }
+    var totalPages = this.pageEls.length;
+    var pageNumWidth = this.pageEls[current].offsetWidth + constants.margin;
+    var containerWidth = this.containerEl.offsetWidth - pageNumWidth * 2;
+    var numPagesAllowed = Math.floor(containerWidth / pageNumWidth);
+    var adjustedNumPages = Math.min(constants.maxPagesAllowed - 1,
+    Math.max(numPagesAllowed, constants.minPagesRequired));
 
-    // Now that we are showing all the pages that we can, lets hide remaining pages.
-    for (var _i = adjustedNumPages; _i < totalPages; ++_i) {
-        this.pageEls[_i].setAttribute('hidden', true);
+    var start = 0;
+    var end = adjustedNumPages;
+    var rangeLeft = Math.floor(adjustedNumPages * 0.5);
+    var rangeRight = Math.floor(adjustedNumPages * 0.5);
+
+    start = current - rangeLeft;
+    end = current + rangeRight;
+    if (end > totalPages) {
+        start -= end - totalPages;
     }
+
+    if (totalPages < constants.maxPagesAllowed) {
+        end = totalPages;
+    }
+
+    if (totalPages - current < rangeRight) {
+        start -= rangeRight - (totalPages - current);
+    }
+
+    if (start < 0) {
+        end -= start;
+        start = 0;
+    }
+
+    if (end - start < constants.minPagesRequired && end === totalPages && start > 0) {
+        start = end - constants.minPagesRequired;
+    }
+
+    for (var _i = 0; _i < totalPages; _i++) {
+        if (_i < start || _i > end) {
+            this.pageEls[_i].setAttribute('hidden', true);
+        } else {
+            this.pageEls[_i].removeAttribute('hidden');
+        }
+    }
 }
@@ -115,4 +155,7 @@
     var target = originalEvent.target;
-    eventUtils.preventDefaultIfHijax(originalEvent, this.state.hijax);
-    emitAndFire(this, 'pagination-select', { originalEvent: originalEvent, el: target, value: target.innerText });
+    emitAndFire(this, 'pagination-select', {
+        originalEvent: originalEvent,
+        el: target,
+        value: target.innerText });
+
 }
@@ -122,4 +165,6 @@
     if (!this.state.nextItem.disabled) {
-        eventUtils.preventDefaultIfHijax(originalEvent, this.state.hijax);
-        emitAndFire(this, 'pagination-next', { originalEvent: originalEvent, el: this.nextPageEl });
+        emitAndFire(this, 'pagination-next', {
+            originalEvent: originalEvent,
+            el: this.nextPageEl });
+
     }
@@ -130,4 +175,6 @@ }
     if (!this.state.prevItem.disabled) {
-        eventUtils.preventDefaultIfHijax(originalEvent, this.state.hijax);
-        emitAndFire(this, 'pagination-previous', { originalEvent: originalEvent, el: this.previousPageEl });
+        emitAndFire(this, 'pagination-previous', {
+            originalEvent: originalEvent,
+            el: this.previousPageEl });
+
     }
@@ -161,2 +208,5 @@ }
     init: init,
+    onUpdate: onUpdate,
+    onBeforeUpdate: onBeforeUpdate,
+    onDestroy: onDestroy,
     refresh: refresh,
@@ -163,0 +213,0 @@ handlePageClick: handlePageClick,

dist/components/ebay-pagination/mock/index.js

@@ -10,7 +10,7 @@ 'use strict';var renderBody = function renderBody(stream) {return stream.write('1');};
             type: 'previous',
-            href: 'https://www.ebay.com/' },
+            href: '#' },
 
         {
             renderBody: renderBody,
-            href: 'https://www.ebay.com/' },
+            href: '#' },
 
@@ -20,63 +20,162 @@ {
             renderBody: renderBody,
-            href: 'https://www.ebay.com/' },
+            href: '#' },
 
         {
             renderBody: renderBody,
-            href: 'https://www.ebay.com/' },
+            href: '#' },
 
         {
             renderBody: renderBody,
-            href: 'https://www.ebay.com/' },
+            href: '#' },
 
         {
             renderBody: renderBody,
-            href: 'https://www.ebay.com/' },
+            href: '#' },
 
         {
             renderBody: renderBody,
-            href: 'https://www.ebay.com/' },
+            href: '#' },
 
         {
             renderBody: renderBody,
-            href: 'https://www.ebay.com/' },
+            href: '#' },
 
         {
             renderBody: renderBody,
-            href: 'https://www.ebay.com/' },
+            href: '#' },
 
         {
             renderBody: renderBody,
-            href: 'https://www.ebay.com/' },
+            href: '#' },
 
         {
             type: 'next',
-            href: 'https://www.ebay.com/' }] },
+            href: '#' }] },
 
 
 
-    hijax: {
+    FifthSelected: {
         a11yPreviousText: 'Previous page',
         a11yNextText: 'Next page',
         a11yCurrentText: 'Results Pagination - Page 2',
-        hijax: true,
         items: [
         {
             type: 'previous',
-            href: 'https://www.ebay.com/' },
+            href: '#' },
 
         {
+            renderBody: renderBody,
+            href: '#' },
+
+        {
+            renderBody: renderBody,
+            href: '#' },
+
+        {
+            renderBody: renderBody,
+            href: '#' },
+
+        {
+            renderBody: renderBody,
+            href: '#' },
+
+        {
             current: true,
             renderBody: renderBody,
-            href: 'https://www.ebay.com/' },
+            href: '#' },
 
         {
             renderBody: renderBody,
-            href: 'https://www.ebay.com/' },
+            href: '#' },
 
         {
+            renderBody: renderBody,
+            href: '#' },
+
+        {
+            renderBody: renderBody,
+            href: '#' },
+
+        {
+            renderBody: renderBody,
+            href: '#' },
+
+        {
             type: 'next',
-            href: 'https://www.ebay.com/' }] },
+            href: '#' }] },
 
 
 
+    EighthSelected: {
+        a11yPreviousText: 'Previous page',
+        a11yNextText: 'Next page',
+        a11yCurrentText: 'Results Pagination - Page 2',
+        items: [
+        {
+            type: 'previous',
+            href: '#' },
+
+        {
+            renderBody: renderBody,
+            href: '#' },
+
+        {
+            renderBody: renderBody,
+            href: '#' },
+
+        {
+            renderBody: renderBody,
+            href: '#' },
+
+        {
+            renderBody: renderBody,
+            href: '#' },
+
+        {
+            renderBody: renderBody,
+            href: '#' },
+
+        {
+            renderBody: renderBody,
+            href: '#' },
+
+        {
+            renderBody: renderBody,
+            href: '#' },
+
+        {
+            current: true,
+            renderBody: renderBody,
+            href: '#' },
+
+        {
+            renderBody: renderBody,
+            href: '#' },
+
+        {
+            type: 'next',
+            href: '#' }] },
+
+
+
+    buttons: {
+        a11yPreviousText: 'Previous page',
+        a11yNextText: 'Next page',
+        a11yCurrentText: 'Results Pagination - Page 2',
+        items: [
+        {
+            type: 'previous' },
+
+        {
+            current: true,
+            renderBody: renderBody },
+
+        {
+            renderBody: renderBody },
+
+        {
+            type: 'next' }] },
+
+
+
     basicLinksWithoutCurrent: {
@@ -89,15 +188,15 @@ a11yPreviousText: 'Previous page',
             type: 'previous',
-            href: 'https://www.ebay.com/' },
+            href: '#' },
 
         {
             renderBody: renderBody,
-            href: 'https://www.ebay.com/' },
+            href: '#' },
 
         {
             renderBody: renderBody,
-            href: 'https://www.ebay.com/' },
+            href: '#' },
 
         {
             type: 'next',
-            href: 'https://www.ebay.com/' }] },
+            href: '#' }] },
 
@@ -114,3 +213,3 @@
             renderBody: renderBody,
-            href: 'https://www.ebay.com/' }] },
+            href: '#' }] },
 
@@ -125,3 +224,4 @@
         {
-            type: 'previous' },
+            type: 'previous',
+            disabled: true },
 
@@ -131,3 +231,3 @@ {
             renderBody: renderBody,
-            href: 'https://www.ebay.com/' },
+            href: '#' },
 
@@ -134,0 +234,0 @@ {

dist/components/ebay-pagination/README.md

@@ -26,3 +26,2 @@ # ebay-pagination
 `a11y-current-text` | String | No | Description for the current page (e.g. Results of Page 1)
-`hijax` | Boolean | No | Prevent link navigation; for use with ajax
 
@@ -50,4 +49,8 @@ ### ebay-pagination Events
 `disabled` | Boolean | No | Previous/next button is disabled or not
-`href` | String | No | for link that looks like a menu-item
+`href` | String | No | for link that looks like a menu-item; omitting the href will switch to a button
 `current` | Boolean | No | the current page
 `type` | String | No | "previous", "next" or "page"(default). To specify if the information entered is for the previous or next arrrow button or a page. If the `type='previous|next'` isn't provided the previous/next arrow buttons will be taken as `disabled`
+
+Notes:
+
+* If you want to have client side or ajax based navigation then you should omit the `href` attribute on each item. This will cause each item to be `<button>` instead of an `<a>`.

package.json

 {
   "name": "@ebay/ebayui-core",
-  "version": "1.0.0-0",
+  "version": "1.0.0-1",
   "description": "Collection of core eBay components; considered to be the building blocks for all composite structures, pages & apps.",
@@ -60,3 +60,3 @@ "scripts": {
     "@ebay/browserslist-config": "^1.0.0",
-    "@ebay/skin": "^6.0.0-2",
+    "@ebay/skin": "^6.0.0-3",
     "@lasso/marko-taglib": "^1.0.9",
@@ -63,0 +63,0 @@ "async": "^2.6.0",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

903808

increased by0.26%

Lines of code

5846

increased by1.97%

No dependency changes