tinker
This commit is contained in:
parent
4f25cdf47b
commit
46756f6e80
5 changed files with 85 additions and 14 deletions
|
|
@ -1,6 +1,8 @@
|
||||||
|
<div #container class="uhr black">
|
||||||
<span class="item dot dot1"></span>
|
<span class="item dot dot1"></span>
|
||||||
<span class="item dot dot2"></span>
|
<span class="item dot dot2"></span>
|
||||||
<span class="item dot dot3"></span>
|
<span class="item dot dot3"></span>
|
||||||
<span class="item dot dot4"></span>
|
<span class="item dot dot4"></span>
|
||||||
<div class="letterarea"></div>
|
<div class="letterarea"></div>
|
||||||
<div class="reflection"></div>
|
<div class="reflection"></div>
|
||||||
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -17,7 +17,11 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||||
src: url('../../_old/resources/uhr.woff') format('woff');
|
src: url('../../_old/resources/uhr.woff') format('woff');
|
||||||
}
|
}
|
||||||
|
|
||||||
:host(.uhr) {
|
:host {
|
||||||
|
background: hotpink;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uhr {
|
||||||
font-family: 'Uhrenfont', sans-serif;
|
font-family: 'Uhrenfont', sans-serif;
|
||||||
position: relative;
|
position: relative;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|
@ -42,6 +46,21 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
font-size: 200%;
|
font-size: 200%;
|
||||||
}
|
}
|
||||||
|
&.black {
|
||||||
|
background-color: #111;
|
||||||
|
.dot:not(.active) {
|
||||||
|
border-color: rgba(255, 255, 255, 0.1);
|
||||||
|
box-shadow: 0 0 0.1em rgba(255, 255, 255, 0.1);
|
||||||
|
}
|
||||||
|
.letter:not(.active) {
|
||||||
|
color: rgba(255, 255, 255, 0.1);
|
||||||
|
text-shadow: 0 0 0.1em rgba(255, 255, 255, 0.1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.black .onoffswitch-inner:before {
|
||||||
|
background-color: #111;
|
||||||
}
|
}
|
||||||
|
|
||||||
.item {
|
.item {
|
||||||
|
|
|
||||||
|
|
@ -1,17 +1,64 @@
|
||||||
import {Component, ElementRef, OnInit} from '@angular/core';
|
import {AfterViewInit, Component, ElementRef, Input, OnInit, ViewChild} from '@angular/core';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: '[uhr]',
|
selector: '[uhr]',
|
||||||
templateUrl: './app.component.html',
|
templateUrl: './app.component.html',
|
||||||
styleUrls: ['./app.component.scss']
|
styleUrls: ['./app.component.scss']
|
||||||
})
|
})
|
||||||
export class AppComponent implements OnInit {
|
export class AppComponent implements AfterViewInit, OnInit {
|
||||||
constructor(private elementRef: ElementRef) {
|
@Input() size: string = '100%';
|
||||||
|
|
||||||
|
@Input() autoresize = true;
|
||||||
|
@ViewChild('container') container: ElementRef;
|
||||||
|
|
||||||
|
constructor(private element: ElementRef) {
|
||||||
}
|
}
|
||||||
|
|
||||||
ngOnInit(): void {
|
ngOnInit(): void {
|
||||||
this.elementRef.nativeElement.classList.add('uhr');
|
window.onresize = this.handleResize.bind(this);
|
||||||
|
}
|
||||||
|
|
||||||
|
ngAfterViewInit(): void {
|
||||||
|
const realWidthInPx = this.determineSizeInPx(this.size);
|
||||||
|
this.resizeToPx(realWidthInPx);
|
||||||
|
}
|
||||||
|
|
||||||
|
handleResize(event: UIEvent): boolean {
|
||||||
|
const parentWidth = AppComponent.getWidth(this.element);
|
||||||
|
const parentHeight = AppComponent.getHeight(this.element);
|
||||||
|
const windowWidth = window.innerWidth;
|
||||||
|
const windowHeight = window.innerHeight;
|
||||||
|
this.resizeToPx(Math.min(parentWidth, parentHeight, windowWidth, windowHeight));
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
private determineSizeInPx(size: string): number {
|
||||||
|
if (this.size === 'fill') {
|
||||||
|
this.element.nativeElement.style.width = '100%';
|
||||||
|
this.element.nativeElement.style.height = '100%';
|
||||||
|
const width: number = AppComponent.getWidth(this.container);
|
||||||
|
const height: number = AppComponent.getHeight(this.container);
|
||||||
|
return Math.min(width, height);
|
||||||
|
} else {
|
||||||
|
this.container.nativeElement.style.width = size;
|
||||||
|
return AppComponent.getWidth(this.container);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private resizeToPx(size: number): void {
|
||||||
|
this.container.nativeElement.style.width = `${size}px`;
|
||||||
|
this.container.nativeElement.style.height = `${size}px`;
|
||||||
|
this.container.nativeElement.style['font-size'] = `${size / 40}px`;
|
||||||
|
}
|
||||||
|
|
||||||
|
private static getWidth(e: ElementRef): number {
|
||||||
|
console.log('getting width', e);
|
||||||
|
return e.nativeElement.clientWidth;
|
||||||
|
}
|
||||||
|
|
||||||
|
private static getHeight(e: ElementRef): number {
|
||||||
|
console.log('getting height', e);
|
||||||
|
return e.nativeElement.clientHeight;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en" style="height: 100%;">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<title>Uhr</title>
|
<title>Uhr</title>
|
||||||
|
|
@ -8,7 +8,6 @@
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<link rel="icon" type="image/x-icon" href="favicon.png">
|
<link rel="icon" type="image/x-icon" href="favicon.png">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body uhr [autoresize]="true">
|
||||||
<div uhr></div>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -1 +1,5 @@
|
||||||
/* You can add global styles to this file, and also import other style files */
|
/* You can add global styles to this file, and also import other style files */
|
||||||
|
body {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue