Skip to content

Commit

Permalink
Merge pull request #3902 from crazyserver/MOBILE-4266
Browse files Browse the repository at this point in the history 
MOBILE-4266 site: Add site theme class to html tags
  • Loading branch information
@NoelDeMartin
NoelDeMartin authored Jan 31, 2024
2 parents a8ffee0 + 8b38b54 commit 667ba02
Show file tree
Hide file tree
Showing 9 changed files with 408 additions and 246 deletions.
23 changes: 1 addition & 22 deletions src/app/app.component.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,37 +13,16 @@
// limitations under the License.

import { AppComponent } from '@/app/app.component';
import { CoreEvents } from '@singletons/events';
import { CoreLang, CoreLangProvider } from '@services/lang';

import { mockSingleton, renderComponent } from '@/testing/utils';
import { CoreNavigator, CoreNavigatorService } from '@services/navigator';
import { renderComponent } from '@/testing/utils';

describe('AppComponent', () => {

let langProvider: CoreLangProvider;
let navigator: CoreNavigatorService;

beforeEach(() => {
navigator = mockSingleton(CoreNavigator, ['navigate']);
langProvider = mockSingleton(CoreLang, ['clearCustomStrings']);
});

it('should render', async () => {
const fixture = await renderComponent(AppComponent);

expect(fixture.debugElement.componentInstance).toBeTruthy();
expect(fixture.nativeElement.querySelector('ion-router-outlet')).toBeTruthy();
});

it('cleans up on logout', async () => {
const fixture = await renderComponent(AppComponent);

fixture.componentInstance.ngOnInit();
CoreEvents.trigger(CoreEvents.LOGOUT);

expect(langProvider.clearCustomStrings).toHaveBeenCalled();
expect(navigator.navigate).toHaveBeenCalledWith('/login/sites', { reset: true });
});

});
218 changes: 2 additions & 216 deletions src/app/app.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,33 +14,20 @@

import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core';
import { IonRouterOutlet } from '@ionic/angular';
import { BackButtonEvent, ScrollDetail } from '@ionic/core';
import { BackButtonEvent } from '@ionic/core';

import { CoreLang } from '@services/lang';
import { CoreLoginHelper } from '@features/login/services/login-helper';
import { CoreEvents } from '@singletons/events';
import { NgZone, SplashScreen } from '@singletons';
import { CoreNetwork } from '@services/network';
import { SplashScreen } from '@singletons';
import { CoreApp } from '@services/app';
import { CoreSites } from '@services/sites';
import { CoreNavigator } from '@services/navigator';
import { CoreSubscriptions } from '@singletons/subscriptions';
import { CoreWindow } from '@singletons/window';
import { CoreUtils } from '@services/utils/utils';
import { CoreConstants } from '@/core/constants';
import { CoreSitePlugins } from '@features/siteplugins/services/siteplugins';
import { CoreDomUtils } from '@services/utils/dom';
import { CoreDom } from '@singletons/dom';
import { CorePlatform } from '@services/platform';
import { CoreUrl } from '@singletons/url';
import { CoreLogger } from '@singletons/logger';
import { CorePromisedValue } from '@classes/promised-value';
import { register } from 'swiper/element/bundle';

const MOODLE_SITE_URL_PREFIX = 'url-';
const MOODLE_VERSION_PREFIX = 'version-';
const MOODLEAPP_VERSION_PREFIX = 'moodleapp-';

register();

@Component({
Expand All @@ -59,43 +46,6 @@ export class AppComponent implements OnInit, AfterViewInit {
ngOnInit(): void {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const win = <any> window;
CoreDomUtils.toggleModeClass('ionic7', true, { includeLegacy: true });
CoreDomUtils.toggleModeClass('development', CoreConstants.BUILD.isDevelopment);
this.addVersionClass(MOODLEAPP_VERSION_PREFIX, CoreConstants.CONFIG.versionname.replace('-dev', ''));

CoreEvents.on(CoreEvents.LOGOUT, async () => {
// Unload lang custom strings.
CoreLang.clearCustomStrings();

// Remove version classes from body.
this.removeModeClasses([MOODLE_VERSION_PREFIX, MOODLE_SITE_URL_PREFIX]);

// Go to sites page when user is logged out.
await CoreNavigator.navigate('/login/sites', { reset: true });

if (CoreSitePlugins.hasSitePluginsLoaded) {
// Temporary fix. Reload the page to unload all plugins.
window.location.reload();
}
});

// Listen to scroll to add style when scroll is not 0.
win.addEventListener('ionScroll', async ({ detail, target }: CustomEvent<ScrollDetail>) => {
if ((target as HTMLElement).tagName != 'ION-CONTENT') {
return;
}
const content = (target as HTMLIonContentElement);

const page = content.closest('.ion-page');
if (!page) {
return;
}

page.querySelector<HTMLIonHeaderElement>('ion-header')?.classList.toggle('core-header-shadow', detail.scrollTop > 0);

const scrollElement = await content.getScrollElement();
content.classList.toggle('core-footer-shadow', !CoreDom.scrollIsBottom(scrollElement));
});

CorePlatform.resume.subscribe(() => {
// Wait a second before setting it to false since in iOS there could be some frozen WS calls.
Expand All @@ -117,53 +67,6 @@ export class AppComponent implements OnInit, AfterViewInit {
CoreWindow.open(url);
};

CoreEvents.on(CoreEvents.LOGIN, async (data) => {
if (data.siteId) {
const site = await CoreSites.getSite(data.siteId);
const info = site.getInfo();
if (info) {
// Add version classes to body.
this.removeModeClasses([MOODLE_VERSION_PREFIX, MOODLE_SITE_URL_PREFIX]);

this.addVersionClass(MOODLE_VERSION_PREFIX, CoreSites.getReleaseNumber(info.release || ''));
this.addSiteUrlClass(info.siteurl);
}
}

this.loadCustomStrings();
});

// Site config is checked in login.
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();

// Add version classes to body.
this.removeModeClasses([MOODLE_VERSION_PREFIX, MOODLE_SITE_URL_PREFIX]);

this.addVersionClass(MOODLE_VERSION_PREFIX, CoreSites.getReleaseNumber(data.release || ''));
this.addSiteUrlClass(data.siteurl);
}
});

CoreEvents.on(CoreEvents.SITE_ADDED, (data) => {
if (data.siteId === CoreSites.getCurrentSiteId()) {
this.loadCustomStrings();

// Add version classes to body.
this.removeModeClasses([MOODLE_VERSION_PREFIX, MOODLE_SITE_URL_PREFIX]);

this.addVersionClass(MOODLE_VERSION_PREFIX, CoreSites.getReleaseNumber(data.release || ''));
this.addSiteUrlClass(data.siteurl);
}
});

this.onPlatformReady();

// Quit app with back button.
document.addEventListener('ionBackButton', (event: BackButtonEvent) => {
// This callback should have the lowest priority in the app.
Expand Down Expand Up @@ -244,121 +147,4 @@ export class AppComponent implements OnInit, AfterViewInit {
return promise;
}

/**
* Async init function on platform ready.
*/
protected async onPlatformReady(): Promise<void> {
await CorePlatform.ready();

this.logger.debug('Platform is ready');

// Refresh online status when changes.
CoreNetwork.onChange().subscribe(() => {
// Execute the callback in the Angular zone, so change detection doesn't stop working.
NgZone.run(() => {
const isOnline = CoreNetwork.isOnline();
const hadOfflineMessage = CoreDomUtils.hasModeClass('core-offline');

CoreDomUtils.toggleModeClass('core-offline', !isOnline, { includeLegacy: true });

if (isOnline && hadOfflineMessage) {
CoreDomUtils.toggleModeClass('core-online', true, { includeLegacy: true });

setTimeout(() => {
CoreDomUtils.toggleModeClass('core-online', false, { includeLegacy: true });
}, 3000);
} else if (!isOnline) {
CoreDomUtils.toggleModeClass('core-online', false, { includeLegacy: true });
}
});
});

const isOnline = CoreNetwork.isOnline();
CoreDomUtils.toggleModeClass('core-offline', !isOnline, { includeLegacy: true });
}

/**
* Load custom lang strings. This cannot be done inside the lang provider because it causes circular dependencies.
*/
protected loadCustomStrings(): void {
const currentSite = CoreSites.getCurrentSite();

if (currentSite) {
CoreLang.loadCustomStringsFromSite(currentSite);
}
}

/**
* Convenience function to add version to html classes.
*
* @param prefix Prefix to add to the class.
* @param release Current release number of the site.
*/
protected addVersionClass(prefix: string, release: string): void {
const parts = release.split('.', 3);

parts[1] = parts[1] || '0';
parts[2] = parts[2] || '0';

CoreDomUtils.toggleModeClass(prefix + parts[0], true, { includeLegacy: true });
CoreDomUtils.toggleModeClass(prefix + parts[0] + '-' + parts[1], true, { includeLegacy: true });
CoreDomUtils.toggleModeClass(prefix + parts[0] + '-' + parts[1] + '-' + parts[2], true, { includeLegacy: true });
}

/**
* Convenience function to remove all mode classes form body.
*
* @param prefixes Prefixes of the class mode to be removed.
*/
protected removeModeClasses(prefixes: string[]): void {
for (const modeClass of CoreDomUtils.getModeClasses()) {
if (!prefixes.some((prefix) => modeClass.startsWith(prefix))) {
continue;
}

CoreDomUtils.toggleModeClass(modeClass, false, { includeLegacy: true });
}
}

/**
* 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(/\./g, '-') || '';

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(/\//g, '-') || '';
}
}

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);
}

}
2 changes: 1 addition & 1 deletion src/core/features/courses/services/courses.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1402,7 +1402,7 @@ export type CoreCourseSearchedData = CoreCourseBasicSearchedData & {
enablecompletion?: number; // Completion enabled? 1: yes 0: no.
completionnotify?: number; // 1: yes 0: no.
lang?: string; // Forced course language.
theme?: string; // Fame of the forced theme.
theme?: string; // Name of the forced theme.
marker?: number; // Current course marker.
legacyfiles?: number; // If legacy files are enabled.
calendartype?: string; // Calendar type.
Expand Down
22 changes: 22 additions & 0 deletions src/core/initializers/app.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
// (C) Copyright 2015 Moodle Pty Ltd.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

import { CoreHTMLClasses } from '@singletons/html-classes';

/**
* General App initializer.
*/
export default async function(): Promise<void> {
CoreHTMLClasses.initialize();
}
17 changes: 13 additions & 4 deletions src/core/services/lang.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ import { AddonFilterMultilangHandler } from '@addons/filter/multilang/services/h
import { AddonFilterMultilang2Handler } from '@addons/filter/multilang2/services/handlers/multilang2';
import { firstValueFrom } from 'rxjs';
import { CoreLogger } from '@singletons/logger';
import { CoreSites } from './sites';

/*
* Service to handle language features, like changing the current language.
Expand Down Expand Up @@ -380,14 +381,22 @@ export class CoreLangProvider {
/**
* Loads custom strings obtained from site.
*
* @param currentSite Current site object.
* @param currentSite Current site object. If not defined, use current site.
*/
loadCustomStringsFromSite(currentSite: CoreSite): void {
loadCustomStringsFromSite(currentSite?: CoreSite): void {
currentSite = currentSite ?? CoreSites.getCurrentSite();

if (!currentSite) {
return;
}

const customStrings = currentSite.getStoredConfig('tool_mobile_customlangstrings');

if (customStrings !== undefined) {
this.loadCustomStrings(customStrings);
if (customStrings === undefined) {
return;
}

this.loadCustomStrings(customStrings);
}

/**
Expand Down
Loading

0 comments on commit 667ba02

Please sign in to comment.