counter bootstrap

counter bootstrap

by ian_smithz

HTML

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div id="content" class="col-md-4">

    <div class="js-Visit">
      <h1>Progress <span class="label label-default js-Visit-count">0</span></h1>
      <div class="progress">
          <div class="progress-bar js-Visit-progressBar" role="progressbar" style="width: 0"></div>
      </div>
      <button class="btn js-Visit-add">Add</button>
      <button class="btn js-Visit-remove">Remove</button>      
    </div>
    
</div>

JavaScript

(function($, window, document, undefined) {

  var defaults = {
    min: 0, 
    max: 10, 
    count: 0    
  };

  function Visit(element, options) {
    this.element = element;            
    this.options = $.extend( {}, defaults, options) ;      
    this.view = {
      count: this.element.find('.js-Visit-count'), 
      progressBar: this.element.find('.js-Visit-progressBar')
    };
    this.init();
  };

  Visit.prototype = {

    init: function() {      
      this.element.on('click', '.js-Visit-add', $.proxy(this.add, this));
      this.element.on('click', '.js-Visit-remove', $.proxy(this.remove, this));      
    }, 

    setOption: function(key, value) {
      if (key === 'count') {
        value = Math.max(this.options.min, Math.min(this.options.max, value));
      }
      this.options[key] = value;
      this.render();
    }, 

    add: function() {
      this.setOption('count', this.options.count + 1);
    }, 

    remove: function() {
      this.setOption('count', this.options.count - 1);      
    }, 

    render: function() {
      this.view.count.text(this.options.count);
      this.view.progressBar.css('width', this.options.count / this.options.max * 100 + '%');        
      this.states = [
        {
          test: this.options.count <= 4, 
          className: 'progress-bar-success'
        }, 
        {
          test: this.options.count > 4 && this.options.count < 8, 
          className: 'progress-bar-warning'
        }, 
        {
          test: this.options.count >= 8, 
          className: 'progress-bar-danger'
        }
      ];      

      for (var i = 0; i < this.states.length; i++) {
        var state = this.states[i];          
        this.view.progressBar.toggleClass(state.className, state.test);
      } 
    }    
  };
    

	$(function() {    
  	$('.js-Visit').each(function() {
    	new Visit($(this));    
    });
  });
 
})(jQuery, window, document);