mirror of https://github.com/Squidex/squidex.git
Sebastian Stehle
7 years ago
18 changed files with 140 additions and 16 deletions
@ -1,2 +1,6 @@ |
|||||
@import '_vars'; |
@import '_vars'; |
||||
@import '_mixins'; |
@import '_mixins'; |
||||
|
|
||||
|
.btn-status { |
||||
|
margin-left: 2rem; |
||||
|
} |
||||
@ -0,0 +1,17 @@ |
|||||
|
<ng-container *ngIf="selectedName"> |
||||
|
<span>Preview: </span> |
||||
|
|
||||
|
<div class="btn-group ml-1" #buttonGroup> |
||||
|
<button type="button" class="btn btn-secondary" (click)="follow(selectedName)"> |
||||
|
<i class="icon-external-link"></i> {{selectedName}} |
||||
|
</button> |
||||
|
|
||||
|
<div class="btn-group" *ngIf="alternativeNames.length > 0"> |
||||
|
<button type="button" class="btn btn-secondary dropdown-toggle" (click)="dropdown.toggle()"></button> |
||||
|
|
||||
|
<div class="dropdown-menu" *sqxModalView="dropdown;closeAlways:true" [sqxModalTarget]="buttonGroup" @fade> |
||||
|
<a *ngFor="let name of alternativeNames" class="dropdown-item" (click)="follow(name)">{{name}}</a> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</ng-container> |
||||
@ -0,0 +1,2 @@ |
|||||
|
@import '_vars'; |
||||
|
@import '_mixins'; |
||||
@ -0,0 +1,74 @@ |
|||||
|
/* |
||||
|
* Squidex Headless CMS |
||||
|
* |
||||
|
* @license |
||||
|
* Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. |
||||
|
*/ |
||||
|
|
||||
|
import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core'; |
||||
|
|
||||
|
import { |
||||
|
ContentDto, |
||||
|
fadeAnimation, |
||||
|
interpolate, |
||||
|
LocalStoreService, |
||||
|
ModalModel, |
||||
|
SchemaDetailsDto |
||||
|
} from '@app/shared'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'sqx-preview-button', |
||||
|
styleUrls: ['./preview-button.component.scss'], |
||||
|
templateUrl: './preview-button.component.html', |
||||
|
changeDetection: ChangeDetectionStrategy.OnPush, |
||||
|
animations: [ |
||||
|
fadeAnimation |
||||
|
] |
||||
|
}) |
||||
|
export class PreviewButtonComponent implements OnInit { |
||||
|
@Input() |
||||
|
public content: ContentDto; |
||||
|
|
||||
|
@Input() |
||||
|
public schema: SchemaDetailsDto; |
||||
|
|
||||
|
public dropdown = new ModalModel(); |
||||
|
|
||||
|
public selectedName: string | undefined; |
||||
|
|
||||
|
public alternativeNames: string[]; |
||||
|
|
||||
|
constructor( |
||||
|
private readonly localStore: LocalStoreService |
||||
|
) { |
||||
|
} |
||||
|
|
||||
|
public ngOnInit() { |
||||
|
let selectedName = this.localStore.get(`preview-button-${this.schema.id}`); |
||||
|
|
||||
|
if (!selectedName || !this.schema.previewUrls[selectedName]) { |
||||
|
selectedName = Object.keys(this.schema.previewUrls)[0]; |
||||
|
} |
||||
|
|
||||
|
this.selectUrl(selectedName); |
||||
|
} |
||||
|
|
||||
|
public follow(name: string) { |
||||
|
this.selectUrl(name); |
||||
|
|
||||
|
const url = interpolate(this.schema.previewUrls[name], this.content, 'iv'); |
||||
|
|
||||
|
window.open(url, '_blank'); |
||||
|
} |
||||
|
|
||||
|
private selectUrl(selectedName: string) { |
||||
|
if (this.selectedName !== selectedName) { |
||||
|
const keys = Object.keys(this.schema.previewUrls); |
||||
|
|
||||
|
this.selectedName = selectedName; |
||||
|
|
||||
|
this.alternativeNames = keys.filter(x => x !== this.selectedName); |
||||
|
this.alternativeNames.sort(); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
Binary file not shown.
|
Before Width: | Height: | Size: 87 KiB After Width: | Height: | Size: 88 KiB |
Binary file not shown.
Binary file not shown.
File diff suppressed because one or more lines are too long
Loading…
Reference in new issue