jQuery - handleCounter range setup with max value

Question

I am using jQuery handleCounter plugin with multiple inputs to adjust the container blocks.

I have 3 input fields with minimum and maximum number to be entered as 600 always. If I adjust any number, other fields should share the remaining / get reduced.

By default I have set the 200 for each field.

Currently, if I adjust any of these 3 inputs, other inputs are sharing the remaining value.

jsFiddle

What I am expecting here is:

In this case, maximum value is 600

What I need is:

If I enter value in first field, only second field's input value should get adjusted (until total value did not cross 600, if crosses it should use third filed's value)

If I enter value in second field, only third filed's input value should get adjusted (until total value did not cross 600, if crosses it should use first filed's value) In below scenario, 2nd input value changed from 100 to 180. So 3rd filed input value has taken remaining value which is 120 (300 + 180 = 480, reamining 120)

In the same way, If I adjust the value from bottom it should be reversed. Eg: Enter the value in 3rd input field, 2nd input field's value gets adjusted. 2nd input value enters, first input value should altered.

/* Plugin starts */
;(function () {
'use strict';
var maxVal = 600;
var inputLength = $('.rpHandleCounter input').length - 1
$.fn.handleCounter = function (options) {
  var $input,
      $btnMinus,
      $btnPlugs,
      minimum,
      maximize,
      writable,
      onChange,
      onMinimum,
      onMaximize;
  var $handleCounter = this
  $btnMinus = $handleCounter.find('.counter-minus')
  $input = $handleCounter.find('input')
  $btnPlugs = $handleCounter.find('.counter-plus')
  var defaultOpts = {
    writable: true,
    minimum: 1,
    maximize: null,
    onChange: function(){},
    onMinimum: function(){},
    onMaximize: function(){}
  }
  var settings = $.extend({}, defaultOpts, options)
  minimum = settings.minimum
  maximize = settings.maximize
  writable = settings.writable
  onChange = settings.onChange
  onMinimum = settings.onMinimum
  onMaximize = settings.onMaximize
  if (!$.isNumeric(minimum)) {
    minimum = defaultOpts.minimum
  }
  if (!$.isNumeric(maximize)) {
    maximize = defaultOpts.maximize
  }
  var inputVal = $input.val()
  if (isNaN(parseInt(inputVal))) {
    inputVal = $input.val(0).val()
  }
  if (!writable) {
    $input.prop('disabled', true)
  }

  changeVal(inputVal)
  $input.val(inputVal)
  $btnMinus.click(function () {
    var num = parseInt($input.val())
    if (num > minimum) {
      $input.val(num - 1)
      changeVal(num - 1)
      if($('.div-split').length > 0) {
        splitDiv($handleCounter,num-1)
      }
    }
  })
  $btnPlugs.click(function () {
    var num = parseInt($input.val())
    if (maximize==null||num < maximize) {
      $input.val(num + 1)
      changeVal(num + 1)
      if($('.div-split').length > 0) {
        splitDiv($handleCounter,num+1)
      }
    }
  })
  var keyUpTime
  $input.keyup(function () {
    clearTimeout(keyUpTime)
    keyUpTime = setTimeout(function() {
      var num = $input.val()
      if (num == ''){
        num = minimum
        $input.val(minimum)
      }
      var reg = new RegExp("^[\d]*$")
      if (isNaN(parseInt(num)) || !reg.test(num)) {
        $input.val($input.data('num'))
        changeVal($input.data('num'))
      } else if (num < minimum) {
        $input.val(minimum)
        changeVal(minimum)
      }else if (maximize!=null&&num > maximize) {
        $input.val(maximize)
        changeVal(maximize)
      } else {
        changeVal(num)
      }
      if($('.div-split').length > 0) {
        splitDiv($handleCounter,num)
      }

    },300)
  })
  $input.focus(function () {
    var num = $input.val()
    if (num == 0) $input.select()
  })

  function changeVal(num) {
    $input.data('num', num)
    $btnMinus.prop('disabled', false)
    $btnPlugs.prop('disabled', false)
    if (num <= minimum) {
      $btnMinus.prop('disabled', true)
      onMinimum.call(this, num)
    } else if (maximize!=null&&num >= maximize) {
      $btnPlugs.prop('disabled', true)
      onMaximize.call(this, num)
    }
    onChange.call(this, num)
  }

  function splitDiv($handleCounter,num) {
    if(maxVal > num){
      var remainigVal = Math.floor((maxVal - num) / inputLength)
      jQuery('td.cls-com').attr('width', remainigVal);
      jQuery('td.'+$handleCounter[0].attributes[2].value).attr('width', num);
      $('.rpHandleCounter input').val(remainigVal)
      $($handleCounter.selector+' input').val(num) 
      var cnt = 0
      $('.rpHandleCounter input').each(function(){
        cnt = cnt + Number($(this).val())
      })
      var remaingCnt = Number(maxVal-cnt);
      if($($handleCounter.selector).next()[0].attributes[0].value !=="tableData") {
        $($handleCounter.selector).next().find('input').val(remainigVal+remaingCnt)
        jQuery('td.'+$($handleCounter.selector).next()[0].attributes[2].value).attr('width', remainigVal+remaingCnt);
      } else {
        $($handleCounter.selector).prev().find('input').val(remainigVal+remaingCnt)
        jQuery('td.'+$($handleCounter.selector).prev()[0].attributes[2].value).attr('width', remainigVal+remaingCnt);
      }
    } else {
      jQuery('td.cls-com').attr('width', 0);
      jQuery('td.'+$handleCounter[0].attributes[2].value).attr('width', num);
      $('.rpHandleCounter input').val(0)
      $($handleCounter.selector+' input').val(num) 
    }

  }
  return $handleCounter
};
})(jQuery);
/* Plugin ends */
//var maxVal = 600;
//var inputLength = $('.rpHandleCounter input').length - 1
$('.rpHandleCounter').each(function(){
var tdCls = $(this).attr('data-class');
var id = $(this).attr('id');
$('#'+id).handleCounter({
  minimum: 0,
  maximize: 600,
  onChange:function(num){
  },
  onMinimum:function(num){
    console.log('onMinimum 1');
  },
  onMaximize:function(num){
    console.log('onMaximize 1');
  }
});

})

.handle-counter { overflow: hidden;margin-top:10px; }

.handle-counter .counter-minus,  .handle-counter .counter-plus,  .handle-counter input {
float: left;
text-align: center;
}

.handle-counter .counter-minus,  .handle-counter .counter-plus { text-align: center; }

.handle-counter input {
width: 50px;
border-width: 1px;
border-left: none;
border-right: none;
height:26px;
border:1px solid #ccc;
}

.btn {
padding: 6px 12px;
border: 1px solid transparent;
color: #fff;
cursor:pointer;
}

.btn:disabled, .btn:disabled:hover {
background-color: darkgrey;
cursor: not-allowed;
}

.btn-primary { background-color: #009dda; }

.btn-primary:hover, .btn-primary:focus { background-color: #0486b9; }

body{font-family:Verdana, Arial;font-size:13px;}
.tableData{margin-top:20px;}
.tableData table, .tableData td{border:1px solid #000;border-collapse:collapse;}
.tableData td{padding:0px;}

jQuery - handleCounter range setup with max value

What I need is:

0 Answers