
class CamSorter{
constructor(array,callback){
LoadScript('Sortable',()=>{
this.init(array,callback);
});
}
init(array,callback){
let containerDiv=AddElement(document.body,'div');
containerDiv.className='panelContainer';
let contentDiv=AddElement(containerDiv,'div');
contentDiv.className='panelContent';
let titleDiv=AddElement(contentDiv,'div');
titleDiv.className='panelTitle';
titleDiv.textContent=Loc('Drag to Reorder Cameras');
let bodyDiv=AddElement(contentDiv,'div');
bodyDiv.className='panelBody';
bodyDiv.id='reorderBody';
this.ul=AddElement(bodyDiv,'ul');
this.ul.className='reorderList';
for(let cam of array){
let li=AddElement(this.ul,'li');
li.textContent=cam.name;
li.dataset.id=cam.value;
}
this.sortable=new Sortable(this.ul,{animation:150,
multiDrag:true,
selectedClass:'selected',
scroll:true,
forceFallback:true,
fallbackTolerance:3,
bubbleScroll:false,
scrollSensitivity:40,
scrollSpeed:10,
touchStartThreshold:3,
supportPointer:false});
let footerDiv=AddElement(contentDiv,'div');
footerDiv.className='panelFooter';
let button=AddElement(footerDiv,'button');
button.className='regButton';
button.textContent=Loc('Alphabetical');
button.type='button';
button.onclick=()=>this.sortAlpha();
button=AddElement(footerDiv,'button');
button.type='button';
button.className='regButton';
button.textContent=Loc('Cancel');
button.onclick=()=>{
containerDiv.remove();
};
button=AddElement(footerDiv,'button');
button.type='button';
button.className='regButton';
button.textContent=Loc('Save');
button.onclick=()=>{
callback(this.sortable.toArray());
containerDiv.remove();
};
containerDiv.style.display='flex';
}
sortAlpha(){
const items=Array.from(this.ul.children);
items.sort((a,b)=>{
return a.textContent.localeCompare(b.textContent);
});
items.forEach(item =>{
this.ul.appendChild(item);
});
}
}
