Source: src/js/views/filters/DateFilterView.js

/*global define */
define(['jquery', 'underscore', 'backbone',
        'models/filters/DateFilter',
        'views/filters/FilterView',
        'text!templates/filters/dateFilter.html'],
  function($, _, Backbone, DateFilter, FilterView, Template) {
  'use strict';

  /**
  * @class DateFilterView
  * @classdesc Render a view of a single DateFilter model
  * @classcategory Views/Filters
  * @extends FilterView
  */
  var DateFilterView = FilterView.extend(
    /** @lends DateFilterView.prototype */{

    /**
    * A DateFilter model to be rendered in this view
    * @type {DateFilter} */
    model: null,

    className: "filter date",

    template: _.template(Template),

    events: {
      "change input" : "updateYearRange"
    },

    initialize: function (options) {

      if( !options || typeof options != "object" ){
        var options = {};
      }

      this.model = options.model || new DateFilter();

    },

    render: function () {
      
      var templateVars = this.model.toJSON();
      
      if(!templateVars.min && templateVars.min !== 0){
        templateVars.min = this.model.get("rangeMin");
      }
      if(!templateVars.max && templateVars.max !== 0){
        templateVars.max = this.model.get("rangeMax");
      }
      
      if(templateVars.min < this.model.get("rangeMin")){
        templateVars.min = this.model.get("rangeMin")
      }
      
      if(templateVars.max > this.model.get("rangeMax")){
        templateVars.max = this.model.get("rangeMax")
      }

      this.$el.html( this.template( templateVars ) );

      var view = this;

      //jQueryUI slider
      this.$('.slider').slider({
          range: true,
          disabled: false,
          min: this.model.get("rangeMin"),  //sets the minimum on the UI slider on initialization
          max: this.model.get("rangeMax"),   //sets the maximum on the UI slider on initialization
          values: [ this.model.get("min"), this.model.get("max") ], //where the left and right slider handles are
          stop: function( event, ui ) {

            // When the slider is changed, update the input values
            view.$('input.min').val(ui.values[0]);
            view.$('input.max').val(ui.values[1]);

            //Also update the DateFilter model
            view.model.set('min', ui.values[0]);
            view.model.set('max', ui.values[1]);

          }
        });

        //When the rangeReset event is triggered, reset the slider
        this.listenTo(view.model, "rangeReset", this.resetSlider);

    },

    /**
    * Gets the min and max years from the number inputs and updates the DateFilter
    *  model and the year UI slider.
    * @param {Event} e - The event that triggered this callback function
    */
    updateYearRange : function(e) {

      //Get the min and max values from the number inputs
      var minVal = this.$('input.min').val();
      var maxVal = this.$('input.max').val();

      //Update the DateFilter model to match what is in the text inputs
      this.model.set('min', minVal);
      this.model.set('max', maxVal);

      //Update the UI slider to match the new min and max
      // Setter
      this.$( ".slider" ).slider( "option", "values", [ minVal, maxVal ] );

      //Send this event to Google Analytics
      if(MetacatUI.appModel.get("googleAnalyticsKey") && (typeof ga !== "undefined")){
        ga("send", "event", "portal search", "filter, Data Year", minVal + " to " + maxVal);
      }

    },

    /**
    * Resets the slider to the default values
    */
    resetSlider: function(){

      //Set the min and max values on the slider widget
      this.$( ".slider" ).slider( "option", "values", [ this.model.get("rangeMin"), this.model.get("rangeMax") ] );

      //Reset the min and max values
      this.$('input.min').val( this.model.get("rangeMin") );
      this.$('input.max').val( this.model.get("rangeMax") );

    }

  });
  return DateFilterView;
});