la barra delle news sembra funzionare!

Unipisa · May 18, 2024 · ea6e76b · ea6e76b
1 parent 713b4ee
commit ea6e76b
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 13 deletions.
diff --git a/src/pages/eventsAndVisitorsPage.js b/src/pages/eventsAndVisitorsPage.js
@@ -48,6 +48,8 @@ export class EventsAndVisitorsPage {
         if (this.news_div && this.news_html) {
             this.news_div.innerHTML = this.news_html
             this.news_html = null // avoid double rendering
+            const width = this.news_div.offsetWidth
+            $(".hmove").css("animation-duration", `${width/6}s`)
         }
     }
 
@@ -272,6 +274,7 @@ function renderEvents(events) {
 async function loadVisitors() {
     var visits = []
 
+
     try {
         const endpoint = DM_MANAGER_HOST + '/api/v0/public/visits';    
         const res = await fetch(endpoint)
@@ -333,13 +336,17 @@ async function loadNews() {
         return
     }
     // remove past news
-    news = news.filter(n => moment(n.date_gmt).utc().isBefore(moment().utc()))
+    news = news.filter(n => (true || moment(n.date_gmt).utc().unix() >= moment().utc().unix()))
+    news = news.filter((n, i) => i < 10)
+
     const SPACER = `   |   `
-    function render(n) {
+    function render(n,i,lst) {
         var $b = document.createElement('b')
-        $b.textContent = `${n.title.rendered}:`
+        $b.textContent = `(${i+1}/${lst.length}) ${n?.title?.rendered}`
         var $span = document.createElement('span')
-        $span.textContent = ` ${n.content.rendered}`
+        $span.innerHTML = n?.content?.rendered
+        /* TRICK: converte HTML in testo semplice: */
+        $span.textContent = $span.textContent
         var $news = document.createElement('div')
         $news.appendChild($b)
         $news.appendChild($span)

diff --git a/ticker.css b/ticker.css
@@ -2,24 +2,33 @@
 
 /* (A1) FORCE ALL ITEMS INTO SINGLE ROW */
 .hmove { 
-  display: flex; 
+  display: inline-block; 
 }
 
 .hitem { 
   width: 100%;
   flex-shrink: 0; 
 }
 
-.hwrap { overflow: hidden; }
-
-/* (A2) MOVE ITEMS FROM RIGHT TO LEFT */
-/* first item = 0, fourth item = -300% */
+.hwrap { 
+  overflow: hidden; 
+  width: 100%; /* highly recommended */
+}
 
 @keyframes tickerh {
-  0% { transform: translatex(100%); }
+  0% { transform: translatex(0); visibility: visible;}
   100% { transform: translatex(-100%); }
 }
-.hmove { animation: tickerh linear 20s infinite; }
+.hmove { 
+/*  animation: tickerh linear 200s infinite; */
+
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+  animation-name: tickerh;
+  /* animation-duration viene sovrascritto dal codice javascript 
+  che calcola la durata in base alla lunghezza del testo */
+  animation-duration: 60s;
+}
 
 
 /* (A3) COSMETICS - NOT IMPORTANT */
@@ -28,21 +37,23 @@
   font-size: 25px;
   color: #ffffff;
   background: #003c71;
-  width: 100%; /* highly recommended */
   position: fixed;
   bottom: 0;
   left: 0;
   overflow: hidden;
 }
 .hitem { 
+  display: inline-block;
   padding: 2px;
   text-align: center;
+  padding-left: 1000px;
 }
 .hwrap, .hwrap * { box-sizing: border-box; }
 
 .hmove{
   box-sizing:border-box;
   font-family:arial,sans-serif;
-  max-width:6000px;
+  /*max-width:6000px;*/
   white-space: nowrap;
+/*  padding-right: 100%;*/
 }