Difference between revisions of "Common.js"

Line 149: Line 149:
 
     });
 
     });
 
   $(".wraplinkint").wrap(function() {
 
   $(".wraplinkint").wrap(function() {
         return "<a href='" + $(this).data('anchor') + "'></a>";
+
         return "<a href=\"" + $(this).data('anchor') + "\"></a>";
 
     });
 
     });
 
     $(".ratingURL").wrap(function() {
 
     $(".ratingURL").wrap(function() {

Revision as of 21:25, 4 February 2016

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

//testing JQuery Plugin
/*!
 * jQuery Textarea AutoSize plugin
 * Author: Javier Julio
 * Licensed under the MIT license
 */
;(function ($, window, document, undefined) {

  var pluginName = "textareaAutoSize";
  var pluginDataName = "plugin_" + pluginName;

  var containsText = function (value) {
    return (value.replace(/\s/g, '').length > 0);
  };

  function Plugin(element, options) {
    this.element = element;
    this.$element = $(element);
    this.init();
  }

  Plugin.prototype = {
    init: function() {
      var height = this.$element.outerHeight();
      var diff = parseInt(this.$element.css('paddingBottom')) +
                 parseInt(this.$element.css('paddingTop')) || 0;

      if (containsText(this.element.value)) {
        this.$element.height(this.element.scrollHeight - diff);
      }

      // keyup is required for IE to properly reset height when deleting text
      this.$element.on('input keyup', function(event) {
        var $window = $(window);
        var currentScrollPosition = $window.scrollTop();

        $(this)
          .height(0)
          .height(this.scrollHeight - diff);

        $window.scrollTop(currentScrollPosition);
      });
    }
  };

  $.fn[pluginName] = function (options) {
    this.each(function() {
      if (!$.data(this, pluginDataName)) {
        $.data(this, pluginDataName, new Plugin(this, options));
      }
    });
    return this;
  };

})(jQuery, window, document);

document.onload = function() {    
    document.getElementById("n-Top-of-the-page").innerHTML = '<a href="#">Top of the page</a>';
};

mw.loader.load( 'jquery.ui.accordion' );
function accordionVideos()
{
   jQuery( ".accordion" ).accordion({ collapsible: true, active: false });
};

function RGBA(e, alpha) { //e = jQuery element, alpha = background-opacity
    b = e.css('backgroundColor');
    e.css('backgroundColor', 'rgba' + b.slice(b.indexOf('('), ( (b.match(/,/g).length == 2) ? -1 : b.lastIndexOf(',') - b.length) ) + ', '+alpha+')');
}

// after the page has loaded, add the tab and accordion formatting
jQuery( document ).ready( function( $ ) {
        mw.loader.using( 'jquery.ui.accordion', function() {accordionVideos();} );
} );

$j(function($){
    $.fn.MetaBattleToolTip = function(options) {  
        return this.each(function() {  
            $(this).parent().find('.mbinfo').css({
                visibility: 'hidden',
                display:    'block'
            });
            //To create the proper width, we have to set a min-width hack. There are issues between browsers, this extra step is definitely required.
            posX = 0 - $(this).parent().offset().left;
            posY = $(window).scrollTop() - $(this).parent().offset().top ;
            $(this).parent().find('.mbinfo').css({'top': posY, 'left' : posX});
            //And then here we take the height/width of what it should look like and continue.
            var optionHeight = $(this).parent().find('.mbinfo').outerHeight();
            var optionWidth = $(this).parent().find('.mbinfo').outerWidth();
            var padding = parseInt($(this).parent().find('.mbinfo').css("padding"));
            //Resetting it to be hidden by default having taken the correct parameters
            $(this).parent().find('.mbinfo').css({
                visibility: 'visible',
                display:    'none'
            });
            $(this).parent().find('.mbinfo').css('min-width', optionWidth + 'px');
            $(this).parent().css('display', 'inline');

            $(this).mousemove(function(e){
                var winW = $(window).innerWidth();
                var winH = $(window).innerHeight();
                var parentElementOffset = $(this).parent().offset();
                var posX = e.pageX - parentElementOffset.left + 5;
                var posY = e.pageY - parentElementOffset.top - optionHeight - 30;
                // $('#mbttts-cursor-data').html('========================<br/>Window Width: '+winW+'<br/> Window Height: '+winH+'<br/> e.pageX: '+e.pageX.toFixed(0)+'<br/> e.pageY: '+e.pageY.toFixed(0)+'<br/> posX: '+posX.toFixed(0)+'<br/> posY: '+posY.toFixed(0)+'<br/> e.clientX: '+e.clientX.toFixed(0)+'<br/> e.clientY: '+e.clientY.toFixed(0)+'<br/> parentElementOffset.left: '+parentElementOffset.left.toFixed(0)+'<br/> parentElementOffset.top: '+parentElementOffset.top.toFixed(0)+'<br/> optionHeight: '+optionHeight+'<br/> optionWidth: '+optionWidth+'<br/>$(window).scrollTop(): '+$(window).scrollTop().toFixed(0)+'<br/>$(window).scrollBottom(): '+($(document).height()-$(window).innerHeight()-$(window).scrollTop()).toFixed(0)+'<br/>========================');
                if ((optionWidth + 20) > (winW - e.clientX)) {
                    //does not fit going right, will it fit going leftwards?
                    posX -= optionWidth + 10;  
                    if ((optionWidth + 5) > (e.clientX)) {
                         //does not fit going left either (show as much as possible left to right starting from left)
                         posX = 0 - parentElementOffset.left;
                    }
                }
                if ((optionHeight + 30) > e.clientY)  {
                    //does not fit at top, will it fit bottom side?
                    posY += optionHeight + 60;
                    if ((optionHeight+30) > (winH - e.clientY)) {
                        //does not fit downwards either (show as much as possible top to bottom starting from top)
                        // posX = winW-optionWidth-padding*2+1;
                        posX = 0 - parentElementOffset.left;
                        posY = $(window).scrollTop() - parentElementOffset.top ;
                    }
                }
                $(this).parent().find('.mbinfo').css({'top': posY, 'left' : posX});
                $(this).parent().find('.mbinfo').css('display', 'block');
            })
	  
            $(this).mouseout(function(){
                $('.mbinfo').css('display', 'none');
            })
        });
    };
    $.fn.FancyBoxYouTube = function(options) {  
        return this.each(function() {  
            var title = $(this).text();
            var link = $(this).attr('title');
            $(this).attr('title', '');
            $(this).html('<a class="fancybox-media" title="'+ title +'" href="'+ link +'">'+ title +'</a>');
        });
    };
    
    $('.mbhoveron > a').attr('title', '');

    $( ".anchorize" ).wrap(function() {
        return "<a href='" + $(this).data('anchor') + "' target='_blank'></a>";
    });
  $(".wraplinkint").wrap(function() {
        return "<a href=\"" + $(this).data('anchor') + "\"></a>";
    });
    $(".ratingURL").wrap(function() {
        return "<a href='http://metabattle.com/wiki/Special:Rating?name=" + $(this).data('name').replace(/ /g,"_") + "'></a>";
    });
    $( ".linktotwitch" ).wrap(function() {
        return "<a href='http://www.twitch.tv/" + $(this).data('channel') + "' target='_blank'></a>";
    });
    $( ".categoriesFooter" ).each(function() {
        var item = $(this);
        item.next().after(item);
    });

$(".builds-intro-header").click(function () {

    $header = $(this);
    //getting the next element
    $content = $header.next();
    //fix borders
//    if ($content.is(":visible")) {
//$header.css('border-bottom-width', '1px');
//}
//else {
//$header.css('border-bottom-width', '0px');
//} 
    //open up the content needed - toggle the slide- if visible, slide up, if not slidedown.
    $content.slideToggle(500, function () {
        //execute this after slideToggle is done
    });
});

$('.mbhoveron').MetaBattleToolTip(); //execute before hiding any inside accordions

$(".accordNext").next().hide(); //defaults, but hopefully gets proper widths for hoverover items

$(".accordNext").click(function () {
  $(this).next().slideToggle(500, function () {});
  $(this).toggleClass('expanded');
  var bg=$(this).css('backgroundColor');
  var a=bg.slice(4).split(',');
  var newBg='rgba('+a[0]+','+parseInt(a[1])+','+parseInt(a[2])+',0.2)';
  $(this).next().css('backgroundColor',newBg);
});

$('.mbTV').one( "click", function() {
    $(this).unbind('click');
    var width = $(this).data('width'),
        height = $(this).data('height'),
        title = $(this).text(),
        user = $(this).data('twitch-user'),
        cat = $(this).data('twitch-folder'),
        id = $(this).data('twitch-url'),
        aspectRatio = ['16', '9'],
        paddingTop = 0;
        //alert(id);
    if (typeof width === 'undefined' || typeof height === 'undefined') {
        width = 640;
        height = 390;
    }
    //$(this).after('<p style="height:'+height+'px;"><iframe width="'+width+'" height="'+height+'" src="http://www.twitch.tv/'+user+'/popout?videoId='+cat+id+' scrolling="no" frameborder="0" allowfullscreen></iframe></p>');
    $(this).after('<p><object bgcolor="#000000" data="http://www.twitch.tv/swflibs/TwitchPlayer.swf" height="378" id="clip_embed_player_flash" type="application/x-shockwave-flash" width="620"><param name="movie" value="http://www.twitch.tv/swflibs/TwitchPlayer.swf" /><param name="allowScriptAccess" value="always" /><param name="allowNetworking" value="all" /><param name="allowFullScreen" value="true" /><param name="flashvars" value="channel='+user+'&amp;auto_play=false&amp;start_volume=25&amp;videoId='+cat+id+'&amp;device_id=102defeec0f0166e" /></object></p>');
    //$(this).css('visibility', 'hidden');
    $(this).replaceWith('<a href="http://www.twitch.tv/'+user+'/'+cat+'/'+id+'" target="_blank" class="external text">'+title+'</a>');
});

$('.mainpagetwitch').one( "click", function() {
    $(this).unbind('click');
    var title = $(this).text(),
        user = $(this).data('twitch-user');

    //determine best width, over 970 = add chat, default video is 620x378, default chat is 350x500
    var thisWidth = $(this).width(),
        addChat = false,
        widthV = 0,
        heightV = 0,
        widthC = 350;
    if (thisWidth > 970) {
        addChat = true;
        widthV = thisWidth - 350;
    }
    else {
        widthV = thisWidth;
        if (widthV < 360) {
            widthV = 360;
        }
    }
    heightV = widthV / 1.64021164021164;
    
    if (addChat) {
        $(this).after('<p class="twitchObj"><div style="display:inline-block; border-top: 1px solid #666666;"><iframe src="http://www.twitch.tv/'+user+'/embed" frameborder="0" scrolling="no" height="'+heightV+'" width="'+widthV+'"></iframe></div><div style="display:inline-block; border-top: 1px solid #F2F2F2;"><iframe src="http://www.twitch.tv/'+user+'/chat?popout=" frameborder="0" scrolling="no" height="'+heightV+'" width="350"></iframe></div></p>');
    }
    else {
        $(this).after('<p class="twitchObj"><div style="display:inline-block; border-top: 1px solid #666666;"><iframe src="http://www.twitch.tv/'+user+'/embed" frameborder="0" scrolling="no" height="'+heightV+'" width="'+widthV+'"></iframe></div></p>');
    }
    $(this).replaceWith('');
    //<a href="http://www.twitch.tv/'+user+'/" target="_blank" class="external text">'+title+'</a>
    //'+user+' '+thisWidth+' '+addChat+' '+widthV+' '+heightV+' 
});

$('.mbYT').one( "click", function() {
    $(this).unbind('click');
    var width = $(this).data('width'),
        height = $(this).data('height'),
        id = $(this).data('youtube-id'),
        aspectRatio = ['16', '9'],
        paddingTop = 0;
        //alert(id);
    if (typeof width === 'undefined' || typeof height === 'undefined') {
        width = 640;
        height = 390;
    }
    $(this).after('<p style="height:'+height+'px;"><iframe width="'+width+'" height="'+height+'" src="http://www.youtube.com/embed/'+id+'?autoplay=1" frameborder="0" allowfullscreen></iframe></p>');
    //$(this).css('visibility', 'hidden');
});
$('.mbYTplaylist').one( "click", function() {
    $(this).unbind('click');
    var width = $(this).data('width'),
        height = $(this).data('height'),
        id = $(this).data('youtubelist-id'),
        aspectRatio = ['16', '9'],
        paddingTop = 0;
        //alert(id);
    if (typeof width === 'undefined' || typeof height === 'undefined') {
        width = 640;
        height = 390;
    }
    $(this).after('<p style="height:'+height+'px;"><iframe width="'+width+'" height="'+height+'" src="https://www.youtube.com/embed/videoseries?list='+id+'" frameborder="0" allowfullscreen></iframe></p>');
    //$(this).css('visibility', 'hidden');
});

$('.mbGfycat').one( "click", function() {
    $(this).unbind('click');
    var size = $(this).data('size'),
        title = $(this).text(),
        id = $(this).data('id'),
        width = 640,
        height = 390; //not used below, changed to "auto"
    if (size >= 3) {
        srvr = 'giant';
    }
    else if (size >= 1) {
        srvr = 'fat';
    }
    else {
        srvr = 'zippy';
    }
    //$(this).after('<div class="gfycat"><iframe class="gfycat" src="http://gfycat.com/ifr/'+id+'" frameborder="0" scrolling="no" width="'+width+'" height="auto" style="-webkit-backface-visibility: hidden;-webkit-transform: scale(1);" ></iframe></div>');
    //$("iframe.gfycat").load(function(){
        //$('#gfyVid').unwrap();
    //});
    $(this).after('<video class="gfycat" width="'+width+'" height="auto" autoplay loop poster="http://thumbs.gfycat.com/'+id+'-poster.jpg" controls><source src="http://'+srvr+'.gfycat.com/'+id+'.webm" type="video/webm"><source src="http://'+srvr+'.gfycat.com/'+id+'.mp4" type="video/mp4"></video>');
    $(this).replaceWith('<a href="//gfycat.com/'+id+'" target="_blank" class="external text">'+title+'</a>');
});

$('#next-process-for-rating-submission').one( "click", function(event) {
  event.preventDefault();
  $(this).hide();
  $("div.rating-rules-before-submit").show().delay( 800 ).css( "opacity", "1" );
});
$('.more-comments-link').one( "click", function(event) {
  event.preventDefault();
  $(this).hide();
  $("div.extra-votes").show().delay( 800 ).css( "opacity", "1" );
});

$('.main-page-title').parent().children(':first-child').remove();
$('.main-page-title').parent().parent().parent().children('.firstHeading').remove();

// remove ads off buildrating page
$('.mw-special-Rating #mw-content-text').children().eq(0).remove();

//tab making jazz
//make sure these two are not in url
//&action=history
//&oldid=

var makeTab = true;

if(window.location.href.indexOf("&action=history") > -1 || window.location.href.indexOf("&oldid=") > -1 || window.location.href.indexOf("&action=edit") > -1 || $('.noarticletext > p').length) {
  makeTab = false;
}
if ($('body.mediawiki').hasClass("mw-special-Rating") && makeTab) {
  $('.mw-special-Rating #p-namespaces > ul > li > span > a').text("Rating");
  var CurTabData = $('.mw-special-Rating #p-namespaces > ul').html();
  var BuildName = $('#firstHeading').text().replace(/ /g,"_").replace("%","%25");
  if (BuildName != "Recent_ratings")
  $('.mw-special-Rating #p-namespaces > ul').html('<li id="ca-nstab-build"><span><a href="/wiki/Build:'+BuildName+'">Build</a></span></li><li id="ca-talk"><span><a href="/wiki/Build_talk:'+BuildName+'" title="Discussion about the content page [alt-shift-t]" accesskey="t">Discussion</a></span></li>"'+CurTabData);
}
else if ($('body.mediawiki').hasClass("ns-3000") && makeTab) {
  if($("#hideRatingBoxPl0x").length == 0) {
    var CurTabData = $('.ns-3000 #p-namespaces > ul').html();
    var BuildName = $('#firstHeading').text().replace(/ /g,"_").replace("%","%25");
    $('.ns-3000 #p-namespaces > ul').html(CurTabData+'<li id="ca-nstab-special"><span><a href="/wiki/Special:Rating?name=Build:'+BuildName+'" title="This is a special page, you cannot edit the page itself">Rating</a></span></li>');
  }
}
else if ($('body.mediawiki').hasClass("ns-3001") && makeTab) {
  if($("#hideRatingBoxPl0x").length == 0) {
    var CurTabData = $('.ns-3001 #p-namespaces > ul').html();
    var BuildName = $('#firstHeading').text().replace(/ /g,"_").replace("%","%25");
    $('.ns-3001 #p-namespaces > ul').html(CurTabData+'<li id="ca-nstab-special"><span><a href="/wiki/Special:Rating?name=Build:'+BuildName+'" title="This is a special page, you cannot edit the page itself">Rating</a></span></li>');
  }
}
//Foreground Skin below
var BuildPage = $('body.skin-foreground').hasClass("ns-3000");
var BuildTalk = $('body.skin-foreground').hasClass("ns-3001");
var GuidePage = $('body.skin-foreground').hasClass("ns-3006");
var TeamPage = $('body.skin-foreground').hasClass("ns-3008");
if ($('body.skin-foreground').hasClass("mw-special-Rating")) {
  if (makeTab) {
    var BuildName = $('#firstHeading').text().replace(/ /g,"_").replace("%","%25");
    if (BuildName != "Recent_ratings") {
      //re-do "actions" tab here  
      $('#drop1').html('<li id="ca-nstab-build"><a href="/wiki/Build:'+BuildName+'"><div class="drop-icon"><i class="fa fa-file fa-fw"></i></div>Build</a></li><li id="ca-talk" class="selected"><a href="/wiki/Build_talk:'+BuildName+'" title="Discussion about the content page [alt-shift-t]" accesskey="t"><div class="drop-icon"><i class="fa fa-comments-o fa-fw"></i></div>Discussion</a></li><li id="ca-rating"><a href="/wiki/Special:Rating?name=Build:'+BuildName+'" title="Rating for the build page [alt-shift-g]" accesskey="g"><div class="drop-icon"><i class="fa fa-balance-scale fa-fw"></i></div>Rating</a></li>');
    }
  }
  else {
    var BuildName = $('#firstHeading').text().replace(/ /g,"_").replace("%","%25");
    if (BuildName == "Recent_ratings") {
      //remove actions bar
      $('#actionsbar').hide();
    }
  }
}
else if ((BuildPage || BuildTalk) && makeTab) {
  if($("#hideRatingBoxPl0x").length == 0) {
    //var CurTabData = $('#drop1').html();
    var BuildName = $('#firstHeading').text().replace(/ /g,"_").replace("%","%25");
    $('#drop1 li:nth-child(2)').after('<li id="ca-rating"><a href="/wiki/Special:Rating?name=Build:'+BuildName+'" title="Rating for the build page [alt-shift-g]" accesskey="g"><div class="drop-icon"><i class="fa fa-balance-scale fa-fw"></i></div>Rating</a></li>');
    if (BuildPage) {
      //add to ToC both Ratings + Comments
      $("#toc > ul").append('<li class="toclevel-1"><a href="#rating_thread"> <span class="toctext">Rating</span></a></li>'+"\n"+'<li class="toclevel-1"><a href="#disqus_thread_row"> <span class="toctext">Comment</span></a></li>');
    }
  }
  else if (BuildPage) {
    $(".row.ratings").remove();
    //add only Comments to ToC
    $("#toc > ul").append('<li class="toclevel-1"><a href="#disqus_thread_row"> <span class="toctext">Comment</span></a></li>');
  }
}
else if ((TeamPage || GuidePage) && makeTab) {
  $("#toc > ul").append('<li class="toclevel-1"><a href="#disqus_thread_row"> <span class="toctext">Comment</span></a></li>');
}

//user rating
/*
$("#labelForCheckboxHeart").click(function(){
  var checkbox = $("#checkboxHeart");
  // alert($("#checkboxHeart").prop("checked"));
  if(checkbox.is(":checked")) {
    // checkbox.toggle(checkbox.checked);
    checkbox.prop("checked", false);
    $("#labelForCheckboxHeart").html("<span></span>This is a bad build");
  }
  else {
    checkbox.prop("checked", true);
    // checkbox.toggle(checkbox.checked);
    $("#labelForCheckboxHeart").html("<span></span>This is a good build");
  }
});
*/

var text_max = 1500;
$('#textareaCharactersLeft').html(text_max + ' characters remaining');

$('#commentTextarea').keyup(function() {
  var text_length = $('#commentTextarea').val().length;
  var text_remaining = text_max - text_length;
  $('#textareaCharactersLeft').html(text_remaining + ' characters remaining');
});
   
    $('#p-navigation > div.body > ul').children().eq(1).html('<a href="/wiki/MetaBattle:Community_portal">Community portal</a> (<a href="/wiki/MetaBattle_talk:Community_portal">talk</a>)');
    $('#p-tb-label').remove();
    $('#p-donate-label').remove();
    $('#toc').nextAll('h2:first').css({
        "width": "auto",
        "padding-top": "0",
        "margin-top": "0",
        "border-top": "0"
    });
    $('.rating-template-meta').nextAll('h2:first').css({
        "width": "auto",
        "padding-top": "0",
        "margin-top": "0",
        "border-top": "0"
    });
    $('.rating-template-non-meta').nextAll('h2:first').css({
        "width": "auto",
        "padding-top": "0",
        "margin-top": "0",
        "border-top": "0"
    });

/**
 * jquery.snow - jQuery Snow Effect Plugin
 *
 * Available under MIT licence
 *
 * @version 1 (21. Jan 2012)
 * @author Ivan Lazarevic
 * @requires jQuery
 * @see http://workshop.rs
 *
 * @params minSize - min size of snowflake, 10 by default
 * @params maxSize - max size of snowflake, 20 by default
 * @params newOn - frequency in ms of appearing of new snowflake, 500 by default
 * @params flakeColor - color of snowflake, #FFFFFF by default
 * @example $.fn.snow({ maxSize: 200, newOn: 1000 });
 */
/*
    $.fn.snow = function(options){
        var $flake = $('<div id="flake" />').css({'position':'absolute','top':'-50px'}).html('&#10052;'),
            documentHeight = $(document).height(),documentWidth=$(document).width(),defaults={minSize:20,maxSize:40,newOn:250,flakeColor:"#FFFFFF"},
            options = $.extend({},defaults,options);
        var interval = setInterval(function(){
            var startPositionLeft = Math.random()*documentWidth-100,startOpacity=0.5+Math.random(),
                sizeFlake = options.minSize+Math.random()*options.maxSize,
                endPositionTop = documentHeight-80,
                endPositionLeft = startPositionLeft-100+Math.random()*200,
                durationFall = documentHeight*10+Math.random()*5000;
            $flake.clone().appendTo('body').css({
                left:startPositionLeft,
                opacity:startOpacity,
                'font-size':sizeFlake,
                color:options.flakeColor}).animate({
                    top:endPositionTop,
                    left:endPositionLeft,
                    opacity:0.2},durationFall,'linear',function(){$(this).remove()});},options.newOn);};

//call func
$.fn.snow();
*/

var img1 = new Image();
img1.src = 'http://metabattle.com/wiki/skins/common/images/logo32px-glow100.png';

$('textarea.js-auto-size').textareaAutoSize();
});