mirror of https://github.com/Squidex/squidex.git
Sebastian Stehle
9 years ago
37 changed files with 336 additions and 199 deletions
@ -0,0 +1,3 @@ |
|||
<div [formGroup]="editForm"> |
|||
<span>Nothing to setup</span> |
|||
<div> |
|||
@ -0,0 +1,2 @@ |
|||
@import '_vars'; |
|||
@import '_mixins'; |
|||
@ -0,0 +1,25 @@ |
|||
/* |
|||
* Squidex Headless CMS |
|||
* |
|||
* @license |
|||
* Copyright (c) Sebastian Stehle. All rights reserved |
|||
*/ |
|||
|
|||
import { ChangeDetectionStrategy, Component, Input } from '@angular/core'; |
|||
import { FormGroup } from '@angular/forms'; |
|||
|
|||
import { AssetsFieldPropertiesDto } from 'shared'; |
|||
|
|||
@Component({ |
|||
selector: 'sqx-assets-ui', |
|||
styleUrls: ['assets-ui.component.scss'], |
|||
templateUrl: 'assets-ui.component.html', |
|||
changeDetection: ChangeDetectionStrategy.OnPush |
|||
}) |
|||
export class AssetsUIComponent { |
|||
@Input() |
|||
public editForm: FormGroup; |
|||
|
|||
@Input() |
|||
public properties: AssetsFieldPropertiesDto; |
|||
} |
|||
@ -0,0 +1,9 @@ |
|||
<div [formGroup]="editForm"> |
|||
<div class="form-group row"> |
|||
<label class="col col-3 col-form-checkbox-label" for="field-required">Required</label> |
|||
|
|||
<div class="col col-6"> |
|||
<input type="checkbox" class="form-check-input" id="field-required" formControlName="isRequired" /> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
@ -0,0 +1,10 @@ |
|||
@import '_vars'; |
|||
@import '_mixins'; |
|||
|
|||
.form-check-input { |
|||
margin: 0; |
|||
} |
|||
|
|||
.form-group { |
|||
margin-top: .5rem; |
|||
} |
|||
@ -0,0 +1,25 @@ |
|||
/* |
|||
* Squidex Headless CMS |
|||
* |
|||
* @license |
|||
* Copyright (c) Sebastian Stehle. All rights reserved |
|||
*/ |
|||
|
|||
import { ChangeDetectionStrategy, Component, Input } from '@angular/core'; |
|||
import { FormGroup } from '@angular/forms'; |
|||
|
|||
import { AssetsFieldPropertiesDto } from 'shared'; |
|||
|
|||
@Component({ |
|||
selector: 'sqx-assets-validation', |
|||
styleUrls: ['assets-validation.component.scss'], |
|||
templateUrl: 'assets-validation.component.html', |
|||
changeDetection: ChangeDetectionStrategy.OnPush |
|||
}) |
|||
export class AssetsValidationComponent { |
|||
@Input() |
|||
public editForm: FormGroup; |
|||
|
|||
@Input() |
|||
public properties: AssetsFieldPropertiesDto; |
|||
} |
|||
@ -1,29 +0,0 @@ |
|||
/* |
|||
* Squidex Headless CMS |
|||
* |
|||
* @license |
|||
* Copyright (c) Sebastian Stehle. All rights reserved |
|||
*/ |
|||
|
|||
import { Directive, ElementRef, HostListener, Renderer } from '@angular/core'; |
|||
|
|||
@Directive({ |
|||
selector: '[sqxHideInvalidImage]' |
|||
}) |
|||
export class HideInvalidImage { |
|||
constructor( |
|||
private readonly elementRef: ElementRef, |
|||
private readonly renderer: Renderer |
|||
) { |
|||
} |
|||
|
|||
@HostListener('error') |
|||
public onError() { |
|||
this.renderer.setElementStyle(this.elementRef.nativeElement, 'visibility', 'hidden'); |
|||
} |
|||
|
|||
@HostListener('load') |
|||
public onLoad() { |
|||
this.renderer.setElementStyle(this.elementRef.nativeElement, 'visibility', 'visible'); |
|||
} |
|||
} |
|||
@ -0,0 +1,98 @@ |
|||
/* |
|||
* Squidex Headless CMS |
|||
* |
|||
* @license |
|||
* Copyright (c) Sebastian Stehle. All rights reserved |
|||
*/ |
|||
|
|||
import { Directive, ElementRef, HostListener, Input, OnChanges, OnInit, Renderer } from '@angular/core'; |
|||
|
|||
import { MathHelper } from './../utils/math-helper'; |
|||
|
|||
@Directive({ |
|||
selector: '[sqxImageSource]' |
|||
}) |
|||
export class ImageSourceComponent implements OnChanges, OnInit { |
|||
private retries = 0; |
|||
private query = MathHelper.guid(); |
|||
|
|||
@Input('sqxImageSource') |
|||
public imageSource: string; |
|||
|
|||
@Input() |
|||
public retryCount = 10; |
|||
|
|||
@Input() |
|||
public parent: any = null; |
|||
|
|||
constructor( |
|||
private readonly elementRef: ElementRef, |
|||
private readonly renderer: Renderer |
|||
) { |
|||
} |
|||
|
|||
public ngOnChanges() { |
|||
this.retries = 0; |
|||
|
|||
this.setImageSource(); |
|||
} |
|||
|
|||
public ngOnInit() { |
|||
if (this.parent === null) { |
|||
this.parent = this.elementRef.nativeElement.parentElement; |
|||
} |
|||
|
|||
this.resize(this.parent); |
|||
|
|||
this.renderer.listen(this.parent, 'resize', () => { |
|||
this.resize(this.parent); |
|||
}); |
|||
} |
|||
|
|||
@HostListener('error') |
|||
public onError() { |
|||
this.renderer.setElementStyle(this.elementRef.nativeElement, 'visibility', 'hidden'); |
|||
|
|||
this.retryLoadingImage(); |
|||
} |
|||
|
|||
@HostListener('resize') |
|||
public onResize() { |
|||
this.setImageSource(); |
|||
} |
|||
|
|||
@HostListener('load') |
|||
public onLoad() { |
|||
this.renderer.setElementStyle(this.elementRef.nativeElement, 'visibility', 'visible'); |
|||
} |
|||
|
|||
private resize(parent: any) { |
|||
const size = parent.getBoundingClientRect(); |
|||
|
|||
this.renderer.setElementStyle(this.elementRef.nativeElement, 'width', size.width + 'px'); |
|||
this.renderer.setElementStyle(this.elementRef.nativeElement, 'height', size.height + 'px'); |
|||
} |
|||
|
|||
private setImageSource() { |
|||
const size = this.elementRef.nativeElement.getBoundingClientRect(); |
|||
|
|||
const w = Math.round(size.width); |
|||
const h = Math.round(size.height); |
|||
|
|||
const source = `${this.imageSource}&width=${w}&height=${h}&mode=Crop&q=${this.query}`; |
|||
|
|||
this.renderer.setElementAttribute(this.elementRef.nativeElement, 'src', source); |
|||
} |
|||
|
|||
private retryLoadingImage() { |
|||
this.retries++; |
|||
|
|||
if (this.retries <= 10) { |
|||
setTimeout(() => { |
|||
this.query = MathHelper.guid(); |
|||
|
|||
this.setImageSource(); |
|||
}, this.retries * 1000); |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,3 @@ |
|||
<div class="assets-container"> |
|||
|
|||
</div> |
|||
@ -0,0 +1,8 @@ |
|||
@import '_vars'; |
|||
@import '_mixins'; |
|||
|
|||
.assets { |
|||
&-container { |
|||
border: 1px solid $color-input; |
|||
} |
|||
} |
|||
@ -0,0 +1,44 @@ |
|||
/* |
|||
* Squidex Headless CMS |
|||
* |
|||
* @license |
|||
* Copyright (c) Sebastian Stehle. All rights reserved |
|||
*/ |
|||
|
|||
import { Component, forwardRef } from '@angular/core'; |
|||
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; |
|||
|
|||
const NOOP = () => { /* NOOP */ }; |
|||
|
|||
export const SQX_ASSETS_EDITOR_CONTROL_VALUE_ACCESSOR: any = { |
|||
provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => AssetsEditorComponent), multi: true |
|||
}; |
|||
|
|||
@Component({ |
|||
selector: 'sqx-assets-editor', |
|||
styleUrls: ['./assets-editor.component.scss'], |
|||
templateUrl: './assets-editor.component.html', |
|||
providers: [SQX_ASSETS_EDITOR_CONTROL_VALUE_ACCESSOR] |
|||
}) |
|||
export class AssetsEditorComponent implements ControlValueAccessor { |
|||
private changeCallback: (value: any) => void = NOOP; |
|||
private touchedCallback: () => void = NOOP; |
|||
|
|||
public isDisabled = false; |
|||
|
|||
public writeValue(value: any) { |
|||
// TODO
|
|||
} |
|||
|
|||
public setDisabledState(isDisabled: boolean): void { |
|||
this.isDisabled = isDisabled; |
|||
} |
|||
|
|||
public registerOnChange(fn: any) { |
|||
this.changeCallback = fn; |
|||
} |
|||
|
|||
public registerOnTouched(fn: any) { |
|||
this.touchedCallback = fn; |
|||
} |
|||
} |
|||
Binary file not shown.
|
Before Width: | Height: | Size: 54 KiB After Width: | Height: | Size: 54 KiB |
Binary file not shown.
Binary file not shown.
Loading…
Reference in new issue