JET color converter

Color picker and ojColorConverter

by Paul Thaden

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.3.2/require.min.js"></script>
<div class="oj-flex oj-sm-flex-direction-column">

  <div class="oj-flex-item">
    <h2>Oracle JET Color Converter</h2>
    <div class="demo-color-title">Type in a rgba() color or choose from the color picker</div>
  </div>
  
  <div class="oj-flex-item oj-flex">
  
    <div class="oj-flex-item oj-sm-6 oj-md-6">
    
      <div id="colorSpectrumDemo" class="oj-flex-item oj-flex oj-sm-flex-direction-column ">
        <div class="oj-flex-item oj-flex demo-color-results oj-sm-flex-items-initial
">
          <div class="oj-flex-item">
            <div class="demo-color-preview"
               data-bind="style: {backgroundColor: previewColor().toString()}"></div>
          </div>
          <oj-input-text id="text-input-rgba" 
                         class = "oj-flex-item"
                         autofocus 
                         value="{{previewColor}}" 
                         on-value-changed="[[updateColorValue]]"
                         validators = "[[rgbaValidator]]"
                         >
          </oj-input-text>
        </div>
        
        <div class="oj-flex-item">
              <oj-label id="mainlabelid">Color spectrum</oj-label>
              <div class="demo-color-panel oj-panel oj-panel-shadow-lg"> 
                <oj-color-spectrum id="color-picker"
                  class="demo-color-spectrum" 
                  labelled-by="mainlabelid"
                  value="{{colorValue}}" 
                  on-value-changed="[[updatePreviewColor]]">
                </oj-color-spectrum>
              </div>
        </div>
        
        </div>
       
    </div>
    
    <div class="oj-flex-item oj-sm-6 oj-md-6">
    
      <div class="oj-flex-item oj-form " id="form-container">
        <oj-label label-id="grouplabelid">
            <h3>Converted colors</h3>
        </oj-label>
       
       
        <div role="group" aria-labelledby="grouplabelid" 
        ...

CSS

@import url('//static.oracle.com/cdn/jet/v4.1.0/default/css/alta/oj-alta-min.css');

.demo-color-preview
{
  width:29px;
  height:29px;
  border:1px solid black;
}

.demo-color-title {
  vertical-align: top;
  margin-left:15px;
}

.demo-color-results {
  vertical-align: top;
  margin-left:10px;
  margin-top:10px;
}

.demo-color-panel {
  margin-left:7px;
  display: inline-block;
  padding:2px 8px 2px 2px;
}

JavaScript

require(['knockout',
  'ojs/ojcore',
  'jquery',
  'ojs/ojknockout',
  'ojs/ojvalidation', 
  'ojs/ojcolor',
  'ojs/ojcolorspectrum',
  'ojs/ojlabel',
  'ojs/ojinputtext'
], function(ko, oj, $) {
  'use strict';

  var ViewModel = function() {
    self.initialColor = new oj.Color('rgba(21,0,255,0.8)');
       self.colorValue = ko.observable(self.initialColor);
       self.previewColor = ko.observable(self.initialColor);
       
       // Create the color converter factory
       var cf = oj.Validation.converterFactory(oj.ConverterFactory.CONVERTER_TYPE_COLOR);

			 // Create a converter for each output type
       var convHsl  = cf.createConverter({"format": "hsl"}) ;
			 var convHsv  = cf.createConverter({"format": "hsv"}) ;
			 var convHex  = cf.createConverter({"format": "hex"}) ;
			 var convRgb  = cf.createConverter({"format": "rgb"}) ;
       
       // Observables for each output type
       self.hslColor = ko.observable(self.initialColor);
       self.hsvColor = ko.observable(self.initialColor);
       self.hexColor = ko.observable(self.initialColor);
       self.rgbColor = ko.observable(self.initialColor);
 
 			 self.convertColorToOutputs = function (color) {
       		// convert the color to each output type
          self.hslColor(convHsl.format(color)); 
          self.hsvColor(convHsv.format(color)); 
          self.hexColor(convHex.format(color)); 
          self.rgbColor(convRgb.format(color)); 
			 }

       // Handle color change from Color Spectrum picker
       self.updatePreviewColor = function (event)
       {
          var value = event.detail['value'];
         
         	// update the observable with the color object from the new picked color
          self.previewColor(value);

					// update the color spectrum picker with a color generated from the input text
          //self.colorValue(new oj.Color(value));
          
          // convert to output formats
          self.convertColorToOutputs(self.previewColor()); 
				  
       };
    ...