Current Path : C:/Users/Mahmood/Desktop/moodle8/lib/templates/ |
Current File : C:/Users/Mahmood/Desktop/moodle8/lib/templates/progress_bar.mustache |
{{! 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/progress_bar Progress bar. Example context (json): { "id": "progressbar_test", "width": "500" } }} <div id="{{id}}" class="row progressbar_container"> <div class="col-md-6 push-md-3"> <p id="{{id}}_status" class="text-xs-center"></p> <progress id="{{id}}_bar" class="progress progress-striped progress-animated" value="0" max="100"></progress> <p id="{{id}}_estimate" class="text-xs-center"></p> </div> </div> {{! We must not use the JS helper otherwise this gets executed too late. }} <script type="text/javascript"> (function() { var el = document.getElementById('{{id}}'), progressBar = document.getElementById('{{id}}_bar'), statusIndicator = document.getElementById('{{id}}_status'), estimateIndicator = document.getElementById('{{id}}_estimate'); el.addEventListener('update', function(e) { var msg = e.detail.message, percent = e.detail.percent, estimate = e.detail.estimate; statusIndicator.textContent = msg; progressBar.setAttribute('value', Math.round(percent)); if (percent === 100) { progressBar.classList.add('progress-success'); estimateIndicator.textContent = '100%'; } else { if (estimate) { estimateIndicator.textContent = estimate + ' - ' + percent + '%'; } else { estimateIndicator.textContent = '' + percent + '%'; } progressBar.classList.remove('progress-success'); } }); })(); </script>