Userscript that adds new quick actions button to the inventory modal on Neopets.
// ==UserScript==
// @name Neopets Inventory Quick Actions
// @namespace https://github.com/lsfgrd/neopets-inventory-quick-actions/
// @version 0.1
// @description Userscript that adds new quick actions button to the inventory modal on Neopets.
// @author Lauro Figueiredo
// @match https://www.neopets.com/inventory.phtml
// @icon https://www.google.com/s2/favicons?sz=64&domain=neopets.com
// @grant unsafeWindow
// @license MIT
// ==/UserScript==
(function () {
/*
Button colors:
red, yellow, blue, green, purple,
Actions:
<option value="safetydeposit">Put into your Safety Deposit Box</option>
<option value="donate">Donate Item</option>
<option value="drop">Discard Item</option>
<option value="stockshop">Put into your Shop</option>
<option value="stockgallery">Put into your Gallery</option>
<option value="give">Give to NeoFriend</option>
<option value="auction">Put up for Auction!</option>
*/
const buttonWrapper = () => {
const wrapperStyles = `
margin-top: 15px;
`;
const ribbonStyle = `
font-size: 24px !important;
display: block;
font-family: 'Cafeteria', 'Arial Bold', sans-serif;
text-align: left;
padding-left: 10px;
background: #E6E4DD;
padding-top: 5px;
padding-bottom: 5px;
width: 120px;
`;
return `
<div id="userScriptButtonWrapper" style="${wrapperStyles}">
<span style="${ribbonStyle}">Quick actions</span>
</div>
`;
};
const buttonStyle = `
display: inline-flex;
width: 80px;
margin-right: 10px;
margin-top: 10px;
justify-content: center;
min-height: 50px;
align-items: center;
`;
const buildButton = (color, action, name) =>
`<div class="button-default__2020 button-${color}__2020" style="${buttonStyle}" onclick="useItem('${action}')">${name}</div>`;
const buttons = [
buildButton("yellow", "stockshop", "$ Shop"),
buildButton("purple", "stockgallery", "𖣯 Gallery"),
buildButton("green", "safetydeposit", "❒ SDB"),
buildButton("blue", "give", "★ Give"),
buildButton("red", "donate", "♥︎ Donate"),
buildButton("red", "drop", "✘ Discard"),
];
const modalBody = document.querySelector("#invDesc > .popup-body__2020");
const modalWrapper = document.querySelector("#invDesc.togglePopup__2020");
if (!modalBody) return;
modalWrapper.style.marginTop = "-285px";
modalBody.style.maxHeight = "500px";
const observer = new MutationObserver((mutations, returnedObserver) => {
if (mutations.length >= 2) {
returnedObserver.disconnect();
const itemBox = document.querySelector(".invDesc .inv-itemBox");
itemBox.style.width = "100px";
// delete existing wrapper to avoid duplication
const existingWrapper = document.getElementById(
"userScriptButtonWrapper"
);
if (existingWrapper) {
existingWrapper.remove();
}
modalBody.insertAdjacentHTML("beforeend", buttonWrapper());
const wrapper = document.getElementById("userScriptButtonWrapper");
buttons.forEach((button) => {
wrapper.insertAdjacentHTML("beforeend", button);
});
returnedObserver.observe(modalBody, {
subtree: true,
attributes: false,
childList: true,
});
}
});
observer.observe(modalBody, {
subtree: true,
attributes: false,
childList: true,
});
})();
const $ = unsafeWindow.$;
const centerPopup__2020 = unsafeWindow.centerPopup__2020;
unsafeWindow.useItem = (obj_action) => {
const doAction = () => {
var obj_id_value = $("#invDesc").data("objid");
var useURL = "";
// Using items takes time, please hold
$("#invResult")
.find(".popup-body__2020")
.html("<div class='inv-loading-static'></div><p>Loading...</p>");
$("#invResult").find("h3").html("Loading...");
if ($("#" + obj_id_value + "").data("itemset") === "nc") {
useURL =
"/np-templates/views/process_cash_object.phtml?cash_obj_id=" +
obj_id_value;
var cashData = {
obj_id: obj_id_value,
action: obj_action,
};
$.ajax({
type: "POST",
url: useURL,
data: cashData,
dataType: "html",
success: function (response) {
var scriptSource = document.createElement("script");
scriptSource.type = "text/javascript";
scriptSource.text =
"$(document).ready(function(){" +
"$('input[value=\"Close and Refresh\"]').click(function(){" +
"window.location.reload();" +
"});" +
"});";
//$('#invResult').data('objid', $('#invDesc').data('objid'));
// Display Results
$("#invResult").find(".popup-body__2020").html(response);
$("#invResult").find(".popup-body__2020").append(scriptSource);
$("#invResult").find("h3").html("Success!");
centerPopup__2020();
},
error: function () {
console.log("Error");
$("#invResult").find("h3").html("Uh oh!");
centerPopup__2020();
},
});
} else {
useURL = "/np-templates/views/useobject.phtml";
var postData = {
obj_id: obj_id_value,
action: obj_action,
petcare: 0,
};
$.ajax({
type: "POST",
url: useURL,
data: postData,
dataType: "html",
success: function (response) {
var scriptSource = document.createElement("script");
scriptSource.type = "text/javascript";
scriptSource.text =
"$(document).ready(function(){" +
"$('input[value=\"Close and Refresh\"]').click(function(){" +
"window.location.reload();" +
"});" +
"});";
$("#invResult").find(".popup-body__2020").html(response);
$("#invResult").find(".popup-body__2020").append(scriptSource);
$("#invResult").find("h3").html("Success!");
centerPopup__2020();
},
error: function () {
console.log("Error");
$("#invResult").find("h3").html("Uh oh!");
centerPopup__2020();
},
});
}
// Show the Popup
$("#invDesc").hide();
$("#navpopupshade__2020").hide();
$("#refreshshade__2020").show();
$("#invResult").show();
centerPopup__2020();
return false;
};
let confirmMessage = null;
switch (obj_action) {
case "drop":
confirmMessage = "The item will be deleted forever. Are you sure?";
break;
case "donate":
confirmMessage = "Do you really want to donate this item?";
break;
default:
confirmMessage = null;
break;
}
if (confirmMessage) {
const confirmResult = confirm(confirmMessage);
if (confirmResult) {
doAction();
}
} else {
doAction();
}
};
unsafeWindow.centerPopup__2020 = () => {
const popup = document.getElementsByClassName("togglePopup__2020");
const popupBody = document.getElementsByClassName("popup-body__2020");
const popupHeader = document.getElementsByClassName("popup-header__2020");
const popupFooter = document.getElementsByClassName("popup-footer__2020");
// Center the popup in the viewport
for (let i = 0; i < popup.length; i++) {
popup[i].style.marginTop = (popup[i].offsetHeight / 1.6) * -1 + "px"; // negative half of its height
popup[i].style.marginLeft = (popup[i].offsetWidth / 2) * -1 + "px"; // negative half of its width
}
// set the max Height for the body content of the popup based on the height of the header & footer
for (let x = 0; x < popup.length; x++) {
// popupBody[x].style.maxHeight = window.innerHeight - 40 - popupHeader[x].offsetHeight - popupFooter[x].offsetHeight + "px";
popupBody[x].style.maxHeight = window.innerHeight * 0.7 - 20 + "px";
}
};