• 使用方法

InputSetter

InputSetter は、リストアイテムがクリックされたときに、droplabの範囲外のDOMを更新できるようにするプラグインです。

使用方法

DropLab.prototype.init またはDropLab.prototype.addHook 呼び出しの plugins 配列にInputSetter オブジェクトを追加します。

• InputSetter には設定値が必要です。input とvalueAttribute。
• input には操作したい DOM 要素を指定します。
• valueAttribute には、input 要素を更新する値を取得するために使用する、リスト項目の属性名を文字列で指定します。

また、InputSetter の設定をオブジェクトの配列に設定することで、複数の要素を更新することができます。

<input id="input" value="">
<div id="div" data-selected-id=""></div>

<input href="#" id="trigger" data-dropdown-trigger="#list">
<ul id="list" data-dropdown data-dynamic>
  <li><a href="#" data-id="{{id}}">{{text}}</a></li>
<ul>

const droplab = new DropLab();

const trigger = document.getElementById('trigger');
const list = document.getElementById('list');

const input = document.getElementById('input');
const div = document.getElementById('div');

droplab.init(trigger, list, [InputSetter], {
  InputSetter: [{
    input: input,
    valueAttribute: 'data-id',
  } {
    input: div,
    valueAttribute: 'data-id',
    inputAttribute: 'data-selected-id',
  }],
});

droplab.addData('trigger', [{
  id: 0,
  text: 'Jacob',
}, {
  id: 1,
  text: 'Jeff',
}]);

上記で、2番目のリスト項目がクリックされた場合、#input 要素のvalue が1に更新され、#div 要素のdata-selected-id も1に更新されます。

オプションとして、inputAttribute に、更新したいinput 要素の属性名を文字列で指定することができます。inputAttributeを指定しない場合、InputSetter は、INPUT 要素であればinput 要素のvalue を、INPUT 要素でなければinput 要素のtextContent を更新します。