MDL-63064 block_starredcourses: block functionality

blocks/starredcourses/amd/build/main.min.js

@@ -0,0 +1 @@
+define(["jquery","core/notification","block_starredcourses/repository","core/paged_content_factory","core/templates"],function(a,b,c,d,e){var f={STARRED_COURSES_REGION:'[data-region="starred-courses-view-content"]'},g=5,h=function(a,b){if(b.length>0)return e.render("block_starredcourses/view-cards",{courses:b});var c=a.attr("data-nocoursesimg");return e.render("block_starredcourses/no-courses",{nocoursesimg:c})},i=function(b,i){i=a(i);var j=a(f.STARRED_COURSES_REGION);d.createWithLimit(g,function(a,d){var e=[];return a.forEach(function(a){var f={limit:g,offset:a.offset,userid:b},j=c.getStarredCourses(f).then(function(b){return b.length>0?h(i,b):(d.allItemsLoaded(a.pageNumber),h(i,b))});e.push(j)}),e}).then(function(a,b){e.replaceNodeContents(j,a,b)})};return{init:i}});

blocks/starredcourses/amd/build/repository.min.js

@@ -0,0 +1 @@
+define(["jquery","core/ajax","core/notification"],function(a,b,c){var d=function(a){var d={methodname:"block_starredcourses_get_starred_courses",args:a},e=b.call([d])[0];return e.fail(c.exception),e};return{getStarredCourses:d}});

blocks/starredcourses/amd/src/main.js

@@ -0,0 +1,111 @@
+// 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/>.
+
+/**
+ * Javascript to initialise the starred courses block.
+ *
+ * @copyright   2018 Simey Lameze <simey@moodle.com>
+ * @license     http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+
+define(
+[
+    'jquery',
+    'core/notification',
+    'block_starredcourses/repository',
+    'core/paged_content_factory',
+    'core/templates'
+],
+function(
+    $,
+    Notification,
+    Repository,
+    PagedContentFactory,
+    Templates
+) {
+
+    var SELECTORS = {
+        STARRED_COURSES_REGION: '[data-region="starred-courses-view-content"]'
+    };
+
+    var NUM_COURSES_TOTAL = 5;
+
+    /**
+     * Render the starred courses.
+     *
+     * @method renderCourses
+     * @param {object} root The root element for the starred view.
+     * @param {array} courses containing array of returned courses.
+     * @return {promise} Resolved with HTML and JS strings
+     */
+    var renderCourses = function(root, courses) {
+        if (courses.length > 0) {
+            return Templates.render('block_starredcourses/view-cards', {
+                courses: courses
+            });
+        } else {
+            var nocoursesimg = root.attr('data-nocoursesimg');
+            return Templates.render('block_starredcourses/no-courses', {
+                nocoursesimg: nocoursesimg
+            });
+        }
+    };
+
+    /**
+     * Initialise all of the modules for the starred courses block.
+     *
+     * @param {object} root The root element for the block.
+     * @param {Number} userid The user id.
+     */
+    var init = function(userid, root) {
+        root = $(root);
+        var content = $(SELECTORS.STARRED_COURSES_REGION);
+
+        PagedContentFactory.createWithLimit(
+            NUM_COURSES_TOTAL,
+            function(pagesData, actions) {
+                var promises = [];
+
+                pagesData.forEach(function(pageData) {
+                    var args = {
+                            limit: NUM_COURSES_TOTAL,
+                            offset: pageData.offset,
+                            userid: userid
+                        };
+
+                    // Load the page data.
+                    var pagePromise = Repository.getStarredCourses(args).then(function (courses) {
+                        if (courses.length > 0) {
+                            return renderCourses(root, courses);
+                        } else {
+                            actions.allItemsLoaded(pageData.pageNumber);
+                            return renderCourses(root, courses);
+                        }
+
+                    });
+
+                    promises.push(pagePromise);
+                });
+
+                return promises;
+            }).then(function (html, js) {
+                Templates.replaceNodeContents(content, html, js);
+        });
+    };
+
+    return {
+        init: init
+    };
+});

blocks/starredcourses/amd/src/repository.js

@@ -0,0 +1,52 @@
+// 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/>.
+
+/**
+ * A javascript module to retrieve user's starred courses.
+ *
+ * @package    block_starredcourses
+ * @copyright  2018 Simey Lameze <simey@moodle.com>
+ * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+define(['jquery', 'core/ajax', 'core/notification'], function($, Ajax, Notification) {
+
+    /**
+     * Retrieve a list of starred courses.
+     *
+     * Valid args are:
+     * int limit    number of records to retrieve
+     *
+     * @method getStarredCourses
+     * @param {object} args The request arguments
+     * @return {promise} Resolved with an array of courses
+     */
+    var getStarredCourses = function(args) {
+
+        var request = {
+            methodname: 'block_starredcourses_get_starred_courses',
+            args: args
+        };
+
+        var promise = Ajax.call([request])[0];
+
+        promise.fail(Notification.exception);
+
+        return promise;
+    };
+
+    return {
+        getStarredCourses: getStarredCourses
+    };
+});

blocks/starredcourses/block_starredcourses.php

@@ -53,9 +53,13 @@ class block_starredcourses extends block_base {
             return $this->content;
         }
 
-        $this->content = new stdClass();
-        $this->content->footer = '';
-        $this->content->text  = '';
+        $renderable = new \block_starredcourses\output\main();
+        $renderer = $this->page->get_renderer('block_starredcourses');
+
+        $this->content = (object) [
+            'text' => $renderer->render($renderable),
+            'footer' => ''
+        ];
 
         return $this->content;
     }

blocks/starredcourses/classes/external.php

@@ -0,0 +1,125 @@
+<?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/>.
+/**
+ * Starred courses block external API
+ *
+ * @package    block_starredcourses
+ * @category   external
+ * @copyright  2018 Simey Lameze <simey@moodle.com>
+ * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+defined('MOODLE_INTERNAL') || die;
+
+require_once($CFG->libdir . '/externallib.php');
+
+require_once($CFG->dirroot . '/course/lib.php');
+require_once($CFG->dirroot . '/course/externallib.php');
+
+use \core_course\external\course_summary_exporter;
+
+/**
+ * Starred courses block external functions.
+ *
+ * @copyright  2018 Simey Lameze <simey@moodle.com>
+ * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+class block_starredcourses_external extends core_course_external {
+
+    /**
+     * Returns description of method parameters
+     *
+     * @return external_function_parameters
+     * @since Moodle 3.6
+     */
+    public static function get_starred_courses_parameters() {
+        return new external_function_parameters([
+            'limit' => new external_value(PARAM_INT, 'Limit', VALUE_DEFAULT, 0),
+            'offset' => new external_value(PARAM_INT, 'Offset', VALUE_DEFAULT, 0),
+            'userid' => new external_value(PARAM_INT, 'id of user, empty for current user', VALUE_DEFAULT, 0)
+        ]);
+    }
+
+    /**
+     * Get users starred courses appending additional course information like images.
+     *
+     * @param  int $limit Limit
+     * @param int $offset Offset
+     * @param  int|null $userid The user's userid to fetch the favourite courses.
+     * @return  array list of courses and warnings
+     */
+    public static function get_starred_courses($limit, $offset, $userid = null) {
+        global $USER, $PAGE;
+
+        if (!$userid) {
+            $userid = $USER->id;
+        }
+
+        $params = self::validate_parameters(self::get_starred_courses_parameters(), [
+            'limit' => $limit,
+            'offset' => $offset,
+            'userid' => $userid
+        ]);
+
+        $userid = $params['userid'];
+        $limit = $params['limit'];
+        $offset = $params['offset'];
+
+        $usercontext = context_user::instance($userid);
+
+        self::validate_context($usercontext);
+        $PAGE->set_context($usercontext);
+        $output = $PAGE->get_renderer('block_starredcourses');
+
+        // Get the user favourites service, scoped to a single user (their favourites only).
+        $userservice = \core_favourites\service_factory::get_service_for_user_context($usercontext);
+
+        // Get the favourites, by type, for the user.
+        $favourites = $userservice->find_favourites_by_type('core_course', 'courses', $offset, $limit);
+
+        $results = [];
+        foreach ($favourites as $favourite) {
+            $courseid = $favourite->itemid;
+            if (!isset($results[$courseid])) {
+                $exporter = new course_summary_exporter(get_course($courseid),
+                    ['context' => \context_course::instance($courseid)]);
+                $courseinlist = new \core_course_list_element(get_course($courseid));
+                foreach ($courseinlist->get_course_overviewfiles() as $file) {
+                    if ($file->is_valid_image()) {
+                        $url = new moodle_url("/pluginfile.php".'/'.$file->get_contextid(). '/'. $file->get_component(). '/'.
+                            $file->get_filearea(). $file->get_filepath(). $file->get_filename());
+                        $courseimage = $url->__toString();
+                    }
+                }
+                $results[$courseid] = $exporter->export($output);
+                if (!empty($courseimage)) {
+                    $results[$courseid]['courseimage'] = $courseimage;
+                }
+            }
+        }
+
+        return $results;
+    }
+
+    /**
+     * Returns description of method result value
+     *
+     * @return external_description
+     * @since Moodle 3.6
+     */
+    public static function get_starred_courses_returns() {
+        return new external_multiple_structure(course_summary_exporter::get_read_structure());
+    }
+}

blocks/starredcourses/classes/output/main.php

@@ -0,0 +1,59 @@
+<?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/>.
+
+/**
+ * Class containing data for starred courses block.
+ *
+ * @package     block_starredcourses
+ * @copyright   2018 Simey Lameze <simey@moodle.com>
+ * @license     http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+namespace block_starredcourses\output;
+defined('MOODLE_INTERNAL') || die();
+
+use renderable;
+use renderer_base;
+use templatable;
+use core_course\external\course_summary_exporter;
+
+require_once($CFG->dirroot . '/course/lib.php');
+require_once($CFG->libdir . '/completionlib.php');
+
+/**
+ * Class containing data for starred courses block.
+ *
+ * @copyright 2018 Simey Lameze <simey@moodle.com>
+ * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+class main implements renderable, templatable {
+
+    /**
+     * Export this data so it can be used as the context for a mustache template.
+     *
+     * @param \renderer_base $output
+     * @return array
+     */
+    public function export_for_template(renderer_base $output) {
+        global $USER;
+
+        $nocoursesurl = $output->image_url('courses', 'block_starredcourses')->out();
+
+        return [
+            'userid' => $USER->id,
+            'nocoursesimg' => $nocoursesurl
+        ];
+    }
+}

blocks/starredcourses/classes/output/renderer.php

@@ -0,0 +1,48 @@
+<?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/>.
+
+/**
+ * Starred courses block renderer.
+ *
+ * @package    block_starredcourses
+ * @copyright  2018 Simey Lameze <simey@moodle.com>
+ * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+namespace block_starredcourses\output;
+defined('MOODLE_INTERNAL') || die;
+
+use plugin_renderer_base;
+
+/**
+ * Starred courses block renderer.
+ *
+ * @package    block_starredcourses
+ * @copyright  2018 Simey Lameze <simey@moodle.com>
+ * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+class renderer extends plugin_renderer_base {
+
+    /**
+     * Return the main content for the block.
+     *
+     * @param main $main The main renderable
+     * @return string HTML string
+     */
+    public function render_main(main $main) {
+        return $this->render_from_template('block_starredcourses/main',
+            $main->export_for_template($this));
+    }
+}

blocks/starredcourses/db/services.php

@@ -0,0 +1,38 @@
+<?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/>.
+
+/**
+ * File description.
+ *
+ * @package   block_starredcourses
+ * @copyright 2018 Simey Lameze <simey@moodle.com>
+ * @license   http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+
+defined('MOODLE_INTERNAL') || die();
+
+$functions = array(
+
+    'block_starredcourses_get_starred_courses' => array(
+        'classpath' => 'block/starredcourses/classes/external.php',
+        'classname'   => 'block_starredcourses_external',
+        'methodname'  => 'get_starred_courses',
+        'description' => 'Get users starred courses.',
+        'type'        => 'read',
+        'ajax'        => true,
+    ),
+);
+

blocks/starredcourses/lang/en/block_starredcourses.php

@@ -22,6 +22,8 @@
  * @license   http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
  */
 
+$string['nocourses'] = 'No starred courses';
+$string['pluginname'] = 'Starred courses';
 $string['starredcourses:addinstance'] = 'Add a new instance of starred courses block';
 $string['starredcourses:myaddinstance'] = 'Add a new instance of starred block to Dashboard';
-$string['pluginname'] = 'Starred courses';
+

blocks/starredcourses/pix/courses.svg

@@ -0,0 +1,49 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="157 -1305 148 125" preserveAspectRatio="xMinYMid meet">
+    <defs>
+        <style>
+            .cls-1 {
+            clip-path: url(#clip-Courses);
+            }
+            .cls-2 {
+            fill: #eee;
+            }
+            .cls-3 {
+            fill: #c4c8cc;
+            }
+            .cls-4 {
+            fill: #fff;
+            }
+        </style>
+        <clipPath id="clip-Courses">
+            <rect x="157" y="-1305" width="148" height="125"/>
+        </clipPath>
+    </defs>
+    <g id="Courses" class="cls-1">
+        <g id="Group_44" data-name="Group 44" transform="translate(-268 -1781)">
+            <ellipse id="Ellipse_41" data-name="Ellipse 41" class="cls-2" cx="74" cy="14.785" rx="74" ry="14.785" transform="translate(425 571.43)"/>
+            <rect id="Rectangle_87" data-name="Rectangle 87" class="cls-3" width="95.097" height="110.215" transform="translate(451.909 476)"/>
+            <g id="Group_43" data-name="Group 43" transform="translate(464.04 494)">
+                <rect id="Rectangle_88" data-name="Rectangle 88" class="cls-4" width="31.043" height="34" transform="translate(0)"/>
+                <rect id="Rectangle_89" data-name="Rectangle 89" class="cls-4" width="31.043" height="34" transform="translate(0 42)"/>
+                <rect id="Rectangle_90" data-name="Rectangle 90" class="cls-4" width="31.067" height="34" transform="translate(39.005)"/>
+                <rect id="Rectangle_91" data-name="Rectangle 91" class="cls-4" width="31.067" height="34" transform="translate(39.005 42)"/>
+                <rect id="Rectangle_92" data-name="Rectangle 92" class="cls-3" width="23.023" height="3.18" transform="translate(3.081 16.549)"/>
+                <rect id="Rectangle_93" data-name="Rectangle 93" class="cls-3" width="23.023" height="3.18" transform="translate(3.081 58.549)"/>
+                <rect id="Rectangle_94" data-name="Rectangle 94" class="cls-3" width="23.023" height="3.18" transform="translate(43.122 16.549)"/>
+                <rect id="Rectangle_95" data-name="Rectangle 95" class="cls-3" width="23.023" height="3.18" transform="translate(43.122 58.549)"/>
+                <rect id="Rectangle_96" data-name="Rectangle 96" class="cls-3" width="14.014" height="3.18" transform="translate(3.081 21.825)"/>
+                <rect id="Rectangle_97" data-name="Rectangle 97" class="cls-3" width="18.845" height="3.18" transform="translate(3.081 26.825)"/>
+                <rect id="Rectangle_98" data-name="Rectangle 98" class="cls-3" width="14.014" height="3.18" transform="translate(3.081 63.825)"/>
+                <rect id="Rectangle_99" data-name="Rectangle 99" class="cls-3" width="18.845" height="3.18" transform="translate(3.081 68.825)"/>
+                <rect id="Rectangle_100" data-name="Rectangle 100" class="cls-3" width="14.014" height="3.18" transform="translate(43.122 21.825)"/>
+                <rect id="Rectangle_101" data-name="Rectangle 101" class="cls-3" width="18.845" height="3.18" transform="translate(43.122 26.825)"/>
+                <rect id="Rectangle_102" data-name="Rectangle 102" class="cls-3" width="14.014" height="3.18" transform="translate(43.122 63.825)"/>
+                <rect id="Rectangle_103" data-name="Rectangle 103" class="cls-3" width="18.845" height="3.18" transform="translate(43.122 68.825)"/>
+                <ellipse id="Ellipse_42" data-name="Ellipse 42" class="cls-3" cx="5.658" cy="5.652" rx="5.658" ry="5.652" transform="translate(3.003 3.55)"/>
+                <ellipse id="Ellipse_43" data-name="Ellipse 43" class="cls-3" cx="5.658" cy="5.652" rx="5.658" ry="5.652" transform="translate(3.003 45.55)"/>
+                <ellipse id="Ellipse_44" data-name="Ellipse 44" class="cls-3" cx="5.658" cy="5.652" rx="5.658" ry="5.652" transform="translate(43.044 3.55)"/>
+                <ellipse id="Ellipse_45" data-name="Ellipse 45" class="cls-3" cx="5.658" cy="5.652" rx="5.658" ry="5.652" transform="translate(43.044 45.55)"/>
+            </g>
+        </g>
+    </g>
+</svg>

blocks/starredcourses/templates/courses.mustache

@@ -0,0 +1,55 @@
+{{!
+    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 Licensebllsdsadfasfd
+    along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+}}
+{{!
+    @template block_recentcourses/view-cards
+
+    This template renders the carousel for the recentcourses block.
+
+    Example context (json):
+    {
+        "courses": [
+            {
+                "name": "Assignment due 1",
+                "viewurl": "https://moodlesite/course/view.php?id=2",
+                "courseimage": "https://moodlesite/pluginfile/123/course/overviewfiles/123.jpg",
+                "fullname": "course 3"
+            }
+        ]
+    }
+}}
+<div>
+    {{#courses}}
+        <div>
+            <div class="card course-card">
+                <a href="{{viewurl}}" tabindex="-1">
+                    <div class="card-img-top recentcoursesimg" style='background-image: url("{{{courseimage}}}");'>
+                    </div>
+                </a>
+                <div class="card-body course-info-container" id="course-info-container-{{id}}">
+                    <div class="d-flex">
+                        <div class="card-title">
+                            <a href="{{viewurl}}"
+                               aria-label="{{#shortentext}}12, {{{fullname}}} {{/shortentext}}">
+                                {{#shortentext}}12, {{{fullname}}} {{/shortentext}}
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    {{/courses}}
+</div>

blocks/starredcourses/templates/main.mustache

@@ -0,0 +1,35 @@
+{{!
+    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/>.
+}}
+{{!
+    @template block_starredcourses/main
+
+    This template renders the main content area for the starred courses block.
+
+    Example context (json):
+    {}
+}}
+
+<div id="block-starredcourses-{{uniqid}}" class="block-starred-courses" data-region="starred-courses" data-userid="{{userid}}">
+    <div class="container-fluid p-0">
+        {{> block_starredcourses/view }}
+    </div>
+</div>
+{{#js}}
+require(['block_starredcourses/main'], function(Main) {
+    Main.init('#block-starredcourses-{{uniqid}}');
+});
+{{/js}}

blocks/starredcourses/templates/no-courses.mustache

@@ -0,0 +1,28 @@
+{{!
+    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/>.
+}}
+{{!
+    @template block_starredcourses/no-courses
+     This template renders the no courses message.
+     Example context (json):
+    {
+        "nocoursesimg": "https://moodlesite/theme/image.php/boost/block_recentcourses/1535727318/courses"
+    }
+}}
+<div class="text-xs-center text-center m-t-3" data-region="empty-message">
+    <img class="empty-placeholder-image-lg"
+         src="{{nocoursesimg}}"
+         alt="{{#str}} nocourses, block_starredcourses {{/str}}"
+         role="presentation">
+    <p class="text-muted mt-3">{{#str}} nocourses, block_starredcourses {{/str}}</p>
+</div>

blocks/starredcourses/templates/placeholder-course.mustache

@@ -0,0 +1,26 @@
+{{!
+    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/>.
+}}
+{{!
+    @template block_starredcourses/placeholder-course
+     This template renders an course card item loading placeholder for the starred courses block.
+     Example context (json):
+    {}
+}}
+<div class="card starred-course-card border-0 mx-1 mb-1">
+    <div class="card-img-top bg-pulse-grey w-100" style="height: 7rem">
+    </div>
+    <div class="card-body starred-course-info-container">
+        <div class="bg-pulse-grey w-100 m-b-3" style="height: 1rem"></div>
+    </div>
+</div>

blocks/starredcourses/templates/view-cards.mustache

@@ -0,0 +1,45 @@
+{{!
+    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 Licensebllsdsadfasfd
+    along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+}}
+{{!
+    @template block_starredcourses/view-cards
+     This template renders the carousel for the starredcourses block.
+     Example context (json):
+    {
+        "courses": [
+            {
+                "name": "Assignment due 1",
+                "viewurl": "https://moodlesite/course/view.php?id=2",
+                "courseimage": "https://moodlesite/pluginfile/123/course/overviewfiles/123.jpg",
+                "fullname": "course 3"
+            }
+        ]
+    }
+}}
+<div class="course-card-container d-flex justify-content-around">
+    {{#courses}}
+        <a href="{{viewurl}}">
+            <div class="card starred-course-card mx-1 mb-1">
+                <div class="card-img-top starred-course-img" style='background-image: url("{{{courseimage}}}");'>
+                </div>
+                <div class="card-body starred-course-info-container" id="course-info-container-{{id}}">
+                    <div class="d-flex">
+                        <div class="card-title d-inline-block text-truncate">
+                            {{{fullname}}}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </a>
+    {{/courses}}
+</div>

blocks/starredcourses/templates/view.mustache

@@ -0,0 +1,39 @@
+{{!
+    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/>.
+}}
+{{!
+    @template block_starredcourses/view
+
+    This template renders the view for the starred courses block.
+
+    Example context (json):
+    {
+        "nocoursesimg": "https://moodlesite/theme/image.php/boost/block_starredcourses/1535727318/courses"
+    }
+}}
+<div id="starred-courses-view-{{uniqid}}"
+     data-region="starred-courses-view"
+     data-nocoursesimg="{{nocoursesimg}}">
+    <div data-region="starred-courses-view-content">
+        <div data-region="starred-courses-loading-placeholder">
+            <div class="course-card-container d-flex justify-content-around">
+                {{> block_starredcourses/placeholder-course }}
+                {{> block_starredcourses/placeholder-course }}
+                {{> block_starredcourses/placeholder-course }}
+            </div>
+        </div>
+    </div>
+</div>

blocks/starredcourses/version.php

@@ -23,6 +23,6 @@
  */
 defined('MOODLE_INTERNAL') || die;
 
-$plugin->version = 2018051400;
+$plugin->version = 2018051402;
 $plugin->requires  = 2018050800;
 $plugin->component = 'block_starredcourses';

theme/boost/scss/moodle/blocks.scss

@@ -237,3 +237,64 @@ body.drawer-open-left #region-main.has-blocks {
         margin-right: 2px;
     }
 }
+$card-gutter : $card-deck-margin * 2;
+.block_starredcourses {
+    [data-region="starredcoursess-view-content"] {
+        overflow-x: hidden;
+    }
+    .card-deck {
+        flex-wrap: nowrap;
+    }
+    .starredcoursessimg {
+        height: 7rem;
+        background-position: center;
+        background-size: cover;
+    }
+    .starredcourses-info-container {
+        padding: 0.8rem;
+        .card-title {
+            max-width: 100%;
+            a {
+                max-width: 100%;
+            }
+        }
+    }
+    .empty-placeholder-image-lg {
+        height: 125px;
+    }
+}
+
+$card-gutter : $card-deck-margin * 2;
+.block_starredcourses {
+    [data-region="starred-courses-view-content"] {
+        overflow-x: hidden;
+    }
+    .starred-course-card {
+        flex-basis: auto;
+        height: 150px;
+        width: 200px;
+        flex-shrink: 0;
+    }
+    .course-card-container {
+        height: 150px;
+        overflow: hidden;
+        flex-wrap: wrap;
+    }
+    .starred-course-img {
+        height: 7rem;
+        background-position: center;
+        background-size: cover;
+    }
+    .starred-course-info-container {
+        padding: 0.8rem;
+        .card-title {
+            max-width: 100%;
+            a {
+                max-width: 100%;
+            }
+        }
+    }
+    .empty-placeholder-image-lg {
+        height: 125px;
+    }
+}

theme/boost/style/moodle.css

@@ -11251,6 +11251,56 @@ div.editor_atto_toolbar button .icon {
   .block_settings .block_tree p.hasicon .icon {
     margin-right: 2px; }
 
+.block_starredcourses [data-region="starredcoursess-view-content"] {
+  overflow-x: hidden; }
+
+.block_starredcourses .card-deck {
+  flex-wrap: nowrap; }
+
+.block_starredcourses .starredcoursessimg {
+  height: 7rem;
+  background-position: center;
+  background-size: cover; }
+
+.block_starredcourses .starredcourses-info-container {
+  padding: 0.8rem; }
+  .block_starredcourses .starredcourses-info-container .card-title {
+    max-width: 100%; }
+    .block_starredcourses .starredcourses-info-container .card-title a {
+      max-width: 100%; }
+
+.block_starredcourses .empty-placeholder-image-lg {
+  height: 125px; }
+
+.block_starredcourses [data-region="starred-courses-view-content"] {
+  overflow-x: hidden; }
+
+.block_starredcourses .starred-course-card {
+  flex-basis: auto;
+  height: 150px;
+  width: 200px;
+  flex-shrink: 0; }
+
+.block_starredcourses .course-card-container {
+  height: 150px;
+  overflow: hidden;
+  flex-wrap: wrap; }
+
+.block_starredcourses .starred-course-img {
+  height: 7rem;
+  background-position: center;
+  background-size: cover; }
+
+.block_starredcourses .starred-course-info-container {
+  padding: 0.8rem; }
+  .block_starredcourses .starred-course-info-container .card-title {
+    max-width: 100%; }
+    .block_starredcourses .starred-course-info-container .card-title a {
+      max-width: 100%; }
+
+.block_starredcourses .empty-placeholder-image-lg {
+  height: 125px; }
+
 .navbar {
   max-height: 50px; }