1 line
4.2 KiB
JavaScript
1 line
4.2 KiB
JavaScript
(()=>{"use strict";const t=t=>fetch(t).then((t=>{if(!t.ok)throw new Error(`Network response was not ok (Status: ${t.status})`);return t.json()})).catch((t=>{throw t}));class e{constructor(t){this.root=this.getElement(t),this.initializeDOMStructure(),this.setStyles()}getElement(t){const e=document.querySelector(t);if(!e)throw new Error(`Element with selector ${t} not found.`);return e}initializeDOMStructure(){this.now=document.createElement("div"),this.now.className="now";const t=document.createElement("div");this.obsTime=document.createElement("div"),this.obsTime.id="obs-time",this.nowTemp=document.createElement("span"),this.nowTemp.id="now-temp",t.appendChild(this.obsTime),t.appendChild(this.nowTemp);const e=document.createElement("div");this.nowIcon=document.createElement("div"),this.nowIcon.id="now-icon",this.nowWeather=document.createElement("span"),this.nowWeather.id="now-weather",e.appendChild(this.nowIcon),e.appendChild(this.nowWeather),this.now.appendChild(t),this.now.appendChild(e),this.ul=document.createElement("ul"),this.ul.id="weather-7d",this.root.appendChild(this.now),this.root.appendChild(this.ul)}setStyles(){this.root.style.opacity="0",this.root.style.position="absolute",this.root.style.top="10%",this.root.style.left="10%",this.root.style.width="30%",this.root.style.display="flex",this.root.style.flexDirection="column",this.root.style.padding="20px",this.root.style.borderRadius="20px",this.root.style.zIndex="10",this.root.style.minWidth="420px",this.root.style.backdropFilter="blur(30px)",this.root.style.background="linear-gradient(180deg,hsla(0,0%,100%,.28),hsla(0,0%,100%,0))",this.root.style.boxShadow="inset 0 0.5px 0 1px hsla(0,0%,100%,.23), inset 0 1px 0 0 hsla(0,0%,100%,.66), 0 4px 16px rgba(0,0,0,.12)",this.now.style.flex="1",this.now.style.display="flex",this.now.style.justifyContent="space-between",this.now.style.alignItems="center",this.obsTime.style.fontSize="13px",this.nowWeather.style.fontSize="13px",this.nowIcon.style.textAlign="right",this.nowTemp.style.fontSize="42px",this.nowTemp.style.color="var(--color-font)",this.ul.style.display="flex",this.ul.style.margin="0",this.ul.style.padding="20px 0 0 0",this.ul.style.justifyContent="space-between"}updateNowWeather(t){const{icon:e,text:o,temp:n,obsTime:i,windDir:s,humidity:l,pressure:a}=t;this.obsTime.innerHTML=`\n <cosy-tooltip placement="right">\n <span slot="content">观测时间</span>\n ${new Date(i).toLocaleTimeString()}\n </cosy-tooltip>\n `;const h=`${o} ${s}`;this.nowIcon.innerHTML=`\n <cosy-tooltip placement="left">\n <span slot="content">${h}</span>\n <img style="width:48px;height:48px" src="/img/qweather-color-icon/${e}.png" alt=${o} />\n </cosy-tooltip>\n `,this.nowWeather.innerHTML=`P:${a} H:${l}`,this.nowTemp.innerHTML=`${n}°`}update7DayForecast(t){const{daily:e}=t;e.forEach((t=>{const{tempMin:e,tempMax:o,iconDay:n,fxDate:i,textDay:s,textNight:l}=t,a=`\n <cosy-tooltip>\n <span slot="content">${`${s} -> ${l}`}</span>\n <li style="display: flex; flex-direction: column; align-items: center;">\n <span style="color: var(--color-font); font-size: 12px; line-height: 1.5;">${new Date(i).getDate()}</span>\n <img src="/img/qweather-color-icon/${n}.png" style="width: 22px; height: 22px;">\n <span style="color: var(--color-font); font-size: 12px; line-height: 1.5;">${e}-${o}°</span>\n </li>\n </cosy-tooltip>\n </li>\n `;this.ul.insertAdjacentHTML("beforeend",a)}))}}(o=>{const{enable:n,cityCode:i,appKey:s}=o;if("true"===n){const o=`https://devapi.qweather.com/v7/weather/7d?location=${i}&key=${s}`,n=`https://devapi.qweather.com/v7/weather/now?location=${i}&key=${s}`;Promise.all([t(n),t(o)]).then((([t,o])=>{if("200"===(null==t?void 0:t.code)&&"200"===(null==o?void 0:o.code)){const n=new e(".weather"),{icon:i,text:s,temp:l,obsTime:a,windDir:h,humidity:r,pressure:p}=t.now;n.updateNowWeather({icon:i,text:s,temp:l,obsTime:a,windDir:h,humidity:r,pressure:p});const c=o.daily.map((t=>({tempMin:t.tempMin,tempMax:t.tempMax,iconDay:t.iconDay,fxDate:t.fxDate,textDay:t.textDay,textNight:t.textNight})));n.update7DayForecast({daily:c})}}))}})(window.weather)})(); |