Displaying background colours in Choice drop downs.

This patch will detect a colour code like #88aabb in the HTML for name field of a Choice
and set the background colour of that choice to match.


CHANGE LOG

26-11-05 V1.01  Added code to display text in white if background colour too dark.
		Major rewrite to minimise template changes.	

16-08-05 V1.00  Initial Release


INSTALLATION


make file optioncoloursupport.js (in Site1) from the following



var threshold = 20;	// level to switch text to white - range 0 -> 27
function endoption(ref){
  var select = document.getElementById('sel-' + ref);		// the SELECT statement
  for ( var i = 0; i < select.options.length; i++)
    {
    var thisoption = select.options[i];
    var bits = thisoption.text.match(/(.*)(#\w{6})(.*)/);	// have we a #rrggbb
    if ( bits != null )
      {
      var rgbs = bits[2].match(/(\d).(\d).(\d)./);		// get most sig. rgb digits
      if (rgbs != null) 
        {
        if ( ((rgbs[1] - 0) + (rgbs[2] - 0) + (rgbs[3] - 0)) <= threshold ) thisoption.style.color = 'white';
        } 
      thisoption.text = bits[1] + bits[3];			// remove the #rrggbb code
      thisoption.style.backgroundColor = bits[2];
      }
    }
}



In Act_Primary.html (and all other Product Primary Templates) just above the </head> line, add the line

<SCRIPT LANGUAGE="JavaScript" SRC="optioncoloursupport.js" TYPE="text/javascript"></SCRIPT>




Replace (back it up first) Act_VariantListHeader.html with the following



<!-- VariantListHeader HTML begin -->
<!-- This template is used for a product variant list box header. -->

<SELECT ID="sel-NETQUOTEVAR:ATTRIBUTEREF" NAME="NETQUOTEVAR:ATTRIBUTEREF">

<!-- This template is used for a product variant list box header. -->
<!-- VariantListHeader HTML end -->




Replace (back it up first) Act_VariantListChoice.html with the following (this is the 
standard Actinic template and this step is only needed if case you're upgrading from 
an earlier version of this patch)



<!-- VariantListChoice HTML begin -->
<!-- This template is used for a product variant list box choice. -->

<OPTION VALUE=NETQUOTEVAR:CHOICESELVALUE NETQUOTEVAR:ITEMSELECTED>NETQUOTEVAR:CHOICENAME

<!-- This template is used for a product variant list box choice. -->
<!-- VariantListChoice HTML end -->




Replace (back it up first) Act_VariantListFooter.html with the following



<!-- VariantListFooter HTML begin -->
<!-- This template is used for a product variant list box footer. -->

</SELECT>
<script language=JavaScript>
<!--
endoption('NETQUOTEVAR:ATTRIBUTEREF');
//-->
</script>

<!-- This template is used for a product variant list box footer. -->
<!-- VariantListFooter HTML end -->




OPERATION


For any Choices that you want a background colour against simply 
add #rrggbb (# followed by exactly 6 hex digits) to the Choices "HTML for Name" field.
Don't put this #rrggbb into the "Choice Name" field - only the "HTML for Name".

E.g.  

Plover #88aabb
Black #000000
Deep #ff0000 Red


The text that overlays the coloured background will switch to white if a threshold is reached.
You can change the sensitivity of this by changing the line in optioncoloursupport.js

var threshold = 20;	// level to switch text to white - range 0 (BLACK) -> 27 (LIGHTER)