Library which creates a modal for opening plugin panels.
Dieses Skript sollte nicht direkt installiert werden. Es handelt sich hier um eine Bibliothek für andere Skripte, welche über folgenden Befehl in den Metadaten eines Skriptes eingebunden wird // @require https://update.greasyfork.org/scripts/491983/1368960/IdlePixel%2B%20Plugin%20Paneller.js
// ==UserScript==
// @name IdlePixel+ Plugin Paneller
// @namespace lbtechnology.info
// @version 1.1.0
// @description Library which creates a modal for opening plugin panels.
// @author Lux-Ferre
// @license MIT
// @match *://idle-pixel.com/login/play*
// @grant none
// ==/UserScript==
(function() {
if(window.Paneller) {
// already loaded
return;
}
class Paneller {
constructor() {
this.registered_panels = []
this.uit_found = 0
this.addStyles()
this.createModal()
this.registerPanel("varviewer", "Var Viewer")
const onlineCount = $(".game-top-bar .gold:not(#top-bar-admin-link)");
onlineCount.before(`<a href="#" class="hover float-end link-no-decoration" id="panellerLink">Panel Selector</a>`);
$("#panellerLink").attr("onclick", "event.preventDefault(); Paneller.showModal()")
}
addStyles(){
$("head").append(`
<style id="styles-paneller">
#panellerLink {
margin: 0 20px;
}
.panellerModalInner {
background-color: white;
color: black;
}
#panellerModalHeader {
padding: calc(var(--bs-modal-padding) - var(--bs-modal-header-gap) * .5);
background-color: var(--bs-modal-header-bg);
border-bottom: var(--bs-modal-header-border-width) solid var(--bs-modal-header-border-color);
border-top-right-radius: var(--bs-modal-inner-border-radius);
border-top-left-radius: var(--bs-modal-inner-border-radius);
}
#panellerModal .modal-body {
overflow-y: auto;
}
.panellerModalButton {
background-color: RGBA(1, 150, 150, 0.5);
margin-bottom: 2px;
cursor: pointer;
}
.panellerModalText {
margin-left: 20px;
}
#panellerModalDialogue {
margin-top: 20vh;
}
</style>
`)
}
registerPanel(panelName, displayName, target="panel"){
this.registered_panels.push({
name: panelName,
display: displayName,
target: target
})
}
createModal(){
const modalString = `
<div id="panellerModal" class="modal fade" role="dialog" tabindex="-1"">
<div id="panellerModalDialogue" class="modal-dialog" role="document">
<div id="panellerModalInner" class="modal-content panellerModalInner">
<div id="panellerModalHeader" class="modal-header text-center">
<h3 class="modal-title w-100"><u>Panel Selector</u></h3>
</div>
<div class="modal-body">
<div id="panellerModalList" class="overflow-auto"></div>
</div>
</div>
</div>
</div>
`
const modalElement = $.parseHTML(modalString)
$(document.body).append(modalElement)
}
populateModal(){
const panellerModalList = $("#panellerModalList")
panellerModalList.empty()
this.registered_panels.forEach(panel => {
const newItemString = `<div class="d-flex justify-content-between rounded-pill panellerModalButton" data-panelName="${panel.name}"><span class="panellerModalText">${panel.display}</span></div>`
const newItemElement = $.parseHTML(newItemString)
panellerModalList.append(newItemElement)
})
$(".panellerModalButton").attr("onclick", "Paneller.switchPanel(this.getAttribute('data-panelName'))")
}
showModal(){
if (this.uit_found === 0){
if ("ui-tweaks" in IdlePixelPlus.plugins){
this.uit_found = 1
const backgroundColour = IdlePixelPlus.plugins["ui-tweaks"].config["color-chat-area"]
const textColour = IdlePixelPlus.plugins["ui-tweaks"].config["font-color-chat-area"]
$("head").append(`
<style id="styles-paneller-annex">
.panellerModalInnerUIT {
background-color: ${backgroundColour};
color: ${textColour};
}
</style>
`)
$("#panellerModalInner").removeClass("panellerModalInner").addClass("panellerModalInnerUIT")
} else {
this.uit_found = -1
}
}
this.populateModal()
document.body.scrollTop = document.documentElement.scrollTop = 0;
$('#panellerModal').modal('show')
}
switchPanel(panelName){
this.registered_panels.forEach(panel=>{
if(panel.name===panelName){
if(panel.target==="panel"){
IdlePixelPlus.setPanel(panelName)
} else {
panel.target.apply()
}
}
})
$('#panellerModal').modal('hide')
}
}
// Add to window and init
window.Paneller = new Paneller();
})();