Source: src/main/javascript/oracle/oj/ojgauge/ojratinggauge.js

/**
 * @ojcomponent oj.ojRatingGauge
 * @augments oj.dvtBaseGauge
 * @since 0.7
 * 
 * @classdesc
 * <h3 id="ratingGaugeOverview-section">
 *   JET Rating Gauge Component
 *   <a class="bookmarkable-link" title="Bookmarkable Link" href="#ratingGaugeOverview-section"></a>
 * </h3>
 * 
 * <p>Rating gauge component for JET.  Rating gauges are typically used to display or accept user feedback on a product
 * or service.</p>
 * 
 * {@ojinclude "name":"warning"}
 * 
 * <pre class="prettyprint">
 * <code>
 * <div data-bind="ojComponent: {component: 'ojRatingGauge', value: 4}"/>
 * </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"}
 *
 * {@ojinclude "name":"rtl"}
 * 
 * @desc Creates a JET Rating Gauge.
 * @example <caption>Initialize the Rating Gauge with no options specified:</caption>
 * $(".selector").ojRatingGauge();
 * 
 * @example <caption>Initialize the Rating Gauge with some options:</caption>
 * $(".selector").ojRatingGauge({value: 4});
 * 
 * @example <caption>Initialize the Rating Gauge via the JET <code class="prettyprint">ojComponent</code> binding:</caption>
 * <div data-bind="ojComponent: {component: 'ojRatingGauge'}">
 */
oj.__registerWidget('oj.ojRatingGauge', $['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").ojRatingGauge({
     *   "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.ojRatingGauge
     * @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").ojRatingGauge({
     *   '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.ojRatingGauge
     * @instance
     */
    optionChange: null
  },
  
  //** @inheritdoc */
  _CreateDvtComponent : function(context, callback, callbackObj) {
    return dvt.DvtRatingGauge.newInstance(context, callback, callbackObj);
  },
  
  //** @inheritdoc */
  _ConvertSubIdToLocator : function(subId) {
    var locator = {};
    
    if(subId == 'tooltip') {
      locator['subId'] = 'oj-ratinggauge-tooltip';
    }
    return locator;
  },
  
  //** @inheritdoc */
  _GetComponentStyleClasses : function() {
    var styleClasses = this._super();
    styleClasses.push('oj-ratinggauge');
    //TODO HZHANG Add style classes for rating gauge selected/hover/unselected/changed
    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');
  
    // Call the super to render
    this._super();
  },
  
  //** @inheritdoc */
  _UserOptionChange : function(key, value) {
    this._superApply(arguments);
    
    // If this was a value change, also update the changed value
    if(key == 'value')
      this._UserOptionChange('changed', true);
  }
});