MaDgIK
/
openaire-library
13
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Transition Group: Add enable disable functionallity. User component: Add condition to avoid double message for login.

This commit is contained in:
Konstantinos Triantafyllou 2022-07-14 17:38:54 +03:00
parent 013ce7d5f4
commit e3f082b802
2 changed files with 56 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
login/user.component.html
View File

@ -52,7 +52,7 @@
<button (click)="login()" class=" uk-button uk-button-primary">Login</button>
</div>
</form-->
<div *ngIf="errorCode == '1' || !loggedIn" class="uk-alert uk-alert-warning">
<div *ngIf="errorCode == '1' || (!loggedIn && errorCode != '3')" class="uk-alert uk-alert-warning">
The requested page requires authentication.
<span *ngIf="!loggedIn">Please <a class="uk-link" (click)="logIn()"> sign in</a> to continue.
</span>

78
utils/transition-group/transition-group.component.ts
View File

@ -1,7 +1,16 @@
import {TransitionGroupItemDirective} from "./transition-group-item.directive";
import {AfterViewInit, Component, ContentChildren, OnDestroy, QueryList, ViewEncapsulation} from "@angular/core";
import {Subscription} from "rxjs";
import {THREE} from "@angular/cdk/keycodes";
/**
* Transition Component for array changes
*
* Call init() method if array is changed. e.g. (different array, insert, delete) and before swap action
*
* If a change is triggered, but you want to avoid transition use disable() - (Your changes) - init() - enable()
*
* */
@Component({
selector: '[transition-group]',
template: '<ng-content></ng-content>',
@ -10,35 +19,38 @@ import {Subscription} from "rxjs";
})
export class TransitionGroupComponent implements AfterViewInit, OnDestroy {
@ContentChildren(TransitionGroupItemDirective) items: QueryList<TransitionGroupItemDirective>;
private disabled: boolean = false;
private subscription: Subscription;
ngAfterViewInit() {
this.init();
this.subscription = this.items.changes.subscribe(items => {
items.forEach(item => item.prevPos = item.newPos || item.prevPos);
items.forEach(this.runCallback);
this.refreshPosition('newPos');
items.forEach(item => item.prevPos = item.prevPos || item.newPos); // for new items
const animate = () => {
items.forEach(this.applyTranslation);
this['_forceReflow'] = document.body.offsetHeight; // force reflow to put everything in position
this.items.forEach(this.runTransition.bind(this));
}
const willMoveSome = items.some((item) => {
const dx = item.prevPos.left - item.newPos.left;
const dy = item.prevPos.top - item.newPos.top;
return dx || dy;
});
if (willMoveSome) {
animate();
} else {
setTimeout(() => { // for removed items
this.refreshPosition('newPos');
if(!this.disabled) {
items.forEach(item => item.prevPos = item.newPos || item.prevPos);
items.forEach(this.runCallback);
this.refreshPosition('newPos');
items.forEach(item => item.prevPos = item.prevPos || item.newPos); // for new items
const animate = () => {
items.forEach(this.applyTranslation);
this['_forceReflow'] = document.body.offsetHeight; // force reflow to put everything in position
this.items.forEach(this.runTransition.bind(this));
}
const willMoveSome = items.some((item) => {
const dx = item.prevPos.left - item.newPos.left;
const dy = item.prevPos.top - item.newPos.top;
return dx || dy;
});
if (willMoveSome) {
animate();
}, 0);
} else {
setTimeout(() => { // for removed items
this.refreshPosition('newPos');
animate();
}, 0);
}
}
});
}
@ -49,6 +61,10 @@ export class TransitionGroupComponent implements AfterViewInit, OnDestroy {
}
}
/**
* Should be used in every array change e.g. (different array, insert, delete)
* and before swap action
* */
init() {
this.refreshPosition('prevPos');
this.refreshPosition('newPos');
@ -95,4 +111,20 @@ export class TransitionGroupComponent implements AfterViewInit, OnDestroy {
style.transitionDuration = '0s';
}
}
/**
* Enable transition
*
* */
enable() {
this.disabled = false;
}
/**
* Disable transition
*
* */
disable() {
this.disabled = true;
}
}