Difference between revisions of "MediaWiki:Common.js"

From Sinfronteras
Jump to: navigation, search
Line 7: Line 7:
  
 
}());
 
}());
 +
 +
 +
{{#tag:html|
 +
    <style>
 +
    /* MediaWiki page configurations */
 +
    #content { margin: -1px 0px 0px 180px; }
 +
    #left-navigation { margin-left:180px }
 +
    <!-- #p-namespaces { margin-left: 124px !important; } -->
 +
    #footer { margin: 0 0 0 308px }
 +
    #bodyContent { z-index: 10 }
 +
    .mw-wiki-logo { margin: 20px 0px 0px 0.5px }
 +
   
 +
    #menuToggle a, li {
 +
        font: 14px / 22.4px sans-serif;
 +
    }
 +
    #menuToggle li {
 +
        font: 14px / 22.4px sans-serif;
 +
        margin-top:    0px !important;
 +
        margin-bottom: 10px !important;
 +
    }
 +
    #menuToggle ul {
 +
        margin-top:    20px !important;   
 +
        margin-bottom: 35px !important;
 +
    }
 +
    .desplaza {
 +
        margin-top: -12px !important;
 +
        padding-right: 30px !important;
 +
    }
 +
    div#toc.toc {
 +
        font-size: 12pt;
 +
        margin-top: -4.5pt;
 +
        background: rgba(255, 255, 255, 1);
 +
        margin-right: 12pt;
 +
    }
 +
    .tocUl {
 +
        overflow-y: scroll  !important;
 +
        overflow-x: scroll  !important;
 +
        max-height: calc(100vh - 150px);
 +
        width: 350px !important;
 +
        padding-bottom: 30px !important;
 +
        white-space: nowrap !important;
 +
    }
 +
    .tocUl a {
 +
        padding-right: 25px !important;
 +
    }
 +
    .tochidden {
 +
        height: 4pt !important;
 +
    }
 +
    .titulo1-text {
 +
        font-size: 18px !important;
 +
    }
 +
    .titulo2-text {
 +
        font: 700 14px / 22.4px sans-serif !important;
 +
    }
 +
    .titulo1-text-marco {
 +
        padding-left: 10px !important;
 +
        padding-right: 40px !important;
 +
    }
 +
    .titulo1-marco-oneline {
 +
        padding-right: 0px !important;
 +
        padding-left: 0px !important;
 +
        margin-right: -5px !important;
 +
        margin-left: 0px !important;
 +
        min-height: 35pt !important;
 +
        margin-top:-30pt !important;
 +
    }
 +
    .titulo1-marco-twolines {
 +
        padding-right: 0px !important;
 +
        padding-left: 0px !important;
 +
        margin-right: -5px !important;
 +
        margin-left: 0px !important;
 +
        min-height: 50pt !important;
 +
        margin-top:-47pt !important;
 +
    }
 +
    .titulo1-marco-color {
 +
        background: #9595ab !important;
 +
    }
 +
    .titulo1-color {
 +
        color: white !important;
 +
    }
 +
    .marco1-ext {
 +
        width: 100% !important;
 +
        padding: 0px 0px 0px 0px !important;
 +
        background: #e3e3e8 !important;
 +
    }
 +
    .marco1-int {
 +
        background: #e3e3e8 !important;
 +
    }
 +
    .marco1-ext .mw-editsection {
 +
        display: none !important;
 +
    }
 +
    .divline1 {
 +
        padding: 0;
 +
        border: 0;
 +
        display: block;
 +
        margin-top:-10px;
 +
        margin-right: 0px !important;
 +
        margin-left: 2px  !important;
 +
        background-color: white;
 +
        height:1.2pt
 +
    }
 +
   
 +
   
 +
    /* Sidebar (Pure CSS) */
 +
    body {
 +
   
 +
    }
 +
    #menuToggle {
 +
        display: block;
 +
        position: relative;
 +
        top: -145px;
 +
        padding-left: 10px;
 +
        margin-left: -205px;
 +
        -webkit-user-select: none;
 +
        user-select: none;
 +
    }
 +
    #menuToggle a {
 +
        text-decoration: none;
 +
        color: #232323;
 +
        transition: color 0.3s ease;
 +
    }
 +
    #menuToggle a:hover { color: tomato; }
 +
    #menuToggle input {
 +
        display: block;
 +
        width: 40px;
 +
        height: 32px;
 +
        position: absolute;
 +
        top: -7px;
 +
        left: -5px;
 +
        cursor: pointer;
 +
        opacity: 0; /* hide this */
 +
        z-index: 12; /* and place it over the hamburger */
 +
        -webkit-touch-callout: none;
 +
    }
 +
    /* Just a quick hamburger */
 +
    #menuToggle .hamb {
 +
        display: block;
 +
        width: 33px;
 +
        height: 6px;
 +
        margin-bottom: 4px;
 +
        position: relative;
 +
        background: #999191;
 +
        border-radius: 3px;
 +
        z-index: 11;
 +
        transform-origin: 4px 0px;
 +
        transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
 +
                    background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
 +
                    opacity 0.55s ease;
 +
    }
 +
    #menuToggle span:first-child {
 +
        transform-origin: 0% 0%;
 +
    }
 +
    #menuToggle span:nth-last-child(2) {
 +
        transform-origin: 0% 100%;
 +
    }
 +
    /* Transform all the slices of hamburger into a crossmark */
 +
    #menuToggle input:checked ~ span {
 +
        opacity: 1;
 +
        transform: rotate(45deg) translate(-2px, -1px);
 +
        background: #837e7e;
 +
    }
 +
    /* But let's hide the middle one */
 +
    #menuToggle input:checked ~ span:nth-last-child(3) {
 +
        opacity: 0;
 +
        transform: rotate(0deg) scale(0.2, 0.2);
 +
    }
 +
    /* Ohyeah and the last one should go the other direction */
 +
    #menuToggle input:checked ~ span:nth-last-child(2) {
 +
        transform: rotate(-45deg) translate(0, -1px);
 +
    }
 +
   
 +
    /* Make this absolute positioned at the top left of the screen */
 +
    #menu {
 +
        position: absolute;
 +
        width: 300px;
 +
        margin: -55px 0 0 -10px;
 +
        padding: 50px 0px 30px 0px;
 +
        background: #ededed;
 +
        list-style-type: none;
 +
        -webkit-font-smoothing: antialiased;
 +
        /* to stop flickering of text in safari */
 +
        transform-origin: 0% 0%;
 +
        <!-- transform: translate(-100%, 0); -->
 +
        display: none;
 +
        transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
 +
    }
 +
    #menu li {
 +
        padding: 10px 0 0 0;
 +
        font-size: 22px;
 +
    }
 +
    /* And let's slide it in from the left */
 +
    #menuToggle input:checked ~ #menu {
 +
        <!-- transform: none; -->
 +
        display: block;
 +
    }
 +
   
 +
 +
    /* Tab Menu */
 +
    .button{
 +
        font-size: 14px;
 +
        color: inherit;
 +
        background-color :inherit;
 +
        padding: 8px 0px 8px 0px;
 +
        border: none;
 +
        outline: 0;
 +
        cursor: pointer;
 +
    }
 +
    .bottom-selected { background-color: #f44336 !important }
 +
    .area {
 +
        color: black;
 +
        padding: 5px 0px 5000px 3px;
 +
        border: 0px solid #ccc !important;
 +
    }
 +
    .left  {float:  left;  width:100px; text-align: center;}
 +
    .right  {float:  right;  width:100px; text-align: center;}
 +
    .center {margin: 0 auto; width:100px; text-align: center;}
 +
   
 +
    </style>
 +
   
 +
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
 +
 +
    <script>
 +
    function openCity(evt, cityName) {
 +
        var i, x, tablinks;
 +
        x = document.getElementsByClassName("city");
 +
        for (i = 0; i < x.length; i++) {
 +
            x[i].style.display = "none";
 +
        }
 +
        tablinks = document.getElementsByClassName("tablink");
 +
        for (i = 0; i < x.length; i++) {
 +
            tablinks[i].className = tablinks[i].className.replace(" bottom-selected", "");
 +
        }
 +
        document.getElementById(cityName).style.display = "block";
 +
        evt.currentTarget.className += " bottom-selected";
 +
    }
 +
    </script>
 +
   
 +
    <nav role="navigation" style="position: fixed;" class="oculto">
 +
        <div id="menuToggle">
 +
            <!--
 +
            A fake / hidden checkbox is used as click reciever,
 +
            so you can use the :checked selector on it.
 +
            -->
 +
            <input id="inputButton" type="checkbox" onclick="myFunction()"/>
 +
           
 +
            <!--
 +
            Some spans to act as a hamburger.
 +
            -->
 +
           
 +
            <span class="hamb"></span>
 +
            <span class="hamb"></span>
 +
            <span class="hamb"></span>
 +
           
 +
            <!--
 +
            Too bad the menu has to be inside of the button
 +
            but hey, it's pure CSS magic.
 +
            -->
 +
            <div id="menu">
 +
   
 +
                <!--Tap Menu -->
 +
                <div style="padding: 10px 0px 0px 0px;">
 +
                    <div style="color:#fff !important; background-color: #000 !important">
 +
                        <button class="button left  tablink bottom-selected" onclick="openCity(event,'PE')">PE</button>
 +
                        <button class="button center tablink"                onclick="openCity(event,'Tools')"> Tools </button>
 +
                        <button class="button right  tablink"                onclick="openCity(event,'Others')"> Others </button>
 +
                    </div>
 +
                   
 +
                    <div id="PE" class="area city">
 +
                        <div style="overflow-y: scroll; height: 100vh !important; background: #e3e3e8; margin-top:0px; padding:0px 5px 0px 0px;">
 +
                        <!-- {{#lst:Mis páginas|Carrera1}} -->
 +
                        <div style="margin-bottom: 42px; margin-top:2px"> {{#lst:Mis páginas|formal_natural_and_applied_sciences0}}</div>
 +
                        <div style="margin-bottom: 50px"> {{#lst:Mis páginas|social_sciences0}}</div>
 +
                        <div style="margin-bottom: 30px"> {{#lst:Mis páginas|musica0}}</div>
 +
                        <div style="margin-bottom: 150px">{{#lst:Mis páginas|Carrera0}}</div>
 +
                        </div>
 +
                    </div>
 +
   
 +
                    <div id="Tools"  class="area city" style="display:none">
 +
                        <div>Tools</div>
 +
                        <p> Tools is the capital of France.</p>
 +
                    </div>
 +
   
 +
                    <div id="Others"  class="area city" style="display:none">
 +
                        <div>Others</div>
 +
                        <p> Others is the capital of Japan.</p>
 +
                    </div>
 +
                </div>
 +
               
 +
                <!-- <a href="#"><li>Home</li></a>
 +
                <a href="#"><li>About</li></a>
 +
                <a href="#"><li>Info</li></a>
 +
                <a href="#"><li>Contact</li></a>
 +
                <a href="https://erikterwan.com/" target="_blank"><li>Show me more</li></a> -->
 +
               
 +
            </div>
 +
        </div>
 +
    </nav>
 +
 +
    <script>
 +
        function myFunction() {
 +
            var checkBox = document.getElementById("inputButton");
 +
            if (checkBox.checked == true){
 +
                $('#content').css('margin-left', '300px')
 +
                $('#left-navigation').css({'cssText':'margin-left:300px'})
 +
                $('#menuToggle').css('margin-left', '-325px')
 +
            } else {
 +
                $('#content').css('margin-left', '180px')
 +
                $('#left-navigation').css({'cssText':'margin-left:180px'})
 +
                $('#menuToggle').css('margin-left', '-205px')
 +
            }
 +
        }
 +
 +
        function checkUser(){
 +
            if ( document.getElementById('pt-userpage') != null ) {
 +
                if ( document.getElementById('pt-userpage').getElementsByTagName('a')[0].innerText == "Adelo Vieira" ){
 +
                    $('.oculto').css('display','block')
 +
                    // $('body').css('background','red');
 +
                }else{
 +
                    // $('body').css('background','blue');   
 +
                }
 +
            }else{
 +
                // $('body').css('background','blue');
 +
                // $('#hideThis').show();
 +
            }
 +
        }
 +
 +
        $(document).ready( function() {
 +
            $('#totalItems, #enteredItems').keyup(function(){
 +
                checkUser();
 +
            }); 
 +
            checkUser();
 +
        });
 +
    </script>
 +
}}

Revision as of 18:05, 7 March 2021

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

(function () {

  var myElement = document.getElementById('mw-hello-world');
  myElement.innerHTML = '<html>Hello World!!!</html>';

}());


{{#tag:html|
    <style>
    /* MediaWiki page configurations */
    #content { margin: -1px 0px 0px 180px; }
    #left-navigation { margin-left:180px }
    <!-- #p-namespaces { margin-left: 124px !important; } -->
    #footer { margin: 0 0 0 308px }
    #bodyContent { z-index: 10 }
    .mw-wiki-logo { margin: 20px 0px 0px 0.5px }
    
    #menuToggle a, li {
        font: 14px / 22.4px sans-serif;
    }
    #menuToggle li {
        font: 14px / 22.4px sans-serif;
        margin-top:     0px !important;
        margin-bottom: 10px !important;
    }
    #menuToggle ul {
        margin-top:    20px !important;    
        margin-bottom: 35px !important;
    }
    .desplaza {
        margin-top: -12px !important;
        padding-right: 30px !important;
    }
    div#toc.toc {
        font-size: 12pt;
        margin-top: -4.5pt;
        background: rgba(255, 255, 255, 1);
        margin-right: 12pt;
    }
    .tocUl {
        overflow-y: scroll  !important;
        overflow-x: scroll  !important;
        max-height: calc(100vh - 150px);
        width: 350px !important;
        padding-bottom: 30px !important;
        white-space: nowrap !important;
    }
    .tocUl a {
        padding-right: 25px !important;
    }
    .tochidden {
        height: 4pt !important;
    }
    .titulo1-text {
        font-size: 18px !important;
    }
    .titulo2-text {
        font: 700 14px / 22.4px sans-serif !important;
    }
    .titulo1-text-marco {
        padding-left: 10px !important;
        padding-right: 40px !important;
    }
    .titulo1-marco-oneline {
        padding-right: 0px !important;
        padding-left: 0px !important;
        margin-right: -5px !important;
        margin-left: 0px !important;
        min-height: 35pt !important;
        margin-top:-30pt !important;
    }
    .titulo1-marco-twolines {
        padding-right: 0px !important;
        padding-left: 0px !important;
        margin-right: -5px !important;
        margin-left: 0px !important;
        min-height: 50pt !important;
        margin-top:-47pt !important;
    }
    .titulo1-marco-color {
        background: #9595ab !important;
    }
    .titulo1-color {
        color: white !important;
    }
    .marco1-ext {
        width: 100% !important;
        padding: 0px 0px 0px 0px !important;
        background: #e3e3e8 !important;
    }
    .marco1-int {
        background: #e3e3e8 !important;
    }
    .marco1-ext .mw-editsection {
        display: none !important;
    }
    .divline1 {
        padding: 0; 
        border: 0; 
        display: block; 
        margin-top:-10px; 
        margin-right: 0px !important; 
        margin-left: 2px  !important; 
        background-color: white; 
        height:1.2pt
    }
    
    
    /* Sidebar (Pure CSS) */
    body {
    
    }
    #menuToggle {
        display: block;
        position: relative;
        top: -145px;
        padding-left: 10px;
        margin-left: -205px;
        -webkit-user-select: none;
        user-select: none;
    }
    #menuToggle a {
        text-decoration: none;
        color: #232323; 
        transition: color 0.3s ease;
    }
    #menuToggle a:hover { color: tomato; }
    #menuToggle input {
        display: block;
        width: 40px;
        height: 32px;
        position: absolute;
        top: -7px;
        left: -5px;
        cursor: pointer;
        opacity: 0; /* hide this */
        z-index: 12; /* and place it over the hamburger */
        -webkit-touch-callout: none;
    }
    /* Just a quick hamburger */
    #menuToggle .hamb {
        display: block;
        width: 33px;
        height: 6px;
        margin-bottom: 4px;
        position: relative;
        background: #999191;
        border-radius: 3px;
        z-index: 11;
        transform-origin: 4px 0px;
        transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                    background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                    opacity 0.55s ease;
    }
    #menuToggle span:first-child {
        transform-origin: 0% 0%;
    }
    #menuToggle span:nth-last-child(2) {
        transform-origin: 0% 100%;
    }
    /* Transform all the slices of hamburger into a crossmark */
    #menuToggle input:checked ~ span {
        opacity: 1;
        transform: rotate(45deg) translate(-2px, -1px);
        background: #837e7e;
    }
    /* But let's hide the middle one */
    #menuToggle input:checked ~ span:nth-last-child(3) {
        opacity: 0;
        transform: rotate(0deg) scale(0.2, 0.2);
    }
    /* Ohyeah and the last one should go the other direction */
    #menuToggle input:checked ~ span:nth-last-child(2) {
        transform: rotate(-45deg) translate(0, -1px);
    }
    
    /* Make this absolute positioned at the top left of the screen */
    #menu {
        position: absolute;
        width: 300px;
        margin: -55px 0 0 -10px;
        padding: 50px 0px 30px 0px;
        background: #ededed;
        list-style-type: none;
        -webkit-font-smoothing: antialiased;
        /* to stop flickering of text in safari */
        transform-origin: 0% 0%;
        <!-- transform: translate(-100%, 0); -->
        display: none;
        transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
    }
    #menu li {
        padding: 10px 0 0 0;
        font-size: 22px;
    }
    /* And let's slide it in from the left */
    #menuToggle input:checked ~ #menu {
        <!-- transform: none; -->
        display: block;
    }
    

    /* Tab Menu */
    .button{
        font-size: 14px;
        color: inherit;
        background-color :inherit;
        padding: 8px 0px 8px 0px; 
        border: none; 
        outline: 0;
        cursor: pointer;
    }
    .bottom-selected { background-color: #f44336 !important }
    .area {
        color: black;
        padding: 5px 0px 5000px 3px;
        border: 0px solid #ccc !important;
    }
    .left   {float:  left;   width:100px; text-align: center;}
    .right  {float:  right;  width:100px; text-align: center;}
    .center {margin: 0 auto; width:100px; text-align: center;}
    
    </style>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    <script>
    function openCity(evt, cityName) {
        var i, x, tablinks;
        x = document.getElementsByClassName("city");
        for (i = 0; i < x.length; i++) {
            x[i].style.display = "none";
        }
        tablinks = document.getElementsByClassName("tablink");
        for (i = 0; i < x.length; i++) {
            tablinks[i].className = tablinks[i].className.replace(" bottom-selected", "");
        }
        document.getElementById(cityName).style.display = "block";
        evt.currentTarget.className += " bottom-selected";
    }
    </script>
    
    <nav role="navigation" style="position: fixed;" class="oculto">
        <div id="menuToggle">
            <!--
            A fake / hidden checkbox is used as click reciever,
            so you can use the :checked selector on it.
            -->
            <input id="inputButton" type="checkbox" onclick="myFunction()"/>
            
            <!--
            Some spans to act as a hamburger.
            -->
            
            <span class="hamb"></span>
            <span class="hamb"></span>
            <span class="hamb"></span>
            
            <!--
            Too bad the menu has to be inside of the button
            but hey, it's pure CSS magic.
            -->
            <div id="menu">
    
                <!--Tap Menu -->
                <div style="padding: 10px 0px 0px 0px;">
                    <div style="color:#fff !important; background-color: #000 !important">
                        <button class="button left   tablink bottom-selected" onclick="openCity(event,'PE')">PE</button>
                        <button class="button center tablink"                 onclick="openCity(event,'Tools')"> Tools </button>
                        <button class="button right  tablink"                 onclick="openCity(event,'Others')"> Others </button>
                    </div>
                    
                    <div id="PE" class="area city">
                        <div style="overflow-y: scroll; height: 100vh !important; background: #e3e3e8; margin-top:0px; padding:0px 5px 0px 0px;">
                        <!-- {{#lst:Mis páginas|Carrera1}} -->
                        <div style="margin-bottom: 42px; margin-top:2px"> {{#lst:Mis páginas|formal_natural_and_applied_sciences0}}</div>
                        <div style="margin-bottom: 50px"> {{#lst:Mis páginas|social_sciences0}}</div>
                        <div style="margin-bottom: 30px"> {{#lst:Mis páginas|musica0}}</div>
                        <div style="margin-bottom: 150px">{{#lst:Mis páginas|Carrera0}}</div>
                        </div>
                    </div>
    
                    <div id="Tools"  class="area city" style="display:none">
                        <div>Tools</div>
                        <p> Tools is the capital of France.</p> 
                    </div>
    
                    <div id="Others"  class="area city" style="display:none">
                        <div>Others</div>
                        <p> Others is the capital of Japan.</p>
                    </div>
                </div>
                
                <!-- <a href="#"><li>Home</li></a>
                <a href="#"><li>About</li></a>
                <a href="#"><li>Info</li></a>
                <a href="#"><li>Contact</li></a>
                <a href="https://erikterwan.com/" target="_blank"><li>Show me more</li></a> -->
                
            </div>
        </div>
    </nav>

    <script>
        function myFunction() {
            var checkBox = document.getElementById("inputButton");
            if (checkBox.checked == true){
                $('#content').css('margin-left', '300px')
                $('#left-navigation').css({'cssText':'margin-left:300px'})
                $('#menuToggle').css('margin-left', '-325px')
            } else {
                $('#content').css('margin-left', '180px')
                $('#left-navigation').css({'cssText':'margin-left:180px'})
                $('#menuToggle').css('margin-left', '-205px')
            }
        }

        function checkUser(){
            if ( document.getElementById('pt-userpage') != null ) {
                if ( document.getElementById('pt-userpage').getElementsByTagName('a')[0].innerText == "Adelo Vieira" ){
                    $('.oculto').css('display','block')
                    // $('body').css('background','red');
                }else{
                    // $('body').css('background','blue');    
                }
            }else{
                // $('body').css('background','blue');
                // $('#hideThis').show();
            }
        }

        $(document).ready( function() {
            $('#totalItems, #enteredItems').keyup(function(){
                checkUser();
            });   
            checkUser();
        });
    </script>
}}
Retrieved from "http://wiki.sinfronteras.ws/index.php?title=MediaWiki:Common.js&oldid=20782"