Skip to content

Commit

Permalink
refactor: small code style tweaks, add missing JSDoc (#4777) (#4780)
Browse files Browse the repository at this point in the history 
Co-authored-by: Serhii Kulykov <iamkulykov@gmail.com>
  • Loading branch information
@vaadin-bot @web-padawan
vaadin-bot and web-padawan committed Oct 19, 2022
1 parent 435df4d commit fba7c24
Show file tree
Hide file tree
Showing 6 changed files with 41 additions and 22 deletions.
39 changes: 29 additions & 10 deletions packages/date-picker/src/vaadin-infinite-scroller.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,24 +89,30 @@ class InfiniteScroller extends PolymerElement {
/**
* The amount of initial scroll top. Needed in order for the
* user to be able to scroll backwards.
* @private
*/
_initialScroll: {
value: 500000,
},

/**
* The index/position mapped at _initialScroll point.
* @private
*/
_initialIndex: {
value: 0,
},

/** @private */
_buffers: Array,

/** @private */
_preventScrollEvent: Boolean,

/** @private */
_mayHaveMomentum: Boolean,

/** @private */
_initialized: Boolean,

active: {
Expand All @@ -116,10 +122,11 @@ class InfiniteScroller extends PolymerElement {
};
}

/** @protected */
ready() {
super.ready();

this._buffers = Array.prototype.slice.call(this.root.querySelectorAll('.buffer'));
this._buffers = [...this.shadowRoot.querySelectorAll('.buffer')];

this.$.fullHeight.style.height = `${this._initialScroll * 2}px`;

Expand All @@ -128,8 +135,8 @@ class InfiniteScroller extends PolymerElement {
forwardHostProp(prop, value) {
if (prop !== 'index') {
this._buffers.forEach((buffer) => {
[].forEach.call(buffer.children, (insertionPoint) => {
insertionPoint._itemWrapper.instance[prop] = value;
[...buffer.children].forEach((slot) => {
slot._itemWrapper.instance[prop] = value;
});
});
}
Expand All @@ -155,18 +162,22 @@ class InfiniteScroller extends PolymerElement {
}
}

/** @private */
_activated(active) {
if (active && !this._initialized) {
this._createPool();
this._initialized = true;
}
}

/** @private */
_finishInit() {
if (!this._initDone) {
// Once the first set of items start fading in, stamp the rest
this._buffers.forEach((buffer) => {
[].forEach.call(buffer.children, (insertionPoint) => this._ensureStampedInstance(insertionPoint._itemWrapper));
[...buffer.children].forEach((slot) => {
this._ensureStampedInstance(slot._itemWrapper);
});
});

if (!this._buffers[0].translateY) {
Expand All @@ -177,6 +188,7 @@ class InfiniteScroller extends PolymerElement {
}
}

/** @private */
_translateBuffer(up) {
const index = up ? 1 : 0;
this._buffers[index].translateY = this._buffers[index ? 0 : 1].translateY + this._bufferHeight * (index ? -1 : 1);
Expand All @@ -185,6 +197,7 @@ class InfiniteScroller extends PolymerElement {
this._buffers.reverse();
}

/** @private */
_scroll() {
if (this._scrollDisabled) {
return;
Expand Down Expand Up @@ -281,10 +294,12 @@ class InfiniteScroller extends PolymerElement {
return this._itemHeightVal;
}

/** @private */
get _bufferHeight() {
return this.itemHeight * this.bufferSize;
}

/** @private */
_reset() {
this._scrollDisabled = true;
this.$.scroller.scrollTop = this._initialScroll;
Expand All @@ -304,6 +319,7 @@ class InfiniteScroller extends PolymerElement {
this._scrollDisabled = false;
}

/** @private */
_createPool() {
const container = this.getBoundingClientRect();
this._buffers.forEach((buffer) => {
Expand All @@ -315,10 +331,10 @@ class InfiniteScroller extends PolymerElement {
const contentId = (InfiniteScroller._contentIndex = InfiniteScroller._contentIndex + 1 || 0);
const slotName = `vaadin-infinite-scroller-item-content-${contentId}`;

const insertionPoint = document.createElement('slot');
insertionPoint.setAttribute('name', slotName);
insertionPoint._itemWrapper = itemWrapper;
buffer.appendChild(insertionPoint);
const slot = document.createElement('slot');
slot.setAttribute('name', slotName);
slot._itemWrapper = itemWrapper;
buffer.appendChild(slot);

itemWrapper.setAttribute('slot', slotName);
this.appendChild(itemWrapper);
Expand All @@ -337,6 +353,7 @@ class InfiniteScroller extends PolymerElement {
}, 1);
}

/** @private */
_ensureStampedInstance(itemWrapper) {
if (itemWrapper.firstElementChild) {
return;
Expand All @@ -352,6 +369,7 @@ class InfiniteScroller extends PolymerElement {
});
}

/** @private */
_updateClones(viewPortOnly) {
this._firstIndex = ~~((this._buffers[0].translateY - this._initialScroll) / this.itemHeight) + this._initialIndex;

Expand All @@ -360,8 +378,8 @@ class InfiniteScroller extends PolymerElement {
if (!buffer.updated) {
const firstIndex = this._firstIndex + this.bufferSize * bufferIndex;

[].forEach.call(buffer.children, (insertionPoint, index) => {
const itemWrapper = insertionPoint._itemWrapper;
[...buffer.children].forEach((slot, index) => {
const itemWrapper = slot._itemWrapper;
if (!viewPortOnly || this._isVisible(itemWrapper, scrollerRect)) {
itemWrapper.instance.index = firstIndex + index;
}
Expand All @@ -371,6 +389,7 @@ class InfiniteScroller extends PolymerElement {
});
}

/** @private */
_isVisible(element, container) {
const rect = element.getBoundingClientRect();
return rect.bottom > container.top && rect.top < container.bottom;
Expand Down
2 changes: 1 addition & 1 deletion packages/date-picker/test/basic.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -310,7 +310,7 @@ describe('basic features', () => {

it('should reflect value in overlay header', () => {
datepicker.value = '2000-02-01';
expect(overlayContent.root.querySelector('[part="label"]').textContent.trim()).to.equal('1.2.2000');
expect(overlayContent.shadowRoot.querySelector('[part="label"]').textContent.trim()).to.equal('1.2.2000');
});

it('should display buttons in correct locale', () => {
Expand Down
4 changes: 2 additions & 2 deletions packages/date-picker/test/common.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,8 +105,8 @@ export function getFirstVisibleItem(scroller, bufferOffset) {
bufferOffset = bufferOffset || 0;

scroller._buffers.forEach((buffer) => {
[].forEach.call(buffer.children, (insertionPoint) => {
children.push(insertionPoint._itemWrapper);
[...buffer.children].forEach((slot) => {
children.push(slot._itemWrapper);
});
});
const scrollerRect = scroller.getBoundingClientRect();
Expand Down
12 changes: 6 additions & 6 deletions packages/date-picker/test/overlay.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,8 +56,8 @@ describe('overlay', () => {
const yearScroller = overlay.$.yearScroller;

yearScroller._buffers.forEach((buffer) => {
Array.from(buffer.children).forEach((insertionPoint) => {
const year = insertionPoint._itemWrapper.firstElementChild;
[...buffer.children].forEach((slot) => {
const year = slot._itemWrapper.firstElementChild;
const isCurrent = year.textContent.indexOf(new Date().getFullYear()) > -1;
expect(year.hasAttribute('current')).to.equal(isCurrent);
});
Expand All @@ -69,8 +69,8 @@ describe('overlay', () => {
overlay.selectedDate = new Date();

yearScroller._buffers.forEach((buffer) => {
Array.from(buffer.children).forEach((insertionPoint) => {
const year = insertionPoint._itemWrapper.firstElementChild;
[...buffer.children].forEach((slot) => {
const year = slot._itemWrapper.firstElementChild;
const isCurrent = year.textContent.indexOf(new Date().getFullYear()) > -1;
expect(year.hasAttribute('selected')).to.equal(isCurrent);
});
Expand Down Expand Up @@ -152,7 +152,7 @@ describe('overlay', () => {
it('should reflect value in label', () => {
overlay.i18n.formatDate = (date) => `${date.month + 1}/${date.day}/${date.year}`;
overlay.selectedDate = new Date(2000, 1, 1);
expect(overlay.root.querySelector('[part="label"]').textContent.trim()).to.equal('2/1/2000');
expect(overlay.shadowRoot.querySelector('[part="label"]').textContent.trim()).to.equal('2/1/2000');
});

it('should not show clear button if not value is set', () => {
Expand Down Expand Up @@ -311,7 +311,7 @@ describe('overlay', () => {
const date = new Date(2000, 1, 1);
overlay.scrollToDate(date);
await nextRender();
expect(parseInt(overlay.root.querySelector('[part="years-toggle-button"]').textContent)).to.equal(2000);
expect(parseInt(overlay.shadowRoot.querySelector('[part="years-toggle-button"]').textContent)).to.equal(2000);
});

it('should scroll to the given date', async () => {
Expand Down
4 changes: 2 additions & 2 deletions packages/date-picker/test/scroller.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -112,8 +112,8 @@ describe('vaadin-infinite-scroller', () => {

it('should have an instance stamped to every wrapper', () => {
scroller._buffers.forEach((buffer) => {
Array.from(buffer.children).forEach((insertionPoint) => {
expect(insertionPoint._itemWrapper.firstElementChild).to.be.ok;
[...buffer.children].forEach((slot) => {
expect(slot._itemWrapper.firstElementChild).to.be.ok;
});
});
});
Expand Down
2 changes: 1 addition & 1 deletion packages/date-picker/theme/lumo/vaadin-date-picker-overlay-content-styles.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -171,7 +171,7 @@ registerStyles(
color: var(--lumo-primary-contrast-color);
}
/* TODO magic number (same as used for iron-media-query in vaadin-date-picker-overlay-content) */
/* TODO magic number (same as used for media-query in vaadin-date-picker-overlay-content) */
@media screen and (max-width: 374px) {
:host {
background-image: none;
Expand Down

0 comments on commit fba7c24

Please sign in to comment.