— January 03, 2018

Don't Forget Your oj.ColorConverter Dependencies

I mess this up every time I try to use it:

If you’re attempting to leverage the Oracle JET color converter, you’ll get these errors in your browser console if you forget the dependencies at the top of your ojModule’s define() function:

TypeError: Cannot read property 'converterFactory' of undefined
    // you left out 'ojs/ojvalidation'

TypeError: oj.Color is not a constructor 
    // you left out 'ojs/ojcolor'

Also, besides including 'ojs/ojvalidation' and 'ojs/ojcolor', watch to make sure you perform all the steps:

Create a ConverterFactory of type color
Pass in an options object for the format you want to output and create the converter itself
Make sure the input color is an ojColor object first (see below for a trick for using CSS Color Keywords directly)
Run it through the converter

define(['ojs/ojcore', 'knockout', 'jquery', 'ojs/ojvalidation', 'ojs/ojcolor'],
  function(oj, ko, $) {
  
    ...

    // Steps 1 & 2 (one time only) 
    // Use a factory to create a converter for the output you want 
    var cf = oj.Validation.converterFactory(oj.ConverterFactory.CONVERTER_TYPE_COLOR);
    var convHsl = cf.createConverter({"format": "hsl"}) ;


    // Steps 3 & 4
    // Create a Color object first, then convert it
    var rgbaOrig = new oj.Color("rgba(27,128,254,0.8)");
    var convertedRgbaColor = convHsl.format(rgbaOrig);  
        // returns "hsla(213, 99%, 55%, 0.8)"

    var hexOrig = new oj.Color("#fa8072");
    var convertedHexColor = convHsl.format(hexOrig);
        // returns "hsl(6, 93%, 71%)" 

    var objectOrig =  new oj.Color({h:310, s:50, v:80, a:0.8});
    var convertedObjectColor = convHsl.format(objectOrig); 
        // returns "hsla(310, 50%, 60%, 0.8)"



    // What if you want to use CSS3 color specification strings?
    // Convert it in one fell swoop using object bracket notation
    //  (but be advised the CSS3 color properties are in ALLCAPS 
    //   on the oj.Color object): 
    var convertedCSS3str = convHsl.format(oj.Color['deeppink'.toUpperCase()]);          // returns "hsl(328, 100%, 54%)"



    ...

Here’s a little fun with converters as a bonus:

Oracle JET Dev