mirror/pixel-editor
1
0
Fork 0
mirror of https://github.com/lospec/pixel-editor.git synced 2023-08-10 21:12:51 +03:00
Code Issues Projects Releases Wiki Activity

Attempted to resize palette squares on scroll

Browse Source
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; resize: vertical;
li { li {
width: var(--top-nav-height); width: 48px;
height: var(--top-nav-height); height: 48px;
flex-basis: var(--top-nav-height);
&.noshrink {
flex-grow: 0;
flex-shrink: 0;
}
} }
svg { svg {

24
js/ColorModule.js
View File

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