option to disable brightness bar And option to render it to a different element #13

ringofhealth · 2017-10-20T16:14:26Z

Hey, this relate to issue #9, in addition to have the ability to disable the brightness bar, is it also possible to draw the brightness canvas as a separate modular html element? cause the current layout may not be applicable to all applications.

ringofhealth · 2017-10-25T19:50:19Z

@jaames any ideas?

jaames · 2017-10-25T21:04:13Z

Hi, sorry for the slow response!

My initial thought is that it would "break" a couple of things, like:

When setting up a color picker, you give it a single CSS selector/HTML element to use as a container, it would be a bit confusing if the slider canvas is somewhere outside this container, no?
The color picker's width and height options, which are used for the canvas size, would no longer be meaningful if two canvases are used.

Maybe you could provide more detail? A practical use-case would really be appreciated. :)

ringofhealth · 2017-10-29T21:12:16Z

Ah okay, if its gonna break things, then perhaps the option to disable the brightness bar would be sufficient then.

My reasoning behind this is essentially, if the UI of an given application separates the ability of the user to change brightness and the actual color of a given element, then the current rendered canvas would not be applicable. Thats essentially whats happening to me right now. They can't be rendered like the way they are presented right now.

If its too much hassle to have the ability to render them out in seperate elements. Given the option to disable the brightness bar and the event listener present on color changes. Then I can have my own slider to change the brightness by itself and utilize the hue and sat aspect of the color wheel

jaames · 2017-10-29T21:44:34Z

I'll definitely consider optionally disabling the brightness slider, and I will experiment to see if I can get elements to render to seperate elements too. iro 3.0.0 is out now, and with it I've switched to using SVG for the UI instead of the canvas API. Perhaps it will be easier to do with SVG? ¯_(ツ)_/¯

If it's super important and you're okay with a hacky solution, with the latest version of the library you can hide the brightness slider with CSS:

.iro__slider {
     display: none;
     visibility: hidden;
     pointer-events: none;
}

Then also remove the reference to it from the color picker's internal UI element list, which will stop it from picking up mouse events on the hidden slider:

colorPicker.ui.slice(1, 1);

ringofhealth · 2017-10-31T14:41:07Z

Wow I see you have totally reworked this lib, awesome!! I tried your method of hiding it, with css and the js, but it seems like the brightness event is still being picked up. Any other way around this?

jaames · 2017-10-31T20:39:37Z

Yep!

Ah whoops, I think I made a mistake. The JS should be ui.splice(1, 1). Basically, we want to remove the second item from the color picker's ui array (the first item is the hue/sat wheel).

ringofhealth · 2017-10-31T21:21:13Z

ah you are absolutely right! with the brightness control gone, anyway I can center the circle svg element inside the container by pure css?

jaames · 2017-11-01T12:10:25Z

I suppose you could try force-cropping the SVG by taking a couple of pixels off the height:

#exampleWrapper svg {
     height: 200px !important;
}

Something like that perhaps? It is a bit difficult to write a CSS selector that targets the SVG element, I should do something about that. :P

Lehoczky · 2019-01-19T18:31:48Z

Because this is a dynamically injected html element, for anyone using Angular, the css should look like this:

:host /deep/ .iro__slider {
  display: none;
  visibility: hidden;
  pointer-events: none;
}

jaames · 2019-01-25T10:07:31Z

With the latest version of iro.js (version 4.0.0), there is a new layout config option. This can be used to specify which controls are used:

<html>
  <head>
    <script src="https://unpkg.com/@jaames/iro/dist/iro.js"></script>
  </head>
  <body>
    <div id="color-picker-mount"></div>
    <script>
       var colorPicker = new iro.ColorPicker("#color-picker-mount", {
         width: 300,
         layout: [
            { component: iro.ui.Wheel, options: {} }
         ]
       });
    </script>
  </body>
</html>

Check out the Custom Layout documentation for more information on how this works.

Additionally, each UI component is now a seperate SVG element with its own events, etc. If you want to render the slider in a seperate element, you should be able to do some simple DOM manipulation to move it elsewhere. :)

Sorry for taking so long to find a proper way to do this. ':)

jaames · 2019-02-22T22:46:36Z

Version 4.0.0 is live, so this is now possible with the newest version of the library. I've edited my previous comment with more info.

jaames self-assigned this Oct 25, 2017

jaames added feature-request question labels Oct 25, 2017

josephNg95 mentioned this issue Apr 24, 2018

How can i disable slider bar ? #33

Closed

jaames mentioned this issue Jun 9, 2018

Discussion: iro.js 4.0+ #30

Closed

jaames closed this as completed Jan 25, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

option to disable brightness bar And option to render it to a different element #13

option to disable brightness bar And option to render it to a different element #13

ringofhealth commented Oct 20, 2017

ringofhealth commented Oct 25, 2017

jaames commented Oct 25, 2017

ringofhealth commented Oct 29, 2017 •

edited

Loading

jaames commented Oct 29, 2017

ringofhealth commented Oct 31, 2017

jaames commented Oct 31, 2017

ringofhealth commented Oct 31, 2017

jaames commented Nov 1, 2017

Lehoczky commented Jan 19, 2019

jaames commented Jan 25, 2019 •

edited

Loading

jaames commented Feb 22, 2019

option to disable brightness bar And option to render it to a different element #13

option to disable brightness bar And option to render it to a different element #13

Comments

ringofhealth commented Oct 20, 2017

ringofhealth commented Oct 25, 2017

jaames commented Oct 25, 2017

ringofhealth commented Oct 29, 2017 • edited Loading

jaames commented Oct 29, 2017

ringofhealth commented Oct 31, 2017

jaames commented Oct 31, 2017

ringofhealth commented Oct 31, 2017

jaames commented Nov 1, 2017

Lehoczky commented Jan 19, 2019

jaames commented Jan 25, 2019 • edited Loading

jaames commented Feb 22, 2019

ringofhealth commented Oct 29, 2017 •

edited

Loading

jaames commented Jan 25, 2019 •

edited

Loading