diff --git a/js/filter.css b/js/filter.css index cad043e..ac17870 100644 --- a/js/filter.css +++ b/js/filter.css @@ -2,42 +2,50 @@ position: absolute; width:100%; height:100%; - background-color: #004111; + background-color: rgba(0, 0, 0, 0.95); z-index: 123456; } .cg_popup .grid { position: absolute; width:80%; - left:10%; + left:5%; height:90%; top:5%; } .cg_popup .buttons { position: absolute; - width:6%; - left:92%; + width:15%; + left:85%; height:90%; top:5%; + padding: 20px; } .cg_popup .grid img { - padding:4px; + margin: 2px; border: 1px solid white; + padding: 4px; max-width: 100%; max-height: 100%; } .cg_popup .grid img.selected { - border: 1px solid green; + border: 3px solid green; + padding: 2px; } .cg_popup .buttons button { - margin:10px; + margin-top: 10px; padding: 4px; display: block; - width:100% + width: 100px; +} + +.cg_popup .buttons input { + padding: 4px; + display: inline; } .cg_popup.hidden { diff --git a/js/image_filter.js b/js/image_filter.js index 2dba64f..f45f61c 100644 --- a/js/image_filter.js +++ b/js/image_filter.js @@ -16,12 +16,38 @@ function send_response(msg) { popup?.classList.add('hidden') } +function send_picks() { + send_response(Array.from(picked).join()) +} + +function send_cancel() { + send_response('') +} + function executionInterrupted() { send_response('') } const picked = new Set() var popup = null +var click_sends = null +var send_button = null +var cancel_button = null + +function create_popup() { + popup = create('span', 'cg_popup hidden', document.body) + const grid = create('span', 'grid', popup) + const buttons = create('span', 'buttons', popup) + click_sends = create('input', 'control', buttons, {type:"checkbox", id:"click_sends"}) + create('label', 'control_text', buttons, {for:"click_sends", innerText:"click to send"}) + send_button = create('button', 'control', buttons, {innerText:"Send (S)"} ) + cancel_button = create('button', 'control', buttons, {innerText:"Cancel (X)"} ) + + send_button.addEventListener('click', (e)=>{ send_picks() }) + cancel_button.addEventListener('click', (e)=>{ send_cancel() }) + + document.addEventListener('keydown', (e)=>{ on_keydown(e) }) +} function layout() { const n = popup.firstChild.children.length @@ -54,28 +80,31 @@ function layout() { c.style.maxHeight = `${h}px` c.style.maxWidth = `${w}px` }) - redraw_from_click() + redraw() } -function redraw_from_click() { +function redraw() { Array.from(popup.firstChild.children).forEach((c,i)=>{ if (picked.has(`${i}`)) c.classList.add('selected') else c.classList.remove('selected') }) + if (click_sends.checked || picked.size==0) send_button.disabled = true + else send_button.disabled = false } -function create_popup() { - popup = create('span', 'cg_popup hidden', document.body) - const grid = create('span', 'grid', popup) - const buttons = create('span', 'buttons', popup) - const send = create('button', null, buttons, {innerText:"Send"} ) - const cancel = create('button', null, buttons, {innerText:"Cancel"} ) - - send.addEventListener('click', (e)=>{ send_response(Array.from(picked).join()) }) - cancel.addEventListener('click', (e)=>{ send_response('') }) +function on_keydown(e) { + if (e.key=='x') { + e.stopPropagation() + e.preventDefault() + send_cancel() + } else if (e.key=='s' && picked.size>0) { + e.stopPropagation() + e.preventDefault() + send_picks() + } } -function imageFilterImages(details) { +function receive_images(details) { const detail = details.detail if (app.graph._nodes_by_id[detail.uid].type=="Image Filter") { if (!popup) create_popup() @@ -92,9 +121,13 @@ function imageFilterImages(details) { if (detail.urls.length>1) { img.addEventListener('click', (e)=>{ const s = `${i}` - if (picked.has(s)) picked.delete(s) - else picked.add(s) - redraw_from_click() + if (click_sends.checked) { + send_response(s) + } else { + if (picked.has(s)) picked.delete(s) + else picked.add(s) + redraw() + } }) } }) @@ -108,6 +141,6 @@ app.registerExtension({ create('link', null, document.getElementsByTagName('HEAD')[0], {'rel':'stylesheet', 'type':'text/css', 'href': new URL("./filter.css", import.meta.url).href } ) api.addEventListener("execution_interrupted", executionInterrupted); - api.addEventListener("cg-image-filter-images",imageFilterImages); + api.addEventListener("cg-image-filter-images",receive_images); } }) \ No newline at end of file