/**
* @ojcomponent oj.ojDialGauge
* @augments oj.dvtBaseGauge
* @since 0.7
*
* @classdesc
* <h3 id="dialGaugeOverview-section">
* JET Dial Gauge Component
* <a class="bookmarkable-link" title="Bookmarkable Link" href="#dialGaugeOverview-section"></a>
* </h3>
*
* <p>Dial gauge component for JET. Dial gauges are used to display a metric value in relation to the minimum and
* maximum possible values for that metric.</p>
*
* {@ojinclude "name":"warning"}
*
* <pre class="prettyprint">
* <code>
* <div data-bind="ojComponent: {
* component: 'ojDialGauge',
* value: 63, min: 0, max: 100,
* metricLabel: {rendered: 'on'}
* }"/>
* </code>
* </pre>
*
* {@ojinclude "name":"a11yKeyboard"}
*
* <h3 id="touch-section">
* Touch End User Information
* <a class="bookmarkable-link" title="Bookmarkable Link" href="#touch-section"></a>
* </h3>
*
* {@ojinclude "name":"touchDoc"}
*
* <h3 id="keyboard-section">
* Keyboard End User Information
* <a class="bookmarkable-link" title="Bookmarkable Link" href="#keyboard-section"></a>
* </h3>
*
* {@ojinclude "name":"keyboardDoc"}
*
* <h3 id="rtl-section">
* Reading direction
* <a class="bookmarkable-link" title="Bookmarkable Link" href="#rtl-section"></a>
* </h3>
*
* {@ojinclude "name":"rtl"}
*
* @desc Creates a JET Dial Gauge.
* @example <caption>Initialize the Dial Gauge with no options specified:</caption>
* $(".selector").ojDialGauge();
*
* @example <caption>Initialize the Dial Gauge with some options:</caption>
* $(".selector").ojDialGauge({value: 63, min: 0, max: 100, metricLabel: {rendered: 'on'}});
*
* @example <caption>Initialize the Dial Gauge via the JET <code class="prettyprint">ojComponent</code> binding:</caption>
* <div data-bind="ojComponent: {component: 'ojDialGauge'}">
*/
oj.__registerWidget('oj.ojDialGauge', $['oj']['dvtBaseGauge'],
{
widgetEventPrefix : "oj",
options: {
/**
* Triggered during a value change gesture on mouse or touch move.
*
* @property {Object} ui event payload
* @property {number} ui.value the value of the gauge
*
* @example <caption>Initialize the component with the <code class="prettyprint">input</code> callback specified:</caption>
* $(".selector").ojDialGauge({
* "input": function(event, ui){}
* });
*
* @example <caption>Bind an event listener to the <code class="prettyprint">ojinput</code> event:</caption>
* $(".selector").on("ojinput", function(event, ui){});
*
* @expose
* @event
* @memberof oj.ojDialGauge
* @instance
*/
input : null,
/**
* Fired whenever a supported component option changes, whether due to user interaction or programmatic
* intervention. If the new value is the same as the previous value, no event will be fired.
*
* @property {Object} data event payload
* @property {string} data.option the name of the option that changed, i.e. "value"
* @property {Object} data.previousValue an Object holding the previous value of the option
* @property {Object} data.value an Object holding the current value of the option
* @property {Object} ui.optionMetadata information about the option that is changing
* @property {string} ui.optionMetadata.writeback <code class="prettyprint">"shouldWrite"</code> or
* <code class="prettyprint">"shouldNotWrite"</code>. For use by the JET writeback mechanism.
*
* @example <caption>Initialize the component with the <code class="prettyprint">optionChange</code> callback:</caption>
* $(".selector").ojDialGauge({
* 'optionChange': function (event, data) {}
* });
*
* @example <caption>Bind an event listener to the <code class="prettyprint">ojoptionchange</code> event:</caption>
* $(".selector").on({
* 'ojoptionchange': function (event, data) {
* window.console.log("option changing is: " + data['option']);
* };
* });
*
* @expose
* @event
* @memberof oj.ojDialGauge
* @instance
*/
optionChange: null
},
//** @inheritdoc */
_CreateDvtComponent : function(context, callback, callbackObj) {
return dvt.DvtDialGauge.newInstance(context, callback, callbackObj);
},
//** @inheritdoc */
_ConvertSubIdToLocator : function(subId) {
var locator = {};
if(subId == 'tooltip') {
locator['subId'] = 'oj-dialgauge-tooltip';
}
return locator;
},
//** @inheritdoc */
_GetComponentStyleClasses : function() {
var styleClasses = this._super();
styleClasses.push('oj-dialgauge');
return styleClasses;
},
//** @inheritdoc */
_Render : function() {
// Display the title of the surrounding div as the tooltip. Remove title from div to avoid browser default tooltip.
if(this.element.attr('title'))
{
this.options['shortDesc'] = this.element.attr('title');
this.element.data( this.element,'title', this.element.attr('title'));
this.element.removeAttr('title');
}
else if (this.element.data('title'))
this.options['shortDesc'] = this.element.data('title');
// Set images for dial gauge
this._setImages();
// Call the super to render
this._super();
},
/**
* Applies image URLs to the options object passed into the dial gauge.
* @private
*/
_setImages: function() {
// Pass the correct background image information set the default circleAlta and needleAlta.
var backgroundImages = this.options['background'];
var backgroundInfo = [{src: oj.Config.getResourceUrl('resources/internal-deps/dvt/gauge/alta-circle-200x200.png'), width: 200, height: 200},
{src: oj.Config.getResourceUrl('resources/internal-deps/dvt/gauge/alta-circle-400x400.png'), width: 400, height: 400}];;
var indicatorImages = this.options['indicator'];
var indicatorInfo = [{src: oj.Config.getResourceUrl('resources/internal-deps/dvt/gauge/alta-needle-1600x1600.png'), width: 374, height: 575}];;
if(typeof backgroundImages === 'string') {
if(backgroundImages === "rectangleAlta") {
backgroundInfo = [{src: oj.Config.getResourceUrl('resources/internal-deps/dvt/gauge/alta-rectangle-200x200.png'), width: 200, height: 154},
{src: oj.Config.getResourceUrl('resources/internal-deps/dvt/gauge/alta-rectangle-400x400.png'), width: 400, height: 309}];
}
else if(backgroundImages === "domeAlta") {
backgroundInfo = [{src: oj.Config.getResourceUrl('resources/internal-deps/dvt/gauge/alta-dome-200x200.png') , width: 200, height: 154},
{src: oj.Config.getResourceUrl('resources/internal-deps/dvt/gauge/alta-dome-400x400.png') , width: 400, height: 309}];
}
else if(backgroundImages === "circleAntique") {
backgroundInfo = [{src: oj.Config.getResourceUrl('resources/internal-deps/dvt/gauge/antique-circle-200x200.png'), width: 200, height: 200},
{src: oj.Config.getResourceUrl('resources/internal-deps/dvt/gauge/antique-circle-400x400.png'), width: 400, height: 400}];
}
else if(backgroundImages === "rectangleAntique") {
backgroundInfo = [{src: oj.Config.getResourceUrl('resources/internal-deps/dvt/gauge/antique-rectangle-200x200.png'), width: 200, height: 168},
{src: oj.Config.getResourceUrl('resources/internal-deps/dvt/gauge/antique-rectangle-400x400.png'), width: 400, height: 335}];
}
else if(backgroundImages === "domeAntique") {
backgroundInfo = [{src: oj.Config.getResourceUrl('resources/internal-deps/dvt/gauge/antique-dome-200x200.png'), width: 200, height: 176},
{src: oj.Config.getResourceUrl('resources/internal-deps/dvt/gauge/antique-dome-400x400.png'), width: 400, height: 352}];
}
else if(backgroundImages === "circleLight") {
backgroundInfo = [{src: oj.Config.getResourceUrl('resources/internal-deps/dvt/gauge/light-circle-200x200.png'), width: 200, height: 200},
{src: oj.Config.getResourceUrl('resources/internal-deps/dvt/gauge/light-circle-400x400.png'), width: 400, height: 400}];
}
else if(backgroundImages === "rectangleLight") {
backgroundInfo = [{src: oj.Config.getResourceUrl('resources/internal-deps/dvt/gauge/light-rectangle-200x200.png'), width: 200, height: 154},
{src: oj.Config.getResourceUrl('resources/internal-deps/dvt/gauge/light-rectangle-400x400.png'), width: 400, height: 307}];
}
else if(backgroundImages === "domeLight") {
backgroundInfo = [{src: oj.Config.getResourceUrl('resources/internal-deps/dvt/gauge/light-dome-200x200.png'), width: 200, height: 138},
{src: oj.Config.getResourceUrl('resources/internal-deps/dvt/gauge/light-dome-400x400.png'), width: 400, height: 276}];
}
else if(backgroundImages === "circleDark") {
backgroundInfo = [{src: oj.Config.getResourceUrl('resources/internal-deps/dvt/gauge/dark-circle-200x200.png'), width: 200, height: 200},
{src: oj.Config.getResourceUrl('resources/internal-deps/dvt/gauge/dark-circle-400x400.png'), width: 400, height: 400}];
}
else if(backgroundImages === "rectangleDark") {
backgroundInfo = [{src: oj.Config.getResourceUrl('resources/internal-deps/dvt/gauge/dark-rectangle-200x200.png'), width: 200, height: 154},
{src: oj.Config.getResourceUrl('resources/internal-deps/dvt/gauge/dark-rectangle-400x400.png'), width: 400, height: 307}];
}
else if(backgroundImages === "domeDark") {
backgroundInfo = [{src: oj.Config.getResourceUrl('resources/internal-deps/dvt/gauge/dark-dome-200x200.png'), width: 200, height: 138},
{src: oj.Config.getResourceUrl('resources/internal-deps/dvt/gauge/dark-dome-400x400.png'), width: 400, height: 276}];
}
this.options['_backgroundImages'] = backgroundInfo;
}
if(typeof indicatorImages === 'string') {
if(indicatorImages === "needleAntique") {
indicatorInfo = [{src: oj.Config.getResourceUrl('resources/internal-deps/dvt/gauge/antique-needle-1600x1600.png'), width: 81, height: 734}];
}
else if(indicatorImages === "needleDark") {
indicatorInfo = [{src: oj.Config.getResourceUrl('resources/internal-deps/dvt/gauge/dark-needle-1600x1600.png'), width: 454, height: 652}];
}
else if(indicatorImages === "needleLight") {
indicatorInfo = [{src: oj.Config.getResourceUrl('resources/internal-deps/dvt/gauge/light-needle-1600x1600.png'), width: 454, height: 652}];
}
this.options['_indicatorImages'] = indicatorInfo;
}
},
/**
* Returns the gauge's metric label.
* @return {Object} The metric label object
* @expose
* @instance
* @memberof oj.ojDialGauge
*/
getMetricLabel: function() {
var auto = this._component.getAutomation();
return auto.getMetricLabel();
}
});
/**
* <p>This component should be bound to an HTML div element, and the SVG DOM that it generates should be treated as a
* black box, as it is subject to change. This component should not be extended.</p>
*
* @ojfragment warning
* @memberof oj.dvtBaseComponent
*/
/**
* <h3 id="a11y-section">
* Accessibility
* <a class="bookmarkable-link" title="Bookmarkable Link" href="#a11y-section"></a>
* </h3>
*
* <p>The application is responsible for populating the shortDesc value in the
* component options object with meaningful descriptors when the component does
* not provide a default descriptor.</p>
*
* @ojfragment a11y
* @memberof oj.dvtBaseComponent
*/
/**
* <h3 id="a11y-section">
* Accessibility
* <a class="bookmarkable-link" title="Bookmarkable Link" href="#a11y-section"></a>
* </h3>
*
* <p>The application is responsible for populating the shortDesc value in the
* component options object with meaningful descriptors when the component does
* not provide a default descriptor. Since component terminology for keyboard
* and touch shortcuts can conflict with those of the application, it is the
* application's responsibility to provide these shortcuts, possibly via a help
* popup.</p>
*
* @ojfragment a11yKeyboard
* @memberof oj.dvtBaseComponent
*/
/**
* <h3 id="rtl-section">
* Reading direction
* <a class="bookmarkable-link" title="Bookmarkable Link" href="#rtl-section"></a>
* </h3>
*
* <p>
* As with any JET component, in the unusual case that the directionality (LTR or RTL) changes post-init, the
* component must be <code class="prettyprint">refresh()</code>ed.
* </p>
*
* @ojfragment rtl
* @memberof oj.dvtBaseComponent
*/
Source: src/main/javascript/oracle/oj/ojgauge/ojdialgauge.js
Oracle® JavaScript Extension Toolkit (JET)
1.1.2
E65298-01