Skip to content

New preview made with mini codeeditor on hover. #72

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

Merged
merged 1 commit into from
Aug 14, 2020
Merged

New preview made with mini codeeditor on hover. #72

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
103 changes: 60 additions & 43 deletions src/CodeSnippetDisplay.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import { FileEditor } from '@jupyterlab/fileeditor';
import { Notebook, NotebookPanel } from '@jupyterlab/notebook';
import { copyIcon } from '@jupyterlab/ui-components';
import { LabIcon } from '@jupyterlab/ui-components';
import { IEditorServices } from '@jupyterlab/codeeditor';

import { IExpandableActionButton } from '@elyra/ui-components';

Expand Down Expand Up @@ -83,6 +84,7 @@ interface ICodeSnippetDisplayProps {
codeSnippets: ICodeSnippet[];
getCurrentWidget: () => Widget;
openCodeSnippetEditor: (args: any) => void;
editorServices: IEditorServices;
}

/**
Expand Down Expand Up @@ -424,6 +426,47 @@ export class CodeSnippetDisplay extends React.Component<
});
}

private _evtMouseLeave(): void {
//get rid of preview by clicking anything
const preview = document.querySelector('.jp-preview');
if (preview) {
// if target is not the code snippet name area, then add inactive
// if target area is the code snippet name area, previewSnippet widget will handle preview.
if (!preview.classList.contains('inactive')) {
preview.classList.add('inactive');
for (const elem of document.getElementsByClassName('drag-hover')) {
if (elem.classList.contains('drag-hover-clicked')) {
elem.classList.remove('drag-hover-clicked');
}
}
for (const item of document.getElementsByClassName(
'codeSnippet-item'
)) {
if (item.classList.contains('codeSnippet-item-clicked')) {
item.classList.remove('codeSnippet-item-clicked');
}
}
}
}
}

//Set the position of the preview to be next to the snippet title.
private _setPreviewPosition(id: string): void {
const intID = parseInt(id, 10);
const target = event.target as HTMLElement;
console.log(target);
const realTarget = document.getElementsByClassName(
'expandableContainer-title'
)[intID];
// distDown is the number of pixels to shift the preview down
let distDown: number = realTarget.getBoundingClientRect().top - 40;
if (realTarget.getBoundingClientRect().top > window.screen.height / 2) {
distDown = distDown - 66;
}
const final = distDown.toString(10) + 'px';
document.documentElement.style.setProperty('--preview-distance', final);
}

// Render display of code snippet list
// To get the variety of color based on code length just append -long to CODE_SNIPPET_ITEM
private renderCodeSnippet = (
Expand Down Expand Up @@ -457,10 +500,11 @@ export class CodeSnippetDisplay extends React.Component<
{
id: parseInt(id, 10),
title: displayName,
body: new PreviewHandler(codeSnippet),
body: new PreviewHandler(),
codeSnippet: codeSnippet
},
this.props.openCodeSnippetEditor
this.props.openCodeSnippetEditor,
this.props.editorServices
);
this.snippetClicked(id);
}
Expand Down Expand Up @@ -489,31 +533,27 @@ export class CodeSnippetDisplay extends React.Component<
}}
></div>
<div>
<div
key={displayName}
className={TITLE_CLASS}
// onMouseOver={() => {
// this.dragHoverStyle(id);
// }}
// onMouseOut={() => {
// this.dragHoverStyleRemove(id);
// }}
>
<div key={displayName} className={TITLE_CLASS}>
<span
id={id}
title={codeSnippet.displayName}
className={DISPLAY_NAME_CLASS}
onClick={(): void => {
onMouseEnter={(event): void => {
showPreview(
{
id: parseInt(id, 10),
title: displayName,
body: new PreviewHandler(codeSnippet),
body: new PreviewHandler(),
codeSnippet: codeSnippet
},
this.props.openCodeSnippetEditor
this.props.openCodeSnippetEditor,
this.props.editorServices
);
this.snippetClicked(id);
this._setPreviewPosition(id);
}}
onMouseLeave={(): void => {
this._evtMouseLeave();
}}
>
{this.boldNameOnSearch(this.state.filterValue, displayName)}
Expand Down Expand Up @@ -595,44 +635,21 @@ export class CodeSnippetDisplay extends React.Component<
}

class PreviewHandler extends Widget {
constructor(codeSnippet: ICodeSnippet) {
super({ node: Private.createPreviewNode(codeSnippet) });
constructor() {
super({ node: Private.createPreviewNode() });
}
}

class Private {
static createPreviewContent(codeSnippet: ICodeSnippet): HTMLElement {
static createPreviewContent(): HTMLElement {
const body = document.createElement('div');
const previewContainer = document.createElement('div');
const descriptionContainer = document.createElement('div');
const descriptionTitle = document.createElement('h4');
const description = document.createElement('text');
const preview = document.createElement('text');

previewContainer.className = 'jp-preview-text';
descriptionContainer.className = 'jp-preview-description-container';
descriptionTitle.className = 'jp-preview-description-title';
description.className = 'jp-preview-description';
preview.className = 'jp-preview-textarea';

descriptionTitle.textContent = 'DESCRIPTION';
description.textContent = codeSnippet.description;
preview.textContent = codeSnippet.code.join('\n');

descriptionContainer.appendChild(descriptionTitle);
descriptionContainer.appendChild(description);
previewContainer.appendChild(descriptionContainer);

previewContainer.appendChild(preview);
body.append(previewContainer);

return body;
}
/**
* Create structure for preview of snippet data.
*/
static createPreviewNode(codeSnippet: ICodeSnippet): HTMLElement {
return this.createPreviewContent(codeSnippet);
static createPreviewNode(): HTMLElement {
return this.createPreviewContent();
}
}

Expand Down
37 changes: 35 additions & 2 deletions src/CodeSnippetWidget.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,7 @@ export class CodeSnippetWidget extends ReactWidget {
renderCodeSnippetsSignal: Signal<this, ICodeSnippet[]>;
app: JupyterFrontEnd;
codeSnippetManager: CodeSnippetContentsService;
// private editorServices: IEditorServices;
private editorServices: IEditorServices;

constructor(
// codeSnippets: ICodeSnippet[],
Expand All @@ -86,7 +86,7 @@ export class CodeSnippetWidget extends ReactWidget {
) {
super();
this.app = app;
// this.editorServices = editorServices;
this.editorServices = editorServices;
this.getCurrentWidget = getCurrentWidget;
this._codeSnippetWidgetModel = new CodeSnippetWidgetModel([]);
this._codeSnippets = this._codeSnippetWidgetModel.snippets;
Expand Down Expand Up @@ -176,6 +176,9 @@ export class CodeSnippetWidget extends ReactWidget {
case 'mousedown':
this._evtMouseDown(event as IDragEvent);
break;
// case 'mouseleave':
// this._evtMouseLeave(event as MouseEvent);
// break;
case 'lm-dragenter':
this._evtDragEnter(event as IDragEvent);
break;
Expand Down Expand Up @@ -242,6 +245,35 @@ export class CodeSnippetWidget extends ReactWidget {
return undefined;
}

// private _evtMouseLeave(event: MouseEvent): void {
// //get rid of preview by clicking anything
// const target = event.target as HTMLElement;

// const preview = document.querySelector('.jp-preview');
// if (preview) {
// // if target is not the code snippet name area, then add inactive
// // if target area is the code snippet name area, previewSnippet widget will handle preview.
// if (
// !preview.classList.contains('inactive') &&
// !target.classList.contains('expandableContainer-name')
// ) {
// preview.classList.add('inactive');
// for (const elem of document.getElementsByClassName('drag-hover')) {
// if (elem.classList.contains('drag-hover-clicked')) {
// elem.classList.remove('drag-hover-clicked');
// }
// }
// for (const item of document.getElementsByClassName(
// 'codeSnippet-item'
// )) {
// if (item.classList.contains('codeSnippet-item-clicked')) {
// item.classList.remove('codeSnippet-item-clicked');
// }
// }
// }
// }
// }

private _evtMouseDown(event: MouseEvent): void {
//get rid of preview by clicking anything
const target = event.target as HTMLElement;
Expand Down Expand Up @@ -427,6 +459,7 @@ export class CodeSnippetWidget extends ReactWidget {
codeSnippets={codeSnippets}
getCurrentWidget={this.getCurrentWidget}
openCodeSnippetEditor={this.openCodeSnippetEditor.bind(this)}
editorServices={this.editorServices}
/>
</div>
)}
Expand Down
Loading