Soldato
I made a thing!
I had the idea for this a couple of months ago when we had the free username change thing going on, and I completely lost track of who was becoming who. I had the idea of being able to make notes about people and store them in the site.
Enter Greasemonkey. If you've not got this plugin you'll need to get it, then hit 'New User Script'. Enter a name and namespace, anything you like. The important bit is 'Includes' which you'll need to enter this:
Then click OK which will popup the script editor, which you'll need to paste this code into:
Save that and refresh the page. Hopefully you should see a 'Notes' link in the user details section of every thread, which you can click to open the notes box and type whatever you like which then gets saved to localStorage so it persists over browser sessions.
I've only tested it in FF22, but there's no reason it shouldn't work in Chrome. Let me know what you think if you try it out, and if you find any bugs
I had the idea for this a couple of months ago when we had the free username change thing going on, and I completely lost track of who was becoming who. I had the idea of being able to make notes about people and store them in the site.
Enter Greasemonkey. If you've not got this plugin you'll need to get it, then hit 'New User Script'. Enter a name and namespace, anything you like. The important bit is 'Includes' which you'll need to enter this:
Then click OK which will popup the script editor, which you'll need to paste this code into:
Code:
// ==UserScript==
// @name OcUK Member Notes
// @namespace rm.ocuk
// @include http://forums.overclockers.co.uk/showthread.php?*
// @version 1
// @grant none
// ==/UserScript==
window.init = function() {
createUI();
addEventHooks();
addStyling();
}
window.createUI = function() {
var $postContainers = $('#posts table[id^="post"]');
$postContainers.each(function() {
var $post = $(this);
var $memberInfoContainer = $('tr:eq(1) td:eq(0)', $post);
var userLink = $('.bigusername', $memberInfoContainer).prop('href');
if (!userLink) {
userLink = $('a:first', $memberInfoContainer).prop('href');
}
var userId = userLink.split('=')[1];
var triggerText = localStorage[userId] == '' || localStorage[userId] == undefined ? 'Notes' : 'Notes*';
var $trigger = $('<a>', {
'href': '#',
'class': 'notes-trigger'
}).text(triggerText).data('userId', userId);
$('<img>', {
'src': 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAQCAYAAADJViUEAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MjdFRjM2NTMwNzdDMTFFM0IxQ0U4QTg5NzQyQ0JFQTciIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MjdFRjM2NTQwNzdDMTFFM0IxQ0U4QTg5NzQyQ0JFQTciPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDoyN0VGMzY1MTA3N0MxMUUzQjFDRThBODk3NDJDQkVBNyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDoyN0VGMzY1MjA3N0MxMUUzQjFDRThBODk3NDJDQkVBNyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PmDsWlsAAADZSURBVHjaYvj//z8DGp4FxI1oYuVAvARdLSOIgIL9QPwGiDmB+CMQKwOxORBfA+KDQKwLxI+AWBKInUAamBgQwAGIxYH4OVSRBFRcDCr2DCrmCNOArBkEbID4GxBLA7E8VEwEiDWB+CnUAjhAdvZ/BuIBI4hgwSIBsuEFFnGQ82UJ2ewHxEewaLYE4q3INlPd2e1AfB6LuAEQVyELYNMsB41ndCCLYT0WZ38A4ndIakBxy4XN2cjJDQac0ZJh/X9MgJE8SQ4wJgYKALLm3UTq2Y0twEgGAAEGANAZlIPlEjxMAAAAAElFTkSuQmCC',
'title': 'Notes'
}).prependTo($trigger);
$memberInfoContainer.append($trigger);
});
var $noteContainer = $('<div>', {
'id': 'note-container'
}).css({
'height': localStorage.containerHeight,
'width': localStorage.containerWidth
}).appendTo('body');
$('<textarea>', {
'id': 'notes'
}).appendTo($noteContainer);
$('<div>', {
'id': 'note-resize-handle'
}).appendTo($noteContainer);
}
window.addEventHooks = function() {
// show notes on trigger click
$('#posts').on('click', '.notes-trigger', function(e) {
e.preventDefault();
var $this = $(this);
var $noteContainer = $('#note-container');
var userId = $this.data('userId');
if ($noteContainer.data('current-user') == userId && $noteContainer.is(':visible')) {
hideNotes();
}
else {
$noteContainer.css({
'top': $this.offset().top + $this.height() + 2,
'left': $this.offset().left,
'display': 'block'
}).data('current-user', userId);
var userNotes = localStorage[userId];
$('#notes').val(userNotes);
}
})
.on('mouseup', '.notes-trigger', function(e) {
e.stopPropagation();
});
// hide notes on document click
$(document).on('mouseup', function(e) {
var $container = $("#note-container");
if (!$container.is(e.target) && $container.has(e.target).length === 0) {
hideNotes();
}
});
// save notes 500ms after typing has finished
var timer;
$(document).on('keypress', '#note-container textarea', function() {
var $textarea = $(this);
clearTimeout(timer);
timer = setTimeout(function() {
localStorage[$('#note-container').data('current-user')] = $textarea.val();
}, 500);
});
// resize container
$(document).on('mousedown', '#note-resize-handle', function(e) {
e.preventDefault();
e.stopPropagation();
$(document).mousemove(function (e) {
var $container = $("#note-container");
var newWidth = e.pageX - $container.offset().left + 10;
var newHeight = e.pageY - $container.offset().top + 10;
var minWidth = 200;
var minHeight = 50;
$container.css({
'width': newWidth > minWidth ? newWidth : minWidth,
'height': newHeight > minHeight ? newHeight : minHeight
});
});
}).on('mouseup', '#note-resize-handle, #note-container', function(e) {
e.stopPropagation();
var $container = $("#note-container");
localStorage.containerWidth = $container.width();
localStorage.containerHeight = $container.height();
$(document).off('mousemove');
});
}
window.hideNotes = function() {
$("#note-container").data('current-user', null).hide();
$(document).off('mousemove');
}
window.addStyling = function() {
var css = '#note-container {' +
'-moz-box-sizing: border-box;' +
'display: none;' +
'position: absolute;' +
'border-radius: 5px;' +
'padding: 5px;' +
'background-color: rgba(255, 255, 255, 0.7);' +
'height: 100px;' +
'width: 400px;' +
'}' +
'#notes {' +
'-moz-box-sizing: border-box;' +
'border: 0;' +
'width: 100%;' +
'height: 100%;' +
'background-color: rgba(255, 255, 255, 1);' +
'border-radius: 5px;' +
'padding: 3px;' +
'resize: none;' +
'}' +
'#note-resize-handle {' +
'position: absolute;' +
'bottom: 0;' +
'right: 0;' +
'cursor: nw-resize;' +
'width: 10px;' +
'height: 10px;' +
'}' +
'.notes-trigger {' +
'text-decoration: none;' +
'margin-top: 5px;' +
'display: inline-block;' +
'}' +
'.notes-trigger img {' +
'margin-right: 2px;' +
'vertical-align: bottom;' +
'}';
addGlobalStyle(css)
}
window.addJQuery = function(callback) {
var script = document.createElement("script");
script.setAttribute("src", "//ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js");
script.addEventListener('load', function() {
var script = document.createElement("script");
//script.textContent = "window.$j=jQuery.noConflict(true);(" + callback.toString() + ")();";
script.textContent = "(" + callback.toString() + ")();";
document.body.appendChild(script);
}, false);
document.body.appendChild(script);
}
window.addGlobalStyle = function(css) {
var head, style;
head = document.getElementsByTagName('head')[0];
if (!head) { return; }
style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = css;
head.appendChild(style);
}
addJQuery(init);Save that and refresh the page. Hopefully you should see a 'Notes' link in the user details section of every thread, which you can click to open the notes box and type whatever you like which then gets saved to localStorage so it persists over browser sessions.
I've only tested it in FF22, but there's no reason it shouldn't work in Chrome. Let me know what you think if you try it out, and if you find any bugs
Last edited: