sthag
e0cfcfac13
- Add windows screen - Add windows.js - Different variants of classes for drag and edge snap behaviour - Rename js files to better distinguish usage
48 lines
No EOL
1.2 KiB
Text
Executable file
48 lines
No EOL
1.2 KiB
Text
Executable file
---
|
|
title: Drag
|
|
tags:
|
|
- ui
|
|
---
|
|
{% layout "hippie/app.liquid" %}
|
|
|
|
{% 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">
|
|
{% render 'hippie/partials/frame-header.liquid' %}
|
|
<main></main>
|
|
{% render 'hippie/partials/frame-mode.liquid' %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{%- block script %}
|
|
<script src="{{ pageBase }}js/drag.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 %} |