Add randomButton

[elalemanyo]

Hi, Inspired by the functionality that GitHub has for example, I think a button to select a random color could be something interesting.

https://user-images.githubusercontent.com/3856862/220574004-09de27d5-a6fb-450d-bbc8-5e3ec3c9f645.mp4

Thank you very much for this elegant color picker 🙂

[mdbassit]

I'm going to have to reject this idea and this PR. Thank you for your effort!

[elalemanyo]

I'm sorry, but can you explain the reason? Honestly we are using this library for a project and this is a functionality that we need. Before implementing it separately we wanted to support the project and make it directly native. Don't like the idea or is it the implementation?

[jepsar]

I don't think it's a mainstream feature people are waiting for. Of course it could be optional, but still the code has to be supported and taken into account when refactoring for example. I understand the decision.

[elalemanyo]

@jepsar As I have already explained, this functionality is inspired by github: I think they are mainstream 🙂. But naturally it is intended to be a choice of one's own implementation.

[elalemanyo]

@mdbassit Forgive me 🙏, I read all the documentation but not the part about contributing. I have deleted all changes made to the dist folder. And I know for the future that I have to make an issue first.

[mdbassit]

Here are my reasons:

• Like @jepsar said, I don't think this feature is useful for most people.
• The implementation interferes with the transparent close button that's used when the explicit close button is disabled (this is important for accessibility).
• I dislike the aesthetic of the random button/icon.

In my opinion you should implement this just like Github, with a button that sits beside the input field and outside the color picker.

[elalemanyo]

@mdbassit Thanks for your explanation. If I implement it as you have described is it something you can think about implementing/adding to Coloris? It is a functionality that I need in several projects and having it natively would be much easier for me.

[mdbassit]

I still wouldn't add this to Coloris, but here is a piece of code I put together quickly to add a random color button after a color field:

// Add a random color button after a color field wrapper
function addRandomButton() {
  document.querySelectorAll('.clr-field').forEach(wrapper => {

    if (!wrapper.nextElementSibling || !wrapper.nextElementSibling.classList.contains('clr-random')) {
      const parentNode = wrapper.parentNode;
      const field = wrapper.querySelector('input');
      const button = document.createElement('button');

      // Insert the button before the wrapper
      parentNode.insertBefore(button, wrapper);

      // Move the button after the wrapper
      parentNode.insertBefore(wrapper, button);

      // Button attributes
      button.innerHTML = 'Random color';
      button.setAttribute('type', 'button');
      button.setAttribute('class', 'clr-random');

      // Set random color on click on the button
      button.onclick = () => {
        field.value = `#${Math.floor(Math.random() * 0xffffff).toString(16)}`;
        field.dispatchEvent(new Event('input', { bubbles: true }));
      }
    }
  });
}

// To use, just call the function every time the color fields are initialized
addRandomButton();

You can style the random button however you like.

[elalemanyo]

Since I had already written the functionality, the problem is not writing it or putting the button somewhere else. The interesting thing would be to be able to have the functionality in the library without having to port it from one project to another. But I understand that you don't want to and after all it is your library so you decide 🙂.