Как использовать JQuery Iris Color Picker для нескольких входов с одной функцией - PullRequest
Новая
       29

Как использовать JQuery Iris Color Picker для нескольких входов с одной функцией

0 голосов
/ 30 мая 2019

Я пытаюсь создать функцию jQuery, которая может нацеливать средство выбора цвета радужной оболочки на несколько входов, используя класс.

Мне нужно, чтобы каждый входной селектор радужной оболочки работал независимо.

Я действительно удивлен, что $.each(function() не работает так, как вы ожидаете с Iris. Я не могу обойти это.

См. Скрипку здесь https://jsfiddle.net/joshmoto/Lmez4oft/

Буду признателен за любые мысли о том, как заставить диафрагму работать независимо, используя в качестве цели мой класс .iris-wrapper.


Смотрите мой полный код ниже ... 

// each loop the iris wrapper class elems
$('.iris-wrapper','#form').each(function() {

  // set up current object vars
  $input 			= $('INPUT', this);
  $inputGroup 		= $('.input-group', this);
  $inputIndicator   = $('.input-group-text', this);

  // set our input color indicator to default color
  $inputIndicator.css('background-color', $input.val());

  // init iris
  $input.iris({
    // on iris change
    change: function(event, ui) {
      // update input value on change
      $input.attr('value', ui.color.toString());
      // load the current value
      $inputIndicator.css('background-color', ui.color.toString());
    }
  });

  // move iris color picker after the input group
  $('.iris-picker', this).insertAfter($inputGroup);

  // input blur function
  $input.blur(function() {
    setTimeout(function() {
      if (!$(document.activeElement).closest(".iris-picker").length)
        $input.iris('hide');
      else
        $input.focus();
    }, 0);
  });

  // when input is focused
  $input.focus(function() {
    // input iris show
    $input.iris('show');
  });

});
.input-group-prepend .input-group-text::before  {
  width: 18px;
  content: "";
  display: block;
  height: 1px;
}

.iris-picker {
  position: absolute;
  margin-top: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://dev.joshmoto.wtf/iris/dist/iris.min.js"></script>

<!-- Gravity forms html mark up below -->

<div class="container pt-3">
  <form id="form">
    <div class="form-row">
      <div class="form-group col-6 iris-wrapper">
        <div class="input-group">
          <div class="input-group-prepend">
            <span class="input-group-text" style="background-color:#00e4bc"></span>
          </div>
          <input type="text" id="color_picker" class="form-control form-control-lg" value="#00e4bc" />
        </div>
      </div>
      <div class="form-group col-6 iris-wrapper">
        <div class="input-group">
          <div class="input-group-prepend">
            <span class="input-group-text" style="background-color:#0084ff"></span>
          </div>
          <input type="text" id="color_picker" class="form-control form-control-lg" value="#0084ff" />
        </div>
      </div>
    </div>
  </form>
</div>

1 Ответ

0 голосов
/ 31 мая 2019

Я только что заметил ошибку моих путей.Я не устанавливал свои переменные, используя var. 

// loop the iris wrappers
$('.iris-wrapper','#form').each(function() {

  // set up current object vars
  var $input                    = $('INPUT', this);
  var $inputGroup       = $('.input-group', this);
  var $inputIndicator = $('.input-group-text', this);

  ...

});

Смотрите рабочую скрипку здесь https://jsfiddle.net/joshmoto/ucxf7gt8/1/

Рабочий код ниже .. 

// each loop the iris wrapper class elems
$('.iris-wrapper','#form').each(function() {

  // set up current object vars
  var $input 			= $('INPUT', this);
  var $inputGroup 		= $('.input-group', this);
  var $inputIndicator   = $('.input-group-text', this);

  // set our input color indicator to default color
  $inputIndicator.css('background-color', $input.val());

  // init iris
  $input.iris({
    // on iris change
    change: function(event, ui) {
      // update input value on change
      $input.attr('value', ui.color.toString());
      // load the current value
      $inputIndicator.css('background-color', ui.color.toString());
    }
  });

  // move iris color picker after the input group
  $('.iris-picker', this).insertAfter($inputGroup);

  // input blur function
  $input.blur(function() {
    setTimeout(function() {
      if (!$(document.activeElement).closest(".iris-picker").length)
        $input.iris('hide');
      else
        $input.focus();
    }, 0);
  });

  // when input is focused
  $input.focus(function() {
    // input iris show
    $input.iris('show');
  });

});
.input-group-prepend .input-group-text::before  {
  width: 18px;
  content: "";
  display: block;
  height: 1px;
}

.iris-picker {
  position: absolute;
  margin-top: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://dev.joshmoto.wtf/iris/dist/iris.min.js"></script>

<!-- Gravity forms html mark up below -->

<div class="container pt-3">
  <form id="form">
    <div class="form-row">
      <div class="form-group col-6 iris-wrapper">
        <div class="input-group">
          <div class="input-group-prepend">
            <span class="input-group-text" style="background-color:#00e4bc"></span>
          </div>
          <input type="text" id="color_picker" class="form-control form-control-lg" value="#00e4bc" />
        </div>
      </div>
      <div class="form-group col-6 iris-wrapper">
        <div class="input-group">
          <div class="input-group-prepend">
            <span class="input-group-text" style="background-color:#0084ff"></span>
          </div>
          <input type="text" id="color_picker" class="form-control form-control-lg" value="#0084ff" />
        </div>
      </div>
    </div>
  </form>
</div>
...