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());
};
// Handle color change from rgba Input Text
self.updateColorValue = function (event)
{
var value = event.detail['value'];
// update the color spectrum picker with a color generated from the input text
if (value instanceof oj.Color) {
self.colorValue(value);
} else {
self.colorValue(new oj.Color(value));
}
// convert to output formats
self.convertColorToOutputs(self.colorValue());
};
// Note: regExp validator intends that the
// pattern provided is matched exactly, so it wraps the
// pattern option value in '^(' and ')$'.
var messageDetailString = 'please enter a valid rgba() format';
// when using \ to escape regex, need a second \\ because backslash is escape in strings
var rgbaRegex = "rgba\\((\\d{1,3}%?,\\s?){3}(1|0?\\.\\d+)\\)"
self.rgbaValidator = ko.pureComputed(function () {
return [{
"type": "regExp",
"options": {
"pattern": rgbaRegex,
"messageDetail": messageDetailString}}];
});
// Reset the spectrum value to the initial color
self.reset = function()
{
self.colorValue(self.initialColor);
};
// Run the converters once for the inital display
self.convertColorToOutputs(self.initialColor);
};
ko.applyBindings(new ViewModel());
});
//RequireJS configs (usually these come first in main.js, but they don't have to)
requirejs.config({
// Path mappings for the logical module names
paths: {
'knockout': '//static.oracle.com/cdn/jet/v4.1.0/3rdparty/knockout/knockout-3.4.0',
'jquery': '//static.oracle.com/cdn/jet/v4.1.0/3rdparty/jquery/jquery-3.1.1.min',
'jqueryui-amd': '//static.oracle.com/cdn/jet/v4.1.0/3rdparty/jquery/jqueryui-amd-1.12.0.min',
'ojs': '//static.oracle.com/cdn/jet/v4.1.0/default/js/min',
'ojL10n': '//static.oracle.com/cdn/jet/v4.1.0/default/js/ojL10n',
'ojtranslations': '//static.oracle.com/cdn/jet/v4.1.0/default/js/resources',
'text': '//static.oracle.com/cdn/jet/v4.1.0/3rdparty/require/text',
'promise': '//static.oracle.com/cdn/jet/v4.1.0/3rdparty/es6-promise/es6-promise.min',
'hammerjs': '//static.oracle.com/cdn/jet/v4.1.0/3rdparty/hammer/hammer-2.0.8.min',
'signals': '//static.oracle.com/cdn/jet/v4.1.0/3rdparty/js-signals/signals.min',
'ojdnd': '//static.oracle.com/cdn/jet/v4.1.0/3rdparty/dnd-polyfill/dnd-polyfill-1.0.0.min',
'css': '//static.oracle.com/cdn/jet/v4.1.0/3rdparty/require-css/css.min',
'customElements': '//static.oracle.com/cdn/jet/v4.1.0/3rdparty/webcomponents/custom-elements.min',
'proj4js': '//static.oracle.com/cdn/jet/v4.1.0/3rdparty/proj4js/dist/proj4'
},
// Shim configurations for modules that do not expose AMD
shim: {
'jquery': {
exports: ['jQuery', '$']
}
}
});
<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"
class="oj-form-control-group">
<div class="oj-flex">
<oj-label for="hslColor" class="oj-checkbox-label-nocomp">HSL: </oj-label>
<oj-input-text id="hslColor" value=[[hslColor]] readonly></oj-input-text>
</div>
<div class="oj-flex">
<oj-label for="hsvColor" class="oj-checkbox-label-nocomp">HSV: </oj-label>
<oj-input-text id="hsvColor" value=[[hsvColor]] readonly></oj-input-text>
</div>
<div class="oj-flex">
<oj-label for="hexColor" class="oj-checkbox-label-nocomp">HEX: </oj-label>
<oj-input-text id="hexColor" value=[[hexColor]] readonly></oj-input-text>
</div>
<div class="oj-flex">
<oj-label for="rgbColor" class="oj-checkbox-label-nocomp">RGB: </oj-label>
<oj-input-text id="rgbColor" value=[[rgbColor]] readonly></oj-input-text>
</div>
</div>
</div>
</div>
</div>
</div>
@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;
}