feat: euskalmet-en webguneko ikono berriak (SVG) erabili. Fixes #2

README.md

@@ -27,13 +27,14 @@ Eta ondoren erakutsi zure iragarpena:
 
 Erabili daitezkeen aukerak hauexek dira:
 
-- city: eibar. Euskalmetek eskaintzen dituen herri guztiak erabili daitezke. [Ikusi zerrenda hemen](https://github.com/erral/eguraldi_iragarpena/tree/main/forecasts)
-- days: zenbat egunetako iragarpena erakutsi nahi duzun. Gehienez 7 egun izan daitezke.
-- language: eu|es. Momentuz ez dut testurik bistan erakusten, irudiaren `alt` bezala bakarrik.
-- direction: column|row. Ikonoak zutabean edo lerroan erakusteko aukera.
-- short-text: (hautazkoa) true. Hau pasatuz gero, iragarpenaren testu laburra agertuko da (oskarbi, euria, zaparradak, ...)
-- custom-base-url: (hautazkoa) Euskalmeten ikonoak beharrean beste batzuk erabili nahi badituzu, ikono horiek dauden URLa pasatu hemen. Ikonoen izenak berberak izan behar dira. [Ikusi ikono zerrenda hemen](https://github.com/erral/eguraldi_iragarpena/tree/main/images)
-- custom-icon-extension: (hautazkoa) defektuzko png luzapena erabili beharrean, beste formatu bateko ikonoak sortzen badituzu (adibidez GIF), hemen adierazi ikono horiek fitxategien luzapena. Ikono guztientzat berbera izan behar da. Adi: aukera honek aurrekoarekin batera bakarrik funtzionatuko du.
+- `city`: eibar. Euskalmetek eskaintzen dituen herri guztiak erabili daitezke. [Ikusi zerrenda hemen](https://github.com/erral/eguraldi_iragarpena/tree/main/forecasts)
+- `days`: zenbat egunetako iragarpena erakutsi nahi duzun. Gehienez 7 egun izan daitezke.
+- `language`: eu|es. Momentuz ez dut testurik bistan erakusten, irudiaren `alt` bezala bakarrik.
+- `direction`: column|row. Ikonoak zutabean edo lerroan erakusteko aukera.
+- `short-text`: (hautazkoa) true. Hau pasatuz gero, iragarpenaren testu laburra agertuko da (oskarbi, euria, zaparradak, ...)
+- `custom-base-url`: (hautazkoa) Euskalmeten ikonoak beharrean beste batzuk erabili nahi badituzu, ikono horiek dauden URLa pasatu hemen. Ikonoen izenak berberak izan behar dira. [Ikusi ikono zerrenda hemen](https://github.com/erral/eguraldi_iragarpena/tree/main/images)
+- `custom-icon-extension`: (hautazkoa) defektuzko png luzapena erabili beharrean, beste formatu bateko ikonoak sortzen badituzu (adibidez GIF), hemen adierazi ikono horiek fitxategien luzapena. Ikono guztientzat berbera izan behar da. Adi: aukera honek aurrekoarekin batera bakarrik funtzionatuko du.
+- `modern-images`: (hautazkoa) true. Hau pasatuz gero, Euskalmeten webgune berriko ikonoak erabiliko dira. [Ikusi ikono berrien zerrenda hemen](https://github.com/erral/eguraldi_iragarpena/tree/main/images-modern). Aukera hau `custom-base-url` eta `custom-icon-extension` aukerekin bateragarria da. Kontuan izan ikono berrien izena zertxobait desberdina dela: `10.png` vs. `i10d.svg`
 
 ## Adibidea
 

src/euskalmet.js

@@ -67,6 +67,10 @@ class Euskalmet extends HTMLElement {
     return this.getAttribute('custom-icon-extension');
   }
 
+  get modernImages() {
+    return this.getAttribute('modern-images');
+  }
+
   async connectedCallback() {
     const response = await fetch(getForecastUrl(this.city));
     const data = await response.json();
@@ -84,7 +88,13 @@ class Euskalmet extends HTMLElement {
       let dateText = `${dateObject.getFullYear()}-${dateObject.getMonth()}-${dateObject.getDate()}`;
       let shortText = this.shortText ? forecastText : '';
 
-      let imageUrl = this.customBaseUrl
+      let imageUrl = this.modernImages
+        ? this.customBaseUrl
+          ? this.customIconExtension
+            ? `${this.customBaseUrl}/i${item.weather.id}d.${this.customIconExtension}`
+            : `${this.customBaseUrl}/${item.weather.icon_name_modern}`
+          : item.weather.full_path_modern
+        : this.customBaseUrl
         ? this.customIconExtension
           ? `${this.customBaseUrl}/${item.weather.id}.${this.customIconExtension}`
           : `${this.customBaseUrl}/${item.weather.icon_name}`

src/index.html

@@ -21,16 +21,19 @@ <h2>Eibarko 3 egunetakoa errenkada baten</h2>
         days="3"
         language="eu"
         direction="row"
-        short-text="true">
-      <strong>Hartu kodea</strong><br />
-      <textarea rows="6">
+        short-text="true"
+      >
+      </euskalmet-eguraldia>
+      <h2>Eibarko 3 egunetakoa errenkada baten ikono modernoekin</h2>
       <euskalmet-eguraldia
         city="eibar"
         days="3"
         language="eu"
         direction="row"
-      ></euskalmet-eguraldia>
-      </textarea>
+        short-text="true"
+        modern-images="true"
+      >
+      </euskalmet-eguraldia>
     </section>
 
     <section>
@@ -53,6 +56,7 @@ <h3>Antzuola</h3>
             days="2"
             language="eu"
             direction="column"
+            modern-images="true"
           ></euskalmet-eguraldia>
         </div>
       </div>