Rev 938 | AutorÃa | Comparar con el anterior | Ultima modificación | Ver Log |
{{!
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/>.
}}
{{!
Context variables required for this template:
* sitename - The name of the site
* output - The core renderer for the page
* bodyattributes - attributes for the body tag as a string of html attributes
* sidepreblocks - HTML for the blocks
* hasblocks - true if there are blocks on this page
* navdraweropen - true if the nav drawer should be open on page load
* regionmainsettingsmenu - HTML for the region main settings menu
* hasregionmainsettingsmenu - There is a region main settings menu on this page.
Example context (json):
{
"sitename": "Moodle",
"output": {
"doctype": "<!DOCTYPE html>",
"page_title": "Test page",
"favicon": "favicon.ico",
"main_content": "<h1>Headings make html validators happier</h1>"
},
"bodyattributes":"",
"sidepreblocks": "<h2>Blocks html goes here</h2>",
"hasblocks":true,
"navdraweropen":true,
"regionmainsettingsmenu": "",
"hasregionmainsettingsmenu": false
}
}}
{{> theme_universe/head }}
<body {{{ bodyattributes }}}>
{{> core/local/toast/wrapper}}
<div id="page-wrapper" class="d-print-block {{#output.courseheadermenu}}rui--course-with-nav{{/output.courseheadermenu}} {{^output.courseheadermenu}}rui--course-witout-nav{{/output.courseheadermenu}}">
{{{ output.standard_top_of_body_html }}}
{{{ output.cesa_navigation_course_menu_lateral_output }}}
{{> theme_universe_child/navbar }}
<div id="page" data-region="mainpage" data-usertour="scroller" class="drawers {{#topbarcustomhtml}}topbar--ext{{/topbarcustomhtml}} {{#courseindexopen}}show-drawer-left{{/courseindexopen}} {{#blockdraweropen}}show-hidden-drawer show-drawer-right{{/blockdraweropen}} {{#blockdraweropen}}show-drawer-right{{/blockdraweropen}} drag-container">
<div class="drawer-toggles d-flex">
{{#courseindex}}
<div class="drawer-toggler drawer-left-toggle open-nav d-print-none">
<button
class="btn-drawer btn-drawer--left drawertoggle"
data-toggler="drawers"
data-action="toggle"
data-target="universe-drawers-courseindex"
data-toggle="tooltip"
data-placement="right"
title="{{#str}}opendrawerindex, core{{/str}}"
>
<span class="sr-only">{{#str}}opendrawerindex, core{{/str}}</span>
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2 5.99519C2 5.44556 2.44556 5 2.99519 5H11.0048C11.5544 5 12 5.44556 12 5.99519C12 6.54482 11.5544 6.99039 11.0048 6.99039H2.99519C2.44556 6.99039 2 6.54482 2 5.99519Z" fill="currentColor" /><path d="M2 11.9998C2 11.4501 2.44556 11.0046 2.99519 11.0046H21.0048C21.5544 11.0046 22 11.4501 22 11.9998C22 12.5494 21.5544 12.9949 21.0048 12.9949H2.99519C2.44556 12.9949 2 12.5494 2 11.9998Z" fill="currentColor" /><path d="M2.99519 17.0096C2.44556 17.0096 2 17.4552 2 18.0048C2 18.5544 2.44556 19 2.99519 19H15.0048C15.5544 19 16 18.5544 16 18.0048C16 17.4552 15.5544 17.0096 15.0048 17.0096H2.99519Z" fill="currentColor" /></svg>
</button>
</div>
{{/courseindex}}
</div>
<div id="topofscroll" class="main-inner">
<div id="page-content" class="page-content wrapper-fw">
<div id="region-main-box" class="region-main-wrapper">
<section id="region-main" aria-label="{{#str}}content{{/str}}">
<div class="rui-blocks-wrapper wrapper--with-margin wrapper-xl">
<div class="wrapper-course wrapper-page">
{{{ output.breadcrumbs }}}
{{{coursepageinformationbanners}}}
{{#secondarymoremenu}}
<div class="secondary-navigation d-print-none">
{{> core/course-moremenu}}
</div>
{{/secondarymoremenu}}
{{#courseimagecontent}}
{{#output.course_hero}}
<div class="rui-course-cover {{#courseimagefw}}rui-course-cover--fw{{/courseimagefw}} {{coursecoverstyle}} mb-3 d-print-none" style="background-image: url('{{{ output.course_hero }}}');" alt="{{#str}}courseoverviewfiles, moodle {{/str}}"></div>
{{/output.course_hero}}
{{/courseimagecontent}}
{{#hasregionmainsettingsmenu}}
<div class="region_main_settings_menu_proxy"></div>
{{/hasregionmainsettingsmenu}}
{{{ output.course_content_header }}}
{{#headercontent}}
{{> core/activity_header }}
{{/headercontent}}
{{#overflow}}
<div class="container-fluid tertiary-navigation">
<div class="navitem">
{{> core/url_select}}
</div>
</div>
{{/overflow}}
{{#coursetablayout}}
<div class="rui-course-nav-wrapper">
<div class="moremenu navigation">
<ul class="rui-course-nav nav nav-tabs" id="courseTab" role="tablist">
<li class="nav-item" role="presentation">
<a href="#courseTabContent"
class="nav-link {{^istab2active}}active active_tree_node{{/istab2active}}" id="course-tab1" data-toggle="tab" data-target="#tab1" type="button" role="tab" aria-controls="tab1" {{^istab2active}}aria-selected="true"{{/istab2active}} {{#istab2active}}aria-selected="false"{{/istab2active}}>
{{{titlecoursetab1}}}
</a>
</li>
<li class="nav-item" role="presentation">
<a href="#tab2" class="nav-link {{#istab2active}}active active_tree_node{{/istab2active}}" id="course-tab2" data-toggle="tab" data-target="#tab2" type="button" role="tab" aria-controls="tab2" {{#istab2active}}aria-selected="true"{{/istab2active}} {{^istab2active}}aria-selected="false"{{/istab2active}}>
{{{titlecoursetab2}}}
</a>
</li>
<li class="nav-item" role="presentation">
<a href="#tab3" class="nav-link" id="course-tab3" data-toggle="tab" data-target="#tab3" type="button" role="tab" aria-controls="tab3" aria-selected="false">
{{{titlecoursetab3}}}
</a>
</li>
<li class="nav-item" role="presentation">
<a href="#tab4" class="nav-link" id="course-tab4" data-toggle="tab" data-target="#tab4" type="button" role="tab" aria-controls="tab4" aria-selected="false">
{{{titlecoursetab4}}}
</a>
</li>
<li class="nav-item" role="presentation">
<a href="#tab5" class="nav-link" id="course-tab5" data-toggle="tab" data-target="#tab5" type="button" role="tab" aria-controls="tab5" aria-selected="false">
{{{titlecoursetab5}}}
</a>
</li>
<li role="none" class="dropdown dropdownmoremenu morebutton d-none" data-region="morebutton">
<a class="btn btn-icon btn--more nav-link p-0 {{#isactive}}active{{/isactive}}" href="#" id="moremenu-dropdown-topbar" role="{{#istablist}}tab{{/istablist}}{{^istablist}}menuitem{{/istablist}}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" tabindex="-1">
<svg width="24" height="24" fill="none" viewBox="0 0 24 24">
<path fill="currentColor" d="M13 12C13 12.5523 12.5523 13 12 13C11.4477 13 11 12.5523 11 12C11 11.4477 11.4477 11 12 11C12.5523 11 13 11.4477 13 12Z"></path>
<path fill="currentColor" d="M13 8C13 8.55228 12.5523 9 12 9C11.4477 9 11 8.55228 11 8C11 7.44772 11.4477 7 12 7C12.5523 7 13 7.44772 13 8Z"></path>
<path fill="currentColor" d="M13 16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16C11 15.4477 11.4477 15 12 15C12.5523 15 13 15.4477 13 16Z"></path>
</svg>
</a>
<ul class="dropdown-menu dropdown-menu-left" data-region="moredropdown" aria-labelledby="moremenu-dropdown-topbar" role="menu">
</ul>
</li>
</ul>
</div>
</div>
{{#js}}
require(['core/moremenu'], function(moremenu) {
moremenu(document.querySelector('#courseTab'));
});
{{/js}}
{{#hasctopbl}}
<div class="wrapper-fw">
<section id="ctopbl" data-region="tmpl-course-blocks" class="rui-blocks-area">
{{{ ctopbl }}}
</section>
</div>
{{/hasctopbl}}
<div class="tab-content" id="courseTabContent">
<div class="tab-pane fade {{^istab2active}}show active{{/istab2active}}" id="tab1" role="tabpanel" aria-labelledby="course-tab1">
{{#ipcourseimage}}
{{#output.course_hero}}
<div class="rui-course-cover {{#courseimagefw}}rui-course-cover--fw{{/courseimagefw}} {{coursecoverstyle}} mb-3" style="background-image: url('{{{ output.course_hero }}}');"></div>
{{/output.course_hero}}
{{/ipcourseimage}}
{{{ output.full_header }}}
{{{ coursetab-a }}}
{{{ coursetab1content }}}
</div>
<div class="tab-pane fade {{#istab2active}}show active{{/istab2active}}"" id="tab2" role="tabpanel" aria-labelledby="course-tab2">
<div class="wrapper-fw">
{{#hascstopbl}}
<section id="cstopbl" data-region="tmpl-course-blocks" class="rui-blocks-area wrapper-xl">
{{{ cstopbl }}}
</section>
{{/hascstopbl}}
{{{ coursetab2content }}}
{{{ output.main_content }}}
{{{ coursetab-b }}}
{{#hascsbottombl}}
<section id="csbottombl" data-region="tmpl-course-blocks" class="rui-blocks-area wrapper-xl">
{{{ csbottombl }}}
</section>
{{/hascsbottombl}}
</div>
</div>
<div class="tab-pane fade" id="tab3" role="tabpanel" aria-labelledby="course-tab3">
<div class="wrapper-fw">
{{{ coursetab3content }}}
{{{ coursetab-c }}}
</div>
</div>
<div class="tab-pane fade" id="tab4" role="tabpanel" aria-labelledby="course-tab4">
<div class="wrapper-fw">
{{{ coursetab4content }}}
{{{ coursetab-d }}}
</div>
</div>
<div class="tab-pane fade" id="tab5" role="tabpanel" aria-labelledby="course-tab5">
<div class="wrapper-fw {{# output.course_contacts }}rui-list--gap {{/ output.course_contacts }}">
{{{ coursetab5content }}}
{{{ coursetab-e }}}
{{#cccteacherslist}}{{{ output.course_contacts }}}{{/cccteacherslist}}
</div>
</div>
</div>
{{/coursetablayout}}
{{^coursetablayout}}
{{{ output.full_header }}}
{{#ipcourseimage}}
{{#output.course_hero}}
<div class="rui-course-cover my-3" style="background-image: url('{{{ output.course_hero }}}');"></div>
{{/output.course_hero}}
{{/ipcourseimage}}
{{#hascstopbl}}
<section id="cstopbl" data-region="tmpl-course-blocks" class="rui-blocks-area mt-4">
{{{ cstopbl }}}
</section>
{{/hascstopbl}}
{{{ output.main_content }}}
{{#hascsbottombl}}
<div>
<section id="csbottombl" data-region="tmpl-course-blocks" class="rui-blocks-area">
{{{ csbottombl }}}
</section>
</div>
{{/hascsbottombl}}
{{/coursetablayout}}
{{{ output.activity_navigation }}}
{{{ output.course_content_footer }}}
</div>
</div>
</section>
{{#hasblocks}}
{{< theme_universe/drawer }}
{{$id}}universe-drawers-blocks{{/id}}
{{$drawerclasses}}drawer drawer-right{{#blockdraweropen}} show{{/blockdraweropen}}{{/drawerclasses}}
{{$drawercontent}}
<section class="d-print-none" aria-label="{{#str}}blocks{{/str}}">
{{{ addblockbutton }}}
{{{ sidepreblocks }}}
</section>
{{/drawercontent}}
{{$drawerpreferencename}}drawer-open-block{{/drawerpreferencename}}
{{$forceopen}}{{#forceblockdraweropen}}1{{/forceblockdraweropen}}{{/forceopen}}
{{$drawerstate}}show-drawer-right{{/drawerstate}}
{{$tooltipplacement}}left{{/tooltipplacement}}
{{$drawercloseonresize}}1{{/drawercloseonresize}}
{{$closebuttontext}}{{#str}}closeblockdrawer, core{{/str}}{{/closebuttontext}}
{{/ theme_universe/drawer}}
{{/hasblocks}}
</div>
{{#hascbottombl}}
<div class="wrapper-fw">
<section id="cbottombl" data-region="tmpl-course-blocks" class="rui-blocks-area wrapper--with-margin wrapper-xl">
{{{ cbottombl }}}
</section>
</div>
{{/hascbottombl}}
</div>
</div>
{{> theme_universe/footer }}
</div>
{{{ output.standard_after_main_region_html }}}
</div>
<script>
// Get all elements with class "rui-modprogress"
var progressDivs = document.querySelectorAll('.rui-modprogress');
// Iterate over each div element
progressDivs.forEach(function(div) {
// Extract the text content from the div
var textContent = div.textContent.trim();
// Extract only numbers using regular expression
var numbers = textContent.match(/\d+/g);
// Check if numbers are extracted successfully
if (numbers && numbers.length === 2) {
// Split the value before and after the "/" character
var beforeSlash = numbers[0];
var afterSlash = numbers[1];
// Update count-completed-value and count-total-value
var parentDiv = div.closest('.section-summary-activities');
var completedSpan = parentDiv.querySelector('.count-completed-value');
var totalSpan = parentDiv.querySelector('.count-total-value');
// Calculate the percentage of completion
var percentage = (beforeSlash / afterSlash) * 100;
// Update aria-valuenow attribute
var progressBar = parentDiv.querySelector('.rui-progress-bar');
if (progressBar) {
progressBar.setAttribute('aria-valuenow', percentage);
progressBar.style.width = percentage + "%";
}
if (completedSpan && totalSpan) {
completedSpan.textContent = beforeSlash;
totalSpan.textContent = afterSlash;
}
} else {
console.error("Error: Failed to extract numbers from the div with ID:", div.id);
}
});
</script>
</body>
</html>
{{#js}}
M.util.js_pending('theme_universe/loader');
require(['theme_universe/loader', 'theme_universe/drawer'], function(Loader, Drawer) {
Drawer.init();
M.util.js_complete('theme_universe/loader');
});
{{/js}}