MDL-77049 core_h5p: Use the styles from Raw SCSS theme settings

MDL-69087 added an option to let themes personalize the H5P styles.
This patch implements the h5p_alter_styles() method in boost, to
let admins personalize the H5P styles using the 'Raw initial SCSS'
and 'Raw SCSS' theme settings.
That way, users won't need to create their own themes to define
some styles for the H5P player.
This commit is contained in:
Sara Arjona 2023-03-01 17:34:43 +01:00
parent 794f107e88
commit 91175a6773
3 changed files with 69 additions and 12 deletions

View file

@ -50,6 +50,8 @@ class file_storage implements H5PFileStorage {
public const CACHED_ASSETS_FILEAREA = 'cachedassets'; public const CACHED_ASSETS_FILEAREA = 'cachedassets';
/** The export file area */ /** The export file area */
public const EXPORT_FILEAREA = 'export'; public const EXPORT_FILEAREA = 'export';
/** The export css file area */
public const CSS_FILEAREA = 'css';
/** The icon filename */ /** The icon filename */
public const ICON_FILENAME = 'icon.svg'; public const ICON_FILENAME = 'icon.svg';

View file

@ -14,18 +14,8 @@
// You should have received a copy of the GNU General Public License // You should have received a copy of the GNU General Public License
// along with Moodle. If not, see <http://www.gnu.org/licenses/>. // along with Moodle. If not, see <http://www.gnu.org/licenses/>.
/**
* Renderer.
*
* @package core_h5p
* @copyright 2020 Victor Deniz {victor@moodle.com}
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
*/
namespace core_h5p\output; namespace core_h5p\output;
defined('MOODLE_INTERNAL') || die();
use plugin_renderer_base; use plugin_renderer_base;
/** /**
@ -41,11 +31,75 @@ class renderer extends plugin_renderer_base {
* Alter which stylesheets are loaded for H5P. * Alter which stylesheets are loaded for H5P.
* This is useful for adding custom styles or replacing existing ones. * This is useful for adding custom styles or replacing existing ones.
* *
* @param array|object $scripts List of stylesheets that will be loaded * This method can be overridden by other themes if the styles must be loaded from
* a different place than the "Raw initial SCSS" and "Raw SCSS" theme settings.
*
* @param \stdClass[] $styles List of stylesheets that will be loaded
* @param array $libraries Array of libraries indexed by the library's machineName * @param array $libraries Array of libraries indexed by the library's machineName
* @param string $embedtype Possible values: div, iframe, external, editor * @param string $embedtype Possible values: div, iframe, external, editor
*/ */
public function h5p_alter_styles(&$scripts, array $libraries, string $embedtype) { public function h5p_alter_styles(&$styles, array $libraries, string $embedtype) {
global $CFG, $DB;
$record = [
'contextid' => \context_system::instance()->id,
'component' => \core_h5p\file_storage::COMPONENT,
'filearea' => \core_h5p\file_storage::CSS_FILEAREA,
'itemid' => 0,
'filepath' => '/',
'filename' => $CFG->theme . '_h5p.css',
];
$fs = get_file_storage();
// Check if the CSS file for the current theme needs to be updated (because the SCSS settings have changed recently).
if ($cssfile = $fs->get_file(
$record['contextid'],
$record['component'],
$record['filearea'],
$record['itemid'],
$record['filepath'],
$record['filename'])) {
// Get the last time when the SCSS and CSSPRE settings were updated for the current theme and compare it with the
// time modified of the H5P CSS file, to determine whether it needs to be updated.
$sql = "SELECT MAX(timemodified) as timemodified
FROM {config_log}
WHERE plugin = :theme AND (name = 'scss' OR name = 'scsspre')";
$params = ['theme' => 'theme_' . $CFG->theme];
$setting = $DB->get_record_sql($sql, $params);
if ($setting && $setting->timemodified > $cssfile->get_timemodified()) {
// The CSS file needs to be updated. First, delete it to recreate it later with the current CSS.
$cssfile->delete();
$cssfile = null;
}
}
$theme = \theme_config::load($CFG->theme);
// When 'Raw initial SCSS' and 'Raw SCSS' theme settings are empty, the file doesn't need to be created.
if (empty($theme->settings->scsspre) && empty($theme->settings->scss)) {
return;
}
// If the CSS file doesn't exist, create it with the styles defined in 'Raw initial SCSS' and 'Raw SCSS' theme settings.
// As these scss and scsspre settings might have dependencies on the theme, the whole CSS theme content will be used and
// passed to the H5P player.
if (!$cssfile) {
$css = $theme->get_css_content();
$cssfile = $fs->create_file_from_string($record, $css);
}
$cssurl = \moodle_url::make_pluginfile_url(
$record['contextid'],
$record['component'],
$record['filearea'],
null,
$record['filepath'],
$record['filename']
);
// Add the CSS file to the styles array, to load it from the H5P player.
$styles[] = (object) [
'path' => $cssurl->out(),
'version' => '?ver='.$cssfile->get_timemodified(),
];
} }
/** /**

View file

@ -96,6 +96,7 @@ function core_h5p_pluginfile($course, $cm, $context, string $filearea, array $ar
break; break;
case \core_h5p\file_storage::CACHED_ASSETS_FILEAREA: case \core_h5p\file_storage::CACHED_ASSETS_FILEAREA:
case \core_h5p\file_storage::EXPORT_FILEAREA: case \core_h5p\file_storage::EXPORT_FILEAREA:
case \core_h5p\file_storage::CSS_FILEAREA:
$itemid = 0; $itemid = 0;
break; break;
} }