MediaWiki:Common.js
Revision as of 18:05, 7 March 2021 by Adelo Vieira (talk | contribs)
Note: After saving, 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: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Go to Menu → Settings (Opera → Preferences on a Mac) and then to Privacy & security → Clear browsing data → Cached images and files.
/* 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>
}}
