diff --git a/turkle/static/turkle/action-table-2.4.21/action-table-filters.js b/turkle/static/turkle/action-table-2.4.21/action-table-filters.js new file mode 100644 index 00000000..edb35d35 --- /dev/null +++ b/turkle/static/turkle/action-table-2.4.21/action-table-filters.js @@ -0,0 +1,5 @@ +var x=Object.defineProperty;var y=(g,p,e)=>p in g?x(g,p,{enumerable:!0,configurable:!0,writable:!0,value:e}):g[p]=e;var E=(g,p,e)=>(y(g,typeof p!="symbol"?p+"":p,e),e);class A extends HTMLElement{constructor(){super();E(this,"options",[])}findOptions(e){e=e.toLowerCase();const t=this.closest("action-table"),o=t.cols,n=t.tbody,s=o.findIndex(i=>i.name===e);if(s===-1)return;const h=`td:nth-child(${s+1})`,u=n.querySelectorAll(h);let a=[];Array.from(u).forEach(i=>{const l=i.querySelectorAll("span, ul > li");if(!i.dataset.filter&&(l==null?void 0:l.length)>0){const d=Array.from(l).map(f=>f.textContent||"");a=a.concat(d)}else a.push(t.getCellValues(i).filter)}),a=Array.from(new Set(a));const r=o[s].order;function c(i){return r!=null&&r.includes(i)?r.indexOf(i).toString():i}a.sort((i,l)=>(i=c(i),l=c(l),t.alphaNumSort(i,l))),this.hasAttribute("descending")&&a.reverse(),this.options=a}connectedCallback(){var t;const e=this.getAttribute("name");e&&(this.hasAttribute("options")?this.options=((t=this.getAttribute("options"))==null?void 0:t.split(","))||[]:this.findOptions(e),this.render(e))}render(e){if(this.options.length<1)return;const t=this.getAttribute("type")||"select";if(t!=="checkbox"&&this.options.length<2)return;const o=this.getAttribute("label")||e,n=this.hasAttribute("multiple")?"multiple":"",s=this.getAttribute("all")||"All";let h="",u="";const a=t==="select"?``:`${o}`;t==="select"&&(h=`"),t==="radio"&&(h=``);const r=`${a}${h}${this.options.map(c=>t==="select"?``:t==="radio"||t==="checkbox"?``:"").join("")}${u}`;this.innerHTML=`${r}`}}customElements.define("action-table-filter-menu",A);class L extends HTMLElement{connectedCallback(){const p=this.getAttribute("name");p&&(this.innerHTML=``)}}customElements.define("action-table-filter-switch",L);class T extends HTMLElement{constructor(){super();E(this,"min",0);E(this,"rangeTotal",0);this.render(),this.addEventListeners()}get name(){return this.getAttribute("name")||""}addEventListeners(){this.addEventListener("input",e=>{const t=this.querySelectorAll("input"),o=this.querySelector("output"),[n,s]=Array.from(t).map(r=>Number(r.value)),h=n.toString(),u=s.toString();o instanceof HTMLOutputElement&&(o.textContent=`${h}-${u}`);const a=this.querySelector(".range-slider-highlight");a instanceof HTMLSpanElement&&(a.style.marginLeft=`${(n-this.min)/this.rangeTotal*100}%`,a.style.width=`${(s-n)/this.rangeTotal*100}%`),n>s&&(e.stopPropagation(),t[0].value=u,t[1].value=h)})}findMinMax(){const e=this.getAttribute("min"),t=this.getAttribute("max");if(e&&t)return[Number(e),Number(t)];const o=this.closest("action-table"),n=o.cols,s=o.tbody,h=n.findIndex(r=>r.name===this.name.toLowerCase());if(h===-1)return[0,0];const u=`td:nth-child(${h+1})`,a=s.querySelectorAll(u);return Array.from(a).reduce((r,c)=>{const i=Number(o.getCellValues(c).filter);let l=r.length===2?r[0]:i,d=r.length===2?r[1]:i;return l=li?d:i,[l,d]},[])}render(){const[e,t]=this.findMinMax(),o=e.toString(),n=t.toString();this.rangeTotal=t-e,this.min=e;const s=this.getAttribute("label")||this.name,h=document.createElement("div");h.textContent=s;const u=document.createElement("div");u.classList.add("range-slider-group");const a=Math.pow(10,Math.round(Math.log10(this.rangeTotal)))/10;function r(m,b){for(const v in b)m.setAttribute(v,b[v])}const c=[e];for(let m=e+a;m<=t;m+=a)c.push(Math.round(m/a)*a);c.includes(t)||c.push(t);const i=document.createElementNS("http://www.w3.org/2000/svg","svg");r(i,{role:"presentation",width:"100%",height:"5"});const l=100/(c.length-1);for(let m=1;m0&&this.setFilterElements(e)}toggleHighlight(e){e.value?e.classList.add("selected"):e.classList.remove("selected")}addEventListeners(){var o;const e=(n,s)=>n.hasAttribute(s)||!!n.closest(`[${s}]`);this.addEventListener("input",n=>{const s=n.target;if(s instanceof HTMLSelectElement||s instanceof HTMLInputElement){const h=e(s,"exclusive"),u=e(s,"regex"),a=e(s,"exact"),r=s.dataset.cols?s.dataset.cols.toLowerCase().split(","):void 0,c=s.name.toLowerCase();if(s instanceof HTMLSelectElement){this.toggleHighlight(s);const i=Array.from(s.selectedOptions).map(l=>l.value);this.dispatch({[c]:{values:i,exclusive:h,regex:u,exact:a,cols:r}})}if(s instanceof HTMLInputElement){if(s.type==="checkbox"){const i=this.querySelectorAll("input[type=checkbox][name="+s.name+"]"),l=Array.from(i).filter(d=>d.checked).map(d=>d.value);this.dispatch({[c]:{values:l,exclusive:h,regex:u,exact:a,cols:r}})}if(s.type==="radio"&&this.dispatch({[c]:{values:[s.value],exclusive:h,regex:u,exact:a,cols:r}}),s.type==="range"){const i=this.querySelectorAll("input[type=range][name='"+s.name+"']");let l=[];const d=[];i.forEach(f=>{f.dataset.range==="min"&&(d[0]=f.min,l[0]=f.value),f.dataset.range==="max"&&(d[1]=f.max,l[1]=f.value)}),l.every((f,m)=>f===d[m])&&(l=[]),this.dispatch({[c]:{values:l,range:!0}})}}}}),this.querySelectorAll("input[type='search']").forEach(n=>{function s(u,a=300){let r;return(...c)=>{clearTimeout(r),r=setTimeout(()=>{u(...c)},a)}}const h=n.dataset.event||"input";n.addEventListener(h,()=>{this.toggleHighlight(n);const u=e(n,"exclusive"),a=e(n,"regex"),r=e(n,"exact"),c=n.dataset.cols?n.dataset.cols.toLowerCase().split(","):void 0;s(()=>this.dispatch({[n.name]:{values:[n.value],exclusive:u,regex:a,exact:r,cols:c}}))()})}),(o=this.resetButton)==null||o.addEventListener("click",()=>{this.resetAllFilterElements(),this.dispatch()}),this.actionTable.addEventListener("action-table-filters-reset",()=>{this.resetAllFilterElements()})}dispatchInput(e){e.dispatchEvent(new Event("input",{bubbles:!0}))}dispatch(e){if(this.resetButton)if(e){let t=this.actionTable.filters||{};t={...t,...e},this.enableReset(this.hasFilters(t))}else this.enableReset(!1);this.dispatchEvent(new CustomEvent("action-table-filter",{detail:e,bubbles:!0}))}enableReset(e=!0){this.resetButton&&(e?this.resetButton.removeAttribute("disabled"):this.resetButton.setAttribute("disabled",""))}hasFilters(e){return Object.keys(e).some(t=>e[t].values.some(o=>o!==""))}resetAllFilterElements(){this.querySelectorAll("select, input").forEach(t=>{t instanceof HTMLInputElement&&(t.type==="checkbox"||t.type==="radio")&&(t.value===""?t.checked=!0:t.checked=!1),(t instanceof HTMLSelectElement||t instanceof HTMLInputElement&&t.type==="search")&&(t.value="",this.toggleHighlight(t)),t instanceof HTMLInputElement&&t.type==="range"&&(t.value=t.dataset.range==="max"?t.max:t.min,this.dispatchInput(t))})}setFilterElements(e){this.hasFilters(e)?(this.enableReset(),Object.keys(e).forEach(t=>this.setFilterElement(t,e[t].values))):this.resetAllFilterElements()}setSelectValueIgnoringCase(e,t){t=t.toLowerCase(),Array.from(e.options).some(o=>(o.value.toLowerCase()||o.text.toLowerCase())===t?(o.selected=!0,this.toggleHighlight(e),!0):!1)}setFilterElement(e,t){if(t.length===0)return;this.querySelectorAll(`select[name="${e}" i], input[name="${e}" i]`).forEach(n=>{n instanceof HTMLSelectElement&&(n.value=t[0],this.setSelectValueIgnoringCase(n,t[0])),n instanceof HTMLInputElement&&(n.type==="checkbox"&&t.includes(n.value)&&(n.checked=!0),n.type==="radio"&&n.value===t[0]&&(n.checked=!0),n.type==="search"&&(n.value=t[0],this.toggleHighlight(n)),n.type==="range"&&(n.dataset.range==="min"&&(n.value=t[0]||n.min,this.dispatchInput(n)),n.dataset.range==="max"&&(n.value=t[1]||n.max,this.dispatchInput(n))))})}}customElements.define("action-table-filters",$); +//# sourceMappingURL=action-table-filters.js.map diff --git a/turkle/static/turkle/action-table-2.4.21/action-table-pagination.js b/turkle/static/turkle/action-table-2.4.21/action-table-pagination.js new file mode 100644 index 00000000..d3992799 --- /dev/null +++ b/turkle/static/turkle/action-table-2.4.21/action-table-pagination.js @@ -0,0 +1,2 @@ +var f=Object.defineProperty;var d=(r,a,s)=>a in r?f(r,a,{enumerable:!0,configurable:!0,writable:!0,value:s}):r[a]=s;var c=(r,a,s)=>(d(r,typeof a!="symbol"?a+"":a,s),s);class m extends HTMLElement{constructor(){super();const a=this.closest("action-table"),{pagination:s}=a,t=i=>i.map(e=>``).join(""),n=this.options.length>0?``:"";this.innerHTML=n,this.addEventListener("change",i=>{if(i.target instanceof HTMLSelectElement){const e=Number(i.target.value);isNaN(e)||(a.pagination=e)}})}get options(){const a=this.getAttribute("options");if(a){const s=a.split(",").map(t=>Number(t)).filter(t=>!isNaN(t));if(s.length>0)return s}return[]}}customElements.define("action-table-pagination-options",m);class $ extends HTMLElement{constructor(){super();c(this,"page",1);c(this,"numberOfPages",1);c(this,"group",1);c(this,"maxGroups",1);c(this,"actionTable",this.closest("action-table"));c(this,"rowsVisible",0);this.addEventListeners()}connectedCallback(){this.render()}render(){const{page:s,numberOfPages:t}=this.actionTable;this.numberOfPages=t,this.page=s;const n=Number(this.getAttribute("max-buttons"))||10,i=Math.ceil(t/n);let e=this.group;e>i?e=i:e<1&&(e=1);const l=(e-1)*n+1;function p(o,b="",h){return``}let g="";if(e>1&&(g+=`${p(1,"first")}${p(l-1,"prev","...")}`),t>0){for(let o=l;o<=t;o++)if(g+=p(o),o!==t&&o>=n*e){g+=`${p(o+1,"next","...")}${p(t,"last")}`;break}}const u=o=>` class="pagination-${o}"`;this.innerHTML=` ${g}`,this.changeLabel(s),this.group=e,this.maxGroups=i}changeLabel(s){const{pagination:t,rowsSet:n}=this.actionTable;this.rowsVisible=n.size;const e=(this.getAttribute("label")||"Showing {rows} of {total}:").replace("{rows}",`${s*t-t+1}-${s*t}`).replace("{total}",`${n.size}`),l=this.querySelector("span.pagination-label");l&&(l.textContent=e)}addEventListeners(){this.addEventListener("click",s=>{const t=s.target;if(t instanceof HTMLButtonElement){let n=1;t.dataset.page&&(n=Number(t.dataset.page),t.classList.add("active"),this.querySelectorAll("button").forEach(l=>{l!==t&&l.classList.remove("active")}));let i=this.group;const e=l=>t.classList.contains(l);e("next")&&i++,e("prev")&&i--,e("first")&&(i=1),e("last")&&(i=this.maxGroups),this.actionTable.page=this.page=n,this.changeLabel(n),this.group!==i&&(this.group=i,this.render())}}),this.actionTable.addEventListener("action-table",s=>{const{page:t,pagination:n,numberOfPages:i,rowsVisible:e}=s.detail;(t&&t!==this.page||i!==void 0&&i!==this.numberOfPages||n!==void 0||e!==this.rowsVisible)&&this.render()})}}customElements.define("action-table-pagination",$); +//# sourceMappingURL=action-table-pagination.js.map diff --git a/turkle/static/turkle/action-table-2.4.21/action-table.css b/turkle/static/turkle/action-table-2.4.21/action-table.css new file mode 100644 index 00000000..8c414111 --- /dev/null +++ b/turkle/static/turkle/action-table-2.4.21/action-table.css @@ -0,0 +1 @@ +action-table{display:block;--highlight: paleturquoise;--focus: dodgerblue;--star-checked: orange;--star-unchecked: gray;--switch-checked: green;--switch-unchecked: lightgray;--border: 1px solid lightgray;--border-radius: .2em;--th-bg: whitesmoke;--th-sorted: rgb(244, 220, 188);--col-sorted: rgb(255, 253, 240);--td-options-bg: whitesmoke;--page-btn: whitesmoke;--page-btn-active: rgb(244, 220, 188);--responsive-scroll-gradient: linear-gradient(to right, #fff 30%, rgba(255, 255, 255, 0)), linear-gradient(to right, rgba(255, 255, 255, 0), #fff 70%) 0 100%, radial-gradient(farthest-side at 0% 50%, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)), radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)) 0 100%}action-table :where(table){border-collapse:collapse;margin:1em 0;max-width:100%;overflow:auto;display:block;background:var(--responsive-scroll-gradient);background-repeat:no-repeat;background-size:40px 100%,40px 100%,14px 100%,14px 100%;background-position:0 0,100%,0 0,100%;background-attachment:local,local,scroll,scroll}action-table :where(th){border:var(--border);padding:0;text-align:left;background:var(--th-bg)}action-table :where(th[no-sort]){padding:.2em .5em}action-table :where(th button){cursor:pointer;font-weight:700;border:0;width:100%;height:100%;display:block;padding:.2em 1.5em .2em .5em;background-color:transparent;position:relative;text-align:left;font-size:inherit;line-height:inherit}action-table :where(th button:hover,th:has(button):hover,th button:focus,th:has(button):focus){background-color:var(--highlight)}action-table :where(th button):after{content:"";background-image:url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M9 16.172l-6.071-6.071-1.414 1.414 8.485 8.485 8.485-8.485-1.414-1.414-6.071 6.071v-16.172h-2z'%3E%3C/path%3E%3C/svg%3E%0A");background-repeat:no-repeat;background-position:center right;background-size:.7em;height:.7em;width:.7em;display:block;opacity:.2;position:absolute;right:.4em;top:50%;transform:translateY(-50%);float:right;transition:transform .3s ease-in-out,opacity .3s ease-in-out}action-table :where(th[aria-sort$=ing] button,th[aria-sort$=ing]:has(button)){background-color:var(--th-sorted)}action-table :where(th[aria-sort$=ing] button):after{opacity:1}action-table :where(th[aria-sort=descending] button):after{opacity:1;transform:translateY(-50%) rotate(180deg)}action-table :where(td){border:var(--border);padding:.2em .4em}action-table .sorted{background-color:var(--col-sorted)}action-table :where(td span){background-color:var(--td-options-bg);padding:0 .4em .1em;margin:0 .2em}action-table:not(:defined),action-table-filters:not(:defined){visibility:hidden}action-table :where(select,input,button){font-size:inherit}action-table :where(input[type=search],select){border:var(--border);border-radius:var(--border-radius)}action-table .selected{background-color:var(--highlight);transition:color .2s ease}action-table .no-results :where(td){padding:1em;text-align:center}action-table :where(button){cursor:pointer}action-table-filter-menu,action-table-filter-switch label,action-table-filter-menu .filter-label{display:inline-flex;flex-wrap:wrap;align-items:center}action-table-filter-menu label,action-table-filter-menu .filter-label{margin-inline-end:.3em}action-table .switch label{display:inline-flex;align-items:center;margin:0}action-table .switch input{-webkit-appearance:none;-moz-appearance:none;appearance:none;position:relative;display:inline-block;background:var(--switch-unchecked);cursor:pointer;height:1.4em;width:2.75em;vertical-align:middle;border-radius:2em;box-shadow:0 1px 3px #0003 inset;transition:.25s linear background}action-table .switch input:before{content:"";display:block;width:1em;height:1em;background:#fff;border-radius:1em;position:absolute;top:.2em;left:.2em;box-shadow:0 1px 3px #0003;transition:.25s linear transform;transform:translate(0)}action-table .switch :checked{background:var(--switch-checked)}action-table .switch :checked:before{transform:translate(1.3em)}action-table .switch input:focus,action-table .star input:focus{outline:transparent}action-table .switch input:focus-visible,action-table .star input:focus-visible{outline:2px solid var(--focus);outline-offset:2px}action-table .star input{-webkit-appearance:none;-moz-appearance:none;appearance:none;position:relative;cursor:pointer;height:1.6em;width:1.6em;vertical-align:middle;border-radius:.3em}action-table .star input:before{content:"";background:var(--star-unchecked);cursor:pointer;position:absolute;height:1.6em;width:1.6em;vertical-align:middle;transition:.25s linear background;clip-path:polygon(50% 0%,62% 29%,98% 35%,74% 58%,79% 91%,50% 76%,21% 91%,26% 58%,2% 35%,34% 29%)}action-table .star input:checked:before{background:var(--star-checked)}action-table-pagination{display:flex;justify-content:start;align-items:center;flex-wrap:wrap;gap:.6em;max-width:100%;overflow:auto}action-table-pagination .pagination-buttons{display:flex;justify-content:start;align-items:center;gap:.3em}action-table-pagination button{cursor:pointer;font-size:inherit;background-color:var(--page-btn);border:0;border-radius:.3em;padding:.2em .5em}action-table-pagination button:hover{background-color:var(--highlight)}action-table-pagination .active{font-weight:700;background-color:var(--page-btn-active)}@keyframes fade-in{0%{opacity:0}}@keyframes fade-out{to{opacity:0}}@keyframes slide-from-bottom{0%{transform:translateY(50px)}}@keyframes slide-to-top{to{transform:translateY(-50px)}}::view-transition-old(row){animation:90ms cubic-bezier(.4,0,1,1) both fade-out,.3s cubic-bezier(.4,0,.2,1) both slide-to-top}::view-transition-new(row){animation:1.21s cubic-bezier(0,0,.2,1) 90ms both fade-in,.3s cubic-bezier(.4,0,.2,1) both slide-from-bottom}action-table-filter-range{--thumb-size: 1.3em;--thumb-bg: #fff;--thumb-border: solid 2px #9e9e9e;--thumb-shadow: 0 1px 4px .5px rgba(0, 0, 0, .25);--thumb-highlight: var(--highlight);--track-bg: lightgray;--track-shadow: inset 0 0 2px #00000099;--track-highlight: var(--highlight);--ticks-color: #b2b2b2;--ticks-width: 1}action-table-filter-range,action-table-filter-range>div,action-table-filter-range label{display:flex;align-items:center;flex-wrap:wrap;gap:.6em}action-table-filter-range .range-slider-group{display:grid}action-table-filter-range .range-slider-group>*{grid-column:1;grid-row:1;position:relative}action-table-filter-range .range-slider-group:after{content:"";width:100%;height:.5em;background-color:var(--track-bg);border-radius:50px;background-size:100% 2px;box-shadow:var(--track-shadow);grid-column:1;grid-row:1;justify-self:center}action-table-filter-range .range-slider-highlight{background-color:var(--track-highlight);width:100%;height:.35em}action-table-filter-range input{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0;width:100%;background:transparent;padding:.2em 0;pointer-events:none;cursor:-webkit-grab;cursor:grab}action-table-filter-range input::-webkit-slider-runnable-track{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent}action-table-filter-range input::-webkit-slider-thumb{-webkit-appearance:none;height:var(--thumb-size);width:var(--thumb-size);border-radius:50%;background:var(--thumb-bg);border:var(--thumb-border);box-shadow:var(--thumb-shadow);pointer-events:auto}action-table-filter-range input::-moz-range-thumb{-webkit-appearance:none;height:var(--thumb-size);width:var(--thumb-size);background:var(--thumb-bg);border-radius:50%;border:var(--thumb-border);box-shadow:var(--thumb-shadow);pointer-events:auto}action-table-filter-range input::-ms-thumb{-webkit-appearance:none;height:var(--thumb-size);width:var(--thumb-size);background:var(--thumb-bg);border-radius:50%;border:var(--thumb-border);box-shadow:var(--thumb-shadow);pointer-events:auto}action-table-filter-range input::-webkit-slider-thumb:hover{background:var(--thumb-highlight)}action-table-filter-range svg{color:var(--ticks-color);position:relative;top:-.6em;width:calc(100% - var(--thumb-size));justify-self:center;border-left:1px solid var(--ticks-color);border-right:1px solid var(--ticks-color);box-sizing:border-box} diff --git a/turkle/static/turkle/action-table-2.4.21/action-table.js b/turkle/static/turkle/action-table-2.4.21/action-table.js new file mode 100644 index 00000000..13426f43 --- /dev/null +++ b/turkle/static/turkle/action-table-2.4.21/action-table.js @@ -0,0 +1,2 @@ +var g=Object.defineProperty;var p=(c,l,t)=>l in c?g(c,l,{enumerable:!0,configurable:!0,writable:!0,value:t}):c[l]=t;var h=(c,l,t)=>(p(c,typeof l!="symbol"?l+"":l,t),t);class m extends HTMLElement{constructor(){super();const l=this.closest("action-table");this.style.display="none",this.addEventListener("click",t=>{t.target instanceof HTMLButtonElement&&t.target.type==="reset"&&(this.dispatchEvent(new CustomEvent("action-table-filter",{bubbles:!0})),this.dispatchEvent(new CustomEvent("action-table-filters-reset",{bubbles:!0})))}),l.addEventListener("action-table",t=>{const e=t.detail;(e==null?void 0:e.rowsVisible)===0?this.style.display="":this.style.display="none"})}}customElements.define("action-table-no-results",m);function y(c){return Object.keys(c).length>0}class C extends HTMLElement{constructor(){var t;super();h(this,"table");h(this,"tbody");h(this,"cols",[]);h(this,"rows",[]);h(this,"filters",{});h(this,"tableContent",new WeakMap);h(this,"rowsSet",new Set);h(this,"sortAndFilter",this.delayUntilNoLongerCalled(()=>{this.filterTable(),this.sortTable(),this.appendRows(),this.tbody.matches("[style*=none]")&&(this.rowsSet.size===0&&(this.setFilters(),this.dispatchEvent(new Event("action-table-filters-reset"))),this.tbody.style.display="")}));if(this.store){const e=this.getStore();e&&(this.sort=e.sort||this.sort,this.direction=e.direction||this.direction||"ascending",this.filters=e.filters||this.filters)}if(this.hasAttribute("urlparams")){const e=new URLSearchParams(window.location.search),s={};for(let[i,r]of e.entries())i=i.toLowerCase(),r=r.toLowerCase(),i!=="sort"&&i!=="direction"&&((t=s[i])!=null&&t.values?s[i].values.push(r):s[i]={values:[r]}),i==="sort"&&(this.sort=r),i==="direction"&&(r==="ascending"||r==="descending")&&(this.direction=r);Object.keys(s).length>0&&this.setFiltersObject(s)}this.addEventListeners()}get sort(){return this.getCleanAttr("sort")}set sort(t){this.setAttribute("sort",t)}get direction(){const t=this.getCleanAttr("direction");return t==="descending"?t:"ascending"}set direction(t){this.setAttribute("direction",t)}get store(){return this.hasAttribute("store")?this.getCleanAttr("store")||"action-table":""}get pagination(){return Number(this.getCleanAttr("pagination"))||0}set pagination(t){this.setAttribute("pagination",t.toString())}get page(){return Number(this.getCleanAttr("page"))||1}set page(t){t=this.checkPage(t),this.setAttribute("page",t.toString())}checkPage(t){return Math.max(1,Math.min(t,this.numberOfPages))}dispatch(t){this.dispatchEvent(new CustomEvent("action-table",{detail:t}))}getCleanAttr(t){var e;return((e=this.getAttribute(t))==null?void 0:e.trim().toLowerCase())||""}connectedCallback(){const t=this.querySelector("table");if(t&&t.querySelector("thead th")&&t.querySelector("tbody td"))this.table=t,this.tbody=t.querySelector("tbody"),this.rows=Array.from(this.tbody.querySelectorAll("tr")),this.rowsSet=new Set(this.rows);else throw new Error("Could not find table with thead and tbody");(this.sort||y(this.filters))&&(this.tbody.style.display="none",this.sortAndFilter()),this.getColumns(),this.addObserver()}static get observedAttributes(){return["sort","direction","pagination","page"]}attributeChangedCallback(t,e,s){e!==s&&this.rows.length>0&&((t==="sort"||t==="direction")&&this.sortTable(),t==="pagination"&&this.dispatch({pagination:this.pagination}),this.appendRows())}setFiltersObject(t={}){this.filters=t,this.store&&this.setStore({filters:this.filters})}setFilters(t={}){this.setFiltersObject(t),this.filterTable(),this.appendRows()}addEventListeners(){this.addEventListener("click",e=>{const s=e.target;if(s instanceof HTMLButtonElement&&s.dataset.col){const i=s.dataset.col;let r="ascending";this.sort===i&&this.direction==="ascending"&&(r="descending"),this.sort=i,this.direction=r,this.store&&this.setStore({sort:this.sort,direction:r})}},!1);const t=e=>e.matches("td")?e:e.closest("td");this.addEventListener("change",e=>{const s=e.target;s instanceof HTMLInputElement&&s.closest("td")&&s.type==="checkbox"&&this.updateCellValues(t(s))}),this.addEventListener("action-table-filter",e=>{if(e.detail){const s={...this.filters,...e.detail};Object.keys(s).forEach(i=>{s[i].values.every(r=>r==="")&&delete s[i]}),this.setFilters(s)}else this.setFilters()}),this.addEventListener("action-table-update",e=>{const s=e.target;if(s instanceof HTMLElement){let i={};typeof e.detail=="string"?i={sort:e.detail,filter:e.detail}:i=e.detail,this.updateCellValues(t(s),i)}})}getStore(){try{const t=localStorage.getItem(this.store),e=t&&JSON.parse(t);return typeof e=="object"&&e!==null&&["sort","direction","filters"].some(i=>i in e)?e:!1}catch{return!1}}setStore(t){const e=this.getStore()||{};e&&(t={...e,...t}),localStorage.setItem(this.store,JSON.stringify(t))}delayUntilNoLongerCalled(t){let e,s=!1;function i(){t(),s=!1}return function(){s?clearTimeout(e):s=!0,e=setTimeout(i,10)}}getColumns(){const t=this.table.querySelectorAll("thead th");if(t.forEach(e=>{const s=(e.dataset.col||this.getCellContent(e)).trim().toLowerCase(),i=e.dataset.order?e.dataset.order.split(","):void 0;if(this.cols.push({name:s,order:i}),!e.hasAttribute("no-sort")){const r=document.createElement("button");r.dataset.col=s,r.type="button",r.innerHTML=e.innerHTML,e.replaceChildren(r)}}),!this.table.querySelector("colgroup")){const e=document.createElement("colgroup");t.forEach(()=>{const s=document.createElement("col");e.appendChild(s)}),this.table.prepend(e)}}getCellContent(t){var s;let e=(t.textContent||"").trim();if(!e){const i=t.querySelector("svg");i instanceof SVGElement&&(e=((s=i.querySelector("title"))==null?void 0:s.textContent)||e);const r=t.querySelector("input[type=checkbox]");r instanceof HTMLInputElement&&r.checked&&(e=r.value);const n=t.querySelector(":defined");n!=null&&n.shadowRoot&&(e=n.shadowRoot.textContent||e)}return e.trim()}getCellValues(t){return this.tableContent.has(t)?this.tableContent.get(t):this.setCellValues(t)}setCellValues(t,e={}){const s=this.getCellContent(t),i={sort:t.dataset.sort||s,filter:t.dataset.filter||s,...e};return this.tableContent.set(t,i),i}updateCellValues(t,e={}){this.setCellValues(t,e),this.sortAndFilter()}addObserver(){new MutationObserver(e=>{e.forEach(s=>{let i=s.target;if(i.nodeType===3&&i.parentNode&&(i=i.parentNode),!(i instanceof HTMLElement))return;const r=i.closest("td");r instanceof HTMLTableCellElement&&(r.hasAttribute("contenteditable")&&r===document.activeElement?r.dataset.edit||(r.dataset.edit="true",r.addEventListener("blur",()=>{this.updateCellValues(r)})):this.updateCellValues(r))})}).observe(this.tbody,{childList:!0,subtree:!0,attributes:!0,characterData:!0,attributeFilter:["data-sort","data-filter"]})}filterTable(){const t=this.numberOfPages,e=this.rowsSet.size,s=this.filters["action-table"];this.rows.forEach(i=>{let r=!1;const n=i.querySelectorAll("td");if(s){const o=Array.from(n).filter((a,d)=>this.filters["action-table"].cols?this.filters["action-table"].cols.includes(this.cols[d].name.toLowerCase()):!0).map(a=>a.querySelector('input[type="checkbox"]')?"":this.getCellValues(a).filter).join(" ");this.shouldHide(s,o)&&(r=!0)}n.forEach((u,o)=>{const a=this.filters[this.cols[o].name];a&&this.shouldHide(a,this.getCellValues(u).filter)&&(r=!0)}),r?this.rowsSet.delete(i):this.rowsSet.add(i)}),this.numberOfPages!==t&&this.dispatch({numberOfPages:this.numberOfPages}),this.rowsSet.size!==e&&this.dispatch({rowsVisible:this.rowsSet.size})}shouldHide(t,e){if(t.values&&t.values.length>0){if(t.regex){let s=t.values.join("|");return t.exclusive&&(s=`${t.values.map(n=>`(?=.*${n})`).join("")}.*`),!new RegExp(s,"i").test(e)}if(t.range){const[s,i]=t.values;if(!isNaN(Number(s))&&!isNaN(Number(i)))return Number(e)Number(i)}return t.exclusive?!t.values.every(s=>e.toLowerCase().includes(s.toLowerCase())):t.exact?t.values.every(s=>s&&s!==e):!t.values.some(s=>e.toLowerCase().includes(s.toLowerCase()))}return!1}sortTable(t=this.sort,e=this.direction){if(!this.sort||!e)return;t=t.toLowerCase();const s=this.cols.findIndex(i=>i.name===t);if(s>=0&&this.rows.length>0){const i=this.cols[s].order,r=o=>i!=null&&i.includes(o)?i.indexOf(o).toString():o;this.rows.sort((o,a)=>{if(e==="descending"){const b=o;o=a,a=b}const d=r(this.getCellValues(o.children[s]).sort),f=r(this.getCellValues(a.children[s]).sort);return this.alphaNumSort(d,f)}),this.querySelectorAll("col").forEach((o,a)=>{a===s?o.classList.add("sorted"):o.classList.remove("sorted")}),this.table.querySelectorAll("thead th").forEach((o,a)=>{const d=a===s?e:"none";o.setAttribute("aria-sort",d)})}}alphaNumSort(t,e){function s(n){if(isNaN(Number(n))){if(!isNaN(Date.parse(n)))return Date.parse(n)}else return Number(n)}const i=s(t),r=s(e);return i&&r?i-r:t.localeCompare(e)}appendRows(){const t=i=>{const{pagination:r,page:n}=this;return r===0||i>=r*(n-1)+1&&i<=r*n},e=document.createDocumentFragment();let s=0;if(this.rows.forEach(i=>{let r="none";this.rowsSet.has(i)&&(s++,t(s)&&(r="",e.appendChild(i))),i.style.display=r}),this.tbody.prepend(e),this.pagination>0){const i=this.checkPage(this.page);i!==this.page&&(this.page=i,this.dispatch({page:i}))}}get numberOfPages(){return this.pagination>0?Math.ceil(this.rowsSet.size/this.pagination):1}}customElements.define("action-table",C); +//# sourceMappingURL=action-table.js.map diff --git a/turkle/static/turkle/action-table-2.4.21/action_table_extension.css b/turkle/static/turkle/action-table-2.4.21/action_table_extension.css new file mode 100644 index 00000000..eb7101ac --- /dev/null +++ b/turkle/static/turkle/action-table-2.4.21/action_table_extension.css @@ -0,0 +1,104 @@ +/* fix action-table wdith */ +.table { + display: table +} + +/* Custom styling for action-table-filters */ +action-table-filters { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 15px; + margin-bottom: 20px; + padding: 15px; + background-color: #f8f9fa; + border: 1px solid #dee2e6; + border-radius: 0.375rem; +} + +action-table-filter-menu { + display: flex; + align-items: center; + gap: 8px; +} + +action-table-filter-menu label { + margin: 0; + font-weight: 500; + color: #495057; + white-space: nowrap; +} + +action-table-filter-menu select { + padding: 0.375rem 0.75rem; + border: 1px solid #ced4da; + border-radius: 0.25rem; + background-color: #fff; + color: #495057; + font-size: 0.875rem; + line-height: 1.5; + min-width: 120px; +} + +action-table-filter-menu select:focus { + border-color: #80bdff; + outline: 0; + box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); +} + +action-table-filters > div { + display: flex; + align-items: center; + gap: 8px; +} + +action-table-filters > div label { + margin: 0; + font-weight: 500; + color: #495057; + white-space: nowrap; +} + +action-table-filters > div input { + padding: 0.375rem 0.75rem; + border: 1px solid #ced4da; + border-radius: 0.25rem; + background-color: #fff; + color: #495057; + font-size: 0.875rem; + line-height: 1.5; + min-width: 150px; +} + +action-table-filters > div input:focus { + border-color: #80bdff; + outline: 0; + box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); +} + +action-table-filters > div input::placeholder { + color: #6c757d; + opacity: 1; +} + +/* Responsive behavior */ +@media (max-width: 768px) { + action-table-filters { + flex-direction: column; + align-items: stretch; + gap: 10px; + } + + action-table-filter-menu, + action-table-filters > div { + flex-direction: column; + align-items: stretch; + gap: 5px; + } + + action-table-filter-menu select, + action-table-filters > div input { + min-width: auto; + width: 100%; + } +} diff --git a/turkle/static/turkle/action-table-2.4.21/action_table_extension.js b/turkle/static/turkle/action-table-2.4.21/action_table_extension.js new file mode 100644 index 00000000..eba1535c --- /dev/null +++ b/turkle/static/turkle/action-table-2.4.21/action_table_extension.js @@ -0,0 +1,77 @@ +document.addEventListener('DOMContentLoaded', function() { + const actionTableFilters = document.querySelector('action-table-filters'); + + if (actionTableFilters) { + actionTableFilters.addEventListener('action-table-filter', function(event) { + const filterData = event.detail; + const url = new URL(window.location); + + // Process each filter in the event detail + Object.keys(filterData).forEach(filterKey => { + const filterInfo = filterData[filterKey]; + + // First, remove any existing parameters with this key + url.searchParams.delete(filterKey); + + if (filterInfo && filterInfo.values && Array.isArray(filterInfo.values)) { + // Filter out empty/null values + const validValues = filterInfo.values.filter(value => + value !== null && value !== undefined && value.toString().trim() !== '' + ); + + // Add each valid value as a separate parameter + validValues.forEach(value => { + url.searchParams.append(filterKey, value); + }); + } + }); + + // Update the URL without reloading the page + window.history.pushState({}, '', url.toString()); + }); + } + + const actionTable = document.querySelector('action-table'); + + if (actionTable) { + // Function to update URL parameters + function updateURLParams() { + const url = new URL(window.location); + const sort = actionTable.getAttribute('sort'); + const direction = actionTable.getAttribute('direction'); + + // Update or remove sort parameter + if (sort) { + url.searchParams.set('sort', sort); + } else { + url.searchParams.delete('sort'); + } + + // Update or remove direction parameter + if (direction) { + url.searchParams.set('direction', direction); + } else { + url.searchParams.delete('direction'); + } + + // Update browser history without reload + window.history.pushState({}, '', url.toString()); + } + + // Create a MutationObserver to watch for attribute changes + const observer = new MutationObserver(function(mutations) { + mutations.forEach(function(mutation) { + if (mutation.type === 'attributes' && + (mutation.attributeName === 'sort' || mutation.attributeName === 'direction')) { + updateURLParams(); + } + }); + }); + + // Start observing the action-table element for attribute changes + observer.observe(actionTable, { + attributes: true, + attributeFilter: ['sort', 'direction'] + }); + } +}); diff --git a/turkle/static/turkle/action-table-2.4.21/index.js b/turkle/static/turkle/action-table-2.4.21/index.js new file mode 100644 index 00000000..8fc2ad6d --- /dev/null +++ b/turkle/static/turkle/action-table-2.4.21/index.js @@ -0,0 +1,2 @@ +import"./action-table.js";import"./action-table-filters.js";import"./action-table-pagination.js"; +//# sourceMappingURL=index.js.map diff --git a/turkle/templates/turkle/index.html b/turkle/templates/turkle/index.html index 06dd2a44..ec75c4cd 100644 --- a/turkle/templates/turkle/index.html +++ b/turkle/templates/turkle/index.html @@ -2,6 +2,10 @@ {% load static %} {% block body %} + + + + {% if abandoned_assignments %}
@@ -34,35 +38,45 @@
{% if batch_rows %} - - - - - - - - - - {% for batch_row in batch_rows %} - - - - - - - - - {% endfor %} -
ProjectBatchBatch PublishedTasks Available
{{ batch_row.project_name }}{{ batch_row.batch_name }}{{ batch_row.batch_published }}{{ batch_row.assignments_available }} - - Preview next Task - - -
- {% csrf_token %} - -
-
+ + + +
+
+ + + + + + + + + + + + + {% for batch_row in batch_rows %} + + + + + + + + + {% endfor %} + +
ProjectBatchBatch PublishedTasks Available
{{ batch_row.project_name }}{{ batch_row.batch_name }}{{ batch_row.batch_published }}{{ batch_row.assignments_available }} + + Preview next Task + + +
+ {% csrf_token %} + +
+
+
{% else %}

No Tasks available at this time

{% if not user.is_authenticated %}