AS gallery view script

[Regis]

Hello, I created a little script to display the threads in the download section as a gallery view, similar to other websites.
It's a bit quick and dirty but works well so far. I thought i share it with you guys.

To use it you will need a userscript manager like Tampermonkey.

Here is the script, just copy it in a new entry.
Tested with Tampermonkey and chrome/firefox.

// ==UserScript==
// @name         [anime-sharing] gallery-view
// @namespace    http://www.anime-sharing.com
// @version      1
// @description  Gallery View for anime-sharing. Very simple quick n diry script
// @author       Regis|http://www.anime-sharing.com/forum/members/regis-41307/
// @run-at       document-start

// @match        http://www.anime-sharing.com/forum/hentai-games-38/*
// @match        http://www.anime-sharing.com/forum/hentai-ovas-36/*
// @match        http://www.anime-sharing.com/forum/hentai-manga-32/*
// @match        http://www.anime-sharing.com/forum/light-novels-61/*
// @match        http://www.anime-sharing.com/forum/raw-manga-30/*
// @match        http://www.anime-sharing.com/forum/torrents-47/*

// @require      https://code.jquery.com/jquery-3.3.0.min.js
// @grant        GM_addStyle
// ==/UserScript==

(function() {
    'use strict';

    //USER OPTIONS START

    //How many days the NEW word ist displayed for a thread
    var threadAgeIsNew = 14;

    //How wide the one gallery is. Lets you display more/fewer items in a row. Default: 330 1K/ 337 4K
    var galleryItemWidth = 370;

    //USER OPTIONS END

    GM_addStyle(`

#threadlist { display:none; }

#thGalleryView { width: 100%; }
.gvitem { float:left; width:${galleryItemWidth}px; height:310px; background:#f8f8f8; margin:5px; padding: 8px; border:1px solid #c4c4c4 }
.gvitemtitle { height:50px; text-align: center; overflow: hidden; }
.gvitemimg {
  height:225px;
  margin-bottom: 4px;
}
.gvitemimg > img {
	max-width: calc(100% - 8px);;
	max-height: calc(100% - 8px);
	border: 2px solid #c8c8c8;
	background: #fff;
	padding: 2px;
	display: block;
	margin-left: auto;
	margin-right: auto;
}
.newTh { color: #f3cd01; font-weight: bold; font-style: italic; text-shadow: 2px 2px 4px #7c6d33;margin-right:4px; }
    `);

    document.onreadystatechange = function () {
        if (document.readyState === "interactive") {
            start();
        }
    }


    function start() {
        createGViewer();

        $("#threadlist").find(".threadbit").each(function() {
            if ($(this).attr("id") == null)
                return;
            var threadInfoObj = getThreadData($(this));
            addItemToView(threadInfoObj);
        });
    }

    function getThreadData(trObj) {
        var infoObj = {};
        infoObj.title = trObj.find(".threadtitle").find(".title").html().trim();
        infoObj.thread = trObj.find(".threadtitle").find("a.title").attr("href");
        infoObj.img = trObj.find("img.preview").attr("src");
        infoObj.authorHtml = trObj.find(".author").find(".username").removeClass("understate").prop('outerHTML');
        infoObj.lastPostHtml = trObj.find(".threadlastpost").find(".username").prop('outerHTML');
        infoObj.lastPostDate = parseDateInfo(trObj.find(".threadlastpost").find(".lastpostdate").parent().text().trim());
        infoObj.postDate = parseDateInfo(trObj.find(".author").find(".username").parent().text());;
        infoObj.isSticky = trObj.find(".threadtitle").find("img[title='Sticky Thread']").length > 0;
        infoObj.isNew = dateDiffInDays(infoObj.postDate, new Date()) < threadAgeIsNew;

        infoObj.lastPostStr = null;
        infoObj.infoStr = null;

        return infoObj;
    }


    function createGViewer() {
        var contHtml = `
          <div id='thGalleryView'>
          </div>
        `;

        $("#threadlist").before(contHtml);
    }

    function addItemToView(itemInfo) {
        var itemHtml = `
          <div class='gvitem'>
            <a href='${itemInfo.thread}'>
              <div class='gvitemtitle' title='${itemInfo.title}'>
                <span title='sticky thread' class='gvSticky' style='float:left; display:${disOpt(itemInfo.isSticky)}'>????</span>
                <span style='display:${disOpt(itemInfo.isNew)}' class='newTh'>NEW</span>
                <span>${itemInfo.title}</span>
              </div>
              <div class='gvitemimg'><img src='${itemInfo.img}' /></div>
            </a>
            <div class='gvitemInfo'>
              <div><span>created by </span>${itemInfo.authorHtml}<span><span style='float:right'>last post by ${itemInfo.lastPostHtml}</span></div>
              <div>on </span><span>${formatDate(itemInfo.postDate)}</span>
                   <span style='float:right'>on ${formatDate(itemInfo.lastPostDate)}</span></div>
            </div>
          </div>
        `;

        $("#thGalleryView").append(itemHtml);
    }

    function disOpt(isDisplay) {
        return (isDisplay ? "inline" : "none") ;
    }

    function formatDate(date) {
        if (date == undefined || date == null)
            return "";

        var dtstr = date.toLocaleDateString();
        dtstr += " " + ("0" + date.getHours()).slice(-2) + ":" + ("0" + date.getMinutes()).slice(-2);

        return dtstr;
    }

    function parseDateInfo(dstr) {

        var year, month, day, hour, min;
        if (dstr.includes("Yesterday") || dstr.includes("Today")) {
            var xdate = new Date();
            if (dstr.toLowerCase().includes("Yesterday"))
                xdate.setDate(xdate.getDate() -1);

            year = xdate.getFullYear();
            month = xdate.getMonth();
            day = xdate.getDay();
            var regexTime = RegExp(/\d+\:\d+\s[AMP]+/, 'g');
            let matchArr = regexTime.exec(dstr);
            if (matchArr == null)
                console.log("1-match failed-src:" + dstr + "|reg:" + regexTime);

            let timeStr = convertTime12to24(matchArr[0].trim());
            hour = timeStr.split(":")[0];
            min = timeStr.split(":")[1];
        }
        else {
            var regexDate = RegExp(/([A-z]+) (\d+)[A-z,\s]+(\d+)[,\s]([\d:\sAMP]+)/, 'g');
            //'Started by hentaigraal, August 7th, 2020 01:09 PM';
            let matchArr = regexDate.exec(dstr);
            if (matchArr == null)
                console.log("2-match failed-src:" + dstr + "|reg:" + regexDate);

            var monthName = matchArr[1].trim().toLowerCase();
            var monthNameArr = ["jan", "feb", "mar", "apr", "may", "jun", "jul", "aug", "sep", "oct", "nov", "dec"];
            month = monthNameArr.indexOf(monthName.substr(0,3));
            day = matchArr[2].trim();
            year = matchArr[3].trim();
            let timeStr = convertTime12to24(matchArr[4].trim());
            hour = timeStr.split(":")[0];
            min = timeStr.split(":")[1];
        }

        return new Date(year, month, day, hour, min);
    }

    //Input: 01:09 PM | output: 13:09
    function convertTime12to24(time12h) {
        let [time, modifier] = time12h.split(' ');
        let [hours, minutes] = time.split(':');
        if (hours === '12') {
            hours = '00';
        }

        if (modifier === 'PM') {
            hours = parseInt(hours, 10) + 12;
        }

        return `${hours}:${minutes}`;
    }

    function dateDiffInDays(first, second) {
        return Math.round((second-first)/(1000*60*60*24));
    }

})();

 

[Checkmate]

Did you mean the grid view?

In the next major rehaul dubbed the AS Community 2.0, I'll make some section to displayed as Grid. It is still under development since it was a lot bigger than I originally planned.

 

[Regis]

yea, some call it gallery view, others grid view. Since there hasnt been one for such a long time, i made a script for that.

 

[Rememberingwords]

nie grid view, thank you for having me get some information here.

 

[lys]

cant wait for the grid view