Difference between revisions of "Template:Sidebar"
Adelo Vieira (talk | contribs) |
Adelo Vieira (talk | contribs) |
||
| (355 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
{{#tag:html| | {{#tag:html| | ||
| + | <script> | ||
| + | /* Some important variables */ | ||
| + | show_oculto = true | ||
| + | </script> | ||
<style> | <style> | ||
/* MediaWiki page configurations */ | /* MediaWiki page configurations */ | ||
| Line 28: | Line 32: | ||
height: 4pt !important; | height: 4pt !important; | ||
} | } | ||
| − | + | ||
| − | + | ||
/* This block manages the CSS changes between "Mis paginas" page and the "Sidebar" page CSS */ | /* This block manages the CSS changes between "Mis paginas" page and the "Sidebar" page CSS */ | ||
#menuToggle ul { | #menuToggle ul { | ||
| Line 68: | Line 72: | ||
font: 14px / 22.4px sans-serif; | font: 14px / 22.4px sans-serif; | ||
} | } | ||
| − | #menuToggle li{ | + | #menuToggle li { |
| − | font: 14px / 22.4px sans-serif; | + | font: 14px / 22.4px sans-serif !important; |
} | } | ||
#menuToggle span { | #menuToggle span { | ||
| Line 76: | Line 80: | ||
#menuToggle .base-li-1 { | #menuToggle .base-li-1 { | ||
margin-bottom: -25px !important; | margin-bottom: -25px !important; | ||
| + | } | ||
| + | #menuToggle .base-text { | ||
| + | font-size:12pt !important; | ||
} | } | ||
#menuToggle .desplaza { | #menuToggle .desplaza { | ||
| Line 174: | Line 181: | ||
} | } | ||
| − | + | ||
/* Sidebar (Pure CSS) */ | /* Sidebar (Pure CSS) */ | ||
#menuToggle { | #menuToggle { | ||
| Line 242: | Line 249: | ||
transform: rotate(-45deg) translate(0, -1px); | transform: rotate(-45deg) translate(0, -1px); | ||
} | } | ||
| − | + | ||
/* Make this absolute positioned at the top left of the screen */ | /* Make this absolute positioned at the top left of the screen */ | ||
#menu { | #menu { | ||
| Line 267: | Line 274: | ||
display: block; | display: block; | ||
} | } | ||
| − | + | ||
| − | + | ||
/* Tab Menu */ | /* Tab Menu */ | ||
.button { | .button { | ||
| Line 284: | Line 291: | ||
background-color: #d1d1de !important; /* #f44336 rgb(60, 60, 70) #3c4043 */ | background-color: #d1d1de !important; /* #f44336 rgb(60, 60, 70) #3c4043 */ | ||
} | } | ||
| − | .fa-atom | + | #menuToggle .fa-atom { font-size: 21px; } |
| − | .fa- | + | #menuToggle .fa-yin-yang { font-size: 19px; } |
| − | .fa-tools | + | #menuToggle .fa-tools { font-size: 17px; } |
| − | .fa-atom:hover | + | #menuToggle .fa-atom:hover { color:black; } |
| − | .fa- | + | #menuToggle .fa-yin-yang:hover { color:black; } |
| − | .fa-tools:hover { color:black; } | + | #menuToggle .fa-tools:hover { color:black; } |
| − | .fa-ellipsis-v:hover { color:black; } | + | #menuToggle .fa-ellipsis-v:hover { color:black; } |
.area { | .area { | ||
color: black; | color: black; | ||
| Line 297: | Line 304: | ||
} | } | ||
#container-button-tap { | #container-button-tap { | ||
| − | + | width:100%; | |
| − | + | color:rgb(97, 97, 114); | |
| − | + | background-color: white; | |
| + | border-top: 1px solid #bbbbca; | ||
| + | /* border-bottom : 38px solid red !important; */ | ||
} | } | ||
.izquierda{ | .izquierda{ | ||
| − | + | float:left; | |
| − | + | width:25%; | |
| − | + | text-align: center; | |
} | } | ||
.derecha{ | .derecha{ | ||
| − | + | float:right; | |
| − | + | width:25%; | |
| − | + | text-align: center; | |
} | } | ||
.centrar{ | .centrar{ | ||
| − | + | margin:0 auto; | |
| − | + | width:25%; | |
| − | + | text-align: center; | |
} | } | ||
</style> | </style> | ||
| − | + | ||
| − | + | ||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> | <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> | ||
<script src="https://kit.fontawesome.com/423f4585a2.js" crossorigin="anonymous"></script> | <script src="https://kit.fontawesome.com/423f4585a2.js" crossorigin="anonymous"></script> | ||
| − | + | ||
| − | + | ||
<nav id="MySidebar" role="navigation" style="position: fixed; z-index: 1;"> <!-- class="oculto" --> | <nav id="MySidebar" role="navigation" style="position: fixed; z-index: 1;"> <!-- class="oculto" --> | ||
<div id="menuToggle"> | <div id="menuToggle"> | ||
| Line 332: | Line 341: | ||
<!-- | <!-- | ||
| − | Some spans to act as a hamburger. | + | Some spans to act as a hamburger |
| + | # See this link for a Font Awesome Menu icon: https://www.w3resource.com/icon/font-awesome/web-application-icons/bars.php | ||
--> | --> | ||
<!-- <div> --> | <!-- <div> --> | ||
| Line 350: | Line 360: | ||
<!--Tap Menu --> | <!--Tap Menu --> | ||
<div style="padding: 10px 0px 0px 0px; border-right: 2px solid #ededed"> | <div style="padding: 10px 0px 0px 0px; border-right: 2px solid #ededed"> | ||
| − | + | ||
<div style="text-align:right; margin-top:-31px; margin-bottom: 15px; padding-right: 5px"> | <div style="text-align:right; margin-top:-31px; margin-bottom: 15px; padding-right: 5px"> | ||
| − | <button onclick="expandSidebar()" style="cursor:pointer; outline: none; border-width:0px"> <i id="expandSidebar-icon" class="fa fa-arrow-right button-top" aria-hidden="true"></i> </button> | + | <button onclick="expandSidebar()" style="cursor:pointer; outline: none; border-width:0px"> <i id="expandSidebar-icon" class="fa fa-arrow-right button-top" aria-hidden="true"></i> </button> |
</div> | </div> | ||
| − | + | ||
<div id="container-button-tap" style="margin-top:-9px;"> | <div id="container-button-tap" style="margin-top:-9px;"> | ||
<button id="button-pe" class="button izquierda tablink bottom-selected" onclick="openCity(event,'PE')" > <i class="fas fa-atom"> </i> </button> | <button id="button-pe" class="button izquierda tablink bottom-selected" onclick="openCity(event,'PE')" > <i class="fas fa-atom"> </i> </button> | ||
| − | <button id="button-menu" class="button izquierda tablink" onclick="openCity(event,'Menu')" > | + | <button id="button-menu" class="button izquierda tablink" onclick="openCity(event,'Menu')" > <i class="fas fa-ellipsis-v"></i> </button> |
| + | <button id="button-others" class="button izquierda tablink" onclick="openCity(event,'Others')"> <i class="fas fa-yin-yang"> </i> </button> | ||
<button id="button-tools" class="button izquierda tablink" onclick="openCity(event,'Tools')" > <i class="fas fa-tools"></i> </button> | <button id="button-tools" class="button izquierda tablink" onclick="openCity(event,'Tools')" > <i class="fas fa-tools"></i> </button> | ||
| − | + | <!-- <button id="button-others" class="button derecha tablink" onclick="openCity(event,'Others')"> <i class="fas fa-info"> </i> </button> --> | |
| − | <!-- <button id="button-others" class="button derecha tablink" onclick="openCity(event,'Others')"> <i class="fas fa-info"> </i> </button> | + | <!-- <button id="button-menu" class="button centrar tablink" onclick="openCity(event,'Menu')" > <i class="fas fa-tools"></i> </button> --> |
| − | <!-- <button id="button-menu" class="button centrar tablink" onclick="openCity(event,'Menu')" > | ||
</div> | </div> | ||
<div id="PE" class="area city"> | <div id="PE" class="area city"> | ||
<div style="overflow-y: scroll; height: 100vh !important; background: #e3e3e8; margin-top:0px; padding:8px 5px 0px 0px;"> | <div style="overflow-y: scroll; height: 100vh !important; background: #e3e3e8; margin-top:0px; padding:8px 5px 0px 0px;"> | ||
| − | <div id="sectionPure" style="margin-bottom:73px; margin-top: | + | <div id="sectionPure" style="margin-bottom:73px; margin-top:7.5px" > {{#lst:Mis páginas|formal_natural_and_applied_sciences0}}</div> |
| − | <div id="sectionSocial" style="margin-bottom:55px; margin-top:2px" | + | <div id="sectionSocial" style="margin-bottom:55px; margin-top:2px" > {{#lst:Mis páginas|social_sciences0}}</div> |
| − | <div id="sectionMusic" style="margin-bottom:200px; margin-top:2px" | + | <div id="sectionMusic" style="margin-bottom:200px; margin-top:2px" > {{#lst:Mis páginas|musica0}}</div> |
</div> | </div> | ||
</div> | </div> | ||
| Line 379: | Line 389: | ||
</div> | </div> | ||
</div> | </div> | ||
| − | + | ||
<div id="Tools" class="area city" style="display:none"> | <div id="Tools" class="area city" style="display:none"> | ||
| − | <div style="overflow-y: scroll; height: 100vh !important; background: #e3e3e8; margin-top:0px; padding:8px 5px 0px 0px;"> | + | <div style="overflow-y: scroll; height: 100vh !important; background: #e3e3e8; margin-top:0px; padding:8px 5px 0px 0px;"> |
| − | <div id="MediawikiHelp0-inter1" style="margin-bottom: 200px; margin-top: 12px;" > </div> | + | <div id="MediawikiHelp0-inter1" style="margin-bottom: 200px; margin-top: 12px;" > </div> |
| − | <!-- <div id="sectionBase" style="margin-bottom: 200px; margin-top: 10px;" > {{#lst:My MediaWiki help|MediawikiHelp0}}</div> --> | + | <!-- <div id="sectionBase" style="margin-bottom: 200px; margin-top: 10px;" > {{#lst:My MediaWiki help|MediawikiHelp0}}</div> --> |
</div> | </div> | ||
</div> | </div> | ||
| − | <div id="Others" class="area city" style="display:none"> | + | <div id="Others" class="area city" style="display:none;"> |
| − | < | + | <div style="overflow-y: scroll; height: 100vh !important; background: #e3e3e8; padding:0px 1px 0px 0px;"> |
| + | <div id="Desktop-inter1" > | ||
| + | <div id="desktop-1-titulo-inter" class="text-1-1"> Here will be inserted the title... </div> | ||
| + | <div id="Desktop-inter2" > | ||
| + | Here will be inserted the table... | ||
| + | </div> | ||
| + | </div> | ||
| + | </div> | ||
</div> | </div> | ||
</div> | </div> | ||
| Line 401: | Line 418: | ||
</div> | </div> | ||
</nav> | </nav> | ||
| − | + | ||
| − | + | ||
<script> | <script> | ||
| − | + | ||
function openCity(evt, cityName) { | function openCity(evt, cityName) { | ||
var i, x, tablinks; | var i, x, tablinks; | ||
| Line 417: | Line 434: | ||
document.getElementById(cityName).style.display = "block"; | document.getElementById(cityName).style.display = "block"; | ||
evt.currentTarget.className += " bottom-selected"; | evt.currentTarget.className += " bottom-selected"; | ||
| − | + | ||
if (cityName == "PE") { | if (cityName == "PE") { | ||
| − | $(".fa-atom").css('font-size', '21px') | + | $("#menuToggle .fa-atom").css('font-size', '21px') |
| − | $(".fa-ellipsis-v").css('font-size','18px') | + | $("#menuToggle .fa-ellipsis-v").css('font-size','18px') |
| − | $(".fa- | + | $("#menuToggle .fa-yin-yang").css('font-size', '19px') |
| − | $(".fa-tools").css('font-size', '17px') | + | $("#menuToggle .fa-tools").css('font-size', '17px') |
}else if (cityName == "Menu") { | }else if (cityName == "Menu") { | ||
| − | $(".fa-atom").css('font-size', '19px') | + | $("#menuToggle .fa-atom").css('font-size', '19px') |
| − | $(".fa-ellipsis-v").css('font-size','20px') | + | $("#menuToggle .fa-ellipsis-v").css('font-size','20px') |
| − | $(".fa- | + | $("#menuToggle .fa-yin-yang").css('font-size', '19px') |
| − | $(".fa-tools").css('font-size', '17px') | + | $("#menuToggle .fa-tools").css('font-size', '17px') |
}else if (cityName == "Others") { | }else if (cityName == "Others") { | ||
| − | $(".fa-atom").css('font-size', '19px') | + | $("#menuToggle .fa-atom").css('font-size', '19px') |
| − | $(".fa-ellipsis-v").css('font-size','18px') | + | $("#menuToggle .fa-ellipsis-v").css('font-size','18px') |
| − | $(".fa- | + | $("#menuToggle .fa-yin-yang").css('font-size', '21px') |
| − | $(".fa-tools").css('font-size', '17px') | + | $("#menuToggle .fa-tools").css('font-size', '17px') |
}else { | }else { | ||
| − | $(".fa-atom").css('font-size', '19px') | + | $("#menuToggle .fa-atom").css('font-size', '19px') |
| − | $(".fa-ellipsis-v").css('font-size','18px') | + | $("#menuToggle .fa-ellipsis-v").css('font-size','18px') |
| − | $(".fa- | + | $("#menuToggle .fa-yin-yang").css('font-size', '19px') |
| − | $(".fa-tools").css('font-size', '19px') | + | $("#menuToggle .fa-tools").css('font-size', '19px') |
} | } | ||
} | } | ||
| − | + | ||
function myFunction() { | function myFunction() { | ||
| Line 456: | Line 473: | ||
} | } | ||
} | } | ||
| − | + | ||
function checkUser(){ | function checkUser(){ | ||
if ( document.getElementById('pt-userpage') != null ) { | if ( document.getElementById('pt-userpage') != null ) { | ||
if ( document.getElementById('pt-userpage').getElementsByTagName('a')[0].innerText == "Adelo Vieira" ){ | if ( document.getElementById('pt-userpage').getElementsByTagName('a')[0].innerText == "Adelo Vieira" ){ | ||
| − | $('.oculto').css('display','block') | + | if (show_oculto == true) { |
| + | $('.oculto').css('display','block') | ||
| + | } | ||
$('.link-hidden').css('pointer-events','auto') | $('.link-hidden').css('pointer-events','auto') | ||
| + | $('#p-logo a').attr('href','/view/Mis_páginas'); | ||
// $('body').css('background','red'); | // $('body').css('background','red'); | ||
}else{ | }else{ | ||
| Line 467: | Line 487: | ||
} | } | ||
}else{ | }else{ | ||
| + | $("#menuToggle #button-others").css('pointer-events','none') | ||
// $('body').css('background','blue'); | // $('body').css('background','blue'); | ||
// $('#hideThis').show(); | // $('#hideThis').show(); | ||
} | } | ||
} | } | ||
| − | + | ||
function removeCSS() { | function removeCSS() { | ||
$('#menuToggle li').css({'margin-bottom':'','margin-top':''}) | $('#menuToggle li').css({'margin-bottom':'','margin-top':''}) | ||
| Line 479: | Line 500: | ||
// $('#mis-paginas ul ').css({'margin-bottom':'','margin-top':''}) | // $('#mis-paginas ul ').css({'margin-bottom':'','margin-top':''}) | ||
} | } | ||
| − | + | ||
function collapseSome() { | function collapseSome() { | ||
$('#menuToggle .keep-abierto').removeClass("mw-collapsed"); | $('#menuToggle .keep-abierto').removeClass("mw-collapsed"); | ||
$("#menuToggle .mw-collapsible").not('.keep-abierto').addClass("mw-collapsed"); | $("#menuToggle .mw-collapsible").not('.keep-abierto').addClass("mw-collapsed"); | ||
} | } | ||
| − | + | ||
function expandSidebar() { | function expandSidebar() { | ||
var menuWidth = parseInt(window.getComputedStyle(document.getElementById("menu")).width) | var menuWidth = parseInt(window.getComputedStyle(document.getElementById("menu")).width) | ||
| Line 492: | Line 513: | ||
$(".titulo1-marco-twolines").addClass("titulo1-marco-oneline") | $(".titulo1-marco-twolines").addClass("titulo1-marco-oneline") | ||
$(".titulo1MarcoTwolines").removeClass("titulo1-marco-twolines") | $(".titulo1MarcoTwolines").removeClass("titulo1-marco-twolines") | ||
| − | $("#sectionPure").css({'margin-bottom': '30px', 'margin-top':' | + | $("#sectionPure").css({'margin-bottom': '30px', 'margin-top':'12px'}) |
$("#sectionSocial").css({'margin-bottom':'30px', 'margin-top':'2px'}) | $("#sectionSocial").css({'margin-bottom':'30px', 'margin-top':'2px'}) | ||
$("#space-end-pure").css({'margin-bottom':'85px'}) | $("#space-end-pure").css({'margin-bottom':'85px'}) | ||
| Line 504: | Line 525: | ||
$(".titulo1-marco-twolines").removeClass("titulo1MarcoTwolines") | $(".titulo1-marco-twolines").removeClass("titulo1MarcoTwolines") | ||
$(".titulo1-marco-twolines").removeClass("titulo1-marco-oneline") | $(".titulo1-marco-twolines").removeClass("titulo1-marco-oneline") | ||
| − | $("#sectionPure").css({'margin-bottom': '73px', 'margin-top':' | + | $("#sectionPure").css({'margin-bottom': '73px', 'margin-top':'7.5px'}) |
$("#sectionSocial").css({'margin-bottom':'55px', 'margin-top':' 2px'}) | $("#sectionSocial").css({'margin-bottom':'55px', 'margin-top':' 2px'}) | ||
$("#space-end-pure").css({'margin-bottom':'80px'}) | $("#space-end-pure").css({'margin-bottom':'80px'}) | ||
| Line 513: | Line 534: | ||
} | } | ||
} | } | ||
| − | + | ||
$("#inputButton").hover(function(){ | $("#inputButton").hover(function(){ | ||
| Line 521: | Line 542: | ||
}); | }); | ||
| − | $("#button-pe").hover(function(){ | + | $("#menuToggle #button-pe").hover(function(){ |
| − | $(".fa-atom").css('font-size', '21px') | + | $("#menuToggle .fa-atom").css('font-size', '21px') |
}, function(){ | }, function(){ | ||
if ( $(this).hasClass("bottom-selected") ) { | if ( $(this).hasClass("bottom-selected") ) { | ||
| − | $(".fa-atom").css('font-size', '21px') | + | $("#menuToggle .fa-atom").css('font-size', '21px') |
}else{ | }else{ | ||
| − | $(".fa-atom").css('font-size', '19px') | + | $("#menuToggle .fa-atom").css('font-size', '19px') |
} | } | ||
}); | }); | ||
| − | + | ||
| − | $("#button-menu").hover(function(){ | + | $("#menuToggle #button-menu").hover(function(){ |
| − | $(".fa-ellipsis-v").css('font-size', '20px') | + | $("#menuToggle .fa-ellipsis-v").css('font-size', '20px') |
}, function(){ | }, function(){ | ||
if ( $(this).hasClass("bottom-selected") ) { | if ( $(this).hasClass("bottom-selected") ) { | ||
| − | $(".fa-ellipsis-v").css('font-size', '20px') | + | $("#menuToggle .fa-ellipsis-v").css('font-size', '20px') |
}else{ | }else{ | ||
| − | $(".fa-ellipsis-v").css('font-size', '18px') | + | $("#menuToggle .fa-ellipsis-v").css('font-size', '18px') |
} | } | ||
}); | }); | ||
| − | + | ||
| − | $("#button-others").hover(function(){ | + | $("#menuToggle #button-others").hover(function(){ |
| − | $(".fa- | + | $("#menuToggle .fa-yin-yang").css('font-size', '21px') |
}, function(){ | }, function(){ | ||
if ( $(this).hasClass("bottom-selected") ) { | if ( $(this).hasClass("bottom-selected") ) { | ||
| − | $(".fa- | + | $("#menuToggle .fa-yin-yang").css('font-size', '21px') |
}else{ | }else{ | ||
| − | $(".fa- | + | $("#menuToggle .fa-yin-yang").css('font-size', '19px') |
} | } | ||
}); | }); | ||
| − | + | ||
$("#button-tools").hover(function() { | $("#button-tools").hover(function() { | ||
| − | $(".fa-tools").css('font-size', '19px') | + | $("#menuToggle .fa-tools").css('font-size', '19px') |
}, function() { | }, function() { | ||
if ( $(this).hasClass("bottom-selected") ) { | if ( $(this).hasClass("bottom-selected") ) { | ||
| − | $(".fa-tools").css('font-size', '19px') | + | $("#menuToggle .fa-tools").css('font-size', '19px') |
}else{ | }else{ | ||
| − | $(".fa-tools").css('font-size', '17px') | + | $("#menuToggle .fa-tools").css('font-size', '17px') |
} | } | ||
}); | }); | ||
| − | + | ||
function resaltarSection() { | function resaltarSection() { | ||
// $(".mw-collapsible-text").hover(function() { | // $(".mw-collapsible-text").hover(function() { | ||
| Line 583: | Line 604: | ||
}); | }); | ||
} | } | ||
| − | + | ||
// $(".mw-collapsible").hover(function(){ | // $(".mw-collapsible").hover(function(){ | ||
// $(this).children(".resaltar").first().css({'cssText':'background: red !important'}) | // $(this).children(".resaltar").first().css({'cssText':'background: red !important'}) | ||
| Line 589: | Line 610: | ||
// $(this).children(".resaltar").first().css({'cssText':'background: reset'}) | // $(this).children(".resaltar").first().css({'cssText':'background: reset'}) | ||
// }); | // }); | ||
| − | + | ||
// $(".mw-collapsible").hover(function(){ | // $(".mw-collapsible").hover(function(){ | ||
// $(".resaltar").css({'cssText':'background: red !important'}) | // $(".resaltar").css({'cssText':'background: red !important'}) | ||
| Line 595: | Line 616: | ||
// $(".resaltar").css('background', 'grey') | // $(".resaltar").css('background', 'grey') | ||
// }); | // }); | ||
| − | + | ||
| − | + | ||
// function collapseAll() { | // function collapseAll() { | ||
// $('.mw-collapsible').on( "click", "#aver", function() { | // $('.mw-collapsible').on( "click", "#aver", function() { | ||
| Line 602: | Line 623: | ||
// }); | // }); | ||
// } | // } | ||
| − | + | ||
// function collapseAll() { | // function collapseAll() { | ||
// $(".mw-collapsible").addClass("mw-collapsed").reload(); | // $(".mw-collapsible").addClass("mw-collapsed").reload(); | ||
// $( ".mw-collapsible" ).load(window.location.href + " .mw-collapsible" ); | // $( ".mw-collapsible" ).load(window.location.href + " .mw-collapsible" ); | ||
// } | // } | ||
| − | + | ||
// $(document).ready(function(){ | // $(document).ready(function(){ | ||
// $("button").click(function(){ | // $("button").click(function(){ | ||
| Line 613: | Line 634: | ||
// }); | // }); | ||
// }); | // }); | ||
| − | + | ||
// $(document).on('click', '.DoFirst', function() { | // $(document).on('click', '.DoFirst', function() { | ||
// $('#totalItems, #enteredItems').keyup(function(){ | // $('#totalItems, #enteredItems').keyup(function(){ | ||
| Line 620: | Line 641: | ||
// collapseAll() | // collapseAll() | ||
// }); | // }); | ||
| − | + | ||
// $(document).on( function() { | // $(document).on( function() { | ||
// $('#totalItems, #enteredItems').keyup(function(){ | // $('#totalItems, #enteredItems').keyup(function(){ | ||
| Line 627: | Line 648: | ||
// collapseAll() | // collapseAll() | ||
// }); | // }); | ||
| − | + | ||
// function moveSidebarToBody() { | // function moveSidebarToBody() { | ||
// $("#MySidebar").appendTo("#pt-userpage"); | // $("#MySidebar").appendTo("#pt-userpage"); | ||
// // document.body.appendChild(document.getElementById('MySidebar')) | // // document.body.appendChild(document.getElementById('MySidebar')) | ||
// } | // } | ||
| − | + | ||
// Shortkey: https://www.techiedelight.com/create-keyboard-shortcuts-with-javascript-jquery-hotkeys-mousetrap-library/ | // Shortkey: https://www.techiedelight.com/create-keyboard-shortcuts-with-javascript-jquery-hotkeys-mousetrap-library/ | ||
// For some reason, in MediaWiki pages, the && operator is not being interpreted by the web browser | // For some reason, in MediaWiki pages, the && operator is not being interpreted by the web browser | ||
// as such in «keydown» functions. The web browser is reading «&», instead of «&&» which generates a systax error. | // as such in «keydown» functions. The web browser is reading «&», instead of «&&» which generates a systax error. | ||
// To work around this problem I just broke the function using «2» if statements: | // To work around this problem I just broke the function using «2» if statements: | ||
| − | + | ||
// $(document).keydown(function(event) { | // $(document).keydown(function(event) { | ||
// if ( (event.ctrlKey) && (event.which === 88) ) { | // if ( (event.ctrlKey) && (event.which === 88) ) { | ||
| Line 644: | Line 665: | ||
// } | // } | ||
// }); | // }); | ||
| − | + | ||
$(document).keydown(function(event) { | $(document).keydown(function(event) { | ||
if ( event.ctrlKey ) { | if ( event.ctrlKey ) { | ||
| Line 658: | Line 679: | ||
e.preventDefault() | e.preventDefault() | ||
} | } | ||
| − | + | ||
// if ( event.which === 89 ) { | // if ( event.which === 89 ) { | ||
// $(document).on( function() { | // $(document).on( function() { | ||
| Line 667: | Line 688: | ||
// }); | // }); | ||
// } | // } | ||
| − | + | ||
} | } | ||
| Line 675: | Line 696: | ||
} | } | ||
} | } | ||
| − | + | ||
}); | }); | ||
| − | + | ||
// Esta es otra forma de hacerlo | // Esta es otra forma de hacerlo | ||
// document.addEventListener("keydown", function(event) { | // document.addEventListener("keydown", function(event) { | ||
| Line 685: | Line 706: | ||
// } | // } | ||
// }); | // }); | ||
| − | + | ||
| − | + | ||
$(document).ready( function() { | $(document).ready( function() { | ||
$('#totalItems, #enteredItems').keyup(function(){ | $('#totalItems, #enteredItems').keyup(function(){ | ||
| Line 692: | Line 713: | ||
checkUser() | checkUser() | ||
removeCSS() | removeCSS() | ||
| − | + | ||
// This functions involved mw-collapsible, which has some problems when adding JS functionalities. So, to make sure | // This functions involved mw-collapsible, which has some problems when adding JS functionalities. So, to make sure | ||
// this function do what it has to do, we have to ensure that it runs when the DOM is ready. | // this function do what it has to do, we have to ensure that it runs when the DOM is ready. | ||
// Even inside «.ready()» is not working as expected (when we refresh the page, sometimes it works, sometimes it doesn't work). | // Even inside «.ready()» is not working as expected (when we refresh the page, sometimes it works, sometimes it doesn't work). | ||
// So we needed to execute it after a delay: | // So we needed to execute it after a delay: | ||
| − | setTimeout( function() { resaltarSection() }, | + | setTimeout( function() { resaltarSection() }, 3000 ); |
// setTimeout( function() { collapseSome() }, 5000 ); | // setTimeout( function() { collapseSome() }, 5000 ); | ||
}); | }); | ||
| Line 703: | Line 724: | ||
checkUser() | checkUser() | ||
removeCSS() | removeCSS() | ||
| − | setTimeout( function() { resaltarSection() }, | + | setTimeout( function() { resaltarSection() }, 3000 ); |
// setTimeout( function() { collapseSome() }, 5000 ); | // setTimeout( function() { collapseSome() }, 5000 ); | ||
}); | }); | ||
| − | + | ||
// $(document).ready( function() { | // $(document).ready( function() { | ||
// $('#totalItems, #enteredItems').keyup(function(){ | // $('#totalItems, #enteredItems').keyup(function(){ | ||
| Line 715: | Line 736: | ||
// // moveSidebarToBody() | // // moveSidebarToBody() | ||
// }); | // }); | ||
| − | + | ||
</script> | </script> | ||
}} | }} | ||
| + | |||
| + | |||
| + | <!-- Transclusion of pages that contain MW tags --> | ||
| − | |||
| − | |||
<div id="MediawikiHelp0-inter0" style="display:none"> | <div id="MediawikiHelp0-inter0" style="display:none"> | ||
| − | {{#lst:My MediaWiki help|MediawikiHelp0}} | + | {{#lst:My MediaWiki help|MediawikiHelp0}} |
</div> | </div> | ||
<html> | <html> | ||
<script> | <script> | ||
document.getElementById("MediawikiHelp0-inter1").innerHTML = document.getElementById("MediawikiHelp0-inter0").innerHTML | document.getElementById("MediawikiHelp0-inter1").innerHTML = document.getElementById("MediawikiHelp0-inter0").innerHTML | ||
| + | </script> | ||
| + | </html> | ||
| + | |||
| + | |||
| + | <div id="Desktop-inter0" style="display:none"> | ||
| + | {{#lst:Desktop|Desktop0}} | ||
| + | </div> | ||
| + | <html> | ||
| + | <style> | ||
| + | #Desktop-inter1 .desktop-1-1 { | ||
| + | border: 0px solid red; | ||
| + | } | ||
| + | #Desktop-inter1 .desktop-2-1 { | ||
| + | background-color: #e3e3e8 !important; | ||
| + | border: 0px solid green !important; | ||
| + | padding-top: 0px !important; | ||
| + | padding-bottom: 40px; | ||
| + | } | ||
| + | #Desktop-inter1 .desktop-cuadro { | ||
| + | border: 0px solid white !important; | ||
| + | background-color: white !important; | ||
| + | } | ||
| + | #Desktop-inter1 .text-2-1 { | ||
| + | margin-bottom: -50px; | ||
| + | } | ||
| + | #Desktop-inter1 .nivel-3 li { | ||
| + | margin-bottom: -3px !important; | ||
| + | } | ||
| + | #Desktop-inter1 .nivel-3 ul { | ||
| + | margin-bottom: -20px !important; | ||
| + | } | ||
| + | #Desktop-inter1 .nivel-3 .first-li { | ||
| + | margin-top: 15px !important; | ||
| + | } | ||
| + | #Desktop-inter1 a { | ||
| + | overflow-wrap: break-word !important; | ||
| + | } | ||
| + | #Desktop-inter1 .text-1-1 { | ||
| + | font: 700 18px / 27.3px "Linux Libertine", Georgia, Times, serif; | ||
| + | background-color: #4081de; | ||
| + | vertical-align: center; | ||
| + | height: 46.6667px; | ||
| + | line-height: 53px; | ||
| + | margin: 7px -1px 50px 0px !important; | ||
| + | padding-left: 10px; | ||
| + | } | ||
| + | #Desktop-inter1 .desktop-2-1-area { | ||
| + | margin-left: -5px; | ||
| + | } | ||
| + | #Desktop-inter2 { | ||
| + | margin-top: -27px !important; | ||
| + | margin-bottom: 200px; | ||
| + | padding-left: 4px; | ||
| + | padding-right: 5px; | ||
| + | } | ||
| + | #Desktop-inter2 .antes-collapsible { | ||
| + | margin-bottom: 30px !important; | ||
| + | } | ||
| + | #Desktop-inter2 .espacio { | ||
| + | margin-left: -20px !important; | ||
| + | } | ||
| + | </style> | ||
| + | <script> | ||
| + | // This allows using the whole table by using «display: none» on the sections that won't be shown: | ||
| + | // document.getElementById("Desktop-inter2").innerHTML = document.getElementById("Desktop-inter0").innerHTML | ||
| + | // $(".invisible").not('.desktop-1').css('display','none') | ||
| + | // $("#Desktop-inter1 #container-desktop-menu").css('display','none') | ||
| + | // $("#Desktop-inter1 #desktop p").addClass("desplaza-2") | ||
| + | // $("#Desktop-inter1 .desktop-1-1").addClass("desplaza-2") | ||
| + | // $("#Desktop-inter1 .text-1-1").removeClass("desplaza-2") | ||
| + | |||
| + | // This is by taking only the section I need: | ||
| + | document.getElementById("desktop-1-titulo-inter").innerHTML = document.getElementById("desktop-1-titulo").innerHTML | ||
| + | document.getElementById("Desktop-inter2").innerHTML = document.getElementById("desktop-main").innerHTML | ||
| + | |||
| + | $("#Desktop-inter1 p").addClass("desplaza-2") | ||
| + | $("#Desktop-inter1 .desktop-1-1").addClass("desplaza-2") | ||
| + | $("#Desktop-inter1 .text-1-1").removeClass("desplaza-2") | ||
| + | |||
| + | $("#desktop-1-titulo-inter").wrap('<a href="Desktop" />'); | ||
</script> | </script> | ||
</html> | </html> | ||
Latest revision as of 16:58, 26 June 2022
