Proxer-Kinomodus

Dieses Script fügt Proxer einen Kino-Modus-Button hinzu, der einen Kino-Modus startet
目前为 2015-06-15 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name         Proxer-Kinomodus
// @namespace    
// @version      1.1
// @description  Dieses Script fügt Proxer einen Kino-Modus-Button hinzu, der einen Kino-Modus startet
// @author       Dominik Bissinger alias Nihongasuki
// @include      http://proxer.me/*
// @include      https://proxer.me/*
// @include      http://www.proxer.me/*
// @include      https://www.proxer.me/*        
// @run-at       document-start
// ==/UserScript==
 
//Starte die Funktion "addButton" beim Laden der Seite
document.addEventListener('DOMContentLoaded', function(event) {
    addButton();
});
 
//Fügt den Button "Kino" hinzu
var t;
var addButton = function() {
    if (window.location.href.indexOf('watch') > -1 || window.location.href.indexOf('read') > -1) {
        if (window.location.href.indexOf('forum') > -1) {
            return;
        };
        var style1 = document.createElement("style");
        var style2 = document.createElement("style");
        style1.setAttribute("id","kinoStyle1");
        style2.setAttribute("id","kinoStyle2");
        document.head.appendChild(style1);
        document.head.appendChild(style2);
        document.getElementById('kinoStyle1').innerHTML = styleText1;
        var button = document.createElement("div");
        button.setAttribute("id","kinoButton");
        button.setAttribute("style","border-color: #777777; background-color: #5E5E5E; z-index: 2;");
        document.body.appendChild(button);
        var dimmer = document.createElement("form");
        dimmer.setAttribute("id","kinoDimmerBar");
        dimmer.setAttribute("style","border-color: #777777; background-color: #5E5E5E; z-index: 2; min-width:200px; display:none;");
        document.body.appendChild(dimmer);
        document.getElementById('kinoDimmerBar').innerHTML = "<input type='range' id='opacity' name='opacity' min='0' max='1' step='0.01' value='0.5' style='width:100%; margin: 0; box-sizing: border-box;'>";
        document.getElementById('kinoButton').innerHTML = "<div id='kino' style='cursor: pointer; width: 100%; text-align: center;'>Kinomodus</div>";
        var value = localStorage.getItem('dimmer');
        if (value !== null) {
            document.getElementById('opacity').value = value;
        };
        document.getElementById('kinoButton').addEventListener("click",function () {
            trigger();
        });
        document.getElementById('opacity').addEventListener("input",function () {
            controlDimmer();
        });
        var boxes = document.getElementsByClassName('colorbox');
        var color;
        for (var i = 0; i < 4; i++) {
            if (boxes[i].className.indexOf('check') > -1) {
                color = boxes[i].className.split(" ");
                if (color[1] === "gray") {
                    document.getElementById('kinoButton').style.backgroundColor = "#5E5E5E";
                    document.getElementById('kinoButton').style.borderColor = "#777777";
                    document.getElementById('kinoDimmerBar').style.backgroundColor = "#5E5E5E";
                    document.getElementById('kinoDimmerBar').style.borderColor = "#777777";
                }else if (color[1] === "black") {
                    document.getElementById('kinoButton').style.backgroundColor = "#000";
                    document.getElementById('kinoButton').style.borderColor = "#FFF";
                    document.getElementById('kinoDimmerBar').style.backgroundColor = "#000";
                    document.getElementById('kinoDimmerBar').style.borderColor = "#FFF";
                }else if (color[1] === "old_blue") {
                    document.getElementById('kinoButton').style.backgroundColor = "#F3FBFF";
                    document.getElementById('kinoButton').style.borderColor = "#000";
                    document.getElementById('kinoDimmerBar').style.backgroundColor = "#F3FBFF";
                    document.getElementById('kinoDimmerBar').style.borderColor = "#000";
                }else{
                    document.getElementById('kinoButton').style.backgroundColor = "#F3FBFF";
                    document.getElementById('kinoButton').style.borderColor = "#000";
                    document.getElementById('kinoDimmerBar').style.backgroundColor = "#F3FBFF";
                    document.getElementById('kinoDimmerBar').style.borderColor = "#000";
                };
            };
        };
        var layer = document.createElement("div");
        layer.setAttribute("id","kinoDimmer");
        layer.setAttribute("style","background-color: #000; z-index:1; position: fixed; top: 0; left: 0; height: 100%; width: 100%; opacity: 0.5; display:none;");
        document.body.appendChild(layer);
        var opacity = document.getElementById('opacity');
        document.getElementById('kinoDimmer').style.opacity = opacity.value;
        t = setInterval(repeat,100);
    };
};
 
var repeat = function () {
    if (window.location.href.indexOf('watch') === -1 && window.location.href.indexOf('read') === -1) {
        document.getElementById('kinoButton').style.display = "none";
        document.getElementById('kinoDimmer').style.display = "none";
        document.getElementById('kinoDimmerBar').style.display = "none";
        document.getElementById('kinoStyle2').innerHTML = "";
    }else{
        document.getElementById('kinoButton').style.display = "block";
    };
    var opacity = document.getElementById('opacity');
    var dimmer = opacity.value;
    localStorage.setItem('dimmer', dimmer);
};
 
var trigger = function () {
    if (document.getElementById('kinoStyle2').innerHTML === styleText2) {
        document.getElementById('kinoStyle2').innerHTML = "";
    }else{
        document.getElementById('kinoStyle2').innerHTML = styleText2;
    };
    var layer = document.getElementById('kinoDimmer');
    var bar = document.getElementById('kinoDimmerBar');
    if (layer.style.display === "none") {
        bar.style.display = "inline";
        layer.style.display = "block";
    }else{
        layer.style.display = "none";
        bar.style.display = "none";
    };
};
 
var controlDimmer = function (event) {
    var opacity = document.getElementById('opacity');
    document.getElementById('kinoDimmer').style.opacity = opacity.value;
};
 
var styleText1 = "\
#kinoButton {\
height: 20px; \
display: inline; \
position: fixed; \
bottom: 0px; \
left: 0px; \
border-right: 1px solid; \
border-top: 1px solid; \
padding: 5px; \
border-radius: 0 10px  0 0;\
}\
\
#kinoDimmerBar {\
height: 20px; \
display: inline; \
position: fixed; \
bottom: 0px;\
margin: auto 40%;\
left: 0;\
right: 0;\
border-right: 1px solid;\
border-left: 1px solid\
border-top: 1px solid; \
padding: 5px; \
border-radius: 10px 10px  0 0;\
}\
";
 
var styleText2 = "\
.wStream {\
z-index: 2;\
position: relative;\
}\
\
.wMirror {\
z-index: 2;\
position: relative;\
}\
\
.menu {\
z-index: 2;\
position: relative;\
}\
\
#reader {\
z-index: 2;\
position: relative;\
}\
\
#breadcrumb {\
z-index: 2;\
position: relative;\
}\
\
#navigation {\
z-index: 2;\
position: relative;\
}\
";