☰

IdlePixel+ Plugin Paneller

Library which creates a modal for opening plugin panels.

Script này sẽ không được không được cài đặt trực tiếp. Nó là một thư viện cho các script khác để bao gồm các chỉ thị meta // @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();
})();