now html element can be generated by typescript

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]

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()
+}

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)

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

layouts/index.html

@@ -35,7 +35,6 @@
     {{ end }}
     <script id="images_array" type="application/json">{{ $.Scratch.Get "img" | jsonify | safeJS }}</script>
   {{ end }}
-  {{ partial "desktop_wrapper.html" . }}
 </div>
 <footer>
   {{ partial "footer.html" . }}

layouts/partials/desktop_wrapper.html

@@ -1,19 +0,0 @@
-<div class='desktopWrapper'>
-  {{ partial "overlay.html" . }}
-<!--  <div class='images'></div>-->
-  <div class="image_container" id="layer15" data-status="null"></div>
-  <div class="image_container" id="layer14" data-status="null"></div>
-  <div class="image_container" id="layer13" data-status="null"></div>
-  <div class="image_container" id="layer12" data-status="null"></div>
-  <div class="image_container" id="layer11" data-status="null"></div>
-  <div class="image_container" id="layer10" data-status="null"></div>
-  <div class="image_container" id="layer9" data-status="null"></div>
-  <div class="image_container" id="layer8" data-status="null"></div>
-  <div class="image_container" id="layer7" data-status="null"></div>
-  <div class="image_container" id="layer6" data-status="null"></div>
-  <div class="image_container" id="layer5" data-status="null"></div>
-  <div class="image_container" id="layer4" data-status="null"></div>
-  <div class="image_container" id="layer3" data-status="null"></div>
-  <div class="image_container" id="layer2" data-status="null"></div>
-  <div class="image_container" id="layer1" data-status="null"></div>
-</div>

layouts/partials/overlay.html

@@ -1,3 +0,0 @@
-<div class="overlay_cursor" data-status='null'>
-    <div class="cursor_innerText"></div>
-</div>