User:Gyumaou/spoiler.js

Note: After publishing, you may have to bypass your browser's cache to see the changes.

Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
Opera: Press Ctrl-F5.

/* import needed css from [[User:Gyumaou/spoiler.css]] */
document.write('<style type="text/css">/*<![CDATA[*/@import "/index.php?title=User%3AGyumaou%2Fspoiler.css&action=raw&ctype=text/css";/*]]>*/</style>');

/* array reverse "mini-plugin" */
jQuery.fn.reverse = [].reverse;

$(document).ready(function() {
    var spoilerButton = '<button id="spoil" class="wikia-button">Show Spoilers</button>';
    var centerWrapper = '<div class="centerWrapper">' + spoilerButton + '</div>';
    var spoilerShroud = $('<div class="shroud">' + centerWrapper + '</div>');

    $('table #spoilers').parents('table').reverse().each(function(idx, item) {

        if ($(item).prevAll(':header').length === 0) { /* if the spoiler tag is located above the first section, hide the whole page with an extra dialog. TODO: add dialog */
            var spoilerAreaHeight = $('#WikiaArticle').height();
            var spoilerStartTop = 0;
            var spoilerStartLeft = 0;
            $(spoilerShroud).attr('id', 'spoilerShroud').appendTo('#WikiaArticle').css({
                top: spoilerStartTop,
                left: spoilerStartLeft,
                height: spoilerAreaHeight,
                backgroundColor: $('#WikiaPageBackground').css('background-color')
            });
            return false; /* break */
        }

        if ($(item).nextUntil(':header').length === 0) { /* no content after spoiler tag */
            return true; /* continue */
        } else { /* for each section containing a spoiler tag, hide the section content */
            $(item).attr('data-spoilerNum', idx);
            $(item).nextUntil(':header').each(function(cidx, item) {
                $(item).attr('data-spoilerNum', idx);
                $(item).addClass("spoiler");
            });
        }
    });

    $("button#spoil").click(function() {
        $('div.shroud').fadeOut();
        return false;
    });

    $("table #spoilers").click(function() { /* toggle content below clicked banner */
        var contentId = $(this).parents('table').attr('data-spoilerNum');
        $('.spoiler[data-spoilerNum="' + contentId + '"]').toggle();
        return false;
    });

/**
 * fancy jQuery tooltips. 
 * based on code by: 
 * Christian “Kriesi” Budschedl @ www.kriesi.at
 */
    function spoiler_tooltip(target_items,name){$(target_items).each(function(i){$("body").append("<div class='"+name+"' id='"+name+i+"'><p>The following content contains spoilers. To reveal the content click anywhere on this banner. Click again to hide.</p></div>");var my_tooltip=$("#"+name+i);$(this).mouseover(function(){my_tooltip.css({display:"none"}).fadeIn(0)}).mousemove(function(kmouse){var border_top=$(window).scrollTop();var border_right=$(window).width();var left_pos;var top_pos;var offset=15;if(border_right-(offset*2)>=my_tooltip.width()+kmouse.pageX){left_pos=kmouse.pageX+offset}else{left_pos=border_right-my_tooltip.width()-offset}if(border_top+(offset*2)>=kmouse.pageY-my_tooltip.height()){top_pos=border_top+offset}else{top_pos=kmouse.pageY-my_tooltip.height()-offset}my_tooltip.css({left:left_pos,top:top_pos})}).mouseout(function(){my_tooltip.fadeOut(0)})})}

    spoiler_tooltip("table #spoilers", "tooltip");
});