Setting to display help texts in modal dialogues instead of popups.

CHANGES.md

@@ -6,6 +6,7 @@ Changes
 
 ### Unreleased
 
+* 2018-07-24 - Setting to display help texts in modal dialogues instead of popups.
 * 2018-07-24 - Fixed brand colors due to Bootstrap changes in Boost.
 * 2018-07-24 - Fixed logo width when loginform is active.
 * 2018-07-24 - Fixed debugging output for admins on profile page.

README.md

@@ -306,6 +306,13 @@ With this setting you can add a default Font Awesome icon in front of the block
 
 By enabling this setting you can invert the default light navbar to a dark one with white links.
 
+#### Help texts
+
+##### Show help texts in a modal dialogue
+
+The default solution to display help texts in popover leads to different issues. For example popovers are not scrollable and they can reach over the viewport.
+For this reason, with this setting you can decide that the help texts should be displayed in a dedicated text box (modal dialogue) that appears in the middle of the page with enough space to hold even long helping texts.
+
 
 Further improvements to Boost core theme
 ----------------------------------------

classes/output/core_renderer.php

@@ -410,4 +410,25 @@ class core_renderer extends \theme_boost\output\core_renderer {
         return $this->render_from_template('core/loginform', $context);
         ORIGINAL END. */
     }
+
+    /**
+     * Implementation of user image rendering.
+     *
+     * @param help_icon $helpicon A help icon instance
+     * @return string HTML fragment
+     */
+    protected function render_help_icon(help_icon $helpicon) {
+        $context = $helpicon->export_for_template($this);
+        // MODIFICATION START.
+        // ID needed for modal dialog.
+        $context->linkid = $helpicon->identifier;
+        // Fill body variable needed for modal mustache with text value.
+        $context->body = $context->text;
+        if (get_config('theme_boost_campus', 'helptextmodal') == 'yes') {
+            return $this->render_from_template('theme_boost_campus/help_icon', $context);
+        } else {
+            return $this->render_from_template('core/help_icon', $context);
+        }
+        // MODIFICATION END.
+    }
 }

lang/en/theme_boost_campus.php

@@ -178,6 +178,11 @@ $string['blockiconsetting_desc_code'] = '.block_people .card-block .card-title::
 $string['navbardesignheadingsetting'] = 'Navbar';
 $string['darknavbarsetting'] = 'Dark navbar';
 $string['darknavbarsetting_desc'] = 'By checking this setting you can invert the default light navbar to a dark one with white links.';
+// ...Help texts.
+$string['helptextheadingsetting'] = 'Help texts';
+$string['helptextmodalsetting'] = 'Show help texts in a modal dialogue';
+$string['helptextmodalsetting_desc'] = 'The default solution to display help texts in popover leads to different issues. For example popovers are not scrollable and they can reach over the viewport.<br/>
+For this reason, with this setting you can decide that the help texts should be displayed in a dedicated text box (modal dialogue) that appears in the middle of the page with enough space to hold even long helping texts.';
 
 // ADDITIONAL STRINGS (IN ALPHABETICAL ORDER).
 $string['cachedef_imagearea'] = 'Cache for imagearea items';

lib.php

@@ -99,7 +99,8 @@ function theme_boost_campus_get_pre_scss($theme) {
         'incoursesettingsswitchtorole' => ['incoursesettingsswitchtorole'],
         'hidefooteronloginpage' => ['hidefooteronloginpage'],
         'footerhideusertourslink' => ['footerhideusertourslink'],
-        'navdrawerfullwidth' => ['navdrawerfullwidth']
+        'navdrawerfullwidth' => ['navdrawerfullwidth'],
+        'helptextmodal' => ['helptextmodal']
         // MODIFICATION END.
     ];
 

scss/post.scss

@@ -868,6 +868,21 @@ a[href^="mailto"]::before {
     }
 }
 
+@if variable-exists(helptextmodal) {
+    @if $helptextmodal == 'yes' {
+        .modal {
+            .modal-body {
+                /* This is needed to display the text within the modal window as the help button is placed in
+                in a span with the class text-nowrap. */
+                white-space: normal !important;
+                ul {
+                    padding-left: 1.5rem;
+                }
+            }
+        }
+    }
+}
+
 /* TODO: Remove when MDL-61319 is fixed */
 /* This is needed because a bug leads to a mess with fa.fa-pull-left/right rules. */
 .fa-pull-left {

settings.php

@@ -577,6 +577,21 @@ if ($ADMIN->fulltree) {
     $setting->set_updatedcallback('theme_reset_all_caches');
     $page->add($setting);
 
+    // Settings title to group navbar related settings together with a common heading. We don't want a description here.
+    $name = 'theme_boost_campus/helptextheading';
+    $title = get_string('helptextheadingsetting', 'theme_boost_campus', null, true);
+    $setting = new admin_setting_heading($name, $title, null);
+    $page->add($setting);
+
+    $name = 'theme_boost_campus/helptextmodal';
+    $title = get_string('helptextmodalsetting', 'theme_boost_campus', null, true);
+    $description = get_string('helptextmodalsetting_desc', 'theme_boost_campus', null, true);
+    $setting = new admin_setting_configcheckbox($name, $title, $description, 'no', 'yes', 'no' ); // Overriding default values
+    // yes = 1 and no = 0 because of the use of empty() in theme_boost_campus_get_pre_scss() (lib.php). Default 0 value would
+    // not write the variable to scss that could cause the scss to crash if used in that file. See MDL-58376.
+    $setting->set_updatedcallback('theme_reset_all_caches');
+    $page->add($setting);
+
     // Add tab to settings page.
     $settings->add($page);
 }

templates/help_icon.mustache

+{{!
+    @template core/help_icon
+
+    Help icon.
+
+    Example context (json):
+    {
+        "title": "Help with something",
+        "url": "http://example.org/help",
+        "linktext": "",
+        "icon":{
+            "attributes": [
+                {"name": "class", "value": "iconhelp"},
+                {"name": "src", "value": "../../../pix/help.svg"},
+                {"name": "alt", "value": "Help icon"}
+            ]
+        }
+    }
+}}
+{{! MODIFICATION:
+    * Changed data attributes to work with modal dialogues.
+    * Added the modal dialogue code.
+}}
+
+<a class="btn btn-link p-0" role="button" data-toggle="modal"
+    data-placement="{{#ltr}}right{{/ltr}}{{^ltr}}left{{/ltr}}" {{completedoclink}}
+    data-target="#{{linkid}}-modal-dialogue" data-html="true">
+    {{#pix}}help, core, {{alt}}{{/pix}}
+</a>
+
+<div class="modal moodle-has-zindex" {{#linkid}}id="{{linkid}}-modal-dialogue"{{/linkid}} data-region="modal-container" aria-hidden="true" role="dialog">
+    <div class="modal-dialog {{$classes}}{{/classes}}" role="document" data-region="modal" aria-labelledby="{{uniqid}}-modal-title" tabindex="0">
+        <div class="modal-content">
+            <div class="modal-header {{$headerclasses}}{{headerclasses}}{{/headerclasses}}" data-region="header">
+
+            {{$header}}
+            <h5 id="{{uniqid}}-modal-title" class="modal-title" data-region="title">{{$title}}{{title}}{{/title}}</h5>
+            {{/header}}
+            <button type="button" class="close" data-action="hide" data-dismiss="modal" aria-label={{#quote}}{{#str}}closebuttontitle{{/str}}{{/quote}}>
+                <span aria-hidden="true">&times;</span>
+            </button>
+            </div>
+            <div class="modal-body" data-region="body">
+            {{$body}}
+                {{{body}}}
+            {{/body}}
+            </div>
+            <div class="modal-footer" data-region="footer">
+                <button type="button" class="btn btn-secondary" data-dismiss="modal">{{# str }} closebuttontitle, moodle {{/ str }}</button>
+                {{$footer}}
+                {{{footer}}}
+                {{/footer}}
+            </div>
+        </div>
+    </div>
+</div>

templates/help_icon.mustache.original

+{{!
+    @template core/help_icon
+
+    Help icon.
+
+    Example context (json):
+    {
+        "title": "Help with something",
+        "url": "http://example.org/help",
+        "linktext": "",
+        "icon":{
+            "attributes": [
+                {"name": "class", "value": "iconhelp"},
+                {"name": "src", "value": "../../../pix/help.svg"},
+                {"name": "alt", "value": "Help icon"}
+            ]
+        }
+    }
+}}
+<a class="btn btn-link p-0" role="button"
+    data-container="body" data-toggle="popover"
+    data-placement="{{#ltr}}right{{/ltr}}{{^ltr}}left{{/ltr}}" data-content="{{text}} {{completedoclink}}"
+    data-html="true" tabindex="0" data-trigger="focus">
+  {{#pix}}help, core, {{alt}}{{/pix}}
+</a>

version.php

@@ -25,7 +25,7 @@
 defined('MOODLE_INTERNAL') || die();
 
 $plugin->component = 'theme_boost_campus';
-$plugin->version = 2018052300;
+$plugin->version = 2018072400;
 $plugin->release = 'v3.5-r1';
 $plugin->requires = 2018051300;
 $plugin->maturity = MATURITY_STABLE;