From 1ba0647eedcf8b69e148fff7bc41836dea45c381 Mon Sep 17 00:00:00 2001 From: Sova <108209320+NceSova@users.noreply.github.com> Date: Sun, 23 Jun 2024 12:35:11 +0300 Subject: [PATCH] new ui refactor --- index.html | 2 +- main.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index b178b89..0240c7a 100644 --- a/index.html +++ b/index.html @@ -1 +1 @@ -To-Do
To-Do

Новая заметка

\ No newline at end of file +To-Do
To-Do

Новая заметка

\ No newline at end of file diff --git a/main.js b/main.js index 98300ff..5458948 100644 --- a/main.js +++ b/main.js @@ -1 +1 @@ -(()=>{"use strict";var e={523:(e,t,n)=>{n.d(t,{A:()=>s});var r=n(601),o=n.n(r),i=n(314),a=n.n(i)()(o());a.push([e.id,"* {\n padding: 0;\n margin: 0;\n box-sizing: border-box;\n}\n\nbody {\n height: 100vh;\n}\n\n.main-container {\n height: 100%;\n display: grid;\n grid-template-columns: 4fr 7fr;\n}\n\n.main-sidebar {\n display: grid;\n grid-template-rows: 64px 1fr 1fr;\n}\n\n.form-sidebar {\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n\n.title-sidebar {\n height: 100%;\n border: 2px solid cyan;\n font-size: 2rem;\n display: grid;\n place-content: center;\n}\n\ndialog form {\n width: 300px;\n display: flex;\n flex-direction: column;\n align-items: center;\n & textarea {\n width: 100%;\n height: 150px;\n }\n}\n\ndialog {\n transform: translateX(-50%);\n left: 50%;\n}\ndialog::backdrop {\n backdrop-filter: blur(4px);\n}\n\n.main-grid {\n border: 2px solid blue;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n grid-template-rows: repeat(auto-fit, 200px);\n display: grid;\n justify-items: center;\n padding: 16px;\n gap: 24px;\n}\n\n.note-container {\n width: clamp(200px, 100%, 400px);\n height: 200px;\n border-radius: 16px;\n border: 2px solid red;\n display: grid;\n grid-template-rows: 2fr 4fr 1fr;\n}\n\n.title {\n height: fit-content;\n padding: 12px;\n width: 100%;\n font-size: x-large;\n font-weight: 600;\n border: none;\n border-radius: 16px;\n}\n\n.description {\n padding: 12px;\n width: 100%;\n height: 100%;\n border: none;\n}\n\n.note-container input:focus {\n outline: 2px dotted blue;\n}\n\n.note-container input {\n border-radius: 16px;\n}\n\n.note-container textarea {\n resize: none;\n border-radius: 16px;\n &:focus {\n outline: 2px dotted blue;\n }\n}\n",""]);const s=a},314:e=>{e.exports=function(e){var t=[];return t.toString=function(){return this.map((function(t){var n="",r=void 0!==t[5];return t[4]&&(n+="@supports (".concat(t[4],") {")),t[2]&&(n+="@media ".concat(t[2]," {")),r&&(n+="@layer".concat(t[5].length>0?" ".concat(t[5]):""," {")),n+=e(t),r&&(n+="}"),t[2]&&(n+="}"),t[4]&&(n+="}"),n})).join("")},t.i=function(e,n,r,o,i){"string"==typeof e&&(e=[[null,e,void 0]]);var a={};if(r)for(var s=0;s0?" ".concat(l[5]):""," {").concat(l[1],"}")),l[5]=i),n&&(l[2]?(l[1]="@media ".concat(l[2]," {").concat(l[1],"}"),l[2]=n):l[2]=n),o&&(l[4]?(l[1]="@supports (".concat(l[4],") {").concat(l[1],"}"),l[4]=o):l[4]="".concat(o)),t.push(l))}},t}},601:e=>{e.exports=function(e){return e[1]}},72:e=>{var t=[];function n(e){for(var n=-1,r=0;r{var t={};e.exports=function(e,n){var r=function(e){if(void 0===t[e]){var n=document.querySelector(e);if(window.HTMLIFrameElement&&n instanceof window.HTMLIFrameElement)try{n=n.contentDocument.head}catch(e){n=null}t[e]=n}return t[e]}(e);if(!r)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");r.appendChild(n)}},540:e=>{e.exports=function(e){var t=document.createElement("style");return e.setAttributes(t,e.attributes),e.insert(t,e.options),t}},56:(e,t,n)=>{e.exports=function(e){var t=n.nc;t&&e.setAttribute("nonce",t)}},825:e=>{e.exports=function(e){if("undefined"==typeof document)return{update:function(){},remove:function(){}};var t=e.insertStyleElement(e);return{update:function(n){!function(e,t,n){var r="";n.supports&&(r+="@supports (".concat(n.supports,") {")),n.media&&(r+="@media ".concat(n.media," {"));var o=void 0!==n.layer;o&&(r+="@layer".concat(n.layer.length>0?" ".concat(n.layer):""," {")),r+=n.css,o&&(r+="}"),n.media&&(r+="}"),n.supports&&(r+="}");var i=n.sourceMap;i&&"undefined"!=typeof btoa&&(r+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(i))))," */")),t.styleTagTransform(r,e,t.options)}(t,e,n)},remove:function(){!function(e){if(null===e.parentNode)return!1;e.parentNode.removeChild(e)}(t)}}}},113:e=>{e.exports=function(e,t){if(t.styleSheet)t.styleSheet.cssText=e;else{for(;t.firstChild;)t.removeChild(t.firstChild);t.appendChild(document.createTextNode(e))}}}},t={};function n(r){var o=t[r];if(void 0!==o)return o.exports;var i=t[r]={id:r,exports:{}};return e[r](i,i.exports,n),i.exports}n.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return n.d(t,{a:t}),t},n.d=(e,t)=>{for(var r in t)n.o(t,r)&&!n.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),n.nc=void 0;var r=n(72),o=n.n(r),i=n(825),a=n.n(i),s=n(659),d=n.n(s),c=n(56),l=n.n(c),u=n(540),p=n.n(u),f=n(113),h=n.n(f),m=n(523),v={};v.styleTagTransform=h(),v.setAttributes=l(),v.insert=d().bind(null,"head"),v.domAPI=a(),v.insertStyleElement=p(),o()(m.A,v),m.A&&m.A.locals&&m.A.locals;const g={randomUUID:"undefined"!=typeof crypto&&crypto.randomUUID&&crypto.randomUUID.bind(crypto)};var y,b=new Uint8Array(16);function x(){if(!y&&!(y="undefined"!=typeof crypto&&crypto.getRandomValues&&crypto.getRandomValues.bind(crypto)))throw new Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported");return y(b)}for(var N=[],w=0;w<256;++w)N.push((w+256).toString(16).slice(1));const C=function(e,t,n){if(g.randomUUID&&!t&&!e)return g.randomUUID();var r=(e=e||{}).random||(e.rng||x)();if(r[6]=15&r[6]|64,r[8]=63&r[8]|128,t){n=n||0;for(var o=0;o<16;++o)t[n+o]=r[o];return t}return function(e,t=0){return(N[e[t+0]]+N[e[t+1]]+N[e[t+2]]+N[e[t+3]]+"-"+N[e[t+4]]+N[e[t+5]]+"-"+N[e[t+6]]+N[e[t+7]]+"-"+N[e[t+8]]+N[e[t+9]]+"-"+N[e[t+10]]+N[e[t+11]]+N[e[t+12]]+N[e[t+13]]+N[e[t+14]]+N[e[t+15]]).toLowerCase()}(r)},S=function(){function e(){this._list=Array(),null===JSON.parse(localStorage.getItem("notes"))&&localStorage.setItem("notes",this.getNotesJson());var e=this.loadNotes();console.log(e),this._list=e}return e.prototype.addNote=function(e,t,n){var r={uuid:C(),title:e,description:t,priority:n};this._list.push(r),this.saveNotes()},e.prototype.saveNotes=function(){localStorage.setItem("notes",this.getNotesJson())},e.prototype.loadNotes=function(){var e=JSON.parse(localStorage.getItem("notes")),t=Array();return console.log(e),e.forEach((function(e){t.push(e)})),t},e.prototype.deleteNote=function(e){var t=this._list.findIndex((function(t){return t.uuid===e}));this._list.splice(t,1),this.saveNotes()},e.prototype.getNotes=function(){return this.loadNotes()},e.prototype.getNotesJson=function(){return JSON.stringify(this._list)},e.prototype.getNoteUuidByIndex=function(e){var t=this._list[e].uuid;return console.log(t),t},e.prototype.updateNoteByUuid=function(e,t,n){var r=this._list.findIndex((function(t){return t.uuid===e}));console.log(r),-1!==r&&(this._list[r][t]=n,this.saveNotes())},e}(),E=function(){function e(e,t,n){this.document=e,this.dblClickEventCallback=t,this.setChangeEventCallback=n}return e.prototype.renderNotes=function(e){var t=this,n=this.document.querySelector(".main-grid");n.innerHTML="",e.forEach((function(e){console.log("note created"),n.appendChild(t.createNoteDiv(e))}))},e.prototype.createNoteDiv=function(e){var t=this,n=this.document.createElement("div");n.id=e.uuid,n.classList.add("note-container");var r=this.document.createElement("input");r.className="title",r.value=e.title;var o=this.document.createElement("textarea");o.className="description",o.value=e.description;var i=this.document.createElement("div");return i.className="priority",i.textContent="Приоритет: "+e.priority,n.appendChild(r),n.appendChild(o),n.appendChild(i),n.ondblclick=function(e){t.dblClickEventCallback(e)},this.setChangeEventCallback(n),n},e}();new(function(){function e(e){this.model=new S,this.view=new E(e,this.noteDblClickHandler.bind(this),this.setNoteUpdateHandler.bind(this)),this.document=e,this.formSubmitHandler()}return e.prototype.render=function(){var e=this.model.getNotes();console.log(this.model.getNotesJson()),this.view.renderNotes(e)},e.prototype.noteDblClickHandler=function(e){var t=e.target.parentElement.id;console.log(t),console.log(this),console.log(this.model),this.model.deleteNote(t),this.render()},e.prototype.setNoteUpdateHandler=function(e){var t=this;e.addEventListener("change",(function(e){var n=e.target,r=n.parentElement.id;t.model.updateNoteByUuid(r,n.className,n.value),t.render()}))},e.prototype.formSubmitHandler=function(){var e=this;this.document.querySelector("#newNoteDialog>form").addEventListener("submit",(function(t){var n=e.document.querySelector("#formTitle"),r=e.document.querySelector("#formDescription"),o=e.document.querySelector("#formPriority");e.model.addNote(n.value,r.value,o.value),n.value="",r.value="",o.value="low",e.render()}))},e}())(document).render()})(); \ No newline at end of file +(()=>{"use strict";var n={523:(n,e,t)=>{t.d(e,{A:()=>c});var r=t(601),o=t.n(r),i=t(314),a=t.n(i)()(o());a.push([n.id,"@import url(https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap);"]),a.push([n.id,'* {\n padding: 0;\n margin: 0;\n box-sizing: border-box;\n font-family: "Open Sans", sans-serif;\n}\n\n:root {\n --color-primary: #3730a3;\n --color-primary-text: #e0e7ff;\n --color-background: #f1f5f9;\n --color-element: #cbd5e1;\n --color-element-text: #1e293b;\n --red: #fecaca;\n --yellow: #fef08a;\n --green: #bbf7d0;\n}\n\nbody {\n height: 100vh;\n}\n\n.main-container {\n height: 100%;\n display: flex;\n flex-direction: column;\n}\n\n.main-sidebar {\n height: 64px;\n}\n\n.title-sidebar {\n background-color: var(--color-primary);\n color: var(--color-primary-text);\n height: 100%;\n font-size: 2rem;\n display: grid;\n place-content: center;\n}\n\ndialog form {\n width: 300px;\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: 8px;\n & input {\n width: 100%;\n height: 32px;\n }\n & textarea {\n resize: none;\n width: 100%;\n height: 120px;\n }\n & select {\n padding: 8px;\n width: 100%;\n }\n & button {\n padding: 8px;\n margin: 4px;\n border-radius: 12px;\n align-self: flex-end;\n color: var(--color-primary-text);\n background-color: var(--color-primary);\n border: none;\n }\n}\n\ndialog {\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n}\ndialog::backdrop {\n backdrop-filter: blur(4px);\n}\n\n.main-grid {\n flex: 1;\n background-color: var(--color-background);\n grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));\n grid-template-rows: repeat(auto-fit, 150px);\n display: grid;\n justify-items: center;\n padding: 16px;\n gap: 24px;\n}\n\n.note-container {\n box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px,\n rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;\n color: var(--color-element-text);\n background-color: var(--color-element);\n border-radius: 8px;\n overflow: hidden;\n width: clamp(180px, 100%, 300px);\n height: 150px;\n display: grid;\n grid-template-rows: 2fr 4fr 1fr;\n & textarea {\n color: var(--color-element-text);\n background-color: var(--color-element);\n resize: none;\n }\n & input {\n color: var(--color-element-text);\n background-color: var(--color-element);\n border: none;\n }\n & button {\n color: var(--color-primary-text);\n background-color: var(--color-primary);\n border: none;\n padding: 8px;\n &:hover {\n background-color: red;\n transition: 200ms;\n }\n }\n}\n\n.title {\n height: fit-content;\n padding: 12px;\n width: 100%;\n font-size: 1.2rem;\n font-weight: 600;\n border: none;\n}\n\n.description {\n padding: 8px;\n width: 100%;\n height: 100%;\n border: none;\n}\n\n.priority {\n display: flex;\n align-items: center;\n padding: 4px;\n}\n\n.delete {\n border-radius: 16px;\n padding: 4px;\n margin-left: auto;\n}\n\n.low {\n background-color: var(--green);\n}\n.mid {\n background-color: var(--yellow);\n}\n.high {\n background-color: var(--red);\n}\n\n.fab {\n background-color: var(--color-primary);\n color: var(--color-primary-text);\n border: none;\n position: fixed;\n bottom: 40px;\n right: 40px;\n border-radius: 50px;\n font-size: 32px;\n height: 80px;\n width: 80px;\n}\n',""]);const c=a},314:n=>{n.exports=function(n){var e=[];return e.toString=function(){return this.map((function(e){var t="",r=void 0!==e[5];return e[4]&&(t+="@supports (".concat(e[4],") {")),e[2]&&(t+="@media ".concat(e[2]," {")),r&&(t+="@layer".concat(e[5].length>0?" ".concat(e[5]):""," {")),t+=n(e),r&&(t+="}"),e[2]&&(t+="}"),e[4]&&(t+="}"),t})).join("")},e.i=function(n,t,r,o,i){"string"==typeof n&&(n=[[null,n,void 0]]);var a={};if(r)for(var c=0;c0?" ".concat(d[5]):""," {").concat(d[1],"}")),d[5]=i),t&&(d[2]?(d[1]="@media ".concat(d[2]," {").concat(d[1],"}"),d[2]=t):d[2]=t),o&&(d[4]?(d[1]="@supports (".concat(d[4],") {").concat(d[1],"}"),d[4]=o):d[4]="".concat(o)),e.push(d))}},e}},601:n=>{n.exports=function(n){return n[1]}},72:n=>{var e=[];function t(n){for(var t=-1,r=0;r{var e={};n.exports=function(n,t){var r=function(n){if(void 0===e[n]){var t=document.querySelector(n);if(window.HTMLIFrameElement&&t instanceof window.HTMLIFrameElement)try{t=t.contentDocument.head}catch(n){t=null}e[n]=t}return e[n]}(n);if(!r)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");r.appendChild(t)}},540:n=>{n.exports=function(n){var e=document.createElement("style");return n.setAttributes(e,n.attributes),n.insert(e,n.options),e}},56:(n,e,t)=>{n.exports=function(n){var e=t.nc;e&&n.setAttribute("nonce",e)}},825:n=>{n.exports=function(n){if("undefined"==typeof document)return{update:function(){},remove:function(){}};var e=n.insertStyleElement(n);return{update:function(t){!function(n,e,t){var r="";t.supports&&(r+="@supports (".concat(t.supports,") {")),t.media&&(r+="@media ".concat(t.media," {"));var o=void 0!==t.layer;o&&(r+="@layer".concat(t.layer.length>0?" ".concat(t.layer):""," {")),r+=t.css,o&&(r+="}"),t.media&&(r+="}"),t.supports&&(r+="}");var i=t.sourceMap;i&&"undefined"!=typeof btoa&&(r+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(i))))," */")),e.styleTagTransform(r,n,e.options)}(e,n,t)},remove:function(){!function(n){if(null===n.parentNode)return!1;n.parentNode.removeChild(n)}(e)}}}},113:n=>{n.exports=function(n,e){if(e.styleSheet)e.styleSheet.cssText=n;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(n))}}}},e={};function t(r){var o=e[r];if(void 0!==o)return o.exports;var i=e[r]={id:r,exports:{}};return n[r](i,i.exports,t),i.exports}t.n=n=>{var e=n&&n.__esModule?()=>n.default:()=>n;return t.d(e,{a:e}),e},t.d=(n,e)=>{for(var r in e)t.o(e,r)&&!t.o(n,r)&&Object.defineProperty(n,r,{enumerable:!0,get:e[r]})},t.o=(n,e)=>Object.prototype.hasOwnProperty.call(n,e),t.nc=void 0;var r=t(72),o=t.n(r),i=t(825),a=t.n(i),c=t(659),s=t.n(c),l=t(56),d=t.n(l),u=t(540),p=t.n(u),f=t(113),m=t.n(f),h=t(523),v={};v.styleTagTransform=m(),v.setAttributes=d(),v.insert=s().bind(null,"head"),v.domAPI=a(),v.insertStyleElement=p(),o()(h.A,v),h.A&&h.A.locals&&h.A.locals;const g={randomUUID:"undefined"!=typeof crypto&&crypto.randomUUID&&crypto.randomUUID.bind(crypto)};var y,x=new Uint8Array(16);function b(){if(!y&&!(y="undefined"!=typeof crypto&&crypto.getRandomValues&&crypto.getRandomValues.bind(crypto)))throw new Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported");return y(x)}for(var N=[],w=0;w<256;++w)N.push((w+256).toString(16).slice(1));const k=function(n,e,t){if(g.randomUUID&&!e&&!n)return g.randomUUID();var r=(n=n||{}).random||(n.rng||b)();if(r[6]=15&r[6]|64,r[8]=63&r[8]|128,e){t=t||0;for(var o=0;o<16;++o)e[t+o]=r[o];return e}return function(n,e=0){return(N[n[e+0]]+N[n[e+1]]+N[n[e+2]]+N[n[e+3]]+"-"+N[n[e+4]]+N[n[e+5]]+"-"+N[n[e+6]]+N[n[e+7]]+"-"+N[n[e+8]]+N[n[e+9]]+"-"+N[n[e+10]]+N[n[e+11]]+N[n[e+12]]+N[n[e+13]]+N[n[e+14]]+N[n[e+15]]).toLowerCase()}(r)},C=function(){function n(){this._list=Array(),null===JSON.parse(localStorage.getItem("notes"))&&localStorage.setItem("notes",this.getNotesJson());var n=this.loadNotes();console.log(n),this._list=n}return n.prototype.addNote=function(n,e,t){var r={uuid:k(),title:n,description:e,priority:t};this._list.push(r),this.saveNotes()},n.prototype.saveNotes=function(){this._list.sort((function(n,e){function t(n){switch(n){case"low":return 1;case"mid":return 2;case"high":return 3;default:return 0}}return t(e.priority)-t(n.priority)})),localStorage.setItem("notes",this.getNotesJson())},n.prototype.loadNotes=function(){var n=JSON.parse(localStorage.getItem("notes")),e=Array();return console.log(n),n.forEach((function(n){e.push(n)})),e},n.prototype.deleteNote=function(n){var e=this._list.findIndex((function(e){return e.uuid===n}));this._list.splice(e,1),this.saveNotes()},n.prototype.getNotes=function(){return this.loadNotes()},n.prototype.getNotesJson=function(){return JSON.stringify(this._list)},n.prototype.getNoteUuidByIndex=function(n){var e=this._list[n].uuid;return console.log(e),e},n.prototype.updateNoteByUuid=function(n,e,t){var r=this._list.findIndex((function(e){return e.uuid===n}));console.log(r),-1!==r&&(this._list[r][e]=t,this.saveNotes())},n}(),S=function(){function n(n,e,t){this.document=n,this.dblClickEventCallback=e,this.setChangeEventCallback=t}return n.prototype.renderNotes=function(n){var e=this,t=this.document.querySelector(".main-grid");t.innerHTML="",n.forEach((function(n){console.log("note created"),t.appendChild(e.createNoteDiv(n))}))},n.prototype.createNoteDiv=function(n){var e=this,t=this.document.createElement("div");t.id=n.uuid,t.classList.add("note-container");var r=this.document.createElement("input");r.className="title",r.value=n.title;var o=this.document.createElement("textarea");o.className="description",o.value=n.description;var i=this.document.createElement("div");i.className="priority",t.classList.add(n.priority),i.textContent="Приоритет: "+n.priority;var a=this.document.createElement("button");return a.className="delete",a.textContent="Удалить",a.onclick=function(n){return e.dblClickEventCallback(n.target.parentElement.parentElement.id)},i.appendChild(a),t.appendChild(r),t.appendChild(o),t.appendChild(i),this.setChangeEventCallback(t),t},n}();new(function(){function n(n){this.model=new C,this.view=new S(n,this.noteDblClickHandler.bind(this),this.setNoteUpdateHandler.bind(this)),this.document=n,this.formSubmitHandler()}return n.prototype.render=function(){var n=this.model.getNotes();console.log(this.model.getNotesJson()),this.view.renderNotes(n)},n.prototype.noteDblClickHandler=function(n){this.model.deleteNote(n),this.render()},n.prototype.deleteButton=function(n){},n.prototype.setNoteUpdateHandler=function(n){var e=this;n.addEventListener("change",(function(n){var t=n.target,r=t.parentElement.id;e.model.updateNoteByUuid(r,t.className,t.value),e.render()}))},n.prototype.formSubmitHandler=function(){var n=this;this.document.querySelector("#newNoteDialog>form").addEventListener("submit",(function(e){var t=n.document.querySelector("#formTitle"),r=n.document.querySelector("#formDescription"),o=n.document.querySelector("#formPriority");n.model.addNote(t.value,r.value,o.value),t.value="",r.value="",o.value="low",n.render()}))},n}())(document).render()})(); \ No newline at end of file