sneedgroup-holder/openOutpaint
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

split settingsbar.js file

Browse source 
Signed-off-by: Victor Seiji Hariki <victorseijih@gmail.com>
This commit is contained in:
Victor Seiji Hariki 2022-12-03 01:13:13 -03:00
parent 441eec8e38
commit 51c90f0466
No known key found for this signature in database
GPG key ID: 53D76502731B4A7C
3 changed files with 60 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
index.html
View file

@ -215,9 +215,8 @@
<script src="js/lib/layers.js" type="text/javascript"></script>
<script src="js/lib/commands.js" type="text/javascript"></script>
<script src="js/settingsbar.js" type="text/javascript"></script>
<script src="js/lib/toolbar.js" type="text/javascript"></script>
<script src="js/lib/ui.js" type="text/javascript"></script>
<script
src="js/initalize/layers.populate.js"
@ -244,5 +243,6 @@
<script
src="js/initalize/debug.populate.js"
type="text/javascript"></script>
<script src="js/initalize/ui.populate.js" type="text/javascript"></script>
</body>
</html>

35
js/initalize/ui.populate.js Normal file
View file

@ -0,0 +1,35 @@
document.querySelectorAll(".floating-window").forEach((w) => {
makeDraggable(w);
});
var coll = document.getElementsByClassName("collapsible");
for (var i = 0; i < coll.length; i++) {
let active = false;
coll[i].addEventListener("click", function () {
var content = this.nextElementSibling;
if (!active) {
this.classList.add("active");
content.classList.add("active");
} else {
this.classList.remove("active");
content.classList.remove("active");
}
const observer = new ResizeObserver(() => {
if (active) content.style.maxHeight = content.scrollHeight + "px";
});
Array.from(content.children).forEach((child) => {
observer.observe(child);
});
if (active) {
content.style.maxHeight = null;
active = false;
} else {
content.style.maxHeight = content.scrollHeight + "px";
active = true;
}
});
}

60
js/settingsbar.js → js/lib/ui.js
View file

@ -1,9 +1,18 @@
/**
* This is a function that makes an HTMLElement draggable.
*
* The element must contain at least one child element with the class
* 'draggable', which will make it the handle for dragging the element
*
* @param {HTMLElement} element Element to make Draggable
*/
function makeDraggable(element) {
let dragging = false;
let offset = {x: 0, y: 0};
const margin = 10;
// Keeps the draggable element inside the window
const fixPos = () => {
const dbb = element.getBoundingClientRect();
if (dbb.left < margin) element.style.left = margin + "px";
@ -17,6 +26,7 @@ function makeDraggable(element) {
dbb.top + (window.innerHeight - margin - dbb.bottom) + "px";
};
// Detects the start of the mouse dragging event
mouse.listen.window.btn.left.onpaintstart.on((evn) => {
if (
element.contains(evn.target) &&
@ -29,6 +39,7 @@ function makeDraggable(element) {
}
});
// Runs when mouse moves
mouse.listen.window.btn.left.onpaint.on((evn) => {
if (dragging) {
element.style.right = null;
@ -40,53 +51,28 @@ function makeDraggable(element) {
}
});
// Stops dragging the element
mouse.listen.window.btn.left.onpaintend.on((evn) => {
dragging = false;
});
// Redraw after window resize
window.addEventListener("resize", () => {
fixPos();
});
}
document.querySelectorAll(".floating-window").forEach((w) => {
makeDraggable(w);
});
var coll = document.getElementsByClassName("collapsible");
for (var i = 0; i < coll.length; i++) {
let active = false;
coll[i].addEventListener("click", function () {
var content = this.nextElementSibling;
if (!active) {
this.classList.add("active");
content.classList.add("active");
} else {
this.classList.remove("active");
content.classList.remove("active");
}
const observer = new ResizeObserver(() => {
if (active) content.style.maxHeight = content.scrollHeight + "px";
});
Array.from(content.children).forEach((child) => {
observer.observe(child);
});
if (active) {
content.style.maxHeight = null;
active = false;
} else {
content.style.maxHeight = content.scrollHeight + "px";
active = true;
}
});
}
/**
* Slider Inputs
* Creates a custom slider element from a given div element
*
* @param {string} name The display name of the sliders
* @param {HTMLElement} wrapper The element to transform into a slider
* @param {object} options Extra options
* @param {number} options.min The minimum value of the slider
* @param {number} options.max The maximum value of the slider
* @param {number} options.step The step size for the slider
* @param {number} option.defaultValue The default value of the slider
* @returns {{value: number}} A reference to the value of the slider
*/
function createSlider(name, wrapper, options = {}) {
defaultOpt(options, {