Skip to content

Instantly share code, notes, and snippets.

@markhalliwell

markhalliwell/1-issue.comments.alter.js

Last active August 29, 2015 13:56
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save markhalliwell/8950708 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save markhalliwell/8950708 to your computer and use it in GitHub Desktop.
Download ZIP
Issue comments alter
Raw
1-issue.comments.alter.js
/**
* THIS FILE ALTERS ANY ISSUE WITH THE NEW STYLING. IT AUTOMATICALLY INCLUDES THE CSS FILE
* BELOW. JUST COPY AND PASTE THIS IN YOUR INSPECTOR CONSOLE.
**/
(function ($) {
var localStorageSupported = false;
var enableTimeago = false;
// Only enable timago if user's browser has localStorage support (so they can
// double click to enable and disable at will).
if (typeof window.localStorage !== 'undefined') {
localStorageSupported = true;
enableTimeago = (typeof window.localStorage['issueCommentTimeago'] !== 'undefined' && window.localStorage['issueCommentTimeago'] === 'false' ? false : true);
}
var $times = $('.comments .comment time');
// Create toggle for timestamps.
function toggleTimeago () {
$times.each(function () {
var $time = $(this);
if (enableTimeago) {
$time.timeago();
$time.attr('title', $time.attr('data-original') + ' (double click to toggle)');
}
else {
var longDate = $time.attr('data-original');
$time.attr('title', 'Double click to toggle relative time.').timeago('dispose').text(longDate);
}
});
}
// Convert timestamps into proper ISO_8601 format.
$times
.each(function () {
$(this).attr({
'data-original': $(this).text(),
datetime: new Date(parseInt($(this).attr('datetime'),10)*1000).toISOString(),
title: 'Double click to toggle relative time.'
});
})
// Bind double click to toggle all timestamps at the same time.
.bind('dblclick', function () {
enableTimeago = (enableTimeago ? false : true);
if (localStorageSupported) {
window.localStorage['issueCommentTimeago'] = enableTimeago;
}
toggleTimeago();
});
$.getScript('https://raw2.github.com/rmm5t/jquery-timeago/master/jquery.timeago.js', function () {
$('head').append('<style>.comment header{color:#777;font-size:10px;font-style:italic;margin:10px 0 0}.comment header .permalink{color:#777;float:right;font-size:16px;font-style:normal;font-weight:400;line-height:1em}.comment header img{clear:left;float:left;margin-right:10px;width:40px}.comment header .username{font-size:14px;font-style:normal;line-height:1em}.comment .content{margin-bottom:25px;margin-left:50px}.comment table.nodechanges-field-changes{background:#f6f6f2;border:0;font-size:11px;margin-bottom:0;padding:2px 0;width:100%}.comment table.nodechanges-field-changes tr{background:transparent}.comment table.nodechanges-field-changes td{padding:1px 5px;vertical-align:top}.comment table.nodechanges-field-changes td:nth-child(1){font-weight:700;text-align:right;width:20%}.comment table.nodechanges-field-changes table td:nth-child(2),.comment table.nodechanges-field-changes td:nth-child(3){width:45%}.comment table.nodechanges-field-changes td:nth-child(2):not([colspan]){color:#666;text-decoration:line-through}.comment table.nodechanges-field-changes td:nth-child(2):not([colspan]) a{color:#666}.comment .field-name-comment-body{margin-top:8px}.comment .field-name-comment-body .field-item > :last-child{margin-bottom:0}.comment .new{background:#9d9d93;color:#fff;float:right;font-size:10px;font-style:normal;line-height:1em;margin:0 5px 0 0;padding:3px 6px;text-transform:uppercase}#content .comment .links{line-height:1em;margin:4px 5px 0 0}.comment .links a{color:#777;font-size:10px;font-style:normal;opacity:0;text-transform:uppercase}.comment:hover .links a,.comment .links a:focus{opacity:1}.comment .links .last{padding-right:0}.comment.system-message{margin:10px 0 0;padding-top:15px;position:relative}.comment.system-message header{margin:0;position:absolute;right:5px;top:15px}.comment.system-message .permalink{font-size:inherit;font-weight:700;margin-left:10px;margin-top:3px}.comment.system-message time{display:none;float:right;font-size:10px;font-style:italic;margin:0 1px 0 10px}.comment.system-message:hover time{display:inline}.comment.system-message .content{background:#f6f6f2;border-left:10px solid #9d9d93;color:#666;font-size:10px;margin-bottom:5px;margin-left:0;padding:5px 10px}.comment.system-message table.nodechanges-field-changes{background:transparent;width:auto}.comment.system-message table.nodechanges-field-changes td{padding:0 4px 0 0;width:auto}.comment.system-message .field-name-comment-body{margin-top:0}.comment.system-message.committed .content{border-color:#8aaf3c}.comment.system-message.committed .message{background:transparent;font-size:inherit;padding:0}.comment.system-message.committed .message a{font-weight:400}.comment.system-message.testing-failed .content{border-color:#ffdccd}.comment.system-message.testing-queued .content{border-color:#ffcf73}.comment.system-message.closed .content{border-color:#fc8596}.comment header .permalink:hover,.comment .links a:hover{color:#0678be}.comment table.nodechanges-field-changes td:nth-child(3),.comment.system-message .content a{font-weight:700}</style>');
// Iterate over each comment to alter it's markup.
$('.comments .comment').each(function () {
var $comment = $(this);
$comment.find('> h3.comment-title').remove();
var $content = $comment.find('.content');
var contents = $content.text().toLowerCase();
var $header = $('<header/>').prependTo($comment);
var $permalink = $comment.find('a.permalink').appendTo($header);
var $user = $comment.find('.submitted a.username');
var username = $user.text();
var systemMessage = (username === 'System Message' || contents.match('queued for re-testing'));
if (systemMessage) {
$comment.addClass('system-message');
if (contents.match('failed testing')) {
$comment.addClass('testing-failed');
}
else if (contents.match('queued for re-testing')) {
$comment.addClass('testing-queued');
// @todo This next part is really, really ugly. An issue has been
// opened to change this to the user who posted the comment
// as "System Message" and insert the user who initiated the
// re-testing inside the content.
// @see https://drupal.org/node/2195051
$content.find('.field-name-comment-body .field-item').html($('<div>')
.append($user.clone())
.append(' queued ')
.append($content.find('a'))
.append(' for re-testing.')
);
}
else if (contents.match('automatically closed')) {
$comment.addClass('closed');
}
}
else {
$('<img src="//lorempixel.com/40/40/people/?' + username + '" />').appendTo($header);
$user.appendTo($header);
$header.append(' commented ');
}
// Move timestamp to header.
$comment.find('.submitted time').appendTo($header);
// Don't show links or new status on system messages.
if (systemMessage) {
$comment.find('.new').remove()
$comment.find('.links').remove();
}
else {
$comment.find('.new').appendTo($header);
$comment.find('.links').appendTo($header);
}
// Inject a fake "commit".
var commentNumber = parseInt($permalink.text().replace( /^\D+/g, ''), 10);
if (commentNumber === 6) {
var $commit = $('<div class="comment system-message committed clearfix"><header><a href="#" class="permalink" rel="bookmark">#7</a><time datetime="2013-09-11T16:28:37.000Z">September 11, 2013 11:28</time></header><div class="content"><div class="info"><a href="/user/501638" title="View user profile." class="username">Mark Carver</a> committed <strong><a href="http://drupalcode.org/project/icon.git/commit/c8524cf">c8524cf</a></strong> on <strong>7.x-1.x</strong></div><pre class="message">Issue <a href="/node/2070101">#2070101</a> by dw72: Icons are added twice with special_menu_items enabled</pre></div></div>');
if (enableTimeago) {
$times.add($commit.find('time'));
$commit.find('time').timeago();
}
$comment.after($commit);
}
else if (commentNumber >= 7) {
$permalink.text('#' + (commentNumber + 1));
}
// Remove unused submitted div.
$comment.find('.submitted').remove();
});
// Toggle times if needed.
if (enableTimeago) {
toggleTimeago($times);
}
});
})(jQuery);
Raw
2-issue.comments.alter.css
/* SOURCE FILE: THESE STYLES ARE AUTOMATICALLY INCLUDED IN THE JavaScript FILE ABOVE*/
.comment header {
color: #777;
font-size: 10px;
font-style: italic;
margin: 10px 0 0;
}
.comment header .permalink {
color: #777;
float: right;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 1em;
}
.comment header .permalink:hover {
color: #0678be;
}
.comment header img {
width: 40px;
float: left;
margin-right: 10px;
clear: left;
}
.comment header .username{
font-size: 14px;
font-style: normal;
line-height: 1em;
}
.comment .content {
margin-bottom: 25px;
margin-left: 50px;
}
.comment table.nodechanges-field-changes {
border: 0;
background: #f6f6f2;
font-size: 11px;
margin-bottom: 0;
padding: 2px 0;
width: 100%;
}
.comment table.nodechanges-field-changes:first-child {
}
.comment table.nodechanges-field-changes tr {
background: transparent;
}
.comment table.nodechanges-field-changes td {
padding: 1px 5px;
vertical-align: top;
}
.comment table.nodechanges-field-changes td:nth-child(1) {
font-weight: 700;
text-align: right;
width: 20%
}
.comment table.nodechanges-field-changes table td:nth-child(2),
.comment table.nodechanges-field-changes td:nth-child(3) {
width: 45%
}
.comment table.nodechanges-field-changes td:nth-child(2):not([colspan]) {
color: #666;
text-decoration: line-through;
}
.comment table.nodechanges-field-changes td:nth-child(2):not([colspan]) a {
color: #666;
}
.comment table.nodechanges-field-changes td:nth-child(3) {
font-weight: 700;
}
.comment .field-name-comment-body {
margin-top: 8px;
}
.comment .field-name-comment-body .field-item > :last-child {
margin-bottom: 0;
}
.comment .new {
background: #9d9d93;
color: #fff;
float: right;
font-size: 10px;
font-style: normal;
line-height: 1em;
margin: 0 5px 0 0;
padding: 3px 6px;
text-transform: uppercase;
}
#content .comment .links {
line-height: 1em;
margin: 4px 5px 0 0;
}
#content .comment .links a {
}
.comment .links a {
color: #777;
font-size: 10px;
font-style: normal;
opacity: 0;
text-transform: uppercase;
}
.comment:hover .links a,
.comment .links a:focus {
opacity: 1;
}
.comment .links .last {
padding-right: 0;
}
.comment .links a:hover {
color: #0678be;
}
/**
* System Messages
*/
.comment.system-message {
margin: 10px 0 0;
padding-top: 15px;
position: relative;
}
.comment.system-message header {
margin: 0;
position: absolute;
right: 5px;
top: 15px;
}
.comment.system-message .permalink {
font-size: inherit;
font-weight: 700;
margin-left: 10px;
margin-top: 3px;
}
.comment.system-message time {
display: none;
font-style: italic; float: right; font-size: 10px; margin: 0 1px 0 10px;
}
.comment.system-message:hover time {
display: inline;
}
.comment.system-message .content {
background: #f6f6f2;
border-left: 10px solid #9d9d93;
color: #666;
font-size: 10px;
margin-bottom: 5px;
margin-left: 0;
padding: 5px 10px;
}
.comment.system-message .content a {
font-weight: 700;
}
.comment.system-message table.nodechanges-field-changes {
background: transparent;
width: auto;
}
.comment.system-message table.nodechanges-field-changes td {
padding: 0 4px 0 0;
width: auto;
}
.comment.system-message .field-name-comment-body {
margin-top: 0;
}
/* Git commits */
.comment.system-message.committed .content {
border-color: #8aaf3c;
}
.comment.system-message.committed .message {
background: transparent;
font-size: inherit;
padding: 0;
}
.comment.system-message.committed .message a {
font-weight: 400;
}
/* Testing failed */
.comment.system-message.testing-failed .content {
border-color: #ffdccd;
}
/* Re-testing */
.comment.system-message.testing-queued .content {
border-color: #ffcf73;
}
/* Automatically closed */
.comment.system-message.closed .content {
border-color: #fc8596;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment