How to customize colors in PopupColorPicker

已查看 66 次
跳至第一个未读帖子

Mark

未读，
2010年6月8日 06:26:592010/6/8
收件人 Closure Library Discuss
Hi all
We can customize colors in ColorPicker like this:

var cp = new goog.ui.ColorPicker();
var ca = new Array("#468AB6", "#4C4E6E", "#79AB4B", "#80CDE5",
"#8EC31F", "#F49C21");
cp.setColors(ca);
cp.setSize(ca.length);
cp.render();

I don't know how to customize colors in PopupColorPicker, does anybody
know?
Thanks.

Mohamed Mansour

未读，
2010年6月8日 16:53:052010/6/8
收件人 closure-lib...@googlegroups.com
Hi Mark,

According to the docs, you can pass in a ColorPicker to the PopupColorPicker in its constructor:

/**
 * Popup color picker widget.
 *
 * @param {goog.dom.DomHelper=} opt_domHelper Optional DOM helper.
 * @param {goog.ui.ColorPicker=} opt_colorPicker Optional color picker to use
 *     for this popup.
 * @extends {goog.ui.Component}
 * @constructor
 */
goog.ui.PopupColorPicker = function(opt_domHelper, opt_colorPicker) {
  goog.ui.Component.call(this, opt_domHelper);

  if (opt_colorPicker) {
    this.colorPicker_ = opt_colorPicker;
  }
};
goog.inherits(goog.ui.PopupColorPicker, goog.ui.Component);

-
Mohamed Mansour

Mark

未读，
2010年6月8日 22:13:042010/6/8
收件人 Closure Library Discuss
Thank you so much, Mr. Mansour.
After try and try and try, i still can't figure it out.

<body>
<a href="javascript:void(0)" id="button1">Show 1</a>
<a href="javascript:void(0)" id="button2">Show 2</a>
<script>
var cp = new goog.ui.ColorPicker();
var ca = new Array("#4C4E6E", "#79AB4B", "#80CDE5", "#8EC31F",
"#F49C21");
cp.setColors(ca);
cp.setSize(ca.length);

var dh = new goog.dom.DomHelper(goog.dom.getElement('button1'));
var picker = new goog.ui.PopupColorPicker(dh, cp);
picker.render();
picker.attach(document.getElementById('button1'));
picker.attach(document.getElementById('button2'));

goog.events.listen(picker, 'change', function(e) {
picker.getLastTarget().style.backgroundColor =
picker.getSelectedColor();
});
</script>
</body>

Does anyone can get me a example?
Thanks.

On 6月9日, 上午4時53分, Mohamed Mansour <m0.interact...@gmail.com> wrote:
> Hi Mark,
>
> According to the docs, you can pass in a ColorPicker to the PopupColorPicker
> in its constructor:
>
> /**
>
>  * Popup color picker widget.
>
>  *
>
>  * @param {goog.dom.DomHelper=} opt_domHelper Optional DOM helper.
>
>  * @param {goog.ui.ColorPicker=} opt_colorPicker Optional color picker to
>
> > use
>
>  *     for this popup.
>
>  * @extends {goog.ui.Component}
>
>  * @constructor
>
>  */
>
> goog.ui.PopupColorPicker = function(opt_domHelper, opt_colorPicker) {
>
>   goog.ui.Component.call(this, opt_domHelper);
>
> > *  if (opt_colorPicker) {*
>
> *    this.colorPicker_ = opt_colorPicker;*
>
> *  }*
>
> };
>
> goog.inherits(goog.ui.PopupColorPicker, goog.ui.Component);
>
> -
> Mohamed Mansour
>

Mohamed Mansour

未读，
2010年6月9日 01:30:492010/6/9
收件人 closure-lib...@googlegroups.com
I believe that is a bug :x I have looked at why it is happening, so spent a few minutes reading the source. Maybe a closure committer/developer can comment?

What it currently does is when a popup is shown, it checks to see if a color picker is assigned, in normal cases (where no color picker is assigned), it creates a simple grid (default colors), then adds that picker as a child to the popup which makes sense. Then renders it.

  if (!this.colorPicker_) {
    this.colorPicker_ =
        goog.ui.ColorPicker.createSimpleColorGrid(this.getDomHelper());
    this.colorPicker_.setFocusable(this.focusable_);
    this.addChild(this.colorPicker_);
    this.colorPicker_.render(this.getElement());
    this.getHandler().listen(this.colorPicker_,
        goog.ui.ColorPicker.EventType.CHANGE, this.onColorPicked_);
  }

There are no problems with that until  we assign a color picker through the constructor. The problem is that doesn't add itself as a child to that picker, nor it renders it (for the first time), causing it to fail because that color picker is no where to be found (getElement returns null)

An easy fix in my opinion (I have no idea if its the correct fix), is to keep track that we are having a custom color picker, then we check if we have one once we first show it. I created a patch that solves this, http://codereview.appspot.com/1630041/show

If you apply this patch (http://codereview.appspot.com/download/issue1630041_1_3.diff) it should work then. Let me know if it works for you.

-
Mohamed Mansour

Mohamed Mansour

未读，
2010年6月9日 01:35:472010/6/9
收件人 closure-lib...@googlegroups.com
Forgot to say, the test case I have tested on which works is the following, http://pastebin.com/ad8HTmj6

-
Mohamed Mansour

Mark

未读，
2010年6月9日 02:34:052010/6/9
收件人 Closure Library Discuss
Thank you so much, Mr. Mansour.
I apply your patch, and it works fine.
:)
回复全部
回复作者
转发
0 个新帖子