|
|
(function(){
var MEMBERS = ;
var wrap = document.getElementById('acc-authors-wrap');
var dragSrc = null;
function esc(s){
return String(s).replace(/&/g,'&').replace(//g,'>').replace(/"/g,'"');
}
function clearDrop(){
wrap.querySelectorAll('.acc-author-row').forEach(function(r){
r.style.borderTop = '';
r.style.borderBottom = '';
});
}
function makeRow(name, mid){
mid = mid || 0;
var d = document.createElement('div');
d.className = 'acc-author-row';
d.draggable = true;
d.style.cssText = 'display:flex;gap:6px;margin-bottom:6px;align-items:center';
d.innerHTML =
'⠿' +
'' +
'' +
'';
bind(d);
return d;
}
function bind(row){
var inp = row.querySelector('.acc-author-input');
var hid = row.querySelector('input[name="pub_author_member_id[]"]');
var ac = row.querySelector('.acc-author-ac');
var badge = row.querySelector('.acc-member-badge');
inp.addEventListener('input', function(){
hid.value = 0; badge.style.display = 'none';
var q = this.value.toLowerCase().trim();
if(!q){ ac.style.display='none'; return; }
var hits = MEMBERS.filter(function(m){ return m.name.toLowerCase().indexOf(q) !== -1; });
if(!hits.length){ ac.style.display='none'; return; }
ac.innerHTML = hits.map(function(m){
return ''+esc(m.name)+' ';
}).join('');
ac.style.display = 'block';
});
ac.addEventListener('mousedown', function(e){
var item = e.target.closest('.acc-ac-item');
if(!item) return;
e.preventDefault();
inp.value = item.dataset.name;
hid.value = item.dataset.id;
badge.style.display = '';
ac.style.display = 'none';
});
inp.addEventListener('blur', function(){
setTimeout(function(){ ac.style.display='none'; }, 150);
});
row.querySelector('.acc-author-remove').addEventListener('click', function(){
row.remove();
});
// Drag & drop reordering
row.addEventListener('dragstart', function(e){
dragSrc = row;
e.dataTransfer.effectAllowed = 'move';
setTimeout(function(){ row.style.opacity = '0.4'; }, 0);
});
row.addEventListener('dragend', function(){
row.style.opacity = '';
clearDrop();
dragSrc = null;
});
row.addEventListener('dragover', function(e){
e.preventDefault();
if(!dragSrc || dragSrc === row) return;
clearDrop();
var rect = row.getBoundingClientRect();
if(e.clientY < rect.top + rect.height / 2){
row.style.borderTop = '2px solid #0073aa';
} else {
row.style.borderBottom = '2px solid #0073aa';
}
});
row.addEventListener('dragleave', function(){
row.style.borderTop = '';
row.style.borderBottom = '';
});
row.addEventListener('drop', function(e){
e.preventDefault();
if(!dragSrc || dragSrc === row) return;
clearDrop();
var rect = row.getBoundingClientRect();
if(e.clientY < rect.top + rect.height / 2){
wrap.insertBefore(dragSrc, row);
} else {
row.after(dragSrc);
}
});
}
wrap.querySelectorAll('.acc-author-row').forEach(bind);
document.getElementById('acc-add-author').addEventListener('click', function(){
var r = makeRow('', 0);
wrap.appendChild(r);
r.querySelector('.acc-author-input').focus();
});
})();
|