Skip to content

Commit

Permalink
Remove the getting of icons from github
Browse files Browse the repository at this point in the history
  • Loading branch information
@jsaq007
jsaq007 committed Sep 25, 2024
1 parent 72e1155 commit 8db696e
Show file tree
Hide file tree
Showing 7 changed files with 143 additions and 213 deletions.
3 changes: 2 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
{
"scripts": {
"linter": "npx eslint ./services/*/client/source/class/*/"
"linter": "npx eslint ./services/*/client/source/class/*/",
"linter-fix": "npx eslint ./services/*/client/source/class/*/ --fix"
},
"devDependencies": {
"babel-eslint": "^10.1.0",
Expand Down
2 changes: 1 addition & 1 deletion services/static-webserver/client/source/boot/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
<meta name="format-detection" content="telephone=no"/>

<!-- Shortcut icon setup -->
<link rel="shortcut icon" type="image/png" href="replace_me_favicon_uri">
<link rel="icon" type="image/png" href="replace_me_favicon_uri">

<!-- Manifest -->
<link rel="manifest" href="replace_me_manifest_uri">
Expand Down
322 changes: 128 additions & 194 deletions services/static-webserver/client/source/class/osparc/Application.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,8 +53,10 @@ qx.Class.define("osparc.Application", {
this.__preventAutofillBrowserStyles();
this.__loadCommonCss();
this.__updateTabName();
this.__updateMetaTags();

if (osparc.utils.Utils.isDevelopmentPlatform()) {
this.__updateMetaTags();
this.__setDeviceSpecificIcons();
}
if (qx.core.Environment.get("product.name") === "s4lengine") {
const view = new osparc.auth.BlurredLoginPageS4LEngineering();
this.__loadView(view);
Expand Down Expand Up @@ -216,226 +218,158 @@ qx.Class.define("osparc.Application", {
}
},

__updateMetaTags: function() {
// Update title and meta tags


__setDeviceSpecificIcons: function() {
const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
const isAndroid = /android/i.test(navigator.userAgent);
const isWindows = /windows/i.test(navigator.userAgent);
// const productColor = qx.theme.manager.Color.getInstance().resolve("product-color");
// const backgroundColor = qx.theme.manager.Color.getInstance().resolve("primary-background-color");
// default icons
this.__updateMetaTags();
this.__setDefaultIcons()
if (isIOS) {
this.__setIOSpIcons();
} else if (isAndroid) {
this.__setGoogleIcons();
} else if (isWindows) {
// this.__updateBrowserConfig(this.__getProductMetaData().productColor);
}
},

__getProductMetaData: function() {
let productName = osparc.product.Utils.getProductName();
if (osparc.product.Utils.isS4LProduct() || osparc.product.Utils.isProduct("s4llite")) {
productName = "s4l";
} else if (osparc.product.Utils.isProduct("tis") || osparc.product.Utils.isProduct("tiplite")) {
productName = "tis";
}

const productColor = qx.theme.manager.Color.getInstance().resolve("product-color");
const backgroundColor = qx.theme.manager.Color.getInstance().resolve("primary-background-color");
return {
productName: productName,
productColor: productColor,
backgroundColor: backgroundColor
}
},

__updateMetaTags: function() {
// check device type and only set the icons for the divice type
// i.e iOS, Android or windows etc
const themeColorMeta = document.querySelector("meta[name='theme-color']");
const tileColorMeta = document.querySelector("meta[name='msapplication-TileColor']");
const tileImageMeta = document.querySelector("meta[name='msapplication-TileImage']");
const maskIconMeta = document.querySelector("meta[name='mask-icon']");
const maskIconMeta = document.querySelector("meta[rel='mask-icon']");
const shortIconMeta = document.querySelector("link[rel='icon']");
const manifestLink = document.querySelector("link[rel='manifest']");
const msApplicationLink = document.querySelector("link[rel='msapplication-config']");

const {productName, productColor} = this.__getProductMetaData();

if (themeColorMeta) {
themeColorMeta.setAttribute("content", productColor);
}

if (tileColorMeta && tileImageMeta) {
const maskIcon = osparc.product.Utils.getManifestIconUrl("ms-icon-150x150.png")
Promise.resolve(maskIcon)
.then(resolvedUrl => {
// Create the manifest data object with resolved URLs
tileColorMeta.setAttribute("content", productColor);
tileImageMeta.setAttribute("content", resolvedUrl);
})
.catch(error => {
console.error("Failed to resolve icon URLs:", error);
});
const maskIcon = `../resource/osparc/${productName}/icons/ms-icon-150x150.png`
tileColorMeta.setAttribute("content", productColor);
tileImageMeta.setAttribute("content", maskIcon);
}
if (maskIconMeta) {
const maskIcon = osparc.product.Utils.getManifestIconUrl("safari-pinned-tab.png", "apple-icon-fallback.png")
Promise.resolve(maskIcon)
.then(resolvedUrl => {
// Create the manifest data object with resolved URLs
maskIconMeta.setAttribute("color", productColor);
maskIconMeta.setAttribute("href", resolvedUrl);
})
.catch(error => {
console.error("Failed to resolve icon URLs:", error);
});

if (shortIconMeta) {
const maskIconPath = `../resource/osparc/${productName}/icons/favicon-96x96.png`
shortIconMeta.setAttribute("href", maskIconPath);
}

// Update app icons
this.__updateAppIcons();
if (maskIconMeta) {
const maskIconPath = `../resource/osparc/${productName}/apple-icon-fallback.png`
maskIconMeta.setAttribute("href", maskIconPath);
}

// Update manifest
this.__updateManifest(productColor, backgroundColor);
if (manifestLink) {
const manifestPath = `../resource/osparc/${productName}/manifest.json`
manifestLink.setAttribute("href", manifestPath);
}

// Update browserconfig
this.__updateBrowserConfig(productColor);
if (msApplicationLink) {
const msApplicationPath = `../resource/osparc/${productName}/broswserconfig.xml`
msApplicationLink.setAttribute("href", msApplicationPath);
}
},

__updateAppIcons: function() {
// Array of promises to resolve icon URLs for Apple Touch Icons
const appleIconUrls = [
osparc.product.Utils.getManifestIconUrl("apple-icon-57x57.png", "apple-icon-fallback.png"),
osparc.product.Utils.getManifestIconUrl("apple-icon-60x60.png", "apple-icon-fallback.png"),
osparc.product.Utils.getManifestIconUrl("apple-icon-72x72.png", "apple-icon-fallback.png"),
osparc.product.Utils.getManifestIconUrl("apple-icon-76x76.png", "apple-icon-fallback.png"),
osparc.product.Utils.getManifestIconUrl("apple-icon-114x114.png", "apple-icon-fallback.png"),
osparc.product.Utils.getManifestIconUrl("apple-icon-120x120.png", "apple-icon-fallback.png"),
osparc.product.Utils.getManifestIconUrl("apple-icon-144x144.png", "apple-icon-fallback.png"),
osparc.product.Utils.getManifestIconUrl("apple-icon-152x152.png", "apple-icon-fallback.png"),
osparc.product.Utils.getManifestIconUrl("apple-icon-180x180.png", "apple-icon-fallback.png")
];

// Array of promises to resolve icon URLs for Favicons
__setDefaultIcons: function() {
const {productName} = this.__getProductMetaData()
const resourcePath = `../resource/osparc/${productName}/icons`;
const favIconUrls = [
osparc.product.Utils.getManifestIconUrl("android-icon-192x192.png"),
osparc.product.Utils.getManifestIconUrl("favicon-32x32.png"),
osparc.product.Utils.getManifestIconUrl("favicon-96x96.png"),
osparc.product.Utils.getManifestIconUrl("favicon-16x16.png")
"favicon-16x16.png",
"favicon-32x32.png",
"favicon-96x96.png"
];

// Wait for all icon URLs to be resolved
Promise.all([...appleIconUrls, ...favIconUrls])
.then(resolvedUrls => {
const appleResolvedUrls = resolvedUrls.slice(0, appleIconUrls.length);
const favResolvedUrls = resolvedUrls.slice(appleIconUrls.length);

// Remove existing Apple Touch Icons and Favicons
document.querySelectorAll("link[rel='apple-touch-icon'], link[rel='icon']").forEach(link => link.remove());

// Create and insert new Apple Touch Icon links
const appleIconSizes = [
"57x57", "60x60", "72x72", "76x76", "114x114", "120x120", "144x144", "152x152", "180x180"
];
appleResolvedUrls.forEach((url, index) => {
let link = document.createElement("link");
link.setAttribute("rel", "apple-touch-icon");
link.setAttribute("sizes", appleIconSizes[index]);
link.setAttribute("href", url);
document.head.appendChild(link);
});

// Create and insert new Favicon links
const favIconSizes = [
"192x192", "32x32", "96x96", "16x16"
];
favResolvedUrls.forEach((url, index) => {
let link = document.createElement("link");
link.setAttribute("rel", "icon");
link.setAttribute("type", "image/png");
link.setAttribute("sizes", favIconSizes[index]);
link.setAttribute("href", url);
document.head.appendChild(link);
});
})
.catch(error => {
console.error("Failed to resolve icon URLs:", error);
});
const iconSizes = [
"16x16", "32x32", "96x96"
];
favIconUrls.forEach((url, index) => {
let link = document.createElement("link");
link.setAttribute("rel", "icon");
link.setAttribute("sizes", iconSizes[index]);
link.setAttribute("type", "image/png");
link.setAttribute("href", resourcePath + url);
document.head.appendChild(link);
});
},

__updateManifest: function(themeColor, backgroundColor) {
const productName = osparc.product.Utils.getProductName();
let manifestLink = document.querySelector("link[rel='manifest']");

// Array of promises to resolve icon URLs
const iconUrls = [
osparc.product.Utils.getManifestIconUrl("android-icon-36x36.png"),
osparc.product.Utils.getManifestIconUrl("android-icon-48x48.png"),
osparc.product.Utils.getManifestIconUrl("android-icon-72x72.png"),
osparc.product.Utils.getManifestIconUrl("android-icon-96x96.png"),
osparc.product.Utils.getManifestIconUrl("android-icon-144x144.png"),
osparc.product.Utils.getManifestIconUrl("android-icon-192x192.png")
__setGoogleIcons: function() {
const {productName} = this.__getProductMetaData()
const resourcePath = `../resource/osparc/${productName}/icons`;

const favIconUrls = [
"android-icon-48x48.png",
"android-icon-192x192.png",
];

// Wait for all icon URLs to be resolved
Promise.all(iconUrls)
.then(resolvedUrls => {
// Create the manifest data object with resolved URLs
const manifestData = {
shortName: productName,
name: productName,
icons: [
{
src: resolvedUrls[0],
sizes: "36x36",
type: "image/png",
density: "0.75"
},
{
src: resolvedUrls[1],
sizes: "48x48",
type: "image/png",
density: "1.0"
},
{
src: resolvedUrls[2],
sizes: "72x72",
type: "image/png",
density: "1.5"
},
{
src: resolvedUrls[3],
sizes: "96x96",
type: "image/png",
density: "2.0"
},
{
src: resolvedUrls[4],
sizes: "144x144",
type: "image/png",
density: "3.0"
},
{
src: resolvedUrls[5],
sizes: "192x192",
type: "image/png",
density: "4.0"
}
],
display: "standalone",
themeColor: themeColor,
backgroundColor: backgroundColor
};

const blob = new Blob([JSON.stringify(manifestData)], { type: "application/json" });
const manifestURL = URL.createObjectURL(blob);

// Create or update the manifest link in the document head
if (!manifestLink) {
manifestLink = document.createElement("link");
manifestLink.setAttribute("rel", "manifest");
document.head.appendChild(manifestLink);
}
manifestLink.setAttribute("href", manifestURL);
})
.catch(error => {
console.error("Failed to resolve icon URLs:", error);
});
const iconSizes = [
"48x48", "192x192"
];
favIconUrls.forEach((url, index) => {
let link = document.createElement("link");
link.setAttribute("rel", "icon");
link.setAttribute("sizes", iconSizes[index]);
link.setAttribute("type", "image/png");
link.setAttribute("href", resourcePath + url);
document.head.appendChild(link);
});
},

// Method to dynamically update the browserconfig
__updateBrowserConfig: function(tileColor) {
// Resolve the icon URL asynchronously
osparc.product.Utils.getManifestIconUrl("ms-icon-150x150.png")
.then(msTileIcon => {
const browserconfigData = `<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
<msapplication>
<tile>
<square150x150logo src="${msTileIcon}"/>
<TileColor>${tileColor}</TileColor>
</tile>
</msapplication>
</browserconfig>`;

const blob = new Blob([browserconfigData], { type: "application/xml" });
const browserconfigURL = URL.createObjectURL(blob);

// Check if the meta tag exists, create it if not
let browserConfigLink = document.querySelector("meta[name='msapplication-config']");
if (!browserConfigLink) {
browserConfigLink = document.createElement("meta");
browserConfigLink.setAttribute("name", "msapplication-config");
document.head.appendChild(browserConfigLink);
}
browserConfigLink.setAttribute("content", browserconfigURL);
})
.catch(error => {
console.error("Failed to resolve msTileIcon URL:", error);
});
__setIOSpIcons: function() {
// Array of promises to resolve icon URLs for Apple Touch Icons
const {productName} = this.__getProductMetaData()
const resourcePath = `../resource/osparc/${productName}/icons`;

const appleIconUrls = [
"apple-icon-57x57.png",
"apple-icon-60x60.png",
"apple-icon-72x72.png",
"apple-icon-76x76.png",
"apple-icon-114x114.png",
"apple-icon-120x120.png",
"apple-icon-144x144.png",
"apple-icon-152x152.png",
"apple-icon-180x180.png"
];

const appleIconSizes = [
"57x57", "60x60", "72x72", "76x76", "114x114", "120x120", "144x144", "152x152", "180x180"
];
appleIconUrls.forEach((url, index) => {
let link = document.createElement("link");
link.setAttribute("rel", "apple-touch-icon");
link.setAttribute("sizes", appleIconSizes[index]);
link.setAttribute("href", resourcePath + url);
document.head.appendChild(link);
});
},

__startupChecks: function() {
Expand Down
Loading

0 comments on commit 8db696e

Please sign in to comment.