Proyectos de Subversion Moodle

// 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/>.

/**
 * Completion Progress block progress bar behaviour.
 *
 * @module     block_completion_progress/progressbar
 * @copyright  2020 Jonathon Fowler <fowlerj@usq.edu.au>
 * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
 */
define(['jquery', 'core/pubsub', 'core/utils'],
    function($, PubSub, Utils) {
        /**
         * Show progress event information for a cell.
         * @param {Event} event
         */
        function showInfo(event) {
            var cell = $(this);
            var container = cell.closest('.block_completion_progress .barContainer');
            var visibleinfo = container.siblings('.progressEventInfo:visible');
            var infotoshow = container.siblings('#' + cell.data('infoRef'));

            if (!visibleinfo.is(infotoshow)) {
                visibleinfo.hide();
                infotoshow.show();
            }

            event.preventDefault();
        }

        /**
         * Show all progress event information (for accessibility).
         * @param {Event} event
         */
        function showAllInfo(event) {
            var initialinfo = $(this).closest('.progressEventInfo');

            initialinfo.siblings('.progressEventInfo').show();
            initialinfo.hide();

            event.preventDefault();
        }

        /**
         * Navigate to a cell's activity location.
         */
        function viewActivity() {
            var cell = $(this);
            var container = cell.closest('.block_completion_progress .barContainer');
            var infotoshow = container.siblings('#' + cell.data('infoRef'));
            var infolink = infotoshow.find('a.action_link');
            if (infolink.prop('onclick') !== null) {
                infolink.click();
            } else {
                document.location = infolink.prop('href');
            }
        }

        /**
         * Scroll the bar corresponding to the arrow clicked.
         * @param {Event} event
         */
        function scrollContainer(event) {
            var barrow = $(this).closest('.block_completion_progress .barContainer').find('.barRow');
            var amount = event.data * barrow.prop('scrollWidth') * 0.15;

            barrow.prop('scrollLeft', barrow.prop('scrollLeft') + amount);

            event.preventDefault();
        }

        /**
         * Show or hide the scroll arrows based on the visible position.
         */
        function checkArrows() {
            var barrow = $(this);
            var barcontainer = barrow.closest('.block_completion_progress .barContainer');
            var leftarrow = barcontainer.find('.left-arrow-svg');
            var rightarrow = barcontainer.find('.right-arrow-svg');
            var scrolled = barrow.prop('scrollLeft');
            var scrollWidth = barrow.prop('scrollWidth') - barrow.prop('offsetWidth');
            var threshold = Math.floor(barrow.find('.progressBarCell:first-child').width() * 0.25);

            if (document.dir === 'rtl') {
                scrolled = -scrolled;

                if (scrolled > threshold) {
                    rightarrow.css('display', 'block');
                } else {
                    rightarrow.css('display', 'none');
                }
                if (scrollWidth > threshold && scrolled < scrollWidth - threshold) {
                    leftarrow.css('display', 'block');
                } else {
                    leftarrow.css('display', 'none');
                }
            } else {
                if (scrolled > threshold) {
                    leftarrow.css('display', 'block');
                } else {
                    leftarrow.css('display', 'none');
                }
                if (scrollWidth > threshold && scrolled < scrollWidth - threshold) {
                    rightarrow.css('display', 'block');
                } else {
                    rightarrow.css('display', 'none');
                }
            }
        }

        /**
         * Prepare scroll mode behaviour.
         * @param {jQuery} barcontainers there could be many nodes here in overview mode
         */
        function setupScroll(barcontainers) {
            var barrows = barcontainers.find('.barRow');

            /**
             * Check arrow visibility for each of the bar rows.
             */
            function checkEachBar() {
                barrows.each(checkArrows);
            }

            barrows.scroll(checkArrows);
            $(window).resize(checkEachBar);
            PubSub.subscribe('nav-drawer-toggle-end', checkEachBar); // Boost ≤3.11.
            $(document).on('theme_boost/drawers:shown theme_boost/drawers:hidden',
                Utils.debounce(checkEachBar, 250)); // Boost ≥4.0.

            // On page load, place the 'now' marker in the centre of the scrolled bar
            // and adjust which arrows should be visible.
            $(function() {
                var nowicons = barcontainers.find('.nowicon');
                nowicons.each(function() {
                    var nowicon = $(this);
                    var barrow = nowicon.closest('.block_completion_progress .barRow');

                    barrow.prop('scrollLeft', 0);
                    barrow.prop('scrollLeft', nowicon.offset().left - barrow.offset().left -
                        barrow.width() / 2);
                });

                barrows.each(checkArrows);
            });

            barcontainers.on('click', '.left-arrow-svg', -1, scrollContainer);
            barcontainers.on('click', '.right-arrow-svg', 1, scrollContainer);
        }

        /**
         * Set up event handlers for a particular progress bar instance.
         * @param {integer} instanceid the bar instance id
         */
        function initialiseBar(instanceid) {
            var barcontainers = $('.block_completion_progress ' +
                '.barContainer[data-instanceid="' + instanceid + '"]');

            // Show information elements on hover or tap.
            barcontainers.on('touchstart mouseover', '.progressBarCell', showInfo);

            // Navigate to the activity when its cell is clicked.
            barcontainers.on('click', '.progressBarCell[data-haslink=true]', viewActivity);

            // Show all information elements when the 'show all' link is clicked.
            barcontainers.siblings('.progressEventInfo').find('.progressShowAllInfo').click(showAllInfo);

            setupScroll(barcontainers);
        }

        return /** @alias module:block_completion_progress/progressbar */ {
            /**
             * Initialise progress bar instances.
             * @param {array} instanceids an array of progress bar instance ids
             */
            init: function(instanceids) {
                for (var i = instanceids.length - 1; i >= 0; i--) {
                    initialiseBar(instanceids[i]);
                }
            },
        };
    });