Custom Code Experiment •
Elevator
Source Code View HTML / CSS / JavaScript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Elevator</title>
<style>
::-webkit-scrollbar {
width: 0.625rem;
height: 0.625rem;
}
::-webkit-scrollbar-thumb {
background: #111;
border-radius: 0.3125rem;
box-shadow: inset 0.125rem 0.125rem 0.125rem rgba(255, 255, 255, 0.25),
inset -0.125rem -0.125rem 0.125rem rgba(0, 0, 0, 0.25);
cursor: default;
}
::-webkit-scrollbar-track {
background: #333;
}
::selection {
background: #fff;
color: #333;
}
html,
body {
height: 100vh;
height: 100dvh;
margin: 0;
overflow: hidden;
}
body {
display: grid;
grid-template-rows: calc(100dvh - 4rem) 4rem;
font-family: system-ui, sans-serif;
}
canvas,
.editor {
grid-row: 1;
grid-column: 1;
}
canvas {
--canvas-z-index: -1;
width: 100%;
height: auto;
object-fit: contain;
background: black;
touch-action: none;
z-index: var(--canvas-z-index);
}
.editor,
.overlay,
#error {
font-family: 'Courier New', Courier, monospace;
background: repeating-linear-gradient(0deg, #000a, #1119, #000a .25rem);
padding: 1em;
}
.editor {
color: #fefefe;
tab-size: 2;
border: none;
resize: none;
}
.editor:focus {
outline: none;
}
#error {
grid-row: 2;
grid-column: 1;
margin: 0;
padding-block: 0;
padding-top: .5em;
color: firebrick;
overflow: auto;
text-wrap: pretty;
}
#indicator {
visibility: hidden;
position: absolute;
top: calc(var(--top, 0px) - var(--scroll-top, 0px));
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid firebrick;
transform: translateY(-25%);
}
.overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
margin: 0;
}
.editor,
.overlay {
font-size: 1rem;
line-height: 1.2;
white-space: pre;
}
.hidden {
display: none !important;
}
.opaque {
opacity: 1 !important;
background: #111 !important;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<textarea id="codeEditor" class="editor" spellcheck="false" autocorrect="off" autocapitalize="off" translate="no" oninput="render()"></textarea>
<pre id="error"></pre>
<div id="indicator"></div>
<script type="x-shader/x-fragment">
#version 300 es
precision highp float;
out vec4 O;
uniform float time;
uniform vec2 resolution;
uniform vec2 wheel;
#define FC gl_FragCoord.xy
#define R resolution
#define T (time+wheel.y/1e3)
#define N normalize
#define S smoothstep
#define MN min(R.x,R.y)
#define LP vec3(-2,8,-2)
#define EDGESIZE 42e-4
#define SPIRAL_SPEED .55
#define SPIRAL_RADIUS .16
#define ROLL .35
#define hue(a) (.5+.5*sin(3.14*(a)+vec3(1,2,3)))
vec3 cp[14];
void initCam() {
const float a=2.*.96, b=2.*a;
cp[0] =vec3(0);
cp[1] =vec3(0,0,b);
cp[2] =vec3(a,0,b);
cp[3] =vec3(a,0,a);
cp[4] =vec3(a,-a*1.2,a);
cp[5] =vec3(-a,-a,a);
cp[6] =vec3(-a,0,a);
cp[7] =vec3(-a,0,0);
cp[8] =vec3(0);
cp[9] =vec3(0,0,-b);
cp[10]=vec3(0,a,-b);
cp[11]=vec3(-a,a,-b);
cp[12]=vec3(-a,0,-b);
cp[13]=vec3(-a,0,0);
}
vec3 catmull(vec3 a, vec3 b, vec3 c, vec3 d, float t){
return (((-a+b*3.-c*3.+d)*t*t*t + (a*2.- b*5.+c*4.-d)*t*t + (-a+c)*t + b*2.)*.5);
}
vec3 camPath(float t){
const int n=14;
const float k=float(n);
t=fract(t/k)*k;
float sn=floor(t), st=t-sn;
if (sn==.0) return catmull(cp[n-1], cp[0], cp[1], cp[2], st);
for (int i=1; i<n-2; i++) {
if (sn==float(i)) return catmull(cp[i-1], cp[i], cp[i+1], cp[i+2], st);
}
if (sn==k-2.) return catmull(cp[n-3], cp[n-2], cp[n-1], cp[0], st);
if (sn==k-1.) return catmull(cp[n-2], cp[n-1], cp[0], cp[1], st);
return vec3(0);
}
float rnd(vec3 p) {
p=fract(p*vec3(12.9898,78.233,156.345));
p+=dot(p,p+34.56);
return fract(p.x*p.y*p.z);
}
float smin(float a, float b, float k) {
k*=log(2.);
float x=b-a;
return a+x/(1.-exp2(x/k));
}
float box(vec3 p, float s) {
p=abs(p)-s;
return length(max(p,.0))+min(.0,max(max(p.x,p.y),p.z));
}
#define ZERO (time*.0)
float map(vec3 p) {
float e=length(vec2(fract(p.z)-.5,p.y-1.))-.1;
vec3 gid=floor((vec3(p.x,0,p.z)+1.)*.5)*9.7;
p.xz=mod(p.xz+1.,2.)-1.;
float d=box(p,1.), f=1.;
for(float i=ZERO; i<3.; i++) {
vec3 id=floor((p*f+1.)*.5),
a=mod(p*f,2.)-1.,
r=abs(1.-3.*abs(a));
f*=2.25;
float h=rnd(id+gid+i*7.31+3.13), cut;
if (i<1.||h<.25) {
float
da=max(r.x,r.y),
db=max(r.y,r.z),
dc=max(r.z,r.x);
cut=min(da,min(db,dc))-1.;
} else if (h<.5) {
cut=length(r)-(2.+.4*fract(h*57.31));
} else if (h<.75) {
cut=(r.x+r.y+r.z)*.577-(2.1+.35*fract(h*43.7));
} else {
cut=min(length(r.xy),min(length(r.yz),length(r.zx)))-(1.6+.3*fract(h*29.3));
}
d=max(d,cut/f);
}
return smin(d,e,1e-2)+2e-3;
}
vec3 norm(vec3 p) {
float h=1e-3;
vec2 k=vec2(-1,1);
return N(
k.xyy*map(p+k.xyy*h)+
k.yxy*map(p+k.yxy*h)+
k.yyx*map(p+k.yyx*h)+
k.xxx*map(p+k.xxx*h)
);
}
bool march(inout vec3 p, vec3 rd, out float dd, out float edge, out float i) {
bool near=false;
dd=.0; edge=.0; i=.0;
float maxd=abs(p.y)>1.?96.:300.;
for (; i++<maxd;) {
float d=map(p);
if (abs(d)<1e-3) return true;
if (d>100.) return false;
if (near && d>EDGESIZE) edge=1.;
if (d<EDGESIZE) near=true;
p+=rd*d*.5;
dd*=d*.5;
}
return false;
}
float calcAO(vec3 p, vec3 n) {
float occ=.0, sca=1.;
for (float i=.0; i<3.; i++) {
float
h=.01+i*.05,
d=map(p+h*n);
occ+=(h-d)*sca;
sca*=.95;
if (occ>.35) break;
}
return clamp(1.-3.*occ,.0,1.);
}
float getao(vec3 p, vec3 n, float dist) {
return clamp(map(p+n*dist)/dist,.0,1.);
}
vec3 dir(vec2 uv, vec3 ro, vec3 t, float z) {
vec3 up=vec3(0,1,0),
f=N(t-ro),
r=N(cross(up,f)),
u=cross(f,r),
c=f*z,
i=c+uv.x*r+uv.y*u,
d=N(i);
return d;
}
vec3 render(vec2 uv) {
initCam();
float speed=T*.25;
float ph=T*SPIRAL_SPEED, ca=cos(ph*ROLL), sa=sin(ph*ROLL);
uv*=mat2(ca,-sa,sa,ca);
vec3 col=vec3(0),
p=camPath(-speed+.5),
ta=(camPath(-speed)+camPath(-speed-.35))*.5,
fw=N(ta-p),
rt=N(cross(vec3(0,1,0),fw)),
up=cross(fw,rt),
off=cos(ph)*rt+sin(ph)*up;
float cl=min(map(p),map(camPath(-speed+.35)));
float rad=min(SPIRAL_RADIUS,max(.0,cl*.6-.04));
rad*=S(.02,.14,map(p+off*rad));
p+=off*rad; ta+=off*rad;
vec3 ro=p,
rd=dir(uv,p,ta,.6);
float dd, i, edge;
if (march(p,rd,dd,edge,i)) {
float x=mix(.8,1.,rnd(p)), lf=S(80.,30.,length(p.z));
vec3 n=norm(p)*x, lp=vec3(LP.x,LP.y+lf,LP.z), l=N(lp-p);
float ao=calcAO(p,n), amb=.8+.2*n.y, ld=distance(lp,p),
ldd=distance(ro,p), dif=clamp(dot(l,n),.0,1.),
atten=1./(1.+ldd*.5+ldd*ldd*.25);
if (abs(p.y)<.992) {
ao*=(n.y*.5+.55);
col+=S(-.1,1.,amb*ao)+dif*ao*atten;
col+=atten*pow(clamp(dot(N(ro-p),n),.0,1.),.8);
} else col+=dif*ao;
col+=clamp(dot(-rd,l),.0,1.)*ao*atten;
vec3 rain=S(.3,.7,hue(dot(p,vec3(.4,.6,.4))+T*.15))*1.3;
col*=rain*(1.+.35*amb*ao*atten);
col*=tanh(ao*ao);
float fog=1.-clamp(dd/200.,.0,1.), eo=getao(p,n,EDGESIZE);
if(eo<.9) edge=max(edge,max(1.,fog));
eo=getao(p,n,-EDGESIZE);
if(eo<.9) edge=max(edge,max(1.,fog));
float fres=pow(clamp(1.+dot(rd,n),.0,1.),5.);
col*=S(2.,.0,edge)*(1.-fres);
vec3 dp=abs(p-ro);
float ll=.3/tan(length(dp))+T;
dp=(.5+.5*cos(.78*T-vec3(0,-2,3)*fract(ll)-.5));
dp=p.y>1.01?vec3(1):.02/dp.bgg;
col=mix(col,fres*dp,S(.5,3.,edge));
col=S(-.5,2.,col);
}
float k=max(.3,1.-distance(LP,ro));
col+=hue(k*k*1.57+1.5)*k*.6;
col=mix(col,vec3(1,.95,.9),.5*S(.0,15.,distance(p,ro)));
col+=S(-1.,2.,clamp(i/300.,.0,1.))*k*hue(k*2.+T*.2);
col=S(-.15,.85,col*1.35);
col=tanh(col*col);
col=sqrt(col);
col=clamp(mix(vec3(dot(col,vec3(.3,.59,.11))),col,1.6),.0,1.);
vec2 c=FC/R;
c*=1.-c.yx;
float vig=c.x*c.y*25.;
vig=pow(vig,.25);
col*=vig;
col=mix(col,col*col,S(1.,-1.,clamp(vig,.0,1.)));
return col;
}
void main() {
vec2 uv=(FC-.5*R)/MN;
vec3 col=render(uv);
O=vec4(col,1);
}
</script>
<script>
let editMode = false
let editorHidden = !editMode
let playOnLoad = true
let resolution = .5
let renderDelay = 1000
let startTime = 0
let elapsedTime = 0
let interactionFrameRequested = false
let dpr = Math.max(.5, resolution * window.devicePixelRatio)
let frm, source, editor, renderer, pointers
window.onload = init
function resize() {
const { innerWidth: width, innerHeight: height } = window
canvas.width = width * dpr
canvas.height = height * dpr
if (renderer) {
renderer.updateScale(dpr)
renderInteractionFrame()
}
}
function toggleView() {
editor.hidden = editorHidden
canvas.style.setProperty('--canvas-z-index', editorHidden ? 0 : -1)
}
function reset() {
let shader = source
editor.text = shader ? shader.textContent.trim() : renderer.defaultSource
renderThis()
}
function applyResolution() {
dpr = Math.max(.5, resolution * window.devicePixelRatio)
pointers.updateScale(dpr)
resize()
}
function update() {
renderer.updateMouse(pointers.first)
renderer.updatePointerCount(pointers.count)
renderer.updatePointerCoords(pointers.coords)
renderer.updateMove(pointers.move)
renderer.updateZoom(pointers.zoomed)
renderer.updateWheel(pointers.wheel)
}
function loop(now) {
elapsedTime = now - startTime
update()
renderer.render(elapsedTime)
frm = requestAnimationFrame(loop)
}
async function renderThis() {
editor.clearError()
const result = renderer.test(editor.text)
if (result) {
editor.setError(result)
} else {
renderer.updateShader(editor.text)
}
const wasPlaying = !!frm
cancelAnimationFrame(frm)
frm = null
if (wasPlaying || playOnLoad) {
play()
} else {
renderer.render(elapsedTime)
}
}
const play = () => {
if (frm) return
startTime = performance.now() - elapsedTime
loop(performance.now())
}
const stop = () => {
if (frm) {
elapsedTime = performance.now() - startTime
}
cancelAnimationFrame(frm)
frm = null
}
function togglePlayStop() {
if (frm) {
playOnLoad = false
stop()
} else {
playOnLoad = true
play()
}
}
const debounce = (fn, delay) => {
let timerId
return (...args) => {
clearTimeout(timerId)
timerId = setTimeout(() => fn.apply(this, args), delay)
}
}
const render = debounce(renderThis, renderDelay)
function renderInteractionFrame() {
if (frm || interactionFrameRequested || !renderer || !pointers) return
interactionFrameRequested = true
requestAnimationFrame(() => {
interactionFrameRequested = false
if (frm) return
update()
renderer.render(elapsedTime)
})
}
function init() {
source = document.querySelector("script[type='x-shader/x-fragment']")
document.title = "Elevator Visual"
renderer = new Renderer(canvas, dpr)
pointers = new PointerHandler(canvas, dpr)
editor = new Editor(codeEditor, error, indicator)
editor.text = source.textContent.trim()
renderer.setup()
renderer.init()
toggleView()
applyResolution()
canvas.addEventListener('shader-error', e => editor.setError(e.detail))
pointers.onchange = renderInteractionFrame
resize()
if (renderer.test(editor.text) === null) {
renderer.updateShader(editor.text)
}
elapsedTime = 0
startTime = performance.now()
renderThis()
window.onresize = resize
window.addEventListener("keydown", e => {
if (e.key === "L" && e.ctrlKey) {
e.preventDefault()
editorHidden = !editorHidden
toggleView()
} else if (e.key === " " && editor.hidden) {
e.preventDefault()
togglePlayStop()
}
})
}
class Renderer {
#vertexSrc = "#version 300 es\nprecision highp float;\nin vec4 position;\nvoid main(){gl_Position=position;}"
#fragmtSrc = "#version 300 es\nprecision highp float;\nout vec4 O;\nuniform float time;\nuniform vec2 resolution;\nvoid main() {\n\tvec2 uv=gl_FragCoord.xy/resolution;\n\tO=vec4(uv,sin(time)*.5+.5,1);\n}"
#vertices = [-1, 1, -1, -1, 1, 1, 1, -1]
constructor(canvas, scale) {
this.canvas = canvas
this.scale = scale
this.gl = canvas.getContext("webgl2")
this.gl.viewport(0, 0, canvas.width, canvas.height)
this.shaderSource = this.#fragmtSrc
this.mouseMove = [0, 0]
this.mouseCoords = [0, 0]
this.pointerCoords = [0, 0]
this.nbrOfPointers = 0
this.zoom = 0
this.wheel = [0, 0]
this.startRandom = Math.random()
}
get defaultSource() { return this.#fragmtSrc }
updateShader(source) {
this.reset()
this.shaderSource = source
this.setup()
this.init()
}
updateMove(deltas) { this.mouseMove = deltas }
updateZoom(zoom) { this.zoom = zoom }
updateWheel(wheel) { this.wheel = wheel }
updateMouse(coords) { this.mouseCoords = coords }
updatePointerCoords(coords) { this.pointerCoords = coords }
updatePointerCount(nbr) { this.nbrOfPointers = nbr }
updateScale(scale) {
this.scale = scale
this.gl.viewport(0, 0, this.canvas.width, this.canvas.height)
}
compile(shader, source) {
const gl = this.gl
gl.shaderSource(shader, source)
gl.compileShader(shader)
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
console.error(gl.getShaderInfoLog(shader))
this.canvas.dispatchEvent(new CustomEvent('shader-error', { detail: gl.getShaderInfoLog(shader) }))
}
}
test(source) {
let result = null
const gl = this.gl
const shader = gl.createShader(gl.FRAGMENT_SHADER)
gl.shaderSource(shader, source)
gl.compileShader(shader)
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
result = gl.getShaderInfoLog(shader)
}
if (!gl.getShaderParameter(shader, gl.DELETE_STATUS)) {
gl.deleteShader(shader)
}
return result
}
reset() {
const { gl, program, vs, fs } = this
if (!program || gl.getProgramParameter(program, gl.DELETE_STATUS)) return
if (!gl.getShaderParameter(vs, gl.DELETE_STATUS)) {
gl.detachShader(program, vs)
gl.deleteShader(vs)
}
if (!gl.getShaderParameter(fs, gl.DELETE_STATUS)) {
gl.detachShader(program, fs)
gl.deleteShader(fs)
}
gl.deleteProgram(program)
}
setup() {
const gl = this.gl
this.vs = gl.createShader(gl.VERTEX_SHADER)
this.fs = gl.createShader(gl.FRAGMENT_SHADER)
this.compile(this.vs, this.#vertexSrc)
this.compile(this.fs, this.shaderSource)
this.program = gl.createProgram()
gl.attachShader(this.program, this.vs)
gl.attachShader(this.program, this.fs)
gl.linkProgram(this.program)
if (!gl.getProgramParameter(this.program, gl.LINK_STATUS)) {
console.error(gl.getProgramInfoLog(this.program))
}
}
init() {
const { gl, program } = this
this.buffer = gl.createBuffer()
gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer)
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(this.#vertices), gl.STATIC_DRAW)
const position = gl.getAttribLocation(program, "position")
gl.enableVertexAttribArray(position)
gl.vertexAttribPointer(position, 2, gl.FLOAT, false, 0, 0)
program.resolution = gl.getUniformLocation(program, "resolution")
program.time = gl.getUniformLocation(program, "time")
program.daytime = gl.getUniformLocation(program, "daytime")
program.move = gl.getUniformLocation(program, "move")
program.touch = gl.getUniformLocation(program, "touch")
program.pointerCount = gl.getUniformLocation(program, "pointerCount")
program.pointers = gl.getUniformLocation(program, "pointers")
program.zoom = gl.getUniformLocation(program, "zoom")
program.wheel = gl.getUniformLocation(program, "wheel")
program.startRandom = gl.getUniformLocation(program, "startRandom")
}
render(now = 0) {
const { gl, program, buffer, canvas, mouseMove, mouseCoords, pointerCoords, nbrOfPointers, zoom, wheel,
startRandom } = this
const daytime = new Date()
if (!program || gl.getProgramParameter(program, gl.DELETE_STATUS)) return
gl.clearColor(0, 0, 0, 1)
gl.clear(gl.COLOR_BUFFER_BIT)
gl.useProgram(program)
gl.bindBuffer(gl.ARRAY_BUFFER, buffer)
gl.uniform2f(program.resolution, canvas.width, canvas.height)
gl.uniform1f(program.time, now * 1e-3)
gl.uniform4f(program.daytime, daytime.getHours(), daytime.getMinutes(), daytime.getSeconds(), daytime
.getMilliseconds())
gl.uniform2f(program.move, ...mouseMove)
gl.uniform2f(program.touch, ...mouseCoords)
gl.uniform1i(program.pointerCount, nbrOfPointers)
gl.uniform2fv(program.pointers, pointerCoords)
gl.uniform1f(program.zoom, zoom)
gl.uniform2f(program.wheel, ...wheel)
gl.uniform1f(program.startRandom, startRandom)
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4)
}
clear() {
const { gl } = this
gl.clear(gl.COLOR_BUFFER_BIT)
}
}
class PointerHandler {
constructor(element, scale) {
this.scale = scale
this.active = false
this.onchange = null
this.pointers = new Map()
this.lastCoords = [0, 0]
this.moves = [0, 0]
this.zoom = 0
this.wheelDelta = 0
this.wheelOffset = 0
this.ex = 0
this.ey = 0
const emit = () => {
if (typeof this.onchange === 'function') {
this.onchange()
}
}
const map = (element, scale, x, y) => [x * scale, element.height - y * scale]
element.addEventListener("pointerdown", (e) => {
this.active = true
this.pointers.set(e.pointerId, map(element, this.getScale(), e.clientX, e.clientY))
this.ex = e.clientX
this.ey = e.clientY
emit()
})
element.addEventListener("pointerup", (e) => {
if (this.count === 1) {
this.lastCoords = this.first
}
this.pointers.delete(e.pointerId)
this.active = this.pointers.size > 0
emit()
})
element.addEventListener("pointerleave", (e) => {
if (this.count === 1) {
this.lastCoords = this.first
}
this.pointers.delete(e.pointerId)
this.active = this.pointers.size > 0
emit()
})
element.addEventListener("pointermove", (e) => {
if (!this.active) return
const mapped = map(element, this.getScale(), e.clientX, e.clientY)
this.lastCoords = mapped
this.pointers.set(e.pointerId, mapped)
this.moves = [this.moves[0] + (e.clientX - this.ex), this.moves[1] + (this.ey - e.clientY)]
this.ex = e.clientX
this.ey = e.clientY
emit()
})
element.addEventListener("wheel", (e) => {
this.zoom = lerp(this.zoom, Math.max(-1, Math.min(1, this.zoom + e.deltaY)), .05)
if (this.wheelDelta * e.deltaY < 0) {
this.wheelDelta = e.deltaY
} else {
this.wheelDelta = lerp(this.wheelDelta, e.deltaY, .05)
}
this.wheelOffset += this.wheelDelta
emit()
}, { passive: true })
}
getScale() { return this.scale }
updateScale(scale) { this.scale = scale }
reset() {
this.pointers.clear()
this.active = false
this.lastCoords = [0, 0]
this.moves = [0, 0]
this.zoom = 0
this.wheelDelta = 0
this.wheelOffset = 0
}
get count() { return this.pointers.size }
get move() { return this.moves }
get zoomed() { return this.zoom }
get wheel() { return [this.wheelDelta, this.wheelOffset] || [0, 0] }
get coords() {
return this.pointers.size > 0 ? Array.from(this.pointers.values()).map((p) => [...p]).flat() : [0, 0]
}
get first() {
return this.pointers.values().next().value || this.lastCoords
}
}
function lerp(a, b, t) {
return a + (b - a) * t
}
class Editor {
constructor(textarea, errorfield, errorindicator) {
this.textarea = textarea
this.errorfield = errorfield
this.errorindicator = errorindicator
textarea.addEventListener('keydown', this.handleKeydown.bind(this))
textarea.addEventListener('scroll', this.handleScroll.bind(this))
}
get hidden() { return this.textarea.classList.contains('hidden') }
set hidden(value) { value ? this.#hide() : this.#show() }
get text() { return this.textarea.value }
set text(value) { this.textarea.value = value }
get scrollTop() { return this.textarea.scrollTop }
set scrollTop(value) { this.textarea.scrollTop = value }
setError(message) {
this.errorfield.innerHTML = message
this.errorfield.classList.add('opaque')
const match = message.match(/ERROR: \d+:(\d+):/)
const lineNumber = match ? parseInt(match[1]) : 0
const overlay = document.createElement('pre')
overlay.classList.add('overlay')
overlay.textContent = '\n'.repeat(lineNumber)
document.body.appendChild(overlay)
const offsetTop = parseInt(getComputedStyle(overlay).height)
this.errorindicator.style.setProperty('--top', offsetTop + 'px')
this.errorindicator.style.visibility = 'visible'
document.body.removeChild(overlay)
}
clearError() {
this.errorfield.textContent = ''
this.errorfield.classList.remove('opaque')
this.errorfield.blur()
this.errorindicator.style.visibility = 'hidden'
}
focus() { this.textarea.focus() }
#hide() {
for (const el of [this.errorindicator, this.errorfield, this.textarea]) {
el.classList.add('hidden')
}
}
#show() {
for (const el of [this.errorindicator, this.errorfield, this.textarea]) {
el.classList.remove('hidden')
}
this.focus()
}
handleScroll() {
this.errorindicator.style.setProperty('--scroll-top', `${this.textarea.scrollTop}px`)
}
handleKeydown(event) {
if (event.key === "Tab") {
event.preventDefault()
this.handleTabKey(event.shiftKey)
} else if (event.key === "Enter") {
event.preventDefault()
this.handleEnterKey()
}
}
handleTabKey(shiftPressed) {
if (this.#getSelectedText() !== "") {
if (shiftPressed) {
this.#unindentSelectedText()
return
}
this.#indentSelectedText()
} else {
this.#indentAtCursor()
}
}
#getSelectedText() {
const editor = this.textarea
const start = editor.selectionStart
const end = editor.selectionEnd
return editor.value.substring(start, end)
}
#indentAtCursor() {
const editor = this.textarea
const cursorPos = editor.selectionStart
document.execCommand('insertText', false, '\t')
editor.selectionStart = editor.selectionEnd = cursorPos + 1
}
#indentSelectedText() {
const editor = this.textarea
const cursorPos = editor.selectionStart
const selectedText = this.#getSelectedText()
const lines = selectedText.split('\n')
const indentedText = lines.map(line => '\t' + line).join('\n')
document.execCommand('insertText', false, indentedText)
editor.selectionStart = cursorPos
}
#unindentSelectedText() {
const editor = this.textarea
const cursorPos = editor.selectionStart
const selectedText = this.#getSelectedText()
const lines = selectedText.split('\n')
const indentedText = lines.map(line => line.replace(/^\t/, '').replace(/^ /, '')).join('\n')
document.execCommand('insertText', false, indentedText)
editor.selectionStart = cursorPos
}
handleEnterKey() {
const editor = this.textarea
const visibleTop = editor.scrollTop
const cursorPosition = editor.selectionStart
let start = cursorPosition - 1
while (start >= 0 && editor.value[start] !== '\n') {
start--
}
let newLine = ''
while (start < cursorPosition - 1 && (editor.value[start + 1] === ' ' || editor.value[start + 1] ===
'\t')) {
newLine += editor.value[start + 1]
start++
}
document.execCommand('insertText', false, '\n' + newLine)
editor.selectionStart = editor.selectionEnd = cursorPosition + 1 + newLine.length
editor.scrollTop = visibleTop
const lineHeight = editor.scrollHeight / editor.value.split('\n').length
const line = editor.value.substring(0, cursorPosition).split('\n').length
const visibleBottom = editor.scrollTop + editor.clientHeight
const lineTop = lineHeight * (line - 1)
const lineBottom = lineHeight * (line + 2)
if (lineTop < visibleTop) editor.scrollTop = lineTop
if (lineBottom > visibleBottom) editor.scrollTop = lineBottom - editor.clientHeight
}
}
</script>
</body>
</html>