https://imagej.net/assets/js/dock.js

1/* Cookie functions from: https://www.w3schools.com/js/js_cookies.asp */
2
3function setCookie(cname, cvalue, exdays) {
4  var d = new Date();
5  d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
6  var expires = "expires="+d.toUTCString();
7  document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/;sameSite=lax";
8}
9
10function getCookie(cname) {
11  var name = cname + "=";
12  var ca = document.cookie.split(';');
13  for (var i=0; i<ca.length; i++) {
14    var c = ca[i];
15    while (c.charAt(0) == ' ') {
16      c = c.substring(1);
17    }
18    if (c.indexOf(name) == 0) {
19      return c.substring(name.length, c.length);
20    }
21  }
22  return "";
23}
24
25function loadDockState() {
26  var docks = getCookie('docks');
27  if (!docks) return;
28  var tokens = docks.split('~');
29  for (var i=0; i<tokens.length; i++) {
30    var dockId, dockableIds;
31    [dockId, dockableList] = tokens[i].split(':', 2);
32    if (!dockId || !dockableList) continue;
33    var dock = document.getElementById(dockId);
34    if (!dock) continue;
35    var dockableIds = dockableList.split(',');
36    for (var j=0; j<dockableIds.length; j++) {
37      var dockable = document.getElementById(dockableIds[j]);
38      if (!dockable) continue;
39      dock.appendChild(dockable);
40    }
41  }
42}
43
44function saveDockState() {
45  var tokens = [];
46  var docks = document.querySelectorAll('.dock');
47  docks.forEach(function(dock) {
48    var token = [];
49    dock.querySelectorAll('.dockable').forEach(function(dockable) {
50      token.push(dockable.id);
51    });
52    tokens.push(dock.id + ':' + token.join(','));
53  });
54  setCookie('docks', tokens.join('~'), 36500);
55}
56
57function grab(el) {
58  el.style.opacity = '0.4';
59  el.setAttribute('draggable', 'true');
60}
61
62function ungrab(el) {
63  el.setAttribute('draggable', 'false');
64  el.style.opacity = '1.0';
65}
66
67function dockMouseDown(e) {
68  grab(e.target.parentNode);
69}
70
71function dockMouseUp(e) {
72  ungrab(e.target.parentNode);
73}
74
75function dockDragStart(e) {
76  draggedElement = e.target;
77  /* NB: Work around bug in Chrome; see https://stackoverflow.com/a/20733870. */
78  setTimeout(function() {
79    overlays.forEach(function(overlay) {
80      overlay.style.display = 'block';
81      overlay.classList.add('drag-active');
82    });
83  }, 10);
84}
85
86function dockDragEnd(e) {
87  overlays.forEach(function(overlay) {
88    overlay.classList.remove('drag-active');
89    overlay.classList.remove('drag-over');
90    overlay.style.display = 'none';
91  });
92  ungrab(draggedElement);
93  draggedElement = null;
94  saveDockState();
95}
96
97function dockDragEnter(e) {
98  this.classList.add('drag-over');
99}
100
101function dockDragOver(e) {
102  var dock = document.getElementById(e.target.getAttribute('data-dock-target'));
103  var dockItems = dock.querySelectorAll('.dockable');
104  var placed = false;
105  for (var i=0; i<dockItems.length; i++) {
106    var dockItem = dockItems[i];
107    var y = dockItem.offsetTop + dockItem.offsetHeight / 2;
108    if (e.layerY < y) {
109      // insert dragged element just prior to this one.
110      dock.insertBefore(draggedElement, dockItem);
111      placed = true;
112      break;
113    }
114  }
115  if (!placed) dock.appendChild(draggedElement);
116  if (e.preventDefault) e.preventDefault();
117  return false;
118}
119
120function dockDragLeave(e) {
121  this.classList.remove('drag-over');
122}
123
124loadDockState();
125
126let draggedElement = null;
127
128document.querySelectorAll('.dockable').forEach(function(dockable) {
129  /* Adapted from: https://jsfiddle.net/a6tgy9so/1/ */
130  var handle = dockable.querySelector('.drag-handle');
131  handle.addEventListener('mousedown', dockMouseDown, false);
132  handle.addEventListener('mouseup', dockMouseUp, false);
133
134  dockable.addEventListener('dragstart', dockDragStart, false);
135  dockable.addEventListener('dragend', dockDragEnd, false);
136});
137
138let overlays = document.querySelectorAll('.dock-overlay');
139overlays.forEach(function(overlay) {
140  overlay.addEventListener('dragenter', dockDragEnter, false);
141  overlay.addEventListener('dragover', dockDragOver, false);
142  overlay.addEventListener('dragleave', dockDragLeave, false);
143});