MOBILE-4187 app: Add url class on HTML tag
parent
3f701cf7db
commit
f0acc03319
|
@ -32,7 +32,9 @@ import { CoreSitePlugins } from '@features/siteplugins/services/siteplugins';
|
||||||
import { CoreDomUtils } from '@services/utils/dom';
|
import { CoreDomUtils } from '@services/utils/dom';
|
||||||
import { CoreDom } from '@singletons/dom';
|
import { CoreDom } from '@singletons/dom';
|
||||||
import { CorePlatform } from '@services/platform';
|
import { CorePlatform } from '@services/platform';
|
||||||
|
import { CoreUrl } from '@singletons/url';
|
||||||
|
|
||||||
|
const MOODLE_SITE_URL_PREFIX = 'url-';
|
||||||
const MOODLE_VERSION_PREFIX = 'version-';
|
const MOODLE_VERSION_PREFIX = 'version-';
|
||||||
const MOODLEAPP_VERSION_PREFIX = 'moodleapp-';
|
const MOODLEAPP_VERSION_PREFIX = 'moodleapp-';
|
||||||
|
|
||||||
|
@ -58,7 +60,7 @@ export class AppComponent implements OnInit, AfterViewInit {
|
||||||
CoreLang.clearCustomStrings();
|
CoreLang.clearCustomStrings();
|
||||||
|
|
||||||
// Remove version classes from body.
|
// Remove version classes from body.
|
||||||
this.removeVersionClass(MOODLE_VERSION_PREFIX);
|
this.removeModeClasses([MOODLE_VERSION_PREFIX, MOODLE_SITE_URL_PREFIX]);
|
||||||
|
|
||||||
// Go to sites page when user is logged out.
|
// Go to sites page when user is logged out.
|
||||||
await CoreNavigator.navigate('/login/sites', { reset: true });
|
await CoreNavigator.navigate('/login/sites', { reset: true });
|
||||||
|
@ -113,31 +115,42 @@ export class AppComponent implements OnInit, AfterViewInit {
|
||||||
const info = site.getInfo();
|
const info = site.getInfo();
|
||||||
if (info) {
|
if (info) {
|
||||||
// Add version classes to body.
|
// Add version classes to body.
|
||||||
this.removeVersionClass(MOODLE_VERSION_PREFIX);
|
this.removeModeClasses([MOODLE_VERSION_PREFIX, MOODLE_SITE_URL_PREFIX]);
|
||||||
|
|
||||||
this.addVersionClass(MOODLE_VERSION_PREFIX, CoreSites.getReleaseNumber(info.release || ''));
|
this.addVersionClass(MOODLE_VERSION_PREFIX, CoreSites.getReleaseNumber(info.release || ''));
|
||||||
|
this.addSiteUrlClass(info.siteurl);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
this.loadCustomStrings();
|
this.loadCustomStrings();
|
||||||
});
|
});
|
||||||
|
|
||||||
CoreEvents.on(CoreEvents.SITE_UPDATED, (data) => {
|
// Site config is checked in login.
|
||||||
if (data.siteId == CoreSites.getCurrentSiteId()) {
|
CoreEvents.on(CoreEvents.LOGIN_SITE_CHECKED, (data) => {
|
||||||
|
this.addSiteUrlClass(data.config.httpswwwroot);
|
||||||
|
});
|
||||||
|
|
||||||
|
CoreEvents.on(CoreEvents.SITE_UPDATED, async (data) => {
|
||||||
|
if (data.siteId === CoreSites.getCurrentSiteId()) {
|
||||||
this.loadCustomStrings();
|
this.loadCustomStrings();
|
||||||
|
|
||||||
// Add version classes to body.
|
// Add version classes to body.
|
||||||
this.removeVersionClass(MOODLE_VERSION_PREFIX);
|
this.removeModeClasses([MOODLE_VERSION_PREFIX, MOODLE_SITE_URL_PREFIX]);
|
||||||
|
|
||||||
this.addVersionClass(MOODLE_VERSION_PREFIX, CoreSites.getReleaseNumber(data.release || ''));
|
this.addVersionClass(MOODLE_VERSION_PREFIX, CoreSites.getReleaseNumber(data.release || ''));
|
||||||
|
this.addSiteUrlClass(data.siteurl);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
CoreEvents.on(CoreEvents.SITE_ADDED, (data) => {
|
CoreEvents.on(CoreEvents.SITE_ADDED, (data) => {
|
||||||
if (data.siteId == CoreSites.getCurrentSiteId()) {
|
if (data.siteId === CoreSites.getCurrentSiteId()) {
|
||||||
this.loadCustomStrings();
|
this.loadCustomStrings();
|
||||||
|
|
||||||
// Add version classes to body.
|
// Add version classes to body.
|
||||||
this.removeVersionClass(MOODLE_VERSION_PREFIX);
|
this.removeModeClasses([MOODLE_VERSION_PREFIX, MOODLE_SITE_URL_PREFIX]);
|
||||||
|
|
||||||
this.addVersionClass(MOODLE_VERSION_PREFIX, CoreSites.getReleaseNumber(data.release || ''));
|
this.addVersionClass(MOODLE_VERSION_PREFIX, CoreSites.getReleaseNumber(data.release || ''));
|
||||||
|
this.addSiteUrlClass(data.siteurl);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -232,7 +245,7 @@ export class AppComponent implements OnInit, AfterViewInit {
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Convenience function to add version to body classes.
|
* Convenience function to add version to html classes.
|
||||||
*
|
*
|
||||||
* @param prefix Prefix to add to the class.
|
* @param prefix Prefix to add to the class.
|
||||||
* @param release Current release number of the site.
|
* @param release Current release number of the site.
|
||||||
|
@ -249,18 +262,59 @@ export class AppComponent implements OnInit, AfterViewInit {
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Convenience function to remove all version classes form body.
|
* Convenience function to remove all mode classes form body.
|
||||||
*
|
*
|
||||||
* @param prefix Prefix of to the class.
|
* @param prefixes Prefixes of the class mode to be removed.
|
||||||
*/
|
*/
|
||||||
protected removeVersionClass(prefix: string): void {
|
protected removeModeClasses(prefixes: string[]): void {
|
||||||
for (const versionClass of CoreDomUtils.getModeClasses()) {
|
for (const modeClass of CoreDomUtils.getModeClasses()) {
|
||||||
if (!versionClass.startsWith(prefix)) {
|
if (!prefixes.some((prefix) => modeClass.startsWith(prefix))) {
|
||||||
continue;
|
continue;
|
||||||
}
|
}
|
||||||
|
|
||||||
CoreDomUtils.toggleModeClass(versionClass, false);
|
CoreDomUtils.toggleModeClass(modeClass, false);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Converts the provided URL into a CSS class that be used within the page.
|
||||||
|
* This is primarily used to add the siteurl to the body tag as a CSS class.
|
||||||
|
* Extracted from LMS url_to_class_name function.
|
||||||
|
*
|
||||||
|
* @param url Url.
|
||||||
|
* @returns Class name
|
||||||
|
*/
|
||||||
|
protected urlToClassName(url: string): string {
|
||||||
|
const parsedUrl = CoreUrl.parse(url);
|
||||||
|
|
||||||
|
if (!parsedUrl) {
|
||||||
|
return '';
|
||||||
|
}
|
||||||
|
|
||||||
|
let className = parsedUrl.domain?.replace('.', '-') || '';
|
||||||
|
|
||||||
|
if (parsedUrl.port) {
|
||||||
|
className += `--${parsedUrl.port}`;
|
||||||
|
}
|
||||||
|
if (parsedUrl.path) {
|
||||||
|
const leading = new RegExp('^/+');
|
||||||
|
const trailing = new RegExp('/+$');
|
||||||
|
const path = parsedUrl.path.replace(leading, '').replace(trailing, '');
|
||||||
|
if (path) {
|
||||||
|
className += '--' + path.replace('/', '-');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return className;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Convenience function to add site url to html classes.
|
||||||
|
*/
|
||||||
|
protected addSiteUrlClass(siteUrl: string): void {
|
||||||
|
const className = this.urlToClassName(siteUrl);
|
||||||
|
|
||||||
|
CoreDomUtils.toggleModeClass(MOODLE_SITE_URL_PREFIX + className, true);
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue