diff --git a/js/ding.mp3 b/js/ding.mp3 new file mode 100644 index 0000000..b2b7bd4 Binary files /dev/null and b/js/ding.mp3 differ diff --git a/js/filter.css b/js/filter.css index c6d7b5a..ba3e6d4 100644 --- a/js/filter.css +++ b/js/filter.css @@ -45,6 +45,11 @@ padding: 20px; } +.cg_popup .control_text:after { + content:"\a"; + white-space: pre; +} + .cg_popup .grid img { margin: 2px; border: 1px solid white; diff --git a/js/popup.js b/js/popup.js index 455bdaf..c10f3a5 100644 --- a/js/popup.js +++ b/js/popup.js @@ -6,6 +6,8 @@ import { create } from "./utils.js"; class Popup extends HTMLSpanElement { constructor() { super() + this.audio = new Audio('extensions/cg-image-filter/ding.mp3'); + this.classList.add('cg_popup') this.counter = create('span', 'cg_counter hidden', document.body) @@ -13,9 +15,13 @@ class Popup extends HTMLSpanElement { this.text_edit = create() this.title_bar = create('span', 'title', this) this.buttons = create('span', 'buttons', this) - this.click_sends_pane = create('span', null, this.buttons) - this.click_sends = create('input', 'control', this.click_sends_pane, {type:"checkbox", id:"click_sends"}) - this.click_sends_label = create('label', 'control_text', this.click_sends_pane, {for:"click_sends", innerText:"click to send"}) + this.checkboxes = create('span', null, this.buttons) + this.click_sends = create('input', 'control', this.checkboxes, {type:"checkbox", id:"click_sends"}) + this.click_sends_label = create('label', 'control_text', this.checkboxes, {for:"click_sends", innerText:"click to send"}) + this.auto_send = create('input', 'control', this.checkboxes, {type:"checkbox", id:"auto_send"}) + this.auto_sends_label = create('label', 'control_text', this.checkboxes, {for:"auto_send", innerText:"auto send if identical"}) + this.play_sound = create('input', 'control', this.checkboxes, {type:"checkbox", id:"play_sound"}) + this.play_sound_label = create('label', 'control_text', this.checkboxes, {for:"play_sound", innerText:"play sound"}) this.send_button = create('button', 'control', this.buttons, {innerText:"Send (S)"} ) this.cancel_button = create('button', 'control', this.buttons, {innerText:"Cancel (X)"} ) this.extras = create('span', 'extras', this.buttons) @@ -36,6 +42,10 @@ class Popup extends HTMLSpanElement { api.fetchApi("/cg-image-filter-message", { method: "POST", body, }); this.close() } + + maybe_play_sound() { + if (this.play_sound.checked) this.audio.play(); + } send_current_state() { if (this.doing_text) { this._send_response(this.text_edit.value) } @@ -73,6 +83,7 @@ class Popup extends HTMLSpanElement { }) ComfyApp.copyToClipspace(this.node) ComfyApp.clipspace_return_node = this.node + this.maybe_play_sound() ComfyApp.open_maskeditor() this.counter.classList.remove('hidden') setTimeout(this.respond_after_maskeditor.bind(this), 1000) @@ -127,6 +138,7 @@ class Popup extends HTMLSpanElement { this.layout() this.classList.remove('hidden') this.counter.classList.remove('hidden') + this.maybe_play_sound() } on_keydown(e) { @@ -144,6 +156,9 @@ class Popup extends HTMLSpanElement { } layout() { + if (this.auto_send.checked) { + // check for all the same + } if (this.laidOut) return const im_w = this.grid.firstChild.naturalWidth @@ -184,7 +199,7 @@ class Popup extends HTMLSpanElement { }) this.send_button.disabled = (!this.doing_text && (this.click_sends.checked || this.picked.size==0)) this.cancel_button.style.visibility = (this.doing_text) ? 'hidden' : 'visible' - this.click_sends_pane.style.visibility = (this.doing_text) ? 'hidden' : 'visible' + this.checkboxes.style.visibility = (this.doing_text) ? 'hidden' : 'visible' this.send_button.innerText = (this.doing_text) ? 'Send' : 'Send (S)' }