Skip to content

Commit

Permalink
Added allow SCSS for Moodle mobile app custom styles. moodle-an-hochs…
Browse files Browse the repository at this point in the history 
…chulen#215
  • Loading branch information
@mwehr
mwehr committed Jul 22, 2023
1 parent fb42d50 commit da97496
Show file tree
Hide file tree
Showing 4 changed files with 66 additions and 38 deletions.
13 changes: 7 additions & 6 deletions lang/en/theme_boost_union.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -337,12 +337,13 @@
$string['mobiletab'] = 'Mobile app';
// ... Section: Mobile appearance.
$string['mobileappearanceheading'] = 'Mobile appearance';
// ... ... Setting: Additional CSS for Mobile app.
$string['mobilecss'] = 'Additional CSS for Mobile app';
$string['mobilecss_desc'] = 'With this setting, you can write custom CSS code to customise your mobile app interface. The CSS code will be only added to the Mobile app depiction of this Moodle instance and will not be shown in the webbrowser version. Read more about this feature in the <a href="https://moodledev.io/general/app/customisation/remote-themes#how-do-remote-themes-work">Moodle dev docs</a>.';
$string['mobilecss_set'] = 'As soon as you add any CSS code to this setting and save the setting, the <a href="{$a->url}">Moodle core setting <em>mobilecssurl</em></a> will be automatically set to a URL of the Boost Union theme.';
$string['mobilecss_overwrite'] = 'As soon as you add any CSS code to this setting and save the setting, the <a href="{$a->url}">Moodle core setting <em>mobilecssurl</em></a> will be automatically overwritten with a URL of the Boost Union theme. Currently this setting is set to <a href="{$a->value}">{$a->value}</a>.';
$string['mobilecss_donotchange'] = 'This step is necessary to ship the CSS code to the Mobile app. Do not change the URL there unless you really want to remove the CSS code from the Mobile app again.';
// ... ... Setting: Additional SCSS for Mobile app.
$string['mobilescss'] = 'Additional SCSS for Mobile app';
$string['mobilescss_desc'] = 'With this setting, you can write custom SCSS code to customise your mobile app interface. The generated CSS code will be only added to the Mobile app depiction of this Moodle instance and will not be shown in the webbrowser version. Read more about this feature in the <a href="https://moodledev.io/general/app/customisation/remote-themes#how-do-remote-themes-work">Moodle dev docs</a>.';
$string['mobilescss_scsscompile_error'] = 'Error while compiling SCSS.';
$string['mobilescss_set'] = 'As soon as you add any SCSS code to this setting and save the setting, the <a href="{$a->url}">Moodle core setting <em>mobilecssurl</em></a> will be automatically set to a URL of the Boost Union theme.';
$string['mobilescss_overwrite'] = 'As soon as you add any SCSS code to this setting and save the setting, the <a href="{$a->url}">Moodle core setting <em>mobilecssurl</em></a> will be automatically overwritten with a URL of the Boost Union theme. Currently this setting is set to <a href="{$a->value}">{$a->value}</a>.';
$string['mobilescss_donotchange'] = 'This step is necessary to ship the CSS code to the Mobile app. Do not change the URL there unless you really want to remove the CSS code from the Mobile app again.';

// Settings: Feel page.
$string['configtitlefeel'] = 'Feel';
Expand Down
34 changes: 30 additions & 4 deletions locallib.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1290,17 +1290,43 @@ function theme_boost_union_get_course_header_image_url() {
}

/**
* Helper function which sets the URL to the CSS file as soon as the theme's mobilescss setting has any CSS code.
* Helper function which sets the URL to the CSS file as soon as the theme's mobilescss setting has any SCSS code.
* It's meant to be called as callback when changing the admin setting only.
* *
* @throws coding_exception
* @throws dml_exception
* @throws moodle_exception
*/
function theme_boost_union_set_mobilecss_url() {
function theme_boost_union_build_mobilescss() {
GLOBAL $CFG, $PAGE;
// Check if the admin has set any CSS code for the Mobile app.
$csscode = get_config('theme_boost_union', 'mobilescss');
if (!empty($csscode)) {
$scsscode = get_config('theme_boost_union', 'mobilescss');
if (!empty($scsscode)) {
include_once($CFG->libdir.'/csslib.php');
// Store the CSS.
// We might need more memory/time to do this, so let's play safe.
raise_memory_limit(MEMORY_EXTRA);
core_php_time_limit::raise(300);

// Set-up the compiler.
$compiler = new core_scss([]);
$compiler->append_raw_scss($scsscode);

try {
// Compile!
$csscontent = $compiler->to_css();
$csscontent = core_minify::css($csscontent);
$cachedir = make_localcache_directory('scsscache-mobile-boost-union', false);
// ...css_store_css() first param isn't used inside the function.
css_store_css($PAGE->theme, $cachedir. '/mobile.css' , $csscontent);
} catch (\Exception $e) {
throw new \moodle_exception('mobilescss_scsscompile_error', 'theme_boost_union', '', null, $e->getMessage());
} finally {
// Try to save memory.
$compiler = null;
unset($compiler);
}

// Build the Mobile app CSS file URL and especially add the current time as rev parameter.
// This parameter isn't the theme revision as the theme cache is not cleared when this setting is stored.
// It is just the time when the setting is saved.
Expand Down
39 changes: 21 additions & 18 deletions mobile/styles.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,24 +42,27 @@

// Initialize SCSS code.
$scss = '';

// Get the raw SCSS from the admin setting,
// throw an exception if get_config throws an exception which happens only if something is really wrong.
try {
// Note: In the current state of implementation, this setting only allows the usage of custom CSS, not SCSS.
// There is a follow-up issue on Github to add SCSS support.
// However, to ease this future improvement, the setting has already been called 'mobilescss'.
$configmobilescss = get_config('theme_boost_union', 'mobilescss');

// Catch the exception.
} catch (\Exception $e) {
// Just die, there is no use to output any error message, it would even be counter-productive if the browser
// tries to interpret it as CSS code.
die;
$cssfile = $CFG->localcachedir. '/scsscache-mobile-boost-union/mobile.css';
if (!file_exists($cssfile)) {
// Maybe cache was purged.
// Check if we have set a theme union mobile url.
if (!empty($CFG->mobilecssurl) && strpos($CFG->mobilecssurl, '/theme/boost_union/mobile/styles.php') !== false) {
require_once(__DIR__ . '/../locallib.php');
try {
// Rebuild mobile.css .
theme_boost_union_build_mobilescss();
} catch (moodle_exception) {
// In case of exception send empty css.
css_send_cached_css_content($scss, theme_get_revision());
die;
}
} else {
// Should not happen.
css_send_cached_css_content($scss, theme_get_revision());
die;
}
}

// Always add the CSS code even if it is empty.
$scss .= $configmobilescss;

// Send out the resulting CSS code. The theme revision will be set as etag to support the browser caching.
$scss = file_get_contents($cssfile);
css_send_cached_css_content($scss, theme_get_revision());

18 changes: 8 additions & 10 deletions settings.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1000,36 +1000,34 @@
$setting = new admin_setting_heading($name, $title, null);
$tab->add($setting);

// Setting: Additional CSS for Mobile app.
// Setting: Additional SCSS for Mobile app.
$name = 'theme_boost_union/mobilescss';
$title = get_string('mobilecss', 'theme_boost_union', null, true);
$description = get_string('mobilecss_desc', 'theme_boost_union', null, true);
$title = get_string('mobilescss', 'theme_boost_union', null, true);
$description = get_string('mobilescss_desc', 'theme_boost_union', null, true);
$mobilecssurl = new moodle_url('/admin/settings.php', array('section' => 'mobileappearance'));
// If another Mobile App CSS URL is set already (in the $CFG->mobilecssurl setting), we add a warning to the description.
if (isset($CFG->mobilecssurl) && !empty($CFG->mobilecssurl) &&
strpos($CFG->mobilecssurl, '/boost_union/mobile/styles.php') == false) {
$mobilescssnotification = new \core\output\notification(
get_string('mobilecss_overwrite', 'theme_boost_union',
get_string('mobilescss_overwrite', 'theme_boost_union',
array('url' => $mobilecssurl->out(), 'value' => $CFG->mobilecssurl)).' '.
get_string('mobilecss_donotchange', 'theme_boost_union'),
get_string('mobilescss_donotchange', 'theme_boost_union'),
\core\output\notification::NOTIFY_WARNING);
$mobilescssnotification->set_show_closebutton(false);
$description .= $OUTPUT->render($mobilescssnotification);

// Otherwise, we just add a note to the description.
} else {
$mobilescssnotification = new \core\output\notification(
get_string('mobilecss_set', 'theme_boost_union',
get_string('mobilescss_set', 'theme_boost_union',
array('url' => $mobilecssurl->out())).' '.
get_string('mobilecss_donotchange', 'theme_boost_union'),
get_string('mobilescss_donotchange', 'theme_boost_union'),
\core\output\notification::NOTIFY_INFO);
$mobilescssnotification->set_show_closebutton(false);
$description .= $OUTPUT->render($mobilescssnotification);
}
// Using admin_setting_scsscode is not 100% right here as this setting does not support SCSS.
// However, is shouldn't harm if the CSS code is parsed by the setting.
$setting = new admin_setting_scsscode($name, $title, $description, '', PARAM_RAW);
$setting->set_updatedcallback('theme_boost_union_set_mobilecss_url');
$setting->set_updatedcallback('theme_boost_union_build_mobilescss');
$tab->add($setting);

// Add tab to settings page.
Expand Down

0 comments on commit da97496

Please sign in to comment.