star_grade

star_grade.js

/**
 * 司机星级
 *
 * author: Jude.Zhu
 * date: 2016-01-23
 *
 * require icomoon font-family
 *
 * usage:
 *
 * var starGrade = new StarGrade({
 *  inputToSetValue: String, // optional, the same params for querySelector
 *  container: String or DOMElement, //required, container is the same param for querySelector if it's String
 *  cls: String, //optional, class for every star item
 *  maxGrade: Integer, // optional
 *  grade: Integer, // optional, default active star grade
 *  editable: boolean, // optional
 *  enable: boolean, // optional
 * })
 *
 * methods:
 *
 * starGrade.setGrade().enable().disable().enableEdit().disableEdit()
 *
 * getGrade()
 *
 * getStatus()
 */

;(function(global,undefined){
  /**
   * polyfill for Object.assign
   *
   */
  if (typeof Object.assign != 'function') {
    (function () {
      Object.assign = function (target) {
        'use strict';
        if (target === undefined || target === null) {
          throw new TypeError('Cannot convert undefined or null to object');
        }

        var output = Object(target);
        for (var index = 1; index < arguments.length; index++) {
          var source = arguments[index];
          if (source !== undefined && source !== null) {
            for (var nextKey in source) {
              if (source.hasOwnProperty(nextKey)) {
                output[nextKey] = source[nextKey];
              }
            }
          }
        }
        return output;
      };
    })();
  }

  if (!Function.prototype.bind) {
    Function.prototype.bind = function (oThis) {
      if (typeof this !== "function") {
        // closest thing possible to the ECMAScript 5
        // internal IsCallable function
        throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");
      }

      var aArgs = Array.prototype.slice.call(arguments, 1), 
          fToBind = this, 
          fNOP = function () {},
          fBound = function () {
            return fToBind.apply(this instanceof fNOP
                                   ? this
                                   : oThis || this,
                                 aArgs.concat(Array.prototype.slice.call(arguments)));
          };

      fNOP.prototype = this.prototype;
      fBound.prototype = new fNOP();

      return fBound;
    };
  }

  function StarGrade(options){
    if(!(this instanceof StarGrade)){
      return new StarGrade(options)
    }
    this.options = Object.assign({},this.defaultOpt,options)
    if (!this.initialize(this.options)) {
      return null
    }
    return this
  }


  StarGrade.prototype = {
    defaultOpt: {
      inputToSetValue: '',
      maxGrade: 5,
      grade: 1,
      cls: '',
      enable: true,
      editable: false,
      afterSetGrade: function(){},
    },
    initialize: function(options){
      this.input = (options.inputToSetValue && document.querySelector(options.inputToSetValue)) || document.createElement('input')
      this.input.value = options.grade

      this._wrapSetGrade = this.setGrade.bind(this, this.options.afterSetGrade)

      this.container = (typeof options.container == 'string')? document.querySelector(options.container) : options.container
      if(!this.container){
        console.error("can not get container")
        return null
      }

      this._generateStars(options)
      return options.enable ? this.enable() : this.disable()
    },

    setGrade: function(callback, e){
      var el = e.target
      var grade
      if(el.classList.contains("icon-star-full")){
        grade = el.getAttribute('index')
        this.input.value = grade
        this._generateStars({
          maxGrade: this.options.maxGrade,
          grade: grade,
          cls: this.options.cls,
        })
      }
      callback && callback.call(this)
      return this
    },

    getGrade: function(){
      return this.input.value
    },

    getStatus: function(){
      return this.status
    },

    enable: function(){
      this.input.removeAttribute('disabled')
      this.container.classList.remove('disable_star')
      this.options.editable && this._addEventListener()
      this.status = 'enabled'
      return this
    },

    disable: function(){
      this.input.setAttribute('disabled',true)
      this.container.classList.add('disable_star')
      this._removeEventListener()
      this.status = 'disabled'
      return this
    },

    enableEdit: function(enable){
      this.options.enableEdit = enable === false
      return this
    },

    _generateStars: function(options){
      var maxGrade = options.maxGrade
      var grade = options.grade
      var cls = options.cls
      var i = 1
      var html = ''
      while (i <= maxGrade) {
        html += '<span class="icon-star-full ' + (cls ? cls : '') + (i <= grade ? ' active' : '') +'" index="' + i + '"></span>'
        i++
      }
      this.container.innerHTML = html
      return this
    },

    _addEventListener: function(){
      this.container.addEventListener('click', this._wrapSetGrade)
    },

    _removeEventListener: function(){
      this.container.removeEventListener('click', this._wrapSetGrade)
    },


  }

  global.StarGrade = StarGrade

})(window, undefined);