Title: Graphical script for the booty site.
Post by: NcProductions on 2020 June 12, 13:22:22
Hi fellas. I made a script using JavaScript to make a graphical UI for http://paysites.mustbedestroyed.org/booty/ page. It improves the user experience when browsing the long list of mods. When you want to preview an image of an mod, you have to click the individual image link to see it. I personally think it can be tedious, especially in the long run. With this script, it will automatically render the image for you. It will also render the download button. I also want to apologize if a script like this already exists. I just joined and I wanted to share this script with everyone. Preview image:Before: (https://i.imgur.com/dTxfq44.jpg) After: (https://images2.imgbox.com/1a/6a/11bLEEbJ_o.jpg) InstallationThis script is only compatible with Chrome browsers. The source code will be released, so someone else can make a greasemonkey script for firefox. First, you will need to download Tampermonkey extension for chrome - https://chrome.google.com/webstore/detail/tampermonkey/dhdgffkkebhmkfjojejmpbldmpobfkfo Once installed, click the Tampermonkey extension and select create new script. Then replace the code that comes by default with mine here: Current version (version 1.1)// ==UserScript==
// @name Sims Paysites Must Be Destroyed View Images
// @namespace http://tampermonkey.net/
// @version 1.1
// @description try to take over the world!
// @author You
// @match http://paysites.mustbedestroyed.org/*/
// @grant none
// ==/UserScript==
(function() {
'use strict';
// Allowed types
const images = ['gif', 'png', 'bmp', 'jpeg', 'jpg'];
const files = ['7z', 'zip', 'rar'];
// Styles
const styleContainer = {
'margin' : '20px auto',
'width' : '700px',
'font-family' : "'Nanum Gothic', sans-serif;"
};
const styleHeader = {
'display' : 'flex',
'justify-content' : 'space-between',
'align-items' : 'center',
'text-transform' : 'uppercase'
};
const styleSpan = {
'font-size' : '14px',
'background' : '#333',
'color' : 'white',
'padding' : '10px',
'text-decoration' : 'none',
'border-radius' : '5px'
}
const styleList = {
'border' : '1px solid #ccc',
'padding' : '20px',
'margin-bottom' : '40px',
'list-style' : 'none',
'border-radius' : '5px',
'box-shadow' : '2px 2px 0px 0px #ccc'
}
const styleListAlt = {
'border' : '1px solid #ccc',
'margin-bottom' : '10px',
'list-style' : 'none',
'border-radius' : '5px',
'box-shadow' : '2px 2px 0px 0px #ccc',
}
const styleImages = {
'width' : '100%',
'height' : 'auto',
'max-height' : '500px',
'object-fit' : 'contain'
};
const styleBtn = {
'padding' : '20px 60px',
'background-color' : '#333',
'text-decoration' : 'none',
'color' : 'white',
'border-radius' : '5px',
'font-weight' : 'bold'
}
const styleBtnContainer = {
'display' : 'flex',
'justify-content' : 'center',
}
const styleDate = {
'font-weight' : 'bold',
'font-family' : "'Nanum Gothic', sans-serif;",
'text-align' : 'center',
'padding' : '5px 0'
};
// Functions
const style = (object) => {
let output = '';
for(let property in object){
output += `${property}:${object[property]};`;
}
return output;
};
// Header
let header = document.querySelector('h1').innerText.split('/');
header.pop();
header = header[header.length - 1];
// Pre
let pre = document.querySelector('pre').innerText;
pre = pre.replace(/\s\s+/g, ' ');
pre = pre.split("\n");
// Setup data
const data = {};
document.querySelectorAll('pre a').forEach(link => {
let href = link.getAttribute('href');
let name = link.innerText;
name = href.split('.');
let type = name.pop();
name = name.join('.');
if(files.includes(type) || images.includes(type)){
if(typeof data[name] == 'undefined') data[name] = [];
if(images.includes(type)) data[name].push(href);
if(files.includes(type)) data[name].push(href);
// Push date to data obj
pre.forEach(row => {
let text = (name + '.' + type);
if(row.includes(text) && files.includes(type)){
let date = row.split(' ')[1];
data[name].push(date);
}
});
} else {
if(href != '../' && href != '.' && href) data[href] = href;
}
});
// Output
document.querySelector('body').innerHTML = `<div style="${style(styleContainer)}" id="target"><h1 style="${style(styleHeader)}">${header}<a href="../" style="${style(styleSpan)}">Go back</a></h1><ul id="list"></ul></div>`;
document.querySelector('head').insertAdjacentHTML('beforeend', '<link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic&display=swap" rel="stylesheet">');
for(let item in data){
let arr = data[item];
let img = null;
let file = null;
let date = null;
let output;
if(typeof arr === 'object'){
data[item].forEach(el => {
let name = el.split('.');
let type = name.pop();
name = name.join('.');
if(images.includes(type)) img = name + '.' + type;
if(files.includes(type)) file = name + '.' + type;
if(!Number.isNaN(Date.parse(type))) date = type;
});
if(img != null && file != null){
output = `<li style="${style(styleList)}">`;
output += '<figure>';
output += `<img style="${style(styleImages)}" src="${img}" alt="${item}">`;
output += '</figure>';
output += date ? `<p style="${style(styleDate)}">Date - <span style="font-weight: normal">${date}</span></p>` : '';
output += `<div style="${style(styleBtnContainer)}"><a style="${style(styleBtn)}" href="${file}">Download</a></div>`;
output += '</li>';
} else {
if(file) output = `<li style="${style(styleListAlt)}"><a style="text-decoration:none; padding: 10px; display: block" href="${file}">${file}</a></li>`;
if(img) output = `<li style="${style(styleListAlt)}"><a style="text-decoration:none; padding: 10px; display: block" href="${img}">${img}</a></li>`;
}
} else {
if(typeof item != 'undefined') output = `<li style="${style(styleListAlt)}"><a style="text-decoration:none; padding: 10px; display: block" href="${item}">${item}</a></li>`;
}
if(typeof output != 'undefined') document.querySelector('#target').insertAdjacentHTML('beforeend', output);
}
})();
// ==UserScript==
// @name Sims Paysites Must Be Destroyed View Images
// @namespace http://tampermonkey.net/
// @version 0.1
// @description try to take over the world!
// @author You
// @match http://paysites.mustbedestroyed.org/booty/*/
// @grant none
// ==/UserScript==
(function() {
'use strict';
const anchorClass = "position: relative;";
const imageClass = "max-width:600px; height: auto;";
const textClass = "position: absolute; bottom: 10px; left: 50%; transform:translateX(-50%); background-color: black; color: white; padding: 10px 25px;";
const buttonClass = " background-color: tomato; color: black; padding: 10px 25px; display: inline-block; text-decoration: none; margin: 10px auto 50px auto";
const anchors = document.querySelectorAll('a');
for(let i = 0; i < anchors.length; i++){
let type = anchors[i].href.split('.').pop();
if(['jpeg','png','jpg'].includes(type)){
let text = anchors[i].href.split('/').pop();
const src = anchors[i].href;
anchors[i].outerHTML = `<a style="${anchorClass}" target="_blank" href="${src}"><img style="${imageClass}" src="${src}" alt="Preview"><span style="${textClass}">${text}</span></a>`;
} else {
if(type == 'zip' || type == 'rar'){
let link = anchors[i].href;
let file = anchors[i].href.split('/').pop();
anchors[i].outerHTML = `<a style="${buttonClass}" href="${link}">Download ${file}</a>`;
}
}
}
})();
And last, press CTRL + S to save the script and the images and buttons should now render.
Title: Re: Graphical script for the booty site.
Post by: savvysims on 2020 July 06, 17:14:40
This is great, thanks! I've just installed it and it makes things much quicker. :)
Title: Re: Graphical script for the booty site.
Post by: simjunkie on 2020 July 07, 08:35:58
Well, that's pretty nifty. Thanks!
Title: Re: Graphical script for the booty site.
Post by: sharkwhaleeee on 2020 July 08, 01:12:02
This script is awesome!!!
Title: Re: Graphical script for the booty site.
Post by: tiredlandlubber on 2020 July 25, 07:07:59
UPDATE: The 1.1 version looks nearly identical on Firefox, so no need to make a specific script edit for it! Just copy and paste the first code in op's labeled "Current Version". If you want the old one, here you go:Thank you so much. I wanted to say that anyone using Firefox will do this the exact same way, but for anyone who has no idea what they're doing, here's what you copy and paste for Greasemonkey: // ==UserScript==
// @name Sims Paysites Must Be Destroyed View Images
// @version 1.1
// @description try to take over the world!
// @author You
// @match http://paysites.mustbedestroyed.org/*/
// @grant none
// ==/UserScript==
(function() {
'use strict';
const anchorClass = "position: relative; text-align: center; display: block; margin-left: auto; margin-right: auto; width: 50%;";
const imageClass = "max-width:600px; height: auto; display: block; margin: 0 auto;";
const textClass = "position: absolute; bottom: 10px; left: 50%; transform:translateX(-50%); background-color: black; color: white; padding: 10px 25px; text-align: center;";
const buttonClass = " background-color: tomato; color: black; padding: 10px 25px; display: inline-block; text-decoration: none; margin: 10px auto 50px auto; text-align: center; display: block; margin-left: auto; margin-right: auto; max-width: 500px;";
const anchors = document.querySelectorAll('a');
for(let i = 0; i < anchors.length; i++){
let type = anchors[i].href.split('.').pop();
if(['jpeg','png','jpg'].includes(type)){
let text = anchors[i].href.split('/').pop();
const src = anchors[i].href;
anchors[i].outerHTML = `<a style="${anchorClass}" target="_blank" href="${src}"><img style="${imageClass}" src="${src}" alt="Preview"><span style="${textClass}">${text}</span></a>`;
} else {
if(type == 'zip' || type == 'rar'){
let link = anchors[i].href;
let file = anchors[i].href.split('/').pop();
anchors[i].outerHTML = `<a style="${buttonClass}" href="${link}">Download ${file}</a>`;
}
}
}
})();
Title: Re: Graphical script for the booty site.
Post by: NcProductions on 2020 July 28, 00:28:54
Hey, thanks for converting it for firefox.
Title: Re: Graphical script for the booty site.
Post by: NcProductions on 2020 July 31, 15:57:09
Hey guys,
Just wanted to give a heads up the script has been updated to 1.2. The update contains a much improved UI.
Title: Re: Graphical script for the booty site.
Post by: Nikkiesims on 2020 August 02, 23:09:01
Thank you so much. I wanted to say that anyone using Firefox will do this the exact same way, but for anyone who has no idea what they're doing, here's what you copy and paste for Greasemonkey: // ==UserScript==
// @name Unnamed Script 553917
// @version 1
// @grant none
// ==/UserScript==
(function() {
'use strict';
const anchorClass = "position: relative;";
const imageClass = "max-width:600px; height: auto;";
const textClass = "position: absolute; bottom: 10px; left: 50%; transform:translateX(-50%); background-color: black; color: white; padding: 10px 25px;";
const buttonClass = " background-color: tomato; color: black; padding: 10px 25px; display: inline-block; text-decoration: none; margin: 10px auto 50px auto";
const anchors = document.querySelectorAll('a');
for(let i = 0; i < anchors.length; i++){
let type = anchors[i].href.split('.').pop();
if(['jpeg','png','jpg'].includes(type)){
let text = anchors[i].href.split('/').pop();
const src = anchors[i].href;
anchors[i].outerHTML = `<a style="${anchorClass}" target="_blank" href="${src}"><img style="${imageClass}" src="${src}" alt="Preview"><span style="${textClass}">${text}</span></a>`;
} else {
if(type == 'zip' || type == 'rar'){
let link = anchors[i].href;
let file = anchors[i].href.split('/').pop();
anchors[i].outerHTML = `<a style="${buttonClass}" href="${link}">Download ${file}</a>`;
}
}
}
})();
____________________ thanks for the script i loved it, i would really like it to have dates for us to see when it was posted.
Title: Re: Graphical script for the booty site.
Post by: NcProductions on 2020 August 04, 15:29:51
I have updated to script to display the date now.
(https://images2.imgbox.com/7b/b3/pjHGxIq4_o.jpg)
Title: Re: Graphical script for the booty site.
Post by: lemoon on 2020 August 04, 18:08:01
Script is amazing!!!
Thank you❤❤❤
Title: Re: Graphical script for the booty site.
Post by: Nikkiesims on 2020 August 04, 23:25:35
I have updated to script to display the date now.
(https://images2.imgbox.com/7b/b3/pjHGxIq4_o.jpg)
thanks a lot this is very good, please send the updated code to chrome
Title: Re: Graphical script for the booty site.
Post by: linelink on 2020 August 06, 20:52:47
This script is amazing! Such a life and time saver! :D Is there any way to make it to where it works for all of the creators? For example, it does not work for Curbs.
Thank you so much for making this!!!
Title: Re: Graphical script for the booty site.
Post by: NcProductions on 2020 August 07, 13:53:51
This script is amazing! Such a life and time saver! :D Is there any way to make it to where it works for all of the creators? For example, it does not work for Curbs.
Thank you so much for making this!!!
It didn't render because it was caused by a bug in the script. I have updated the code in version 1.1, so it should work now. Please update the script on your end.
Title: Re: Graphical script for the booty site.
Post by: Nikkiesims on 2020 August 08, 20:12:31
This script is amazing! Such a life and time saver! :D Is there any way to make it to where it works for all of the creators? For example, it does not work for Curbs.
Thank you so much for making this!!!
It didn't render because it was caused by a bug in the script. I have updated the code in version 1.1, so it should work now. Please update the script on your end. please where can i get it updated?
Title: Re: Graphical script for the booty site.
Post by: NcProductions on 2020 August 09, 08:40:30
Just scroll to the top of the thread and copy the code inside version 1.1.
|