https://drphe.github.io/KhoIPA/common/components/AppHeader.js

1import { formatVersionDate } from "../modules/utilities.js";
2const truncate = s => s?.length > 40 ? s.slice(0,40)+'...' : s
3const fallbackSrc = "https://drphe.github.io/KhoIPA/common/assets/img/generic_app.jpeg";
4export function checkBeta(inputValue) {
5    if (typeof inputValue === 'boolean') {
6        return inputValue === true ? "beta" : undefined;
7    } else if (typeof inputValue === 'string') {
8        return inputValue;
9    }
10    return undefined;
11}
12export const AppSize = (app) =>{
13// Version size
14        const units = ["B", "KB", "MB", "GB"];
15        var appSize = app.size,
16            i = 0;
17        while (appSize > 1024) {
18            i++;
19            appSize = parseFloat(appSize / 1024).toFixed(1);
20        }
21        return appSize ? `${appSize} ${units[i]}` : "";
22}
23export const AppHeader = (app) => app ? `
24<div class="app-header-container">
25 <a href="#" data-bundleid = "${app.bundleIdentifier}"  class="app-header-link">
26    <div class="app-header-inner-container">
27        <div class="app-header">
28            <div class="content">
29		<div class="app-icon-wrapper">
30		    ${app.beta ? `<span class="small ${checkBeta(app.beta)} badge" style="opacity:0;position:absolute;top:-4px;"></span>`:``}
31                    <img id="app-icon" class="skeleton-effect-blink skeleton-block" src="${app.iconURL}" onerror="this.onerror=null; this.src='${fallbackSrc}';" onload="this.previousElementSibling?.style.setProperty('opacity', '1');this.classList.remove('skeleton-effect-blink', 'skeleton-block');" alt="">
32		    ${app.sourceIconURL ? `<img class="developer-icon" src="${app.sourceIconURL}" onerror="this.onerror=null; this.src='https://placehold.co/25x25/${app.sourceTintColor.replaceAll("#","")}/FFFFFF?text=${app.sourceName.charAt(0).toUpperCase()}';" alt="">` : ``}
33		</div>
34                <div class="right">
35                    <div class="text">
36                        <p class="title">${truncate(app.name)}</p>
37                        <p class="subtitle">${app.version ? app.version + ' &middot; ': ''}${app.size ? AppSize(app) + ' &middot; ': ''}${app.versionDate ? formatVersionDate(app.versionDate): formatVersionDate(app.versions[0].date)}</p>
38                    </div>
39                        <button class="uibutton" style="background-color: ${app.tintColor ? "#" + app.tintColor.replaceAll("#", "") : "var(--tint-color);"};">${langText['view']}</button>
40                    </div>
41                </div>
42            <div class="background" style="background-color: ${app.tintColor ? "#" + app.tintColor.replaceAll("#", "") : "var(--tint-color);"};"></div>
43        </div>
44    </div>
45</a>
46</div>
47` : undefined;
48
49export const AppLoading = (id = "apps-list", position = "beforeend") => {
50  const container = document.getElementById(id);
51  if (!container) return console.warn(`Element with id "${id}" not found.`);
52  container.insertAdjacentHTML(position, `
53    <div class="app-container">
54      <div class="app-header-container">
55        <a href="#" class="app-header-link">
56          <div class="app-header-inner-container">
57            <div class="app-header">
58              <div class="content">
59                <div class="skeleton-block"></div>
60                <div class="right">
61                  <div class="text">
62                    <p class="title">--- --- ---</p>
63                    <p class="subtitle">------</p>
64                  </div>
65                  <button class="uibutton" style="background-color: var(--color-separator-dark);">---</button>
66                </div>
67              </div>
68              <div class="background" style="background-color: var(--color-bg-dark-secondary);"></div>
69            </div>
70          </div>
71        </a>
72      </div>
73    </div>`);
74};
75
76export const appHeaderLine = (source, app)=> {
77	return app? `
78	<a href="#" data-bundleid="${app.bundleIdentifier}" class="app-header-link" style="">
79	    <div class="app-header-inner-container" style="">
80	        <div class="app-header">
81	            <div class="content" style="padding: 0.4rem 0rem;">
82	                <div class="app-icon-wrapper">
83	                    <span class="small ${checkBeta(app.beta)} badge" style="opacity: 1; position: absolute; top: -4px;"></span>
84	                    <img id="app-icon" class="" src="${app.iconURL}" onerror="this.onerror=null; this.src='https://drphe.github.io/KhoIPA/common/assets/img/generic_app.jpeg';" onload="this.previousElementSibling?.style.setProperty('opacity', '1');this.classList.remove('skeleton-effect-blink', 'skeleton-block');" alt="">
85	                    <img class="developer-icon" src="${source.iconURL}" onerror="this.onerror=null; this.src='https://placehold.co/25x25/${source.tintColor.replaceAll("#","")}/FFFFFF?text=${source.name.charAt(0).toUpperCase()}';" alt="">
86	                </div>
87	                <div class="right">
88	                    <div class="text">
89	                        <p class="title">${truncate(app.name)}</p>
90	                        <p class="subtitle">${app.version ? app.version + ' &middot; ': ''}${app.size ? AppSize(app) + ' &middot; ': ''}${app.versionDate ? formatVersionDate(app.versionDate): formatVersionDate(app.versions[0].date)}</p>
91	                    </div>
92	                    <button class="uibutton" style="background-color: ${app.tintColor ? " #" + app.tintColor.replaceAll("#", "" ) : "var(--tint-color);" };">${langText['view']}</button>
93	                </div>
94	            </div>
95	            <div class="background" style="background-color: transparent;margin: 0px;padding: 0px;"></div>
96	        </div>

97	    </div>
98	</a>`:''; 
99    }