Difference between revisions of "MediaWiki:Common.js"

Revision as of 11:38, 28 July 2017

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

/* Ignore upload warnigns - box checked by default  */

if ( mw.config.get ( 'wgPageName' ) == 'Special:Upload') {
  ( function( $ ) {
    $( '#wpIgnoreWarning' ).prop( 'checked', true );
  }( jQuery ) );
}

/* Tooltips */

$(document).ready(function () {
    //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=document.all? document.all["dhtmltooltip"] : document.getElementById? 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