MDL-68076 core: Introduced \core\notification::cta()

lang/en/moodle.php

@@ -225,6 +225,9 @@ $string['bycourseorder'] = 'By course order';
 $string['byname'] = 'by {$a}';
 $string['bypassed'] = 'Bypassed';
 $string['cachecontrols'] = 'Cache controls';
+$string['calltofeedback'] = 'Moodle HQ would like your feedback on the Moodle LMS.';
+$string['calltofeedback_give'] = 'Give feedback';
+$string['calltofeedback_remind'] = 'Remind me later';
 $string['cancel'] = 'Cancel';
 $string['cancelled'] = 'Cancelled';
 $string['categories'] = 'Course categories';

lib/classes/notification.php

@@ -96,6 +96,51 @@ class notification {
         );
     }
 
+    /**
+     * @param string[] $icon The icon to use. Required keys are 'pix' and 'component'.
+     * @param string $message The message to display.
+     * @param array $actions An array of action links
+     * @param string $region Optional region name
+     * @throws \coding_exception
+     */
+    public static function add_call_to_action(array $icon, string $message, array $actions, string $region = ''): void {
+        global $OUTPUT, $PAGE;
+
+        $context = new stdClass();
+        $context->icon = $icon;
+        $context->message = $message;
+        $context->region = $region;
+
+        $context->actions = array_map(function($action) {
+            $data = [];
+            foreach ($action['data'] as $name => $value) {
+                $data[] = ['name' => $name, 'value' => $value];
+            }
+            $action['data'] = $data;
+
+            return $action;
+        }, $actions);
+
+        $notification = $OUTPUT->render_from_template('core/local/notification/cta', $context);
+
+        if ($PAGE && $PAGE->state === \moodle_page::STATE_IN_BODY) {
+            $id = uniqid();
+            echo \html_writer::span($notification, '', ['id' => $id]);
+            echo \html_writer::script(
+                    "(function() {" .
+                    "var notificationHolder = document.getElementById('user-notifications');" .
+                    "if (!notificationHolder) { return; }" .
+                    "var thisNotification = document.getElementById('{$id}');" .
+                    "if (!thisNotification) { return; }" .
+                    "notificationHolder.insertBefore(thisNotification.firstChild, notificationHolder.firstChild);" .
+                    "thisNotification.remove();" .
+                    "})();"
+            );
+        } else {
+            throw new \coding_exception('You are calling add_call_to_action() either too early or too late.');
+        }
+    }
+
     /**
      * Fetch all of the notifications in the stack and clear the stack.
      *

lib/templates/local/notification/cta.mustache

@@ -0,0 +1,68 @@
+{{!
+    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 core/local/notification/cta
+
+    Moodle cta notification template.
+
+    The purpose of this template is to render a call to action notification.
+
+    Classes required for JS:
+    * none
+
+    Data attributes required for JS:
+    * none
+
+    Context variables required for this template:
+    * message A cleaned string (use clean_text()) to display.
+    * extraclasses Additional classes to apply to the notification.
+    * actions List of action links.
+    * icon An icon.pix and icon.componrnt for the icon to be displauyed as the icon of CTA notification.
+
+    Example context (json):
+    {
+        "message": "What do you think about Moodle?",
+        "actions": [
+            {
+                "title": "Give feedback",
+                "url": "#",
+                "data": [
+                    {"name": "action", "value": "give"},
+                    {"name": "contextid", "value": "3"}
+                ]
+            }
+        ]
+    }
+}}
+
+<div class="cta alert alert-primary alert-block fade in {{ extraclasses }}" {{# region }}data-region="{{ region }}"{{/ region}}>
+    <div class="media">
+        <div class="mr-2 icon-size-5">
+            {{# pix }} {{ icon.pix }}, {{ icon.component }} {{/ pix }}
+        </div>
+        <div class="media-body align-self-center">
+            {{{ message }}}<br>
+            {{# actions }}
+                <a href="{{ url }}" class="link-underline aalink"
+                    {{# data }}
+                   data-{{ name }}="{{ value }}"
+                    {{/ data }}
+                >{{ title }}</a>
+            {{/ actions }}
+        </div>
+    </div>
+</div>

theme/boost/scss/moodle/core.scss

@@ -2653,4 +2653,22 @@ $picker-emojis-per-row: 7 !default;
         position: relative;
         z-index: inherit;
     }
-}
+}
+
+.link-underline {
+    text-decoration: underline;
+    &:focus {
+        text-decoration: none;
+    }
+}
+
+.alert.cta {
+    .icon {
+        padding: 0.3rem;
+        &.fa {
+            border-radius: 50%;
+            border-style: solid;
+            border-width: 0.125rem;
+        }
+    }
+}

theme/boost/style/moodle.css

@@ -11822,6 +11822,18 @@ body.h5p-embed .h5pmessages {
     position: relative;
     z-index: inherit; } }
 
+.link-underline {
+  text-decoration: underline; }
+  .link-underline:focus {
+    text-decoration: none; }
+
+.alert.cta .icon {
+  padding: 0.3rem; }
+  .alert.cta .icon.fa {
+    border-radius: 50%;
+    border-style: solid;
+    border-width: 0.125rem; }
+
 .icon {
   font-size: 16px;
   width: 16px;

theme/classic/style/moodle.css

@@ -12036,6 +12036,18 @@ body.h5p-embed .h5pmessages {
     position: relative;
     z-index: inherit; } }
 
+.link-underline {
+  text-decoration: underline; }
+  .link-underline:focus {
+    text-decoration: none; }
+
+.alert.cta .icon {
+  padding: 0.3rem; }
+  .alert.cta .icon.fa {
+    border-radius: 50%;
+    border-style: solid;
+    border-width: 0.125rem; }
+
 .icon {
   font-size: 16px;
   width: 16px;