☰

IdlePixel+ Plugin Paneller

Library which creates a modal for opening plugin panels.

目前为 2024-04-10 提交的版本。查看 最新版本。

此脚本不应直接安装，它是一个供其他脚本使用的外部库。如果您需要使用该库，请在脚本元属性加入：// @require https://update.gf.qytechs.cn/scripts/491983/1357951/IdlePixel%2B%20Plugin%20Paneller.js 

  1. // ==UserScript==
  2. // @name			IdlePixel+ Plugin Paneller
  3. // @namespace		lbtechnology.info
  4. // @version			1.0.1
  5. // @description		Library which creates a modal for opening plugin panels.
  6. // @author			Lux-Ferre
  7. // @license			MIT
  8. // @match			*://idle-pixel.com/login/play*
  9. // @grant			none
  10. // ==/UserScript==
  11.  
  12. (function() {
  13. 	if(window.Paneller) {
  14. 		// already loaded
  15. 		return;
  16. 	}
  17.  
  18. 	class Paneller {
  19. 		constructor() {
  20. 			this.registered_panels = []
  21. 			this.uit_found = 0
  22. 			
  23. 			this.addStyles()
  24. 			this.createModal()
  25. 			this.registerPanel("varviewer", "Var Viewer")
  26. 			
  27. 			const onlineCount = $(".game-top-bar .gold:not(#top-bar-admin-link)");
  28. 			onlineCount.before(`<a href="#" class="hover float-end link-no-decoration" id="panellerLink">Panel Selector</a>`);
  29. 			
  30. 			$("#panellerLink").attr("onclick", "event.preventDefault(); Paneller.showModal()")
  31. 		}
  32. 	
  33. 		addStyles(){
  34. 			$("head").append(`
  35. 				<style id="styles-paneller">
  36. 					#panellerLink {
  37. 						margin: 0 20px;
  38. 					}
  39. 					.panellerModalInner {
  40. 						background-color: white;
  41. 						color: black;
  42. 					}
  43.  
  44. 					#panellerModalHeader {
  45. 						padding: calc(var(--bs-modal-padding) - var(--bs-modal-header-gap) * .5);
  46. 						background-color: var(--bs-modal-header-bg);
  47. 						border-bottom: var(--bs-modal-header-border-width) solid var(--bs-modal-header-border-color);
  48. 						border-top-right-radius: var(--bs-modal-inner-border-radius);
  49. 						border-top-left-radius: var(--bs-modal-inner-border-radius);
  50. 					}
  51.  
  52. 					#panellerModal .modal-body {
  53. 						overflow-y: auto;
  54. 					}
  55. 															 
  56. 					.panellerModalButton {
  57. 						background-color: RGBA(1, 150, 150, 0.5);
  58. 						margin-bottom: 2px;
  59. 						cursor: pointer;
  60. 					}
  61. 			
  62. 					.panellerModalText {
  63. 						margin-left: 20px;
  64. 					}
  65. 					#panellerModalDialogue {
  66. 					    margin-top: 20vh;
  67. 					}
  68. 				</style>
  69. 			`)
  70. 		}
  71. 	
  72. 		registerPanel(panelName, displayName){
  73. 			this.registered_panels.push({
  74. 				name: panelName,
  75. 				display: displayName
  76. 			})
  77. 		}
  78. 	
  79. 		createModal(){
  80. 				const modalString = `
  81. 					<div id="panellerModal" class="modal fade" role="dialog" tabindex="-1"">
  82. 						<div id="panellerModalDialogue" class="modal-dialog" role="document">
  83. 							<div id="panellerModalInner" class="modal-content panellerModalInner">
  84. 								<div id="panellerModalHeader" class="modal-header text-center">
  85. 									<h3 class="modal-title w-100"><u>Panel Selector</u></h3>
  86. 								</div>
  87. 								<div class="modal-body">
  88. 									<div id="panellerModalList" class="overflow-auto"></div>
  89. 								</div>
  90. 							</div>
  91. 						</div>
  92. 					</div>
  93. 				`
  94. 	
  95. 			const modalElement = $.parseHTML(modalString)
  96. 			$(document.body).append(modalElement)
  97. 		}
  98. 	
  99. 		populateModal(){
  100. 			const panellerModalList = $("#panellerModalList")
  101. 			panellerModalList.empty()
  102. 			
  103. 			this.registered_panels.forEach(panel => {
  104. 				const newItemString = `<div class="d-flex justify-content-between rounded-pill panellerModalButton" data-panelName="${panel.name}"><span class="panellerModalText">${panel.display}</span></div>`
  105. 				const newItemElement = $.parseHTML(newItemString)
  106. 				panellerModalList.append(newItemElement)
  107. 			})
  108.  
  109. 			$(".panellerModalButton").attr("onclick", "Paneller.switchPanel(this.getAttribute('data-panelName'))")
  110. 		}
  111. 	
  112. 		showModal(){
  113. 			if (this.uit_found === 0){
  114. 				if ("ui-tweaks" in IdlePixelPlus.plugins){
  115. 					this.uit_found = 1
  116. 					const backgroundColour = IdlePixelPlus.plugins["ui-tweaks"].config["color-chat-area"]
  117. 					const textColour = IdlePixelPlus.plugins["ui-tweaks"].config["font-color-chat-area"]
  118. 					$("head").append(`
  119. 						<style id="styles-paneller-annex">
  120. 							.panellerModalInnerUIT {
  121. 								background-color: ${backgroundColour};
  122. 								color: ${textColour};
  123. 							}
  124. 						</style>
  125. 					`)
  126. 					$("#panellerModalInner").removeClass("panellerModalInner").addClass("panellerModalInnerUIT")
  127. 				} else {
  128. 					this.uit_found = -1
  129. 				}
  130. 			}
  131. 			this.populateModal()
  132. 			
  133. 			document.body.scrollTop = document.documentElement.scrollTop = 0;
  134. 			$('#panellerModal').modal('show')			
  135. 		}
  136. 	
  137. 		switchPanel(panelName){
  138. 			IdlePixelPlus.setPanel(panelName)
  139. 			$('#panellerModal').modal('hide')
  140. 		}
  141. 	}
  142.  
  143. 	// Add to window and init
  144. 	window.Paneller = new Paneller();
  145. })();

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

镜像地址随时可能被墙，建议加群获取最新地址

加入Q群

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址