From 969ccac6907070a0a00a26e0a051c225d94fa47c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Schmelczer=20Andr=C3=A1s?= Date: Sat, 4 Jan 2020 10:24:07 +0100 Subject: [PATCH] Refactor --- .idea/workspace.xml | 47 +++++---- .prettierrc | 5 + src/framework/helper.ts | 98 ------------------- src/framework/helper/color-mixer.ts | 41 ++++++++ src/framework/helper/create-element.ts | 7 ++ src/framework/helper/get-height.ts | 11 +++ src/framework/helper/last.ts | 2 + src/framework/helper/random.ts | 17 ++++ src/framework/helper/range.ts | 15 +++ src/framework/helper/sum.ts | 2 + src/index.html | 4 +- src/page/about/about.ts | 10 +- src/page/background/background.html.ts | 1 - src/page/background/background.scss | 8 +- src/page/background/background.ts | 90 ++++------------- src/page/background/blob.ts | 50 ++++------ src/page/content/content.ts | 25 ++--- src/page/footer/footer.ts | 8 +- src/page/image-viewer/image-viewer.ts | 22 ++--- .../timeline-element/timeline-element.ts | 40 ++++---- src/page/timeline/timeline.ts | 10 +- src/style/a.scss | 5 +- src/style/vars.scss | 4 +- webpack.config.js | 1 + 24 files changed, 236 insertions(+), 287 deletions(-) create mode 100644 .prettierrc delete mode 100644 src/framework/helper.ts create mode 100644 src/framework/helper/color-mixer.ts create mode 100644 src/framework/helper/create-element.ts create mode 100644 src/framework/helper/get-height.ts create mode 100644 src/framework/helper/last.ts create mode 100644 src/framework/helper/random.ts create mode 100644 src/framework/helper/range.ts create mode 100644 src/framework/helper/sum.ts diff --git a/.idea/workspace.xml b/.idea/workspace.xml index 106d824..2d5b9b8 100644 --- a/.idea/workspace.xml +++ b/.idea/workspace.xml @@ -2,19 +2,29 @@ + + + + + + + + - - - + - - + + + - - + + + + + - - + + - - - - - - - - - @@ -71,6 +72,12 @@ + + + + + + diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..65261d6 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,5 @@ +{ + "trailingComma": "es5", + "tabWidth": 2, + "singleQuote": true +} diff --git a/src/framework/helper.ts b/src/framework/helper.ts deleted file mode 100644 index d9664d8..0000000 --- a/src/framework/helper.ts +++ /dev/null @@ -1,98 +0,0 @@ -import { html } from "../model/misc"; - -export const createElement = (from: html): HTMLElement => { - const element: HTMLElement = document.createElement("div"); - element.innerHTML = from; - return element.firstElementChild as HTMLElement; -}; - -export const randomFactory = seed => () => - ((2 ** 31 - 1) & (seed = Math.imul(48271, seed))) / 2 ** 31; - -export const fixedSeedRandom = randomFactory(42); - -export const choose = ( - list: Array, - random: () => number = fixedSeedRandom -): T => list[randomInInterval(0, list.length, random)]; - -export const randomInInterval = ( - aClosed: number, - bOpen: number, - random: () => number = fixedSeedRandom -): number => Math.floor((bOpen - aClosed) * random()) + aClosed; - -export const sum = (list: ArrayLike): number => - Array.prototype.reduce.call(list, (a, sum) => a + sum, 0); - -export const getHeight = (e: HTMLElement): number => { - const computedStyle = window.getComputedStyle(e); - return ( - // ignores margin collapse - e.clientHeight + - parseInt(computedStyle.marginTop) + - parseInt(computedStyle.marginBottom) + - parseInt(computedStyle.borderTopWidth) + - parseInt(computedStyle.borderBottomWidth) - ); -}; - -export const mixColors = ( - hexColorA: string, - hexColorB: string, - qA: number -): string => { - const colorA = hexToRGB(normalizeHex(hexColorA)); - const colorB = hexToRGB(normalizeHex(hexColorB)); - const mixedColor: [number, number, number] = [ - colorA[0] * qA + colorB[0] * (1 - qA), - colorA[1] * qA + colorB[1] * (1 - qA), - colorA[2] * qA + colorB[2] * (1 - qA) - ]; - - return RGBToHex(mixedColor); -}; - -const normalizeHex = (hex: string): string => { - hex = hex.trim(); - if (hex.startsWith("#")) { - hex = hex.substr(1); - } - return hex; -}; - -const hexToRGB = (hex: string): [number, number, number] => { - const [r1, r2, g1, g2, b1, b2] = hex; - return [ - Number.parseInt(r1 + r2, 16), - Number.parseInt(g1 + g2, 16), - Number.parseInt(b1 + b2, 16) - ]; -}; - -const RGBToHex = (rgb: [number, number, number]): string => - rgb.map(n => Math.round(n).toString(16)).join(""); - -export const range = ({ - from = 0, - to = Infinity, - step = 1 -}: { - from?: number; - to?: number; - step?: number; -}): Iterable => { - return { - *[Symbol.iterator]() { - for (let i = from; i < to; yield i, i += step) {} - } - }; -}; - -export const last = (list: Array): T => - list.length > 0 ? list[list.length - 1] : undefined; - -export const isChrome = (): boolean => - !!navigator.appVersion.match(/chrome/i) && - // @ts-ignore - window.webkitRequestFileSystem !== undefined; diff --git a/src/framework/helper/color-mixer.ts b/src/framework/helper/color-mixer.ts new file mode 100644 index 0000000..0f73a2f --- /dev/null +++ b/src/framework/helper/color-mixer.ts @@ -0,0 +1,41 @@ +export const mixColors = ( + hexColorA: string, + hexColorB: string, + quantityA: number +): string => { + const colorA = hexToRGB(normalizeHex(hexColorA)); + const colorB = hexToRGB(normalizeHex(hexColorB)); + + const mixedColor: [number, number, number] = [ + mix(colorA[0], colorB[0], quantityA), + mix(colorA[1], colorB[1], quantityA), + mix(colorA[2], colorB[2], quantityA), + ]; + + return RGBToHex(mixedColor); +}; + +const hexToRGB = ([r1, r2, g1, g2, b1, b2]: string): [ + number, + number, + number +] => { + return [ + Number.parseInt(r1 + r2, 16), + Number.parseInt(g1 + g2, 16), + Number.parseInt(b1 + b2, 16), + ]; +}; + +const normalizeHex = (hex: string): string => { + hex = hex.trim(); + if (hex.startsWith('#')) { + hex = hex.substr(1); + } + return hex; +}; + +const mix = (a: number, b: number, q: number): number => a * q + b * (1 - q); + +const RGBToHex = (rgb: [number, number, number]): string => + '#' + rgb.map(n => Math.round(n).toString(16)).join(''); diff --git a/src/framework/helper/create-element.ts b/src/framework/helper/create-element.ts new file mode 100644 index 0000000..a3d28dd --- /dev/null +++ b/src/framework/helper/create-element.ts @@ -0,0 +1,7 @@ +import { html } from '../../model/misc'; + +export const createElement = (from: html): HTMLElement => { + const element: HTMLElement = document.createElement('div'); + element.innerHTML = from; + return element.firstElementChild as HTMLElement; +}; diff --git a/src/framework/helper/get-height.ts b/src/framework/helper/get-height.ts new file mode 100644 index 0000000..aaaf76d --- /dev/null +++ b/src/framework/helper/get-height.ts @@ -0,0 +1,11 @@ +export const getHeight = (e: HTMLElement): number => { + const computedStyle = window.getComputedStyle(e); + return ( + // ignores margin collapse + e.clientHeight + + parseInt(computedStyle.marginTop) + + parseInt(computedStyle.marginBottom) + + parseInt(computedStyle.borderTopWidth) + + parseInt(computedStyle.borderBottomWidth) + ); +}; diff --git a/src/framework/helper/last.ts b/src/framework/helper/last.ts new file mode 100644 index 0000000..a8b73be --- /dev/null +++ b/src/framework/helper/last.ts @@ -0,0 +1,2 @@ +export const last = (list: Array): T => + list.length > 0 ? list[list.length - 1] : undefined; diff --git a/src/framework/helper/random.ts b/src/framework/helper/random.ts new file mode 100644 index 0000000..e006521 --- /dev/null +++ b/src/framework/helper/random.ts @@ -0,0 +1,17 @@ +export class Random { + public constructor(private seed: number) {} + + public get next(): number { + return ( + ((2 ** 31 - 1) & (this.seed = Math.imul(48271, this.seed))) / 2 ** 31 + ); + } + + public choose(list: Array): T { + return list[this.randomInInterval(0, list.length)]; + } + + public randomInInterval(aClosed: number, bOpen: number): number { + return Math.floor((bOpen - aClosed) * this.next) + aClosed; + } +} diff --git a/src/framework/helper/range.ts b/src/framework/helper/range.ts new file mode 100644 index 0000000..09cb2c7 --- /dev/null +++ b/src/framework/helper/range.ts @@ -0,0 +1,15 @@ +export const range = ({ + from = 0, + to = Infinity, + step = 1, +}: { + from?: number; + to?: number; + step?: number; +}): Iterable => { + return { + *[Symbol.iterator]() { + for (let i = from; i < to; yield i, i += step) {} + }, + }; +}; diff --git a/src/framework/helper/sum.ts b/src/framework/helper/sum.ts new file mode 100644 index 0000000..3fbd934 --- /dev/null +++ b/src/framework/helper/sum.ts @@ -0,0 +1,2 @@ +export const sum = (list: ArrayLike): number => + Array.prototype.reduce.call(list, (a, sum) => a + sum, 0); diff --git a/src/index.html b/src/index.html index c746dca..d8367a6 100644 --- a/src/index.html +++ b/src/index.html @@ -18,9 +18,7 @@
- +
diff --git a/src/page/about/about.ts b/src/page/about/about.ts index 341040b..11d6a5f 100644 --- a/src/page/about/about.ts +++ b/src/page/about/about.ts @@ -1,9 +1,9 @@ -import { PageContent } from "../content/content"; -import { Header } from "../../model/portfolio"; -import { PageElement } from "../../framework/page-element"; +import { PageContent } from '../content/content'; +import { Header } from '../../model/portfolio'; +import { PageElement } from '../../framework/page-element'; -import { generate } from "./about.html"; -import { createElement } from "../../framework/helper"; +import { generate } from './about.html'; +import { createElement } from '../../framework/helper/create-element'; export class PageHeader extends PageElement { public constructor(header: Header) { diff --git a/src/page/background/background.html.ts b/src/page/background/background.html.ts index cbd0a13..5e1fc8d 100644 --- a/src/page/background/background.html.ts +++ b/src/page/background/background.html.ts @@ -5,5 +5,4 @@ export const generate = (): html => `
-
`; diff --git a/src/page/background/background.scss b/src/page/background/background.scss index b77167d..0f57011 100644 --- a/src/page/background/background.scss +++ b/src/page/background/background.scss @@ -2,10 +2,10 @@ @import "../../style/mixins"; #background-container { - position: absolute; + position: fixed; left: 0; top: 0; - height: 100%; + height: 100vh; width: 100%; z-index: -1; @@ -42,7 +42,3 @@ } } } - -#edge-hack { - position: fixed; -} diff --git a/src/page/background/background.ts b/src/page/background/background.ts index 1184424..49776a6 100644 --- a/src/page/background/background.ts +++ b/src/page/background/background.ts @@ -1,31 +1,19 @@ -import { PageElement } from "../../framework/page-element"; -import { - getHeight, - createElement, - randomFactory, - sum, - isChrome -} from "../../framework/helper"; -import { PageEvent, PageEventType } from "../../framework/page-event"; -import { Blob } from "./blob"; -import { generate } from "./background.html"; +import { PageElement } from '../../framework/page-element'; +import { PageEvent, PageEventType } from '../../framework/page-event'; +import { createElement } from '../../framework/helper/create-element'; +import { Blob } from './blob'; +import { generate } from './background.html'; +import { Random } from '../../framework/helper/random'; +import { getHeight } from '../../framework/helper/get-height'; +import { sum } from '../../framework/helper/sum'; export class PageBackground extends PageElement { private readonly blobs: Array = []; private readonly blobSpacing = 350; - private previousWidth: number; - private previousHeight: number; - private previousScrollPositionToSet: number = 0; - private previousTimestamp: DOMHighResTimeStamp = null; - private readonly baseDeltaTime = (1 / 30) * 1000; - private readonly maxBaseSpeedInPixels = 20; public constructor(private start: PageElement, private end: PageElement) { super(); this.setElement(createElement(generate())); - if (isChrome()) { - this.query("#background").style.transformStyle = "preserve-3d"; - } Blob.initialize(10, 30, 5); } @@ -38,46 +26,14 @@ export class PageBackground extends PageElement { } private bindListeners(parent: PageElement) { - window.addEventListener("resize", () => this.resize(parent)); - window.addEventListener("load", () => this.resize(parent)); - window.requestAnimationFrame(timestamp => - this.scrollContainer(timestamp, parent) - ); - } - - private scrollContainer(timestamp: DOMHighResTimeStamp, parent: PageElement) { - const deltaTime = this.getDeltaTime(timestamp); - const scrollPositionToSet = parent.getElement().scrollTop; - const deltaScroll = scrollPositionToSet - this.previousScrollPositionToSet; - this.previousScrollPositionToSet = scrollPositionToSet; - - const threshold = 2; - if (deltaScroll > threshold) { - const smoothDeltaScroll = - (deltaScroll / deltaTime) * Math.min(deltaTime, this.baseDeltaTime); - this.getElement().scrollTop += smoothDeltaScroll; - } else { - const error = scrollPositionToSet - this.getElement().scrollTop; - if (Math.abs(error) > threshold) { - this.getElement().scrollTop += Math.min( - error / 4, - this.maxBaseSpeedInPixels, - error - ); - } - } - - window.requestAnimationFrame(timestamp => - this.scrollContainer(timestamp, parent) - ); - } - - private getDeltaTime(timestamp: DOMHighResTimeStamp): number { - const deltaTime = this.previousTimestamp - ? timestamp - this.previousTimestamp - : 0; - this.previousTimestamp = timestamp; - return deltaTime; + window.addEventListener('resize', () => this.resize(parent)); + window.addEventListener('load', () => this.resize(parent)); + parent + .getElement() + .addEventListener( + 'scroll', + () => (this.getElement().scrollTop = parent.getElement().scrollTop) + ); } private resize(parent: PageElement, heightChange?: number) { @@ -89,14 +45,8 @@ export class PageBackground extends PageElement { height += heightChange; } - if (this.previousHeight === height && this.previousWidth === width) { - return; - } - this.previousHeight = height; - this.previousWidth = width; - - this.query("#background").style.width = `${width}px`; - this.query("#background").style.height = `${height}px`; + this.query('#background').style.width = `${width}px`; + this.query('#background').style.height = `${height}px`; const requiredBlobCount = Math.round( (width * height) / this.blobSpacing ** 2 @@ -104,11 +54,11 @@ export class PageBackground extends PageElement { while (requiredBlobCount > this.blobs.length) { const blob = new Blob(); - this.query("#background").appendChild(blob.htmlElement); + this.query('#background').appendChild(blob.htmlElement); this.blobs.push(blob); } - const random = randomFactory(2662); + const random = new Random(2662); this.blobs.forEach((b, i) => { if (i >= requiredBlobCount) { diff --git a/src/page/background/blob.ts b/src/page/background/blob.ts index ccd5448..f4e1e8a 100644 --- a/src/page/background/blob.ts +++ b/src/page/background/blob.ts @@ -1,14 +1,10 @@ -import { - choose, - createElement, - mixColors, - randomFactory, - randomInInterval -} from "../../framework/helper"; +import { mixColors } from '../../framework/helper/color-mixer'; +import { createElement } from '../../framework/helper/create-element'; +import { Random } from '../../framework/helper/random'; export class Blob { - private static readonly creatorRandom = randomFactory(44); - private static readonly colors = ["#fff9e0", "#ffd6d6"]; + private static readonly creatorRandom = new Random(44); + private static readonly colors = ['#fff9e0', '#ffd6d6']; private static zMin: number; private static zMax: number; private static perspective: number; @@ -18,26 +14,22 @@ export class Blob { Blob.perspective = perspective; } - private readonly z = randomInInterval( + private readonly z = Blob.creatorRandom.randomInInterval( Blob.zMin, - Blob.zMax, - Blob.creatorRandom + Blob.zMax ); - private readonly element: HTMLElement = createElement("
"); + private readonly element: HTMLElement = createElement('
'); constructor() { - this.element.style.backgroundColor = - "#" + - mixColors( - "#ffffff", - choose(Blob.colors, Blob.creatorRandom), - (this.z - Blob.zMin) / (Blob.zMax - Blob.zMin) - ); + this.element.style.backgroundColor = mixColors( + '#ffffff', + Blob.creatorRandom.choose(Blob.colors), + (this.z - Blob.zMin) / (Blob.zMax - Blob.zMin) + ); this.element.style.zIndex = (-this.z).toString(); - this.element.style.height = `${randomInInterval( + this.element.style.height = `${Blob.creatorRandom.randomInInterval( 160, - 740, - Blob.creatorRandom + 740 )}px`; } @@ -46,7 +38,7 @@ export class Blob { } private randomWithKnownZ( - random: () => number, + random: Random, viewportSize: number, scrollSize: number, startOffset = 0, @@ -67,19 +59,19 @@ export class Blob { const l = scrollSize - viewportSize + (viewportSize - startOffset - endOffset) * m; - return randomInInterval(lowerBound, lowerBound + l, random); + return random.randomInInterval(lowerBound, lowerBound + l); } public show() { - this.element.style.opacity = "1"; + this.element.style.opacity = '1'; } public hide() { - this.element.style.opacity = "0"; + this.element.style.opacity = '0'; } public transform( - random: () => number, + random: Random, width: number, viewportHeight: number, scrollHeight: number, @@ -98,7 +90,7 @@ export class Blob { translateZ(${-this.z}px) rotate(-20deg) `; - this.element.style["-webkit-transform"] = value; + this.element.style['-webkit-transform'] = value; this.element.style.transform = value; } } diff --git a/src/page/content/content.ts b/src/page/content/content.ts index 716f8e5..be21302 100644 --- a/src/page/content/content.ts +++ b/src/page/content/content.ts @@ -1,8 +1,9 @@ -import { Content, TypedContent } from "../../model/content"; -import "./content.scss"; -import { PageElement } from "../../framework/page-element"; -import { createElement, last } from "../../framework/helper"; -import { html } from "../../model/misc"; +import { Content, TypedContent } from '../../model/content'; +import './content.scss'; +import { PageElement } from '../../framework/page-element'; +import { createElement } from '../../framework/helper/create-element'; +import { html } from '../../model/misc'; +import { last } from '../../framework/helper/last'; export class PageContent extends PageElement { private static isTyped(content): content is TypedContent { @@ -13,10 +14,10 @@ export class PageContent extends PageElement { element: TypedContent, disableInnerShadow?: boolean ): html { - if (element.type === "a") { + if (element.type === 'a') { return ` ${element.text} `; } - if (element.type === "video") { + if (element.type === 'video') { return ` `; } - if (element.type === "img") { + if (element.type === 'img') { return ` - ${!disableInnerShadow ? `
` : ""} + ${!disableInnerShadow ? `
` : ''} ${element.alt} - ${!disableInnerShadow ? `
` : ""} + ${!disableInnerShadow ? `
` : ''} `; } - throw new Error("Unhandled type."); + throw new Error('Unhandled type.'); } public constructor(content: Content) { @@ -51,7 +52,7 @@ export class PageContent extends PageElement { ? PageContent.parseTypedContent(element) : `

${element}

` ) - .join("\n")} + .join('\n')} `) ); diff --git a/src/page/footer/footer.ts b/src/page/footer/footer.ts index 789c31a..c13ba16 100644 --- a/src/page/footer/footer.ts +++ b/src/page/footer/footer.ts @@ -1,8 +1,8 @@ -import { Footer } from "../../model/portfolio"; -import { PageElement } from "../../framework/page-element"; +import { Footer } from '../../model/portfolio'; +import { PageElement } from '../../framework/page-element'; -import { generate } from "./footer.html"; -import { createElement } from "../../framework/helper"; +import { generate } from './footer.html'; +import { createElement } from '../../framework/helper/create-element'; export class PageFooter extends PageElement { constructor(footer: Footer) { diff --git a/src/page/image-viewer/image-viewer.ts b/src/page/image-viewer/image-viewer.ts index e48298d..937ec7c 100644 --- a/src/page/image-viewer/image-viewer.ts +++ b/src/page/image-viewer/image-viewer.ts @@ -1,8 +1,8 @@ -import { PageElement } from "../../framework/page-element"; +import { PageElement } from '../../framework/page-element'; -import { generate } from "./image-viewer.html"; -import { createElement } from "../../framework/helper"; -import { PageEvent, PageEventType } from "../../framework/page-event"; +import { generate } from './image-viewer.html'; +import { PageEvent, PageEventType } from '../../framework/page-event'; +import { createElement } from '../../framework/helper/create-element'; export class PageImageViewer extends PageElement { public constructor() { @@ -17,16 +17,16 @@ export class PageImageViewer extends PageElement { return; } - document.body.addEventListener("keydown", this.handleKeydown.bind(this)); + document.body.addEventListener('keydown', this.handleKeydown.bind(this)); const images = Array.prototype.slice.call( - parent.getElement().querySelectorAll("img") + parent.getElement().querySelectorAll('img') ); images .filter( (img: HTMLImageElement) => img.parentElement !== this.getElement() && - !img.classList.contains("no-open") + !img.classList.contains('no-open') ) .forEach( (img: HTMLImageElement) => (img.onclick = this.handleClick.bind(this)) @@ -35,22 +35,22 @@ export class PageImageViewer extends PageElement { private handleClick(event: Event) { (this.query( - "#photo" + '#photo' ) as HTMLImageElement).src = (event.target as HTMLImageElement).src; PageImageViewer.show(this.getElement()); } private handleKeydown(event: KeyboardEvent) { - if (event.key === "Escape") { + if (event.key === 'Escape') { PageImageViewer.hide(this.getElement()); } } private static show(e: HTMLElement) { - e.style.display = "flex"; + e.style.display = 'flex'; } private static hide(e: HTMLElement) { - e.style.display = "none"; + e.style.display = 'none'; } } diff --git a/src/page/timeline/timeline-element/timeline-element.ts b/src/page/timeline/timeline-element/timeline-element.ts index e4fbe06..0cca8b4 100644 --- a/src/page/timeline/timeline-element/timeline-element.ts +++ b/src/page/timeline/timeline-element/timeline-element.ts @@ -1,9 +1,9 @@ -import { TimelineElement } from "../../../model/portfolio"; -import { PageContent } from "../../content/content"; -import { PageElement } from "../../../framework/page-element"; -import { generate } from "./timeline-element.html"; -import { createElement } from "../../../framework/helper"; -import { PageEventType } from "../../../framework/page-event"; +import { TimelineElement } from '../../../model/portfolio'; +import { PageContent } from '../../content/content'; +import { PageElement } from '../../../framework/page-element'; +import { generate } from './timeline-element.html'; +import { PageEventType } from '../../../framework/page-event'; +import { createElement } from '../../../framework/helper/create-element'; export class PageTimelineElement extends PageElement { private isOpen; @@ -20,19 +20,19 @@ export class PageTimelineElement extends PageElement { const content = new PageContent(timelineElement.more); super([content]); this.isOpen = false; - this.more = root.querySelector(".more"); + this.more = root.querySelector('.more'); this.more.appendChild(content.getElement()); - window.addEventListener("resize", this.handleResize.bind(this)); + window.addEventListener('resize', this.handleResize.bind(this)); root - .querySelector(".buttons") - .addEventListener("click", this.toggleOpen.bind(this)); + .querySelector('.buttons') + .addEventListener('click', this.toggleOpen.bind(this)); } else super(); this.setElement(root); } private toggleOpen() { - const showMore = this.query(".show-more") as HTMLElement; - const showLess = this.query(".show-less") as HTMLElement; + const showMore = this.query('.show-more') as HTMLElement; + const showLess = this.query('.show-less') as HTMLElement; if (this.isOpen) { PageTimelineElement.show(showMore); PageTimelineElement.hide(showLess); @@ -49,28 +49,28 @@ export class PageTimelineElement extends PageElement { private notifyOfHeightChange(deltaHeight: number = undefined) { this.eventBroadcaster?.broadcastEvent({ type: PageEventType.onBodyDimensionsChanged, - data: { deltaHeight } + data: { deltaHeight }, }); setTimeout( () => this.eventBroadcaster?.broadcastEvent({ - type: PageEventType.onBodyDimensionsChanged + type: PageEventType.onBodyDimensionsChanged, }), 350 ); } private static hide(element: HTMLElement) { - element.style.opacity = "0"; + element.style.opacity = '0'; setTimeout(() => { - element.style.visibility = "hidden"; + element.style.visibility = 'hidden'; }, 350); } private static show(element: HTMLElement) { - element.style.visibility = "visible"; - element.style.opacity = "1"; + element.style.visibility = 'visible'; + element.style.opacity = '1'; } private openMore() { @@ -81,13 +81,13 @@ export class PageTimelineElement extends PageElement { private closeMore() { const deltaHeight = this.more.scrollHeight; - this.more.style.height = "0"; + this.more.style.height = '0'; this.notifyOfHeightChange(-deltaHeight); } private handleResize() { if (this.isOpen) { - this.more.style.height = "auto"; + this.more.style.height = 'auto'; setTimeout(this.openMore.bind(this), 200); } } diff --git a/src/page/timeline/timeline.ts b/src/page/timeline/timeline.ts index 1b9594d..e688697 100644 --- a/src/page/timeline/timeline.ts +++ b/src/page/timeline/timeline.ts @@ -1,8 +1,8 @@ -import { TimelineElement } from "../../model/portfolio"; -import { PageElement } from "../../framework/page-element"; -import { PageTimelineElement } from "./timeline-element/timeline-element"; -import { generate } from "./timeline.html"; -import { createElement } from "../../framework/helper"; +import { TimelineElement } from '../../model/portfolio'; +import { PageElement } from '../../framework/page-element'; +import { PageTimelineElement } from './timeline-element/timeline-element'; +import { generate } from './timeline.html'; +import { createElement } from '../../framework/helper/create-element'; export class PageTimeline extends PageElement { public constructor( diff --git a/src/style/a.scss b/src/style/a.scss index 3d3bc7a..58e9614 100644 --- a/src/style/a.scss +++ b/src/style/a.scss @@ -13,14 +13,13 @@ a { $border-shift: 10px; transition: transform $long-transition-time; - $dot-size: 4px; &:before { content: ""; display: block; position: absolute; width: 100%; - height: $dot-size; + height: $line-width; bottom: 0; z-index: 1; background: linear-gradient( @@ -37,7 +36,7 @@ a { display: block; width: calc(100% + #{$border-shift}); z-index: 0; - border-bottom: $dot-size dotted $accent-color; + border-bottom: $line-width dashed $accent-color; transition: transform $long-transition-time; } diff --git a/src/style/vars.scss b/src/style/vars.scss index 248b10f..2d560e5 100644 --- a/src/style/vars.scss +++ b/src/style/vars.scss @@ -13,7 +13,7 @@ $scrollbar-color: #ffd6d6; $short-transition-time: 220ms; $long-transition-time: 350ms; $line-width: 3px; -$border-radius: 15px; +$border-radius: var(--border-radius); $breakpoint-width: 925px; $large-margin: var(--large-margin); @@ -36,6 +36,7 @@ $body-width: var(--body-width); --body-width: 765px; --shadow1: 0 0 10px 2px rgba(0, 0, 0, 0.075); --shadow2: 0 0 1px rgba(0, 0, 0, 0.2); + --border-radius: 15px; @media (max-width: $breakpoint-width) { --large-margin: 60px; @@ -45,5 +46,6 @@ $body-width: var(--body-width); --body-width: 90%; --shadow1: 0 0 10px 2px rgba(0, 0, 0, 0.05); --shadow2: 0 0 1px rgba(0, 0, 0, 0.125); + --border-radius: 10px; } } diff --git a/webpack.config.js b/webpack.config.js index e98696f..f72f751 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -14,6 +14,7 @@ module.exports = { }, devServer: { host: "0.0.0.0" + // disableHostCheck: true }, optimization: { minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})]