v23.11.2

seguinleo · Nov 11, 2023 · 9abf392 · 9abf392
1 parent 35b029c
commit 9abf392
Show file tree

Hide file tree

Showing 23 changed files with 780 additions and 612 deletions.
diff --git a/CHANGELOG.txt b/CHANGELOG.txt
@@ -1,3 +1,7 @@
+#----v23.11.2----#
+-New UI
+-Export all your notes at once
+
 #----v23.11.1----#
 -Better Markdown (add table and strikethrough)
 -Better PWA

diff --git a/README.md b/README.md
@@ -30,7 +30,7 @@ When I was looking for a note-taking application, I faced several difficulties:
 ## Features
 All notes are encrypted with ``AES-256-GCM``.
 
-The user can save and edit notes, change color, copy, export and use Markdown. The user can create tasks lists, tables, links, code blocks, etc. The user can also search for notes by title. Read my [Markdown guide](https://github.com/seguinleo/Bloc-notes/wiki/Markdown).
+The user can save and edit notes, change color, copy, export and use Markdown or HTML. The user can create tasks lists, tables, links, code blocks, etc. The user can also search for notes by title. Read my [Markdown guide](https://github.com/seguinleo/Bloc-notes/wiki/Markdown).
 
 The user can also sign in to sync all notes between their devices or browsers in a secure database. The user can also make a note public and share it via a random URL. No email is required, only a username and a strong password.
 
@@ -58,6 +58,7 @@ Bloc-notes stores the username, hashed password, and encrypted notes in a secure
 - [x] Share notes with a random link
 - [x] Export notes in text file
 - [ ] Pin notes
+- [ ] Categories
 - [ ] Spanish translation
 - [ ] ...
 

diff --git a/img/desktop.png b/img/desktop.png
diff --git a/img/mobile.png b/img/mobile.png
diff --git a/src/app.webmanifest b/src/app.webmanifest
@@ -13,12 +13,12 @@
 		{
 			"src": "./assets/img/desktop.png",
 			"type": "image/png",
-			"sizes": "1728x1103"
+			"sizes": "1199x691"
 		},
 		{
 			"src": "./assets/img/mobile.png",
 			"type": "image/png",
-			"sizes": "531x1026"
+			"sizes": "317x599"
 		}
 	],
 	"description": "Enregistrez des notes sur votre appareil ou connectez-vous pour synchroniser et chiffrer vos notes.",

diff --git a/src/assets/css/style.css b/src/assets/css/style.css
diff --git a/src/assets/css/style.css.map b/src/assets/css/style.css.map
diff --git a/src/assets/js/script.js b/src/assets/js/script.js
@@ -1,7 +1,5 @@
 /* eslint-disable no-alert */
 let isUpdate = false;
-let touchStart = 0;
-let touchEnd = 0;
 let timeoutCopy = null;
 let timeoutError = null;
 const notesContainer = document.querySelector('main');
@@ -22,6 +20,14 @@ if (localStorage.getItem('theme') === 'light') {
   document.querySelector('html').className = 'light';
   metaTheme.content = '#eeeeee';
   button.className = 'fa-solid fa-lightbulb';
+} else if (localStorage.getItem('theme') === 'dusk') {
+  document.querySelector('html').className = 'dusk';
+  metaTheme.content = '#1c1936';
+  button.className = 'fa-solid fa-star';
+}
+
+if (localStorage.getItem('newVersion') === 'hide') {
+  document.querySelector('#newVersion').style.display = 'none';
 }
 
 const replaceAllStart = (e) => e.replaceAll('<br /><br />', '\n\n').replaceAll('<br />', '\n');
@@ -215,7 +221,7 @@ const showNotes = async () => {
       bottomContentElement.appendChild(editIconElement);
       bottomContentElement.appendChild(trashIconElement);
 
-      if (hidden === false) {
+      if (hidden === false && descEnd !== '') {
         const clipboardIconElement = document.createElement('i');
         clipboardIconElement.classList.add('fa-solid', 'fa-clipboard', 'note-action');
         clipboardIconElement.tabIndex = 0;
@@ -266,15 +272,13 @@ const showNotes = async () => {
 const toggleFullscreen = (id) => {
   const note = document.querySelector(`#note${id}`);
   note.classList.toggle('fullscreen');
-  document.body.classList.toggle('noscroll');
 };
 
 const updateNote = (id, title, desc, couleur, hidden) => {
   const s = replaceAllStart(desc);
   document.querySelectorAll('.note').forEach((note) => {
     note.classList.remove('fullscreen');
   });
-  document.body.classList.add('noscroll');
   document.querySelector('#idNoteInput').value = id;
   isUpdate = true;
   document.querySelector('.icon').click();
@@ -370,9 +374,7 @@ document.addEventListener('keydown', (e) => {
 document.querySelectorAll('.seconnecter').forEach((element) => {
   element.addEventListener('click', () => {
     connectBox.classList.add('show');
-    document.body.classList.add('noscroll');
     document.querySelector('#nomConnect').focus();
-    document.querySelector('#mdpConnect').disabled = true;
   });
   element.addEventListener('keydown', (event) => {
     if (event.key === 'Enter') element.click();
@@ -392,8 +394,6 @@ document.querySelectorAll('.creercompte').forEach((element) => {
     connectBox.classList.remove('show');
     creerBox.classList.add('show');
     document.querySelector('#nomCreer').focus();
-    document.querySelector('#mdpCreer').disabled = true;
-    document.querySelector('#mdpCreerValid').disabled = true;
   });
   element.addEventListener('keydown', (event) => {
     if (event.key === 'Enter') element.click();
@@ -437,7 +437,7 @@ document.querySelector('#submitCreer').addEventListener('click', async () => {
     });
     if (response.ok) {
       creerBox.classList.remove('show');
-      document.body.classList.remove('noscroll');
+
       forms.forEach((form) => form.reset());
       alert('Compte créé avec succès ! Vous pouvez maintenant vous connecter.');
       return;
@@ -485,30 +485,9 @@ document.querySelector('#submitSeConnecter').addEventListener('click', async ()
   }
 });
 
-document.querySelector('#nomConnect').addEventListener('input', () => {
-  const e = document.querySelector('#nomConnect').value.trim();
-  if (e.length >= 4 && e.length <= 25 && /^[a-zA-ZÀ-ÿ -]+$/.test(e)) {
-    document.querySelector('#mdpConnect').disabled = false;
-  } else {
-    document.querySelector('#mdpConnect').disabled = true;
-  }
-});
-
-document.querySelector('#nomCreer').addEventListener('input', () => {
-  const e = document.querySelector('#nomCreer').value.trim();
-  if (e.length >= 4 && e.length <= 25 && /^[a-zA-ZÀ-ÿ -]+$/.test(e)) {
-    document.querySelector('#mdpCreer').disabled = false;
-    document.querySelector('#mdpCreerValid').disabled = false;
-  } else {
-    document.querySelector('#mdpCreer').disabled = true;
-    document.querySelector('#mdpCreerValid').disabled = true;
-  }
-});
-
 document.querySelectorAll('.icon, .iconFloat').forEach((element) => {
   element.addEventListener('click', () => {
     noteBox.classList.add('show');
-    document.body.classList.add('noscroll');
     document.querySelector('#title').focus();
     document.querySelector('#textareaLength').textContent = '0/5000';
   });
@@ -587,7 +566,6 @@ document.querySelector('#submitNote').addEventListener('click', async () => {
 
   localStorage.setItem('local_notes', JSON.stringify(notesJSON));
   noteBox.classList.remove('show');
-  document.body.classList.remove('noscroll');
   showNotes();
 });
 
@@ -603,37 +581,6 @@ document.querySelectorAll('#menuIcon').forEach((element) => {
   });
 });
 
-document.body.addEventListener('touchstart', (e) => {
-  touchStart = e.targetTouches[0].clientX;
-});
-
-document.body.addEventListener('touchmove', (e) => {
-  touchEnd = e.targetTouches[0].clientX;
-});
-
-document.body.addEventListener('touchend', () => {
-  const swipeDistance = touchEnd - touchStart;
-  if (swipeDistance > 100 && !sideBar.classList.contains('show')) {
-    sideBar.classList.add('show');
-    document.querySelectorAll('.note').forEach((note) => {
-      note.classList.remove('fullscreen');
-    });
-    document.body.classList.add('noscroll');
-  } else if (swipeDistance < -100 && sideBar.classList.contains('show')) {
-    sideBar.classList.remove('show');
-    document.querySelectorAll('.note').forEach((note) => {
-      note.classList.remove('fullscreen');
-    });
-    document.body.classList.add('noscroll');
-  }
-  touchStart = 0;
-  touchEnd = 0;
-});
-
-sideBar.addEventListener('touchstart', (e) => {
-  e.stopPropagation();
-});
-
 forms.forEach((element) => {
   element.addEventListener('submit', (event) => {
     event.preventDefault();
@@ -647,7 +594,6 @@ document.querySelectorAll('header i').forEach((element) => {
     noteBox.classList.remove('show');
     connectBox.classList.remove('show');
     creerBox.classList.remove('show');
-    document.body.classList.remove('noscroll');
     document.querySelector('.sideBar').classList.remove('show');
   });
   element.addEventListener('keydown', (event) => {
@@ -669,19 +615,36 @@ document.querySelector('#search-input').addEventListener('input', () => {
 });
 
 document.querySelector('#btnTheme').addEventListener('click', () => {
-  if (localStorage.getItem('theme') === 'light') {
+  if (localStorage.getItem('theme') === null) {
+    document.querySelector('html').className = 'light';
+    metaTheme.content = '#eeeeee';
+    button.className = 'fa-solid fa-lightbulb';
+    localStorage.setItem('theme', 'light');
+    return;
+  }
+  if (localStorage.getItem('theme') === 'dark') {
+    document.querySelector('html').className = 'light';
+    metaTheme.content = '#eeeeee';
+    button.className = 'fa-solid fa-lightbulb';
+    localStorage.setItem('theme', 'light');
+  } else if (localStorage.getItem('theme') === 'dusk') {
     document.querySelector('html').className = 'dark';
     metaTheme.content = '#272727';
     button.className = 'fa-solid fa-moon';
     localStorage.setItem('theme', 'dark');
   } else {
-    document.querySelector('html').className = 'light';
-    metaTheme.content = '#eeeeee';
-    button.className = 'fa-solid fa-lightbulb';
-    localStorage.setItem('theme', 'light');
+    document.querySelector('html').className = 'dusk';
+    metaTheme.content = '#1c1936';
+    button.className = 'fa-solid fa-star';
+    localStorage.setItem('theme', 'dusk');
   }
 });
 
+document.querySelector('#newVersion header i').addEventListener('click', () => {
+  document.querySelector('#newVersion').style.display = 'none';
+  localStorage.setItem('newVersion', 'hide');
+});
+
 document.querySelector('#language').addEventListener('change', () => {
   const e = document.querySelector('#language').value;
   if (e === 'fr') {