feat: Changes to ui form and drag
- Use common styles - Move NewDiv class to external script - Align script for form and drag pages
This commit is contained in:
parent
ad150fadf2
commit
8937b36a1e
5 changed files with 165 additions and 128 deletions
113
source/code/_ui.js
Normal file
113
source/code/_ui.js
Normal file
|
|
@ -0,0 +1,113 @@
|
|||
// Creates a div element which is draggable
|
||||
class NewDiv {
|
||||
constructor(x, y, width, height, backgroundColor) {
|
||||
this.x = x;
|
||||
this.y = y;
|
||||
this.width = width;
|
||||
this.height = height;
|
||||
this.backgroundColor = backgroundColor;
|
||||
this.element = null;
|
||||
}
|
||||
|
||||
// Create the div element
|
||||
createDiv() {
|
||||
this.element = document.createElement('div');
|
||||
this.element.style.position = 'absolute';
|
||||
this.element.style.left = `${this.x}px`;
|
||||
this.element.style.top = `${this.y}px`;
|
||||
this.element.style.width = `${this.width}px`;
|
||||
this.element.style.height = `${this.height}px`;
|
||||
this.element.style.background = this.backgroundColor;
|
||||
this.element.style.cursor = 'move';
|
||||
|
||||
// Add event listeners for dragging
|
||||
let isDown = false;
|
||||
let offset = [0, 0];
|
||||
|
||||
this
|
||||
.element
|
||||
.addEventListener('mousedown', (event) => {
|
||||
if (event.button === 0) { // Left mouse button
|
||||
isDown = true;
|
||||
offset = [
|
||||
this.element.offsetLeft - event.clientX,
|
||||
this.element.offsetTop - event.clientY
|
||||
];
|
||||
}
|
||||
});
|
||||
|
||||
document.addEventListener('mouseup', () => {
|
||||
isDown = false;
|
||||
});
|
||||
|
||||
document.addEventListener('mousemove', (event) => {
|
||||
if (isDown) {
|
||||
const maxX = window.innerWidth - this.element.offsetWidth;
|
||||
const maxY = window.innerHeight - this.element.offsetHeight;
|
||||
let x = event.clientX + offset[0];
|
||||
let y = event.clientY + offset[1];
|
||||
|
||||
// Boundary checks
|
||||
if (x < 0)
|
||||
x = 0;
|
||||
if (y < 0)
|
||||
y = 0;
|
||||
if (x > maxX)
|
||||
x = maxX;
|
||||
if (y > maxY)
|
||||
y = maxY;
|
||||
|
||||
this.element.style.left = `${x}px`;
|
||||
this.element.style.top = `${y}px`;
|
||||
}
|
||||
});
|
||||
|
||||
// Save position and size
|
||||
const saveData = () => {
|
||||
const data = {
|
||||
x: this.element.offsetLeft,
|
||||
y: this.element.offsetTop,
|
||||
width: this.element.offsetWidth,
|
||||
height: this.element.offsetHeight
|
||||
};
|
||||
// Save data to local storage or a database
|
||||
localStorage.setItem(`divData${this.element.id}`, JSON.stringify(data));
|
||||
};
|
||||
|
||||
// Load saved data
|
||||
const loadData = () => {
|
||||
const data = localStorage.getItem(`divData${this.element.id}`);
|
||||
if (data) {
|
||||
const parsedData = JSON.parse(data);
|
||||
this.element.style.left = `${parsedData.x}px`;
|
||||
this.element.style.top = `${parsedData.y}px`;
|
||||
this.element.style.width = `${parsedData.width}px`;
|
||||
this.element.style.height = `${parsedData.height}px`;
|
||||
}
|
||||
};
|
||||
|
||||
// Call the save function when the user stops dragging
|
||||
document.addEventListener('mouseup', saveData);
|
||||
|
||||
// Load saved data on page load
|
||||
loadData();
|
||||
}
|
||||
|
||||
// Append the div to the space
|
||||
appendToFrame(space) {
|
||||
this.element.id = `newDiv${space.children.length}`;
|
||||
space.appendChild(this.element);
|
||||
}
|
||||
}
|
||||
|
||||
// Function to generate a random color
|
||||
function getRandomColor() {
|
||||
const letters = '0123456789ABCDEF';
|
||||
let color = '#';
|
||||
|
||||
for (let i = 0; i < 6; i++) {
|
||||
color += letters[Math.floor(Math.random() * 16)];
|
||||
}
|
||||
|
||||
return color;
|
||||
}
|
||||
|
|
@ -9,7 +9,8 @@ tags:
|
|||
|
||||
{% extends "demo/_app.njk" %}
|
||||
|
||||
{% block title %}{{ title }}{% endblock %}
|
||||
{% block title %}{{ title }}
|
||||
{% endblock %}
|
||||
|
||||
{% block links %}
|
||||
{{ super() }}
|
||||
|
|
@ -22,123 +23,18 @@ tags:
|
|||
|
||||
{% block body %}
|
||||
<div id="space"></div>
|
||||
<button id="addFrame">Add</button>
|
||||
<button data-action="add">Add</button>
|
||||
{% endblock %}
|
||||
|
||||
{%- block script %}
|
||||
<script src="{{ pageBase }}js/_ui.js"></script>
|
||||
<script>
|
||||
// Define the NewDiv class
|
||||
class NewDiv {
|
||||
constructor(x, y, width, height, backgroundColor) {
|
||||
this.x = x;
|
||||
this.y = y;
|
||||
this.width = width;
|
||||
this.height = height;
|
||||
this.backgroundColor = backgroundColor;
|
||||
this.element = null;
|
||||
}
|
||||
|
||||
// Create the div element
|
||||
createDiv() {
|
||||
this.element = document.createElement('div');
|
||||
this.element.style.position = 'absolute';
|
||||
this.element.style.left = `${this.x}px`;
|
||||
this.element.style.top = `${this.y}px`;
|
||||
this.element.style.width = `${this.width}px`;
|
||||
this.element.style.height = `${this.height}px`;
|
||||
this.element.style.background = this.backgroundColor;
|
||||
this.element.style.cursor = 'move';
|
||||
|
||||
// Add event listeners for dragging
|
||||
let isDown = false;
|
||||
let offset = [0, 0];
|
||||
|
||||
this.element.addEventListener('mousedown', (event) => {
|
||||
if (event.button === 0) { // Left mouse button
|
||||
isDown = true;
|
||||
offset = [
|
||||
this.element.offsetLeft - event.clientX,
|
||||
this.element.offsetTop - event.clientY
|
||||
];
|
||||
}
|
||||
});
|
||||
|
||||
document.addEventListener('mouseup', () => {
|
||||
isDown = false;
|
||||
});
|
||||
|
||||
document.addEventListener('mousemove', (event) => {
|
||||
if (isDown) {
|
||||
const maxX = window.innerWidth - this.element.offsetWidth;
|
||||
const maxY = window.innerHeight - this.element.offsetHeight;
|
||||
let x = event.clientX + offset[0];
|
||||
let y = event.clientY + offset[1];
|
||||
|
||||
// Boundary checks
|
||||
if (x < 0) x = 0;
|
||||
if (y < 0) y = 0;
|
||||
if (x > maxX) x = maxX;
|
||||
if (y > maxY) y = maxY;
|
||||
|
||||
this.element.style.left = `${x}px`;
|
||||
this.element.style.top = `${y}px`;
|
||||
}
|
||||
});
|
||||
|
||||
// Save position and size
|
||||
const saveData = () => {
|
||||
const data = {
|
||||
x: this.element.offsetLeft,
|
||||
y: this.element.offsetTop,
|
||||
width: this.element.offsetWidth,
|
||||
height: this.element.offsetHeight
|
||||
};
|
||||
// Save data to local storage or a database
|
||||
localStorage.setItem(`divData${this.element.id}`, JSON.stringify(data));
|
||||
};
|
||||
|
||||
// Load saved data
|
||||
const loadData = () => {
|
||||
const data = localStorage.getItem(`divData${this.element.id}`);
|
||||
if (data) {
|
||||
const parsedData = JSON.parse(data);
|
||||
this.element.style.left = `${parsedData.x}px`;
|
||||
this.element.style.top = `${parsedData.y}px`;
|
||||
this.element.style.width = `${parsedData.width}px`;
|
||||
this.element.style.height = `${parsedData.height}px`;
|
||||
}
|
||||
};
|
||||
|
||||
// Call the save function when the user stops dragging
|
||||
document.addEventListener('mouseup', saveData);
|
||||
|
||||
// Load saved data on page load
|
||||
loadData();
|
||||
}
|
||||
|
||||
// Append the div to the space
|
||||
appendToFrame(space) {
|
||||
this.element.id = `newDiv${space.children.length}`;
|
||||
space.appendChild(this.element);
|
||||
}
|
||||
}
|
||||
|
||||
// Function to generate a random color
|
||||
function getRandomColor() {
|
||||
const letters = '0123456789ABCDEF';
|
||||
let color = '#';
|
||||
for (let i = 0; i < 6; i++) {
|
||||
color += letters[Math.floor(Math.random() * 16)];
|
||||
}
|
||||
return color;
|
||||
}
|
||||
|
||||
// Get the space element
|
||||
const space = document.getElementById('space');
|
||||
const addFrameButton = document.getElementById('addFrame');
|
||||
const add = document.querySelector('[data-action=add]');
|
||||
|
||||
// Add event listener to the add space button
|
||||
addFrameButton.addEventListener('click', () => {
|
||||
add.addEventListener('click', () => {
|
||||
const newDiv = new NewDiv(100, 100, 100, 100, getRandomColor());
|
||||
newDiv.createDiv();
|
||||
newDiv.appendToFrame(space);
|
||||
|
|
|
|||
|
|
@ -4,6 +4,8 @@ tags:
|
|||
- demoExample
|
||||
- ui
|
||||
---
|
||||
{% set bodyClass = "body_form" %}
|
||||
|
||||
{% extends "demo/_app.njk" %}
|
||||
|
||||
{% block title %}{{ title }}
|
||||
|
|
@ -21,25 +23,46 @@ tags:
|
|||
<div id="head">
|
||||
<h1>Formulare</h1>
|
||||
<button data-action="add">Hinzufügen</button>
|
||||
<button data-action="change">Ändern</button>
|
||||
<hr>
|
||||
</div>
|
||||
<div id="grid">
|
||||
<div>a</div>
|
||||
<div>b</div>
|
||||
</div>
|
||||
<form id="form" action="">
|
||||
<div id="grid">
|
||||
<div>a</div>
|
||||
<div>b</div>
|
||||
<div>c</div>
|
||||
</div>
|
||||
</form>
|
||||
{% endblock %}
|
||||
|
||||
{%- block script %}
|
||||
{{ super() }}
|
||||
<script>
|
||||
const add = document.querySelector('[data-action=add]');
|
||||
const change = document.querySelector('[data-action=change]');
|
||||
const grid = document.getElementById('grid');
|
||||
|
||||
add.addEventListener('click', (e) => {
|
||||
const grid = document.getElementById('grid');
|
||||
const item = document.createElement('div');
|
||||
|
||||
item.style.backgroundColor = '#f0f';
|
||||
item.textContent = 'c'
|
||||
|
||||
grid.appendChild(item);
|
||||
});
|
||||
|
||||
change.addEventListener('click', (e) => {
|
||||
changeLayout(grid);
|
||||
});
|
||||
|
||||
function changeLayout(grid) {
|
||||
const currentTemplate = grid.style.gridTemplateColumns;
|
||||
|
||||
if (currentTemplate === 'repeat(4, 1fr)') {
|
||||
grid.style.gridTemplateColumns = 'repeat(2, 1fr)';
|
||||
} else {
|
||||
grid.style.gridTemplateColumns = 'repeat(4, 1fr)';
|
||||
}
|
||||
}
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
|
@ -1,18 +1,18 @@
|
|||
.body_drag {
|
||||
height: 100vh;
|
||||
// padding: $space_basic;
|
||||
|
||||
button {
|
||||
@extend .io_button;
|
||||
position: fixed;
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#space {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
background-color: $color-dark;
|
||||
}
|
||||
|
||||
#addFrame {
|
||||
@extend .io_button;
|
||||
position: fixed;
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
margin: 0;
|
||||
}
|
||||
|
|
@ -1,14 +1,18 @@
|
|||
#form body {
|
||||
.body_form {
|
||||
margin: 0;
|
||||
background-color: #808080;
|
||||
background-color: $color-dark;
|
||||
}
|
||||
|
||||
#head {
|
||||
// display: flex;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0;
|
||||
button {
|
||||
@extend .io_button;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#grid {
|
||||
|
|
@ -16,6 +20,7 @@ h1 {
|
|||
gap: 8px;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
grid-auto-rows: minmax(64px, auto);
|
||||
margin-inline: $space_small;
|
||||
}
|
||||
|
||||
#grid>div {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue