From df1ddfc955ef3bb46d3b1e4694e7b931655a3079 Mon Sep 17 00:00:00 2001 From: Nayden Naydenov <31909318+nnaydenow@users.noreply.github.com> Date: Thu, 30 Mar 2023 14:29:26 +0300 Subject: [PATCH] fix(framework): relative paths for external themes (#6799) --- docs/3-customizing/01-theme.md | 10 ++++++ packages/base/bundle.esm.js | 2 ++ packages/base/src/validateThemeRoot.ts | 30 ++++++++-------- packages/base/test/pages/Configuration.html | 1 + .../base/test/specs/ConfigurationURL.spec.js | 34 +++++++++++++++++-- 5 files changed, 59 insertions(+), 18 deletions(-) diff --git a/docs/3-customizing/01-theme.md b/docs/3-customizing/01-theme.md index c0f11c49f004..463614cf4c3e 100644 --- a/docs/3-customizing/01-theme.md +++ b/docs/3-customizing/01-theme.md @@ -86,4 +86,14 @@ setTheme("sap_fiori_3_dark"); For more on configuring themes, see [Configuration](../2-advanced/01-configuration.md). +## Load external theme +To load an external theme, you have to specify where the theme resources are located in the theme URL parameter. For example: +``` +index.html?sap-ui-theme=mytheme@https://my-example-host.com/ +``` + +In this example, "mytheme" theme will be applied and its resources (CSS variables specific to the theme) will be loaded from https://my-example-host.com/UI5/Base/baseLib/mytheme/css_variables.css. + +**Note:** When an external theme is loaded some security restrictions will apply. Absolute URLs to a different origin than the current page will return the current page as an origin. To allow certain origins, you have to use `` tag inside the head of the page. + Next: [Custom Fonts](./02-fonts.md) diff --git a/packages/base/bundle.esm.js b/packages/base/bundle.esm.js index 445956f18cf3..cb586815d4d9 100644 --- a/packages/base/bundle.esm.js +++ b/packages/base/bundle.esm.js @@ -31,6 +31,7 @@ import { getAnimationMode } from "./dist/config/AnimationMode.js"; import { getLanguage, setLanguage } from "./dist/config/Language.js"; import { getCalendarType } from "./dist/config/CalendarType.js"; import { getTheme, setTheme } from "./dist/config/Theme.js"; +import { getThemeRoot } from "./dist/config/ThemeRoots"; import { getNoConflict, setNoConflict } from "./dist/config/NoConflict.js"; import { getRTL } from "./dist/config/RTL.js"; import { getFirstDayOfWeek, getLegacyDateCalendarCustomizing } from "./dist/config/FormatSettings.js"; @@ -44,6 +45,7 @@ window["sap-ui-webcomponents-bundle"] = { getLanguage, setLanguage, getTheme, + getThemeRoot, setTheme, getNoConflict, setNoConflict, diff --git a/packages/base/src/validateThemeRoot.ts b/packages/base/src/validateThemeRoot.ts index 5533a68ce30a..6e8a7592e16c 100644 --- a/packages/base/src/validateThemeRoot.ts +++ b/packages/base/src/validateThemeRoot.ts @@ -20,29 +20,27 @@ const buildCorrectUrl = (oldUrl: string, newOrigin: string) => { }; const validateThemeRoot = (themeRoot: string) => { - let themeRootURL, - resultUrl; + let resultUrl; try { - themeRootURL = new URL(themeRoot); - - const origin = themeRootURL.origin; - - themeRootURL = themeRootURL.toString(); - - if (themeRootURL.startsWith(".") || themeRootURL.startsWith("/")) { + if (themeRoot.startsWith(".") || themeRoot.startsWith("/")) { // Handle relative url // new URL("/newExmPath", "http://example.com/exmPath") => http://example.com/newExmPath // new URL("./newExmPath", "http://example.com/exmPath") => http://example.com/exmPath/newExmPath // new URL("../newExmPath", "http://example.com/exmPath") => http://example.com/newExmPath - resultUrl = new URL(themeRootURL, window.location.href).toString(); - } else if (origin && validateThemeOrigin(origin)) { - // If origin is allowed, use it - resultUrl = themeRootURL.toString(); + resultUrl = new URL(themeRoot, window.location.href).toString(); } else { - // If origin is not allow and the URL is not relative, we have to replace the origin - // with current location - resultUrl = buildCorrectUrl(themeRootURL, window.location.href); + const themeRootURL = new URL(themeRoot); + const origin = themeRootURL.origin; + + if (origin && validateThemeOrigin(origin)) { + // If origin is allowed, use it + resultUrl = themeRootURL.toString(); + } else { + // If origin is not allow and the URL is not relative, we have to replace the origin + // with current location + resultUrl = buildCorrectUrl(themeRootURL.toString(), window.location.href); + } } if (!resultUrl.endsWith("/")) { diff --git a/packages/base/test/pages/Configuration.html b/packages/base/test/pages/Configuration.html index 3ddf90913f94..af2a6cd38f44 100644 --- a/packages/base/test/pages/Configuration.html +++ b/packages/base/test/pages/Configuration.html @@ -2,6 +2,7 @@ + Base package default test page diff --git a/packages/base/test/specs/ConfigurationURL.spec.js b/packages/base/test/specs/ConfigurationURL.spec.js index 1ee13b9b8b20..7eab8b2d5c49 100644 --- a/packages/base/test/specs/ConfigurationURL.spec.js +++ b/packages/base/test/specs/ConfigurationURL.spec.js @@ -1,8 +1,8 @@ const assert = require("chai").assert; describe("Some settings can be set via SAP UI URL params", () => { - before(async () => { - await browser.url("test/pages/Configuration.html?sap-ui-rtl=true&sap-ui-language=ja&sap-ui-calendarType=Japanese&sap-ui-theme=sap_belize_hcb&sap-ui-animationMode=basic"); + beforeEach(async () => { + await browser.url("test/pages/Configuration.html?sap-ui-rtl=true&sap-ui-language=ja&sap-ui-calendarType=Japanese&sap-ui-theme=sap_belize_hcb@https://example.com&sap-ui-animationMode=basic"); }); it("Tests that RTL is applied", async () => { @@ -37,6 +37,36 @@ describe("Some settings can be set via SAP UI URL params", () => { assert.strictEqual(res, 'sap_belize_hcb', "Thems is HCB"); }); + it("Tests that theme root is applied", async () => { + let location; + let res = await browser.executeAsync(done => { + const config = window['sap-ui-webcomponents-bundle'].configuration; + done(config.getThemeRoot()); + }); + assert.strictEqual(res, 'https://example.com/UI5/', "Theme root is https://example.com/UI5"); + + await browser.url("test/pages/Configuration.html?sap-ui-theme=sap_belize_hcb@https://another-example.com"); + + res = await browser.executeAsync(done => { + const config = window['sap-ui-webcomponents-bundle'].configuration; + done(config.getThemeRoot()); + }); + location = await browser.executeAsync(done => { + done(window.location); + }); + + assert.strictEqual(res, `${location.origin}/UI5/`, `Theme root is ${location.origin}/UI5/`); + + await browser.url("test/pages/Configuration.html?sap-ui-theme=sap_belize_hcb@./test"); + + res = await browser.executeAsync(done => { + const config = window['sap-ui-webcomponents-bundle'].configuration; + done(config.getThemeRoot()); + }); + + assert.ok(res.endsWith("/test/UI5/"), `Theme root is set correctly with relative url`); + }); + it("Tests that animationMode is applied", async () => { const res = await browser.executeAsync(done => { const config = window['sap-ui-webcomponents-bundle'].configuration;