UI improvements

wojciechpolak · Nov 1, 2024 · 302dc80 · 302dc80
1 parent 69b1008
commit 302dc80
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 16 deletions.
diff --git a/src/public/css/styles.css b/src/public/css/styles.css
@@ -87,7 +87,14 @@ nav.date .button {
     cursor: pointer;
     transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
 }
-nav.date .button:hover {
+@media (hover: hover) and (pointer: fine) {
+    nav.date .button:hover {
+        background-color: var(--color-button-text);
+        color: var(--color-button-bg);
+        border-color: var(--color-button-bg);
+    }
+}
+nav.date .button:active {
     background-color: var(--color-button-text);
     color: var(--color-button-bg);
     border-color: var(--color-button-bg);

diff --git a/src/public/index.html b/src/public/index.html
@@ -17,9 +17,9 @@ <h1 id="title">&nbsp;</h1>
   </nav>
   <div class="tabs-container">
     <ul class="tabs">
-      <li class="tab active" data-tab="tab1">Personal Events</li>
+      <li class="tab active" data-tab="tab-personal">Personal Events</li>
     </ul>
-    <div class="tab-content active" id="tab1">
+    <div class="tab-content active" id="tab-personal">
       <nav class="mode">
         <label>
           <input type="radio" name="view-mode" value="day" checked> Day

diff --git a/src/public/js/ics-parser.js b/src/public/js/ics-parser.js
@@ -1,5 +1,5 @@
 /**
- * ics-parser.js v20241021
+ * ics-parser.js v20241031
  *
  * Copyright (C) 2024 Wojciech Polak
  *
@@ -113,13 +113,34 @@ class ICalParser {
                         if (key === 'DTSTART' || key === 'DTEND' || key === 'DTSTAMP') {
                             value = this.parseDate(value);
                         }
-                        event[key] = this.unescapeICalString(value);
+                        if (typeof value === 'string' && value.startsWith('<html-blob>')) {
+                            event[key] = this.decodeHtmlBlob(
+                                this.unescapeICalString(value));
+                        }
+                        else {
+                            event[key] = this.unescapeICalString(value);
+                        }
                     }
                 }
             }
         });
     }
 
+    /**
+     * Decoding HTML entities and stripping tags
+     * @param {string} value - The raw value field from ICS data.
+     * @returns {string}
+     */
+    decodeHtmlBlob(value) {
+        // Remove <html-blob> tags if they are present
+        value = value.replace(/<\/?html-blob>/gi, '');
+        // Decode HTML entities
+        const parser = new DOMParser();
+        const decoded = parser.parseFromString(value, 'text/html')
+            .body.textContent;
+        return decoded || value;
+    }
+
     /**
      * Unescape iCalendar strings
      * @param {string} str

diff --git a/src/public/js/main.js b/src/public/js/main.js
@@ -263,6 +263,7 @@ document.addEventListener('DOMContentLoaded', () => {
     const tabs = document.querySelectorAll('.tab');
     const tabContents = document.querySelectorAll('.tab-content');
     const shouldShowHistoryTab = true;
+    let selectedTab = 'tab-personal';
     let selectedDate = new Date();
 
     // Add second tab dynamically if condition is met
@@ -278,9 +279,9 @@ document.addEventListener('DOMContentLoaded', () => {
 
         updatedTabs.forEach(tab => {
             tab.addEventListener('click', function() {
-                const target = this.getAttribute('data-tab');
-                if (target === 'tab-history') {
-                    if (historyContainer.innerHTML === '') {
+                selectedTab = this.getAttribute('data-tab');
+                if (selectedTab === 'tab-history') {
+                    if (!isHistoryLoaded()) {
                         loadWikipediaEvents();
                     }
                     setTitle();
@@ -293,7 +294,7 @@ document.addEventListener('DOMContentLoaded', () => {
                 this.classList.add('active');
 
                 tabContents.forEach(content => {
-                    if (content.id === target) {
+                    if (content.id === selectedTab) {
                         content.style.display = 'block';
                     }
                     else {
@@ -310,9 +311,9 @@ document.addEventListener('DOMContentLoaded', () => {
     // Set initial tab event listeners
     tabs.forEach(tab => {
         tab.addEventListener('click', function() {
-            const target = this.getAttribute('data-tab');
-            if (target === 'tab-history') {
-                if (historyContainer.innerHTML === '') {
+            selectedTab = this.getAttribute('data-tab');
+            if (selectedTab === 'tab-history') {
+                if (!isHistoryLoaded()) {
                     loadWikipediaEvents();
                 }
                 setTitle();
@@ -325,7 +326,7 @@ document.addEventListener('DOMContentLoaded', () => {
             this.classList.add('active');
 
             tabContents.forEach(content => {
-                if (content.id === target) {
+                if (content.id === selectedTab) {
                     content.style.display = 'block';
                 }
                 else {
@@ -354,19 +355,34 @@ document.addEventListener('DOMContentLoaded', () => {
             const viewMode = localStorage.getItem(STORAGE_KEY_VIEW_MODE);
             selectedDate.setDate(selectedDate.getDate() - 1);
             showEvents(events, viewMode, true, selectedDate);
-            loadWikipediaEvents();
+            if (isHistoryVisible()) {
+                loadWikipediaEvents();
+            }
+            else {
+                historyContainer.innerHTML = '';
+            }
         };
         document.querySelector('nav.date button.right').onclick = function() {
             const viewMode = localStorage.getItem(STORAGE_KEY_VIEW_MODE);
             selectedDate.setDate(selectedDate.getDate() + 1);
             showEvents(events, viewMode, true, selectedDate);
-            loadWikipediaEvents();
+            if (isHistoryVisible()) {
+                loadWikipediaEvents();
+            }
+            else {
+                historyContainer.innerHTML = '';
+            }
         };
         document.querySelector('#date-subtitle').onclick = function() {
             const viewMode = localStorage.getItem(STORAGE_KEY_VIEW_MODE);
             selectedDate = new Date();
             showEvents(events, viewMode, true, selectedDate);
-            loadWikipediaEvents();
+            if (isHistoryVisible()) {
+                loadWikipediaEvents();
+            }
+            else {
+                historyContainer.innerHTML = '';
+            }
         };
 
         // Sort events by DTSTART
@@ -385,6 +401,14 @@ document.addEventListener('DOMContentLoaded', () => {
         showEvents(events, savedViewMode, true, selectedDate);
     });
 
+    function isHistoryVisible() {
+        return selectedTab === 'tab-history';
+    }
+
+    function isHistoryLoaded() {
+        return historyContainer.innerHTML !== '';
+    }
+
     /**
      * Loads Wikipedia events based on date and language
      * @param {string=} lang