New background option by section

README.md

@@ -18,6 +18,8 @@ Download zip package, extract the onetopic folder and upload this folder into co
 
 ### 2024050905:
 * New tab styles editor when editing each section.
+* Select icon by tab and tab state.
+* New background option by section.
 
 ### 2024050904:
 * New "sectionname" parameter to navigate to a tab directly using its name.

amd/src/onetopicbackground.js

@@ -0,0 +1,115 @@
+// This file is part of Moodle - http://moodle.org/
+//
+// Moodle is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// Moodle is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+
+/**
+ * Onetopic background selector.
+ *
+ * @module    format_onetopic/onetopicbackground
+ * @copyright 2021 David Herney Bernal - cirano
+ * @license   http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+import $ from 'jquery';
+import ModalFactory from 'core/modal_factory';
+import ModalSaveCancel from 'core/modal_save_cancel';
+import ModalEvents from 'core/modal_events';
+
+/**
+ * Component initialization.
+ *
+ * @method init
+ * @param {String} controlid The control id.
+ */
+export const init = (controlid) => {
+
+    var $controlinput = $('#' + controlid);
+    var $control = $controlinput.parent('.backgroundpicker');
+    var $controlwindow = $control.find('.backgroundpickerwindow');
+    var $controlbutton = $control.find('.backgroundpickerselector');
+    var $colorpickerinput = $controlwindow.find('input.form-control[type="text"]');
+
+    // Initialize the modal window.
+    var title = $controlwindow.attr('title');
+    var buttons = [];
+    buttons['save'] = $controlwindow.data('savelabel');
+
+    var setEvents = function(modal) {
+        modal.getRoot().on(ModalEvents.cancel, () => {
+            modal.hide();
+        });
+
+        modal.getRoot().on(ModalEvents.save, () => {
+            var newcolor = $colorpickerinput.val();
+            var val = $controlinput.val();
+            var color = readColor(val);
+            if (color) {
+                val = val.replace(color, newcolor);
+            } else if (val.trim() === '') {
+                val = newcolor;
+            } else {
+                val += ' ' + newcolor;
+            }
+            $controlinput.val(val);
+            modal.hide();
+        });
+    };
+
+    ModalFactory.create({
+        'title': title,
+        'body': $controlwindow,
+        'type': ModalSaveCancel.TYPE,
+        'large': true,
+        'buttons': buttons
+    })
+    .done(function(modal) {
+        var $modalBody = modal.getBody();
+        $modalBody.append($controlwindow);
+        $control.data('modal', modal);
+        setEvents(modal);
+    });
+
+    // Color picker control.
+    $controlbutton.on('click', function(e) {
+        e.preventDefault();
+        $controlwindow.removeClass('hidden');
+        var currentval = $controlinput.val();
+
+        var color = readColor(currentval);
+
+        $colorpickerinput.val(color);
+        $control.data('modal').show();
+    });
+
+};
+
+/**
+ * Extracts the first color from a text string. Recognizes hexadecimal, rgba and hsla.
+ *
+ * @param {string} text
+ * @returns
+ */
+var readColor = function(text) {
+    var regexcolor = new RegExp(
+        /#[0-9a-fA-F]{6}/.source
+        + /|#[0-9a-fA-F]{3}/.source
+        + /|rgba?\(\s*([0-9]{1,3}\s*,\s*){2}[0-9]{1,3}\s*(,\s*[0-9.]+\s*)?\)/.source
+        + /|hsla?\(\s*([0-9]{1,3}\s*,\s*){2}[0-9]{1,3}\s*(,\s*[0-9.]+\s*)?\)/.source);
+
+    var color = text.match(regexcolor);
+    if (color) {
+        color = color[0];
+    }
+
+    return color;
+};

amd/src/tabstyles.js

@@ -331,9 +331,7 @@ var applyStyles = function() {
                 units[key] = value;
             } else if (key == 'tabicon') {
                 if (value !== '') {
-                    console.log(value);
                     var icon = $('#onetopic-styleswindow .listicons span[data-value="' + value + '"]').html();
-                    console.log(icon);
                     $('#onetopic-tabstyles .tabicon-' + type).html(icon).removeClass('hidden');
                 }
             }

classes/header.php

@@ -61,20 +61,20 @@ public function export_for_template(\renderer_base $output) {
         global $PAGE, $CFG, $OUTPUT;
 
         $format = $this->format;
-        $course = $this->format->get_course();
+        $course = $format->get_course();
 
         // Onetopic format is always multipage.
         $course->realcoursedisplay = property_exists($course, 'coursedisplay') ? $course->coursedisplay : false;
 
         $firstsection = ($course->realcoursedisplay == COURSE_DISPLAY_MULTIPAGE) ? 1 : 0;
-        $currentsection = $this->format->get_sectionnum();
+        $currentsection = $format->get_sectionnum();
 
         $tabslist = [];
         $secondtabslist = null;
         $tabscssstyles = '';
         if ($course->tabsview != \format_onetopic::TABSVIEW_COURSEINDEX &&
                 ($format->show_editor() || !$course->hidetabsbar)) {
-            $tabs = $this->get_tabs($this->format->get_modinfo(), $output);
+            $tabs = $this->get_tabs($format->get_modinfo(), $output);
             $tabslist = $tabs->get_list();
             $secondtabslist = $tabs->get_secondlist($firstsection ? $currentsection - 1 : $currentsection);
             $tabscssstyles = $tabs->get_allcssstyles();
@@ -112,11 +112,19 @@ public function export_for_template(\renderer_base $output) {
             $hassecondrow = is_object($secondtabslist) && count($secondtabslist->tabs) > 0;
         }
 
+        $formatoptions = course_get_format($course)->get_format_options($currentsection);
+        $tabsectionbackground = $formatoptions['tabsectionbackground'] ?? '';
+
+        if (!empty($tabsectionbackground)) {
+            $tabsectionbackground = clean_param($tabsectionbackground, PARAM_NOTAGS);
+            $tabsectionbackground = 'background: ' . $tabsectionbackground . ';';
+        }
+
         $data = (object)[
             'uniqid' => $format->uniqid,
             'baseurl' => $CFG->wwwroot,
-            'title' => $this->format->page_title(), // This method should be in the course_format class.
-            'format' => $this->format->get_format(),
+            'title' => $format->page_title(), // This method should be in the course_format class.
+            'format' => $format->get_format(),
             'templatetopic' => $course->templatetopic,
             'withicons' => $course->templatetopic_icons,
             'hastopictabs' => $hastopictabs,
@@ -131,6 +139,7 @@ public function export_for_template(\renderer_base $output) {
             'sectionclasses' => '',
             'courseindex' => $courseindex,
             'cssstyles' => $tabscssstyles,
+            'tabsectionbackground' => $tabsectionbackground,
         ];
 
         $initialsection = null;
@@ -139,10 +148,10 @@ public function export_for_template(\renderer_base $output) {
         if ($course->realcoursedisplay == COURSE_DISPLAY_MULTIPAGE) {
 
             // Load the section 0 and export data for template.
-            $modinfo = $this->format->get_modinfo();
+            $modinfo = $format->get_modinfo();
             $section0 = $modinfo->get_section_info(0);
-            $sectionclass = $this->format->get_output_classname('content\\section');
-            $section = new $sectionclass($this->format, $section0);
+            $sectionclass = $format->get_output_classname('content\\section');
+            $section = new $sectionclass($format, $section0);
 
             $sectionoutput = new \format_onetopic\output\renderer($PAGE, null);
             $initialsection = $section->export_for_template($sectionoutput);