Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Quick Order List] Fix an issue for one-variant product #3332

Merged
merged 2 commits into from
Mar 12, 2024
Merged

[Quick Order List] Fix an issue for one-variant product #3332

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2721816
Fix QOL for one variant product
eugenekasimov Mar 8, 2024
5e0d56a
Move total bar position logic inside an if condition
eugenekasimov Mar 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
72 changes: 41 additions & 31 deletions assets/quick-order-list.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,13 +79,15 @@ class QuickOrderList extends HTMLElement {
type: `${this.stickyHeaderElement.getAttribute('data-sticky-type')}`
};
}
this.totalBar = this.querySelector('.quick-order-list__total');
if (this.totalBar) {
this.totalBarPosition = window.innerHeight - this.totalBar.offsetHeight;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it is worth updating the code on line 235 toconst totalBarCrossesInput = this.totalBarPosition ? inputBottomBorder > this.totalBarPosition : false.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the advice @utkarshsaxena93 . I think there is no need for that, because all this bunch of code lines 215-243 is inside the IF statement if (this.allInputsArray.length !== 1) and that means that if the array length === 1 this code won't execute otherwise the totalBArPossition will always exist and we don't need to check it again. Let me know if that makes sense?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Makes sense. Best solution is where we don't have completely different logic running based on the array length 1 v/s many but it is okay for now. We can look at improving this in the future.


this.totalBarPosition = window.innerHeight - this.querySelector('.quick-order-list__total').offsetHeight;

window.addEventListener('resize', () => {
this.totalBarPosition = window.innerHeight - this.querySelector('.quick-order-list__total').offsetHeight;
this.stickyHeader.height = this.stickyHeaderElement ? this.stickyHeaderElement.offsetHeight: null;
});
window.addEventListener('resize', () => {
this.totalBarPosition = window.innerHeight - this.totalBar.offsetHeight;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Don't you need the if statement here too?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I do need it and I place it inside the same IF statement

if (this.totalBar) {
      this.totalBarPosition = window.innerHeight - this.totalBar.offsetHeight;

      window.addEventListener('resize', () => {
        this.totalBarPosition = window.innerHeight - this.totalBar.offsetHeight;
        this.stickyHeader.height = this.stickyHeaderElement ? this.stickyHeaderElement.offsetHeight: 0;
      });
    }

this.stickyHeader.height = this.stickyHeaderElement ? this.stickyHeaderElement.offsetHeight: 0;
});
}

form.addEventListener('submit', this.onSubmit.bind(this));
const debouncedOnChange = debounce((event) => {
Expand Down Expand Up @@ -209,34 +211,42 @@ class QuickOrderList extends HTMLElement {
}
this.variantListInput = event.target;
this.variantListInput.select()
this.variantListInput.addEventListener('keydown', (e) => {
if (e.key === 'Enter') {
e.preventDefault();
e.target.blur();
const currentIndex = this.allInputsArray.indexOf(e.target);

if (!e.shiftKey) {
const nextIndex = currentIndex + 1;
const nextVariant = this.allInputsArray[nextIndex] || this.allInputsArray[0];
nextVariant.select();
} else {
const previousIndex = currentIndex - 1;
const previousVariant = this.allInputsArray[previousIndex] || this.allInputsArray[this.allInputsArray.length - 1];
previousVariant.select();
if (this.allInputsArray.length !== 1) {
this.variantListInput.addEventListener('keydown', (e) => {
if (e.key === 'Enter') {
e.preventDefault();
e.target.blur();
const currentIndex = this.allInputsArray.indexOf(e.target);
if (!e.shiftKey) {
const nextIndex = currentIndex + 1;
const nextVariant = this.allInputsArray[nextIndex] || this.allInputsArray[0];
nextVariant.select();
} else {
const previousIndex = currentIndex - 1;
const previousVariant = this.allInputsArray[previousIndex] || this.allInputsArray[this.allInputsArray.length - 1];
previousVariant.select();
}
}
}
});
});

const inputTopBorder = this.variantListInput.getBoundingClientRect().top;
const inputBottomBorder = this.variantListInput.getBoundingClientRect().bottom;
const stickyHeaderBottomBorder = this.stickyHeaderElement && this.stickyHeaderElement.getBoundingClientRect().bottom;
const totalBarCrossesInput = inputBottomBorder > this.totalBarPosition;
const inputOutsideOfViewPort = inputBottomBorder < this.inputFieldHeight;
const stickyHeaderCrossesInput = this.stickyHeaderElement && this.stickyHeader.type !== 'on-scroll-up' && this.stickyHeader.height > inputTopBorder;
const stickyHeaderScrollupCrossesInput = this.stickyHeaderElement && this.stickyHeader.type === 'on-scroll-up' && this.stickyHeader.height > inputTopBorder && stickyHeaderBottomBorder > 0;
const inputTopBorder = this.variantListInput.getBoundingClientRect().top;
const inputBottomBorder = this.variantListInput.getBoundingClientRect().bottom;
const stickyHeaderBottomBorder = this.stickyHeaderElement && this.stickyHeaderElement.getBoundingClientRect().bottom;
const totalBarCrossesInput = inputBottomBorder > this.totalBarPosition;
const inputOutsideOfViewPort = inputBottomBorder < this.inputFieldHeight;
const stickyHeaderCrossesInput = this.stickyHeaderElement && this.stickyHeader.type !== 'on-scroll-up' && this.stickyHeader.height > inputTopBorder;
const stickyHeaderScrollupCrossesInput = this.stickyHeaderElement && this.stickyHeader.type === 'on-scroll-up' && this.stickyHeader.height > inputTopBorder && stickyHeaderBottomBorder > 0;

if (totalBarCrossesInput || inputOutsideOfViewPort || stickyHeaderCrossesInput || stickyHeaderScrollupCrossesInput) {
this.variantListInput.scrollIntoView({ block: 'center', behavior: 'smooth' });
if (totalBarCrossesInput || inputOutsideOfViewPort || stickyHeaderCrossesInput || stickyHeaderScrollupCrossesInput) {
this.variantListInput.scrollIntoView({ block: 'center', behavior: 'smooth' });
}
} else {
this.variantListInput.addEventListener('keydown', (e) => {
if (e.key === 'Enter') {
e.preventDefault();
e.target.blur();
}
});
}
}

Expand Down
Loading