javascript - 如何识别 Vanilla Picker 的主要全局对象？

Question

Vanilla Picker是一个绝对出色的颜色选择器( example one ， example two )。然而documentation有点欠缺。我知道如何初始化，但我不知道如何识别任何全局对象(除了 Picker)，所以我不知道如何访问 show()，hide() 和/或 movePopup(options, open) 方法。

我在下面提出的代码至少可以防止每个元素弹出一个窗口之外的其他弹出窗口。然而，简单地使用 movePopup() 方法会更有意义(并且浪费更少的内存)，尽管我再次不知道要引用哪个父对象。如果我 console.log(Picker); 并查看 Waterfox 和 Chrome 的检查器工具中的事件，我会有点迷失。我还必须首先单击两次才能显示弹出窗口。

如何识别全局/主要对象，然后我可以使用 movePopup 来仅使用 Vanilla Picker 初始化单个 Picker？

没有框架或库，当然除了 Vanilla Picker 本身。

JavaScript

// See URL for Vanilla Picker code:
// https://unpkg.com/vanilla-picker@2.8.0/dist/vanilla-picker.min.js

window.onclick = function(event)
{
 if (event.target.hasAttribute('data-color') && event.target.getAttribute('data-color')[0] == '#')
 {
  console.log(event.target.getAttribute('data-color'));
  var picker = new Picker({alpha : true,
  color: event.target.getAttribute('data-color'),
  editor : true,
  editorFormat : 'rgb',
  onChange: function(color)
  {
   event.target.setAttribute('data-color',color.rgbaString);
   event.target.style.backgroundColor = color.rgbaString; console.log(color);
  },
  //onDone: function(color) {console.log(color);},
  parent : event.target,
  //popup : 'bottom'
  });
 }
}

HTML

<div data-color="#f00" id="color1">Color 1</div>
<div data-color="#0f0" id="color2">Color 2</div>
<div data-color="#00f" id="color3">Color 3</div>

Answer 1

当您实例化 Picker 的实例时，您可以将其分配给一个可以通过其引用的变量。如果此变量是在全局范围内定义的，则您可以从代码中的任何位置访问此实例及其所有方法。

这是一个简单的示例，我们为两个不同的 DIV 重复使用同一个 Picker:

var picker = new Picker();

function changePicker(e) {
  picker.movePopup({
    parent: e.currentTarget
  }, true);
}
document.getElementById("divA").addEventListener("click", changePicker);
document.getElementById("divB").addEventListener("click", changePicker);
picker.onDone = function(color) {
  this.settings.parent.style.backgroundColor = color.rgbaString;
};

<script src="https://unpkg.com/vanilla-picker@2.8.0/dist/vanilla-picker.min.js"></script>
<div id="divA">TestA</div>
<div id="divB">TestB</div>

一旦按下选择器的完成按钮，就会设置 DIV 的背景颜色。如果您查看 onDone 回调函数，您会注意到 this.settings。这是选择器本身返回的对象。除此之外，它返回当前与选择器关联的 HTML 元素 - this.settings.parent。