mirror of https://github.com/Squidex/squidex.git
Sebastian Stehle
9 years ago
15 changed files with 184 additions and 106 deletions
@ -1,18 +1,16 @@ |
|||
<span> |
|||
<input type="text" class="form-control" (blur)="blur()" [attr.name]="inputName" (keydown)="onKeyDown($event)" [attr.placeholder]="placeholder" |
|||
<input type="text" class="form-control" (blur)="blur()" [attr.name]="inputName" (keydown)="onKeyDown($event)" [attr.placeholder]="placeholder" #input |
|||
[formControl]="queryInput" |
|||
autocomplete="off" |
|||
autocorrect="off" |
|||
autocapitalize="off"> |
|||
|
|||
<div class="items-container" *ngIf="items.length > 0"> |
|||
<div class="items" #container> |
|||
<div *ngFor="let item of items; let i = index;" class="item" [class.active]="i === itemSelection" (mousedown)="chooseItem(item)" (mouseover)="selectIndex(i)" [sqxScrollActive]="i === itemSelection" [container]="container"> |
|||
<img class="item-image" [attr.src]="item.image" /> |
|||
<div *ngIf="items.length > 0" [sqxModalTarget]="input" class="control-dropdown" #container> |
|||
<div *ngFor="let item of items; let i = index;" class="control-dropdown-item control-dropdown-item-selectable" [class.active]="i === itemSelection" (mousedown)="chooseItem(item)" (mouseover)="selectIndex(i)" [sqxScrollActive]="i === itemSelection" [container]="container"> |
|||
<img class="control-dropdown-item-image" [attr.src]="item.image" /> |
|||
|
|||
<span class="item-title">{{item.title}}</span> |
|||
<span class="item-description">{{item.description}}</span> |
|||
</div> |
|||
<span class="control-dropdown-item-title">{{item.title}}</span> |
|||
<span class="control-dropdown-item-description">{{item.description}}</span> |
|||
</div> |
|||
</div> |
|||
</span> |
|||
@ -0,0 +1,106 @@ |
|||
/* |
|||
* Squidex Headless CMS |
|||
* |
|||
* @license |
|||
* Copyright (c) Sebastian Stehle. All rights reserved |
|||
*/ |
|||
|
|||
import { AfterViewInit, Directive, ElementRef, Input, OnDestroy, OnInit, Renderer } from '@angular/core'; |
|||
import { Observable, Subscription } from 'rxjs'; |
|||
|
|||
@Directive({ |
|||
selector: '[sqxModalTarget]' |
|||
}) |
|||
export class ModalTargetDirective implements AfterViewInit, OnDestroy, OnInit { |
|||
private elementResizeListener: Function; |
|||
private targetResizeListener: Function; |
|||
private timer: Subscription; |
|||
private targetElement: any; |
|||
|
|||
@Input('sqxModalTarget') |
|||
public target: any; |
|||
|
|||
@Input() |
|||
public offset = 2; |
|||
|
|||
@Input() |
|||
public position = 'left'; |
|||
|
|||
constructor( |
|||
private readonly renderer: Renderer, |
|||
private readonly element: ElementRef |
|||
) { |
|||
} |
|||
|
|||
public ngOnInit() { |
|||
if (this.target) { |
|||
this.targetElement = this.target; |
|||
|
|||
this.targetResizeListener = |
|||
this.renderer.listen(this.targetElement, 'resize', () => { |
|||
this.updatePosition(); |
|||
}); |
|||
|
|||
this.elementResizeListener = |
|||
this.renderer.listen(this.element.nativeElement, 'resize', () => { |
|||
this.updatePosition(); |
|||
}); |
|||
|
|||
this.timer = |
|||
Observable.timer(100, 100).subscribe(() => { |
|||
this.updatePosition(); |
|||
}); |
|||
} |
|||
} |
|||
|
|||
public ngOnDestroy() { |
|||
if (this.targetResizeListener) { |
|||
this.targetResizeListener(); |
|||
} |
|||
|
|||
if (this.elementResizeListener) { |
|||
this.elementResizeListener(); |
|||
} |
|||
|
|||
if (this.timer) { |
|||
this.timer.unsubscribe(); |
|||
} |
|||
} |
|||
|
|||
public ngAfterViewInit() { |
|||
const modalRef = this.element.nativeElement; |
|||
|
|||
this.renderer.setElementStyle(modalRef, 'position', 'fixed'); |
|||
this.renderer.setElementStyle(modalRef, 'z-index', '1000000'); |
|||
|
|||
this.updatePosition(); |
|||
} |
|||
|
|||
private updatePosition() { |
|||
const viewportHeight = document.documentElement.clientHeight; |
|||
|
|||
const modalRef = this.element.nativeElement; |
|||
const modalRect = this.element.nativeElement.getBoundingClientRect(); |
|||
|
|||
const targetRect: ClientRect = this.targetElement.getBoundingClientRect(); |
|||
|
|||
const left = this.position === 'left' ? |
|||
targetRect.left : |
|||
targetRect.right - modalRect.width; |
|||
|
|||
let top = targetRect.bottom + this.offset; |
|||
|
|||
if (top + modalRect.height > viewportHeight) { |
|||
const potentialTop = targetRect.top - modalRect.height - this.offset; |
|||
|
|||
if (potentialTop > 0) { |
|||
top = potentialTop; |
|||
} |
|||
} |
|||
|
|||
this.renderer.setElementStyle(modalRef, 'top', top + 'px'); |
|||
this.renderer.setElementStyle(modalRef, 'left', left + 'px'); |
|||
this.renderer.setElementStyle(modalRef, 'right', 'auto'); |
|||
this.renderer.setElementStyle(modalRef, 'bottom', 'auto'); |
|||
} |
|||
} |
|||
Loading…
Reference in new issue