Raw Source Toggle Dropdown

• Minified Source

gazza911 / Mark From Calendar

// ==UserScript==
// @name         Mark From Calendar
// @namespace    http://tampermonkey.net/
// @version      1.03
// @description  Mark episode as watched from calendar
// @match        http://www.tvmaze.com/calendar*
// @match        https://www.tvmaze.com/calendar*
// @require      https://code.jquery.com/ui/1.11.4/jquery-ui.js
// @updateURL https://openuserjs.org/meta/gazza911/Mark_From_Calendar.meta.js
// @license      MIT
// @grant        none
// ==/UserScript==

// Change colour on hover / moving mouse over:
// Default is '#3c948b'
// Accepted formats:
// Red, green, blue - rgb(r, g, b)
// You can also use rgba(r, g, b, a) where 'a' is the tranparency - 0 is fully transparent, 1 is fully solid, in other words a decimal / percentage transparency
// Hex value - #123456
// Hugh, saturation, lightness - hsl(h, s, l)
// Named colour - string; all names can be found here: http://www.w3schools.com/colors/colors_names.asp
// All other values can be obtained from here: http://www.w3schools.com/colors/colors_picker.asp
var hoverColour = "#3c948b";

// Change colour of eye / watch symbol:
// Default is 'Black'
// Same formats as above
var eyeColour = "Black";

// Change colour of eye / watch symbol:
// Default is 'lightslategray'
// Same formats as above
var watchedEyeColour = "lightslategray";

// Change size:
// Default is 115 (value is in percentage) - I would not suggest anything lower than 100% or higher than 140%
var size = 115;

// Only show on 'my followed shows', not 'most popular shows' ?
// Default is 1
// 1 = Yes
// 0 = No
var followedOnly = 0;

// Show eye icon on watched episodes (allows unwatching the episode)
// Default is 1
// 1 = Yes
// 0 = No
var showOnWatched = 1;

var current = $("#filter option:selected").val();

if (!followedOnly || current != "popular")
{
    $('<div id="hoverColourCheck"></div>').appendTo('body');
    $("#hoverColourCheck").css("color", hoverColour);
    // Reverts to default if invalid colour entered
    if (!$("#hoverColourCheck").attr("style")) { hoverColour = "Blue"; }

    $('<div id="eyeColourCheck"></div>').appendTo('body');
    $("#eyeColourCheck").css("color", eyeColour);
    // Reverts to default if invalid colour entered
    if (!$("#eyeColourCheck").attr("style")) { eyeColour = "Black"; }

    $('<style>.toggleWatched { position:absolute; right:5px; } \n.fa-lg { color:' + eyeColour + '; position:relative; top:-10px; font-size:' + size + '%; }  \n.fa-lg:hover { color:' + hoverColour + '; cursor: pointer } \n.watched .toggleWatched .fa-lg { color:' + watchedEyeColour + '; }  \n.watched .toggleWatched .fa-lg:hover { color:' + hoverColour + '; } </style>').appendTo($('head'));

    var element = '<div style="padding:1px"><span class="toggleWatched"><i class="fa fa-eye fa-lg" title="Toggle watch status"></i></span></div>';
    var dt = new Date();
    var dtYear = dt.getFullYear();
    var dtMonth = dt.getMonth() + 1;
    var dtDay = dt.getDate();

    $('div.day:gt(6)').each(function()
                            {
        var thisdt = $(this).attr("class").split("date-")[1];
        var dsplit = thisdt.split("-");
        var year = parseInt(dsplit[0]);
        var month = parseInt(dsplit[1]);
        var day = parseInt(dsplit[2]);
        if (year < dtYear || (year == dtYear && (month < dtMonth || (month == dtMonth && day <= dtDay))))
        {
            var notWatched = $(this).find('li.entry');
            if (showOnWatched) {
                $(element).prependTo(notWatched);
            } else {
                $(notWatched).each(function(){
                    if (!$(this).hasClass("watched")) {
                        $(element).prependTo($(this));
                    }
                });
            }
        }
    });

    $(".toggleWatched").click(function()
    {
        var eplink = $(this).parents("li.entry").children(":last");
        var epid = $(eplink).attr("href").split("/")[2];
        var watchType = null;
        if ($(this).parents("li.entry").hasClass("watched")) { }
        else { watchType = 0; }
        $.post("http://www.tvmaze.com/watch/set?episode_id=" + epid, { "type": watchType });
        $(this).parents("li.entry").toggleClass("watched");
        if ($(this).parents("li.entry").attr("class") == "entry")
        {
            $(this).parents("li.entry").removeAttr("title");
            $(this).find("i").attr("title", "Click to watch episode");
        }
        else
        {
            $(this).parents("li.entry").attr("title", "You have watched this episode");
            $(this).find("i").attr("title", "Click to un-watch episode");
        }
    });
}