From 27996c05edb2d4c497c33d4be496ea0d067a4503 Mon Sep 17 00:00:00 2001 From: defaultkavy Date: Tue, 2 Apr 2024 08:54:59 +0800 Subject: [PATCH] fix: role multi select logic --- docs/assets/{index-hy2HKrru.js => index-BKk9KBzt.js} | 2 +- docs/index.html | 2 +- src/main.ts | 3 ++- 3 files changed, 4 insertions(+), 3 deletions(-) rename docs/assets/{index-hy2HKrru.js => index-BKk9KBzt.js} (96%) diff --git a/docs/assets/index-hy2HKrru.js b/docs/assets/index-BKk9KBzt.js similarity index 96% rename from docs/assets/index-hy2HKrru.js rename to docs/assets/index-BKk9KBzt.js index db8806d..ecb0db0 100644 --- a/docs/assets/index-hy2HKrru.js +++ b/docs/assets/index-BKk9KBzt.js @@ -50,7 +50,7 @@ yt-live-chat-text-message-renderer yt-live-chat-author-badge-renderer[type="mode fill: #5e84f1; } -`,Ht={version:"v1.0.6",github_homepage:"https://github.com/defaultkavy/youtube-chat-designer",author_link:"https://x.com/defaultkavy"},Z=new Map,Ut=["Normal","Member","Moderator","Owner"],zt=["Message","Name","Avatar","Author Area","Content Area","Outer Area"],hr=["Message","Name","Timestamp"],lr=["Badge","Avatar"],re=new Map,et=f("view"),K=new ar().css({backgroundColor:"#131313"}).send({name:"ひとり",message:"Hover mouse on the message will show the author role info.",role:"Normal"}).send({name:"郁代",message:"Shift + Left Click on Role list to select multiple role, edit selected role settings in once.",role:"Member"}).send({name:"リョウ",message:"If you want to save your settings, using Copy JSON and save it, you can paste the JSON to recovery your settings.",role:"Moderator"}).send({name:"虹夏",message:"Try to send message for test your design.",role:"Owner"});ge();const qt=f("app").content([f("h1").content(["YouTube Chat Designer",f("span").content(Ht.version),f("a").content("GitHub").href(Ht.github_homepage).target("_blank"),f("a").content("@defaultkavy").href(Ht.author_link).target("_blank")]),f("div").class("content").content([f("div").class("console").content([f("div").class("menu").content([f("div").class("action-row").content([f("div").class("role-list").content([f("button").content("ROLE").on("click",()=>{const e=f("::.role-checkbox"),t=!e.find(r=>r.checked()===!1);e.slice(t?1:0).forEach(r=>r.checked(!t)),ne()}),f("div").content([Ut.map(e=>[f("div").class("role").content(t=>[f("input").class("role-checkbox").type("checkbox").value(e).id(e.toLowerCase()).on("input",ne),f("label").content(e).for(e.toLowerCase()).on("click",r=>{const o=f("::.role-checkbox"),i=t.$(`input#${e.toLowerCase()}`),s=o.filter(n=>n.checked()).length>1;if(r.shiftKey)return s?void 0:i.checked()?r.preventDefault():void 0;if(i.checked())return r.preventDefault();o.forEach(n=>{n.id()!==e.toLowerCase()&&n.checked(!1)})})])])])]),f("div").class("button-list").content([f("div").class("button-group").content([f("span").content("JSON"),f("button").content("Paste").self(e=>{let t;e.on("click",async r=>{const o=await navigator.clipboard.readText();try{const i=JSON.parse(o);ge(i)}catch{e.content("Error!").class("error").removeClass("done"),t&&clearTimeout(t),t=setTimeout(()=>{e.removeClass("error").content("Paste"),t=void 0},3e3);return}fe(),e.content("Pasted!").class("done").removeClass("error"),t&&clearTimeout(t),t=setTimeout(()=>{e.removeClass("done").content("Paste"),t=void 0},3e3)})}),f("button").content("Copy").self(e=>{let t;e.on("click",r=>{navigator.clipboard.writeText(JSON.stringify(cr())),e.content("Copied!").class("done"),t&&clearTimeout(t),t=setTimeout(()=>{e.removeClass("done").content("Copy"),t=void 0},3e3)})})]),f("div").class("button-group").content([f("span").content("CSS"),f("button").content("Copy").self(e=>{let t;e.on("click",r=>{navigator.clipboard.writeText(ur()),e.content("Copied!").class("done"),t&&clearTimeout(t),t=setTimeout(()=>{e.removeClass("done").content("Copy"),t=void 0},3e3)})})])])]),f("div").class("element-list").content(e=>[zt.map(t=>f("button").staticClass("element-button").content(t).on("click",(r,o)=>et.switchView(t)).self(r=>{et.event.on("switch",o=>{o!==t?r.removeClass("active"):r.addClass("active")})}).on("mouseenter",r=>{K.showHint(t)}))]).on("mouseleave",e=>{K.hideHint()})]),et]),f("div").class("preview").content([f("header").content([f("h2").content("YouTube Chat Preview"),new Ct("ytchat-background-color").label("Background Color").value("#131313").on("input",(e,t)=>{K.css({backgroundColor:t.$color.value()})})]),K,f("div").class("input-panel").content([f("div").content([f("select").id("role-select").add([Ut.map(e=>f("option").content(e).value(e))]),f("input").id("username").placeholder("User Name")]),f("div").content([f("textarea").id("message-input").attribute("placeholder","Type here...").on("keydown",e=>{e.key==="Enter"&&(e.preventDefault(),ae())}),f("button").content("Send").on("click",e=>{ae()})])])])])]);f(document.body).content(qt);fe();window.addEventListener("resize",()=>pr());function ge(e=sr){Z.clear();for(const t of Ut){const r=new Map;Z.set(t,r);for(const o of zt){const i=mr(e[t][o]),s=new ir(i);r.set(o,s),K.updateStyle(o,s,[t])}}et.deleteAllView().clear();for(const t of zt){const r=new or(t,hr.includes(t)?"text":lr.includes(t)?"image":"element");re.set(t,r),et.setView(t,r)}}function fe(){et.switchView("Message"),f("::.role-checkbox")?.forEach(e=>e.checked(!1)),f(":#normal")?.checked(!0),re.forEach(e=>e.update().layout())}function ne(){re.forEach(e=>e.layout())}function ae(){const e=f(":#message-input").value().trim();e!==""&&(K.send({name:f(":#username").value(),message:e,role:f(":#role-select").value()}),K.dom.scrollTop=K.dom.scrollHeight)}function ur(){let e=dr;for(const[r,o]of Z)for(const[i,s]of o){let n=r==="Normal"?"yt-live-chat-text-message-renderer":`yt-live-chat-text-message-renderer[author-type="${r.toLowerCase()}"]`;switch(i){case"Message":n+=" #message";break;case"Name":n+=" #author-name ";break;case"Badge":n+=" #chat-bagdes";break;case"Avatar":n+=" #author-photo";break;case"Author Area":n+=" yt-live-chat-author-clip";break;case"Content Area":n+=" #content";break}let a="";for(const[h,d]of Object.entries(s.data))a+=` ${t(h)}: ${d} !important; +`,Ht={version:"v1.0.6",github_homepage:"https://github.com/defaultkavy/youtube-chat-designer",author_link:"https://x.com/defaultkavy"},Z=new Map,Ut=["Normal","Member","Moderator","Owner"],zt=["Message","Name","Avatar","Author Area","Content Area","Outer Area"],hr=["Message","Name","Timestamp"],lr=["Badge","Avatar"],re=new Map,et=f("view"),K=new ar().css({backgroundColor:"#131313"}).send({name:"ひとり",message:"Hover mouse on the message will show the author role info.",role:"Normal"}).send({name:"郁代",message:"Shift + Left Click on Role list to select multiple role, edit selected role settings in once.",role:"Member"}).send({name:"リョウ",message:"If you want to save your settings, using Copy JSON and save it, you can paste the JSON to recovery your settings.",role:"Moderator"}).send({name:"虹夏",message:"Try to send message for test your design.",role:"Owner"});ge();const qt=f("app").content([f("h1").content(["YouTube Chat Designer",f("span").content(Ht.version),f("a").content("GitHub").href(Ht.github_homepage).target("_blank"),f("a").content("@defaultkavy").href(Ht.author_link).target("_blank")]),f("div").class("content").content([f("div").class("console").content([f("div").class("menu").content([f("div").class("action-row").content([f("div").class("role-list").content([f("button").content("ROLE").on("click",()=>{const e=f("::.role-checkbox"),t=!e.find(r=>r.checked()===!1);e.slice(t?1:0).forEach(r=>r.checked(!t)),ne()}),f("div").content([Ut.map(e=>[f("div").class("role").content(t=>[f("input").class("role-checkbox").type("checkbox").value(e).id(e.toLowerCase()).on("input",ne),f("label").content(e).for(e.toLowerCase()).on("click",r=>{const o=f("::.role-checkbox"),i=t.$(`input#${e.toLowerCase()}`),s=o.filter(n=>n.checked()).length>1;if(r.shiftKey)return s?void 0:i.checked()?r.preventDefault():void 0;if(i.checked()&&!s)return r.preventDefault();i.checked()&&s&&r.preventDefault(),o.forEach(n=>{n.id()!==e.toLowerCase()&&n.checked(!1)})})])])])]),f("div").class("button-list").content([f("div").class("button-group").content([f("span").content("JSON"),f("button").content("Paste").self(e=>{let t;e.on("click",async r=>{const o=await navigator.clipboard.readText();try{const i=JSON.parse(o);ge(i)}catch{e.content("Error!").class("error").removeClass("done"),t&&clearTimeout(t),t=setTimeout(()=>{e.removeClass("error").content("Paste"),t=void 0},3e3);return}fe(),e.content("Pasted!").class("done").removeClass("error"),t&&clearTimeout(t),t=setTimeout(()=>{e.removeClass("done").content("Paste"),t=void 0},3e3)})}),f("button").content("Copy").self(e=>{let t;e.on("click",r=>{navigator.clipboard.writeText(JSON.stringify(cr())),e.content("Copied!").class("done"),t&&clearTimeout(t),t=setTimeout(()=>{e.removeClass("done").content("Copy"),t=void 0},3e3)})})]),f("div").class("button-group").content([f("span").content("CSS"),f("button").content("Copy").self(e=>{let t;e.on("click",r=>{navigator.clipboard.writeText(ur()),e.content("Copied!").class("done"),t&&clearTimeout(t),t=setTimeout(()=>{e.removeClass("done").content("Copy"),t=void 0},3e3)})})])])]),f("div").class("element-list").content(e=>[zt.map(t=>f("button").staticClass("element-button").content(t).on("click",(r,o)=>et.switchView(t)).self(r=>{et.event.on("switch",o=>{o!==t?r.removeClass("active"):r.addClass("active")})}).on("mouseenter",r=>{K.showHint(t)}))]).on("mouseleave",e=>{K.hideHint()})]),et]),f("div").class("preview").content([f("header").content([f("h2").content("YouTube Chat Preview"),new Ct("ytchat-background-color").label("Background Color").value("#131313").on("input",(e,t)=>{K.css({backgroundColor:t.$color.value()})})]),K,f("div").class("input-panel").content([f("div").content([f("select").id("role-select").add([Ut.map(e=>f("option").content(e).value(e))]),f("input").id("username").placeholder("User Name")]),f("div").content([f("textarea").id("message-input").attribute("placeholder","Type here...").on("keydown",e=>{e.key==="Enter"&&(e.preventDefault(),ae())}),f("button").content("Send").on("click",e=>{ae()})])])])])]);f(document.body).content(qt);fe();window.addEventListener("resize",()=>pr());function ge(e=sr){Z.clear();for(const t of Ut){const r=new Map;Z.set(t,r);for(const o of zt){const i=mr(e[t][o]),s=new ir(i);r.set(o,s),K.updateStyle(o,s,[t])}}et.deleteAllView().clear();for(const t of zt){const r=new or(t,hr.includes(t)?"text":lr.includes(t)?"image":"element");re.set(t,r),et.setView(t,r)}}function fe(){et.switchView("Message"),f("::.role-checkbox")?.forEach(e=>e.checked(!1)),f(":#normal")?.checked(!0),re.forEach(e=>e.update().layout())}function ne(){re.forEach(e=>e.layout())}function ae(){const e=f(":#message-input").value().trim();e!==""&&(K.send({name:f(":#username").value(),message:e,role:f(":#role-select").value()}),K.dom.scrollTop=K.dom.scrollHeight)}function ur(){let e=dr;for(const[r,o]of Z)for(const[i,s]of o){let n=r==="Normal"?"yt-live-chat-text-message-renderer":`yt-live-chat-text-message-renderer[author-type="${r.toLowerCase()}"]`;switch(i){case"Message":n+=" #message";break;case"Name":n+=" #author-name ";break;case"Badge":n+=" #chat-bagdes";break;case"Avatar":n+=" #author-photo";break;case"Author Area":n+=" yt-live-chat-author-clip";break;case"Content Area":n+=" #content";break}let a="";for(const[h,d]of Object.entries(s.data))a+=` ${t(h)}: ${d} !important; `;e+=`${n} { ${a} } diff --git a/docs/index.html b/docs/index.html index d2aad71..adb2cb7 100644 --- a/docs/index.html +++ b/docs/index.html @@ -29,7 +29,7 @@ - + diff --git a/src/main.ts b/src/main.ts index 82ae91f..e6a9a7c 100644 --- a/src/main.ts +++ b/src/main.ts @@ -60,7 +60,8 @@ const $app = $('app').content([ return }; } - if ($self_input.checked()) return e.preventDefault(); + if ($self_input.checked() && !IS_MULTI_CHECKED) return e.preventDefault(); + if ($self_input.checked() && IS_MULTI_CHECKED) e.preventDefault(); $input_list.forEach($input => { if ($input.id() !== id.toLowerCase()) $input.checked(false) })