IdlePixel+ Plugin Paneller

Greasy Fork is available in English.

IdlePixel+ Plugin Paneller

Library which creates a modal for opening plugin panels.

当前为 2024-04-08 提交的版本，查看最新版本。

此脚本不应直接安装。它是供其他脚本使用的外部库，要使用该库请加入元指令 // @require https://update.greasyfork.icu/scripts/491983/1356644/IdlePixel%2B%20Plugin%20Paneller.js

提问、发表评价或者举报此脚本。

换行

// ==UserScript==
// @name         IdlePixel+ Plugin Paneller
// @namespace    lbtechnology.info
// @version      1.0.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.addStyles()
			this.createModal()
		}
	
		addStyles(){
			let backgroundColour
			let textColour
	
			if ("ui-tweaks" in IdlePixelPlus.plugins){
				backgroundColour = IdlePixelPlus.plugins["ui-tweaks"].config["color-chat-area"]
				textColour = IdlePixelPlus.plugins["ui-tweaks"].config["font-color-chat-area"]
			} else {
				backgroundColour = "white"
				textColour = "black"
			}
	
			$("head").append(`
				<style id="styles-paneller">
					#panellerModalInner {
					  background-color: ${backgroundColour};
					  color: ${textColour};
					}

					#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;
					}
				</style>
			`)
		}
	
		registerPanel(panelName, displayName){
			this.registered_panels.push({
				name: panelName,
				display: displayName
			})
		}
	
		createModal(){
				const modalString = `
					<div id="panellerModal" class="modal fade" role="dialog" tabindex="-1"">
					    <div class="modal-dialog modal-dialog-centered" role="document">
					        <div id="panellerModalInner" class="modal-content">
								<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", "IdlePixelPlus.setPanel(this.getAttribute('data-panelName'))")
		}
	}

	// Add to window and init
	window.Paneller = new Paneller();
})();