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.

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

Adding keyboard control for navigation through sticky scroll lines #174670

Merged
merged 45 commits into from
Mar 1, 2023
Merged
Changes from 1 commit
Commits
Show all changes
45 commits
Select commit Hold shift + click to select a range
eb72100
work in progress
aiday-mar Feb 16, 2023
20cc79c
added code in order to make individual sticky lines grey
aiday-mar Feb 16, 2023
f931df6
adding changes
aiday-mar Feb 16, 2023
badba6f
Adding code in order to have context keys
aiday-mar Feb 17, 2023
49df40b
changing the code
aiday-mar Feb 17, 2023
7881f8c
adding code in order not to move the cursor when sticky scroll is foc…
aiday-mar Feb 17, 2023
2df6275
Simplifying the code
aiday-mar Feb 17, 2023
520b67e
removing unecessary code
aiday-mar Feb 17, 2023
b4191bc
converting to an arrow function in order to avoid error
aiday-mar Feb 17, 2023
b1b4dd8
removing a console log
aiday-mar Feb 17, 2023
1317642
removing the stickyScrollLinesEnabled boolean
aiday-mar Feb 17, 2023
ccc0603
removing a comment
aiday-mar Feb 17, 2023
f7d61a6
removing space
aiday-mar Feb 17, 2023
6fdf23e
settig back tasks.json to what it was
aiday-mar Feb 17, 2023
eedbcda
saving the default tasks.json
aiday-mar Feb 17, 2023
ee51d0b
Cleaned the code and also added an on hover listener on the sticky sc…
aiday-mar Feb 17, 2023
425f9fa
removing a useless variable
aiday-mar Feb 17, 2023
3e06bc3
when clicking on escape comming out of the focus
aiday-mar Feb 17, 2023
3ef249e
writing out all the classes as interfaces
aiday-mar Feb 17, 2023
7e4d695
Changed the left arrow to an Enter key code
aiday-mar Feb 17, 2023
25b143e
Merge branch 'main' into aiday/issue169107
aiday-mar Feb 17, 2023
2675b8c
also preventing the user from typing on the left and on the right whe…
aiday-mar Feb 17, 2023
89bbb96
added back the css for when the sticky scroll widget is focused
aiday-mar Feb 17, 2023
35a1d39
instead of using notEqualsTo(true) use isEqualTo(false)
aiday-mar Feb 17, 2023
344be96
removing the dependence on the context key
aiday-mar Feb 20, 2023
df04e7b
removed the servcice
aiday-mar Feb 20, 2023
048a71d
making the sticky scroll focused context key a property of the contro…
aiday-mar Feb 20, 2023
b4f59bf
assigning the context key to a property of the class in order to not …
aiday-mar Feb 20, 2023
9aa0aef
adding some changes
aiday-mar Feb 21, 2023
2e4540f
added some console messages in order to better understand the focus t…
aiday-mar Feb 22, 2023
476a144
adding code to the widget so that it remembers the sticky line on whi…
aiday-mar Feb 22, 2023
26616be
work in progress
aiday-mar Feb 22, 2023
40f6279
refactoring the code and using the focus tracker
aiday-mar Feb 23, 2023
1d8625b
renamed toggle focus sticky scroll to focus sticky scroll
aiday-mar Feb 28, 2023
dc79c61
removing the keybindings
aiday-mar Feb 28, 2023
b444d6d
adding the ondidfocus listener on the focus tracker
aiday-mar Feb 28, 2023
6f3a796
adding changes from review
aiday-mar Feb 28, 2023
f8bb5c8
adding changes from review
aiday-mar Feb 28, 2023
8994c08
adding last changes
aiday-mar Feb 28, 2023
19ebffa
setting the attribute to be a list for the root dom node
aiday-mar Feb 28, 2023
150e817
removed the unecessary call to blur()
aiday-mar Feb 28, 2023
ad7d621
adding changes so that the focus persist on the scrolling
aiday-mar Feb 28, 2023
3dfcc87
making line number distinction before and after the rendering of the …
aiday-mar Feb 28, 2023
d3086e5
removing unecessary code
aiday-mar Feb 28, 2023
96a563d
disposing when clicking on the sticky scroll and revealing some other…
aiday-mar Feb 28, 2023
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
Prev Previous commit
Next Next commit
adding changes so that the focus persist on the scrolling
  • Loading branch information
aiday-mar committed Feb 28, 2023
commit ad7d621f2f2024123a5ba4f72a9fc9b59d5eb087
Original file line number Diff line number Diff line change
@@ -51,17 +51,18 @@ export class StickyScrollController extends Disposable implements IEditorContrib
private _widgetState: StickyScrollWidgetState;
private _maxStickyLines: number = Number.MAX_SAFE_INTEGER;

private _stickyElements: HTMLCollection | undefined;
private _numberStickyElements: number | undefined;

private _stickyRangeProjectedOnEditor: IRange | undefined;
private _candidateDefinitionsLength: number = -1;

private _focusDisposableStore: DisposableStore | undefined;
private _focusedStickyElementIndex: number | undefined;
private _stickyScrollFocusedContextKey: IContextKey<boolean>;
private _stickyScrollVisibleContextKey: IContextKey<boolean>;

private _stickyElements: HTMLCollection | undefined;
private _focusDisposableStore: DisposableStore | undefined;
private _focusedStickyElementIndex: number = -1;
private _focusedStickyElementLineNumber: number = -1;
private _focused = false;

constructor(
private readonly _editor: ICodeEditor,
@IContextMenuService private readonly _contextMenuService: IContextMenuService,
@@ -125,48 +126,50 @@ export class StickyScrollController extends Disposable implements IEditorContrib
private _disposeFocusStickyScrollStore() {
this._stickyScrollFocusedContextKey.set(false);
this._focusDisposableStore!.dispose();
this._focused = false;
}

public focus(): void {
const focusState = this._stickyScrollFocusedContextKey.get();
const rootNode = this._stickyScrollWidget.getDomNode();
this._stickyElements = rootNode.children;
this._numberStickyElements = this._stickyElements?.length;

if (focusState === true || this._numberStickyElements === 0) {
if (focusState === true) {
// If already focused or no line to focus on, return
return;
}
this._focused = true;
this._focusDisposableStore = new DisposableStore();
this._stickyScrollFocusedContextKey.set(true);

// The first line focused is the bottom most line
const rootNode = this._stickyScrollWidget.getDomNode();
(rootNode.lastElementChild! as HTMLDivElement).focus();
this._focusedStickyElementIndex = this._numberStickyElements - 1;
this._stickyElements = rootNode.children;
this._focusedStickyElementIndex = this._stickyScrollWidget.lineNumbers.length - 1;
this._focusedStickyElementLineNumber = this._stickyScrollWidget.lineNumbers[this._focusedStickyElementIndex];
}

public focusNext(): void {
if (this._focusedStickyElementIndex! < this._numberStickyElements! - 1) {
if (this._focusedStickyElementIndex < this._stickyElements!.length - 1) {
this._focusNav(true);
}
}

public focusPrevious(): void {
if (this._focusedStickyElementIndex! > 0) {
if (this._focusedStickyElementIndex > 0) {
this._focusNav(false);
}
}

// True is next, false is previous
private _focusNav(direction: boolean): void {
this._focusedStickyElementIndex = direction ? this._focusedStickyElementIndex! + 1 : this._focusedStickyElementIndex! - 1;
(this._stickyElements!.item(this._focusedStickyElementIndex!) as HTMLDivElement).focus();
this._focusedStickyElementIndex = direction ? this._focusedStickyElementIndex + 1 : this._focusedStickyElementIndex - 1;
this._focusedStickyElementLineNumber = this._stickyScrollWidget.lineNumbers[this._focusedStickyElementIndex];
(this._stickyElements!.item(this._focusedStickyElementIndex) as HTMLDivElement).focus();
}

public goToFocused(): void {
const lineNumbers = this._stickyScrollWidget.lineNumbers;
this._editor.revealPosition({ lineNumber: lineNumbers[this._focusedStickyElementIndex!], column: 1 });
this._disposeFocusStickyScrollStore();
this._editor.revealPosition({ lineNumber: lineNumbers[this._focusedStickyElementIndex], column: 1 });
}

private _createClickLinkGesture(): IDisposable {
@@ -315,21 +318,38 @@ export class StickyScrollController extends Disposable implements IEditorContrib
}

private _renderStickyScroll() {
console.log('active element : ', document.activeElement);
console.log('document.activeElement : ', document.activeElement);
if (!(this._editor.hasModel())) {
return;
}
const model = this._editor.getModel();
const stickyLineVersion = this._stickyLineCandidateProvider.getVersionId();
if (stickyLineVersion === undefined || stickyLineVersion === model.getVersionId()) {
this._widgetState = this.findScrollWidgetState();
if (this._widgetState.lineNumbers.length === 0) {
// The stciky scroll is not visible because we have no lines
this._stickyScrollVisibleContextKey.set(false);
} else {
this._stickyScrollVisibleContextKey.set(true);
}
// The stciky scroll is not visible because we have no lines
this._stickyScrollVisibleContextKey.set(!(this._widgetState.lineNumbers.length === 0));
this._stickyScrollWidget.setState(this._widgetState);

if (this._focused) {

this._stickyElements = this._stickyScrollWidget.getDomNode().children;
if (this._stickyElements.length === 0) {
this._disposeFocusStickyScrollStore();
} else {
const previousFocusedLineNumberExists = this._stickyScrollWidget.lineNumbers.includes(this._focusedStickyElementLineNumber);
console.log('this._stickyScrollWidget.lineNumbers : ', this._stickyScrollWidget.lineNumbers);
console.log('previousFocusedLineNumberExists : ', previousFocusedLineNumberExists);
if (previousFocusedLineNumberExists) {
this._focusedStickyElementIndex = this._stickyScrollWidget.lineNumbers.indexOf(this._focusedStickyElementLineNumber);
} else {
// The focused line no longer exists, set the new focused line to be the last line
this._focusedStickyElementIndex = this._stickyElements.length - 1;
this._focusedStickyElementLineNumber = this._stickyScrollWidget.lineNumbers[this._focusedStickyElementIndex];
}
console.log('this._focusedStickyElementIndex : ', this._focusedStickyElementIndex!);
(this._stickyElements.item(this._focusedStickyElementIndex) as HTMLDivElement).focus();
}
}
}
}