Re: Color Picker/ Slider

On Mar 10, 10:21 pm, mrbunnylamakins <[email protected]> wrote:
> I found this code ....
>
> <binding id="color-input">
>  <content>
>     <xul:hbox>
>        <xul:textbox anonid="color-textbox" inherits="value"
>                     onchange="this.parentNode.parentNode.value = this.value; return true;" />
>        <xul:colorpicker anonid="color-picker" type="button" inherits="color=value"
>                         onselect="this.parentNode.parentNode.value = this.mPicker.color; return true;" />
>     </xul:hbox>
>  </content>
>  <implementation>
>     <constructor><![CDATA[
>       var picker =
>         document.getAnonymousElementByAttribute(this, "anonid", "color-picker");
>       var color = this.getAttribute("value");
>       picker.initialize();
>       /* avoid problems with templates. */
>       if (color && (color.search("rdf:") < 0)) {
>         this.value = color;
>       } else {
>         this.value = "#000000";
>       }
>     ]]></constructor>
>     <property name="value"
>               onget="return this.getAttribute('value');">
>        <setter><![CDATA[
>          var picker =
>            document.getAnonymousElementByAttribute(this, "anonid", "color-picker");
>          var textbox =
>            document.getAnonymousElementByAttribute(this, "anonid", "color-textbox");
>          picker.color = val;
>          textbox.value = val;
>          this.setAttribute("value", val);
>        ]]></setter>
>     </property>
>  </implementation>
>  <handlers>
>     <handler event="DOMAttrModified"><![CDATA[
>       if(event.attrName == "value") {
>         this.value = event.newValue;
>       }
>     ]]></handler>
>  </handlers>
> </binding>
>
> The color input would then be used in my XUL file as follows:
>
> <colorinput value="black" />
>
> ----------------------------------------------------------------------
> I actually use XUL a lot in Custombuttons (add-on extension to Firefox)
>
> var menu = <menupopup xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
>                       xmlns:cb="http://xsms.nm.ru/custombuttons/"
>                       onclick="this. parentNode. handleClick (event);">
>
> <scale min="1" max="20"/>
>
> <colorpicker type="button" color="#CC0080" />
>
> </menupopup>;
> var bool = XML.prettyPrinting;
> XML.prettyPrinting = false;
> var el = new DOMParser().parseFromString(menu.toXMLString(), "application/xml").documentElement;
> XML.prettyPrinting = bool;
> this.appendChild(el);
> this.type = "menu";
> this.orient = "horizontal";
> this.menuClick = function(event) {
> var menuitem = event. target;
>   event.preventDefault();
>   event.stopPropagation();
>   this.open = false;
>
> }
>
> this.setAttribute("onclick", "this.buttonClick(event)");
>
> ------------------------------------------------------------------
>
> The application is I have a button I can darken a web page background as like sites with light backgrounds with video players
>
> ----------------------------------------------------------------
>
> var element = content.document.getElementById("blackify");
> if (element) {
>   element.parentNode.removeChild(element);} else {
>
>   var style = content.document.createElement("style");
>   style.setAttribute("type", "text/css");
>   style.setAttribute("id", "blackify");
>   style.innerHTML = "*         { background: #000000 !important; } " +
>                     "*         { background-color value : #000000 !important; } " +
>
>                     "a:yt-uix-button-dark:hover{      color: #000000 !important; } " +
>
>                     "*         {      color: #44aa44 !important; } " +
>                     "a         {      color: #FFCC66 !important; } " +
>                     "a:hover   {      color: #000000 !important; } " +
>                     "*         { border:none !important; } " +
>                     "*         { button-border:none !important; } " +
>                     "*         { yt-uix-button-color: #000000 !important; } " +
>                     "*         { border-color:#000000 !important; } " +
>                     "*         { border-bottom-color:#000000 !important; } " +
>                     "*         { border-left-color:#000000 !important; } " +
>                     "*         { border-right-color:#000000 !important; } " +
>                     "*         { border-top-color:#000000 !important; } " +
>                     "a:visited {      color: #FFB720 !important; } ";
>
>   content.document.getElementsByTagName("head")[0].appendChild(style);
>
> }
>
> ------------------------------------------------------
>
> That said I was hoping to to make a button with a drop down menu with a XUL Buttons (Slider and Color Picker) The slider would set to middle(5) and 1 would be white 10 would be black and color picker would go to changing text color.


Okay, took me a while to work through this one since I haven't
actually worked with a scale (slider) before.  In simple form, here's
what I came up with; your mileage may vary.

Create your scale element.
     <scale min="1" max="10" increment="1" id="cscale" />

Next, you will need to get the value of the scale in your script.
     var scaleVal = document.getElementById('cscale').value;

Now you can do something with the value(s) like this.
     if (scaleVal == "10") {
 
document.getElementById('mainwindow').setAttribute('style','#000000');
     }

Note that on Linux I ran into a problem with the scale element wherein
if I used the onchange attribute, the scale would only allow me to
select 1 and 10.  No other increments could be selected.  I have not
tested this out on Windows as I don't have a machine running that OS
right now.

As for the color picker changing the text color, something similar can
be done.

Create the color picker element.
     <color picker id="cp" />

In your script, get the selected value.
    var cpcolor = document.getElementById(`cp').color;

Then change the attirbute for whatever element is containing the text.
   document.getElementById('lablel-
element').setAttribute('style','cpcolor');