User script for Crunchyroll's Simulcast Calendar

crunchyroll-simulcast-calendar.user.js

// ==UserScript==
// @name         Crunchyroll Simulcast Calendar
// @namespace    http://iceydragon.github.io
// @version      0.2
// @description  Adds queued items toggle and release layout options
// @author       iceydragon
// @require      https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser-polyfill.min.js
// @require      https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser.min.js
// @require      https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js
// @match        https://www.crunchyroll.com/simulcastcalendar*
// ==/UserScript==

/* jshint ignore:start */
var inline_src = (<><![CDATA[
    /* jshint ignore:end */
    /* jshint esnext:true */

    // Your code here...
    (function(jq) {
        jq(function() {
            'use strict';

            let toggleQueuedHtml = `
<div class="content" style="display: table">
<label class="filter-toggle" for="toggleQueued">
<input type="checkbox" name="toggleQueued" class="toggle-queued filter-button" />
&nbsp;<span class="label-text">Show Queued Only</span>
</label> \
\
<label class="filter-toggle" for="selectArticleLayout">
<span class="label-text">Release Layout</span>&nbsp;
<select class="select-article-layout filter-button" name="selectArticleLayout">
<option value="">Default</option>
<option value="poster">Posters Only</option>
<option value="thumb">Thumbs Only</option>
<option value="episodeinfo">Episode Info</option>
<\select>
</label>
</div>`;
            let storageName = 'ID_CrunchyrollShowQueuedOnly';
            let filterFormClass = '.filter-form';
            let checkboxClass = '.toggle-queued';
            let releaseArticleClass = 'article.release';
            let queuedClass = ":has('div > div.queued')";
            let toggleQueuedEvent = 'toggleQueued';
            let queuedFlagClass = '.queue-flag.queued';
            let articleLayoutClass = '.select-article-layout';
            let posterImageClass = '.release .poster-image';
            let thumbnailClass= 'article.release .featured-episode';
            let articleLayoutEvent = 'articleLayoutChanged';
            let articleLayoutStorageName = 'ID_CrunchyrollArticleLayout';

            jq(filterFormClass).after(toggleQueuedHtml);

            jq(checkboxClass).on('change', onToggleQueuedSelect);

            function onToggleQueuedSelect(e) {
                if(e.target.checked) {
                    storeState(storageName, true);
                    jq(e.target).trigger(toggleQueuedEvent, { showQueued : true });
                } else {
                    removeState(storageName);
                    jq(e.target).trigger(toggleQueuedEvent, { showQueued : false });
                }
            }
            
            function storeState(key, value) {
                if(!isLocalStorageAvailable()) { return; }
                localStorage.setItem(key, value);
            }
            
            function removeState(key) {
                if(!isLocalStorageAvailable()) { return; }
                localStorage.removeItem(key);
            }

            function isLocalStorageAvailable() {
                try {
                    var storage = localStorage,
                        x = '__storage_test__';
                    storage.setItem(x, x);
                    storage.removeItem(x);
                    return true;
                }
                catch(e) {
                    return false;
                }
            }
            
            jq(articleLayoutClass).on('change', onSelectArticleLayout);

            function onSelectArticleLayout(e) {
                let val = jq(e.target).val();

                if(!val) {
                    removeState(articleLayoutStorageName);
                } else {
                    storeState(articleLayoutStorageName, val);
                }
                
                jq(e.target).trigger(articleLayoutEvent, { articleLayout : val });
            }

            jq(checkboxClass).on('toggleQueued', onToggleQueued);

            function onToggleQueued(e, data) {
                if(data.showQueued) {
                    jq(releaseArticleClass).not(queuedClass).hide();
                    jq(queuedFlagClass).hide();
                } else {
                    jq(releaseArticleClass).not(queuedClass).show();
                    jq(queuedFlagClass).show();
                }
            }
            
            jq(articleLayoutClass).on(articleLayoutEvent, onArticleLayoutChanged);
            
            function onArticleLayoutChanged(e, data) {
                let val = data.articleLayout;
                
                if(val === 'poster') {
                    jq(posterImageClass).css("display", "inline");
                    jq(thumbnailClass).hide();
                } else if(val === 'thumb') {
                    jq(thumbnailClass).css("display", "inline");
                    jq('progress').css("background-color", "rgb(206, 202, 202)");
                    jq(posterImageClass).hide();
                } else if(val === 'episodeinfo') {
                    jq(thumbnailClass).hide();
                    jq(posterImageClass).hide();
                } else {
                    jq(posterImageClass).css("display", "");
                    jq(thumbnailClass).css("display", "");
                    jq('progress').css("background-color", "");
                }
            }

            setFromStoredState();

            function setFromStoredState() {
                if(!isLocalStorageAvailable()) { return; }

                let isShowQueuedOnly = localStorage.getItem(storageName);

                if(isShowQueuedOnly) {
                    jq(checkboxClass).prop('checked', true);
                    jq(checkboxClass).trigger('change');
                }
                
                let articleLayout = localStorage.getItem(articleLayoutStorageName);
                
                jq(articleLayoutClass).val(articleLayout);
                jq(articleLayoutClass).trigger('change');
            }

            tweakFilterStyles();

            function tweakFilterStyles() {
                jq(filterFormClass).css({
                    "margin": "16px 0"
                });
            }
        });
    }.call(this, jQuery.noConflict()));

    /* jshint ignore:start */
]]></>).toString();
                  var c = babel.transform(inline_src);



eval(c.code);
/* jshint ignore:end */