NOTICE: By continued use of this site you understand and agree to the binding Terms of Service and Privacy Policy.
// ==UserScript==
// @name Eggplant Like
// @namespace https://openuserjs.org/users/Spacebat
// @description Replace Twitter's heart icon with a friendly eggplant. Known in some countries as an aubergine!
// @license MIT; http://opensource.org/licenses/MIT
// @homepageURL https://twitter.com/MC_Spacebat/
// @supportURL https://twitter.com/MC_Spacebat/
// @updateURL https://openuserjs.org/meta/Spacebat/Eggplant_Like.meta.js
// @include /^(?:http(?:s)?:\/\/)?(?:[^\.]+\.)?twitter\.com(?:\/.*)?$/
// @version 2.1.2
// @grant GM_getResourceURL
// @grant GM_addStyle
// @resource eggplant http://i.imgur.com/F5iUPgR.png
// ==/UserScript==
// ==OpenUserJS==
// @author Spacebat
// ==/OpenUserJS==
// I'd like to not use any external resources, but the background for the "like" animation is really big when converted into a base64 data URI. It more than doubles the length of this script.
const eggplant_svg = 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 42.050384 44.999999"><defs><clipPath id="a"><path d="M0 38h38V0H0v38z"/></clipPath></defs><g clip-path="url(%23a)" transform="matrix(1.25 0 0 -1.25 -2.95 46.25)"><path d="M7 33c3 0 5-2 8-6s7.957-7.19 12-8c5-1 9-5 9-11 0-4.897-3.846-7-9-7-5 0-9 3-14 8S3 23 3 27s1 6 4 6" fill="%23744eaa"/><path d="M4.515 37c1.248 0 1.248-1.248 1.248-2.495 0-1.764 1.247-1.13 2.495-1.13C9.505 33.376 12 31 12 31H8.258c-1.248 0 0-2.614-1.248-2.614-1.247 0-1.247 1.188-2.495 1.188S3 26 3 26s-1.604 4.153.267 6.024C4.515 33.272 2.02 37 4.515 37" fill="%2377b255"/></g></svg>';
const eggplant_dogear = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAAjVBMVEUAAAB0Tqt2T6qhdth0TqpzTat6Uq+RacecdNWfdtiVbMx1T6q5jvS3i/GXb9CofuJ1T6u5jvOiedybc9SRasmacdN0Tqq1i/GvhOiBWriyh+x3Ua2Rach5Uq+uheiqgeSLY8N5Uq64jfSDXLqnfeB1T6qlfN+fdtiLY8Kxhuu3jPGvhOmXbs93UK2ZctLDqYXZAAAADHRSTlMA93u2+IV/nLC1oYGB2F7hAAAAiUlEQVR4Xm3QRw4CMRBE0QZMLs8MOecc7388wKIku3v+9qk2JfVxaU6kWgoVoWRXBZRs894lQJkD00UMlDWAcxEBpQ8AgwgoQ/waFRqkMQmSzzRIE6FevlylIC3889sUpEbZHwhajgQtnqDFnzRIO8CFi6jO7f54vgzwa4ISghGCFYIVghVH0HU/5gEUdIKz+kkAAAAASUVORK5CYII="
const eggplant_retweet_dogear = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAA/1BMVEUAAAAZz4Z2T6pFj5eRacdzTaucdNWhdth6Uq8Zz4a5jvQZz4aM58MXz4WR6MaXb9Aaz4YVzoRGjpcSzoILzH6R6MUUzoN1T6sx1JMTzoODm7g21ZWP6MVorryT6MYx1JKE5r8TzoIw1JKvhOgYz4UWz4WuhehS26R+5LyqgeRh3qxt4bMy1JR3Ua21i/FgprOLY8Ju4bR0Tqp5Uq6S6Mac6syyh+yZctId0IhJ2Z8U0YWRasmW6siW6cge0Ilr4LFR26SBm7eT6cc01ZRe3auiedyN58Nyl6+E5b8y1JMWz4Re3qqacdNx4bWlfN9f3quX6ciO58RX3KcWzoSbc9TQxjDfAAAACnRSTlMAgHv8nIWwtn+HU2mTFAAAAMxJREFUeF51zUWSwzAARNFOMigwh5mZB5mZ4f5niZQpVcku6y/7LRqbi9hSQDIOvBMosWf6TimU2P3DpbZTKDkgpDn+h8IFF6CkQwj5yEq4vrnNCFByT0R/Ah6ZVZSg5JTI3rLeuxUC7EzWMvXnEcCGhLIfDC2rEbgaYEvsR8fdXqk0uBpxaG2XM9Wz82/G9vYv89BLtJy7ygNj6afnF4SF89cKS9dyeYqItPnnVy1Xpwo0cX6KYleg/7i/VEFY6DqYBCaBSWASmASGdld/RyV4KIH+TQAAAABJRU5ErkJggg=="
const eggplant_badge = 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="15" viewBox="0 0 16.000001 15"><path style="line-height:normal;text-indent:0;text-align:start;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:%23000;text-transform:none;block-progression:tb;isolation:auto;mix-blend-mode:normal" d="M3.682 0C1.652 0 0 1.66 0 3.7v7.6C0 13.344 1.65 15 3.682 15h8.636C14.348 15 16 13.343 16 11.3V3.7C16 1.66 14.35 0 12.318 0H3.682zm.36 2.592l-.005.012c.34 0 .34.338.34.677 0 .482.337.312.674.312s1.012.646 1.012.646H5.93c.293.268.59.618.94 1.088.812 1.09 2.15 1.958 3.24 2.178 1.352.273 2.43 1.36 2.43 2.996 0 1.336-1.038 1.908-2.43 1.908-1.35 0-2.43-.822-3.78-2.185C5.036 8.917 3.755 6.626 3.652 5.47c-.002.025-.02.12-.02.12s-.434-1.133.07-1.643c.34-.34-.335-1.355.34-1.355z" color="%23000" font-weight="400" font-family="sans-serif" white-space="normal" overflow="visible" fill="%23744eaa"/></svg>';
const tweetdeck_icon_nohover_color = '#666';
const tweetdeck_icon_hover_color = '#8899A6';
const tweetdeck_light_icon_nohover_color = '#AAB8C2';
const eggplant_purple = '#744eaa';
const works = "data:image/svg+xml;utf8,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2214.74277%22%20height=%2215.74436%22%20viewBox=%220%200%2038.7458%2046.2495%22%3E%3Cpath%20fill=%22none%22%20stroke=%22%238899A6%22%20stroke-width=%221.25139%22%20d=%22M1.10875.6257C-2.01.6257%201.1082%205.285-.4518%206.845c-2.33876%202.33874-.33278%207.53315-.33278%207.53315s.07948-.43888.0918-.56226c.4717%205.26338%206.41065%2015.80844%2012.4099%2021.8077%206.25%206.25%2011.24896%2010.0002%2017.49896%2010.0002%206.4425%200%2011.25096-2.62822%2011.25096-8.74946%200-7.5-5.00096-12.49672-11.25096-13.74672-5.05375-1.0125-11.2532-5.00022-15.0032-10.00022-1.59787-2.1305-2.96564-3.78028-4.30302-5.00298h.55652s-3.12293-2.9662-4.68168-2.9662c-1.56%200-3.1154.7936-3.1154-1.4114%200-1.55875-.00055-3.12113-1.56055-3.12113z%22%20stroke-linejoin=%22round%22/%3E%3C/svg%3E";
function eggplant_outline_svg(color, h=16, w=16) {
const strokeColor = color || tweetdeck_icon_nohover_color;
return `data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 39 48"><path fill="none" stroke="${encodeURIComponent(strokeColor)}" stroke-width="3" d="M1.10875.6257C-2.01.6257 1.1082 5.285-.4518 6.845c-2.33876 2.33874-.33278 7.53315-.33278 7.53315s.07948-.43888.0918-.56226c.4717 5.26338 6.41065 15.80844 12.4099 21.8077 6.25 6.25 11.24896 10.0002 17.49896 10.0002 6.4425 0 11.25096-2.62822 11.25096-8.74946 0-7.5-5.00096-12.49672-11.25096-13.74672-5.05375-1.0125-11.2532-5.00022-15.0032-10.00022-1.59787-2.1305-2.96564-3.78028-4.30302-5.00298h.55652s-3.12293-2.9662-4.68168-2.9662c-1.56 0-3.1154.7936-3.1154-1.4114 0-1.55875-.00055-3.12113-1.56055-3.12113z" stroke-linejoin="round"/></svg>`;
}
const twitterStyles = "\
body:not(.edge-design) .HeartAnimation, .HeartAnimation {\
background: transparent url("+GM_getResourceURL("eggplant")+") no-repeat scroll left center / 2900% auto;\
}\
.HeartAnimationContainer {\
overflow: visible;\
}\
.Icon--heartBadge {\
width: 16px;\
height: 19px;\
color: transparent !important;\
background: transparent url('"+eggplant_badge+"') no-repeat scroll center bottom;\
}\
.ProfileTweet-action--favorite:hover .ProfileTweet-actionButton, .ProfileTweet-action--favorite:hover .ProfileTweet-actionCount, .ProfileTweet-action--favorite .ProfileTweet-actionButton:focus, .ProfileTweet-action--favorite .ProfileTweet-actionButton:focus .ProfileTweet-actionCount, .favorited .ProfileTweet-action--favorite .Icon--heart, .favorited .ProfileTweet-action--favorite .ProfileTweet-actionButtonUndo {\
color: #744eaa;\
}\
";
const tweetdeckStyles = "\
.icon-favorite::before {\
content: url('"+eggplant_outline_svg(tweetdeck_icon_nohover_color)+"');\
}\
.heartsprite {\
-webkit-transform: scale(0.6);\
-ms-transform: scale(0.6);\
transform: scale(0.6);\
background: url("+GM_getResourceURL("eggplant")+") no-repeat;\
}\
.tweet-action:hover .icon-favorite::before {\
content: url('"+eggplant_outline_svg(eggplant_purple)+"');\
}\
.txt-mute a:not(:hover):not(:focus) .icon-favorite::before{\
content: url('"+eggplant_outline_svg(tweetdeck_icon_hover_color)+"');\
}\
.icon-heart-filled::before {\
content: url('"+eggplant_svg+"'); \
}"
const tweetdeckDark = "\
.chirp-container .stream-item:not(:hover):not(.is-selected-tweet) .tweet-action .icon-favorite::before{\
content: url('"+eggplant_outline_svg(tweetdeck_icon_nohover_color)+"');\
}\
";
const tweetdeckLight = "\
.chirp-container .stream-item:not(:hover):not(.is-selected-tweet) .tweet-action .icon-favorite::before{\
content: url('"+eggplant_outline_svg(tweetdeck_light_icon_nohover_color)+"');\
}\
";
function addStyle(css) {
GM_addStyle(css);
}
//only add the tweetdeck-specific styles if the current page is tweetdeck
if(window.location.hostname === "tweetdeck.twitter.com"){
addStyle(tweetdeckStyles);
}
addStyle(twitterStyles);
function detectTheme() {
const metas = document.getElementsByTagName('meta');
for (var i = 0; i < metas.length; i++) {
if(metas[i].getAttribute('http-equiv') === 'Default-Style') {
return metas[i].getAttribute('content');
}
}
// if all else fails, make a guess
return 'dark';
}
function addStyleForTheme() {
if (detectTheme() === 'light') {
addStyle(tweetdeckLight);
} else {
addStyle(tweetdeckDark);
}
window.removeEventListener('transitionend', addStyleForTheme);
}
window.addEventListener('transitionend', addStyleForTheme);