☰

IdlePixel+ Plugin Paneller

Library which creates a modal for opening plugin panels.

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

  1. // ==UserScript==
  2. // @name			IdlePixel+ Plugin Paneller
  3. // @namespace		lbtechnology.info
  4. // @version			1.1.0
  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, target="panel"){
  73. 			this.registered_panels.push({
  74. 				name: panelName,
  75. 				display: displayName,
  76. 				target: target
  77. 			})
  78. 		}
  79. 	
  80. 		createModal(){
  81. 				const modalString = `
  82. 					<div id="panellerModal" class="modal fade" role="dialog" tabindex="-1"">
  83. 						<div id="panellerModalDialogue" class="modal-dialog" role="document">
  84. 							<div id="panellerModalInner" class="modal-content panellerModalInner">
  85. 								<div id="panellerModalHeader" class="modal-header text-center">
  86. 									<h3 class="modal-title w-100"><u>Panel Selector</u></h3>
  87. 								</div>
  88. 								<div class="modal-body">
  89. 									<div id="panellerModalList" class="overflow-auto"></div>
  90. 								</div>
  91. 							</div>
  92. 						</div>
  93. 					</div>
  94. 				`
  95. 	
  96. 			const modalElement = $.parseHTML(modalString)
  97. 			$(document.body).append(modalElement)
  98. 		}
  99. 	
  100. 		populateModal(){
  101. 			const panellerModalList = $("#panellerModalList")
  102. 			panellerModalList.empty()
  103. 			
  104. 			this.registered_panels.forEach(panel => {
  105. 				const newItemString = `<div class="d-flex justify-content-between rounded-pill panellerModalButton" data-panelName="${panel.name}"><span class="panellerModalText">${panel.display}</span></div>`
  106. 				const newItemElement = $.parseHTML(newItemString)
  107. 				panellerModalList.append(newItemElement)
  108. 			})
  109.  
  110. 			$(".panellerModalButton").attr("onclick", "Paneller.switchPanel(this.getAttribute('data-panelName'))")
  111. 		}
  112. 	
  113. 		showModal(){
  114. 			if (this.uit_found === 0){
  115. 				if ("ui-tweaks" in IdlePixelPlus.plugins){
  116. 					this.uit_found = 1
  117. 					const backgroundColour = IdlePixelPlus.plugins["ui-tweaks"].config["color-chat-area"]
  118. 					const textColour = IdlePixelPlus.plugins["ui-tweaks"].config["font-color-chat-area"]
  119. 					$("head").append(`
  120. 						<style id="styles-paneller-annex">
  121. 							.panellerModalInnerUIT {
  122. 								background-color: ${backgroundColour};
  123. 								color: ${textColour};
  124. 							}
  125. 						</style>
  126. 					`)
  127. 					$("#panellerModalInner").removeClass("panellerModalInner").addClass("panellerModalInnerUIT")
  128. 				} else {
  129. 					this.uit_found = -1
  130. 				}
  131. 			}
  132. 			this.populateModal()
  133. 			
  134. 			document.body.scrollTop = document.documentElement.scrollTop = 0;
  135. 			$('#panellerModal').modal('show')			
  136. 		}
  137. 	
  138. 		switchPanel(panelName){
  139. 			this.registered_panels.forEach(panel=>{
  140. 				if(panel.name===panelName){
  141. 					if(panel.target==="panel"){
  142. 						IdlePixelPlus.setPanel(panelName)
  143. 					} else {
  144. 						panel.target.apply()
  145. 					}
  146. 				}
  147. 			})
  148.  
  149. 			$('#panellerModal').modal('hide')
  150. 		}
  151. 	}
  152.  
  153. 	// Add to window and init
  154. 	window.Paneller = new Paneller();
  155. })();