Skip to content

Commit

Permalink
fix: update links in head and *isLoaded to true (openedx#534)
Browse files Browse the repository at this point in the history 
Co-authored-by: monteri <lansevermore>
  • Loading branch information
@monteri @bra-i-am
monteri authored and bra-i-am committed Aug 9, 2024
1 parent 656c0e8 commit c85cefb
Show file tree
Hide file tree
Showing 2 changed files with 134 additions and 94 deletions.
180 changes: 104 additions & 76 deletions src/react/hooks/paragon/useParagonThemeCore.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,86 +24,114 @@ const useParagonThemeCore = ({ themeCore, onLoad }) => {
}
}, [isParagonThemeCoreLoaded, isBrandThemeCoreLoaded, onLoad]);

useEffect(() => {
// If there is no config for the core theme url, do nothing.
if (!themeCore?.urls) {
setIsParagonThemeCoreLoaded(true);
setIsBrandThemeCoreLoaded(true);
return;
}
const getParagonThemeCoreLink = () => document.head.querySelector('link[data-paragon-theme-core="true"');
const existingCoreThemeLink = document.head.querySelector(`link[href='${themeCore.urls.default}']`);
if (!existingCoreThemeLink) {
const getExistingCoreThemeLinks = (isBrandOverride) => {
const coreThemeLinkSelector = `link[data-${isBrandOverride ? 'brand' : 'paragon'}-theme-core="true"]`;
return document.head.querySelectorAll(coreThemeLinkSelector);
};
const createCoreThemeLink = (url, { isFallbackThemeUrl = false, isBrandOverride = false } = {}) => {
let coreThemeLink = document.createElement('link');
coreThemeLink.href = url;
coreThemeLink.rel = 'stylesheet';
if (isBrandOverride) {
coreThemeLink.dataset.brandThemeCore = true;
} else {
coreThemeLink.dataset.paragonThemeCore = true;
}
coreThemeLink.onload = () => {
if (isBrandOverride) {
setIsBrandThemeCoreLoaded(true);
} else {
setIsParagonThemeCoreLoaded(true);
}
};
coreThemeLink.onerror = () => {
logError(`Failed to load core theme CSS from ${url}`);
if (isFallbackThemeUrl) {
logError(`Could not load core theme CSS from ${url} or fallback URL. Aborting.`);
if (isBrandOverride) {
setIsBrandThemeCoreLoaded(true);
} else {
setIsParagonThemeCoreLoaded(true);
}
const otherExistingLinks = getExistingCoreThemeLinks(isBrandOverride);
removeExistingLinks(otherExistingLinks);
return;
}
const paragonThemeAccessor = isBrandOverride ? 'brand' : 'paragon';
const themeUrls = PARAGON_THEME?.[paragonThemeAccessor]?.themeUrls ?? {};
if (themeUrls.core) {
const coreThemeFallbackUrl = `${getConfig().BASE_URL}/${themeUrls.core.fileName}`;
logInfo(`Falling back to locally installed core theme CSS: ${coreThemeFallbackUrl}`);
coreThemeLink = createCoreThemeLink(coreThemeFallbackUrl, { isFallbackThemeUrl: true, isBrandOverride });
const otherExistingLinks = getExistingCoreThemeLinks(isBrandOverride);
removeExistingLinks(otherExistingLinks);
const foundParagonThemCoreLink = getParagonThemeCoreLink();
if (foundParagonThemCoreLink) {
foundParagonThemCoreLink.insertAdjacentElement('afterend', coreThemeLink);
} else {
document.head.insertAdjacentElement('afterbegin', coreThemeLink);
}
} else {
logError(`Failed to load core theme CSS from ${url} or fallback URL. Aborting.`);
}
};
return coreThemeLink;
};
useEffect(() => {
// If there is no config for the core theme url, do nothing.
if (!themeCore?.urls) {
setIsParagonThemeCoreLoaded(true);
setIsBrandThemeCoreLoaded(true);
return;
}
const getParagonThemeCoreLink = () => document.head.querySelector('link[data-paragon-theme-core="true"]');
const existingCoreThemeLink = document.head.querySelector(`link[href='${themeCore.urls.default}']`);
const brandCoreLink = document.head.querySelector(`link[href='${themeCore.urls.brandOverride}']`);
if (!existingCoreThemeLink) {
const getExistingCoreThemeLinks = (isBrandOverride) => {
const coreThemeLinkSelector = `link[data-${isBrandOverride ? 'brand' : 'paragon'}-theme-core="true"]`;
return document.head.querySelectorAll(coreThemeLinkSelector);
};
const createCoreThemeLink = (
url,
{
isFallbackThemeUrl = false,
isBrandOverride = false,
} = {},
) => {
let coreThemeLink = document.createElement('link');
coreThemeLink.href = url;
coreThemeLink.rel = 'stylesheet';
if (isBrandOverride) {
coreThemeLink.dataset.brandThemeCore = true;
} else {
coreThemeLink.dataset.paragonThemeCore = true;
}
coreThemeLink.onload = () => {
if (isBrandOverride) {
setIsBrandThemeCoreLoaded(true);
} else {
setIsParagonThemeCoreLoaded(true);
}
};
coreThemeLink.onerror = () => {
logError(`Failed to load core theme CSS from ${url}`);
if (isFallbackThemeUrl) {
logError(`Could not load core theme CSS from ${url} or fallback URL. Aborting.`);
if (isBrandOverride) {
setIsBrandThemeCoreLoaded(true);
} else {
setIsParagonThemeCoreLoaded(true);
}
const otherExistingLinks = getExistingCoreThemeLinks(isBrandOverride);
removeExistingLinks(otherExistingLinks);
return;
}
const paragonThemeAccessor = isBrandOverride ? 'brand' : 'paragon';
const themeUrls = PARAGON_THEME?.[paragonThemeAccessor]?.themeUrls ?? {};
if (themeUrls.core) {
const coreThemeFallbackUrl = `${getConfig().BASE_URL}/${themeUrls.core.fileName}`;
logInfo(`Falling back to locally installed core theme CSS: ${coreThemeFallbackUrl}`);
coreThemeLink = createCoreThemeLink(coreThemeFallbackUrl, { isFallbackThemeUrl: true, isBrandOverride });
const otherExistingLinks = getExistingCoreThemeLinks(isBrandOverride);
removeExistingLinks(otherExistingLinks);
const foundParagonThemCoreLink = getParagonThemeCoreLink();
if (foundParagonThemCoreLink) {
foundParagonThemCoreLink.insertAdjacentElement(
'afterend',
coreThemeLink,
);
} else {
document.head.insertAdjacentElement(
'afterbegin',
coreThemeLink,
);
}
} else {
logError(`Failed to load core theme CSS from ${url} or fallback URL. Aborting.`);
}
};
return coreThemeLink;
};

const paragonCoreThemeLink = createCoreThemeLink(themeCore.urls.default);
document.head.insertAdjacentElement('afterbegin', paragonCoreThemeLink);

if (themeCore.urls.brandOverride) {
const brandCoreThemeLink = createCoreThemeLink(themeCore.urls.brandOverride, { isBrandOverride: true });
const foundParagonThemeCoreLink = getParagonThemeCoreLink();
if (foundParagonThemeCoreLink) {
foundParagonThemeCoreLink.insertAdjacentElement('afterend', brandCoreThemeLink);
} else {
document.head.insertAdjacentElement('afterbegin', brandCoreThemeLink);
}
} else {
setIsBrandThemeCoreLoaded(true);
}
}
}, [themeCore?.urls, onLoad]);
if (themeCore.urls.brandOverride) {
const brandCoreThemeLink = createCoreThemeLink(themeCore.urls.brandOverride, { isBrandOverride: true });
const foundParagonThemeCoreLink = getParagonThemeCoreLink();
if (foundParagonThemeCoreLink) {
foundParagonThemeCoreLink.insertAdjacentElement(
'afterend',
brandCoreThemeLink,
);
} else {
document.head.insertAdjacentElement(
'afterbegin',
brandCoreThemeLink,
);
}
} else {
setIsBrandThemeCoreLoaded(true);
}
} else {
existingCoreThemeLink.rel = 'stylesheet';
existingCoreThemeLink.removeAttribute('as');
if (brandCoreLink) {
brandCoreLink.rel = 'stylesheet';
brandCoreLink.removeAttribute('as');
}
setIsParagonThemeCoreLoaded(true);
setIsBrandThemeCoreLoaded(true);
}
}, [themeCore?.urls, onLoad]);
};

export default useParagonThemeCore;
48 changes: 30 additions & 18 deletions src/react/hooks/paragon/useParagonThemeVariants.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -155,24 +155,36 @@ const useParagonThemeVariants = ({ themeVariants, currentThemeVariant, onLoad, o
const paragonThemeVariantLink = createThemeVariantLink(value.urls.default);
document.head.insertAdjacentElement('afterbegin', paragonThemeVariantLink);

if (value.urls.brandOverride) {
const brandThemeVariantLink = createThemeVariantLink(value.urls.brandOverride, { isBrandOverride: true });
const foundParagonThemeVariantLink = getParagonThemeVariantLink();
if (foundParagonThemeVariantLink) {
foundParagonThemeVariantLink.insertAdjacentElement('afterend', brandThemeVariantLink);
} else {
document.head.insertAdjacentElement('afterbegin', brandThemeVariantLink);
}
} else {
setIsBrandThemeVariantLoaded(true);
}
} else {
const updatedStylesheetRel = generateStylesheetRelAttr(themeVariant);
existingThemeVariantLink.rel = updatedStylesheetRel;
existingThemeVariantBrandLink.rel = updatedStylesheetRel;
}
});
}, [themeVariants, currentThemeVariant, onLoad]);
if (value.urls.brandOverride) {
const brandThemeVariantLink = createThemeVariantLink(value.urls.brandOverride, { isBrandOverride: true });
const foundParagonThemeVariantLink = getParagonThemeVariantLink();
if (foundParagonThemeVariantLink) {
foundParagonThemeVariantLink.insertAdjacentElement(
'afterend',
brandThemeVariantLink,
);
} else {
document.head.insertAdjacentElement(
'afterbegin',
brandThemeVariantLink,
);
}
} else {
setIsBrandThemeVariantLoaded(true);
}
} else {
const updatedStylesheetRel = generateStylesheetRelAttr(themeVariant);
existingThemeVariantLink.rel = updatedStylesheetRel;
existingThemeVariantLink.removeAttribute('as');
if (existingThemeVariantBrandLink) {
existingThemeVariantBrandLink.rel = updatedStylesheetRel;
existingThemeVariantBrandLink.removeAttribute('as');
}
setIsParagonThemeVariantLoaded(true);
setIsBrandThemeVariantLoaded(true);
}
});
}, [themeVariants, currentThemeVariant, onLoad]);
};

export default useParagonThemeVariants;

0 comments on commit c85cefb

Please sign in to comment.