better parsing, added test, add wirering to status comp
This commit is contained in:
parent
8d75d8a901
commit
d979abc83e
|
@ -2,6 +2,7 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||||
|
|
||||||
import { DatabindedTextComponent } from './databinded-text.component';
|
import { DatabindedTextComponent } from './databinded-text.component';
|
||||||
import { By } from '@angular/platform-browser';
|
import { By } from '@angular/platform-browser';
|
||||||
|
import { isGeneratedFile } from '@angular/compiler/src/aot/util';
|
||||||
|
|
||||||
describe('DatabindedTextComponent', () => {
|
describe('DatabindedTextComponent', () => {
|
||||||
let component: DatabindedTextComponent;
|
let component: DatabindedTextComponent;
|
||||||
|
@ -66,7 +67,6 @@ describe('DatabindedTextComponent', () => {
|
||||||
expect(component.processedText).toContain('<p>Test.<br><a href class="link-httpspeertubefrvideoswatch69bb6e90ec0f49a39e2841792f4a7c5f" title="open link">peertube.fr/videos/watch/69bb6</a></p>');
|
expect(component.processedText).toContain('<p>Test.<br><a href class="link-httpspeertubefrvideoswatch69bb6e90ec0f49a39e2841792f4a7c5f" title="open link">peertube.fr/videos/watch/69bb6</a></p>');
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
it('should parse combined hashtag, mention and link', () => {
|
it('should parse combined hashtag, mention and link', () => {
|
||||||
const hashtag = 'programmers';
|
const hashtag = 'programmers';
|
||||||
const hashtagUrl = 'https://test.social/tags/programmers';
|
const hashtagUrl = 'https://test.social/tags/programmers';
|
||||||
|
@ -84,7 +84,7 @@ describe('DatabindedTextComponent', () => {
|
||||||
expect(component.processedText).toContain('bla4');
|
expect(component.processedText).toContain('bla4');
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should parse link - GNU social', () => {
|
it('should parse link - GNU social in Mastodon', () => {
|
||||||
const sample = `bla1 <a href="https://www.lemonde.fr/planete.html?xtor=RSS-3208" rel="nofollow noopener" class="" target="_blank">https://social.bitcast.info/url/819438</a>`;
|
const sample = `bla1 <a href="https://www.lemonde.fr/planete.html?xtor=RSS-3208" rel="nofollow noopener" class="" target="_blank">https://social.bitcast.info/url/819438</a>`;
|
||||||
|
|
||||||
component.text = sample;
|
component.text = sample;
|
||||||
|
@ -92,6 +92,11 @@ describe('DatabindedTextComponent', () => {
|
||||||
expect(component.processedText).toContain('bla1');
|
expect(component.processedText).toContain('bla1');
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it('shoult parse mention - Pleroma in Mastodon', () => {
|
||||||
|
const sample = `<div><span><a class="mention status-link" href="https://pleroma.site/users/kaniini" rel="noopener" target="_blank" title="kaniini@pleroma.site">@<span>kaniini</span></a></span> <span><a class="mention status-link" href="https://mastodon.social/@Gargron" rel="noopener" target="_blank" title="Gargron@mastodon.social">@<span>Gargron</span></a></span> bla1?</div>`;
|
||||||
|
|
||||||
|
component.text = sample;
|
||||||
|
expect(component.processedText).toContain('<div><span> <a href class="account--kaniini-pleroma-site" title="@kaniini@pleroma.site">@kaniini</a> <span> <a href class="account--Gargron-mastodon-social" title="@Gargron@mastodon.social">@Gargron</a> bla1?</div>');
|
||||||
|
});
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
|
@ -38,7 +38,7 @@ export class DatabindedTextComponent implements OnInit {
|
||||||
console.warn(value);
|
console.warn(value);
|
||||||
}
|
}
|
||||||
|
|
||||||
} else if (section.includes('class="u-url mention"') || section.includes('class="mention"')) {
|
} else if (section.includes('class="u-url mention"') || section.includes('class="mention"') || section.includes('class="mention status-link"')) {
|
||||||
try {
|
try {
|
||||||
this.processUser(section);
|
this.processUser(section);
|
||||||
}
|
}
|
||||||
|
@ -68,16 +68,20 @@ export class DatabindedTextComponent implements OnInit {
|
||||||
}
|
}
|
||||||
|
|
||||||
private processUser(section: string) {
|
private processUser(section: string) {
|
||||||
let mentionClass = 'class="mention"';
|
// let mentionClass = 'class="mention"';
|
||||||
if (section.includes('class="u-url mention"'))
|
// if (section.includes('class="u-url mention"'))
|
||||||
mentionClass = 'class="u-url mention"';
|
// mentionClass = 'class="u-url mention"';
|
||||||
|
|
||||||
let extractedAccountAndNext = section.split('</a></span>');
|
let extractedAccountAndNext = section.split('</a></span>');
|
||||||
|
|
||||||
let extractedAccountName = extractedAccountAndNext[0].split('@<span>')[1].replace('<span>', '').replace('</span>', '');
|
let extractedAccountName = extractedAccountAndNext[0].split('@<span>')[1].replace('<span>', '').replace('</span>', '');
|
||||||
|
|
||||||
let extractedAccountLink = extractedAccountAndNext[0].split('href="https://')[1].split('"')[0].replace(' ', '').replace('@', '').split('/');
|
let extractedAccountLink = extractedAccountAndNext[0].split('href="https://')[1].split('"')[0].replace(' ', '').replace('@', '').split('/');
|
||||||
let extractedAccount = `@${extractedAccountLink[1]}@${extractedAccountLink[0]}`;
|
|
||||||
|
let domain = extractedAccountLink[0];
|
||||||
|
let username = extractedAccountLink[extractedAccountLink.length - 1];
|
||||||
|
|
||||||
|
let extractedAccount = `@${username}@${domain}`;
|
||||||
|
|
||||||
let classname = this.getClassNameForAccount(extractedAccount);
|
let classname = this.getClassNameForAccount(extractedAccount);
|
||||||
this.processedText += ` <a href class="${classname}" title="${extractedAccount}">@${extractedAccountName}</a>`;
|
this.processedText += ` <a href class="${classname}" title="${extractedAccount}">@${extractedAccountName}</a>`;
|
||||||
|
@ -163,22 +167,19 @@ export class DatabindedTextComponent implements OnInit {
|
||||||
}
|
}
|
||||||
|
|
||||||
private getClassNameForLink(value: string): string {
|
private getClassNameForLink(value: string): string {
|
||||||
let res = value.replace(/[.,\/#?!@$%\^&\*;:{}=\+-_`~()]/g, "");
|
let res = value.replace(/[.,\/#?!@$%+\^&\*;:{}=\-_`~()]/g, "");
|
||||||
return `link-${res}`;
|
return `link-${res}`;
|
||||||
}
|
}
|
||||||
|
|
||||||
private selectAccount(account: string) {
|
private selectAccount(account: string) {
|
||||||
console.warn(`select ${account}`);
|
|
||||||
this.accountSelected.next(account);
|
this.accountSelected.next(account);
|
||||||
}
|
}
|
||||||
|
|
||||||
private selectHashtag(hashtag: string) {
|
private selectHashtag(hashtag: string) {
|
||||||
console.warn(`select ${hashtag}`);
|
|
||||||
this.hashtagSelected.next(hashtag);
|
this.hashtagSelected.next(hashtag);
|
||||||
}
|
}
|
||||||
|
|
||||||
selectText() {
|
selectText() {
|
||||||
console.warn(`selectText`);
|
|
||||||
this.textSelected.next();
|
this.textSelected.next();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -16,7 +16,7 @@
|
||||||
getCompactRelativeTime(status.created_at) }}</div>
|
getCompactRelativeTime(status.created_at) }}</div>
|
||||||
<!-- <div #content class="status__content" innerHTML="{{displayedStatus.content}}"></div> -->
|
<!-- <div #content class="status__content" innerHTML="{{displayedStatus.content}}"></div> -->
|
||||||
|
|
||||||
<app-databinded-text class="status__content" [text]="displayedStatus.content"></app-databinded-text>
|
<app-databinded-text class="status__content" [text]="displayedStatus.content" (accountSelected)="accountSelected($event)" (hashtagSelected)="hashtagSelected($event)" (textSelected)="textSelected()"></app-databinded-text>
|
||||||
|
|
||||||
|
|
||||||
<app-attachements *ngIf="hasAttachments" class="attachments" [attachments]="displayedStatus.media_attachments"></app-attachements>
|
<app-attachements *ngIf="hasAttachments" class="attachments" [attachments]="displayedStatus.media_attachments"></app-attachements>
|
||||||
|
|
|
@ -107,8 +107,20 @@ export class StatusComponent implements OnInit {
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
test(): boolean {
|
// test(): boolean {
|
||||||
console.warn('heeeeyaaa!');
|
// console.warn('heeeeyaaa!');
|
||||||
return false;
|
// return false;
|
||||||
|
// }
|
||||||
|
|
||||||
|
accountSelected(accountName: string): void {
|
||||||
|
console.warn(`status comp: accountSelected ${accountName}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
hashtagSelected(hashtag: string): void {
|
||||||
|
console.warn(`status comp: hashtagSelected ${hashtag}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
textSelected(): void {
|
||||||
|
console.warn(`status comp: textSelected`);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue