MDL-61657 block_myoverview: implement course images for the myovervie…

…w block

.eslintignore

@@ -60,6 +60,7 @@ lib/fonts/
 lib/amd/src/adapter.js
 lib/validateurlsyntax.php
 lib/amd/src/popper.js
+lib/geopattern-php/
 media/player/videojs/amd/src/video-lazy.js
 media/player/videojs/amd/src/Youtube-lazy.js
 media/player/videojs/videojs/

.stylelintignore

@@ -61,6 +61,7 @@ lib/fonts/
 lib/amd/src/adapter.js
 lib/validateurlsyntax.php
 lib/amd/src/popper.js
+lib/geopattern-php/
 media/player/videojs/amd/src/video-lazy.js
 media/player/videojs/amd/src/Youtube-lazy.js
 media/player/videojs/videojs/

blocks/myoverview/classes/output/courses_view.php

@@ -65,6 +65,7 @@ public function __construct($courses, $coursesprogress) {
     public function export_for_template(renderer_base $output) {
         global $CFG;
         require_once($CFG->dirroot.'/course/lib.php');
+        require_once($CFG->dirroot.'/lib/coursecatlib.php');
 
         // Build courses view data structure.
         $coursesview = [
@@ -83,6 +84,29 @@ public function export_for_template(renderer_base $output) {
             // Convert summary to plain text.
             $exportedcourse->summary = content_to_text($exportedcourse->summary, $exportedcourse->summaryformat);
 
+            $course = new \course_in_list($course);
+            foreach ($course->get_course_overviewfiles() as $file) {
+                $isimage = $file->is_valid_image();
+                if ($isimage) {
+                    $url = file_encode_url("$CFG->wwwroot/pluginfile.php",
+                        '/'. $file->get_contextid(). '/'. $file->get_component(). '/'.
+                        $file->get_filearea(). $file->get_filepath(). $file->get_filename(), !$isimage);
+                    $exportedcourse->courseimage = $url;
+                    $exportedcourse->classes = 'courseimage';
+                    break;
+                }
+            }
+
+            $exportedcourse->color = $this->coursecolor($course->id);
+
+            if (!isset($exportedcourse->courseimage)) {
+                $pattern = new \core_geopattern();
+                $pattern->setColor($exportedcourse->color);
+                $pattern->patternbyid($courseid);
+                $exportedcourse->classes = 'coursepattern';
+                $exportedcourse->courseimage = $pattern->datauri();
+            }
+
             // Include course visibility.
             $exportedcourse->visible = (bool)$course->visible;
 
@@ -148,4 +172,19 @@ public function export_for_template(renderer_base $output) {
 
         return $coursesview;
     }
+
+    /**
+     * Generate a semi-random color based on the courseid number (so it will always return
+     * the same color for a course)
+     *
+     * @param int $courseid
+     * @return string $color, hexvalue color code.
+     */
+    protected function coursecolor($courseid) {
+        // The colour palette is hardcoded for now. It would make sense to combine it with theme settings.
+        $basecolors = ['#81ecec', '#74b9ff', '#a29bfe', '#dfe6e9', '#00b894', '#0984e3', '#b2bec3', '#fdcb6e', '#fd79a8', '#6c5ce7'];
+
+        $color = $basecolors[$courseid % 10];
+        return $color;
+    }
 }

blocks/myoverview/templates/course-paging-content-item.mustache

@@ -38,7 +38,7 @@
     }
 }}
 {{< block_myoverview/paging-content-item }}
-    {{$classes}}row{{/classes}}
+    {{$classes}}row card-deck{{/classes}}
     {{$content}}
         {{#courses}}
             {{> block_myoverview/courses-view-course-item }}

blocks/myoverview/templates/courses-view-course-item.mustache

@@ -26,22 +26,24 @@
         "summary": "It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout."
     }
 }}
-<div class="col-lg-6">
-    <div class="card mb-3 courses-view-course-item">
-        <div class="card-body course-info-container" id="course-info-container-{{id}}">
+<div class="card mb-3 courses-view-course-item">
+    <a href="{{viewurl}}">
+        <div class="card-img-top myoverviewimg {{classes}}" style='background-image: url("{{{courseimage}}}");'>
+        </div>
+    </a>
+    <div class="card-body course-info-container" id="course-info-container-{{id}}">
 
-            <div class="media">
-                <div class="mr-2">
-                    {{> block_myoverview/progress-chart}}
-                </div>
-                <div class="media-body">
-                    <h4 class="h5"><a href="{{viewurl}}" class="{{^visible}}dimmed{{/visible}}">{{{fullnamedisplay}}}</a></h4>
-                </div>
+        <div class="media">
+            <div class="mr-2">
+                {{> block_myoverview/progress-chart}}
+            </div>
+            <div class="media-body">
+                <h4 class="h5"><a href="{{viewurl}}" class="{{^visible}}dimmed{{/visible}}">{{{fullnamedisplay}}}</a></h4>
             </div>
-
-            <p class="text-muted">
-                {{#shortentext}} 140, {{summary}}{{/shortentext}}
-            </p>
         </div>
+
+        <p class="text-muted">
+            {{#shortentext}} 140, {{summary}}{{/shortentext}}
+        </p>
     </div>
 </div>

lib/classes/component.php

@@ -85,6 +85,7 @@ class core_component {
         'IMSGlobal\LTI' => 'lib/ltiprovider/src',
         'Phpml' => 'lib/mlbackend/php/phpml/src/Phpml',
         'PHPMailer\\PHPMailer' => 'lib/phpmailer/src',
+        'RedeyeVentures\\GeoPattern' => 'lib/geopattern-php/GeoPattern',
     );
 
     /**

lib/classes/geopattern.php

@@ -0,0 +1,45 @@
+<?php
+// 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/>.
+
+/**
+ * Geopatterns for images.
+ *
+ * @package    core
+ * @copyright  2018 Moodle
+ * @author     Bas Brands
+ * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+
+defined('MOODLE_INTERNAL') || die();
+
+class core_geopattern extends \RedeyeVentures\GeoPattern\GeoPattern {
+
+    /**
+     * Add variables.
+     *
+     * @param array $scss Associative array of variables and their values.
+     * @return void
+     */
+    public function patternbyid($uniqueid) {
+        $this->setString($uniqueid);
+
+    }
+
+    public function datauri() {
+        return $this->toDataURI();
+    }
+
+}