Merge pull request #256 from davidherney/tk_new_verticalall_view

Tk new verticalall view

Author: davidherney

README.md

@@ -19,6 +19,7 @@ Download zip package, extract the onetopic folder and upload this folder into co
 ### 2024050909:
 * New responsive tab display: switch to collapsed menu
 * The icon in the tabs with children was hidden. It may be removed in the future.
+* New tabs view: Vertically including childs
 
 ### 2024050907:
 * New feature: Subsection display mode.

classes/header.php

@@ -89,6 +89,9 @@ public function export_for_template(\renderer_base $output) {
             case \format_onetopic::TABSVIEW_COURSEINDEX:
                 $tabsview = 'verticaltabs';
                 break;
+            case \format_onetopic::TABSVIEW_VERTICALALL:
+                $tabsview = 'verticaltabs verticalalltabs';
+                break;
             case \format_onetopic::TABSVIEW_ONELINE:
                 $tabsview = 'onelinetabs';
                 break;
@@ -106,11 +109,29 @@ public function export_for_template(\renderer_base $output) {
         $format->hastopictabs = count($tabslist) > 0;
 
         $courseindex = '';
+        $hassubtabs = false;
         if ($course->tabsview == \format_onetopic::TABSVIEW_COURSEINDEX) {
             $renderer = $format->get_renderer($PAGE);
             $courseindex = $renderer->render_from_template('core_courseformat/local/courseindex/drawer', []);
             $hassecondrow = false;
             $hastopictabs = true;
+        } else if ($course->tabsview == \format_onetopic::TABSVIEW_VERTICALALL) {
+            $hastopictabs = $format->hastopictabs;
+            $hassecondrow = false;
+            $hassubtabs = true;
+
+            foreach ($tabslist as $tab) {
+                if (isset($tab->secondrow) && is_array($tab->secondrow)) {
+                    foreach ($tab->secondrow as $skey => $secondtab) {
+                        if (!$secondtab->id) {
+                            // Remove the index to avoid conflicts with the main tabs.
+                            unset($tab->secondrow[$skey]);
+                        }
+                    }
+
+                    $tab->secondrow = array_values($tab->secondrow);
+                }
+            }
         } else {
             $hastopictabs = $format->hastopictabs;
             $hassecondrow = is_object($secondtabslist) && count($secondtabslist->tabs) > 0;
@@ -158,6 +179,7 @@ public function export_for_template(\renderer_base $output) {
             'tabs' => $tabslist,
             'activetab' => $activetab,
             'hassecondrow' => $hassecondrow,
+            'hassubtabs' => $hassubtabs,
             'secondrow' => $secondtabslist,
             'tabsviewclass' => $tabsview,
             'hasformatmsgs' => count(\format_onetopic::$formatmsgs) > 0,

classes/output/courseformat/content/section/controlmenu.php

@@ -66,7 +66,10 @@ public function section_control_items() {
 
         $movecontrols = [];
         if ($section->section && !$isstealth && has_capability('moodle/course:movesections', $coursecontext, $USER)) {
-            $horizontal = !$course->hidetabsbar && $course->tabsview != \format_onetopic::TABSVIEW_VERTICAL;
+            $horizontal = !$course->hidetabsbar && (
+                $course->tabsview != \format_onetopic::TABSVIEW_VERTICAL &&
+                $course->tabsview != \format_onetopic::TABSVIEW_VERTICALALL
+            );
             $rtl = right_to_left();
 
             // Legacy move up and down links.

lang/en/format_onetopic.php

@@ -186,9 +186,11 @@
 $string['tabsview_default'] = 'By default';
 $string['tabsview_help'] = 'By default: is the traditional view.<br />
 Vertically: show tabs in vertical direction. Tabs on the left and content on the right.<br />
+Vertically including childs: show tabs in vertical direction, including the child tabs. Tabs on the left and content on the right.<br />
 One single line: all tabs are displayed in a single line with horizontal scroll. Useful if too many tabs are used.';
 $string['tabsview_oneline'] = 'Only one line';
 $string['tabsview_vertical'] = 'Vertically';
+$string['tabsview_verticalall'] = 'Vertically including childs';
 $string['templatetopic'] = 'Use topic summary as template';
 $string['templatetopic_help'] = 'This option is used in order to use the summary topic as a template. If it is used as template, you can include the resources in the content, not only as tradicional moodle\'s lists. <br />In order to include a resource, write the resource name between double brackets, for example: [[News forum]]. This functionality is similar to activity name filter, however, it is different because the user can chose if included the resource icon and decide than activities are be included.';
 $string['templatetopic_icons'] = 'Show icon in resource links in summary';

lib.php

@@ -67,6 +67,9 @@ class format_onetopic extends core_courseformat\base {
     /** @var int Embedded course index */
     const TABSVIEW_COURSEINDEX = 3;
 
+    /** @var int Vertical all view */
+    const TABSVIEW_VERTICALALL = 4;
+
     /** @var int Only if theme not support "usescourseindex" */
     const SECTIONSNAVIGATION_SUPPORT = 1;
 
@@ -286,8 +289,11 @@ public function uses_course_index() {
 
         $course = $this->get_course();
 
-        if ($course->tabsview == self::TABSVIEW_COURSEINDEX) {
-            return false;
+        if (in_array($course->tabsview, [self::TABSVIEW_COURSEINDEX, self::TABSVIEW_VERTICALALL])) {
+            global $PAGE;
+            if ($PAGE->pagetype == 'course-view-onetopic') {
+                return false;
+            }
         }
 
         if ($this->show_editor()) {
@@ -657,6 +663,7 @@ public function course_format_options($foreditform = false) {
                         [
                             self::TABSVIEW_DEFAULT => new lang_string('tabsview_default', 'format_onetopic'),
                             self::TABSVIEW_VERTICAL => new lang_string('tabsview_vertical', 'format_onetopic'),
+                            self::TABSVIEW_VERTICALALL => new lang_string('tabsview_verticalall', 'format_onetopic'),
                             self::TABSVIEW_ONELINE => new lang_string('tabsview_oneline', 'format_onetopic'),
                         ],
                     ],

settings.php

@@ -112,6 +112,7 @@
     $options = [
         \format_onetopic::TABSVIEW_DEFAULT => new lang_string('tabsview_default', 'format_onetopic'),
         \format_onetopic::TABSVIEW_VERTICAL => new lang_string('tabsview_vertical', 'format_onetopic'),
+        \format_onetopic::TABSVIEW_VERTICALALL => new lang_string('tabsview_verticalall', 'format_onetopic'),
         \format_onetopic::TABSVIEW_ONELINE => new lang_string('tabsview_oneline', 'format_onetopic'),
     ];
     $settings->add(

styles.css

@@ -15,11 +15,11 @@
     padding-right: 1.3rem;
 }
 
-.format-onetopic ul.nav-tabs.format_onetopic-tabs li.marker a {
+.format-onetopic ul.nav-tabs.format_onetopic-tabs li.marker > a {
     font-weight: bold;
 }
 
-.format-onetopic ul.nav-tabs.format_onetopic-tabs li.dimmed a {
+.format-onetopic ul.nav-tabs.format_onetopic-tabs li.dimmed > a {
     color: #999;
     opacity: 0.5;
 }
@@ -113,7 +113,7 @@
     border-right: 1px solid #dee2e6;
 }
 
-.format-onetopic .tabs-wrapper .format_onetopic-tabs .nav-link > i.icon {
+.format-onetopic .tabs-wrapper .format_onetopic-tabs .nav-link > i.icon:not(.fa-plus) {
     display: none;
 }
 
@@ -133,6 +133,33 @@
     margin-right: -1px;
 }
 
+.format-onetopic .verticalalltabs .format_onetopic-tabs > .nav-item > .nav-link {
+    background-color: var(--primary);
+    color: var(--white);
+    text-align: center;
+    margin-bottom: 0;
+}
+
+.format-onetopic .verticalalltabs .format_onetopic-tabs > .nav-item > .nav-link.active,
+.format-onetopic .verticalalltabs .format_onetopic-tabs > .nav-item > .nav-link:active,
+.format-onetopic .verticalalltabs .format_onetopic-tabs > .nav-item > .nav-link:hover {
+    border: 1px solid transparent;
+    opacity: 0.9;
+}
+
+.format-onetopic .verticalalltabs .format_onetopic-subtabs {
+    margin-left: 10px;
+    margin-right: 3px;
+}
+
+.format-onetopic .verticalalltabs .format_onetopic-subtabs .subtopic {
+    font-size: 100%;
+}
+
+.format-onetopic .verticalalltabs .course-section {
+    margin-top: 0;
+}
+
 .format-onetopic .onetopic-subtabs_body {
     padding: 0 15px;
 }
@@ -614,7 +641,9 @@
         top: 45px;
         left: 0;
         right: 0;
-        background-color: var(--secondary, #6c757d)
+        background-color: var(--secondary, #6c757d);
+        box-shadow: 5px 5px 5px #aaa;
+        padding: 0;
     }
 
     .format-onetopic .tabs-menu-toggle:checked ~ .tabs-menu-overlay .tabs-menu-expand {
@@ -629,6 +658,10 @@
         margin-left: 0;
     }
 
+    .format-onetopic .tabs-menu-toggle:checked ~ .nav-tabs .format_onetopic-subtabs {
+        display: block;
+    }
+
     .format-onetopic .verticaltabs {
         display: block;
     }
@@ -658,6 +691,10 @@
         max-width: unset;
     }
 
+    .format-onetopic .verticalalltabs .format_onetopic-subtabs {
+        margin: 0;
+    }
+
     .format-onetopic .course-content .section-navigation {
         flex-direction: column;
     }

templates/courseformat/tabsubtree.mustache

@@ -0,0 +1,57 @@
+{{!
+    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 format_onetopic/courseformat/tabsubtree
+
+    Tab tree.
+
+    Example context (json):
+    {
+      "secondrow": [{
+            "active": "true",
+            "inactive": "false",
+            "link": [{
+                "link": "http://moodle.org"
+            }],
+            "title": "Moodle.org",
+            "text": "Moodle community",
+            "styles": "color: #ff00ff"
+        }]
+    }
+}}
+<ul class="nav nav-tabs format_onetopic-subtabs">
+  {{#secondrow}}
+    <li class="nav-item {{specialclass}}" {{#id}}id="onetabid-{{.}}"{{/id}}>
+      <a class="nav-link{{#active}} active{{/active}}{{#inactive}} disabled{{/inactive}}" {{#link}}href="{{{link}}}"{{/link}} title="{{title}}" style="{{styles}}">
+        <span class="tabicon {{^icons}}hidden{{/icons}}">
+          {{#icons}}
+            <span class="tabicon-{{state}}{{^visible}} hidden{{/visible}}">{{{icon}}}</span>
+          {{/icons}}
+        </span>{{{text}}}
+
+        {{#availablemessage}}
+          <span class="iconhelp" data-infoid="format_onetopic_winfo_{{uniqueid}}">
+            {{#pix}} e/help, core, {{#str}} info {{/str}} {{/pix}}
+          </span>
+          <div id="format_onetopic_winfo_{{uniqueid}}" class="availability_info_box" style="display: none;">
+            {{{availablemessage}}}
+          </div>
+        {{/availablemessage}}
+      </a>
+    </li>
+  {{/secondrow}}
+</ul>

templates/courseformat/tabtree.mustache

@@ -52,6 +52,11 @@
           </div>
         {{/availablemessage}}
       </a>
+      {{#hassubtabs}}
+        {{#haschilds}}
+          {{>format_onetopic/courseformat/tabsubtree}}
+        {{/haschilds}}
+      {{/hassubtabs}}
     </li>
   {{/tabs}}
 </ul>

version.php

@@ -33,7 +33,7 @@
 
 defined('MOODLE_INTERNAL') || die();
 
-$plugin->version = 2024050908.02; // The current plugin version (Date: YYYYMMDDXX).
+$plugin->version = 2024050908.03; // The current plugin version (Date: YYYYMMDDXX).
 $plugin->requires = 2024041600; // Requires this Moodle version.
 $plugin->component = 'format_onetopic'; // Full name of the plugin (used for diagnostics).
 $plugin->maturity = MATURITY_BETA;