1 line
2.5 KiB
JavaScript
1 line
2.5 KiB
JavaScript
|
window.VT=window.VT||{},VT.TodoFrameCustom=function(a){function b(){a.querySelectorAll(".container > *").forEach(function(a,b){a.style.transform="translateX("+100*(b-f.at)+"%)"})}function c(){var b,c,d=280,e=a.querySelector(".container");for(b=0,c=e.children.length;b<c;++b)d=Math.max(e.children[b].offsetHeight,d);for(a.style.height=d+50+"px",b=0,c=e.children.length;b<c;++b)e.children[b].style.height=d+"px"}function d(){var a=f.lists.map(function(a){return{id:a.id,index:a.index,title:a.title,items:e(a.id)}});return a.sort(function(c,a){return c.index-a.index}),a}function e(a){var b=f.items.filter(function(b){return b.listId===a});return b.sort(function(c,a){return c.index-a.index}),b}var f={lists:[],items:[],at:0,show:!0};a.innerHTML="<div class=\"leftcontrols\">\n <p><button class=\"app-button -circle -xl back\"><i class=\"app-icon\" data-id=\"chevron-left-24\"></i></button></p>\n</div>\n<div class=\"container\"></div>\n<div class=\"rightcontrols\">\n <p><button class=\"app-button -circle -xl forward\"><i class=\"app-icon\" data-id=\"chevron-right-24\"></i></button></p>\n <p><button class=\"app-button -circle -xl add\"><i class=\"app-icon\" data-id=\"plus-circle-24\"></i></button></p>\n</div>",VT.AppSortable(a.querySelector(".container"),{direction:"horizontal"}),setTimeout(function(){a.classList.add("-animated")},200),a.querySelectorAll(".app-icon").forEach(VT.AppIcon),a.querySelector(".back").addEventListener("click",function(){a.dispatchEvent(new CustomEvent("customSeek",{detail:-1,bubbles:!0}))}),a.querySelector(".forward").addEventListener("click",function(){a.dispatchEvent(new CustomEvent("customSeek",{detail:1,bubbles:!0}))}),a.querySelector(".add").addEventListener("click",function(){a.dispatchEvent(new CustomEvent("addList",{detail:{},bubbles:!0}))}),a.addEventListener("sortableDrop",function(b){b.detail.data.list&&a.dispatchEvent(new CustomEvent("moveList",{detail:{list:b.detail.data.list,index:b.detail.index},bubbles:!0}))}),a.addEventListener("draggableOver",function(a){a.detail.data.list&&b()}),a.todoFrameCustom={update:function(e){Object.assign(f,e);var g=d(),h=a.querySelector(".container"),i=new Set(h.children),j=new Map;i.forEach(function(a){j.set(a.dataset.key,a)});var k=g.map(function(a){var b=j.get(a.id);return b?i.delete(b):(b=document.createElement("div"),b.className="card todo-custom-list",b.dataset.key=a.id,VT.TodoCustomList(b)),b.todoCustomList.update({list:a}),b});i.forEach(function(a){h.removeChild(a)}),k.forEach(function(a,b){a!==h.children[b]&&h.insertBefore(a,h.children[b])}),b(),c()}}};
|