Skip to content

Instantly share code, notes, and snippets.

@WouterG

WouterG/globalmods.js

Last active June 28, 2017 07:09
Show Gist options
  • Save WouterG/8462cf38c5c705b86c037a1536267eef to your computer and use it in GitHub Desktop.
Save WouterG/8462cf38c5c705b86c037a1536267eef to your computer and use it in GitHub Desktop.
Download ZIP
Whatsapp fullscreen modification
Raw
globalmods.js
// ==UserScript==
// @name GLOBAL MODS
// @namespace http://wouto.net/
// @version 2.0
// @description Some mods to the LocalStorage engine, an ImageLoader and a StyleUtil, which is effective on all sites that Tampermonkey is allowed to run on
// @author Wouter
// @match *://*/*
// @grant none
// ==/UserScript==
Storage.prototype.has = function(key) {
return localStorage[key] !== undefined;
};
Storage.prototype.remove = function(key) {
if (localStorage.has(key)) {
delete localStorage[key];
}
};
window.ImageLoader = function(url, callback) {
var image = new Image();
image.onload = function () {
callback(url, true);
};
image.onerror = function () {
callback(url, false);
};
image.src = url;
};
window.StyleUtil = function(className) {
var styles = [];
var that = this;
var classNameInternal = 'StyleUtil_element_' + className;
this.add = function(rule) {
styles.push(rule);
};
this.render = function() {
that.remove();
var s = '<style type="text/css">\n';
for (var i = 0; i < styles.length; i++) {
s += styles[i] + '\n';
}
s += '</style>';
var element = $(s).addClass(classNameInternal)[0];
$('head').append(element);
};
this.clear = function() {
styles = [];
};
this.remove = function() {
$('.' + classNameInternal).remove();
};
};
Raw
whatsapp.js
// ==UserScript==
// @name Fullscreen Whatsapp & Themes
// @namespace http://wouto.net/
// @version 2.0-SNAPSHOT
// @description Dark theme, and bg/theme selector.
// @author Wouter Gerarts
// @match *://web.whatsapp.com/*
// @grant none
// ==/UserScript==
window.__imgur_cache_images = [
"https://i.imgur.com/bly1s2B.png"
];
window.__background_selection = [
[ "https://i.imgur.com/dqJ8g3n.jpg", [ 0 , 255, 0 ] ],
[ "https://i.imgur.com/WSEJKg5.jpg", [ 255, 25 , 255 ] ],
[ "https://i.imgur.com/erKwTY0.jpg", [ 255, 255, 0 ] ],
[ "https://i.imgur.com/h7nJ44B.jpg", [ 255, 25 , 255 ] ],
[ "https://i.imgur.com/ruV4cps.jpg", [ 255, 255, 0 ] ],
[ "https://i.imgur.com/Tphq748.jpg", [ 255, 50 , 50 ] ],
[ "https://i.imgur.com/gifwjKH.jpg", [ 255, 255, 0 ] ],
[ "https://i.imgur.com/cvcBVAS.jpg", [ 200, 200, 255 ] ],
[ "https://i.imgur.com/QaycXbo.jpg", [ 255, 128, 0 ] ],
[ "https://i.imgur.com/zYWzqMC.jpg", [ 0 , 170, 255 ] ],
[ "https://i.imgur.com/4Xemev8.jpg", [ 0 , 255, 0 ] ],
[ "https://i.imgur.com/v6JN8SV.jpg", [ 255, 225, 50 ] ],
[ "https://i.imgur.com/u0XxHbj.jpg", [ 240, 180, 15 ] ],
[ "https://i.imgur.com/6Zfe7Fm.jpg", [ 170, 255, 0 ] ],
[ "https://i.imgur.com/FeSkieh.jpg", [ 0 , 170, 255 ] ],
[ "https://i.imgur.com/YoExKu2.jpg", [ 200, 100, 20 ] ]
];
window.loadNewTheme = function(themeData) {
if (!Array.isArray(themeData)) {
return;
}
if (themeData.length < 2) {
return;
}
if (typeof themeData[0] != 'string') {
return;
}
if (!Array.isArray(themeData[1])) {
return;
}
if (themeData[1].length < 3) {
return;
}
for (var c = 0; c < 3; c++) {
if (typeof themeData[1][c] != 'number') {
return;
}
}
window.__background_selection.push(themeData);
var s = document.getElementsByClassName('icon-theme');
for (var j = 0; j < s.length; j++) {
s[j].remove();
}
console.log('loaded ' + themeData[0]);
};
function additionalThemeLoader() {
if (!localStorage.has('WoutoTheme_additionalThemes')) {
return;
}
var add = localStorage.getItem('WoutoTheme_additionalThemes');
add = JSON.parse(add);
if (!Array.isArray(add)) {
return;
}
for (var i = 0; i < add.length; i++) {
var e = add[i];
loadNewTheme(e);
}
}
additionalThemeLoader();
for (var i = 0; i < window.__background_selection.length; i++) {
var url = window.__background_selection[i][0];
new ImageLoader(url, function(u, s) {
if (s) {
console.log("[BACKGROUND] loaded " + u);
} else {
console.log("[BACKGROUND] failed loading " + u);
}
});
}
for (var i = 0; i < window.__imgur_cache_images.length; i++) {
var url = window.__imgur_cache_images[i];
new ImageLoader(url, function(u, s) {
if (s) {
console.log('[CACHE] loaded ' + u);
} else {
console.log('[CACHE] failed loading ' + u);
}
});
}
var s = Math.floor(Math.random() * window.__background_selection.length);
if (localStorage.has('WoutoTheme_themeIndex')) {
s = localStorage.getItem('WoutoTheme_themeIndex');
}
window.__chosen_background_index = s;
if (window.__chosen_background_index >= window.__background_selection.length) {
window.__chosen_background_index = 0;
}
window.__selected_background = window.__background_selection[window.__chosen_background_index];
var themeSelectHtml = '<div class="theme-select-window" style="left: 0px; right: 0px; height: 329px; position: absolute; top: 0px;z-index: 10000; background: rgb(0, 0, 0);"><div class="theme-menu-header" style="width: 100%; background: rgb(20, 20, 20); color: #eee; height: 59px;vertical-align: middle;"><div class="theme-menu-header-padding" style="padding: 10px;vertical-align: baseline;font-size: 16px;font-weight: 400;line-height: 19px;padding-top: 18px;display: block;float: left;"><button id="theme-menu-close-button"><span class="icon icon-x" style="-webkit-filter: invert(1)"></span></button><div class="theme-menu-header-text" style="top: 20px;position: absolute;left: 48px;">Select Theme</div></div></div><div id="theme-menu-content" style="position: absolute;left: 0px;top: 59px;bottom: 0px;width: 100%; overflow-x: scroll; overflow-y: hidden;"><div id="theme-menu-theme-container" style="margin: 10px;left: 0px;top: 0px;height: 250px; display: inline-flex;"></div></div></div>';
var themeSelectSingle = '<div class="theme-background-selectable" bg-id=0 style="background-size: contain;height: 210px;position: relative;float: left;width: 380px;"><div class="theme-background-image" style="position: absolute;left: 0px;top: 0px;height: 100%;width: 100%;background: url(https://i.imgur.com/dqJ8g3n.jpg);background-size: cover;background-position:center;"></div></div>';
var themeSelectImages = [];
window.globalcss = new StyleUtil('globalcss');
window.themecss = new StyleUtil('themecss');
window.awaitAppendMenus = function($) {
function appendMenus() {
setInterval(function() {
if ($(".pane-chat-controls").find('.icon-theme').length < 1) {
for (var i = 0; i < window.__background_selection.length; i++) {
var k = window.__background_selection[i][0];
var e = $(themeSelectSingle)[0];
$(e).attr('bg-id', i);
if (i == window.__chosen_background_index) {
$(e).addClass('theme-selected');
}
$(e).children().css('background', 'url(' + k + ')').css('background-size', 'cover').css('background-position', 'center');
themeSelectImages[i] = e;
}
var themeSelectDiv = $(themeSelectHtml).css('display', 'none');
for (var k2 = 0; k2 < themeSelectImages.length; k2++) {
$(themeSelectDiv).find('#theme-menu-theme-container').append(themeSelectImages[k2]);
}
$("#main").append(themeSelectDiv);
$("#theme-menu-close-button").click(window.toggleThemeMenu);
$(".theme-background-selectable").click(function() {
var id = $(this).attr('bg-id');
window.__selected_background = window.__background_selection[id];
localStorage.setItem('WoutoTheme_themeIndex', id);
window.applyThemeColorChanges();
$(".theme-background-selectable").removeClass('theme-selected');
$(this).addClass('theme-selected');
});
var menuHtml = '<div class="menu-item"><button class="icon-theme"style="-webkit-filter:invert(0);text-indent:-5000px;width:24px;height:24px;background:url(https://i.imgur.com/bly1s2B.png);">Theme</button></div>';
var menu = $(menuHtml);
$(".pane-chat-controls").children().append(menu);
$('.icon-theme').click(window.toggleThemeMenu);
}
}, 500);
}
function await() {
if (($(".pane-chat-controls").length > 0)) {
appendMenus();
} else {
setTimeout(await, 500);
}
}
await();
};
window.getColorTone = function(c, a) {
var r = window.__selected_background[1][0] * c;
var g = window.__selected_background[1][1] * c;
var b = window.__selected_background[1][2] * c;
r = (r > 255) ? 255 : r < 0 ? 0 : r;
g = (g > 255) ? 255 : g < 0 ? 0 : g;
b = (b > 255) ? 255 : b < 0 ? 0 : b;
r = Math.round(r);
g = Math.round(g);
b = Math.round(b);
if (typeof a === "number") {
return 'rgba(' + r + ', ' + g + ', ' + b + ', ' + a + ')';
} else {
return 'rgb(' + r + ', ' + g + ', ' + b + ')';
}
};
(function() {
var script = document.createElement("script");
script.src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js';
script.type = 'text/javascript';
document.getElementsByTagName("head")[0].appendChild(script);
var checkReady = function(callback) {
if (window.jQuery) {
if (window["$"] === undefined) {
window["$"] = window.jQuery;
}
callback(jQuery);
}
else {
window.setTimeout(function() { checkReady(callback); }, 100);
}
};
checkReady(function($) {
window.applyThemeColorChanges = function() {
var css = window.themecss;
css.remove();
css.clear();
css.add('*::-webkit-scrollbar-track{background:' + window.getColorTone(1, 0.3) + ' !important;}');
css.add('#main { width: inherit !important; background-image: url(' + window.__selected_background[0] + ') !important; background-size: cover; background-position: center; }');
css.add('.bubble.bubble-attach { background: rgba(0, 0, 0, 0.6) !important; color: #fff !important; border-radius: 8px !important; border: 1px solid ' + window.getColorTone(0.7, false) + ' !important; }</style>');
css.add('.bubble.bubble-text { border-radius: 8px !important; border: 1px solid ' + window.getColorTone(0.7, false) + ' !important; }</style>');
css.add('.bubble-image { border-radius: 8px !important; border: 1px solid ' + window.getColorTone(0.7, false) + ' !important; background-color: rgba(0, 0, 0, 0.6) !important; }</style>');
css.add('.message-datetime { color: ' + window.getColorTone(1.25, false) + ' !important; }</style>');
css.add('.chat-time { color: ' + window.getColorTone(1.25, false) + ' !important; }</style>');
css.add('.cont-input-search { border: 2px solid ' + window.getColorTone(0.8, false) + ' !important; }</style>');
css.render();
};
window.toggleThemeMenu = function() {
if ($('.theme-select-window').hasClass('theme-select-window-active')) {
$('.theme-select-window').removeClass('theme-select-window-active').css('display', 'none');
} else {
$('.theme-select-window').addClass('theme-select-window-active').css('display', 'inherit');
}
};
window.awaitAppendMenus($);
window.applyThemeColorChanges();
var css = window.globalcss;
css.clear();
css.add('.message-out .message-meta { right: 8px !important; }');
css.add('.message-in .message-meta { right: 7px !important; }');
css.add('.drawer .pane-header { background-color: rgb(17, 17, 17) !important; }');
css.add('.context.context-in { background: none !important; -webkit-filter: invert(1) !important; top: 0 !important; right: 0 !important;');
css.add('.context.context-out { background: none !important; -webkit-filter: invert(1) !important; top: 0 !important; right: 32px !important;');
css.add('.drawer .pane-header .header-close span { -webkit-filter: invert(1) !important; }');
css.add('.drawer .header-body .header-title { color: rgb(230, 230, 230) !important; }');
css.add('.drawer .header-body .header-secondary { color: lightgray !important; }');
css.add('.drawer .drawer-body { background: rgb(40, 40, 40) !important; }');
css.add('.pane-chat-msgs { margin: 0 !important; }');
css.add('.message.message-out { padding-right: 30px !important; }');
css.add('.message.message-in { padding-left: 30px !important; }');
css.add('.msg-unread { margin: 0 0 10px 0 !important; background: rgba(0, 0, 0, 0.5) }');
css.add('.tail-container { display: none !important; }');
css.add('.msg { padding-left: 0 !important; padding-right: 0 !important; }');
css.add('#side { width: 500px !important; }');
css.add('.theme-select-window-active { display: inherit !important; }');
css.add('.theme-select-window { display: none; }');
css.add('.theme-background-selectable { margin: 10px; }');
css.add('.theme-background-selectable:hover { margin: 4px; border: 6px solid rgb(110, 220, 255); }');
css.add('.theme-selected { margin: 0px !important; border: 10px solid rgb(50, 180, 255) !important; }');
css.add('.icon-status-check { -webkit-filter: invert(1) !important; }');
css.add('.icon-status-dblcheck { -webkit-filter: invert(1) !important; }');
css.add('.chat:after{border-bottom: 1px solid #333 !important; left: 0px !important; width: 100% !important;}');
css.add('.message-in:before{opacity:0.0 !important;} .message-out:before{opacity:0.0 !important;}');
css.add('.app.two { left: 0px !important; top: 0px !important; width: 100% !important; height: 100% !important; }');
css.add('.pane.pane-intro { width: inherit !important; }');
css.add('.pane-body .pane-chat-body { padding: 17px 0px 8px !important; }');
css.add('.message { background: none !important; max-width: 50% !important; box-shadow: none !important; }');
css.add('.message-system { max-width: 100% !important; }');
css.add('.message-system-body { background-color: rgba(0, 0, 0, 0.8) !important; color: #fff }');
css.add('.msg.msg-unread.message.msg-wide { max-width: inherit !important; }');
css.add('.msg.msg-unread.message.msg-wide { background-color: rgba(0, 0, 0, 0.5) !important; }');
css.add('.msg-unread-body { background-color: #222 !important; color: #fff !important; }');
css.add('.block-compose { background-color: rgba(0, 0, 0, 0.7) !important; }');
css.add('.input-container { background-color: rgba(0, 0, 0, 0.9) !important; color: #fff !important; }');
css.add('.bubble.bubble-text { background: rgba(0, 0, 0, 0.6) !important; color: #fff !important; }');
css.add('.bubble { border-radius: 8px; background-color: rgba(0, 0, 0, 0.6); }');
css.add('.emojitext.selectable-text { color: #fff !important; }');
css.add('.screen-name-text { color: #ccc !important; }');
css.add('.pane-header.pane-chat-header { background-color: rgba(0, 0, 0, 0.5) !important; color: #fff !important; }');
css.add('.chat-title { color: #fff !important; }');
css.add('.chat-status { color: #aaa !important; }');
css.add('.chat { background-color: #111 !important; }');
css.add('.pane-body.pane-list-body { background-color: #333 !important; }');
css.add('.active.chat { border-bottom: 1px solid #333 !important; }');
css.add('.pane.pane-intro { background-color: #000 !important; }');
css.add('.pane-header.pane-list-header { background-color: #111 !important; }');
css.add(' button.icon { -webkit-filter: invert(1) !important; }');
css.add(' button.icon-search-morph { -webkit-filter: invert(0) !important; }');
css.add('.pane-subheader.pane-list-subheader.subheader-search { background-color: #111 !important; }');
css.add('.cont-input-search { background-color: #333 !important; }');
css.add('.input.input-search { background-color: #333 !important; color: #eee !important; }');
css.add('.list-title { background-color: #000 !important; font-weight: bold !important; }');
css.add('.active.chat { background-color: rgb(35, 35, 35) !important; }');
css.add('.hover.chat { background-color: rgb(17, 35, 35) !important; }');
css.add('.icon.icon-down.btn-context { -webkit-filter: invert(1) !important; }');
css.add('.pane-chat-body { background: rgba(0, 0, 0, 0.3) !important; }');
css.add('.pane-chat-tile { background: rgba(0, 0, 0, 0.0) !important; }');
css.add('.pane-body.pane-chat-tile-container { background: rgba(0, 0, 0, 0.0) !important; }');
css.add('.theme-background-selectable { margin: 5px; }');
css.add('.theme-background-selectable.theme-selected { margin: 0px; border: 5px solid #944018; }');
css.render();
function fixCSS() {
try {
$(".app.two")
.css('left', '0px')
.css('top', '0px')
.css('width', '100%')
.css('height', '100%');
} catch (k) {}
try {
$("#main")
.css('width', 'inherit')
.css('background-image', 'url(http://i.imgur.com/dqJ8g3n.jpg)');
} catch (e) {}
try { $(".context-out.context").css('background', 'none').css('filter', 'invert(1)'); } catch (k) { }
try { $(".context-in.context").css('background', 'none').css('filter', 'invert(1)'); } catch (k) { }
try { $(".pane.pane-intro").css('width', 'inherit');} catch(k) { }
try { $(".pane-body .pane-chat-body").css('padding', '17px 30px 8px');} catch(k) { }
try { $(".msg").css('padding-left', '0').css('padding-right', '0'); } catch (k) { }
try { $(".message").css('max-width', '50%').css('background', 'none').css('box-shadow', 'none'); } catch(k) { }
try { $(".msg.msg-unread.message.msg-wide").css('max-width', 'inherit');} catch(k) { }
try { $(".drawer-container-mid.flow-drawer-container").css('width', $(".pane-body.pane-chat-body.lastTabIndex")[0].getBoundingClientRect().width + 'px');} catch(k) { }
try { $(".msg.msg-unread.message.msg-wide").css('background-color', 'rgba(0, 0, 0, 0.5)');} catch(k) { }
try { $(".msg-unread-body").css('background-color', '#222').css('color', '#fff');} catch(k) { }
try { $(".block-compose").css('background-color', 'rgba(0, 0, 0, 0.7)');} catch(k) { }
try { $(".input-container").css('background-color', 'rgba(0, 0, 0, 0.9)').css('color', '#fff');} catch(k) { }
try { $(".bubble").css('background-color', 'rgba(0, 0, 0, 0.6)'); } catch (k) { }
try { $(".bubble.bubble-text").css('background-color', 'none').css('color', '#fff');} catch(k) { }
try { $(".bubble.bubble-attach").css('background-color', 'none').css('color', '#fff');} catch(k) { }
try { $(".bubble.bubble-attach").find('span').filter(function() { return $(this).text() !== ""; }).css('color', '#fff'); } catch (k) { }
try { $(".emojitext.selectable-text").css('color', '#fff');} catch(k) { }
try { $(".screen-name-text").css('color', '#ccc');} catch(k) { }
try { $(".bubble.bubble-text").css('border-radius', '8px');} catch(k) { }
try { $(".bubble-image").css('border-radius', '5px').css('background-color', 'none');} catch(k) { }
try { $(".message-datetime").css('color', 'rgb(0, 255, 150)');} catch(k) { }
try { $(".pane-header.pane-chat-header").css('background-color', 'rgba(0, 0, 0, 0.5)').css('color', '#fff');} catch(k) { }
try { $(".chat-title").css('color', '#fff');} catch(k) { }
try { $(".chat-status").css('color', '#aaa');} catch(k) { }
try { $(".chat").css('background-color', '#111'); } catch (k) { }
try { $(".pane-body.pane-list-body").css('background-color', '#333'); } catch (k) { }
try { $(".active.chat").css('border-bottom', '1px solid #333'); } catch (k) { }
try { $(".pane.pane-intro").css('background-color', '#000'); } catch (k) { }
try { $(".intro-image").remove(); } catch (k) { }
try { $(".pane-header.pane-list-header").css('background-color', '#111'); } catch (k) { }
try { $("button.icon").css('-webkit-filter', 'invert(1)'); } catch (k) { }
try { $("button.icon-search-morph").css('-webkit-filter', 'invert(0)'); } catch (k) { }
try { $(".pane-subheader.pane-list-subheader.subheader-search").css('background-color', '#111'); } catch (k) { }
try { $(".cont-input-search").css('background-color', '#333'); } catch(k) { }
try { $(".input.input-search").css('background-color', '#333').css('color', '#eee'); } catch (k) { }
try { $(".list-title").css('background-color', '#000').css('font-weight', 'bold'); } catch (k) { }
try { $(".chat-time").css('color', 'rgb(0, 255, 200)'); } catch (k) { }
try { $(".cont-input-search").css('border', '2px solid #0a6'); } catch (k) { }
try { $(".active.chat").css('background-color', 'rgb(35, 35, 35)'); } catch (k) { }
try { $(".hover.chat").css('background-color', 'rgb(17, 35, 35)'); } catch (k) { }
try { $(".icon.icon-down.btn-context").css('-webkit-filter', 'invert(1)'); } catch (k) { }
try { $('.pane-chat-tile').css('background', 'rgba(0, 0, 0, 0)'); } catch (k) { }
try { $('.pane-body.pane-chat-tile-container').css('background', 'rgba(0, 0, 0, 0)'); } catch (k) { }
}
window.style_timer = setInterval(fixCSS, 5000);
for (var asdf = 0; asdf < 100; asdf++) {
setTimeout(fixCSS, asdf * 50);
}
});
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment