Slack Full Theme plugin

Applies the side bar colors for slack to the entire application

2015-11-15 기준 버전입니다. 최신 버전을 확인하세요.

이 스크립트를 설치하려면 Tampermonkey, Greasemonkey 또는 Violentmonkey와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 Tampermonkey와 같은 확장 프로그램을 설치해야 합니다.

이 스크립트를 설치하려면 Tampermonkey 또는 Violentmonkey와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 Tampermonkey 또는 Userscripts와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 Tampermonkey와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 유저 스크립트 관리자 확장 프로그램이 필요합니다.

(이미 유저 스크립트 관리자가 설치되어 있습니다. 설치를 진행합니다!)

이 스타일을 설치하려면 Stylus와 같은 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 Stylus와 같은 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 Stylus와 같은 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 유저 스타일 관리자 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 유저 스타일 관리자 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 유저 스타일 관리자 확장 프로그램이 필요합니다.

(이미 유저 스타일 관리자가 설치되어 있습니다. 설치를 진행합니다!)

// ==UserScript==
// @name         Slack Full Theme plugin
// @namespace    http://mrkannah.com/
// @version      1.0.2
// @description  Applies the side bar colors for slack to the entire application
// @author       Fadee Kannah
// @match        https://*.slack.com/*
// @grant        GM_setValue
// @grant        GM_getValue
// @run-at       document-end
// ==/UserScript==

$(document).ready(function(){
    var checkInterval = setInterval(function(){
        if(Ready()){
            var colors = GM_getValue('ST_Colors').toString().split(',');
            clearInterval(checkInterval);
            if(colors){
                setUp(colors);
            }
            else{
                setTimeout(function(){
                    colors = getColors();
                    setTimeout(setUp(colors),300);
                },100);
            }
        }
    },200);
});

function setUp(colors){
    applyColors(colors);
    addListner();
}

function Ready(){
    return parseInt($('#loading_welcome').css('opacity')) ? 0 : 1;
}

function getColors(){
    $('#team_menu')[0].click();
    $('#member_prefs_item > a')[0].click();
    var colors = $('#sidebar_theme_custom').val().toString().split(',');
    $('.dialog_go ')[0].click();
    return colors;
    /* Array Index
0 Col BG
1 Menu BG
2 Active Item
3 Active Text
4 Hover Item
5 Text Color
6 Active precesne
7 mention Badge
*/
}

function applyColors(colors){
    GM_setValue('ST_Colors',colors);
    console.log(colors);
    var head = document.getElementsByTagName('head')[0];
    var style = document.createElement('style');
    style.type = 'text/css';
    style.id = 'fullThemePlugin';

    //header & footer styles
    style.innerHTML = '#header{ background:'+colors[1]+'}' +
        '#end_div{background:'+colors[1]+'}' +
        '#channel_members_toggle{ background:'+colors[1]+'!important}'+
        '#footer{background:'+colors[0]+'}'+
        '#primary_file_button:hover {background:'+colors[4]+';color: '+colors[5]+';border-color:'+colors[4]+'}';

    //divier styles
    style.innerHTML +='.day_divider{background:'+colors[0]+' !important}' +
        '.day_divider_label{background:'+colors[0] +'!important;color:'+colors[3]+'}';

    //messages styles
    style.innerHTML += '.msgs_holder{background:'+colors[0]+'}'+
        '.mention{color:'+colors[1]+';background:'+colors[7]+'!important}' +
        '.light_theme .message_sender {color:'+colors[3]+' !important}' +
        '.message_content{color:'+colors[5]+'}';

    //Global Styles
    style.innerHTML += 'a{color:'+colors[2]+'!important}'+
        '.msg_inline_file_preview_title{color:'+colors[2]+'!important}'+
        'body{background:'+colors[0]+'}';

    //scroll bar styles
    style.innerHTML += '.monkey_scroll_handle_inner{background:'+colors[2]+'!important;border:0!important}' +
        '.monkey_scroll_handle{position:relative;left:-1px!important;width:10px!important}';

    head.appendChild(style);

    return $(style);

}

function addListner(){
    $('#team_menu').on('click',function(){
        $('#member_prefs_item > a').on('click',function(){
            setTimeout(function(){
                $('.color_hex').on('input',function(){
                    changeColors();
                });
                $('input[name="sidebar_theme_rd"]').on('change',function(){
                    changeColors();
                });
                $('#sidebar_theme_custom').on('input change',function() {
                    changeColors();
                });
                $('.color_swatch').on('click', function(){
                    setTimeout(function(){
                        changeColors();
                    },700);
                });
            },500);
        });
    });
}

function changeColors(){
    var colors = $('#sidebar_theme_custom').val().split(',');
    $('#fullThemePlugin').remove();
    applyColors(colors);
}