Skip to content

feat(cxl-ui): add ability for main content to be scrolled from the ou… #15

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

Closed
anoblet wants to merge 7 commits into from
Closed

feat(cxl-ui): add ability for main content to be scrolled from the ou… #15

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
4f623e4
feat(cxl-ui): add ability for main content to be scrolled from the ou…
anoblet May 20, 2021
c6becd0
Merge branch 'master' of github.com:anoblet/aybolit into external-scroll
anoblet Oct 28, 2021
8d85bc0
refactor(cxl-ui): use normalize-wheel for scrolling
anoblet Oct 28, 2021
7b8cc78
refactor(cxl-ui): use forked esm version of normalize wheel
anoblet Oct 28, 2021
b32eddd
refactor(cxl-ui): add/remove listener depending on screen size
anoblet Nov 2, 2021
42a8113
refactor(cxl-ui): unsort imports
anoblet Nov 2, 2021
8c5f6cf
refactor(cxl-ui): change bound wheel event listener to be protected
anoblet Nov 2, 2021
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
3 changes: 2 additions & 1 deletion packages/cxl-ui/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,8 @@
"@vaadin/vaadin-themable-mixin": "^1.6.2",
"headroom.js": "^0.12.0",
"lit-element": "^2.2.1",
"lit-html": "^2.0.0-rc.3"
"lit-html": "^2.0.0-rc.3",
"normalize-wheel": "https://github.com/anoblet/normalize-wheel#esm"
Copy link
Copy Markdown
Collaborator

@lkraav lkraav Nov 2, 2021

Choose a reason for hiding this comment

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

If we have to fork this anyway, perhaps we can also drop some of the general compatibility check code from it? If not, that's fine, too, but worth a look.

Copy link
Copy Markdown
Owner Author

@anoblet anoblet Nov 2, 2021

Choose a reason for hiding this comment

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

I'm not sure how much I can trim away without there being regressions in certain browsers but I can take a look.

Copy link
Copy Markdown
Collaborator

@lkraav lkraav Nov 12, 2021

Choose a reason for hiding this comment

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

Is there a PR we can shoot at normalize-wheel upstream way?

I'm going to publish our current ESM build on our custom registry, but ideally we'd at one point get back to using global NPM for this.

Copy link
Copy Markdown
Owner Author

@anoblet anoblet Nov 12, 2021 •
edited
Loading

Choose a reason for hiding this comment

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

I tried to structure it as a PR in the first place. I was unsure what the best practice was for offering CJS/ESM in the same package unbundled. A separate directory under src and leverage the browser field in package.json?

I ended up just installing from a branch to save time. I'll see if I can figure out how to do this though.

Copy link
Copy Markdown
Owner Author

@anoblet anoblet Nov 22, 2021

Choose a reason for hiding this comment

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

I created a PR here: basilfx/normalize-wheel#3

In the meantime I believe we could rely on this: https://www.npmjs.com/package/normalize-wheel-es

Copy link
Copy Markdown
Collaborator

@lkraav lkraav Nov 24, 2021

Choose a reason for hiding this comment

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

https://www.npmjs.com/package/normalize-wheel-es

Looks like they did the same thing, and never bothered to PR.

Let's see what happens in basilfx/normalize-wheel#3 before we make a decision.

Ideally that PR would be a bit less noisy, or code-unified.. but I'm not so well-versed to understand how to pull it off.

},
"@pika/pack": {
"pipeline": [
Expand Down
30 changes: 30 additions & 0 deletions packages/cxl-ui/src/components/cxl-app-layout.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
import { LitElement, html, customElement, property, query } from 'lit-element';
import '@conversionxl/cxl-lumo-styles';
import { registerGlobalStyles } from '@conversionxl/cxl-lumo-styles/src/utils';
import normalizeWheel from 'normalize-wheel';
import cxlAppLayoutStyles from '../styles/cxl-app-layout-css.js';
import cxlAppLayoutGlobalStyles from '../styles/global/cxl-app-layout-css.js';
Comment thread
lkraav marked this conversation as resolved.
import '@vaadin/vaadin-button';
Expand All @@ -16,6 +17,9 @@ export class CXLAppLayoutElement extends LitElement {
@query('aside')
asideElement;

@query('main')
mainElement;

@property({ type: Boolean })
get asideOpened() {
this._asideOpened = JSON.parse(localStorage.getItem(ASIDE_LOCAL_STORAGE_KEY));
Expand Down Expand Up @@ -53,6 +57,9 @@ export class CXLAppLayoutElement extends LitElement {
@property({ type: Boolean, reflect: true })
wide;

// Event listener for the wheel event to allow scrolling from outside of the main pane.
_boundWheelEventListener;

static get styles() {
return [cxlAppLayoutStyles];
}
Expand Down Expand Up @@ -111,6 +118,23 @@ export class CXLAppLayoutElement extends LitElement {
`;
}

constructor() {
super();
this._boundWheelEventListener = this._onWheel.bind(this);
}

updated(changedProperties) {
super.updated(changedProperties);

if (changedProperties.has('wide')) {
if (this.wide) {
this.addEventListener('wheel', this._boundWheelEventListener);
} else {
this.removeEventListener('wheel', this._boundWheelEventListener);
}
}
}

firstUpdated(_changedProperties) {
super.firstUpdated(_changedProperties);

Expand All @@ -119,4 +143,10 @@ export class CXLAppLayoutElement extends LitElement {
moduleId: 'cxl-app-layout-global',
});
}

_onWheel(event) {
if (event.target.tagName === 'CXL-APP-LAYOUT') {
this.mainElement.scrollTop += normalizeWheel(event).pixelY;
}
}
}
Loading