PMBD PMBD
Welcome, Guest. Please login or register.
2020 September 23, 14:28:41

Login with username, password and session length
Search:     Advanced search
137450 Posts in 1583 Topics by 4325 Members
Latest Member: chuj
* Home Help Search Calendar Login Register
+  PMBD
|-+  The Pirate Ship
| |-+  ARR!
| | |-+  Graphical script for the booty site.
0 Members and 1 Guest are viewing this topic. « previous next »
Pages: [1] THANKS THIS IS GREAT Print
Author Topic: Graphical script for the booty site.  (Read 2294 times)
NcProductions
Landlubber

Posts: 6


View Profile
Graphical script for the booty site.
« on: 2020 June 12, 13:22:22 »
THANKS THIS IS GREAT

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:


After:


Installation

This 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)
Code:
// ==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);
    }
})();

Old version (version 1)
Code:
// ==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.
« Last Edit: 2020 August 07, 13:52:34 by NcProductions » Logged
savvysims
Landlubber

Posts: 3


View Profile
Re: Graphical script for the booty site.
« Reply #1 on: 2020 July 06, 17:14:40 »
THANKS THIS IS GREAT

This is great, thanks! I've just installed it and it makes things much quicker. Smiley
« Last Edit: 2020 July 06, 17:43:47 by savvysims » Logged
simjunkie
Landlubber

Posts: 1


View Profile
Re: Graphical script for the booty site.
« Reply #2 on: 2020 July 07, 08:35:58 »
THANKS THIS IS GREAT

Well, that's pretty nifty. Thanks!
Logged
sharkwhaleeee
Landlubber

Posts: 1


View Profile
Re: Graphical script for the booty site.
« Reply #3 on: 2020 July 08, 01:12:02 »
THANKS THIS IS GREAT

This script is awesome!!!
Logged
tiredlandlubber
Landlubber

Posts: 1


View Profile
Re: Graphical script for the booty site.
« Reply #4 on: 2020 July 25, 07:07:59 »
THANKS THIS IS GREAT

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:

Code:
// ==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>`;
            }
        }

    }
})();
« Last Edit: 2020 August 06, 05:40:00 by tiredlandlubber » Logged
NcProductions
Landlubber

Posts: 6


View Profile
Re: Graphical script for the booty site.
« Reply #5 on: 2020 July 28, 00:28:54 »
THANKS THIS IS GREAT

Hey, thanks for converting it for firefox.
Logged
NcProductions
Landlubber

Posts: 6


View Profile
Re: Graphical script for the booty site.
« Reply #6 on: 2020 July 31, 15:57:09 »
THANKS THIS IS GREAT

Hey guys,

Just wanted to give a heads up the script has been updated to 1.2. The update contains a much improved UI.
Logged
Nikkiesims
ARR!

Posts: 86


View Profile
Re: Graphical script for the booty site.
« Reply #7 on: 2020 August 02, 23:09:01 »
THANKS THIS IS GREAT

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:

Code:
// ==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.
Logged
NcProductions
Landlubber

Posts: 6


View Profile
Re: Graphical script for the booty site.
« Reply #8 on: 2020 August 04, 15:29:51 »
THANKS THIS IS GREAT

I have updated to script to display the date now.

Logged
lemoon
Landlubber

Posts: 14


View Profile
Re: Graphical script for the booty site.
« Reply #9 on: 2020 August 04, 18:08:01 »
THANKS THIS IS GREAT

Script is amazing!!!
Thank you
Logged
Nikkiesims
ARR!

Posts: 86


View Profile
Re: Graphical script for the booty site.
« Reply #10 on: 2020 August 04, 23:25:35 »
THANKS THIS IS GREAT

I have updated to script to display the date now.




thanks a lot this is very good, please send the updated code to chrome
Logged
linelink
Landlubber

Posts: 2


View Profile
Re: Graphical script for the booty site.
« Reply #11 on: 2020 August 06, 20:52:47 »
THANKS THIS IS GREAT

This script is amazing! Such a life and time saver!  Cheesy 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!!!
Logged
NcProductions
Landlubber

Posts: 6


View Profile
Re: Graphical script for the booty site.
« Reply #12 on: 2020 August 07, 13:53:51 »
THANKS THIS IS GREAT

This script is amazing! Such a life and time saver!  Cheesy 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.
Logged
Nikkiesims
ARR!

Posts: 86


View Profile
Re: Graphical script for the booty site.
« Reply #13 on: 2020 August 08, 20:12:31 »
THANKS THIS IS GREAT

This script is amazing! Such a life and time saver!  Cheesy 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?
Logged
NcProductions
Landlubber

Posts: 6


View Profile
Re: Graphical script for the booty site.
« Reply #14 on: 2020 August 09, 08:40:30 »
THANKS THIS IS GREAT

Just scroll to the top of the thread and copy the code inside version 1.1.
Logged
Pages: [1] Print 
« previous next »
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.21 | SMF © 2015, Simple Machines Valid XHTML 1.0! Valid CSS!
Page created in 0.108 seconds with 20 queries.