manuel/uhr
1
0
Fork 0
Code Issues 5 Pull requests Releases Wiki Activity

tinker

Browse source
This commit is contained in:
Manuel Friedli 2017-11-11 00:46:26 +01:00
parent 4f25cdf47b
commit 46756f6e80
5 changed files with 85 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

14
src/app/app.component.html
View file

@ -1,6 +1,8 @@
<span class="item dot dot1"></span>
<span class="item dot dot2"></span>
<span class="item dot dot3"></span>
<span class="item dot dot4"></span>
<div class="letterarea"></div>
<div class="reflection"></div>
<div #container class="uhr black">
<span class="item dot dot1"></span>
<span class="item dot dot2"></span>
<span class="item dot dot3"></span>
<span class="item dot dot4"></span>
<div class="letterarea"></div>
<div class="reflection"></div>
</div>

21
src/app/app.component.scss
View file

@ -17,7 +17,11 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
src: url('../../_old/resources/uhr.woff') format('woff');
}
:host(.uhr) {
:host {
background: hotpink;
}
.uhr {
font-family: 'Uhrenfont', sans-serif;
position: relative;
margin: 0;
@ -42,6 +46,21 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
overflow: hidden;
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 {

55
src/app/app.component.ts
View file

@ -1,17 +1,64 @@
import {Component, ElementRef, OnInit} from '@angular/core';
import {AfterViewInit, Component, ElementRef, Input, OnInit, ViewChild} from '@angular/core';
@Component({
selector: '[uhr]',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
constructor(private elementRef: ElementRef) {
export class AppComponent implements AfterViewInit, OnInit {
@Input() size: string = '100%';
@Input() autoresize = true;
@ViewChild('container') container: ElementRef;
constructor(private element: ElementRef) {
}
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;
}
}

5
src/index.html
View file

@ -1,5 +1,5 @@
<!doctype html>
<html lang="en">
<html lang="en" style="height: 100%;">
<head>
<meta charset="utf-8">
<title>Uhr</title>
@ -8,7 +8,6 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.png">
</head>
<body>
<div uhr></div>
<body uhr [autoresize]="true">
</body>
</html>

4
src/styles.scss
View file

@ -1 +1,5 @@
/* You can add global styles to this file, and also import other style files */
body {
padding: 0;
margin: 0;
}