sthag
1ddba29d9c
- Add parameter to NewDiv class - Add instance with content to drag page - Drag page now also uses frame template - Use macro for footer in explorer
50 lines
No EOL
1.3 KiB
Text
Executable file
50 lines
No EOL
1.3 KiB
Text
Executable file
---
|
|
title: Drag
|
|
tags:
|
|
- ui
|
|
---
|
|
{% set pageId = page.fileSlug %}
|
|
|
|
{% extends "hippie/_app_frame.njk" %}
|
|
|
|
{% block body %}
|
|
<header class="io pos_fix pin_top pin_right pin_left">
|
|
<button data-action="add">Add</button>
|
|
</header>
|
|
<div id="space"></div>
|
|
<div>
|
|
<div id="test">
|
|
<div class="body_frame">
|
|
{{ io.frameHeader('title-bar') }}
|
|
<main></main>
|
|
{{ io.frameFooter('mode-bar') }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% 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]');
|
|
const test = document.getElementById('test');
|
|
|
|
// 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, 200, 200, '#000');
|
|
newDiv.createDiv();
|
|
newDiv.appendToFrame(space);
|
|
|
|
const explorer = new NewDiv(256, 128, 800, 600, '#fff', test);
|
|
explorer.createDiv();
|
|
explorer.appendToFrame(space);
|
|
</script>
|
|
{% endblock %} |