From 12fc946c9b958c3927cbb5f2240208a04fe5305b Mon Sep 17 00:00:00 2001 From: Darius Rapalis Date: Thu, 15 Sep 2022 23:49:33 +0300 Subject: [PATCH] Converting HTML Element Builds to JSO style builder with inheritances --- .gitignore | 2 + extension/twitch-notes.js | 2 +- src/HTMLBuilder.ts | 103 +++++++++++++++++++++++++++ src/Mouse.ts | 2 +- src/NoteContainers.ts | 6 +- src/TwitchNote.ts | 78 +++++++++++++-------- src/chatSettingsLine.ts | 38 +++++++--- src/chatSettingsSeparator.ts | 5 -- src/openTwitchNote.ts | 92 +++++++++++++++--------- src/styles/main.scss | 8 ++- src/toggleSettingsList.ts | 132 +++++++++++++++++++++-------------- src/types.ts | 14 ++++ 12 files changed, 344 insertions(+), 138 deletions(-) create mode 100644 src/HTMLBuilder.ts delete mode 100644 src/chatSettingsSeparator.ts diff --git a/.gitignore b/.gitignore index 02960a4..6276f23 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,5 @@ node_modules .idea .vscode + +twitchNotes*.zip \ No newline at end of file diff --git a/extension/twitch-notes.js b/extension/twitch-notes.js index 5d7ef28..75ea943 100644 --- a/extension/twitch-notes.js +++ b/extension/twitch-notes.js @@ -1 +1 @@ -(()=>{"use strict";var t={144:(t,e,n)=>{n.d(e,{Z:()=>a});var o=n(81),i=n.n(o),r=n(645),s=n.n(r)()(i());s.push([t.id,".twitch-note-container{position:fixed;z-index:1000000;min-width:420px;max-width:95vw;min-height:240px;max-height:50vh;background:var(--color-background-base);border:var(--border-width-default) solid var(--color-border-base) !important}.twitch-note-header{width:100%;height:32px;line-height:32px;border-bottom:var(--border-width-default) solid var(--color-border-base) !important;position:relative;cursor:move}.twitch-note-title{color:var(--color-text-alt) !important;font-size:var(--font-size-6) !important;font-weight:var(--font-weight-semibold) !important;text-transform:uppercase !important;padding-left:calc((32px - var(--font-size-6))/2)}.twitch-note-close-button{position:absolute;right:5px;top:5px;width:22px;height:22px;line-height:22px;text-align:center;aspect-ratio:1;color:var(--color-text-alt) !important;font-size:var(--font-size-6) !important;font-weight:var(--font-weight-semibold) !important;text-transform:uppercase !important;cursor:pointer}.twitch-note-content{position:absolute;top:32px;left:0;right:0;bottom:32px;background:rgba(0,0,0,0);color:var(--color-text-base) !important;font-family:var(--font-base);vertical-align:baseline;outline:none;overflow:auto;padding:calc((32px - var(--font-size-6))/2)}.twitch-note-save-button{position:absolute;bottom:0;left:0;right:0;height:32px;border-top:var(--border-width-default) solid var(--color-border-base) !important;cursor:pointer;color:var(--color-text-alt) !important;font-size:var(--font-size-6) !important;font-weight:var(--font-weight-semibold) !important;text-transform:uppercase !important;text-align:center;line-height:32px}.twitch-notes-settings-button{z-index:var(--z-index-default) !important;position:relative !important;background-color:rgba(0,0,0,0);color:var(--color-text-button-primary);text-decoration:none;cursor:pointer;display:inline-flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;vertical-align:middle;overflow:hidden;white-space:nowrap;user-select:none;font-weight:var(--font-weight-semibold);border:2px solid var(--color-text-button-primary);border-radius:var(--border-radius-medium);font-size:var(--button-text-default);height:var(--button-size-default);padding:0 var(--button-padding-x)}.twitch-notes-settings-container{border:0;font:inherit;padding:0;vertical-align:baseline;position:fixed;z-index:var(--z-index-balloon);inset:auto 0 0 auto;margin:0 69px 48px 0}.twitch-notes-settings-balloon{display:inline-block;max-width:90vw;min-width:0;white-space:nowrap;border-radius:.6rem !important;background-color:var(--color-background-base) !important;box-shadow:var(--shadow-elevation-2) !important;color:inherit !important}.twitch-notes-settings-popover{white-space:normal;width:32rem}.twitch-notes-settings-header{display:flex !important;-webkit-box-align:center !important;align-items:center !important;position:relative !important;padding-left:1rem !important;padding-right:1rem !important;background-color:var(--color-background-base) !important;min-height:4rem}.twitch-notes-settings-header-left-element{left:0 !important;margin-right:.5rem !important;width:3rem}.twitch-notes-settings-header-center-element{-webkit-box-align:center !important;align-items:center !important;display:flex !important;text-align:center !important;-webkit-box-flex:1 !important;flex-grow:1 !important;-webkit-box-pack:center !important;justify-content:center !important}.twitch-notes-settings-header-center-element-content{line-height:1.5;color:var(--color-text-alt) !important;font-size:var(--font-size-5) !important;font-weight:var(--font-weight-semibold) !important}.twitch-notes-settings-header-right-element{right:0 !important;margin-left:.5rem !important}.twitch-notes-settings-close-button{cursor:default;text-transform:none;text-indent:0;text-shadow:none;letter-spacing:normal;text-rendering:auto;appearance:auto;writing-mode:horizontal-tb !important;box-sizing:border-box;margin:0;font:inherit;border:none;font-size:var(--button-text-default);font-weight:var(--font-weight-semibold);vertical-align:middle;overflow:hidden;text-decoration:none;white-space:nowrap;position:relative;display:inline-flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;user-select:none;border-radius:var(--border-radius-medium);height:calc(var(--button-size-default) - 1rem);width:calc(var(--button-size-default) - 1rem);background-color:var(--color-background-button-text-default);color:var(--color-fill-button-icon)}.twitch-notes-settings-scrollable-area{display:flex;overflow:hidden;z-index:0;height:100%;position:relative;max-height:478px}.twitch-notes-settings-content{box-sizing:content-box;min-width:100%;overflow-x:hidden;overflow-y:auto;max-height:inherit !important;margin:1rem;padding-bottom:0 !important}.twitch-notes-settings-option-line{position:relative !important;width:calc(100% - 2rem) !important}.twitch-notes-settings-option-line-button{border-radius:var(--border-radius-medium);display:block;width:100%;color:inherit}.twitch-notes-settings-option-line-button:hover{cursor:pointer;text-decoration:none;color:inherit;background-color:var(--color-background-interactable-hover)}.twitch-notes-settings-option-line-button-container{display:flex !important;-webkit-box-align:center !important;align-items:center !important;position:relative !important;padding:.5rem !important}.twitch-notes-settings-option-line-button-container-content{-webkit-box-flex:1 !important;flex-grow:1 !important}.twitch-note-settings-separator{border-top:1px solid var(--color-border-base);margin-top:1rem !important;margin-left:.5rem !important;margin-right:.5rem !important;padding-bottom:1rem !important}.twitch-notes-x-button{position:absolute;left:0;width:100%;min-height:100%;top:0;fill:currentcolor}.twitch-notes-blurred-background{position:fixed;inset:0 0 0 0;z-index:2000000;background:rgba(0,0,0,.4);backdrop-filter:blur(2px)}.twitch-notes-center-floating-container{background:var(--color-background-base);border:var(--border-width-default) solid var(--color-border-base) !important;padding:4rem 2rem 2rem;position:fixed;top:50vh;left:50vw;transform:translate(-50%, -50%);max-height:90vh;max-width:90vw;overflow:auto}.twitch-notes-user-list-user{padding:1rem;border-bottom:var(--border-width-default) solid var(--color-border-base) !important;cursor:pointer}.twitch-notes-user-list-user[data-active]{background:rgba(119,44,232,.2)}",""]);const a=s},645:t=>{t.exports=function(t){var e=[];return e.toString=function(){return this.map((function(e){var n="",o=void 0!==e[5];return e[4]&&(n+="@supports (".concat(e[4],") {")),e[2]&&(n+="@media ".concat(e[2]," {")),o&&(n+="@layer".concat(e[5].length>0?" ".concat(e[5]):""," {")),n+=t(e),o&&(n+="}"),e[2]&&(n+="}"),e[4]&&(n+="}"),n})).join("")},e.i=function(t,n,o,i,r){"string"==typeof t&&(t=[[null,t,void 0]]);var s={};if(o)for(var a=0;a0?" ".concat(c[5]):""," {").concat(c[1],"}")),c[5]=r),n&&(c[2]?(c[1]="@media ".concat(c[2]," {").concat(c[1],"}"),c[2]=n):c[2]=n),i&&(c[4]?(c[1]="@supports (".concat(c[4],") {").concat(c[1],"}"),c[4]=i):c[4]="".concat(i)),e.push(c))}},e}},81:t=>{t.exports=function(t){return t[1]}},379:t=>{var e=[];function n(t){for(var n=-1,o=0;o{var e={};t.exports=function(t,n){var o=function(t){if(void 0===e[t]){var n=document.querySelector(t);if(window.HTMLIFrameElement&&n instanceof window.HTMLIFrameElement)try{n=n.contentDocument.head}catch(t){n=null}e[t]=n}return e[t]}(t);if(!o)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");o.appendChild(n)}},216:t=>{t.exports=function(t){var e=document.createElement("style");return t.setAttributes(e,t.attributes),t.insert(e,t.options),e}},565:(t,e,n)=>{t.exports=function(t){var e=n.nc;e&&t.setAttribute("nonce",e)}},795:t=>{t.exports=function(t){var e=t.insertStyleElement(t);return{update:function(n){!function(t,e,n){var o="";n.supports&&(o+="@supports (".concat(n.supports,") {")),n.media&&(o+="@media ".concat(n.media," {"));var i=void 0!==n.layer;i&&(o+="@layer".concat(n.layer.length>0?" ".concat(n.layer):""," {")),o+=n.css,i&&(o+="}"),n.media&&(o+="}"),n.supports&&(o+="}");var r=n.sourceMap;r&&"undefined"!=typeof btoa&&(o+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(r))))," */")),e.styleTagTransform(o,t,e.options)}(e,t,n)},remove:function(){!function(t){if(null===t.parentNode)return!1;t.parentNode.removeChild(t)}(e)}}}},589:t=>{t.exports=function(t,e){if(e.styleSheet)e.styleSheet.cssText=t;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(t))}}}},e={};function n(o){var i=e[o];if(void 0!==i)return i.exports;var r=e[o]={id:o,exports:{}};return t[o](r,r.exports,n),r.exports}n.n=t=>{var e=t&&t.__esModule?()=>t.default:()=>t;return n.d(e,{a:e}),e},n.d=(t,e)=>{for(var o in e)n.o(e,o)&&!n.o(t,o)&&Object.defineProperty(t,o,{enumerable:!0,get:e[o]})},n.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),n.nc=void 0,(()=>{var t=n(379),e=n.n(t),o=n(795),i=n.n(o),r=n(569),s=n.n(r),a=n(565),l=n.n(a),d=n(216),c=n.n(d),u=n(589),p=n.n(u),h=n(144),m={};m.styleTagTransform=p(),m.setAttributes=l(),m.insert=s().bind(null,"head"),m.domAPI=i(),m.insertStyleElement=c(),e()(h.Z,m),h.Z&&h.Z.locals&&h.Z.locals;var f,v=(f=function(t,e){return f=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n])},f(t,e)},function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Class extends value "+String(e)+" is not a constructor or null");function n(){this.constructor=t}f(t,e),t.prototype=null===e?Object.create(e):(n.prototype=e.prototype,new n)}),g=function(){function t(t,e){if(this.element=document.createElement(t),e.id?this.setId(e.id):this.setId(t+"-generated-id-"+Math.floor(1e7*Math.random())),e.class)if("string"==typeof e.class)this.addClass(e.class);else for(var n=0,o=e.class;nNote conflicts found for:
");p.setStyle({marginTop:"1rem"});for(var h=function(n){var o=new w("",n+" "),r=null===(i=N.inputData.notes.find((function(t){return t.user===n})))||void 0===i?void 0:i.resolved;o.setStyle({color:r?"green":"red"});var s=new x("",r?"[update]":"[resolve]");s.setStyle({cursor:"pointer"}),s.setClickListener((function(){!function(t,e,n,o){var i=new w("twitch-notes-blurred-background"),r=new w("twitch-notes-center-floating-container","Select which note to keep for "+t+"
You can modify notes to merge them and keep updated one

"),s=new w;s.setStyle({display:"flex",flexDirection:"row",flexWrap:"no-wrap",width:"100%"});var a={minWidth:"320px",padding:"6px",border:"1px solid #FFFFFF19",outline:"none"},l=["contentEditable","true"],d=new w,c=new C("","Locally saved note");d.appendCustomChild(c);var u=new w;u.setStyle(a),u.addAttribute.apply(u,l),u.setId("local-value-container");var p=new y("twitch-notes-settings-button","Save this");p.setClickListener((function(){var r,s=(null===(r=document.getElementById("local-value-container"))||void 0===r?void 0:r.innerHTML)||"";N.inputData.notes=N.inputData.notes.map((function(e){return e.user===t?{user:e.user,note:s,resolved:!0}:e})),i.remove(),e.remove(),M(n,o)})),d.appendCustomChild(u),d.appendBody("
"),d.appendCustomChild(p);var h=new w,m=new C("","Imported note");h.appendCustomChild(m);var f=new w("",N.inputData.notes.filter((function(e){return e.user===t}))[0].note||"");f.setId("import-value-container"),f.setStyle(a),f.addAttribute.apply(f,l);var v=new y("twitch-notes-settings-button","Save this");v.setClickListener((function(){var r,s=(null===(r=document.getElementById("import-value-container"))||void 0===r?void 0:r.innerHTML)||"";N.inputData.notes=N.inputData.notes.map((function(e){return e.user===t?{user:e.user,note:s,resolved:!0}:e})),i.remove(),e.remove(),M(n,o)})),h.appendCustomChild(f),h.appendBody("
"),h.appendCustomChild(v),s.appendCustomChild(d),s.appendCustomChild(h),r.appendCustomChild(s),i.appendCustomChild(r),document.body.appendChild(i.getElement())}(n,u,t,e)})),o.appendCustomChild(s),p.appendCustomChild(o)},m=0,f=s;mNote will be added for:
"+r.join("
"));v.setStyle({marginTop:"1rem",color:"white"}),u.appendCustomChild(v)}if(a.length){var g=new w("","No changes for:
"+a.join("
"));g.setStyle({marginTop:"1rem",color:"gray"}),u.appendCustomChild(g)}var b=new w;b.setStyle({height:"24px"}),u.appendCustomChild(b),s=s.filter((function(t){var e;return!(null===(e=N.inputData.notes.find((function(e){return e.user===t})))||void 0===e?void 0:e.resolved)}));var S=new y("twitch-notes-settings-button","Complete import");if(S.setStyle({}),s.length>0&&S.setStyle({background:"gray"}),s.length>0&&S.addAttribute("disabled","true"),u.appendCustomChild(S),s.length>0){var L=new w("","Import cannot be completed while there are unresolved conflicts");L.setStyle({color:"gray"}),u.appendCustomChild(L)}else S.setClickListener((function(){for(var t=0,n=N.inputData.notes;t\n \n \n \n '),c=new w("twitch-notes-settings-scrollable-area"),u=new w("twitch-notes-settings-content"),p=T("Export Notes"),h=T("Import Notes"),m=T("Clear Data"),f=T("View All Notes");return e.appendCustomChild(n),n.appendCustomChild(o),o.appendCustomChild(i),i.appendCustomChild(r),i.appendCustomChild(s),s.appendCustomChild(a),i.appendCustomChild(l),l.appendCustomChild(d),o.appendCustomChild(c),c.appendCustomChild(u),u.appendCustomChild(p),u.appendCustomChild(h),u.appendCustomChild(m),u.appendCustomChild(new w("twitch-note-settings-separator")),u.appendCustomChild(f),d.setClickListener((function(){return F()})),p.setClickListener((function(){N.exportNotes(),F()})),h.setClickListener((function(){!function(){var t=new w("twitch-notes-blurred-background"),e=new w("twitch-notes-center-floating-container","WARNING! This action might override existing data!

"),n=new w("","Select exported twitch notes file

"),o=new b("twitch-notes-file-input");o.addAttribute("type","file").addAttribute("accept","json");var i=new y("twitch-notes-settings-close-button",'\n \n \n \n ');i.setStyle({position:"absolute",top:"1rem",right:"1rem"}),n.appendCustomChild(o),i.setClickListener((function(){t.remove()})),o.setChangeListener((function(){var i;if(null===(i=null==o?void 0:o.getElement())||void 0===i?void 0:i.files){var r=o.getElement().files.item(0);if(r){var s=new FileReader;s.readAsText(r,"UTF-8"),s.onload=function(o){var i;(null===(i=null==o?void 0:o.target)||void 0===i?void 0:i.result)&&(N.inputData=JSON.parse(o.target.result.toString()),N.inputData&&(n.setStyle({display:"none"}),M(e,t)))},s.onerror=function(){console.error("error reading file")}}}})),e.appendCustomChild(i),e.appendCustomChild(n),t.appendCustomChild(e),document.body.appendChild(t.getElement())}(),F()})),m.setClickListener((function(){!function(){var t=new w("twitch-notes-blurred-background"),e=new w("twitch-notes-center-floating-container","This action will delete all saved notes!

Consider exporting notes before performing this action in case you will need to use notes again"),n=new w;n.setStyle({height:"24px"});var o=new y("twitch-notes-settings-button","DELETE ALL NOTES");o.setStyle({background:"red"}),o.setClickListener((function(){N.clearData(),t.remove()}));var i=new y("twitch-notes-settings-button","Cancel");i.setClickListener((function(){t.remove()})),e.appendCustomChild(n),e.appendCustomChild(o),e.appendCustomChild(i),t.appendCustomChild(e),document.body.appendChild(t.getElement())}(),F()})),f.setClickListener((function(){!function(){var t="",e=new w("twitch-notes-blurred-background"),n=new S("","Note saved!");n.setStyle({color:"green",marginLeft:"2rem"}),n.hide();var o=new w("twitch-notes-center-floating-container");o.setStyle({padding:"0",paddingTop:"1rem",width:"100%",maxWidth:"800px",height:"calc(320px + 5rem)",maxHeight:"90vh"});var i=new y("twitch-notes-settings-close-button",'\n \n \n \n ');i.setStyle({position:"absolute",top:"1rem",right:"1rem"});var r=new w("twitch-note-title","Notes:");r.setStyle({borderBottom:"1px solid #FFFFFF19",paddingBottom:"1rem"}),o.appendCustomChild(r);var s=new w;s.setStyle({display:"flex",flexDirection:"row",flexWrap:"no-wrap",width:"100%",height:"320px"}),o.appendCustomChild(s),i.setClickListener((function(){e.remove()})),o.appendCustomChild(i);var a=new w;a.setStyle({borderRight:"1px solid #FFFFFF19",height:"320px",minWidth:"240px",overflowY:"auto",overflowX:"hidden"});var l=new w;l.setStyle({height:"320px",padding:"1rem",width:"100%",opacity:"0"});var d=new w;d.setStyle({marginBottom:"3rem",border:"1px solid #FFFFFF19",height:"calc(320px - 7rem)",width:"100%",padding:"6px",outline:"none",overflowY:"auto",overflowX:"hidden"}),d.addAttribute("contentEditable","true");var c=new y("twitch-notes-settings-button","Save Note");c.setStyle({position:"absolute",bottom:"1rem",left:"1rem"}),c.setClickListener((function(){t&&(N.saveNote(t,d.getElement().innerHTML),n.setStyle({display:"inline-block"}))}));for(var u=function(e){var o=new w("twitch-notes-user-list-user",e);o.setClickListener((function(){for(var i,r=document.getElementsByClassName("twitch-notes-user-list-user"),s=0;s\n \n \n \n ');o.setClickListener((function(){z.removeContainer(t)}));var i=new S("twitch-note-title",t),r=new w("twitch-note-content",N.getNote(t));r.addAttribute("contentEditable","true");var s=new w("twitch-note-save-button","SAVE");s.setClickListener((function(){N.saveNote(t,r.getElement().innerHTML),z.removeContainer(t)})),n.appendCustomChild(o),n.appendCustomChild(i),e.appendCustomChild(n),e.appendCustomChild(r),e.appendCustomChild(s),document.body.appendChild(e.getElement()),z.addContainer(t,e)}}(r)}));var a=new L;a.setStyle({height:"18px",paddingRight:"4px"}),a.addAttribute("src","https://cdn.rdarius.lt/icons/32-id-card.png"),s.appendCustomChild(a),i.insertBefore(s.getElement(),i.firstChild)}},n=0;n{"use strict";var t={144:(t,e,n)=>{n.d(e,{Z:()=>a});var o=n(81),i=n.n(o),r=n(645),s=n.n(r)()(i());s.push([t.id,".twitch-note-container{position:fixed;z-index:1000000;min-width:420px;max-width:95vw;min-height:240px;max-height:50vh;background:var(--color-background-base);border:var(--border-width-default) solid var(--color-border-base) !important}.twitch-note-header{width:100%;height:32px;line-height:32px;border-bottom:var(--border-width-default) solid var(--color-border-base) !important;position:relative;cursor:move}.twitch-note-title{color:var(--color-text-alt) !important;font-size:var(--font-size-6) !important;font-weight:var(--font-weight-semibold) !important;text-transform:uppercase !important;padding-left:calc((32px - var(--font-size-6))/2)}.twitch-note-close-button{position:absolute;right:5px;top:5px;width:22px;height:22px;line-height:22px;text-align:center;aspect-ratio:1;color:var(--color-text-alt) !important;font-size:var(--font-size-6) !important;font-weight:var(--font-weight-semibold) !important;text-transform:uppercase !important;cursor:pointer}.twitch-note-content{position:absolute;top:32px;left:0;right:0;bottom:32px;background:rgba(0,0,0,0);color:var(--color-text-base) !important;font-family:var(--font-base);vertical-align:baseline;outline:none;overflow:auto;padding:calc((32px - var(--font-size-6))/2)}.twitch-note-save-button{position:absolute;bottom:0;left:0;right:0;height:32px;border-top:var(--border-width-default) solid var(--color-border-base) !important;cursor:pointer;color:var(--color-text-alt) !important;font-size:var(--font-size-6) !important;font-weight:var(--font-weight-semibold) !important;text-transform:uppercase !important;text-align:center;line-height:32px}.twitch-notes-settings-button{z-index:var(--z-index-default) !important;position:relative !important;background-color:var(--color-background-button-primary-default);color:var(--color-text-button-primary);text-decoration:none;cursor:pointer;display:inline-flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;vertical-align:middle;overflow:hidden;white-space:nowrap;user-select:none;font-weight:var(--font-weight-semibold);border-radius:var(--border-radius-medium);font-size:var(--button-text-default);height:var(--button-size-default);padding:0 var(--button-padding-x)}.twitch-notes-settings-button__outline{background:rgba(0,0,0,0);border:2px solid var(--color-text-button-primary)}.twitch-notes-settings-container{border:0;font:inherit;padding:0;vertical-align:baseline;position:fixed;z-index:var(--z-index-balloon);inset:auto 0 0 auto;margin:0 69px 48px 0}.twitch-notes-settings-balloon{display:inline-block;max-width:90vw;min-width:0;white-space:nowrap;border-radius:.6rem !important;background-color:var(--color-background-base) !important;box-shadow:var(--shadow-elevation-2) !important;color:inherit !important}.twitch-notes-settings-popover{white-space:normal;width:32rem}.twitch-notes-settings-header{display:flex !important;-webkit-box-align:center !important;align-items:center !important;position:relative !important;padding-left:1rem !important;padding-right:1rem !important;background-color:var(--color-background-base) !important;min-height:4rem}.twitch-notes-settings-header-left-element{left:0 !important;margin-right:.5rem !important;width:3rem}.twitch-notes-settings-header-center-element{-webkit-box-align:center !important;align-items:center !important;display:flex !important;text-align:center !important;-webkit-box-flex:1 !important;flex-grow:1 !important;-webkit-box-pack:center !important;justify-content:center !important}.twitch-notes-settings-header-center-element-content{line-height:1.5;color:var(--color-text-alt) !important;font-size:var(--font-size-5) !important;font-weight:var(--font-weight-semibold) !important}.twitch-notes-settings-header-right-element{right:0 !important;margin-left:.5rem !important}.twitch-notes-settings-close-button{cursor:default;text-transform:none;text-indent:0;text-shadow:none;letter-spacing:normal;text-rendering:auto;appearance:auto;writing-mode:horizontal-tb !important;box-sizing:border-box;margin:0;font:inherit;border:none;font-size:var(--button-text-default);font-weight:var(--font-weight-semibold);vertical-align:middle;overflow:hidden;text-decoration:none;white-space:nowrap;position:relative;display:inline-flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;user-select:none;border-radius:var(--border-radius-medium);height:calc(var(--button-size-default) - 1rem);width:calc(var(--button-size-default) - 1rem);background-color:var(--color-background-button-text-default);color:var(--color-fill-button-icon)}.twitch-notes-settings-scrollable-area{display:flex;overflow:hidden;z-index:0;height:100%;position:relative;max-height:478px}.twitch-notes-settings-content{box-sizing:content-box;min-width:100%;overflow-x:hidden;overflow-y:auto;max-height:inherit !important;margin:1rem;padding-bottom:0 !important}.twitch-notes-settings-option-line{position:relative !important;width:calc(100% - 2rem) !important}.twitch-notes-settings-option-line-button{border-radius:var(--border-radius-medium);display:block;width:100%;color:inherit}.twitch-notes-settings-option-line-button:hover{cursor:pointer;text-decoration:none;color:inherit;background-color:var(--color-background-interactable-hover)}.twitch-notes-settings-option-line-button-container{display:flex !important;-webkit-box-align:center !important;align-items:center !important;position:relative !important;padding:.5rem !important}.twitch-notes-settings-option-line-button-container-content{-webkit-box-flex:1 !important;flex-grow:1 !important}.twitch-note-settings-separator{border-top:1px solid var(--color-border-base);margin-top:1rem !important;margin-left:.5rem !important;margin-right:.5rem !important;padding-bottom:1rem !important}.twitch-notes-x-button{position:absolute;left:0;width:100%;min-height:100%;top:0;fill:currentcolor}.twitch-notes-blurred-background{position:fixed;inset:0 0 0 0;z-index:2000000;background:rgba(0,0,0,.4);backdrop-filter:blur(2px)}.twitch-notes-center-floating-container{background:var(--color-background-base);border:var(--border-width-default) solid var(--color-border-base) !important;padding:4rem 2rem 2rem;position:fixed;top:50vh;left:50vw;transform:translate(-50%, -50%);max-height:90vh;max-width:90vw;overflow:auto}.twitch-notes-user-list-user{padding:1rem;border-bottom:var(--border-width-default) solid var(--color-border-base) !important;cursor:pointer}.twitch-notes-user-list-user[data-active]{background:rgba(119,44,232,.2)}",""]);const a=s},645:t=>{t.exports=function(t){var e=[];return e.toString=function(){return this.map((function(e){var n="",o=void 0!==e[5];return e[4]&&(n+="@supports (".concat(e[4],") {")),e[2]&&(n+="@media ".concat(e[2]," {")),o&&(n+="@layer".concat(e[5].length>0?" ".concat(e[5]):""," {")),n+=t(e),o&&(n+="}"),e[2]&&(n+="}"),e[4]&&(n+="}"),n})).join("")},e.i=function(t,n,o,i,r){"string"==typeof t&&(t=[[null,t,void 0]]);var s={};if(o)for(var a=0;a0?" ".concat(d[5]):""," {").concat(d[1],"}")),d[5]=r),n&&(d[2]?(d[1]="@media ".concat(d[2]," {").concat(d[1],"}"),d[2]=n):d[2]=n),i&&(d[4]?(d[1]="@supports (".concat(d[4],") {").concat(d[1],"}"),d[4]=i):d[4]="".concat(i)),e.push(d))}},e}},81:t=>{t.exports=function(t){return t[1]}},379:t=>{var e=[];function n(t){for(var n=-1,o=0;o{var e={};t.exports=function(t,n){var o=function(t){if(void 0===e[t]){var n=document.querySelector(t);if(window.HTMLIFrameElement&&n instanceof window.HTMLIFrameElement)try{n=n.contentDocument.head}catch(t){n=null}e[t]=n}return e[t]}(t);if(!o)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");o.appendChild(n)}},216:t=>{t.exports=function(t){var e=document.createElement("style");return t.setAttributes(e,t.attributes),t.insert(e,t.options),e}},565:(t,e,n)=>{t.exports=function(t){var e=n.nc;e&&t.setAttribute("nonce",e)}},795:t=>{t.exports=function(t){var e=t.insertStyleElement(t);return{update:function(n){!function(t,e,n){var o="";n.supports&&(o+="@supports (".concat(n.supports,") {")),n.media&&(o+="@media ".concat(n.media," {"));var i=void 0!==n.layer;i&&(o+="@layer".concat(n.layer.length>0?" ".concat(n.layer):""," {")),o+=n.css,i&&(o+="}"),n.media&&(o+="}"),n.supports&&(o+="}");var r=n.sourceMap;r&&"undefined"!=typeof btoa&&(o+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(r))))," */")),e.styleTagTransform(o,t,e.options)}(e,t,n)},remove:function(){!function(t){if(null===t.parentNode)return!1;t.parentNode.removeChild(t)}(e)}}}},589:t=>{t.exports=function(t,e){if(e.styleSheet)e.styleSheet.cssText=t;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(t))}}}},e={};function n(o){var i=e[o];if(void 0!==i)return i.exports;var r=e[o]={id:o,exports:{}};return t[o](r,r.exports,n),r.exports}n.n=t=>{var e=t&&t.__esModule?()=>t.default:()=>t;return n.d(e,{a:e}),e},n.d=(t,e)=>{for(var o in e)n.o(e,o)&&!n.o(t,o)&&Object.defineProperty(t,o,{enumerable:!0,get:e[o]})},n.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),n.nc=void 0,(()=>{var t=n(379),e=n.n(t),o=n(795),i=n.n(o),r=n(569),s=n.n(r),a=n(565),l=n.n(a),c=n(216),d=n.n(c),u=n(589),p=n.n(u),h=n(144),m={};m.styleTagTransform=p(),m.setAttributes=l(),m.insert=s().bind(null,"head"),m.domAPI=i(),m.insertStyleElement=d(),e()(h.Z,m),h.Z&&h.Z.locals&&h.Z.locals;var v="twitch-note-all-users-list",f="twitch-note-";const g=function(){function t(){}return t.getSavedUserList=function(){return JSON.parse(localStorage.getItem(v)||"[]")},t.getNote=function(t){return localStorage.getItem(f+t)||""},t.addUserToSavedList=function(t){var e=this.getSavedUserList();e.includes(t)||(e.push(t),localStorage.setItem(v,JSON.stringify(e)))},t.removeUserFromSavedList=function(t){var e=this.getSavedUserList();(e=e.filter((function(e){return e!==t}))).length?localStorage.setItem(v,JSON.stringify(e)):localStorage.removeItem(v)},t.saveNote=function(t,e){this.addUserToSavedList(t),localStorage.setItem(f+t,e)},t.deleteNote=function(t){this.removeUserFromSavedList(t),localStorage.removeItem(f+t)},t.exportNotes=function(){var t=this,e={users:this.getSavedUserList(),notes:this.getSavedUserList().map((function(e){return{user:e,note:t.getNote(e)}})),settings:{}},n=JSON.stringify(e),o=new Blob([n],{type:"text/json"}),i=window.document.createElement("a");i.href=window.URL.createObjectURL(o),i.download="twitch-notes-"+Date.now()+".json",document.body.appendChild(i),i.click(),document.body.removeChild(i)},t.clearData=function(){for(var t=0,e=this.getSavedUserList();tNote conflicts found for:
");p.setStyle({marginTop:"1rem"});for(var h=function(n){var o=new C("",n+" "),r=null===(i=g.inputData.notes.find((function(t){return t.user===n})))||void 0===i?void 0:i.resolved;o.setStyle({color:r?"green":"red"});var s=new E("",r?"[update]":"[resolve]");s.setStyle({cursor:"pointer"}),s.setClickListener((function(){!function(t,e,n,o){var i=new C("twitch-notes-blurred-background"),r=new C("twitch-notes-center-floating-container","Select which note to keep for "+t+"
You can modify notes to merge them and keep updated one

"),s=new C;s.setStyle({display:"flex",flexDirection:"row",flexWrap:"no-wrap",width:"100%"});var a={minWidth:"320px",padding:"6px",border:"1px solid #FFFFFF19",outline:"none"},l=["contentEditable","true"],c=new C,d=new L("","Locally saved note");c.appendCustomChild(d);var u=new C;u.setStyle(a),u.addAttribute.apply(u,l),u.setId("local-value-container");var p=new k("twitch-notes-settings-button","Save this");p.setClickListener((function(){var r,s=(null===(r=document.getElementById("local-value-container"))||void 0===r?void 0:r.innerHTML)||"";g.inputData.notes=g.inputData.notes.map((function(e){return e.user===t?{user:e.user,note:s,resolved:!0}:e})),i.remove(),e.remove(),N(n,o)})),c.appendCustomChild(u),c.appendBody("
"),c.appendCustomChild(p);var h=new C,m=new L("","Imported note");h.appendCustomChild(m);var v=new C("",g.inputData.notes.filter((function(e){return e.user===t}))[0].note||"");v.setId("import-value-container"),v.setStyle(a),v.addAttribute.apply(v,l);var f=new k("twitch-notes-settings-button","Save this");f.setClickListener((function(){var r,s=(null===(r=document.getElementById("import-value-container"))||void 0===r?void 0:r.innerHTML)||"";g.inputData.notes=g.inputData.notes.map((function(e){return e.user===t?{user:e.user,note:s,resolved:!0}:e})),i.remove(),e.remove(),N(n,o)})),h.appendCustomChild(v),h.appendBody("
"),h.appendCustomChild(f),s.appendCustomChild(c),s.appendCustomChild(h),r.appendCustomChild(s),i.appendCustomChild(r),document.body.appendChild(i.getElement())}(n,u,t,e)})),o.appendCustomChild(s),p.appendCustomChild(o)},m=0,v=s;mNote will be added for:
"+r.join("
"));f.setStyle({marginTop:"1rem",color:"white"}),u.appendCustomChild(f)}if(a.length){var b=new C("","No changes for:
"+a.join("
"));b.setStyle({marginTop:"1rem",color:"gray"}),u.appendCustomChild(b)}var w=new C;w.setStyle({height:"24px"}),u.appendCustomChild(w),s=s.filter((function(t){var e;return!(null===(e=g.inputData.notes.find((function(e){return e.user===t})))||void 0===e?void 0:e.resolved)}));var y=new k("twitch-notes-settings-button","Complete import");if(y.setStyle({}),s.length>0&&y.setStyle({background:"gray"}),s.length>0&&y.addAttribute("disabled","true"),u.appendCustomChild(y),s.length>0){var x=new C("","Import cannot be completed while there are unresolved conflicts");x.setStyle({color:"gray"}),u.appendCustomChild(x)}else y.setClickListener((function(){for(var t=0,n=g.inputData.notes;t\n \n \n \n '],mouseClickEvent:function(){return D()}}]}]},{element:"div",class:"twitch-notes-settings-scrollable-area",content:[{element:"div",class:"twitch-notes-settings-content",content:[T("Export Notes",(function(){g.exportNotes(),D()})),T("Import Notes",(function(){!function(){var t=new C("twitch-notes-blurred-background"),e=new C("twitch-notes-center-floating-container","WARNING! This action might override existing data!

"),n=new C("","Select exported twitch notes file

"),o=new S("twitch-notes-file-input");o.addAttribute("type","file").addAttribute("accept","json");var i=new k("twitch-notes-settings-close-button",'\n \n \n \n ');i.setStyle({position:"absolute",top:"1rem",right:"1rem"}),n.appendCustomChild(o),i.setClickListener((function(){t.remove()})),o.setChangeListener((function(){var i;if(null===(i=null==o?void 0:o.getElement())||void 0===i?void 0:i.files){var r=o.getElement().files.item(0);if(r){var s=new FileReader;s.readAsText(r,"UTF-8"),s.onload=function(o){var i;(null===(i=null==o?void 0:o.target)||void 0===i?void 0:i.result)&&(g.inputData=JSON.parse(o.target.result.toString()),g.inputData&&(n.setStyle({display:"none"}),N(e,t)))},s.onerror=function(){console.error("error reading file")}}}})),e.appendCustomChild(i),e.appendCustomChild(n),t.appendCustomChild(e),document.body.appendChild(t.getElement())}(),D()})),T("Clear Data",(function(){!function(){var t=new C("twitch-notes-blurred-background"),e=new C("twitch-notes-center-floating-container","This action will delete all saved notes!

Consider exporting notes before performing this action in case you will need to use notes again"),n=new C;n.setStyle({height:"24px"});var o=new k("twitch-notes-settings-button","DELETE ALL NOTES");o.setStyle({background:"red"}),o.setClickListener((function(){g.clearData(),t.remove()}));var i=new k("twitch-notes-settings-button","Cancel");i.setClickListener((function(){t.remove()})),e.appendCustomChild(n),e.appendCustomChild(o),e.appendCustomChild(i),t.appendCustomChild(e),document.body.appendChild(t.getElement())}(),D()})),{element:"div",class:"twitch-note-settings-separator"},T("View All Notes",(function(){!function(){var t="",e=new C("twitch-notes-blurred-background"),n=new M("","Note saved!");n.setStyle({color:"green",marginLeft:"2rem"}),n.hide();var o=new C("twitch-notes-center-floating-container");o.setStyle({padding:"0",paddingTop:"1rem",width:"100%",maxWidth:"800px",height:"calc(320px + 5rem)",maxHeight:"90vh"});var i=new k("twitch-notes-settings-close-button",'\n \n \n \n ');i.setStyle({position:"absolute",top:"1rem",right:"1rem"});var r=new C("twitch-note-title","Notes:");r.setStyle({borderBottom:"1px solid #FFFFFF19",paddingBottom:"1rem"}),o.appendCustomChild(r);var s=new C;s.setStyle({display:"flex",flexDirection:"row",flexWrap:"no-wrap",width:"100%",height:"320px"}),o.appendCustomChild(s),i.setClickListener((function(){e.remove()})),o.appendCustomChild(i);var a=new C;a.setStyle({borderRight:"1px solid #FFFFFF19",height:"320px",minWidth:"240px",overflowY:"auto",overflowX:"hidden"});var l=new C;l.setStyle({height:"320px",padding:"1rem",width:"100%",opacity:"0"});var c=new C;c.setStyle({marginBottom:"3rem",border:"1px solid #FFFFFF19",height:"calc(320px - 7rem)",width:"100%",padding:"6px",outline:"none",overflowY:"auto",overflowX:"hidden"}),c.addAttribute("contentEditable","true");var d=new k("twitch-notes-settings-button","Save Note");d.setStyle({position:"absolute",bottom:"1rem",left:"1rem"}),d.setClickListener((function(){t&&(g.saveNote(t,c.getElement().innerHTML),n.setStyle({display:"inline-block"}))}));for(var u=function(e){var o=new C("twitch-notes-user-list-user",e);o.setClickListener((function(){for(var i,r=document.getElementsByClassName("twitch-notes-user-list-user"),s=0;s\n \n \n \n '],mouseClickEvent:function(){return F.removeContainer(t)}},{element:"span",class:"twitch-note-title",content:[t]}]},{element:"div",class:"twitch-note-content",content:[g.getNote(t)],attributes:{contentEditable:"true"},keyUpEvent:function(t){e=t}},{element:"div",class:"twitch-note-save-button",content:["SAVE"],mouseClickEvent:function(){g.saveNote(t,e),F.removeContainer(t)}}]},o=new U(n);document.body.appendChild(o.getElement()),F.addContainer(t,o)}}(r)},content:[{element:"img",style:{height:"18px",paddingRight:"4px"},attributes:{src:"https://cdn.rdarius.lt/icons/32-id-card.png"}}]});i.insertBefore(s.getElement(),i.firstChild)}},n=0;n) { + for (const key in style) { + this.addStyle(key, style[key] || ''); + } + } + + addStyle(key: string, value: string) { + this.element.style.setProperty(key, value); + } + + setMouseClickListener(cb: Function) { + this.element.addEventListener('click', () => cb()); + } + + setContent(content: (HTMLBuilderBlock|string)[]) { + for (let block of content) { + this.addContent(block); + } + } + + addContent(content: HTMLBuilderBlock|string) { + if (typeof content === 'string') { + this.element.innerHTML += content; + } else { + const el = new HTMLBuilder(content); + this.element.appendChild(el.element) + } + } + + setMouseMoveListener(cb: Function) { + this.element.addEventListener('mousemove', () => cb()); + } + + setMouseDownListener(cb: Function) { + this.element.addEventListener('mousedown', () => cb()); + } + + setMouseUpListener(cb: Function) { + this.element.addEventListener('mouseup', () => cb()); + } + + setKeyUpListener(cb: Function) { + this.element.addEventListener('keyup', () => cb(this.element.innerHTML)); + } + + getElement() { + return this.element; + } + + remove() { + this.element.remove(); + } + +} \ No newline at end of file diff --git a/src/Mouse.ts b/src/Mouse.ts index 7a11635..f722c81 100644 --- a/src/Mouse.ts +++ b/src/Mouse.ts @@ -32,7 +32,7 @@ export default class Mouse { if (NoteContainers.activeContainer) { const dx = Mouse.mousePosition.x - Mouse.lastMousePosition.x; const dy = Mouse.mousePosition.y - Mouse.lastMousePosition.y; - NoteContainers.containers[NoteContainers.activeContainer].setStyle({ + NoteContainers.containers[NoteContainers.activeContainer].setStyles({ top: parseInt(NoteContainers.containers[NoteContainers.activeContainer].getElement().style.top) + dy + "px", left: parseInt(NoteContainers.containers[NoteContainers.activeContainer].getElement().style.left) + dx + "px", }); diff --git a/src/NoteContainers.ts b/src/NoteContainers.ts index edb8791..65f647d 100644 --- a/src/NoteContainers.ts +++ b/src/NoteContainers.ts @@ -1,11 +1,11 @@ -import {CustomHTMLElement} from "./CustomHTMLElement"; +import HTMLBuilder from "./HTMLBuilder"; -const containers: {[key: string]: CustomHTMLElement} = {}; +const containers: {[key: string]: HTMLBuilder} = {}; export default { activeContainer: '', containers, - addContainer(username: string, container: CustomHTMLElement) { + addContainer(username: string, container: HTMLBuilder) { if (this.containers[username]) return; this.containers[username] = container; }, diff --git a/src/TwitchNote.ts b/src/TwitchNote.ts index dbdeaf3..bcb9306 100644 --- a/src/TwitchNote.ts +++ b/src/TwitchNote.ts @@ -1,12 +1,7 @@ -import { - CustomButtonElement, - CustomDivElement, - CustomImgElement, - CustomSpanElement -} from "./CustomHTMLElement"; -import {ELEMENT_ButtonContainer} from "./const"; +import { ELEMENT_ButtonContainer } from "./const"; import toggleSettingsList from "./toggleSettingsList"; import openTwitchNote from "./openTwitchNote"; +import HTMLBuilder from "./HTMLBuilder"; export default class TwitchNote { @@ -60,26 +55,41 @@ export default class TwitchNote { return; } - const container1 = new CustomDivElement(); - container1.setStyle({marginLeft: "0.5rem !important"}); - const container2 = new CustomDivElement(); - container1.setStyle({display: "inline-flex !important"}); - const settingsButton = new CustomButtonElement('twitch-notes-settings-button', 'Notes'); - - settingsButton.setClickListener(() => { - toggleSettingsList(); + const btn = new HTMLBuilder({ + element: 'div', + style: { + marginLeft: "0.5rem !important" + }, + content: [ + { + element: 'div', + style: { + display: "inline-flex !important" + }, + content: [ + { + element: 'button', + class: [ + 'twitch-notes-settings-button', + 'twitch-notes-settings-button__outline' + ], + content: [ + 'Notes' + ], + mouseClickEvent: () => toggleSettingsList(), + } + ] + } + ] }); - container2.appendCustomChild(settingsButton); - container1.appendCustomChild(container2); - if (buttonContainer.lastChild) { buttonContainer.lastChild.insertBefore( - container1.getElement(), + btn.getElement(), buttonContainer.lastChild.lastChild ); } else { - buttonContainer.appendChild(container1.getElement()); + buttonContainer.appendChild(btn.getElement()); } } @@ -96,15 +106,27 @@ export default class TwitchNote { if (username) { let noteButton = usernameContainer.querySelector(".twitch-note"); if (!noteButton) { - const twitchNote = new CustomSpanElement('twitch-note'); - twitchNote.setStyle({cursor: 'pointer'}); - twitchNote.setClickListener(() => { - openTwitchNote(username); + const twitchNote = new HTMLBuilder({ + element: 'span', + class: 'twitch-note', + style: { + cursor: 'pointer', + }, + mouseClickEvent: () => openTwitchNote(username), + content: [ + { + element: 'img', + style: { + height: '18px', + paddingRight: '4px' + }, + attributes: { + src: 'https://cdn.rdarius.lt/icons/32-id-card.png' + } + } + ] }); - const img = new CustomImgElement(); - img.setStyle({height: '18px', paddingRight: '4px'}); - img.addAttribute('src', 'https://cdn.rdarius.lt/icons/32-id-card.png'); - twitchNote.appendCustomChild(img); + usernameContainer.insertBefore( twitchNote.getElement(), usernameContainer.firstChild diff --git a/src/chatSettingsLine.ts b/src/chatSettingsLine.ts index f2d1cc2..cbc1f60 100644 --- a/src/chatSettingsLine.ts +++ b/src/chatSettingsLine.ts @@ -1,13 +1,31 @@ -import {CustomButtonElement, CustomDivElement} from "./CustomHTMLElement"; +import {HTMLBuilderBlock} from "./types"; -export default function createChatSettingsLine(text: string) { - const element = new CustomDivElement('twitch-notes-settings-option-line'); - const button = new CustomButtonElement('twitch-notes-settings-option-line-button'); - const buttonContainer = new CustomDivElement('twitch-notes-settings-option-line-button-container'); - const buttonContainerContent = new CustomDivElement('twitch-notes-settings-option-line-button-container-content', text); +export default function createChatSettingsLine(text: string, cb?: Function): HTMLBuilderBlock { - buttonContainer.appendCustomChild(buttonContainerContent); - button.appendCustomChild(buttonContainer); - element.appendCustomChild(button); - return element; + return { + element: 'div', + class: 'twitch-notes-settings-option-line', + content: [ + { + element: 'button', + class: 'twitch-notes-settings-option-line-button', + content: [ + { + element: 'div', + class: 'twitch-notes-settings-option-line-button-container', + content: [ + { + element: 'div', + class: 'twitch-notes-settings-option-line-button-container-content', + content: [ + text + ] + } + ] + } + ] + } + ], + mouseClickEvent: () => cb ? cb() : () => {}, + }; } \ No newline at end of file diff --git a/src/chatSettingsSeparator.ts b/src/chatSettingsSeparator.ts deleted file mode 100644 index b3c23a3..0000000 --- a/src/chatSettingsSeparator.ts +++ /dev/null @@ -1,5 +0,0 @@ -import {CustomDivElement} from "./CustomHTMLElement"; - -export default function createChatSettingsSeparator() { - return new CustomDivElement('twitch-note-settings-separator'); -} \ No newline at end of file diff --git a/src/openTwitchNote.ts b/src/openTwitchNote.ts index 7690c1e..c3c8e51 100644 --- a/src/openTwitchNote.ts +++ b/src/openTwitchNote.ts @@ -1,43 +1,67 @@ import NoteContainers from "./NoteContainers"; -import {CustomDivElement, CustomSpanElement} from "./CustomHTMLElement"; import Mouse from "./Mouse"; import NoteStorage from "./NoteStorage"; -import {getCloseButtonSVG} from "./HTMLTemplates"; +import { getCloseButtonSVG } from "./HTMLTemplates"; +import {HTMLBuilderBlock} from "./types"; +import HTMLBuilder from "./HTMLBuilder"; export default function openTwitchNote(username: string) { if (NoteContainers.containers[username]) return; - const container = new CustomDivElement('twitch-note-container'); - container.setStyle({ - left: Mouse.mousePosition.x + 'px', - top: Mouse.mousePosition.y + 10 + 'px' - }); + let noteContent = NoteStorage.getNote(username); + const container: HTMLBuilderBlock = { + element: 'div', + class: 'twitch-note-container', + style: { + left: Mouse.mousePosition.x + 'px', + top: Mouse.mousePosition.y + 10 + 'px' + }, + content: [ + { + element: 'div', + class: 'twitch-note-header', + mouseDownEvent: () => { + NoteContainers.activeContainer = username; + Mouse.isMouseDown = true; + }, + content: [ + { + element: 'span', + class: 'twitch-note-close-button', + content: [getCloseButtonSVG()], + mouseClickEvent: () => NoteContainers.removeContainer(username), + }, + { + element: 'span', + class: 'twitch-note-title', + content: [username], + } + ] + }, + { + element: 'div', + class: 'twitch-note-content', + content: [NoteStorage.getNote(username)], + attributes: { + contentEditable: 'true' + }, + keyUpEvent: (newContent: string) => { + noteContent = newContent; + } + }, + { + element: 'div', + class: 'twitch-note-save-button', + content: ['SAVE'], + mouseClickEvent: () => { + NoteStorage.saveNote(username, noteContent); + NoteContainers.removeContainer(username); + } + } + ] + }; - const header = new CustomDivElement('twitch-note-header'); - header.setMouseDownListener(() => { - NoteContainers.activeContainer = username; - Mouse.isMouseDown = true; - }); + const containerElement = new HTMLBuilder(container); - const closeButton = new CustomSpanElement('twitch-note-close-button', getCloseButtonSVG()); - closeButton.setClickListener(() => { - NoteContainers.removeContainer(username); - }); - - const title = new CustomSpanElement('twitch-note-title', username); - const content = new CustomDivElement('twitch-note-content', NoteStorage.getNote(username)); - content.addAttribute('contentEditable', 'true'); - - const saveButton = new CustomDivElement('twitch-note-save-button', 'SAVE'); - saveButton.setClickListener(() => { - NoteStorage.saveNote(username, content.getElement().innerHTML); - NoteContainers.removeContainer(username); - }); - - header.appendCustomChild(closeButton); - header.appendCustomChild(title); - container.appendCustomChild(header); - container.appendCustomChild(content); - container.appendCustomChild(saveButton); - document.body.appendChild(container.getElement()); - NoteContainers.addContainer(username, container); + document.body.appendChild(containerElement.getElement()); + NoteContainers.addContainer(username, containerElement); } \ No newline at end of file diff --git a/src/styles/main.scss b/src/styles/main.scss index 08d8478..e7b8562 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -76,7 +76,7 @@ .twitch-notes-settings-button { z-index: var(--z-index-default) !important; position: relative !important; - background-color: transparent; + background-color: var(--color-background-button-primary-default); color: var(--color-text-button-primary); text-decoration: none; cursor: pointer; @@ -90,11 +90,15 @@ white-space: nowrap; user-select: none; font-weight: var(--font-weight-semibold); - border: 2px solid var(--color-text-button-primary); border-radius: var(--border-radius-medium); font-size: var(--button-text-default); height: var(--button-size-default); padding: 0 var(--button-padding-x); + + &__outline { + background: transparent; + border: 2px solid var(--color-text-button-primary); + } } .twitch-notes-settings-container { diff --git a/src/toggleSettingsList.ts b/src/toggleSettingsList.ts index 7cea69d..df33423 100644 --- a/src/toggleSettingsList.ts +++ b/src/toggleSettingsList.ts @@ -1,68 +1,92 @@ -import {CustomButtonElement, CustomDivElement, CustomPElement} from "./CustomHTMLElement"; import NoteStorage from "./NoteStorage"; -import { - getCloseButtonSVG -} from "./HTMLTemplates"; +import { getCloseButtonSVG } from "./HTMLTemplates"; import openAllNoteListWindow from "./openAllNoteListWindow"; import openClearDataWindow from "./openClearDataWindow"; import openImportNotesWindow from "./openImprtNotesWindow"; import createChatSettingsLine from "./chatSettingsLine"; -import createChatSettingsSeparator from "./chatSettingsSeparator"; +import { HTMLBuilderBlock } from "./types"; +import HTMLBuilder from "./HTMLBuilder"; export default function toggleSettingsList() { const settingsWindow = document.querySelector('.twitch-notes-settings-container') as HTMLElement; if (!settingsWindow) { - const settingsContainer = new CustomDivElement('twitch-notes-settings-container'); - const settingsBalloon = new CustomDivElement('twitch-notes-settings-balloon'); - const settingsPopover = new CustomDivElement('twitch-notes-settings-popover'); - const settingsHeader = new CustomDivElement('twitch-notes-settings-header'); - const settingsHeaderLeftElement = new CustomDivElement('twitch-notes-settings-header-left-element'); - const settingsHeaderCenterElement = new CustomDivElement('twitch-notes-settings-header-center-element'); - const settingsHeaderCenterElementContent = new CustomPElement('twitch-notes-settings-header-center-element-content','Twitch Notes Settings'); - const settingsHeaderRightElement = new CustomDivElement('twitch-notes-settings-header-right-element'); - const settingsCloseButton = new CustomButtonElement('twitch-notes-settings-close-button', getCloseButtonSVG()); - const settingsScrollableArea = new CustomDivElement('twitch-notes-settings-scrollable-area'); - const settingsContent = new CustomDivElement('twitch-notes-settings-content'); - const exportNotes = createChatSettingsLine('Export Notes'); - const importNotes = createChatSettingsLine('Import Notes'); - const clearData = createChatSettingsLine('Clear Data'); - const openAllNotes = createChatSettingsLine('View All Notes'); + const settingsContainer: HTMLBuilderBlock = { + element: 'div', + class: 'twitch-notes-settings-container', + content: [{ + element: 'div', + class: 'twitch-notes-settings-balloon', + content: [{ + element: 'div', + class: 'twitch-notes-settings-popover', + content: [ + { + element: 'div', + class: 'twitch-notes-settings-header', + content: [ + { + element: 'div', + class: 'twitch-notes-settings-header-left-element', + }, + { + element: 'div', + class: 'twitch-notes-settings-header-center-element', + content: [{ + element: 'p', + class: 'twitch-notes-settings-header-center-element-content', + content: ['Twitch Notes Settings'] + }] + }, + { + element: 'div', + class: 'twitch-notes-settings-header-right-element', + content: [{ + element: 'button', + class: 'twitch-notes-settings-close-button', + content: [getCloseButtonSVG()], + mouseClickEvent: () => toggleSettingsList(), + }] + } + ] + }, + { + element: 'div', + class: 'twitch-notes-settings-scrollable-area', + content: [{ + element: 'div', + class: 'twitch-notes-settings-content', + content: [ + createChatSettingsLine('Export Notes', () => { + NoteStorage.exportNotes(); + toggleSettingsList(); + }), + createChatSettingsLine('Import Notes',() => { + openImportNotesWindow(); + toggleSettingsList(); + }), + createChatSettingsLine('Clear Data',() => { + openClearDataWindow(); + toggleSettingsList(); + }), + { + element: 'div', + class: 'twitch-note-settings-separator', + }, + createChatSettingsLine('View All Notes',() => { + openAllNoteListWindow(); + toggleSettingsList(); + }), + ] + }] + } + ] + }] + }] + }; - settingsContainer.appendCustomChild(settingsBalloon); - settingsBalloon.appendCustomChild(settingsPopover); - settingsPopover.appendCustomChild(settingsHeader); - settingsHeader.appendCustomChild(settingsHeaderLeftElement); - settingsHeader.appendCustomChild(settingsHeaderCenterElement); - settingsHeaderCenterElement.appendCustomChild(settingsHeaderCenterElementContent); - settingsHeader.appendCustomChild(settingsHeaderRightElement); - settingsHeaderRightElement.appendCustomChild(settingsCloseButton); - settingsPopover.appendCustomChild(settingsScrollableArea); - settingsScrollableArea.appendCustomChild(settingsContent); - settingsContent.appendCustomChild(exportNotes); - settingsContent.appendCustomChild(importNotes); - settingsContent.appendCustomChild(clearData); - settingsContent.appendCustomChild(createChatSettingsSeparator()); - settingsContent.appendCustomChild(openAllNotes); + const settingsContainerElement = new HTMLBuilder(settingsContainer); - settingsCloseButton.setClickListener(() => toggleSettingsList()); - exportNotes.setClickListener(() => { - NoteStorage.exportNotes(); - toggleSettingsList(); - }); - importNotes.setClickListener(() => { - openImportNotesWindow(); - toggleSettingsList(); - }); - clearData.setClickListener(() => { - openClearDataWindow(); - toggleSettingsList(); - }); - openAllNotes.setClickListener(() => { - openAllNoteListWindow(); - toggleSettingsList(); - }); - - document.body.appendChild(settingsContainer.getElement()); + document.body.appendChild(settingsContainerElement.getElement()); return; } else { settingsWindow.remove(); diff --git a/src/types.ts b/src/types.ts index 314197a..9dd28ed 100644 --- a/src/types.ts +++ b/src/types.ts @@ -7,4 +7,18 @@ export type CustomHTMLElementConstructor = { attributes?: {[key: string]: string}, body?: string | HTMLElement, customBody?: CustomHTMLElement, +} + +export type HTMLBuilderBlock = { + element: 'div' | 'span' | 'button' | 'a' | 'p' | 'strong' | 'em' | 'input' | 'img', + id?: string, + class?: string | string[], + style?: Partial, + attributes?: {[key: string]: string}, + content?: (HTMLBuilderBlock | string)[], + mouseClickEvent?: Function, + mouseMoveEvent?: Function, + mouseDownEvent?: Function, + mouseUpEvent?: Function, + keyUpEvent?: Function, } \ No newline at end of file