Difference between revisions of "MediaWiki:Common.js"

Revision as of 16:20, 10 June 2021

/* Any JavaScript here will be loaded for all users on every page load. */

/* Ignore upload warnings - box checked by default  */
if (mw.config.get('wgPageName') == 'Special:Upload') {
    (function ($) {
        $('#wpIgnoreWarning').prop('checked', true);
    }(jQuery));
}

$(document).ready(function () {
    // Disable fields with class 'disabled'
    $('.disabled').attr('readonly', true);

    //Initialize tooltips
    //$('.nav-tabs > li a[title]').tooltip();

    //Wizard
    $('a[data-toggle="tab"]').on('show.bs.tab', function (e) {

        var $target = $(e.target);

        if ($target.parent().hasClass('disabled')) {
            return false;
        }
    });

    $('.next-step').click(function (e) {

        var $active = $('.wizard .nav-tabs li.active');
        $active.next().removeClass('disabled');
        nextTab($active);

    });
    $('.prev-step').click(function (e) {

        var $active = $('.wizard .nav-tabs li.active');
        prevTab($active);

    });
});

function nextTab(elem)
{
    $(elem).next().find('a[data-toggle="tab"]').click();
}

function prevTab(elem)
{
    $(elem).prev().find('a[data-toggle="tab"]').click();
}

(function ($) {
    $.fn.extend({
        percentcircle: function (options) {
            var defaults = {
                animate: true,
                bgColor: '#FFFFFF',
                fillColor: '#12ACF6',
            };

            var that = this,
                template = '<div class="radial-wrap"><div class="radial-circle"><div class="radial-inner-circle"><span class="radial-percentage">{{percentage}}</span></div></div></div>',
                options = $.extend(defaults, options);

            function init()
            {
                that.each(function () {
                    var $this = $(this),
                        parentWidth = $(this).parent().width(),
                        diameter = parentWidth,
                        guage = Math.round(parentWidth / 25.6),
                        percentSize = Math.round(parentWidth / 3.9) + 'px',
                        styles = {
                            cirContainer: {
                                'width': diameter,
                                'height': diameter
                            },
                            cir: {
                                'width': diameter,
                                'height': diameter,
                                'background-color': defaults.fillColor,
                                'background-image': 'linear-gradient(91deg, transparent 50%, ' + defaults.bgColor + ' 50%), linear-gradient(90deg, ' + defaults.bgColor + ' 50%, transparent 50%)'
                            },
                            cirCover: {
                                'top': guage,
                                'left': guage,
                                'width': diameter - (guage * 2),
                                'height': diameter - (guage * 2)
                            },
                            percent: {
                                'width': diameter - (guage * 2),
                                'height': diameter - (guage * 2),
                                'line-height': diameter - (guage * 2) + 'px',
                                'font-size': percentSize
                            }
                        },
                        now = Math.round($this.attr('aria-valuenow')),
                        min = Math.round($this.attr('aria-valuemin')),
                        max = Math.round($this.attr('aria-valuemax')),
                        deg = now * (360 / (max - min)),
                        perc = Math.round(now / (max - min) * 100),
                        stop = options.animate ? 0 : deg,
                        $chart = $(template.replace('{{percentage}}', perc + '%'));

                    $('.radial-wrap', $chart).css(styles.cirContainer);
                    $('.radial-circle', $chart).css(styles.cir);
                    $('.radial-inner-circle', $chart).css(styles.cirCover);
                    $('.radial-percentage', $chart).css(styles.percent);
                    $this.append($chart);

                    setTimeout(function () {
                        animateChart(deg, parseInt(stop), $('.radial-circle', $chart));
                    }, 250);
                });
            }

            var animateChart = function (stop, curr, $elm) {
                var deg = curr;
                if (curr <= stop) {
                    if (deg <= 180) {
                        $elm.css('background-image', 'linear-gradient(' + (90 + deg) + 'deg, transparent 50%, ' + options.bgColor + ' 50%),linear-gradient(90deg, ' + options.bgColor + ' 50%, transparent 50%)');
                    } else {
                        $elm.css('background-image', 'linear-gradient(' + (deg - 90) + 'deg, transparent 50%, ' + options.fillColor + ' 50%),linear-gradient(90deg, ' + options.bgColor + ' 50%, transparent 50%)');
                    }
                    curr++;
                    setTimeout(function () {
                        animateChart(stop, curr, $elm);
                    }, 1);
                }
            };

            init();
        }
    });

})(jQuery);

$('.radial-progress').percentcircle();

/***********************************************
 * Cool DHTML tooltip script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
 * Please keep this notice intact
 * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
 ***********************************************/

var offsetxpoint = -60; //Customize x offset of tooltip
var offsetypoint = 20; //Customize y offset of tooltip
var ie = document.all;
var ns6 = document.getElementById && !document.all;
var enabletip = false;
if (ie || ns6) {
    var tipobj = '';
    if(document.all){
        tipobj = document.all['dhtmltooltip'];
    } else if (document.getElementById) {
        tipobj = document.getElementById('dhtmltooltip');
    }
    document.body.appendChild(tipobj);
}

function ietruebody()
{
    return (document.compatMode && document.compatMode != 'BackCompat') ? document.documentElement : document.body;
}

function ddrivetip(thetext, thecolor, thewidth)
{
    if (ns6 || ie) {
        if (typeof thewidth != 'undefined') tipobj.style.width = thewidth + 'px';
        if (typeof thecolor != 'undefined' && thecolor != '') tipobj.style.backgroundColor = thecolor;
        tipobj.innerHTML = thetext;
        enabletip = true;
        return false;
    }
}

function positiontip(e)
{
    if (enabletip) {
        var curX = (ns6) ? e.pageX : event.clientX + ietruebody().scrollLeft;
        var curY = (ns6) ? e.pageY : event.clientY + ietruebody().scrollTop;
//Find out how close the mouse is to the corner of the window
        var rightedge = ie && !window.opera ? ietruebody().clientWidth - event.clientX - offsetxpoint : window.innerWidth - e.clientX - offsetxpoint - 20;
        var bottomedge = ie && !window.opera ? ietruebody().clientHeight - event.clientY - offsetypoint : window.innerHeight - e.clientY - offsetypoint - 20;

        var leftedge = (offsetxpoint < 0) ? offsetxpoint * (-1) : -1000;

//if the horizontal distance isn't enough to accomodate the width of the context menu
        if (rightedge < tipobj.offsetWidth)
//move the horizontal position of the menu to the left by it's width
            tipobj.style.left = ie ? ietruebody().scrollLeft + event.clientX - tipobj.offsetWidth + 'px' : window.pageXOffset + e.clientX - tipobj.offsetWidth + 'px';
        else if (curX < leftedge)
            tipobj.style.left = '5px';
        else
//position the horizontal position of the menu where the mouse is positioned
            tipobj.style.left = curX + offsetxpoint + 'px';

//same concept with the vertical position
        if (bottomedge < tipobj.offsetHeight)
            tipobj.style.top = ie ? ietruebody().scrollTop + event.clientY - tipobj.offsetHeight - offsetypoint + 'px' : window.pageYOffset + e.clientY - tipobj.offsetHeight - offsetypoint + 'px';
        else
            tipobj.style.top = curY + offsetypoint + 'px';
        tipobj.style.visibility = 'visible';
    }
}

function hideddrivetip()
{
    if (ns6 || ie) {
        enabletip = false;
        tipobj.style.visibility = 'hidden';
        tipobj.style.left = '-1000px';
        tipobj.style.backgroundColor = '';
        tipobj.style.width = '';
    }
}

document.onmousemove = positiontip;