hippie/source/screens/demo/examples/ui/drag.njk
sthag 3b380e954a feat: Changes to style and logic for ui parts
- Update hippie styles
- Move top element for new page to header macro
- Reassign ui and example collections
2025-06-19 16:21:09 +02:00

48 lines
No EOL
1.1 KiB
Text
Executable file

---
title: Drag
tags:
- ui
---
{% set pageId = page.fileSlug %}
{% set pageClass = "h_full_view" %}
{% set bodyClass = "body_drag" %}
{% extends "demo/_app.njk" %}
{% block title %}{{ title }}
{% endblock %}
{% block links %}
{{ super() }}
<link href="{{ pageBase }}css/ui.css" media="all" rel="stylesheet"/>
{% endblock %}
{% block head %}
{{ super() }}
{% endblock %}
{% block body %}
<div id="space"></div>
<button data-action="add">Add</button>
{% endblock %}
{%- block script %}
<script src="{{ pageBase }}js/_ui.js"></script>
<script>
// Get the space element
const space = document.getElementById('space');
const add = document.querySelector('[data-action=add]');
// Add event listener to the add space button
add.addEventListener('click', () => {
const newDiv = new NewDiv(100, 100, 100, 100, getRandomColor());
newDiv.createDiv();
newDiv.appendToFrame(space);
});
// Create a new NewDiv instance
const newDiv = new NewDiv(100, 100, 800, 600, '#000');
newDiv.createDiv();
newDiv.appendToFrame(space);
</script>
{% endblock %}