From 7da5c2228a4afb9e7b933ee33b812ee9a8692511 Mon Sep 17 00:00:00 2001 From: Spedon Date: Tue, 21 Mar 2023 11:55:05 +0800 Subject: [PATCH] now html element can be generated by typescript --- assets/ts/desktop.ts | 24 +++++-------- assets/ts/elemGen.ts | 49 +++++++++++++++++++++++++++ assets/ts/main.ts | 2 ++ assets/ts/overlay.ts | 12 ++----- layouts/index.html | 1 - layouts/partials/desktop_wrapper.html | 19 ----------- layouts/partials/overlay.html | 3 -- 7 files changed, 61 insertions(+), 49 deletions(-) create mode 100644 assets/ts/elemGen.ts delete mode 100644 layouts/partials/desktop_wrapper.html delete mode 100644 layouts/partials/overlay.html diff --git a/assets/ts/desktop.ts b/assets/ts/desktop.ts index b8132e4..ac759e2 100644 --- a/assets/ts/desktop.ts +++ b/assets/ts/desktop.ts @@ -1,25 +1,17 @@ import { overlayEnable } from './overlay' import { + calcImageIndex, + center, + createImgElement, + delay, FIFO, layerPosSet, - center, - type position, - createImgElement, - calcImageIndex, - delay + type position } from './utils' -import { thresholdSensitivityArray, thresholdIndex } from './thresholdCtl' +import { thresholdIndex, thresholdSensitivityArray } from './thresholdCtl' import { imgIndexSpanUpdate } from './indexDisp' -import { imagesArrayLen, imagesArray } from './dataFetch' - -// get layer divs -export const layers: HTMLDivElement[] = [ - document.getElementById('layer1') as HTMLDivElement, - document.getElementById('layer2') as HTMLDivElement, - document.getElementById('layer3') as HTMLDivElement, - document.getElementById('layer4') as HTMLDivElement, - document.getElementById('layer5') as HTMLDivElement -] +import { imagesArray, imagesArrayLen } from './dataFetch' +import { layers } from './elemGen' // top layer position caching let topLayerPos: number[] = [0, 0] diff --git a/assets/ts/elemGen.ts b/assets/ts/elemGen.ts new file mode 100644 index 0000000..632b58a --- /dev/null +++ b/assets/ts/elemGen.ts @@ -0,0 +1,49 @@ +// get components of overlay +export let overlayCursor: HTMLDivElement +export let cursorInnerContent: HTMLDivElement +export let layers: HTMLDivElement[] + +const passDesktopElements = (): void => { + overlayCursor = document + .getElementsByClassName('overlay_cursor') + .item(0) as HTMLDivElement + cursorInnerContent = document + .getElementsByClassName('cursor_innerText') + .item(0) as HTMLDivElement + layers = [ + document.getElementById('layer1') as HTMLDivElement, + document.getElementById('layer2') as HTMLDivElement, + document.getElementById('layer3') as HTMLDivElement, + document.getElementById('layer4') as HTMLDivElement, + document.getElementById('layer5') as HTMLDivElement + ] +} + +const createLayerDiv = (layerID: number): HTMLDivElement => { + const layerDiv: HTMLDivElement = document.createElement('div') + layerDiv.className = 'image_container' + layerDiv.id = `layer${layerID}` + layerDiv.dataset.status = 'null' + return layerDiv +} + +const createCursorDiv = (): HTMLDivElement => { + const cursorDiv: HTMLDivElement = document.createElement('div') + cursorDiv.className = 'overlay_cursor' + const innerTextDiv: HTMLDivElement = document.createElement('div') + innerTextDiv.className = 'cursor_innerText' + cursorDiv.appendChild(innerTextDiv) + return cursorDiv +} + +export const createDesktopElements = (): void => { + const mainDiv = document.getElementById('main') as HTMLDivElement + mainDiv.appendChild(createCursorDiv()) + const desktopWrapper: HTMLDivElement = document.createElement('div') + desktopWrapper.className = 'desktopWrapper' + for (let i = 0; i < 15; i++) { + desktopWrapper.appendChild(createLayerDiv(i)) + } + mainDiv.appendChild(desktopWrapper) + passDesktopElements() +} diff --git a/assets/ts/main.ts b/assets/ts/main.ts index 08cba8d..e19c0c6 100644 --- a/assets/ts/main.ts +++ b/assets/ts/main.ts @@ -1,3 +1,4 @@ +import { createDesktopElements } from './elemGen' import { imgIndexSpanUpdate } from './indexDisp' import { trackMouseInit } from './desktop' import { thresholdCtlInit } from './thresholdCtl' @@ -7,6 +8,7 @@ import { preloader } from './imageCache' import { getDeviceType } from './utils' const desktopInit = (): void => { + createDesktopElements() preloader(0) vwRefreshInit() imgIndexSpanUpdate(0, imagesArrayLen) diff --git a/assets/ts/overlay.ts b/assets/ts/overlay.ts index 06ab4eb..310f006 100644 --- a/assets/ts/overlay.ts +++ b/assets/ts/overlay.ts @@ -7,7 +7,6 @@ import { mouseToTransform } from './utils' import { - layers, handleOnMove, globalIndex, globalIndexDec, @@ -16,18 +15,11 @@ import { } from './desktop' import { imagesArray, imagesArrayLen } from './dataFetch' import { imgIndexSpanUpdate } from './indexDisp' - -// get components of overlay -const overlayCursor = document - .getElementsByClassName('overlay_cursor') - .item(0) as HTMLDivElement -const innerContent = document - .getElementsByClassName('cursor_innerText') - .item(0) as HTMLDivElement +import { overlayCursor, cursorInnerContent, layers } from './elemGen' // set cursor text const setCursorText = (text: string): void => { - innerContent.innerText = text + cursorInnerContent.innerText = text } // overlay cursor event handler diff --git a/layouts/index.html b/layouts/index.html index c29be46..edb54b2 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -35,7 +35,6 @@ {{ end }} {{ end }} - {{ partial "desktop_wrapper.html" . }}