3 |
4 |
5 |
6 |
7 |
10 | {{item}}
11 |
12 |
13 |
14 |
15 |
16 |
17 |
--------------------------------------------------------------------------------
/src/components/emoji-picker/emoji-picker.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { IonicPageModule } from 'ionic-angular';
3 | import { EmojiPickerComponent } from './emoji-picker';
4 |
5 | @NgModule({
6 | declarations: [
7 | EmojiPickerComponent,
8 | ],
9 | imports: [
10 | IonicPageModule.forChild(EmojiPickerComponent),
11 | ],
12 | exports: [
13 | EmojiPickerComponent
14 | ]
15 | })
16 | export class EmojiPickerComponentModule {
17 | }
18 |
--------------------------------------------------------------------------------
/src/components/emoji-picker/emoji-picker.scss:
--------------------------------------------------------------------------------
1 | emoji-picker {
2 |
3 | .emoji-picker {
4 | height: 195px;
5 | border-top: 1px solid #999;
6 |
7 | .emoji-items {
8 | padding: 10px;
9 | width: 100%;
10 | height: 100%;
11 |
12 | .emoji-item {
13 | display: block;
14 | float: left;
15 | width: 12.5%;
16 | height: 42px;
17 | font-size: 1.2em;
18 | line-height: 42px;
19 | text-align: center;
20 | margin-bottom: 10px;
21 | }
22 | }
23 | }
24 | }
25 |
--------------------------------------------------------------------------------
/src/components/emoji-picker/emoji-picker.ts:
--------------------------------------------------------------------------------
1 | import { Component, forwardRef } from '@angular/core';
2 | import { EmojiProvider } from "../../providers/emoji";
3 | import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms";
4 |
5 | export const EMOJI_PICKER_VALUE_ACCESSOR: any = {
6 | provide: NG_VALUE_ACCESSOR,
7 | useExisting: forwardRef(() => EmojiPickerComponent),
8 | multi: true
9 | };
10 |
11 | @Component({
12 | selector: 'emoji-picker',
13 | providers: [EMOJI_PICKER_VALUE_ACCESSOR],
14 | templateUrl: './emoji-picker.html'
15 | })
16 | export class EmojiPickerComponent implements ControlValueAccessor {
17 |
18 | emojiArr = [];
19 |
20 | _content: string;
21 | _onChanged: Function;
22 | _onTouched: Function;
23 |
24 | constructor(emojiProvider: EmojiProvider) {
25 | this.emojiArr = emojiProvider.getEmojis();
26 | }
27 |
28 | writeValue(obj: any): void {
29 | this._content = obj;
30 | }
31 |
32 | registerOnChange(fn: any): void {
33 | this._onChanged = fn;
34 | this.setValue(this._content);
35 | }
36 |
37 | registerOnTouched(fn: any): void {
38 | this._onTouched = fn;
39 | }
40 |
41 | private setValue(val: any): any {
42 | this._content += val;
43 | if (this._content) {
44 | this._onChanged(this._content)
45 | }
46 | }
47 | }
48 |
--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |