Fixes crappy design of new Shutterstock earnings page, enables sort on ID and hopefully will fix other stupid things SS team did

Shutterstock.NewEarnings.user.js

// ==UserScript==
// @name         Shutterstock.NewEarnings
// @namespace
// @version      1.0.10
// @updateURL    https://gist.github.com/deymosD/126aa0a849de4196547ef5662684b270/raw/a8d13fad3d8decc18d871c7d3bb9458dfb5cbdd9/Shutterstock.NewEarnings.user.js
// @description  Fixes crappy design of new Shutterstock earnings page, enables sort on ID and hopefully will fix other stupid things SS team did
// @author       GG
// @match        http://submit.shutterstock.com/earnings*
// @match        https://submit.shutterstock.com/earnings*
// @require      https://code.jquery.com/jquery-latest.min.js
// @require      https://code.jquery.com/ui/1.11.4/jquery-ui.min.js
// @require      https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.28.5/js/jquery.tablesorter.js
// @grant        none


// ==/UserScript==

// NEW:
// v1.0 First attempt at fixing crap that SS programmers did with non-existant UX skills
// put everything on one page if there is more than one screen of info

// TBD:


// load tabs immediatelly
// show everything on one page, as it should be

'use strict';
var $j = jQuery.noConflict();

// =========== PARAMETERS ===========

var enableDatePicker = true;  // if you don't need date picker, set this to false
var enableTableSorter = true;   // SS sorts on stupid things, this enables sort by ID (puts newest on top)
var linkToOldDailyStats = false; // better to do it with bookmarklet. see https://forums.submit.shutterstock.com/topic/87730-cool-script-print-names-of-download-locations/?p=1593474
var addRows = true;   // load all rows to earnings table
var timeout = 2000; // wait so many ms before applying tablesorter - gotta do it, because of the async calls

// ==/UserScript==
var daily = window.location.href.indexOf("daily") + 1;


// i use smoothness theme for the datepicker and here we load external CSS

if ((daily) && (enableDatePicker)) {
    var link = window.document.createElement('link');
    link.rel = 'stylesheet';
    link.type = 'text/css';
    link.href = 'https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/smoothness/jquery-ui.css'; // get smoothness CSS; check http://jqueryui.com/themeroller/ for others, just change the theme name in url
    document.getElementsByTagName("HEAD")[0].appendChild(link);                                       // other themes: http://rtsinani.github.io/jquery-datepicker-skins/, have fun!
}

if ((daily) && (enableTableSorter)) {
    var link = window.document.createElement('link');
    link.rel = 'stylesheet';
    link.type = 'text/css';
    link.href = 'https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.28.5/css/theme.default.min.css';
    document.getElementsByTagName("HEAD")[0].appendChild(link);
}


$j(document).ready(function() {
    CreateStyles();
    (!daily) && fixDailyStatLinks();
    (daily) && (enableDatePicker)  && addDatePicker();
    (daily) && (addRows) && ($j("ul.pagination")) && addTableRows();
    (daily) && (enableTableSorter) &&
        setTimeout(function(){
        $j("table.table").tablesorter( {sortList: [[1,1]]} );  // [1,1] reverse sort column with index 1 (second) - [1,0] will sort ascending
    }, timeout);
});

function addDatePicker() {
    // wrap table element with div.ggHack because we're gonna need to import HTML content of different pages
    // get date from URL
    var datepicker = document.createElement('div');
    datepicker.id = "datepicker";
    if (localStorage.getItem("positionDatePicker")) {
        var position = $j.parseJSON(localStorage.getItem("positionDatePicker"));
        datepicker.style.top = position.top + "px";
        datepicker.style.left = position.left + "px";
    }
    $j("div#earnings-container table:first").append(datepicker);
    $j("div#datepicker").draggable({
        stop: function(event, ui){
            localStorage.setItem("positionDatePicker", JSON.stringify(ui.position));
        }
    });
    $j("div#datepicker").hover( function() {$j(this).css("cursor", "move");}, function(){ $j(this).css("cursor", "default"); });
    $j("div#datepicker").datepicker({   // check https://api.jqueryui.com/datepicker/ for API and play with options
        maxDate: "+0D",  // not much fun to go beyond today, no stats will be available
        showOtherMonths: true,
        changeMonth: true,
        changeYear: true,
        defaultDate: window.location.href.match(/date=(\d\d\d\d\-\d\d\-\d\d)/)[1], // get the default date from the URL
        dateFormat:"yy-mm-dd",
        firstDay: 1,                // start with monday, set to 0 for sunday (but why!?)
        showButtonPanel: true,
        currentText: "This month",
        yearRange:"2003:+0", // don't want to go to pre-Shutterstock times...
        onSelect: function(selected,event) {
            updateTable(selected);
            $j("div.gginfo").show(); // when we select date, load stats for the date and show the image info div
        }
    });


}
function updateTable(date){
    var newLink = window.location.protocol + "//submit.shutterstock.com/earnings/daily?category=25_a_day&language=en&date=" + date;
   window.location.href = newLink; // some day i may load just the table, but today is not that day

}

// following code created by https://gist.github.com/satinka/5479a93d389a07d41246

function addTableRows() {
    try {
        var howMany = $j("ul.pagination input")[0].max;
    }
    catch(err) {
        return;
        }
    var url = window.location.href;
    var newurl;
    var count = 20;

   for (var i = 2; i <=howMany; i++) {
       newurl = url + "&page=" + i;
        //var newdata = $j.get(newurl + "table.details-table tbody");
       $j("div#earnings-container div.row:last").append("<table id=\"temp" + i + "\"></table>");
       $j("table#temp" + i).hide();

       $j("table#temp" + i).load(newurl + " table.table tbody:first", function () {

           for (var j =  2; j <=howMany; j++) {

               $j("table#temp" + j + " tbody tr").each(function(a,tr) {

                //   if (enableTableSorter) { this.setAttribute("role","row");  };
                  $j("table.table tbody:first").append(tr);
                   count++;

               });
           }
     });
   }
      // remove nav
    $j("form.pagination-form").remove();
};

function fixDailyStatLinks() {
    var url = window.location.href;
    var date;
    var newdate;
    var newurl;

    $j("tr.earnings-day td a").each( function() {
        date=$j(this).text(); //.replace(/\//g,"-");
        newdate = date.replace( /(\d{2})\/(\d{2})\/(\d{4})/, "$3-$1-$2");
        $j(this).text(newdate);
        if (linkToOldDailyStats) {
            (newurl = "https://submit.shutterstock.com/stats_date.mhtml?date=" + newdate);
            $j(this).prop("href", newurl);
        }
    });
    
    // fix $ sign
    $j(".text-right").each( function() {
        $j(this).text($j(this).text().replace(/\$/,""));
    });
};


function CreateStyles() {
    var sheet = (function() {
        var style = document.createElement("style");
        style.appendChild(document.createTextNode(""));
        document.head.appendChild(style);
        return style.sheet;
    })();

    var alink = "cursor: hand; cursor: pointer;";
    var datepick = "position: fixed; top: 60px; left: 15px; font-size: 12px; width: 300px";
    addCSSRule(sheet, "a.link:hover", alink, 0);
    addCSSRule(sheet, "div#datepicker a", alink, 0);  // make pointer when hovering over linkable elements
    addCSSRule(sheet, "div#datepicker", datepick, 0);
}


function addCSSRule(sheet, selector, rules, index) {
    if("insertRule" in sheet) {
        sheet.insertRule(selector + "{" + rules + "}", index);
    }
    else if("addRule" in sheet) {
        sheet.addRule(selector, rules, index);
    }
}

Hi, thanks for sharing, its great! Can you please mux all Earning types (Subscriptions+On demand+Enhanced+Single & other) to one page as it was in old style? That will make your code perfect :)

Ilja

Hi, thanks, great script!

Error report (version 1.2.11): in "Image statistics" the total Earned amount - and as a result the Return per download - are wrong, not taking today's downloads into account, e.g.:
Earned 0.38$ (0.38$ Today)
Downloaded 2 times (1 time today)
Return per download: 0.19$

Hi! Thank you for sharing!
In my opinion, the current color differentiation on the "alternative arrangement" is not very informative. Maybe, you can divide the colors under license. For example: green for the requirements of blue - video, red - enhanced ...
And since all the types of licenses are currently in one page in the "representation of the table", different colors may also be useful
Thanks

Hello thank You for script. Please add option "sort by download time"

Hello!
Probably on the website Shutterstock something changed. MISSING string "Show alternative layout". Please specially Your script. Thank you!

Same here, alternative layout has gone, I think since they added the 'View payment history' link. :( :(

Big thank you for the update! My eyes are much happier :)

Thanks!!!!!

Clicking on the image id has stopped working now, they must have changed something else :(

It would be great if someone could add a next day/previous day option, to easily navigate back and forth, without having to pick a day from the calendar or getting back to the parent page!

Thank you. I think it would be very useful to write a script that generates an HTML document with a table showing a list of images with links to them that have never been sold. This will allow them to be deleted, re-loaded or sent to other stocks. Could you do this?