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

feat: Optional virtualize, imageUrlFn #369

Merged
merged 14 commits into from
Mar 26, 2021
Merged

feat: Optional virtualize, imageUrlFn #369

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
5935cef
some manual virtual scrolling for each category
agiangrant Mar 13, 2021
5237652
alphabetize package dev dependencies
agiangrant Mar 13, 2021
f84b97d
optional virtualization
agiangrant Mar 13, 2021
58bd93f
update readme with new input parameters
agiangrant Mar 13, 2021
14a6178
fix linting errors
agiangrant Mar 13, 2021
1eebc7c
pass emoji use button prop
agiangrant Mar 17, 2021
ce4a88b
Merge pull request #1 from andrew-giangrant/feature/virtualize
agiangrant Mar 17, 2021
6794305
add virtualizeOffset input
agiangrant Mar 18, 2021
31160b6
Merge pull request #2 from andrew-giangrant/feature/virtualize
agiangrant Mar 18, 2021
cf224d9
fix perRow and height measuring, filter out invisible emojis
agiangrant Mar 26, 2021
764deee
remove unused SimpleChanges
agiangrant Mar 26, 2021
b1b311d
remove unused SimpleChanges
agiangrant Mar 26, 2021
f14d4f3
don't filter emojis if virtualize is false
agiangrant Mar 26, 2021
636fcc1
Merge pull request #3 from andrew-giangrant/feature/virtualize
agiangrant Mar 26, 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
35 changes: 14 additions & 21 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
[![CircleCI](https://badgen.net/circleci/github/scttcper/ngx-emoji-mart)](https://circleci.com/gh/scttcper/ngx-emoji-mart)
[![codecov](https://img.shields.io/codecov/c/github/scttcper/ngx-emoji-mart.svg)](https://codecov.io/github/scttcper/ngx-emoji-mart)

**DEMO**: https://ngx-emoji-mart.vercel.app
**DEMO**: https://ngx-emoji-mart.vercel.app

This project is a port of [emoji-mart](https://github.com/missive/emoji-mart) by missive

Expand Down Expand Up @@ -67,9 +67,7 @@ use component
<emoji-mart title="Pick your emoji…" emoji="point_up"></emoji-mart>
<emoji-mart set="emojione"></emoji-mart>
<emoji-mart (emojiClick)="addEmoji($event)"></emoji-mart>
<emoji-mart
[style]="{ position: 'absolute', bottom: '20px', right: '20px' }"
></emoji-mart>
<emoji-mart [style]="{ position: 'absolute', bottom: '20px', right: '20px' }"></emoji-mart>
<emoji-mart
[i18n]="{ search: 'Recherche', categories: { search: 'Résultats de recherche', recent: 'Récents' } }"
></emoji-mart>
Expand All @@ -92,9 +90,10 @@ use component
| **totalFrequentLines** | `4` | number of lines of frequently used emojis |
| **i18n** | [`{…}`](#i18n) | [An object](#i18n) containing localized strings |
| **isNative** | `false` | Renders the native unicode emoji |
| **set** | `apple` | The emoji set: `'apple', 'google', 'twitter', 'facebook'` |
| **set** | `apple` | The emoji set: `'apple', 'google', 'twitter', 'facebook'` |
| **sheetSize** | `64` | The emoji [sheet size](#sheet-sizes): `16, 20, 32, 64` |
| **backgroundImageFn** | `((set, sheetSize) => …)` | A Fn that returns that image sheet to use for emojis. Useful for avoiding a request if you have the sheet locally. |
| **imageUrlFn** | `((emoji) => string)` | A Fn that returns the url used for the given emoji. Useful for fetching your own assets. |
| **emojisToShowFilter** | `((emoji) => true)` | A Fn to choose whether an emoji should be displayed or not |
| **showPreview** | `true` | Display preview section |
| **enableSearch** | `true` | Display search bar |
Expand All @@ -109,6 +108,7 @@ use component
| **showSingleCategory** | | show only one category at a time to increase rendering performance |
| **useButton** | `false` | Uses button elements for emoji instead of spans |
| **enableFrequentEmojiSort** | `false` | Enables re-sorting of emoji on click |
| **virtualize** | `false` | Enables experimental virtualized rendering to render only emoji categories in view |

#### I18n

Expand Down Expand Up @@ -213,10 +213,10 @@ import { EmojiModule } from '@ctrl/ngx-emoji-mart/ngx-emoji';
```

| Prop | Required | Default | Description |
| -------------------------------------------- | :------: | ------------------------- | ---------------------------------------------------------------------------------------------------------------- |
| -------------------------------------------- | :------: | ------------------------- | ---------------------------------------------------------------------------------------------------------------- | --- |
| **emoji** | ✓ | | Either a string or an `emoji` object |
| **size** | ✓ | | The emoji width and height. |
| **isNative** | | `false` | Renders the native unicode emoji |
| **isNative** | | `false` | Renders the native unicode emoji |
| **(emojiClick)** | | | Params: `{ emoji, $event }` |
| **(emojiLeave)** | | | Params: `{ emoji, $event }` |
| **(emojiOver)** | | | Params: `{ emoji, $event }` |
Expand All @@ -225,9 +225,9 @@ import { EmojiModule } from '@ctrl/ngx-emoji-mart/ngx-emoji';
| **sheetSize** | | `64` | The emoji [sheet size](#sheet-sizes): `16, 20, 32, 64` |
| **backgroundImageFn** | | `((set, sheetSize) => …)` | Fn that returns that image sheet to use for emojis. Useful for avoiding a request if you have the sheet locally. |
| **skin** | | `1` | Skin color: `1, 2, 3, 4, 5, 6` |
| **tooltip** | | `false` | Show emoji short name when hovering (title) | |
| **hideObsolete** | | `false` | Hides ex: "cop" emoji in favor of female and male emoji | |
| **useButton** | | `false` | Uses button element instead of span | |
| **tooltip** | | `false` | Show emoji short name when hovering (title) | |
| **hideObsolete** | | `false` | Hides ex: "cop" emoji in favor of female and male emoji | |
| **useButton** | | `false` | Uses button element instead of span | |

#### Unsupported emojis fallback

Expand All @@ -236,17 +236,11 @@ Certain sets don’t support all emojis (i.e. Facebook doesn't support `:shrug:`
To have the component render `:shrug:` you would need to:

```ts
emojiFallback = (emoji: any, props: any) =>
emoji ? `:${emoji.shortNames[0]}:` : props.emoji;
emojiFallback = (emoji: any, props: any) => (emoji ? `:${emoji.shortNames[0]}:` : props.emoji);
```

```html
<ngx-emoji
set="twitter"
emoji="shrug"
size="24"
[fallback]="emojiFallback"
></ngx-emoji>
<ngx-emoji set="twitter" emoji="shrug" size="24" [fallback]="emojiFallback"></ngx-emoji>
```

## Custom emojis
Expand All @@ -269,8 +263,7 @@ const customEmojis = [
text: '',
emoticons: [],
keywords: ['test', 'flag'],
spriteUrl:
'https://unpkg.com/emoji-datasource-twitter@6.0.0/img/twitter/sheets-256/64.png',
spriteUrl: 'https://unpkg.com/emoji-datasource-twitter@6.0.0/img/twitter/sheets-256/64.png',
sheet_x: 1,
sheet_y: 1,
size: 64,
Expand All @@ -292,7 +285,7 @@ The `Picker` doesn’t have to be mounted for you to take advantage of the advan
import { EmojiSearch } from '@ctrl/ngx-emoji-mart';
class ex {
constructor(private emojiSearch: EmojiSearch) {
this.emojiSearch.search('christmas').map((o) => o.native);
this.emojiSearch.search('christmas').map(o => o.native);
// => [🎄, 🎅🏼, 🔔, 🎁, ⛄️, ❄️]
}
}
Expand Down
8 changes: 4 additions & 4 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,13 +21,13 @@
"@angular-devkit/build-angular": "0.1101.2",
"@angular/cli": "11.1.2",
"@angular/common": "11.1.1",
"@angular/compiler-cli": "11.1.1",
"@angular/compiler": "11.1.1",
"@angular/compiler-cli": "11.1.1",
"@angular/core": "11.1.1",
"@angular/forms": "11.1.1",
"@angular/language-service": "11.1.1",
"@angular/platform-browser-dynamic": "11.1.1",
"@angular/platform-browser": "11.1.1",
"@angular/platform-browser-dynamic": "11.1.1",
"@ctrl/ngx-github-buttons": "6.1.0",
"@types/inflection": "1.5.28",
"@types/jasmine": "3.6.3",
Expand All @@ -41,12 +41,12 @@
"emojilib": "2.4.0",
"inflection": "1.12.0",
"jasmine-core": "3.6.0",
"karma": "6.0.3",
"karma-chrome-launcher": "3.1.0",
"karma-coverage-istanbul-reporter": "3.0.3",
"karma-jasmine-html-reporter": "1.5.4",
"karma-jasmine": "4.0.1",
"karma-jasmine-html-reporter": "1.5.4",
"karma-mocha-reporter": "2.2.5",
"karma": "6.0.3",
"ng-packagr": "11.1.2",
"rxjs": "6.6.3",
"stringify-object": "3.3.0",
Expand Down
164 changes: 117 additions & 47 deletions src/lib/picker/category.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,80 +1,110 @@
import {
AfterViewInit,
ChangeDetectionStrategy,
ChangeDetectorRef,
Component,
ElementRef,
EventEmitter,
Input,
OnChanges,
OnInit,
Output,
ViewChild,
SimpleChanges,
ViewChild
} from '@angular/core';

import { Emoji, EmojiService } from '@ctrl/ngx-emoji-mart/ngx-emoji';
import { Observable, Subject } from 'rxjs';
import { EmojiFrequentlyService } from './emoji-frequently.service';


@Component({
selector: 'emoji-category',
template: `
<section #container class="emoji-mart-category"
[attr.aria-label]="i18n.categories[id]"
[class.emoji-mart-no-results]="emojis && !emojis.length"
[ngStyle]="containerStyles">
<div class="emoji-mart-category-label"
[ngStyle]="labelStyles"
[attr.data-name]="name">
<!-- already labeled by the section aria-label -->
<span #label [ngStyle]="labelSpanStyles" aria-hidden="true">
{{ i18n.categories[id] }}
</span>
</div>

<ng-template [ngIf]="emojis">
<ngx-emoji
*ngFor="let emoji of emojis; trackBy: trackById"
[emoji]="emoji"
[size]="emojiSize"
[skin]="emojiSkin"
[isNative]="emojiIsNative"
[set]="emojiSet"
[sheetSize]="emojiSheetSize"
[forceSize]="emojiForceSize"
[tooltip]="emojiTooltip"
[backgroundImageFn]="emojiBackgroundImageFn"
[hideObsolete]="hideObsolete"
(emojiOver)="emojiOver.emit($event)"
(emojiLeave)="emojiLeave.emit($event)"
(emojiClick)="emojiClick.emit($event)"
></ngx-emoji>
</ng-template>
<section
#container
class="emoji-mart-category"
[attr.aria-label]="i18n.categories[id]"
[class.emoji-mart-no-results]="emojis && !emojis.length"
[ngStyle]="containerStyles"
>
<div class="emoji-mart-category-label" [ngStyle]="labelStyles" [attr.data-name]="name">
<!-- already labeled by the section aria-label -->
<span #label [ngStyle]="labelSpanStyles" aria-hidden="true">
{{ i18n.categories[id] }}
</span>
</div>

<div *ngIf="emojis && !emojis.length">
<div>
<div
*ngIf="virtualize && filteredEmojis$ | async as filteredEmojis; else normalRenderTemplate"
>
<ngx-emoji
[emoji]="notFoundEmoji"
size="38"
*ngFor="let emoji of filteredEmojis; trackBy: trackById"
[emoji]="emoji"
[size]="emojiSize"
[skin]="emojiSkin"
[isNative]="emojiIsNative"
[set]="emojiSet"
[sheetSize]="emojiSheetSize"
[forceSize]="emojiForceSize"
[tooltip]="emojiTooltip"
[backgroundImageFn]="emojiBackgroundImageFn"
[imageUrlFn]="emojiImageUrlFn"
[hideObsolete]="hideObsolete"
[useButton]="emojiUseButton"
(emojiOver)="emojiOver.emit($event)"
(emojiLeave)="emojiLeave.emit($event)"
(emojiClick)="emojiClick.emit($event)"
agiangrant marked this conversation as resolved.
Show resolved Hide resolved
></ngx-emoji>
</div>

<div class="emoji-mart-no-results-label">
{{ i18n.notfound }}
<div *ngIf="emojis && !emojis.length">
<div>
<ngx-emoji
[emoji]="notFoundEmoji"
size="38"
[skin]="emojiSkin"
[isNative]="emojiIsNative"
[set]="emojiSet"
[sheetSize]="emojiSheetSize"
[forceSize]="emojiForceSize"
[tooltip]="emojiTooltip"
[backgroundImageFn]="emojiBackgroundImageFn"
[useButton]="emojiUseButton"
></ngx-emoji>
</div>

<div class="emoji-mart-no-results-label">
{{ i18n.notfound }}
</div>
</div>
</div>
</section>

</section>
<ng-template #normalRenderTemplate>
<div *ngIf="!virtualize && emojis">
agiangrant marked this conversation as resolved.
Show resolved Hide resolved
<ngx-emoji
*ngFor="let emoji of emojis; trackBy: trackById"
[emoji]="emoji"
[size]="emojiSize"
[skin]="emojiSkin"
[isNative]="emojiIsNative"
[set]="emojiSet"
[sheetSize]="emojiSheetSize"
[forceSize]="emojiForceSize"
[tooltip]="emojiTooltip"
[backgroundImageFn]="emojiBackgroundImageFn"
[imageUrlFn]="emojiImageUrlFn"
[hideObsolete]="hideObsolete"
(emojiOver)="emojiOver.emit($event)"
(emojiLeave)="emojiLeave.emit($event)"
(emojiClick)="emojiClick.emit($event)"
></ngx-emoji>
</div>
</ng-template>
`,
changeDetection: ChangeDetectionStrategy.OnPush,
preserveWhitespaces: false,
})
export class CategoryComponent implements OnInit {
export class CategoryComponent implements OnChanges, OnInit, AfterViewInit {
@Input() emojis?: any[] | null;
@Input() hasStickyPosition = true;
@Input() name = '';
Expand All @@ -86,6 +116,7 @@ export class CategoryComponent implements OnInit {
@Input() id: any;
@Input() hideObsolete = true;
@Input() notFoundEmoji?: string;
@Input() virtualize = false;
@Input() emojiIsNative?: Emoji['isNative'];
@Input() emojiSkin!: Emoji['skin'];
@Input() emojiSize!: Emoji['size'];
Expand All @@ -94,13 +125,16 @@ export class CategoryComponent implements OnInit {
@Input() emojiForceSize!: Emoji['forceSize'];
@Input() emojiTooltip!: Emoji['tooltip'];
@Input() emojiBackgroundImageFn?: Emoji['backgroundImageFn'];
@Input() emojiImageUrlFn?: Emoji['imageUrlFn'];
@Input() emojiUseButton?: boolean;
@Output() emojiOver: Emoji['emojiOver'] = new EventEmitter();
@Output() emojiLeave: Emoji['emojiLeave'] = new EventEmitter();
@Output() emojiClick: Emoji['emojiClick'] = new EventEmitter();
@ViewChild('container', { static: true }) container!: ElementRef;
@ViewChild('label', { static: true }) label!: ElementRef;
containerStyles: any = {};
private filteredEmojisSubject = new Subject<any[] | null | undefined>();
filteredEmojis$: Observable<any[] | null | undefined> = this.filteredEmojisSubject.asObservable();
labelStyles: any = {};
labelSpanStyles: any = {};
margin = 0;
Expand All @@ -126,12 +160,36 @@ export class CategoryComponent implements OnInit {
// this.labelSpanStyles = { position: 'absolute' };
}
}

ngOnChanges(changes: SimpleChanges) {
if (changes.emojis?.currentValue?.length !== changes.emojis?.previousValue?.length) {
this.ngAfterViewInit();
}
}

ngAfterViewInit() {
if (!this.virtualize || !this.emojis?.length) {
return;
}

const parent = this.container.nativeElement.parentNode.parentNode;
const { width } = parent.getBoundingClientRect();

const rows = Math.ceil((this.emojis.length * (this.emojiSize + 12)) / width);
agiangrant marked this conversation as resolved.
Show resolved Hide resolved

this.containerStyles = {
...this.containerStyles,
minHeight: `${rows * (this.emojiSize + 12) + 28}px`,
agiangrant marked this conversation as resolved.
Show resolved Hide resolved
};

this.ref?.detectChanges();

this.handleScroll(this.container.nativeElement.parentNode.parentNode.scrollTop);
}

memoizeSize() {
const parent = this.container.nativeElement.parentNode.parentNode;
const {
top,
height,
} = this.container.nativeElement.getBoundingClientRect();
const { top, height } = this.container.nativeElement.getBoundingClientRect();
const parentTop = parent.getBoundingClientRect().top;
const labelHeight = this.label.nativeElement.getBoundingClientRect().height;

Expand All @@ -148,7 +206,17 @@ export class CategoryComponent implements OnInit {
margin = margin < this.minMargin ? this.minMargin : margin;
margin = margin > this.maxMargin ? this.maxMargin : margin;

if (this.virtualize) {
const { top, height } = this.container.nativeElement.getBoundingClientRect();
const parentHeight = this.container.nativeElement.parentNode.parentNode.clientHeight;

if (parentHeight + 200 >= top && -height - 200 <= top) {
this.filteredEmojisSubject.next(this.emojis);
}
}

if (margin === this.margin) {
this.ref.detectChanges();
return false;
}

Expand All @@ -157,12 +225,14 @@ export class CategoryComponent implements OnInit {
}

this.margin = margin;
this.ref.detectChanges();
return true;
}

getEmojis() {
if (this.name === 'Recent') {
let frequentlyUsed = this.recent || this.frequently.get(this.perLine, this.totalFrequentLines);
let frequentlyUsed =
this.recent || this.frequently.get(this.perLine, this.totalFrequentLines);
if (!frequentlyUsed || !frequentlyUsed.length) {
frequentlyUsed = this.frequently.get(this.perLine, this.totalFrequentLines);
}
Expand Down
Loading