Dark Theme for Mixlr

Mixlr Toolkit

// by @therealtakeshi
// Setting up the options for localStorage;
var toStore = {
    emo:false,
    heart:false,
    sounds:false,
    msgLimit:false,
    msgAllowed:200,
    colorComment:"#E0A666",
    colorUsername:"#D18026",
    colorBackground:"#1E262C",
    colorActive:"#27AE60",
    colorInactive:"#C0392B"
};

// Puts the options in the localStorage;
// if(!localStorage.getItem('mixlr-toolkit')) {
    // Note the stringify (localStorage only accepts strings);
    localStorage.setItem('mixlr-toolkit',JSON.stringify(toStore));
// }

// Keeps it easy to access localStorage;
var opts = JSON.parse(localStorage.getItem('mixlr-toolkit'));

// Checks for beta and if found, sets beta to true;
// (first self-invoked anon function, woo!);
(function () {
    if (document.getElementById("heading_elements")) {
        beta = true;
    } else beta = false;
})();

// Helper function to set localStorage;
function setIt (table, key, val) {
    var lsNow = JSON.parse(localStorage.getItem(table));
    lsNow[key] = val;
    localStorage.setItem(table,JSON.stringify(lsNow));
}

// Helper function to select element by attribute; 
function getElements(attribute) {
    return document.querySelectorAll('[' + attribute + ']');
}

// Helper function to update a given element (by id) with given content;
function elUpdate(element, content) {
  document.getElementById(element).innerHTML = content;
}

// Helper function to play a sound file;
// @see: http://stackoverflow.com/questions/15955183/play-mp3-with-javascript-html5
function playSound(el,soundfile) {
    if (opts.sounds) {
        if (el.wav) {
          if(el.wav.paused) el.wav.play();
          else el.wav.pause();
        } else {
          el.wav = new Audio(soundfile);
          el.wav.play();
        }
    }        
}

// Checks if a given element (by id) exists;
function elExists(element) {
    if (typeof (document.getElementById(element)) !== "undefined") {
        return true;
    } else {
        return false;
    }
}

// Helper function returns "off" or "on" instead of true/false;
function boolText(val) {
  if (val) return "ON";
  if (!val) return "OFF";
}

// Toggles the emoticon active state;
function emoToggle() {
    var el = document.getElementById("emo-toggle");
    opts.emo = !opts.emo;
    if (opts.emo) {
        el.style.color = opts.colorActive;
    } else {
        el.style.color = opts.colorInactive;
    }
}

// Adds the emoticons toggle button; 
function addEmo() {
    var li = document.createElement('li');
    var element = document.createElement('a');
    li.appendChild(element);
    li.setAttribute("id","emoticons");
    // li.style.color='#b3b3b3';
    // li.style.background=opts.colorBackground;
    // li.style.width='114px';
    // li.style.height='32px';
    element.className = "toolkit_inactive";
    element.setAttribute("id","emo-toggle");
    element.setAttribute("title","Isn't :jeff just such a :luchadeer?");
    element.appendChild(document.createTextNode('EMOTICONS'));
    document.getElementById("nav_first").appendChild(li);

    var a = document.getElementById("emo-toggle");
    if (beta) a.style.width = '120px';
    a.style.color = opts.colorInactive;
    a.onclick = emoToggle;
}

// Toggles the autoheart active state;
function heartToggle() {
    var el = document.getElementById("heart-toggle");
    opts.heart = !opts.heart;
    if (opts.heart) {
        el.style.color = opts.colorActive;
    } else {
        el.style.color = opts.colorInactive;
    }
}

// Adds the autoheart toggle button;
function addHeart() {
    var li = document.createElement('li');
    var element = document.createElement('a');
    li.appendChild(element);
    li.setAttribute("id","autoheart");
    // li.style.color='#b3b3b3';
    // li.style.background='"+opts.colorBackground+"';
    // li.style.width='114px';
    // li.style.height='32px';
    element.className = "toolkit_inactive";
    element.setAttribute("id","heart-toggle");
    element.setAttribute("title","Only runs when broadcast is active.");
    element.appendChild(document.createTextNode('AUTOHEART'));
    document.getElementById("nav_first").appendChild(li);
  
    var a = document.getElementById("heart-toggle");
    if (beta) a.style.width = '120px';
    a.style.color = opts.colorInactive;
    a.onclick = heartToggle;
}

// Handles the autoheart logic;
function heart() {
    if (opts.heart) {
        var el = document.getElementsByClassName("action");
        if (typeof el !== 'undefined' && typeof el !== null){
          el[0].click();
        }
    }
}

// Starts the emo function, running every 2.5s;
// First step checks for opts.heart:true, so shouldn't be too expensive;
if (!beta) setInterval(heart,2500);

// Helper function to modify blocked users;
function modUser () {
    var el = document.getElementById("blockUser");
    var val = document.getElementById("blockUser").value;
    var index = arr.user.indexOf(val);
    if (index > -1) {
        arr.user.splice(index, 1);
        el.value = this + "Blocked";
    } else {
        arr.user.push(val);
        el.value = this + "Unblocked";
    }
    window.setTimeout(document.getElementById("blockUser").value = "",1500);
}

// Adds the User blocking;
function addUser() {
    var li = document.createElement('li');
    var element = document.createElement('input');
    li.appendChild(element);
    li.setAttribute("id","li-blockUser");
    element.setAttribute("id","blockUser");
    element.setAttribute("onkeypress","{if (event.keyCode==13) modUser()}");
    element.setAttribute("title","Type username here + Enter to block/unblock");
    document.getElementById("nav_first").appendChild(li);
}

// Adds the message limiting;
function addLimit() {
    var li = document.createElement('li');
    var element = document.createElement('a');
    li.appendChild(element);
    li.setAttribute("id","msgLimit");
    element.className = "toolkit_inactive";
    element.setAttribute("id","limit-toggle");
    element.setAttribute("title","Limits the number of messages on-screen.");
    element.appendChild(document.createTextNode('MSG LIMIT'));
    document.getElementById("nav_first").appendChild(li);
  
    var a = document.getElementById("limit-toggle");
    if (beta) a.style.width = '120px';
    a.style.color = opts.colorInactive;
    a.onclick = limitToggle;
}
if (!document.getElementById("limit-toggle")) addLimit();

// Toggles the autoheart active state;
function limitToggle() {
    var el = document.getElementById("limit-toggle");
    opts.msgLimit = !opts.msgLimit;
    if (opts.msgLimit) {
        el.style.color = opts.colorActive;
    } else {
        el.style.color = opts.colorInactive;
    }
}

// Logic for message limiting;
function msgLimit() {
    var selection = $("#comment_list").children().length;
    for (i = selection; i > opts.msgAllowed; i--) {
        $("#comment_list:nth-child(2) > li:nth-child("+i+")").remove();
    }
}

// Instantiate the normalRules var;
var normalRules = "";
// Main broadcaster name;
normalRules += "h1 {color: "+opts.colorComment+"}";
// Broadcaster name and broadcast title;
normalRules += "h2 {color: "+opts.colorComment+"}";
// Usernames in comment list;
normalRules += "h3 {color: #D18026; font-weight:bold}";
// Header in superfluous header box between comment post box and comment list;
normalRules += "h4 {color: #CCC;}";
// Special User block;
normalRules += "#blockUser {-webkit-transition: all 3s ease-in-out;-moz-transition: all 3s ease-in-out;-ms-transition: all 3s ease-in-out;-o-transition: all 3s ease-in-out;transition: all 3s ease-in-out;width: 100%;padding: 7px 12px 5px 28px;font-size: 11px;border-radius: 30px;-moz-border-radius: 30px;-webkit-border-radius: 30px;-ms-border-radius: 30px;-o-border-radius: 30px;behavior: url(/PIE.htc?l1351084804);height: 24px;font-family: 'Lucida$ Sans W01 Roman','Lucida Sans','Lucida Grande','Lucida Sans Unicode',sans-serif;background: black;border: 1px solid #4d4d4d;color: "+opts.colorUsername+";margin-top:8px;margin-left:8px;}";
//
// Background for the page;
normalRules += "#broadcast_chat {background: url(http://www.bispoke.org/assets/gb/2483078-img_0854.jpg) 50%;background-size:148%}";
//
// Top Mixlr bar;
normalRules += "header#main_header {background:"+opts.colorBackground+"}";
// Search input itself;
normalRules += ".fixed_width #main_search {width: 10%; left: 74%}";
//
// Left-side column;
normalRules += "#broadcaster_details {color: "+opts.colorComment+"; background: "+opts.colorBackground+"}";
// Links on left-side column (chat, crowd, stage)
normalRules += "#broadcaster_details .user_links>li>a.active {background-color: #111920;}";
// Links on left-side column active and hover;
normalRules += "#broadcaster_details .user_links>li>a.active:hover {background-color: #18242E;}";
// Links on left-side column hover;
normalRules += "#broadcaster_details .user_links>li>a:hover {background-color:#18242E}";
// Share button on left-side column has a special rule;
normalRules += "#broadcaster_details>#user_details>time>a.share {background:"+opts.colorBackground+"}";
// MIXLR-TOOLKIT: If element is active;
normalRules += ".toolkit_active {color:"+opts.colorActive+"}";
// MIXLR-TOOLKIT: If element is active: hover;
normalRules += ".toolkit_active:hover {}";
// MIXLR-TOOLKIT: If element is inactive;
normalRules += ".toolkit_inactive {color:"+opts.colorInactive+"}";
// MIXLR-TOOLKIT: If element is inactive: hover;
normalRules += ".toolkit_inactive:hover {}";
//
// Last broadcast box (two-part box above comment post box);
normalRules += "#broadcast_chat>.comment_holder>#last_broadcaster {-webkit-box-shadow: none;box-shadow: none;border-right:1px solid #AAA;color: "+opts.colorComment+"; background: "+opts.colorBackground+"; background-color:none}";
// Broadcaster info (bottom two-thirds of last broadcast box);
normalRules += "#broadcast_chat>.comment_holder>#last_broadcaster>.broadcaster_info {-webkit-box-shadow: none;box-shadow: none;border-right:1px solid #AAA;color: "+opts.colorComment+"; background: "+opts.colorBackground+"; background-color:none}";
// Broadcaster info hover;
normalRules += "#broadcast_chat>.comment_holder>#last_broadcaster>.broadcaster_info:hover {background-color: #1F2B35}";
//
// Stupid onload FB share header;
normalRules += "#broadcast_chat>.comment_holder header {color: "+opts.colorComment+"; background-color: "+opts.colorBackground+";}";
// Stupid onload FB share body;
normalRules += "#broadcast_chat>.comment_holder #facebook_one_click_share {color: "+opts.colorComment+"; background-color: "+opts.colorBackground+";-webkit-box-shadow: none;box-shadow: none;}";
// Stupid onload FB share body hover;
normalRules += "#broadcast_chat>.comment_holder #facebook_one_click_share:hover {background-color: #1F2B35}";
// Hides the nasty FB icon on the onload FB share;
normalRules += "#broadcast_chat>.comment_holder #facebook_one_click_share>img.facebook {display:none;}";
//
// Comment post box (middle of comment box);
normalRules += "#broadcast_chat>.comment_holder>#chat_box {-webkit-box-shadow: none;box-shadow: none;border-right:1px solid #AAA;color: "+opts.colorComment+"; background: "+opts.colorBackground+"; background-color:none}";
// Comment post box input field (so it's not stark white);
normalRules += "#chat_box input {background:#333}";
// Background of heart in comment post box when it's disabled;
normalRules += "#chat_box .action.disabled {background-color:"+opts.colorBackground+"}";
//
// Superfluous "All Comments" box between comment post box and comment list;
normalRules += "#broadcast_chat>.comment_holder header {background:none}";
//
// Comment box holder
normalRules += "#broadcast_chat>.comment_holder {-webkit-box-shadow: none;box-shadow: none;border-right:1px solid #AAA}";
// Comment list each comment font & background color;
normalRules += "#broadcast_chat>.comment_holder>#comments #comment_list>li {color: "+opts.colorComment+"; background-color: "+opts.colorBackground+"}";
// Comment list each comment hover background color;
normalRules += "#broadcast_chat>.comment_holder>#comments #comment_list>li:hover {background-color: #1F2B35}";
// Comment list font size & color;
normalRules += "#broadcast_chat>.comment_holder p {color: "+opts.colorComment+";font-size:1.1em;}";
// Usernames in the comment list;
normalRules += "#broadcast_chat>.comment_holder>#comments>header {-webkit-box-shadow: none;box-shadow: none;border-right:1px solid #AAA;color: "+opts.colorUsername+"; background: "+opts.colorBackground+"; background-color:none;border-top:1px solid #AAA}";
// Comments in comment list;
normalRules += "#broadcast_chat>.comment_holder>#chat_box textarea {color: "+opts.colorComment+"; background:"+opts.colorBackground+";}";
//
// Notification box;
normalRules += ".notification {-webkit-box-shadow: none;box-shadow: none;border-right:1px solid #AAA;color: "+opts.colorComment+"; background: "+opts.colorBackground+"; background-color:none; border:none; left:236px; top:47px;}";
// Here END the rules for the normal site;
//
// Here BEGIN the rules for the Beta site;
betaRules = "";
// Remove Share block;
betaRules += "@media all and (min-width:62.5em){#broadcast_main{width:100%;}}";
// Default behind-the-scenes (mostly);
betaRules += "#live_page_view {background: "+opts.colorBackground+";}";
// Search input itself;
betaRules += "#main_search {width: 10%; left: 74%}";
// Special User block;
betaRules += "#blockUser {-webkit-transition: all 3s ease-in-out;-moz-transition: all 3s ease-in-out;-ms-transition: all 3s ease-in-out;-o-transition: all 3s ease-in-out;transition: all 3s ease-in-out;width: 100%;padding: 7px 12px 5px 28px;font-size: 11px;border-radius: 30px;-moz-border-radius: 30px;-webkit-border-radius: 30px;-ms-border-radius: 30px;-o-border-radius: 30px;behavior: url(/PIE.htc?l1351084804);height: 24px;font-family: 'Lucida$ Sans W01 Roman','Lucida Sans','Lucida Grande','Lucida Sans Unicode',sans-serif;background: black;border: 1px solid #4d4d4d;color: "+opts.colorUsername+";margin-top:8px;margin-left:8px;}";
// 
// Change broadcaster name in center header;
betaRules += "@media only screen and (min-width:62.5em) {#broadcast_masthead .broadcaster_details .broadcaster_title h1{color: "+opts.colorUsername+";}}";
// Main block;
betaRules += "#broadcast_main {background: none;}";
// Main block (with media query);
betaRules += "@media only screen and (min-width:62.5em) {#broadcast_main {background: "+opts.colorBackground+";}}";
// Header block;
betaRules += ".hiddenStats #broadcast_masthead {color: "+opts.colorUsername+"; background: "+opts.colorBackground+";}";
// Header controls;
betaRules += ".broadcast_main_controls {background: #202020;}";
// Header controls (while broadcasting);
betaRules += "#broadcast_masthead {background: none;-webkit-box-shadow: none;-moz-box-shadow: none;box-shadow: none;}";
// Subheader controls (while broadcasting);
betaRules += ".stats_bar {background: none;}";
// Nav header;
betaRules += "header#main_header {background: #202020;}";
// 
// Left-side block;
betaRules += "#broadcaster_artwork {background: none;}";
// Edit Profile button;
betaRules += "#follow_side_btn {background: none;}";
// Edit Profile button (already following);
betaRules += "#follow_side_btn.unfollow {background: none;}";
// Left-side block artwork thing;
betaRules += "#broadcaster_artwork .artwork_container {background-color: "+opts.colorBackground+";}";
// 
// Comment block
betaRules += "#comments_container {color: "+opts.colorUsername+"; background: "+opts.colorBackground+";}";
// Change annoying thin white bar above comment block;
betaRules += ".crowd_list {background:none;}";
// Comment block header;
betaRules += "#comments_block header {color: "+opts.colorUsername+"; background: "+opts.colorBackground+";border-bottom: 1px solid "+opts.colorUsername+";}";
// Comments inside the block;
betaRules += ".comment_list li {background: "+opts.colorBackground+";border-bottom: 1px dotted "+opts.colorUsername+";}";
// Comments inside the block: hover;
betaRules += ".comment_list li:hover {background: #1F2B35;}";
// Inner box inside the comment block;
betaRules += ".comment_list li.editable_comment:hover .inner {background:none;}";
// Comment profile picture;
betaRules += ".comment_list .commenter_profile_img {border:1px solid "+opts.colorUsername+"}";
// Comment username;
betaRules += ".comment_list .comment_info h3 {color: "+opts.colorUsername+";text-transform: uppercase;}";
// Comment content;
betaRules += ".comment_list .comment_info p {color: "+opts.colorComment+"; font-size:1.1em}";
// Comment history button;
betaRules += "#comment_history {background:none;}";
// Comment deletebutton;
betaRules += ".delete_options {background:#fff;}";
// Post bar inside comment block;
betaRules += "#chat_box {background:none;}";
// Heart action;
betaRules += "#chat_box .action {background: none; border: none;}";
// Heart action (disabled);
betaRules += "#chat_box .action.disabled {background: none; border: none;}";
// Input box inside post bar (large chat);
// betaRules += "#chat_box.large_chat form textarea {background:none;border: 1px solid "+opts.colorUsername+";}";
// Input box inside post bar (small chat);
betaRules += "#chat_box form textarea {color: "+opts.colorComment+";background:none;border: 1px solid "+opts.colorUsername+";}";
// Submit button inside post bar;
betaRules += "#chat_box form input[type='submit'] {color: "+opts.colorUsername+";background:none;font-family: 'Avenir LT W01 85 Heavy','Helvetica Neue',Helvetica,arial,sans-serif;text-transform: uppercase;letter-spacing: 1px;text-align: center;}";
// Submit button inside post bar: hover;
betaRules += "#chat_box form input[type='submit']:hover {background:none;text-decoration:underline}";
// Post button (large chat);
betaRules += "#chat_box.large_chat form input[type='submit'] {width: 80px;height: 30px;margin-top: 20px;font-size:1.4em;}";
// Post button (small chat);
betaRules += "";
// Here END the rules for the Beta site;

// Creates the necessary element for injecting CSS;
var sheet = document.createElement('style');


// Adds buttons;
if (!document.getElementById("emo-toggle")) addEmo();
if (!document.getElementById("heart-toggle")) addHeart();
if (!document.getElementById("limit-toggle")) addLimit();
if (!document.getElementById("blockUser")) addUser();


// Beta site = betaRules, otherwise normal;
if (beta) {
    sheet.innerHTML = betaRules;
    var elComm = document.getElementById("comments_trigger");
    if (typeof elComm !== 'undefined' && typeof elComm !== null){
        elComm.click();
    }
    var elMast = document.getElementById("masthead_toggle");
    if (typeof elMast !== 'undefined' && typeof elMast !== null){
        elMast.click();
    }
    var elements = getElements('placeholder');
    for ( var i = 0; i < elements.length; i++ ) {
        elements[1].setAttribute("placeholder","Mixlr Toolkit by @therealtakeshi");
    }
} else {
    sheet.innerHTML = normalRules;
} 
var el = document.getElementsByClassName("action");
if (typeof el !== 'undefined' && typeof el !== null){
    el[0].setAttribute("onClick","playSound(this,'http://www.bispoke.org/assets/gb/hornC4.wav');");
}
document.getElementsByTagName('head')[0].appendChild(sheet);


// select the target node
if (beta) {
    target = document.getElementsByClassName('comment_list')[0];
} else {
    target = document.getElementById('comment_list');
}

var arr = {
    user: ["Drew Pills","Blue Frills","True Gills"]
};

// select the target node
var target = document.querySelector('#comment_list');
 
// create an observer instance
var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    // console.log(mutation.addedNodes[0].outerHTML);
    var cid = $(mutation.addedNodes[0].outerHTML).attr("data-cid");
    var item = $("[data-cid="+cid+"]");
    console.log(cid);
    // console.log(item.html());
    var repl = function(){
        var text = item.html();
        if (opts.emo) {
            if (text.indexOf(":luchadeer") >-1) text = text.replace(/\:luchadeer/, '<img src="http://www.bispoke.org/assets/gb/2325664-mysterious_deer.png" title="luchadeer" />');
            if (text.indexOf(":jeff") >-1) text = text.replace(/\:jeff/, '<img src="http://www.bispoke.org/assets/gb/2322425-persona_jeff_t.png" title="jeff" />');
        }
        return text;
    };
    if (opts.msgLimit) msgLimit();
    item.html(repl);
    for (i = 0; i < arr.user.length; i++) {
        if (item.html().indexOf("title=\""+arr.user[i]+"\"") >-1) item.remove();
    }
  });    
});

// configuration of the observer:
var config = { attributes: true, childList: true, characterData: true };
 
// pass in the target node, as well as the observer options
observer.observe(target, config);

Screenshot: http://i.imgur.com/lCIgkc2.jpg
Default background from GB user: http://www.giantbomb.com/profile/tonyp2121

To use:

• Go to http://bridgequestions.com/takeshi-is-stupid (thanks Drew) and drag the button to your bookmarks bar
• Click the bookmark when you're on Mixlr
• Enjoy!

For the dev path:

• Copy the above code (NOTE: it's a bunch more lines than before, only because I split the individual "sentences" into their own line)
• Go back to the Mixlr page
• Open the Console on your browser (how-to: http://webmasters.stackexchange.com/questions/8525/how-to-open-the-javascript-console-in-different-browsers)
• Paste the code into the Console
• Hit enter
• You're good!

P.S. If you don't like the background image and like the dark background supplied by Mixlr, click the left-side Revisions link, and use the code from Revision 6. If you prefer the grayscale first version, use the code from Revision 1.
Rev17:

• Added message limiting (default to 200);

Rev16 (MAJOR):

• Switched to DOM MutationObserver for future-proofing
• Utilizing localStorage for persistent options (more features coming soon!)
• Moved buttons to top and made more aesthetically pleasing
• Added user-blocking through top left bar (resized search bar)
• Minor aesthetic changes to Beta

Rev15:

• Hotfix;

Rev14:

• Rebranding as "Mixlr Toolkit" complete!

Rev13:

• Hotfix for smaller screen size;
• Hotfix for textarea color;

Rev12:

• Added support for Beta Mixlr design;
• Setting up features for selecting background and colors;

Rev11:

• Added Emoticon function (replaces trigger words with emoticon);
• Added Autoheart function (automatically Hearts broadcast when active);
• Added toggle buttons for Emoticons and Autoheart;

Rev10:

• Broke out the code into smaller pieces and commented a bit to make it more clear;
• Messed with the notification box to make it more visible (it's a nice effect);
• Removed a couple lines of extra code;

Screenshot: http://i.imgur.com/lCIgkc2.jpg
Default background from GB user: http://www.giantbomb.com/profile/tonyp2121

To use:

• Go to http://bridgequestions.com/takeshi-is-stupid (thanks Drew) and drag the button to your bookmarks bar
• Click the bookmark when you're on Mixlr
• Enjoy!

For the dev path:

• Copy the above code (NOTE: it's a bunch more lines than before, only because I split the individual "sentences" into their own line)
• Go back to the Mixlr page
• Open the Console on your browser (how-to: http://webmasters.stackexchange.com/questions/8525/how-to-open-the-javascript-console-in-different-browsers)
• Paste the code into the Console
• Hit enter
• You're good!

P.S. If you don't like the background image and like the dark background supplied by Mixlr, click the left-side Revisions link, and use the code from Revision 6. If you prefer the grayscale first version, use the code from Revision 1.
Rev17:

• Added message limiting (default to 200);

Rev16 (MAJOR):

• Switched to DOM MutationObserver for future-proofing
• Utilizing localStorage for persistent options (more features coming soon!)
• Moved buttons to top and made more aesthetically pleasing
• Added user-blocking through top left bar (resized search bar)
• Minor aesthetic changes to Beta

Rev15:

• Hotfix;

Rev14:

• Rebranding as "Mixlr Toolkit" complete!

Rev13:

• Hotfix for smaller screen size;
• Hotfix for textarea color;

Rev12:

• Added support for Beta Mixlr design;
• Setting up features for selecting background and colors;

Rev11:

• Added Emoticon function (replaces trigger words with emoticon);
• Added Autoheart function (automatically Hearts broadcast when active);
• Added toggle buttons for Emoticons and Autoheart;

Rev10:

• Broke out the code into smaller pieces and commented a bit to make it more clear;
• Messed with the notification box to make it more visible (it's a nice effect);
• Removed a couple lines of extra code;