mirror
/
pixel-editor
mirror of https://github.com/lospec/pixel-editor.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Attempted to resize palette squares on scroll

This commit is contained in:
Nicola 2022-10-06 11:20:09 +02:00
parent 7672a034c8
commit f31fd5b505
2 changed files with 25 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
css/_colors-menu.scss
View File

@ -18,14 +18,8 @@
resize: vertical;
li {
width: var(--top-nav-height);
height: var(--top-nav-height);
flex-basis: var(--top-nav-height);
&.noshrink {
flex-grow: 0;
flex-shrink: 0;
}
width: 48px;
height: 48px;
}
svg {

24
js/ColorModule.js
View File

@ -7,13 +7,15 @@ const ColorModule = (() => {
// Reference to the HTML palette
const coloursList = document.getElementById("palette-list");
// Reference to the colours menu
const colorsMenu = document.getElementById("colors-menu");
let colorsMenu = document.getElementById("colors-menu");
// Binding events to callbacks
document.getElementById('jscolor-hex-input').addEventListener('change',colorChanged, false);
document.getElementById('jscolor-hex-input').addEventListener('input', colorChanged, false);
document.getElementById('add-color-button').addEventListener('click', addColorButtonEvent, false);
Events.on("wheel", "colors-menu", resizeSquares);
// const resizeObserver = new ResizeObserver(function(mutations) {
// console.log('mutations:', mutations);
// const h = mutations[0].contentRect.height;
@ -31,6 +33,26 @@ const ColorModule = (() => {
draggable: ".draggable-colour",
onEnd: function() {Events.simulateMouseEvent(window, "mouseup");}
});
function resizeSquares(event) {
for (let i=0; i< coloursList.children.length; i++) {
let width = parseInt(coloursList.children[i].style.width.replace("px", ""), 10);
let newWidth = (width - 2 * Math.sign(event.deltaY)) + "px";
/* coloursList.children[i].setAttribute("style", "width: " + (width - 2 * Math.sign(event.deltaY)) + "px");
coloursList.children[i].setAttribute("style", "height: " + (width - 2 * Math.sign(event.deltaY)) + "px");*/
coloursList.children[i].setAttribute("style", "width: 500px");
coloursList.children[i].style.width = '500px';
coloursList.children[i].setAttribute("style", "height: 500px");
coloursList.children[i].style.height = '500px';
}
let width = coloursList.children[0].style.width;
console.log(width);
}
/** Changes all of one color to another after being changed from the color picker
*
* @param {*} colorHexElement The element that has been changed