Altitude/AltitudeWeb
5
0
Fork 0
Code Issues 12 Pull Requests Actions Packages Projects Releases Wiki Activity

Add Angular-based carousel and improve clipboard functionality

Browse Source 
Replaced JavaScript-powered carousel and clipboard copying with Angular implementations for better integration and code maintainability. Introduced slide navigation and display using Angular bindings and streamlined the "Copy IP" functionality to utilize the new Angular method.
This commit is contained in:
Teriuihi 2025-04-04 22:29:42 +02:00
parent 5ac5b139c8
commit 8b76a729b8
2 changed files with 35 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
frontend/src/app/home/home.component.html
View File

@ -6,7 +6,7 @@
<h2 style="color: white;"><span class="player-count">Loading...</span></h2> <h2 style="color: white;"><span class="player-count">Loading...</span></h2>
<h2 style="color: white;">Server IP: play.alttd.com</h2> <h2 style="color: white;">Server IP: play.alttd.com</h2>
<!-- TODO make copy be angular not js--> <!-- TODO make copy be angular not js-->
<button type="button" style="margin-top: 50px;" class="button-outer" onclick="copyToClipboard()"> <button type="button" style="margin-top: 50px;" class="button-outer" onclick="copyToClipboard('play.alttd.com')">
<span class="button-inner" id="copybutton">Copy IP</span> <span class="button-inner" id="copybutton">Copy IP</span>
</button> </button>
</section> </section>
@ -85,15 +85,14 @@
</div> </div>
</div> </div>
</section> </section>
<!-- TODO make section below use angular not js-->
<section class="removemobile darkmodeSection"> <section class="removemobile darkmodeSection">
<div class="customcontainer"> <div class="customcontainer">
<div id="slider-wrapper"> <div id="slider-wrapper">
<div class="slider-content"> <div class="slider-content">
<div class="indexslider"> <div class="indexslider">
<div id="go-left" onclick="changeSlide(-1)" class="circleBehind go-left"></div><!-- show prev image --> <div id="go-left" onclick="previousSlide()" class="circleBehind go-left"></div><!-- show prev image -->
<div id="go-right" onclick="changeSlide(1)" class="circleBehind go-right"></div><!-- show next image --> <div id="go-right" onclick="nextSlide()" class="circleBehind go-right"></div><!-- show next image -->
<!-- display/slides here from js--> <span class="slide" [style.background-image]="'url(' + slide + ')'" [style.display]="'block'"></span>
</div> </div>
<!-- dots/indicators controls here from js--> <!-- dots/indicators controls here from js-->
</div> </div>
@ -112,7 +111,7 @@
width="120"> width="120">
<h2 style="margin: 20px 0; font-size: 1.8em;">play.alttd.com</h2> <h2 style="margin: 20px 0; font-size: 1.8em;">play.alttd.com</h2>
<!-- TODO make this use angular not js--> <!-- TODO make this use angular not js-->
<button type="button" class="button-outer" onclick="copyToClipboard()"> <button type="button" class="button-outer" onclick="copyToClipboard('play.alttd.com')">
<span class="button-inner" id="copybutton2">Copy IP</span> <span class="button-inner" id="copybutton2">Copy IP</span>
</button> </button>
</div> </div>

29
frontend/src/app/home/home.component.ts
View File

@ -15,5 +15,34 @@ export class HomeComponent implements OnInit {
this.titleService.setTitle('Survival Minecraft Server on ' + ALTITUDE_VERSION + ' | Altitude Community'); this.titleService.setTitle('Survival Minecraft Server on ' + ALTITUDE_VERSION + ' | Altitude Community');
} }
private slides: string[] = ["/public/img/backgrounds/caruselimage2.png",
"/public/img/backgrounds/caruselimage4.png",
"/public/img/backgrounds/caruselimage1.png",
"/public/img/backgrounds/caruselimage5.png",
"/public/img/backgrounds/caruselimage3.png"
];
private slideIndex = 0;
get slide(): string {
return this.slides[this.slideIndex];
}
public previousSlide() {
if (this.slideIndex > 0) {
this.slideIndex--;
} else {
this.slideIndex = this.slides.length - 1;
}
}
public nextSlide() {
this.slideIndex = (this.slideIndex + 1) % this.slides.length;
}
public copyToClipboard(text: string) {
navigator.clipboard.writeText(text);
}
protected readonly ALTITUDE_VERSION = ALTITUDE_VERSION; protected readonly ALTITUDE_VERSION = ALTITUDE_VERSION;
} }