andras/schmelczer-dev
1
0
Fork 0
Code Issues Pull requests 6 Projects Releases Packages Wiki Activity Actions

Simplify loading animation

Browse source
This commit is contained in:
schmelczerandras 2020-11-19 13:23:05 +01:00
parent b008e91461
commit c09f576cc1
3 changed files with 5 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/page/basics/preview/preview.html.ts
View file

@ -7,8 +7,8 @@ export const generate = ({ alt }: { alt: string }): html => `
<div class="preview"> <div class="preview">
<img image-viewer-ignore class="poster" /> <img image-viewer-ignore class="poster" />
<div class="overlay"> <div class="overlay">
<iframe title="${alt}" height=300 allowfullscreen loading="lazy"></iframe>
<div class="loading">${loading}</div> <div class="loading">${loading}</div>
<iframe title="${alt}" height=300 allowfullscreen loading="lazy"></iframe>
<div class="load-button">${play}</div> <div class="load-button">${play}</div>
</div> </div>
</div> </div>

11
src/page/basics/preview/preview.scss
View file

@ -32,13 +32,10 @@
} }
} }
.loading { .loading,
visibility: hidden; .loading > svg {
&, @include square(var(--large-icon-size));
& > svg { @include absolute-center;
@include square(var(--large-icon-size));
@include absolute-center;
}
} }
iframe { iframe {

4
src/page/basics/preview/preview.ts
View file

@ -11,9 +11,6 @@ export class Preview extends PageElement {
this.url += '?portfolioView'; this.url += '?portfolioView';
this.attachElementByReplacing('.poster', new Image(poster, alt)); this.attachElementByReplacing('.poster', new Image(poster, alt));
this.query('.load-button').addEventListener('click', this.loadContent.bind(this)); this.query('.load-button').addEventListener('click', this.loadContent.bind(this));
this.query('iframe').addEventListener('load', () => {
this.htmlRoot.classList.remove('waiting');
});
} }
public handleOnLoadEvent(event: OnLoadEvent): OnLoadEvent { public handleOnLoadEvent(event: OnLoadEvent): OnLoadEvent {
@ -27,7 +24,6 @@ export class Preview extends PageElement {
} }
public loadContent() { public loadContent() {
this.htmlRoot.classList.add('waiting');
this.htmlRoot.classList.add('loaded'); this.htmlRoot.classList.add('loaded');
(this.query('iframe') as HTMLIFrameElement).src = this.url; (this.query('iframe') as HTMLIFrameElement).src = this.url;
} }