☰

Decreased Productivity Plus

Makes webpages more discreet

目前為 2016-08-11 提交的版本，檢視 最新版本。

// ==UserScript==
// @name         Decreased Productivity Plus
// @icon         http://i.imgur.com/ffgP58A.png
// @namespace    skoshy.com
// @version      0.6
// @description  Makes webpages more discreet
// @author       Stefan Koshy
// @match        http*://*.messenger.com/*
// @match        http*://*.slack.com/messages/*
// @grant        GM_getValue
// @grant        GM_setValue
// ==/UserScript==

var currentSite = '';

var css = {};
css.defaults = {};

css.defaults.imageOpacity = '.05';
css.defaults.imageOpacityHover = '.4';

css.defaults.imageOpacitySmall = '.2';
css.defaults.imageOpacitySmallHover = '.55';

css.common = {};
css.common.css = `
html {
  transition: opacity .1s ease-in-out;
}

html.unfocused {
  opacity: .1;
}

html, body, div, p, span, a {
   font-family: Arial, sans-serif !important;
   font-size: 13px !important;
   font-weight: 400 !important;
   color: #222 !important;
   background-color: transparent;
}
`;
css.messenger = {};
css.messenger.css = `
._55lt img, /* Left hand avatars */
._4ld- div[style]:not([class]), /* Left hand avatars (group icons) */
._3xn1, /* Link Thumbnails */
._4tsk, /* Photo Messages */
.img, /* Other images */
[role="img"], /* more images */
._2pon /* Little blue messenger overlays */
{opacity: {{imageOpacity}};}

._55lt img:hover,
._4ld- div[style]:not([class]):hover,
._3xn1:hover,
._4tsk:hover,
.img:hover,
[role="img"]:hover,
._2pon:hover
{opacity: {{imageOpacityHover}};}

._1a-, /* small fb emojis */
.emoticon, /* embedded-in-messages emoji */
._5qi2 /* medium fb emojis standalone */
{opacity: {{imageOpacitySmall}};}

._1a-:hover,
.emoticon:hover,
._5qi2:hover,
{opacity: {{imageOpacitySmallHover}};}

/* Unread Messages override */
._1ht3 * { font-weight: bold !important; }

._52mr              /* Get rid of messages background */
{ background-color: transparent !important; }

._hw2 ._53ij                     /* "Delete" Message Background Fix */
,.uiTooltipX .tooltipContent     /* Various Tooltips */
{background-color: rgba(0,0,0,.1) !important;}
`;

css.slack = {};
css.slack.css = `
#col_channels_bg, #col_channels, #team_menu, #quick_switcher_btn, #team_menu_overlay, #col_channels_overlay {
  background: #f9f9f9;
} /* sidebar background */

#col_channels h2 {
  color: black !important;
} /* section headers in sidebar */

#channels_scroller.show_which_channel_is_active ul li.active a.channel_name, #channels_scroller.show_which_channel_is_active ul li.active a.group_name, #channels_scroller.show_which_channel_is_active ul li.active a.im_name, #channels_scroller.show_which_channel_is_active ul li.active a.mpim_name, #channels_nav ul li.unread_link.active a {
  background: #eee;
} /* highlighted things in slack, like the current tab you're looking at */

body:not(.sorting_mode) .channels_list_holder ul li a:hover, #monkey_scroll_wrapper_for_channels_scroller .monkey_scroll_bar,
body:not(.loading) #team_menu:hover, body:not(.loading) #team_menu.active, #quick_switcher_btn:hover, #quick_switcher_btn:active {
  background: #ddd;
} /* highlighted things, hovering over them */

#msgs_div img, /* most images */
#msgs_div .member_image /* avatars in message panel */
{opacity: {{imageOpacity}};}

#msgs_div img:hover,
#msgs_div .member_image:hover
{opacity: {{imageOpacityHover}};}
`;


function addGlobalStyle(css, id, enabled) {
    var head, style;
    head = document.getElementsByTagName('head')[0];
    if (!head) { return; }
    style = document.createElement('style');
    style.type = 'text/css';
    style.innerHTML = css;
    style.id = id;
    head.appendChild(style);
    style.disabled = !enabled;
}

function parseCSS(parsed) {
    for (attribute in css.defaults) {
        exceptionToReplace = new RegExp('{{'+attribute+'}}', 'g');
        parsed = parsed.replace(exceptionToReplace, css['defaults'][attribute]);
    }

    return parsed;
}

document.addEventListener("keydown", function(e) {
    if (e.altKey === true && e.code == 'KeyI') {
        // toggle style
        var cssEl = document.getElementById('dpplus-css');

        if (cssEl.disabled === false) {
            cssEl.disabled = true;
            GM_setValue( 'enabled_'+currentSite , false );
        } else {
            cssEl.disabled = false;
            GM_setValue( 'enabled_'+currentSite , true );
        }
    }
});

function getSetCurrentSite() {
    var domain = document.domain;

    if (domain.indexOf('messenger.com') != -1) currentSite = 'messenger';
    if (domain.indexOf('slack.com') != -1) currentSite = 'slack';
}

function init() {
    getSetCurrentSite();

    var styleEnabled = GM_getValue( 'enabled_'+currentSite , true );

    addGlobalStyle(parseCSS(
        css.common.css + css[currentSite].css
    ), 'dpplus-css', styleEnabled);

    // this is sometimes unreliable, so below we'll set an interval to check if we lost focus
    addEvent(window, "mouseout", function(e) {
        e = e ? e : window.event;
        var from = e.relatedTarget || e.toElement;

        if (!from || from.nodeName == "HTML") {
            // the cursor has left the building
            hideHtml();
        } else {
            showHtml();
        }
    });
}


function hideHtml() {
    document.querySelector('html').classList.add('unfocused');
}

function showHtml() {
    document.querySelector('html').classList.remove('unfocused');
}

init();

/*
* Utility functions
*/


function addEvent(obj, evt, fn) {
    if (obj.addEventListener) {
        obj.addEventListener(evt, fn, false);
    }
    else if (obj.attachEvent) {
        obj.attachEvent("on" + evt, fn);
    }
}