mirror of https://github.com/Squidex/squidex.git
Sebastian Stehle
7 years ago
40 changed files with 516 additions and 447 deletions
@ -0,0 +1,9 @@ |
|||
<sqx-modal-dialog (close)="emitComplete()" large="true"> |
|||
<ng-container title> |
|||
Export Schema |
|||
</ng-container> |
|||
|
|||
<ng-container content> |
|||
<sqx-json-editor disabled [ngModel]="export"></sqx-json-editor> |
|||
</ng-container> |
|||
</sqx-modal-dialog> |
|||
@ -0,0 +1,2 @@ |
|||
@import '_vars'; |
|||
@import '_mixins'; |
|||
@ -0,0 +1,33 @@ |
|||
/* |
|||
* Squidex Headless CMS |
|||
* |
|||
* @license |
|||
* Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. |
|||
*/ |
|||
|
|||
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; |
|||
|
|||
import { SchemaDetailsDto } from '@app/shared'; |
|||
|
|||
@Component({ |
|||
selector: 'sqx-schema-export-form', |
|||
styleUrls: ['./schema-export-form.component.scss'], |
|||
templateUrl: './schema-export-form.component.html' |
|||
}) |
|||
export class SchemaExportFormComponent implements OnInit { |
|||
@Output() |
|||
public complete = new EventEmitter(); |
|||
|
|||
@Input() |
|||
public schema: SchemaDetailsDto; |
|||
|
|||
public export: any; |
|||
|
|||
public ngOnInit() { |
|||
this.export = this.schema.export(); |
|||
} |
|||
|
|||
public emitComplete() { |
|||
this.complete.emit(); |
|||
} |
|||
} |
|||
@ -0,0 +1,114 @@ |
|||
/* |
|||
* Squidex Headless CMS |
|||
* |
|||
* @license |
|||
* Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. |
|||
*/ |
|||
|
|||
import { AfterViewInit, Directive, ElementRef, Input, OnDestroy, Renderer2 } from '@angular/core'; |
|||
import { timer } from 'rxjs'; |
|||
|
|||
import { positionModal, ResourceOwner } from '@app/framework/internal'; |
|||
|
|||
@Directive({ |
|||
selector: '[sqxAnchoredTo]' |
|||
}) |
|||
export class ModalPlacementDirective extends ResourceOwner implements AfterViewInit, OnDestroy { |
|||
private targetElement: Element; |
|||
|
|||
@Input('sqxAnchoredTo') |
|||
public set target(element: Element) { |
|||
if (element !== this.targetElement) { |
|||
this.unsubscribeAll(); |
|||
|
|||
this.targetElement = element; |
|||
|
|||
if (element) { |
|||
this.listenToElement(element); |
|||
this.updatePosition(); |
|||
} |
|||
} |
|||
} |
|||
|
|||
@Input() |
|||
public offset = 2; |
|||
|
|||
@Input() |
|||
public position = 'bottom-right'; |
|||
|
|||
@Input() |
|||
public update = true; |
|||
|
|||
constructor( |
|||
private readonly renderer: Renderer2, |
|||
private readonly element: ElementRef<Element> |
|||
) { |
|||
super(); |
|||
} |
|||
|
|||
private listenToElement(element: any) { |
|||
this.own( |
|||
this.renderer.listen(element, 'resize', () => { |
|||
this.updatePosition(); |
|||
})); |
|||
|
|||
this.own( |
|||
this.renderer.listen(this.element.nativeElement, 'resize', () => { |
|||
this.updatePosition(); |
|||
})); |
|||
|
|||
this.own(timer(100, 100).subscribe(() => this.updatePosition())); |
|||
} |
|||
|
|||
public ngAfterViewInit() { |
|||
const modalRef = this.element.nativeElement; |
|||
|
|||
this.renderer.setStyle(modalRef, 'position', 'fixed'); |
|||
this.renderer.setStyle(modalRef, 'z-index', '1000000'); |
|||
this.renderer.setStyle(modalRef, 'right', 'auto'); |
|||
this.renderer.setStyle(modalRef, 'bottom', 'auto'); |
|||
this.renderer.setStyle(modalRef, 'margin', '0'); |
|||
|
|||
this.updatePosition(); |
|||
} |
|||
|
|||
private updatePosition() { |
|||
if (!this.targetElement) { |
|||
return; |
|||
} |
|||
|
|||
const modalRef = this.element.nativeElement; |
|||
const modalRect = this.element.nativeElement.getBoundingClientRect(); |
|||
|
|||
if (modalRect.width === 0 || modalRect.height === 0) { |
|||
return; |
|||
} |
|||
|
|||
const targetRect = this.targetElement.getBoundingClientRect(); |
|||
|
|||
let y = 0; |
|||
let x = 0; |
|||
|
|||
if (this.position === 'full') { |
|||
x = -this.offset + targetRect.left; |
|||
y = -this.offset + targetRect.top; |
|||
|
|||
const w = 2 * this.offset + targetRect.width; |
|||
const h = 2 * this.offset + targetRect.height; |
|||
|
|||
this.renderer.setStyle(modalRef, 'width', `${w}px`); |
|||
this.renderer.setStyle(modalRef, 'height', `${h}px`); |
|||
} else { |
|||
const viewH = document.documentElement!.clientHeight; |
|||
const viewW = document.documentElement!.clientWidth; |
|||
|
|||
const position = positionModal(targetRect, modalRect, this.position, this.offset, this.update, viewW, viewH); |
|||
|
|||
x = position.x; |
|||
y = position.y; |
|||
} |
|||
|
|||
this.renderer.setStyle(modalRef, 'top', `${y}px`); |
|||
this.renderer.setStyle(modalRef, 'left', `${x}px`); |
|||
} |
|||
} |
|||
@ -1,254 +0,0 @@ |
|||
/* |
|||
* Squidex Headless CMS |
|||
* |
|||
* @license |
|||
* Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. |
|||
*/ |
|||
|
|||
import { AfterViewInit, ChangeDetectorRef, Component, EmbeddedViewRef, Input, OnDestroy, Renderer2, TemplateRef, ViewChild } from '@angular/core'; |
|||
import { timer } from 'rxjs'; |
|||
|
|||
import { |
|||
DialogModel, |
|||
ModalModel, |
|||
positionModal, |
|||
ResourceOwner, |
|||
Types |
|||
} from '@app/framework/internal'; |
|||
|
|||
import { RootViewComponent } from './root-view.component'; |
|||
|
|||
declare type Model = DialogModel | ModalModel | any; |
|||
|
|||
@Component({ |
|||
selector: 'sqx-modal', |
|||
template: ` |
|||
<ng-template #templatePortalContent> |
|||
<ng-content></ng-content> |
|||
</ng-template> |
|||
` |
|||
}) |
|||
export class ModalComponent implements AfterViewInit, OnDestroy { |
|||
private readonly eventsView = new ResourceOwner(); |
|||
private readonly eventsModel = new ResourceOwner(); |
|||
private currentTarget: Element | null = null; |
|||
private currentModel: DialogModel | ModalModel | null = null; |
|||
private renderedView: EmbeddedViewRef<any> | null = null; |
|||
private renderRoot: HTMLElement | null = null; |
|||
private isOpen: boolean; |
|||
|
|||
@Input() |
|||
public target: Element; |
|||
|
|||
@Input() |
|||
public set model(value: Model) { |
|||
if (this.currentModel !== value) { |
|||
this.currentModel = value; |
|||
|
|||
this.eventsModel.unsubscribeAll(); |
|||
|
|||
this.subscribeToModel(value); |
|||
} |
|||
} |
|||
|
|||
@Input() |
|||
public offset = 2; |
|||
|
|||
@Input() |
|||
public position = 'bottom-right'; |
|||
|
|||
@Input() |
|||
public autoPosition = true; |
|||
|
|||
@Input() |
|||
public backdrop = true; |
|||
|
|||
@Input() |
|||
public closeAuto = true; |
|||
|
|||
@Input() |
|||
public closeAlways = false; |
|||
|
|||
@ViewChild('templatePortalContent', { static: false }) |
|||
public templateRef: TemplateRef<any>; |
|||
|
|||
constructor( |
|||
private readonly changeDetector: ChangeDetectorRef, |
|||
private readonly renderer: Renderer2, |
|||
private readonly rootView: RootViewComponent |
|||
) { |
|||
} |
|||
|
|||
public ngAfterViewInit() { |
|||
this.update(this.isOpen); |
|||
} |
|||
|
|||
public ngOnDestroy() { |
|||
hideModal(this.currentModel); |
|||
|
|||
this.eventsView.unsubscribeAll(); |
|||
this.eventsModel.unsubscribeAll(); |
|||
} |
|||
|
|||
public onClick() { |
|||
if (this.closeAlways) { |
|||
this.model.hide(); |
|||
} |
|||
} |
|||
|
|||
private update(isOpen: boolean) { |
|||
if (!this.templateRef || this.isOpen === isOpen) { |
|||
return; |
|||
} |
|||
|
|||
this.eventsView.unsubscribeAll(); |
|||
|
|||
if (isOpen) { |
|||
if (!this.renderedView) { |
|||
this.currentTarget = this.target; |
|||
|
|||
this.renderedView = this.rootView.viewContainer.createEmbeddedView(this.templateRef); |
|||
this.renderRoot = this.renderedView.rootNodes[0]; |
|||
|
|||
this.setupStyles(); |
|||
this.subscribeToView(); |
|||
|
|||
this.changeDetector.detectChanges(); |
|||
} |
|||
} else { |
|||
if (this.renderedView) { |
|||
this.renderedView.destroy(); |
|||
this.renderedView = null; |
|||
this.renderRoot = null; |
|||
|
|||
this.changeDetector.detectChanges(); |
|||
} |
|||
} |
|||
|
|||
this.isOpen = isOpen; |
|||
} |
|||
|
|||
private setupStyles() { |
|||
this.renderer.setStyle(this.renderRoot, 'display', 'block'); |
|||
this.renderer.setStyle(this.renderRoot, 'right', 'auto'); |
|||
this.renderer.setStyle(this.renderRoot, 'bottom', 'auto'); |
|||
this.renderer.setStyle(this.renderRoot, 'margin', '0'); |
|||
this.renderer.setStyle(this.renderRoot, 'position', 'fixed'); |
|||
this.renderer.setStyle(this.renderRoot, 'z-index', '1000000'); |
|||
} |
|||
|
|||
private subscribeToModel(value: Model) { |
|||
if (isModalModel(value)) { |
|||
this.currentModel = value; |
|||
|
|||
this.eventsModel.own(value.isOpen.subscribe(update => { |
|||
this.update(update); |
|||
})); |
|||
} else { |
|||
this.update(value === true); |
|||
} |
|||
} |
|||
|
|||
private subscribeToView() { |
|||
if (this.renderRoot) { |
|||
this.eventsView.own(this.renderer.listen(this.renderRoot, 'resize', () => { |
|||
this.updatePosition(); |
|||
})); |
|||
|
|||
if (this.currentTarget) { |
|||
this.eventsView.own(this.renderer.listen(this.currentTarget, 'resize', () => { |
|||
this.updatePosition(); |
|||
})); |
|||
|
|||
this.eventsView.own(timer(100, 100).subscribe(() => { |
|||
this.updatePosition(); |
|||
})); |
|||
} |
|||
} |
|||
|
|||
if (this.closeAuto) { |
|||
document.addEventListener('click', this.documentClickListener, true); |
|||
|
|||
this.eventsView.own(() => { |
|||
document.removeEventListener('click', this.documentClickListener); |
|||
}); |
|||
} |
|||
} |
|||
|
|||
private documentClickListener = (event: MouseEvent) => { |
|||
if (!event.target || this.renderRoot === null) { |
|||
return; |
|||
} |
|||
|
|||
const model = this.currentModel; |
|||
|
|||
if (this.closeAlways) { |
|||
setTimeout(() => { |
|||
hideModal(model); |
|||
}, 100); |
|||
} else { |
|||
try { |
|||
const rootBounds = this.renderRoot.getBoundingClientRect(); |
|||
|
|||
if (rootBounds.width > 0 && rootBounds.height > 0) { |
|||
const clickedInside = this.renderRoot.contains(<Node>event.target); |
|||
|
|||
if (!clickedInside && this.model) { |
|||
this.model.hide(); |
|||
} |
|||
} |
|||
} catch (ex) { |
|||
return; |
|||
} |
|||
} |
|||
} |
|||
|
|||
private updatePosition() { |
|||
if (!this.renderRoot || !this.currentTarget) { |
|||
return; |
|||
} |
|||
|
|||
const modalRect = this.renderRoot.getBoundingClientRect(); |
|||
|
|||
if ((modalRect.width === 0 || modalRect.height === 0) && this.position !== 'full') { |
|||
return; |
|||
} |
|||
|
|||
const targetRect = this.currentTarget.getBoundingClientRect(); |
|||
|
|||
let y = 0; |
|||
let x = 0; |
|||
|
|||
if (this.position === 'full') { |
|||
x = -this.offset + targetRect.left; |
|||
y = -this.offset + targetRect.top; |
|||
|
|||
const w = 2 * this.offset + targetRect.width; |
|||
const h = 2 * this.offset + targetRect.height; |
|||
|
|||
this.renderer.setStyle(this.renderRoot, 'width', `${w}px`); |
|||
this.renderer.setStyle(this.renderRoot, 'height', `${h}px`); |
|||
} else { |
|||
const viewH = document.documentElement!.clientHeight; |
|||
const viewW = document.documentElement!.clientWidth; |
|||
|
|||
const position = positionModal(targetRect, modalRect, this.position, this.offset, this.autoPosition, viewW, viewH); |
|||
|
|||
x = position.x; |
|||
y = position.y; |
|||
} |
|||
|
|||
this.renderer.setStyle(this.renderRoot, 'top', `${y}px`); |
|||
this.renderer.setStyle(this.renderRoot, 'left', `${x}px`); |
|||
} |
|||
} |
|||
|
|||
function hideModal(model: Model) { |
|||
if (model && isModalModel(model)) { |
|||
model.hide(); |
|||
} |
|||
} |
|||
|
|||
function isModalModel(model: Model): model is DialogModel | ModalModel { |
|||
return Types.is(model, DialogModel) || Types.is(model, ModalModel); |
|||
} |
|||
@ -0,0 +1,171 @@ |
|||
/* |
|||
* Squidex Headless CMS |
|||
* |
|||
* @license |
|||
* Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. |
|||
*/ |
|||
|
|||
import { ChangeDetectorRef, Directive, EmbeddedViewRef, Input, OnDestroy, Renderer2, TemplateRef } from '@angular/core'; |
|||
|
|||
import { |
|||
DialogModel, |
|||
ModalModel, |
|||
ResourceOwner, |
|||
Types |
|||
} from '@app/framework/internal'; |
|||
|
|||
import { RootViewComponent } from './root-view.component'; |
|||
|
|||
declare type Model = DialogModel | ModalModel | any; |
|||
|
|||
@Directive({ |
|||
selector: '[sqxModal]' |
|||
}) |
|||
export class ModalDirective implements OnDestroy { |
|||
private readonly eventsView = new ResourceOwner(); |
|||
private readonly eventsModel = new ResourceOwner(); |
|||
private currentModel: DialogModel | ModalModel | null = null; |
|||
private renderedView: EmbeddedViewRef<any> | null = null; |
|||
private renderRoots: HTMLElement[] | null; |
|||
private isOpen: boolean; |
|||
|
|||
@Input('sqxModal') |
|||
public set model(value: Model) { |
|||
if (this.currentModel !== value) { |
|||
this.currentModel = value; |
|||
|
|||
this.eventsModel.unsubscribeAll(); |
|||
|
|||
this.subscribeToModel(value); |
|||
} |
|||
} |
|||
|
|||
@Input('sqxModalCloseAuto') |
|||
public closeAuto = true; |
|||
|
|||
@Input('sqxModalCloseAlways') |
|||
public closeAlways = false; |
|||
|
|||
constructor( |
|||
private readonly changeDetector: ChangeDetectorRef, |
|||
private readonly renderer: Renderer2, |
|||
private readonly rootView: RootViewComponent, |
|||
private readonly templateRef: TemplateRef<any> |
|||
) { |
|||
} |
|||
|
|||
public ngOnDestroy() { |
|||
hideModal(this.currentModel); |
|||
|
|||
this.eventsView.unsubscribeAll(); |
|||
this.eventsModel.unsubscribeAll(); |
|||
} |
|||
|
|||
private update(isOpen: boolean) { |
|||
if (!this.templateRef || this.isOpen === isOpen) { |
|||
return; |
|||
} |
|||
|
|||
this.eventsView.unsubscribeAll(); |
|||
|
|||
if (isOpen) { |
|||
if (!this.renderedView) { |
|||
this.renderedView = this.rootView.viewContainer.createEmbeddedView(this.templateRef); |
|||
this.renderRoots = this.renderedView.rootNodes.filter(x => !!x.style); |
|||
|
|||
this.setupStyles(); |
|||
this.subscribeToView(); |
|||
|
|||
this.changeDetector.detectChanges(); |
|||
} |
|||
} else { |
|||
if (this.renderedView) { |
|||
this.renderedView.destroy(); |
|||
this.renderedView = null; |
|||
this.renderRoots = null; |
|||
|
|||
this.changeDetector.detectChanges(); |
|||
} |
|||
} |
|||
|
|||
this.isOpen = isOpen; |
|||
} |
|||
|
|||
private setupStyles() { |
|||
if (this.renderRoots) { |
|||
for (let node of this.renderRoots) { |
|||
this.renderer.setStyle(node, 'display', 'block'); |
|||
} |
|||
} |
|||
} |
|||
|
|||
private subscribeToModel(value: Model) { |
|||
if (isModalModel(value)) { |
|||
this.currentModel = value; |
|||
|
|||
this.eventsModel.own(value.isOpen.subscribe(update => { |
|||
this.update(update); |
|||
})); |
|||
} else { |
|||
this.update(value === true); |
|||
} |
|||
} |
|||
|
|||
private subscribeToView() { |
|||
if (this.closeAuto) { |
|||
document.addEventListener('click', this.documentClickListener, true); |
|||
|
|||
this.eventsView.own(() => { |
|||
document.removeEventListener('click', this.documentClickListener); |
|||
}); |
|||
} |
|||
|
|||
if (this.closeAlways && this.renderRoots) { |
|||
for (let node of this.renderRoots) { |
|||
this.eventsView.own(this.renderer.listen(node, 'click', this.elementListener)); |
|||
} |
|||
} |
|||
} |
|||
|
|||
private elementListener = (event: MouseEvent) => { |
|||
if (this.isClickedInside(event)) { |
|||
hideModal(this.currentModel); |
|||
} |
|||
} |
|||
|
|||
private documentClickListener = (event: MouseEvent) => { |
|||
if (!this.isClickedInside(event)) { |
|||
hideModal(this.currentModel); |
|||
} |
|||
} |
|||
|
|||
private isClickedInside(event: MouseEvent) { |
|||
try { |
|||
if (!this.renderRoots) { |
|||
return false; |
|||
} |
|||
|
|||
for (let node of this.renderRoots) { |
|||
const bounds = node.getBoundingClientRect(); |
|||
|
|||
if (bounds.width > 0 && bounds.height > 0 && node.contains(<Node>event.target)) { |
|||
return true; |
|||
} |
|||
} |
|||
|
|||
return false; |
|||
} catch (ex) { |
|||
return false; |
|||
} |
|||
} |
|||
} |
|||
|
|||
function hideModal(model: Model) { |
|||
if (model && isModalModel(model)) { |
|||
model.hide(); |
|||
} |
|||
} |
|||
|
|||
function isModalModel(model: Model): model is DialogModel | ModalModel { |
|||
return Types.is(model, DialogModel) || Types.is(model, ModalModel); |
|||
} |
|||
Loading…
Reference in new issue