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

[new-theme | Library]: section-scroll component changed to another effect. (not finalized)

This commit is contained in:
Konstantina Galouni 2022-01-20 00:47:29 +02:00
parent e8f9970074
commit 71800f06c9
2 changed files with 67 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
utils/section-scroll/section-scroll.component.css
View File

@ -1,10 +1,44 @@
/* hide scrollbar but allow scrolling */ .section {
*[scroll] { position: relative;
-ms-overflow-style: none; /* for Internet Explorer, Edge */ height: auto;
scrollbar-width: none; /* for Firefox */ /*display: flex;*/
overflow-y: scroll;
} }
*[scroll]::-webkit-scrollbar { .section [top] {
display: none; /* for Chrome, Safari, and Opera */ /*height: 80vh;*/
/*border: 1px solid rebeccapurple;*/
}
.section [top] {
position: sticky;
top: 0;
z-index: 2;
height: auto;
/*max-height: 80vh;*/
/*border: 1px solid deeppink;*/
}
/*.content {*/
/* position: relative;*/
/* height: auto;*/
/* z-index: 1;*/
/* border: 1px solid cyan;*/
/*}*/
[left] {
position: sticky;
top: 0;
height: 100vh;
/*border: 1px solid red;*/
}
[left] img {
/*position: absolute;*/
/*top: 50%;*/
/*left: 50%;*/
/*transform: translate(-50%, -50%);*/
position: sticky;
top: 50%;
left: 10%;
/*border: 1px solid greenyellow;*/
} }

36
utils/section-scroll/section-scroll.component.ts
View File

@ -11,10 +11,21 @@ import {Component, HostListener, Input, OnInit, ViewEncapsulation} from "@angula
@Component({ @Component({
selector: 'section-scroll', selector: 'section-scroll',
template: ` template: `
<div class="uk-grid" style="align-items: self-start" [ngClass]="customClass">
<ng-content select="[fixed]"></ng-content> <!--&lt;!&ndash;alternative&ndash;&gt;-->
<ng-content select="[scroll]"></ng-content> <!--<div class="section" [ngClass]="customClass">-->
</div> <!-- <ng-content select="[top]"></ng-content>-->
<!-- <div class="uk-grid content" [ngClass]="childrenCustomClass">-->
<!-- <ng-content select="[left]"></ng-content>-->
<!-- <ng-content select="[scroll]"></ng-content>-->
<!-- </div>-->
<!--</div>-->
<div class="section uk-grid" [ngClass]="customClass">
<ng-content select="[top]"></ng-content>
<ng-content select="[left]"></ng-content>
<ng-content select="[scroll]"></ng-content>
</div>
`, `,
styleUrls: ['section-scroll.component.css'], styleUrls: ['section-scroll.component.css'],
encapsulation: ViewEncapsulation.None encapsulation: ViewEncapsulation.None
@ -23,7 +34,9 @@ export class SectionScrollComponent implements OnInit {
@Input() @Input()
public customClass = null; public customClass = null;
private fixed: HTMLElement; @Input()
public childrenCustomClass = null;
private absolute: HTMLCollectionOf<Element>;
private scroll: HTMLElement; private scroll: HTMLElement;
constructor() { constructor() {
@ -31,23 +44,26 @@ export class SectionScrollComponent implements OnInit {
@HostListener('window:resize', ['$event']) @HostListener('window:resize', ['$event'])
onResize(event) { onResize(event) {
this.setHeight(); //this.setHeight();
} }
ngOnInit() { ngOnInit() {
this.setHeight(); //this.setHeight();
} }
setHeight() { setHeight() {
if(typeof document !== "undefined") { if(typeof document !== "undefined") {
this.fixed = document.querySelector('[fixed]'); // this.absolute = document.querySelector('[absolute]');
this.absolute = document.getElementsByClassName('absolute');
this.scroll = document.querySelector('[scroll]'); this.scroll = document.querySelector('[scroll]');
this.scroll.setAttribute('style','max-height: ' + this.height + 'px;'); this.scroll.setAttribute('style','max-height: ' + this.height + 'px;');
} }
} }
get height():number { get height():number {
return this.fixed?this.fixed.offsetHeight:0; let htmlElement = this.absolute&&this.absolute.length>0?this.absolute[0]:null;
return htmlElement?htmlElement['offsetHeight']:0;
} }
} }