mirror of https://github.com/Squidex/squidex.git
Browse Source
* Improve performance by moving all animations to nested components. * Get rid of animations. * Another improvement. * Expand once.pull/808/head
Sebastian Stehle
4 years ago
committed by
GitHub
GitHub
95 changed files with 338 additions and 298 deletions
@ -1,5 +1,8 @@ |
|||||
<sqx-dropdown [formControl]="control" [items]="snapshot.contentNames" valueProperty="id" (open)="onOpened()"> |
<sqx-dropdown [formControl]="control" [items]="snapshot.contentNames" valueProperty="id" (open)="onOpened()"> |
||||
<ng-template let-content="$implicit" let-context="context"> |
<ng-template let-content="$implicit" let-context="context"> |
||||
<span class="truncate" [innerHTML]="content.name | sqxHighlight:context"></span> |
<span class="truncate" [innerHTML]="content.name | sqxHighlight:context | sqxSafeHtml"></span> |
||||
|
</ng-template> |
||||
|
<ng-template let-content="$implicit" let-context="context"> |
||||
|
<span class="truncate">{{content.name}}</span> |
||||
</ng-template> |
</ng-template> |
||||
</sqx-dropdown> |
</sqx-dropdown> |
||||
@ -0,0 +1 @@ |
|||||
|
<ng-content></ng-content> |
||||
@ -0,0 +1,37 @@ |
|||||
|
/* |
||||
|
* Squidex Headless CMS |
||||
|
* |
||||
|
* @license |
||||
|
* Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. |
||||
|
*/ |
||||
|
|
||||
|
import { ChangeDetectionStrategy, Component, ElementRef, HostBinding } from '@angular/core'; |
||||
|
import { fadeAnimation } from './animations'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'sqx-dropdown-menu', |
||||
|
styleUrls: ['./dropdown-menu.component.scss'], |
||||
|
templateUrl: './dropdown-menu.component.html', |
||||
|
host: { |
||||
|
class: 'dropdown-menu', |
||||
|
}, |
||||
|
animations: [ |
||||
|
fadeAnimation, |
||||
|
], |
||||
|
changeDetection: ChangeDetectionStrategy.OnPush, |
||||
|
}) |
||||
|
export class DropdownMenuComponent { |
||||
|
@HostBinding('@fade') |
||||
|
public get fade() { |
||||
|
return true; |
||||
|
} |
||||
|
|
||||
|
public get nativeElement() { |
||||
|
return this.element.nativeElement; |
||||
|
} |
||||
|
|
||||
|
constructor( |
||||
|
private readonly element: ElementRef, |
||||
|
) { |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,7 @@ |
|||||
|
<div class="errors-container" *ngIf="errorMessages.length > 0" @fade> |
||||
|
<div class="errors"> |
||||
|
<ng-container *ngFor="let message of errorMessages"> |
||||
|
{{message}} |
||||
|
</ng-container> |
||||
|
</div> |
||||
|
</div> |
||||
@ -0,0 +1,4 @@ |
|||||
|
:host { |
||||
|
@include force-width(100%); |
||||
|
align-self: flex-start; |
||||
|
} |
||||
@ -0,0 +1,23 @@ |
|||||
|
/* |
||||
|
* Squidex Headless CMS |
||||
|
* |
||||
|
* @license |
||||
|
* Copyright (c) Sebastian Stehle. All rights r vbeserved |
||||
|
*/ |
||||
|
|
||||
|
import { ChangeDetectionStrategy, Component, Input } from '@angular/core'; |
||||
|
import { fadeAnimation } from '@app/framework/internal'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'sqx-errors-messages', |
||||
|
styleUrls: ['./control-errors-messages.component.scss'], |
||||
|
templateUrl: './control-errors-messages.component.html', |
||||
|
animations: [ |
||||
|
fadeAnimation, |
||||
|
], |
||||
|
changeDetection: ChangeDetectionStrategy.OnPush, |
||||
|
}) |
||||
|
export class ControlErrorsMessagesComponent { |
||||
|
@Input() |
||||
|
public errorMessages: ReadonlyArray<string>; |
||||
|
} |
||||
@ -1,7 +1 @@ |
|||||
<div class="errors-container" *ngIf="snapshot.errorMessages.length > 0" @fade> |
<sqx-errors-messages [errorMessages]="snapshot.errorMessages" *ngIf="snapshot.errorMessages.length > 0"></sqx-errors-messages> |
||||
<div class="errors"> |
|
||||
<ng-container *ngFor="let message of snapshot.errorMessages"> |
|
||||
{{message}} |
|
||||
</ng-container> |
|
||||
</div> |
|
||||
</div> |
|
||||
@ -0,0 +1,68 @@ |
|||||
|
/* |
||||
|
* Squidex Headless CMS |
||||
|
* |
||||
|
* @license |
||||
|
* Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. |
||||
|
*/ |
||||
|
|
||||
|
import { Directive, ElementRef, Input, OnChanges, Renderer2 } from '@angular/core'; |
||||
|
import marked from 'marked'; |
||||
|
|
||||
|
const RENDERER_DEFAULT = new marked.Renderer(); |
||||
|
const RENDERER_INLINE = new marked.Renderer(); |
||||
|
|
||||
|
RENDERER_DEFAULT.link = (href, _, text) => { |
||||
|
if (href && href.startsWith('mailto')) { |
||||
|
return text; |
||||
|
} else { |
||||
|
return `<a href="${href}" target="_blank", rel="noopener">${text} <i class="icon-external-link"></i></a>`; |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
RENDERER_INLINE.paragraph = (text) => { |
||||
|
return text; |
||||
|
}; |
||||
|
|
||||
|
RENDERER_INLINE.link = RENDERER_DEFAULT.link; |
||||
|
|
||||
|
@Directive({ |
||||
|
selector: '[sqxMarkdown]', |
||||
|
}) |
||||
|
export class MarkdownDirective implements OnChanges { |
||||
|
@Input('sqxMarkdown') |
||||
|
public markdown: string; |
||||
|
|
||||
|
@Input() |
||||
|
public inline = true; |
||||
|
|
||||
|
@Input() |
||||
|
public optional = false; |
||||
|
|
||||
|
constructor( |
||||
|
private readonly element: ElementRef, |
||||
|
private readonly renderer: Renderer2, |
||||
|
) { |
||||
|
} |
||||
|
|
||||
|
public ngOnChanges() { |
||||
|
let html = ''; |
||||
|
|
||||
|
const markdown = this.markdown; |
||||
|
|
||||
|
if (!markdown) { |
||||
|
html = markdown; |
||||
|
} else if (this.optional && markdown.indexOf('!') !== 0) { |
||||
|
html = markdown; |
||||
|
} else if (this.markdown) { |
||||
|
const renderer = this.inline ? RENDERER_INLINE : RENDERER_DEFAULT; |
||||
|
|
||||
|
html = marked(this.markdown, { renderer }); |
||||
|
} |
||||
|
|
||||
|
if (!html || html === this.markdown || html.indexOf('<') < 0) { |
||||
|
this.renderer.setProperty(this.element.nativeElement, 'textContent', html); |
||||
|
} else { |
||||
|
this.renderer.setProperty(this.element.nativeElement, 'innerHTML', html); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
Loading…
Reference in new issue