generated from ElnuDev/nim-project
parent
adbfafe702
commit
ea0c1a1ff6
@ -1,3 +1,4 @@
|
|||||||
.direnv
|
.direnv
|
||||||
/result
|
/result
|
||||||
main
|
main
|
||||||
|
main.js
|
||||||
@ -0,0 +1,17 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Document</title>
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<main>
|
||||||
|
<button id="button-add-card">Add card</button>
|
||||||
|
<br>
|
||||||
|
<div id="canvas"></div>
|
||||||
|
</main>
|
||||||
|
<script src="main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -1,3 +1,51 @@
|
|||||||
echo "Hello world!"
|
import std/dom
|
||||||
var name: string = readLine(stdin)
|
import std/strutils
|
||||||
echo "Hi, ", name, "!"
|
import std/strformat
|
||||||
|
let canvas = document.getElementById("canvas")
|
||||||
|
canvas.addEventListener("mousedown", proc(e: Event) =
|
||||||
|
let e = cast[MouseEvent](e)
|
||||||
|
|
||||||
|
if e.button != 1:
|
||||||
|
return
|
||||||
|
|
||||||
|
canvas.style.cursor = "move"
|
||||||
|
canvas.onmousemove = proc(e: Event) =
|
||||||
|
let e = cast[MouseEvent](e)
|
||||||
|
canvas.scrollTop = e.clientY
|
||||||
|
)
|
||||||
|
canvas.addEventListener("mouseup", proc(e: Event) =
|
||||||
|
canvas.style.cursor = "auto"
|
||||||
|
canvas.onmousemove = nil
|
||||||
|
)
|
||||||
|
document.getElementById("button-add-card").onclick = proc(e: Event) =
|
||||||
|
var card = document.createElement("div")
|
||||||
|
card.className = "card"
|
||||||
|
card.innerText = "New card"
|
||||||
|
var x_offset, y_offset = 0.0
|
||||||
|
let drag = proc(e: Event) =
|
||||||
|
let e = cast[MouseEvent](e)
|
||||||
|
|
||||||
|
card.style.left = fmt"{cast[float](e.clientX) - x_offset}px"
|
||||||
|
|
||||||
|
card.style.top = fmt"{cast[float](e.clientY) - y_offset}px"
|
||||||
|
|
||||||
|
echo e.clientX
|
||||||
|
card.addEventListener("mousedown", proc(e: Event) =
|
||||||
|
let e = cast[MouseEvent](e)
|
||||||
|
|
||||||
|
if e.button != 0:
|
||||||
|
return
|
||||||
|
|
||||||
|
let left = if card.style.left != "": parseInt(($(card.style.left))[0..^3]) else: 0
|
||||||
|
x_offset = cast[float](e.clientX - left)
|
||||||
|
|
||||||
|
let top = if card.style.top != "": parseInt(($(card.style.top))[0..^3]) else: 0
|
||||||
|
y_offset = cast[float](e.clientY - top)
|
||||||
|
|
||||||
|
document.onmousemove = drag
|
||||||
|
document.onmouseup = proc(e: Event) = document.onmousemove = nil
|
||||||
|
)
|
||||||
|
canvas.appendChild(card)
|
||||||
|
proc example(e: Event) =
|
||||||
|
echo "Document is ready"
|
||||||
|
document.addEventListener("DOMContentLoaded", example)
|
||||||
@ -0,0 +1,34 @@
|
|||||||
|
body {
|
||||||
|
font-family: sans-serif;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
height: 100vh;
|
||||||
|
margin: 0;
|
||||||
|
background: darkgrey;
|
||||||
|
}
|
||||||
|
|
||||||
|
#canvas {
|
||||||
|
background: gray;
|
||||||
|
width: 800px;
|
||||||
|
height: 600px;
|
||||||
|
border-radius: 4px;
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
background: white;
|
||||||
|
position: absolute;
|
||||||
|
font-size: 1.25em;
|
||||||
|
width: 8em;
|
||||||
|
padding: 0.5em;
|
||||||
|
box-shadow: 0.25em 0.25em black;
|
||||||
|
cursor: pointer;
|
||||||
|
user-select: none;
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
background: lightgrey;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in new issue