Skip to content

Instantly share code, notes, and snippets.

@thethp
Last active August 29, 2015 14:00
Show Gist options
  • Save thethp/11159425 to your computer and use it in GitHub Desktop.
Save thethp/11159425 to your computer and use it in GitHub Desktop.
(function () {
var css = '#fake, #fake video {';
css += 'width: 300px;';
css += 'height: 300px;';
css += 'position: relative;';
css += 'display: inline-block;';
css += 'top: 0;';
css += 'left; 0;';
css += 'margin; 0;';
css += 'overflow: hidden;';
css += '}';
css += '#fake video {';
css += 'width: 406px !important;';
css += 'height: 303px !important;';
css += 'position: absolute !important;';
css += 'top: 0 !important;';
css += 'left: 0 !important;';
css += 'margin-left: -50px !important;';
css += '}';
css += '#video-wrapper video { display: none; }';
css += '.onionToggle {';
css += 'position: absolute;';
css += 'left: 0;';
css += 'top: 0;';
css += 'width: 25px;';
css += 'height: 25px;';
css += 'background-color: #3FE0FD;';
css += 'z-index: 20;';
css += 'cursor: pointer;';
css += 'background-image: url(http://toddhpage.com/meatspack/onion.png);';
css += 'background-size: 25px 25px;';
css += 'opacity: 0.3;';
css += '}';
css += '.onionImage {';
css += 'position: absolute;';
css += 'opacity: 0.5;';
css += 'z-index: 10;';
css += 'display: none;';
css += '}';
css += '.onionEnabled.onionImage { display: block; }';
var head = document.head || document.getElementsByTagName('head')[0],
style = document.createElement('style'),
hasOnion = false;
style.appendChild(document.createTextNode(css));
head.appendChild(style);
var chat = document.getElementById('chat-list');
function get_time() {
var c = new Date();
var h = c.getHours();
var m = c.getMinutes();
mi = (m < 10 ? "0" : "") + m;
var ap = (h < 12) ? "AM" : "PM";
return (h % 12) + ':' + mi + ' ' + ap;
}
function add_fake() {
var fake_div = document.createElement('li'),
onionClass = (hasOnion) ? 'onionEnabled' : '';
fake_div.id = 'fake';
fake_div.innerHTML = document.getElementById('video-wrapper').innerHTML + "<p>" + $("#composer-message").val() + "</p><time class='timestamp'>" + get_time() + "</time>" + "<div class='onionToggle'></div>" + "<img class='onionImage " + onionClass + "' src="+$('#chat-list li').first().find('img').attr('src')+">";
chat.insertBefore(fake_div, chat.childNodes[0]);
}
function fake_function() {
var element = document.getElementById("fake");
element.parentNode.removeChild(element);
add_fake();
}
$("#composer-message").keyup(function () {
$("#fake p").text($(this).val());
});
$('body').on('click', '.onionToggle', function() {
$('.onionImage').toggleClass('onionEnabled');
hasOnion = !hasOnion;
});
// http://stackoverflow.com/a/8369269
function HandleDOM_Change() {
fake_function()
}
fireOnDomChange('#chat-list', HandleDOM_Change, 100);
function fireOnDomChange(selector, actionFunction, delay) {
$(selector).bind('DOMSubtreeModified', fireOnDelay);
function fireOnDelay() {
if (typeof this.Timer == "number") {
clearTimeout(this.Timer);
}
this.Timer = setTimeout(function () {
fireActionFunction();
},
delay ? delay : 333
);
}
function fireActionFunction() {
$(selector).unbind('DOMSubtreeModified', fireOnDelay);
actionFunction();
$(selector).bind('DOMSubtreeModified', fireOnDelay);
}
}
add_fake();
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment