Difference between pages "Experiments" and "MediaWiki:Common.js"

From Innocent Witches
(Difference between pages)
Jump to navigation Jump to search
 
Tag: Reverted
 
Line 1: Line 1:
{|align="center"; style="margin: 0 auto; width: 800px;margin-top:40px;background-color:#0000"
mw.loader.using('mediawiki.util').then(function() {
|style="padding: 15px" align="center"|<div class="cc-1 sy" style="z-index:101; position: relative;font-size:69%;text-shadow:unset;color:black;top:-29px;left:27px">Objectives 
   
|style="padding: 15px" align="center"|<div class="cc-2 sn" style="z-index:101; position: relative;font-size:69%;text-shadow:unset;color:black;top:-30px;left:-38px">Notes
function zselector( $content ) {
|style="padding: 15px" align="center"|<div class="cc-3 sn" style="z-index:101; position: relative;font-size:69%;text-shadow:unset;color:black;top:-26px;left:12px">Stats
    var ActiveID = '';
|style="padding: 15px" align="center"|<div class="cc-4 sn" style="z-index:101; position: relative;font-size:69%;text-shadow:unset;color:black;top:-28px;left:-26px">Memories
    $(function () {
|-
        $('[class|="cc"]').click(function () {
|colspan="4" style="padding: 80px 25px 25px 25px"|
            var cn = $(this).attr('class');
<div class="zz-1">
            if (typeof cn !== 'undefined') {
<div class="yes" style="margin-top:-190px;z-index:99; position: relative;border:unset">
                ZContent(cn, '0');
[[File:Objectives.png|800px|link=]]
            }
</div></div>
        });
<div style="display:none;" class="zz-2">
        $('[class|="hh"]').mouseenter(function () {
<div class="yes" style="margin-top:-190px;z-index:99; position: relative;border:unset">
            var cn = $(this).attr('class');
[[File:Notes.png|800px|link=]]
            if (typeof cn !== 'undefined') {
</div></div>
                ZContent(cn, '1');
<div style="display:none;" class="zz-3">
            }
<div class="yes" style="margin-top:-190px;z-index:99; position: relative;border:unset">
        });
[[File:Stats.png|800px|link=]]
        $('[class|="hh"]').mouseleave(function () {
</div></div>
            var cn = $(this).attr('class');
<div style="display:none;" class="zz-4">
            if (typeof cn !== 'undefined') {
<div class="yes" style="margin-top:-190px;z-index:99; position: relative;border:unset">
                ZContent(cn, '2');
[[File:Memories.png|800px|link=]]
            }
</div></div>
        });
|}
        $('[class|="zz"]').each(function (i, elem) {
            if ($(this).css('display') == 'none') {
                $(this).css('opacity', 0);
            }
        });
    });
    function ZContent(classValue, effect) {
        if (classValue.split) {
            var ID = '';
            var elemClasses = classValue.split(' ');
            for (var i = 0; i < elemClasses.length; i++) {
                var elemClass = elemClasses[i];
                if (elemClass.substring(0, 3) == 'hh-' || elemClass.substring(0, 3) == 'cc-') {
                    ID = elemClass.substring(3);
                    if (effect == '0') {
                        ActiveID = ID;
                        ZEffect(ID);
                        SelectElem('cc', ID)
                        break;
                    } else if (effect == '1') {
                        ActiveID = ID;
                        ZEffect(ID);
                        SelectElem('hh', ID)
                        break;
                    } else if (effect == '2') {
                        ZEffect(ActiveID);
                        SelectElem('hh', ID);
                        break;
                    }
                }
            }
        }
    }
    function ZEffect(ID) {
        $('[class|="zz"]').each(function (i, elem) {
            if ($(this).hasClass('zz-' + ID)) {
                $(this).css('display', 'block');
                $(window).trigger('scroll');
                $(this).stop();
                $(this).animate({
                    opacity: 1,
                    queue: false
                }, 700);
            } else {
                $(this).css('display', 'none');
                $(this).stop();
                $(this).animate({
                    opacity: 0,
                    queue: false
                }, 0);
            }
        });
    }
    function SelectElem(type, ID) {
        $('[class|="cc"],[class|="hh"]').each(function (i, elem) {
            if ($(this).hasClass(type + '-' + ID)) {
                $(this).removeClass('sn');
                $(this).addClass('sy');
            } else {
                $(this).removeClass('sy');
                $(this).addClass('sn');
            }
        });
    }
}
   
    mw.hook( 'wikipage.content' ).add( zselector );
    zselector( mw.util.$content );
});


// Динамическая кнопка "back to top"
$(document).ready(function(){
    // Create the back to top button element
    var backButton = $('<button id="back-to-top" title="Back to top"> </button>');
   
    // Append the button to the body
    $('body').append(backButton);
   


{|align="center"; style="margin: 0 auto; width: 800px;margin-top:40px;background-color:#0000"
    // Smooth scroll to top when the button is clicked
|style="padding: 15px" align="center"|<div class="cc-1 sy" style="z-index:101; position: relative;font-size:69%;text-shadow:unset;color:black;top:-46px;left:63px">Objectives 
    backButton.click(function(){
|style="padding: 15px" align="center"|<div class="cc-2 sn" style="z-index:101; position: relative;font-size:69%;text-shadow:unset;color:black;top:-44px;left:-3px">Notes
        $('html, body').animate({scrollTop : 0},800);
|style="padding: 15px" align="center"|<div class="cc-3 sn" style="z-index:101; position: relative;font-size:69%;text-shadow:unset;color:black;top:-46px;left:50px">Stats
        return false;
|style="padding: 15px" align="center"|<div class="cc-4 sn" style="z-index:101; position: relative;font-size:69%;text-shadow:unset;color:black;top:-44px;left:-28px">Photo album
    });
|-
});
|colspan="4" style="padding: 80px 25px 25px 25px"|
 
<div class="zz-1">
// Add Glowing Effect to Text
<div class="yes" style="margin-top:-190px;z-index:99; position: relative;border:unset">
function addGlowingEffect() {
[[File:Objectives2.png|800px|link=]]
  const elements = document.getElementsByClassName("glowing-text");
</div></div>
  for (let i = 0; i < elements.length; i++) {
<div style="display:none;" class="zz-2">
    elements[i].classList.add("glowing");
<div class="yes" style="margin-top:-190px;z-index:99; position: relative;border:unset">
  }
[[File:Notes2.png|800px|link=]]
}
</div></div>
 
<div style="display:none;" class="zz-3">
// Call the Function to Add Glowing Effect
<div class="yes" style="margin-top:-190px;z-index:99; position: relative;border:unset">
addGlowingEffect();
[[File:Stats2.png|800px|link=]]
</div></div>
<div style="display:none;" class="zz-4">
<div class="yes" style="margin-top:-190px;z-index:99; position: relative;border:unset">
[[File:photoalbum2.png|800px|link=]]
</div></div>
|}

Revision as of 12:50, 31 March 2024

mw.loader.using('mediawiki.util').then(function() {
    
function zselector( $content ) {
    var ActiveID = '';
    $(function () {
        $('[class|="cc"]').click(function () {
            var cn = $(this).attr('class');
            if (typeof cn !== 'undefined') {
                ZContent(cn, '0');
            }
        });
        $('[class|="hh"]').mouseenter(function () {
            var cn = $(this).attr('class');
            if (typeof cn !== 'undefined') {
                ZContent(cn, '1');
            }
        });
        $('[class|="hh"]').mouseleave(function () {
            var cn = $(this).attr('class');
            if (typeof cn !== 'undefined') {
                ZContent(cn, '2');
            }
        });
        $('[class|="zz"]').each(function (i, elem) {
            if ($(this).css('display') == 'none') {
                $(this).css('opacity', 0);
            }
        });
    });
    function ZContent(classValue, effect) {
        if (classValue.split) {
            var ID = '';
            var elemClasses = classValue.split(' ');
            for (var i = 0; i < elemClasses.length; i++) {
                var elemClass = elemClasses[i];
                if (elemClass.substring(0, 3) == 'hh-' || elemClass.substring(0, 3) == 'cc-') {
                    ID = elemClass.substring(3);
                    if (effect == '0') {
                        ActiveID = ID;
                        ZEffect(ID);
                        SelectElem('cc', ID)
                        break;
                    } else if (effect == '1') {
                        ActiveID = ID;
                        ZEffect(ID);
                        SelectElem('hh', ID)
                        break;
                    } else if (effect == '2') {
                        ZEffect(ActiveID);
                        SelectElem('hh', ID);
                        break;
                    }
                }
            }
        }
    }
    function ZEffect(ID) {
        $('[class|="zz"]').each(function (i, elem) {
            if ($(this).hasClass('zz-' + ID)) {
                $(this).css('display', 'block');
                $(window).trigger('scroll');
                $(this).stop();
                $(this).animate({
                    opacity: 1,
                    queue: false
                }, 700);
            } else {
                $(this).css('display', 'none');
                $(this).stop();
                $(this).animate({
                    opacity: 0,
                    queue: false
                }, 0);
            }
        });
    }
    function SelectElem(type, ID) {
        $('[class|="cc"],[class|="hh"]').each(function (i, elem) {
            if ($(this).hasClass(type + '-' + ID)) {
                $(this).removeClass('sn');
                $(this).addClass('sy');
            } else {
                $(this).removeClass('sy');
                $(this).addClass('sn');
            }
        });
    }
}
    
    mw.hook( 'wikipage.content' ).add( zselector );
    zselector( mw.util.$content );
});

// Динамическая кнопка "back to top"
$(document).ready(function(){
    // Create the back to top button element
    var backButton = $('<button id="back-to-top" title="Back to top"> </button>');
    
    // Append the button to the body
    $('body').append(backButton);
    

    // Smooth scroll to top when the button is clicked
    backButton.click(function(){
        $('html, body').animate({scrollTop : 0},800);
        return false;
    });
});

// Add Glowing Effect to Text
function addGlowingEffect() {
  const elements = document.getElementsByClassName("glowing-text");
  for (let i = 0; i < elements.length; i++) {
    elements[i].classList.add("glowing");
  }
}

// Call the Function to Add Glowing Effect
addGlowingEffect();