AzLyrics +

Adds some extra functions to AzLyrics and changes theme

当前为 2016-07-21 提交的版本,查看 最新版本

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Greasemonkey 油猴子Violentmonkey 暴力猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Violentmonkey 暴力猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Userscripts ,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展后才能安装此脚本。

(我已经安装了用户脚本管理器,让我安装!)

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

(我已经安装了用户样式管理器,让我安装!)

// ==UserScript==
// @name	AzLyrics +
// @description Adds some extra functions to AzLyrics and changes theme
// @version     1.0.0
// @author      Bekir Uzun
// @namespace   https://greasyfork.org/en/scripts/21458-azlyrics
// @match       *.azlyrics.com/*
// @match       http://www.azlyrics.com/*
// @run-at      document-start
// @license     https://creativecommons.org/licenses/by-sa/4.0/
// @icon        https://raw.githubusercontent.com/BekirUzun/AzLyricsPlus/master/az_lyrics_plus_logo.png
// @homepage	https://github.com/BekirUzun/AzLyricsPlus
// @supportURL  https://github.com/BekirUzun/AzLyricsPlus/issues
// @require     https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js
// @grant       GM_addStyle
// @grant   	GM_setValue
// @grant   	GM_getValue
// @grant   	GM_deleteValue
// @grant   	GM_listValues
// @grant   	unsafeWindow
// ==/UserScript==
/*jshint multistr: true */
(function() {
    'use strict';

    var fontSize = GM_getValue("fontSize", '30');
    var fontGlowColor = GM_getValue("fontGlowColor", '#0000FF');
    var linkGlowColor = GM_getValue("linkGlowColor", '#FF0000');
    var boldFontGlowColor = GM_getValue("boldFontGlowColor", '#00FFFF');
    var backgroundColor = GM_getValue("backgroundColor", '#000000');
    var duration, duration_copy, path;

    var css = '.main-page {width: 90%; font-size: ' + fontSize + 'px !important; color: #FFF !important; letter-spacing: 1px !important; text-shadow: 0px 0px 5px ' + fontGlowColor + ', 0px 0px 10px ' + fontGlowColor + ', 0px 0px 15px ' + fontGlowColor + ', 0px 0px 20px ' + fontGlowColor + ', 0px 0px 30px ' + fontGlowColor + ' !important;}\
		body, .navbar-footer, .footer-wrap {background: ' + backgroundColor + '; font-family: "Righteous", cursive !important; line-height: 1.4 !important;}\
		.main-page a {color: #FFF !important; text-shadow: 0px 0px 5px ' + linkGlowColor + ', 0px 0px 10px ' + linkGlowColor + ', 0px 0px 15px ' + linkGlowColor + ', 0px 0px 20px ' + linkGlowColor + ', 0px 0px 30px ' + linkGlowColor + ' !important;}\
		.main-page b {color: #FFF !important; text-shadow: 0px 0px 5px ' + boldFontGlowColor + ', 0px 0px 10px ' + boldFontGlowColor + ', 0px 0px 15px ' + boldFontGlowColor + ', 0px 0px 20px ' + boldFontGlowColor + ', 0px 0px 30px ' + boldFontGlowColor + ' !important;}\
		.navbar-default {background-color: #55F !important; border-color: #66F !important;}\
		.btn-menu, .btn-primary { background-color: #00F !important; border-color: #00A !important; margin: 1px !important;}\
		.btn-default, .breadcrumb, .panel.album-panel {background-color: #222 !important; border-color: #800 !important;}\
		.btn.focus, .btn:focus, .btn:hover {background-color: #008 !important; border-color: #008 !important;}\
		.lboard-wrap, .links-menu-wrap {background-color: #33D !important; padding-bottom: 10px !important;}\
		@font-face {font-family: "Righteous"; font-style: normal; font-weight: 400; src: local("Righteous"), local("Righteous-Regular"), url(https://fonts.gstatic.com/s/righteous/v5/w5P-SI7QJQSDqB3GziL8XVtXRa8TVwTICgirnJhmVJw.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;}\
		.settings {font-size: 12pt; width: 25em; position: fixed; top: 0px; right: 0px; background: #21B262; color: #ffffff; height: 100%; z-index: 99995; font-family: "Open Sans", Helvetica, sans-serif;  display: none; padding: 40px 10px 10px 10px;}\
		.settings table {width: 100%;}\
		.settings td {padding: 0.2em 0 0 0; width: 50%; line-height: 2em;}\
		.settings button {background-color: #ed4933; box-shadow: none !important; width: 90%; height: 2.0em; color: #fff; font-family: "Open Sans", Helvetica, sans-serif;	font-size: 15pt; font-weight: 400; letter-spacing: 0.1em; border-radius: 4px; border: none; cursor: pointer;}\
		.settings input {font-size: 12pt; color: #fff; font-family: "Open Sans", Helvetica, sans-serif; line-height: 2em; background: rgba(100, 100, 100, 0.25); border-radius: 4px; border: none; padding: 0em 0em 0em 0.3em; text-decoration: none; width: 90%;}\
		input[type="color"] {background: rgba(0, 0, 0, 0); width: 92%; height: 2em; border: none; padding: 0em; position: relative;}\
		.closeSettings {position: fixed; top:0px; right:0px; background-image: url("http://bekiruzun.com/test/1/assets/css/images/close.svg"); background-repeat: no-repeat; background-position: 1em 1em; width: 3em; height: 2em; cursor: pointer;}\
        .openSettings {position: fixed; top:0px; right:0px; background-image: url("https://raw.githubusercontent.com/BekirUzun/AzLyricsPlus/master/img/gear-icon.png"); background-size: 40px; background-repeat: no-repeat; background-position: 0px 10px; width: 50px; height:50px; z-index: 99990; cursor: pointer;}\
        .start {position: fixed; top:50px; right:0px; background-image: url("https://raw.githubusercontent.com/BekirUzun/AzLyricsPlus/master/img/play-icon.png"); background-size: 40px; background-repeat: no-repeat; background-position: 0px 10px; width: 50px; height:50px; z-index: 99991; cursor: pointer;}\
        .stop {position: fixed; top:50px; right:0px; background-image: url("https://raw.githubusercontent.com/BekirUzun/AzLyricsPlus/master/img/stop-icon.png"); background-size: 40px; background-repeat: no-repeat; background-position: 0px 10px; width: 50px; height:50px; z-index: 99990; cursor: pointer;}';

    if (typeof GM_addStyle != "undefined") {
        GM_addStyle(css);
    } else if (typeof PRO_addStyle != "undefined") {
        PRO_addStyle(css);
    } else if (typeof addStyle != "undefined") {
        addStyle(css);
    } else {
        var node = document.createElement("style");
        node.type = "text/css";
        node.appendChild(document.createTextNode(css));
        var head = document.getElementsByTagName("head");
        if (head.length > 0) {
            head[0].appendChild(node);
        } else {
            document.documentElement.appendChild(node);
        }
    }

    //Thanks to Brock Adams @  http://stackoverflow.com/questions/26268816/how-to-get-a-greasemonkey-script-to-run-both-at-run-at-document-start-and-at-r#answer-26269087
    document.addEventListener("DOMContentLoaded", DOM_ContentReady);

    function DOM_ContentReady() {
        path = window.location.pathname;
        if (path.includes("lyrics")) {
            var holder = document.getElementsByTagName("h2")[0].getElementsByTagName("b")[0].innerHTML;
            var patharray = path.split("/");
            var artisturl = "/" + patharray[2].charAt(0) + "/" + patharray[2] + ".html";
            document.getElementsByTagName("h2")[0].innerHTML = '<a href="' + artisturl + '" ><font size="35px">' + holder + '</font></a>';
        }
        document.getElementsByClassName("pull-left")[0].src = 'https://raw.githubusercontent.com/BekirUzun/AzLyricsPlus/master/az_lyrics_plus_logo.png';

        duration = GM_getValue(path, calcDuration());
        duration_copy = duration;
        var settings = document.createElement('div');
        settings.innerHTML = '<div class="settings"><table><tbody>\
		<tr><td>Duration (seconds):</td><td><input id="duration" type="number" step="10" value="' + duration + '"></td>\
		<tr><td>Font Size (px):</td><td><input id="fontSize" type="number" value="' + fontSize + '"></td></tr>\
		<tr><td>Font Glow Color:</td><td><input id="fontGlowColor" type="color" value="' + fontGlowColor + '"></td></tr>\
		<tr><td>Bold Font Glow Color:</td><td><input id="boldFontGlowColor" type="color" value="' + boldFontGlowColor + '"></td></tr>\
		<tr><td>Link Glow Color:</td><td><input id="linkGlowColor" type="color" value="' + linkGlowColor + '"></td></tr>\
		<tr><td>Background Color:</td><td><input id="backgroundColor" type="color" value="' + backgroundColor + '"></td></tr>\
		<tr><td><button id="save" type="button">Save</button></td><td><button id="reset" type="button">Reset</button></td></tr>\
        </tbody></table> <table><tbody><tr><td>JQuery version: ' + $.fn.jquery + ' </td></tr></tbody></table>\
		<a class="closeSettings"></a>\
        </div>  <a id="openSettings" class="openSettings" ></a> <a class="start"></a> <a class="stop">';
        document.body.appendChild(settings);

        if ($.fn.jquery !== "undefined") {
            $('.openSettings, .closeSettings').click(function() {
                $(".settings").toggle(1000);
            });
            $('.main-page').click(function() {
                $(".settings").hide(1000);
            });

            $('#save').click(function() {
                saveSettings();
                window.location.reload(true);
            });
            $('#reset').click(function() {
                if (confirm("Do you really want to reset color settings on all pages and duration time on current page?") === true) {
                    resetSettings();
                    window.location.reload(true);
                }
            });
            $(".start").click(function() {
                $(".start").toggle();
                $('html, body').animate({
                    scrollTop: $("#addsong").offset().top - window.innerHeight
                }, {
                    duration: duration * 1000,
                    easing: 'linear',
                    complete: function() {
                        $(".start").show();
                    }
                });
            });
            $(".stop").click(function() {
                $(".start").toggle();
                $('html, body').stop();
            });
            $( window ).scroll(function() {
                if (GM_getValue(path, 0) === 0){
                    var height =  $('#addsong').offset().top -  $(document).scrollTop() - window.innerHeight;
                    var lines = height / fontSize * 1.4;
                    duration = (lines * 2.5);
                } else {
                    duration = duration_copy - ($(document).scrollTop() / fontSize * 1.4) * 2.5;
                }

                if (duration <= 0)
                    duration = 0.5;
                document.getElementById("duration").value = duration.toFixed(1);

            });
        } else {
            document.getElementsByClassName("openSettings")[0].addEventListener("click", toggleVisibility, false);
            document.getElementsByClassName("closeSettings")[0].addEventListener("click", toggleVisibility, false);
            document.getElementById("save").addEventListener("click", saveSettings, false);
            document.getElementById("reset").addEventListener("click", resetSettings, false);
        }
    }

    function calcDuration() {
        var dur,height =  $('#addsong').offset().top -  $(document).scrollTop() - window.innerHeight;
        var lines = height / fontSize * 1.4;
        if (lines > 0)
            dur = (lines * 2.5).toFixed(1);
        else
            dur = 0.5;
        return dur;
    }

    function toggleVisibility() {
        var selected = document.getElementsByClassName("settings")[0];
        if (selected.style.display == 'block')
            selected.style.display = 'none';
        else
            selected.style.display = 'block';
    }

    function saveSettings() {
        fontSize = document.getElementById("fontSize").value;
        fontGlowColor = document.getElementById("fontGlowColor").value;
        linkGlowColor = document.getElementById("linkGlowColor").value;
        boldFontGlowColor = document.getElementById("boldFontGlowColor").value;
        backgroundColor = document.getElementById("backgroundColor").value;
        if (document.getElementById("duration").value !== duration) {
            duration = document.getElementById("duration").value;
            GM_setValue(path, duration);
        }
        GM_setValue("fontSize", fontSize);
        GM_setValue("fontGlowColor", fontGlowColor);
        GM_setValue("linkGlowColor", linkGlowColor);
        GM_setValue("boldFontGlowColor", boldFontGlowColor);
        GM_setValue("backgroundColor", backgroundColor);
    }

    function resetEverything() {
        var keys = GM_listValues();
        alert(keys + keys.length);
        for (var i = 0; i < keys.length; i++) {
            GM_deleteValue(keys[i]);
        }
    }

    function resetSettings() {
        GM_deleteValue(path);
        GM_deleteValue("fontSize");
        GM_deleteValue("fontGlowColor");
        GM_deleteValue("linkGlowColor");
        GM_deleteValue("boldFontGlowColor");
    }

    var timer;
    function animate(elem, style, unit, from, to, time, prop) {
        if (!elem) return;
        var start = new Date().getTime();
        timer = setInterval(function() {
            var step = Math.min(1, (new Date().getTime() - start) / time);
            if (prop) {
                elem[style] = (from + step * (to - from)) + unit;
            } else {
                elem.style[style] = (from + step * (to - from)) + unit;
            }
            if (step == 1) {
                $(".start").toggle();
                clearInterval(timer);
            }
        }, 25);
        elem.style[style] = from + unit;
    }

    function scrollDown(duration) {
        var target = document.getElementById("addsong");
        animate(document.body, "scrollTop", "", document.body.scrollTop, target.offsetTop - window.innerHeight, duration, true);
    }

})();