User:Gary/comments in local time.js: Difference between revisions

Content deleted Content added
adding creds
fixes
 
(48 intermediate revisions by 4 users not shown)
Line 1:
/**
* COMMENTS IN LOCAL TIME
*
Original author: http://en.wikipedia.org/wiki/User:Gary_King
* Description:
* Changes [[Coordinated Universal Time|UTC]]-based times and dates,
English Wikipedia documentation: [[Wikipedia:Comments in Local Time]]
* such as those used in signatures, to be relative to local time.
*/
*
* Documentation:
* [[Wikipedia:Comments in Local Time]]
*/
$(() => {
/**
* Given a number, add a leading zero if necessary, so that the final number
* has two characters.
*
* @param {number} number Number
* @returns {string} The number with a leading zero, if necessary.
*/
function addLeadingZero(number) {
const numberArg = number;
 
if (numberArg < 10) {
addOnloadHook(function()
return `0${numberArg}`;
{
}
// wgCanonicalNamespace = unsafeWindow.wgCanonicalNamespace
/*
Language
LOCALIZING THIS SCRIPT
To localize this script, change the terms below, to the RIGHT of the colons,
to the correct term used in that language.
*/
var language =
{
// relative terms
'Today' : 'Today',
'Yesterday' : 'Yesterday',
'Tomorrow' : 'Tomorrow',
'last' : 'last',
'this' : 'this',
// days of the week
'Sunday' : 'Sunday',
'Monday' : 'Monday',
'Tuesday' : 'Tuesday',
'Wednesday' : 'Wednesday',
'Thursday' : 'Thursday',
'Friday' : 'Friday',
'Saturday' : 'Saturday',
// months of the year
'January' : 'January',
'February' : 'February',
'March' : 'March',
'April' : 'April',
'May' : 'May',
'June' : 'June',
'July' : 'July',
'August' : 'August',
'September' : 'September',
'October' : 'October',
'November' : 'November',
'December' : 'December',
// difference words
'ago' : 'ago',
'from now' : 'from now',
// date phrases
'year' : 'year',
'years' : 'years',
'month' : 'month',
'months' : 'months',
'day' : 'day',
'days' : 'days'
};
/*
Settings
*/
if (typeof(LocalComments) == 'undefined')
LocalComments = {};
 
return numberArg;
if (typeof(LocalComments.dateDifference) == 'undefined')
}
LocalComments.dateDifference = true;
if (typeof(LocalComments.dateFormat) == 'undefined')
{
// Deprecated: LocalizeConfig
if (typeof(LocalizeConfig) != 'undefined' && typeof(LocalizeConfig.dateFormat) != 'undefined' && LocalizeConfig.dateFormat != '')
LocalComments.dateFormat = LocalizeConfig.dateFormat;
else
LocalComments.dateFormat = 'dmy';
}
if (typeof(LocalComments.timeFirst) == 'undefined')
LocalComments.timeFirst = true;
if (typeof(LocalComments.twentyFourHours) == 'undefined')
LocalComments.twentyFourHours = false;
/*
End Settings
*/
if (wgCanonicalNamespace == '' || wgCanonicalNamespace == 'MediaWiki' || wgCanonicalNamespace == 'Special')
return;
var disabled_urls = new Array('action=history'), unique_url = false, wikiPreview = new Array('action=edit', 'action=submit');
for (var i = 0; i < disabled_urls.length; i++)
{
if (document.___location.href.indexOf(disabled_urls[i]) != -1)
return;
}
for (var i = 0; i < wikiPreview.length; i++)
{
if (document.___location.href.indexOf(wikiPreview[i]) != -1)
unique_url = 'wikiPreview';
}
var element_id = unique_url ? unique_url : 'bodyContent';
replace_text(document.getElementById(element_id), /(\d\d):(\d\d), (\d{1,2}) ([A-Z][a-z]+) (\d{4}) \(UTC\)/g, adjust_time);
 
function add_leading_zeroconvertMonthToNumber(numbermonth) {
return new Date(`${month} 1, 2001`).getMonth();
{
}
if (number < 10)
number = '0' + number;
return number;
}
 
function getDates(time) {
function adjust_time(original_timestamp, old_hour, old_minute, old_day, old_month, old_year, offset)
const [, oldHour, oldMinute, oldDay, oldMonth, oldYear] = time;
{
var today = new Date(), yesterday = new Date(), tomorrow = new Date();
yesterday.setDate(yesterday.getDate() - 1);
tomorrow.setDate(tomorrow.getDate() + 1);
// set the date entered
var time = new Date();
time.setUTCFullYear(old_year, convert_month_to_number(old_month), old_day);
time.setUTCHours(old_hour);
time.setUTCMinutes(old_minute);
// determine the time offset
var utc_offset = -1 * time.getTimezoneOffset() / 60;
if (utc_offset >= 0)
utc_offset = '+' + utc_offset;
else
utc_offset = '−' + Math.abs(utc_offset);
// set the date bits to output
var year = time.getFullYear(), month = add_leading_zero(time.getMonth() + 1);
var day = time.getDate();
var hour = parseInt(time.getHours()), minute = add_leading_zero(time.getMinutes());
 
// Today
// output am or pm depending on the date
const today = new Date();
var ampm = '';
if (!LocalComments.twentyFourHours)
{
ampm = ' am';
if (hour > 11) ampm = ' pm';
if (hour > 12) hour -= 12;
if (hour == '00') hour = 12;
}
// return 'today' or 'yesterday' if that is the case
if (year == today.getFullYear() && month == add_leading_zero(today.getMonth() + 1) && day == today.getDate())
var date = language['Today'];
else if (year == yesterday.getFullYear() && month == add_leading_zero(yesterday.getMonth() + 1) && day == yesterday.getDate())
var date = language['Yesterday'];
else if (year == tomorrow.getFullYear() && month == add_leading_zero(tomorrow.getMonth() + 1) && day == tomorrow.getDate())
var date = language['Tomorrow'];
else
{
// calculate day of week
var day_names = new Array(language['Sunday'], language['Monday'], language['Tuesday'], language['Wednesday'], language['Thursday'], language['Friday'], language['Saturday']);
var day_of_the_week = day_names[time.getDay()];
if (LocalComments.dateDifference)
{
// calculate time difference from today and the timestamp
today = new Date(today.getYear(), today.getMonth(), today.getDate());
time = new Date(time.getYear(), time.getMonth(), time.getDate());
var milliseconds_ago = today.getTime() - time.getTime();
var days_ago = Math.round(milliseconds_ago / 1000 / 60 / 60 / 24);
 
// Yesterday
var difference, difference_word = '', last = '';
const yesterday = new Date();
if (today.valueOf() >= time.valueOf())
{
difference = new Date(today.valueOf() - time.valueOf());
difference_word = language['ago'];
if (days_ago <= 7)
last = language['last'] + ' ';
}
else
{
difference = new Date(time.valueOf() - today.valueOf());
difference_word = language['from now'];
if (days_ago >= -7)
last = language['this'] + ' ';
}
var descriptive_difference = [];
 
yesterday.setDate(yesterday.getDate() - 1);
if (difference.getYear() - 70 > 0)
{
var years_ago = (difference.getYear() - 70) + ' ' + pluralize(language['year'], difference.getYear() - 70, language['years']);
descriptive_difference.push(years_ago);
}
if (difference.getMonth() > 0)
{
var months_ago = difference.getMonth() + ' ' + pluralize(language['month'], difference.getMonth(), language['months']);
descriptive_difference.push(months_ago);
}
if (difference.getDate() > 0)
{
var new_days_ago = difference.getDate() + ' ' + pluralize(language['day'], difference.getDate(), language['days']);
descriptive_difference.push(new_days_ago);
}
descriptive_difference = ' (' + descriptive_difference.join(', ') + ' ' + difference_word + ')';
}
else
{
descriptive_difference = '';
last = '';
}
// format the date according to user preferences
var formatted_date = '', month_name = convert_number_to_month(time.getMonth());
switch (LocalComments.dateFormat.toLowerCase())
{
case 'dmy':
formatted_date = day + ' ' + month_name + ' ' + year;
break;
case 'mdy':
formatted_date = month_name + ' ' + day + ', ' + year;
break;
default:
formatted_date = year + '-' + month + '-' + add_leading_zero(day);
}
var date = formatted_date + ', ' + last + day_of_the_week + descriptive_difference;
}
var time = hour + ':' + minute + ampm;
if (LocalComments.timeFirst)
var return_date = time + ', ' + date + ' (UTC' + utc_offset + ')';
else
var return_date = date + ', ' + time + ' (UTC' + utc_offset + ')';
 
// Tomorrow
return return_date;
const tomorrow = new Date();
}
 
tomorrow.setDate(tomorrow.getDate() + 1);
function convert_month_to_number(month)
{
var output = new Date(month + ' 1, 2001');
return output.getMonth();
}
 
// Set the date entered.
function convert_number_to_month(number)
const newTime = new Date();
{
var month = new Array(language['January'], language['February'], language['March'], language['April'], language['May'], language['June'], language['July'], language['August'], language['September'], language['October'], language['November'], language['December']);
return month[number];
}
 
newTime.setUTCFullYear(oldYear, convertMonthToNumber(oldMonth), oldDay);
function pluralize(term, count, plural)
newTime.setUTCHours(oldHour);
{
newTime.setUTCMinutes(oldMinute);
if (plural == null)
plural = term + 's';
 
return (count{ ==time: 1newTime, ?today, termtomorrow, :yesterday plural) };
}
 
/**
function replace_text(node, search, replace)
* Determine whether to use the singular or plural word, and use that.
{
*
if (node.nodeType == 3)
* @param {string} term Original term
{
* @param {number} count Count of items
var value = node.nodeValue;
* @param {string} plural Pluralized term
var matches = value.match(search);
* @returns {string} The word to use
*/
if (matches != null)
function pluralize(term, count, plural = null) {
{
let pluralArg = plural;
var node_parent_node = node.parentNode;
var old_node = node;
// old_node_list = node.parentNode.childNodes;
for (match = 0; match < matches.length; match++)
{
// Create <span class="localcomments" style="font-size: 95%; white-space: nowrap;" title="MATCHES[MATCH]">MATCHES[MATCH]</span>
var position;
if (after_match != null && length != null)
position = after_match.search(search) + before_match.length + length;
else
position = value.search(search);
var length = matches[match].toString().length;
var before_match = value.substring(0, position);
var after_match = value.substring(position + length);
var span = document.createElement('span');
span.setAttribute('class', 'localcomments');
span.style.fontSize = '95%';
span.style.whiteSpace = 'nowrap';
span.setAttribute('title', matches[match]);
span.appendChild(document.createTextNode(matches[match].toString().replace(search, replace)));
var new_node = document.createDocumentFragment();
new_node.appendChild(document.createTextNode(before_match));
new_node.appendChild(span);
new_node.appendChild(document.createTextNode(after_match));
 
// No unique pluralized word is found, so just use a general one.
node_parent_node.replaceChild(new_node, old_node);
if (!pluralArg) {
pluralArg = `${term}s`;
break;
}
}
}
}
else
{
var children = [], child = node.firstChild;
while (child)
{
children[children.length] = child;
child = child.nextSibling;
}
for (var child = 0; child < children.length; child++)
replace_text(children[child], search, replace);
}
}
 
// There's only one item, so just use the singular word.
if (count === 1) {
return term;
}
 
// There are multiple items, so use the plural word.
return pluralArg;
}
 
class CommentsInLocalTime {
constructor() {
this.language = '';
this.LocalComments = {};
 
/**
* Settings
*/
this.settings();
 
this.language = this.setDefaultSetting(
'language',
this.LocalComments.language
);
 
// These values are also reflected in the documentation:
// https://en.wikipedia.org/wiki/Wikipedia:Comments_in_Local_Time#Default_settings
this.setDefaultSetting({
dateDifference: true,
dateFormat: 'dmy',
dayOfWeek: true,
dropDays: 0,
dropMonths: 0,
timeFirst: true,
twentyFourHours: false,
});
}
 
adjustTime(originalTimestamp, search) {
const { time, today, tomorrow, yesterday } = getDates(
originalTimestamp.match(search)
);
 
// A string matching the date pattern was found, but it cannot be
// converted to a Date object. Return it with no changes made.
if (Number.isNaN(time)) {
return [originalTimestamp, ''];
}
 
const date = this.determineDateText({
time,
today,
tomorrow,
yesterday,
});
 
const { ampm, hour } = this.getHour(time);
const minute = addLeadingZero(time.getMinutes());
const finalTime = `${hour}:${minute}${ampm}`;
 
// Determine the time offset.
const utcValue = (-1 * time.getTimezoneOffset()) / 60;
const utcOffset =
utcValue >= 0 ? `+${utcValue}` : `−${Math.abs(utcValue.toFixed(1))}`;
 
const utcPart = `(UTC${utcOffset})`;
 
const returnDate = this.LocalComments.timeFirst
? `${finalTime}, ${date} ${utcPart}`
: `${date}, ${finalTime} ${utcPart}`;
 
return returnDate;
}
 
convertNumberToMonth(number) {
return [
this.language.January,
this.language.February,
this.language.March,
this.language.April,
this.language.May,
this.language.June,
this.language.July,
this.language.August,
this.language.September,
this.language.October,
this.language.November,
this.language.December,
][number];
}
 
createDateText({ day, month, time, today, year }) {
// Calculate day of week
const dayNames = [
this.language.Sunday,
this.language.Monday,
this.language.Tuesday,
this.language.Wednesday,
this.language.Thursday,
this.language.Friday,
this.language.Saturday,
];
const dayOfTheWeek = dayNames[time.getDay()];
let descriptiveDifference = '';
let last = '';
 
// Create a relative descriptive difference
if (this.LocalComments.dateDifference) {
({ descriptiveDifference, last } = this.createRelativeDate(
today,
time
));
}
 
const monthName = this.convertNumberToMonth(time.getMonth());
 
// Format the date according to user preferences
let formattedDate = '';
 
switch (this.LocalComments.dateFormat.toLowerCase()) {
case 'dmy':
formattedDate = `${day} ${monthName} ${year}`;
 
break;
case 'mdy':
formattedDate = `${monthName} ${day}, ${year}`;
 
break;
default:
formattedDate = `${year}-${month}-${addLeadingZero(day)}`;
}
 
const formattedDayOfTheWeek = this.LocalComments.dayOfWeek
? `, ${last}${dayOfTheWeek}`
: '';
 
return `${formattedDate}${formattedDayOfTheWeek}${descriptiveDifference}`;
}
 
/**
* Create relative date data.
*
* @param {Date} today Today
* @param {Date} time The timestamp from a comment
* @returns {Object.<string, *>} Relative date data
*/
createRelativeDate(today, time) {
/**
* The time difference from today, in milliseconds.
*
* @type {number}
*/
const millisecondsAgo = today.getTime() - time.getTime();
 
/**
* The number of days ago, that we will display. It's not necessarily the
* total days ago.
*
* @type {number}
*/
let daysAgo = Math.abs(Math.round(millisecondsAgo / 1000 / 60 / 60 / 24));
const { differenceWord, last } = this.relativeText({
daysAgo,
millisecondsAgo,
});
 
// This method of computing the years and months is not exact. However,
// it's better than the previous method that used 1 January + delta days.
// That was usually quite off because it mapped the second delta month to
// February, which has only 28 days. This method is usually not more than
// one day off, except perhaps over very distant dates.
 
/**
* The number of months ago, that we will display. It's not necessarily
* the total months ago.
*
* @type {number}
*/
let monthsAgo = Math.floor((daysAgo / 365) * 12);
 
/**
* The total amount of time ago, in months.
*
* @type {number}
*/
const totalMonthsAgo = monthsAgo;
 
/**
* The number of years ago that we will display. It's not necessarily the
* total years ago.
*
* @type {number}
*/
let yearsAgo = Math.floor(totalMonthsAgo / 12);
 
if (totalMonthsAgo < this.LocalComments.dropMonths) {
yearsAgo = 0;
} else if (this.LocalComments.dropMonths > 0) {
monthsAgo = 0;
} else {
monthsAgo -= yearsAgo * 12;
}
 
if (daysAgo < this.LocalComments.dropDays) {
monthsAgo = 0;
yearsAgo = 0;
} else if (this.LocalComments.dropDays > 0 && totalMonthsAgo >= 1) {
daysAgo = 0;
} else {
daysAgo -= Math.floor((totalMonthsAgo * 365) / 12);
}
 
const descriptiveParts = [];
 
// There is years text to add.
if (yearsAgo > 0) {
descriptiveParts.push(
`${yearsAgo} ${pluralize(
this.language.year,
yearsAgo,
this.language.years
)}`
);
}
 
// There is months text to add.
if (monthsAgo > 0) {
descriptiveParts.push(
`${monthsAgo} ${pluralize(
this.language.month,
monthsAgo,
this.language.months
)}`
);
}
 
// There is days text to add.
if (daysAgo > 0) {
descriptiveParts.push(
`${daysAgo} ${pluralize(
this.language.day,
daysAgo,
this.language.days
)}`
);
}
 
return {
descriptiveDifference: ` (${descriptiveParts.join(
', '
)} ${differenceWord})`,
last,
};
}
 
determineDateText({ time, today, tomorrow, yesterday }) {
// Set the date bits to output.
const year = time.getFullYear();
const month = addLeadingZero(time.getMonth() + 1);
const day = time.getDate();
 
// Return 'today' or 'yesterday' if that is the case
if (
year === today.getFullYear() &&
month === addLeadingZero(today.getMonth() + 1) &&
day === today.getDate()
) {
return this.language.Today;
}
 
if (
year === yesterday.getFullYear() &&
month === addLeadingZero(yesterday.getMonth() + 1) &&
day === yesterday.getDate()
) {
return this.language.Yesterday;
}
 
if (
year === tomorrow.getFullYear() &&
month === addLeadingZero(tomorrow.getMonth() + 1) &&
day === tomorrow.getDate()
) {
return this.language.Tomorrow;
}
 
return this.createDateText({ day, month, time, today, year });
}
 
getHour(time) {
let ampm;
let hour = Number.parseInt(time.getHours(), 10);
 
if (this.LocalComments.twentyFourHours) {
ampm = '';
hour = addLeadingZero(hour);
} else {
// Output am or pm depending on the date.
ampm = hour <= 11 ? ' am' : ' pm';
 
if (hour > 12) {
hour -= 12;
} else if (hour === 0) {
hour = 12;
}
}
 
return { ampm, hour };
}
 
relativeText({ daysAgo, millisecondsAgo }) {
let differenceWord = '';
let last = '';
 
// The date is in the past.
if (millisecondsAgo >= 0) {
differenceWord = this.language.ago;
 
if (daysAgo <= 7) {
last = `${this.language.last} `;
}
 
// The date is in the future.
} else {
differenceWord = this.language['from now'];
 
if (daysAgo <= 7) {
last = `${this.language.this} `;
}
}
 
return { differenceWord, last };
}
 
replaceText(node, search) {
if (!node) {
return;
}
 
// Check if this is a text node.
if (node.nodeType === 3) {
// Don't continue if this text node's parent tag is one of these.
if (['CODE', 'PRE'].includes(node.parentNode.nodeName)) {
return;
}
 
const value = node.nodeValue;
const matches = value.match(search);
 
if (matches) {
// Only act on the first timestamp we found in this node. This is for
// the rare occassion that there is more than one timestamp in the
// same text node.
const [match] = matches;
const position = value.search(search);
const stringLength = match.toString().length;
 
// Grab the text content before and after the matching timestamp,
// which we'll then wrap in their own SPAN nodes.
const beforeMatch = value.slice(0, position);
const afterMatch = value.slice(position + stringLength);
const returnDate = this.adjustTime(match.toString(), search);
 
// Create the code to display the new local comments content.
const $span = $(
`<span class="localcomments" style="font-size: 95%;" title="${match}">${returnDate}</span>`
);
 
// Replace the existing text node in the page with our new local
// comments node.
$(node).replaceWith($span);
 
// Replace the text content that appears before the timestamp.
if (beforeMatch) {
$span.before(
`<span class="before-localcomments">${beforeMatch}</span>`
);
}
 
// Replace the text content that appears after the timestamp.
if (afterMatch) {
$span.after(
`<span class="after-localcomments">${afterMatch}</span>`
);
}
}
} else {
const children = [];
let child;
 
[child] = node.childNodes;
 
while (child) {
children.push(child);
child = child.nextSibling;
}
 
// Loop through children and run this func on it again, recursively.
children.forEach((child2) => {
this.replaceText(child2, search);
});
}
}
 
run() {
if (
['', 'MediaWiki', 'Special'].includes(
mw.config.get('wgCanonicalNamespace')
)
) {
return;
}
 
// Check for disabled URLs.
const isDisabledUrl = ['action=history'].some((disabledUrl) =>
document.___location.href.includes(disabledUrl)
);
 
if (isDisabledUrl) {
return;
}
 
this.replaceText(
document.querySelector('.mw-body-content .mw-parser-output'),
/(\d{1,2}):(\d{2}), (\d{1,2}) ([A-Z][a-z]+) (\d{4}) \(UTC\)/
);
}
 
setDefaultSetting(...args) {
// There are no arguments.
if (args.length === 0) {
return false;
}
 
// The first arg is an object, so just set that data directly onto the
// settings object. like {setting 1: true, setting 2: false}
if (typeof args[0] === 'object') {
const [settings] = args;
 
// Loop through each setting.
Object.keys(settings).forEach((name) => {
const value = settings[name];
 
if (typeof this.LocalComments[name] === 'undefined') {
this.LocalComments[name] = value;
}
});
 
return settings;
}
 
// The first arg is a string, so use the first arg as the settings key,
// and the second arg as the value to set it to.
const [name, setting] = args;
 
if (typeof this.LocalComments[name] === 'undefined') {
this.LocalComments[name] = setting;
}
 
return this.LocalComments[name];
}
 
/**
* Set the script's settings.
*
* @returns {undefined}
*/
settings() {
// The user has set custom settings, so use those.
if (window.LocalComments) {
this.LocalComments = window.LocalComments;
}
 
/**
* Language
*
* LOCALIZING THIS SCRIPT
* To localize this script, change the terms below,
* to the RIGHT of the colons, to the correct term used in that language.
*
* For example, in the French language,
*
* 'Today' : 'Today',
*
* would be
*
* 'Today' : "Aujourd'hui",
*/
this.LocalComments.language = {
// Relative terms
Today: 'Today',
Yesterday: 'Yesterday',
Tomorrow: 'Tomorrow',
last: 'last',
this: 'this',
 
// Days of the week
Sunday: 'Sunday',
Monday: 'Monday',
Tuesday: 'Tuesday',
Wednesday: 'Wednesday',
Thursday: 'Thursday',
Friday: 'Friday',
Saturday: 'Saturday',
 
// Months of the year
January: 'January',
February: 'February',
March: 'March',
April: 'April',
May: 'May',
June: 'June',
July: 'July',
August: 'August',
September: 'September',
October: 'October',
November: 'November',
December: 'December',
 
// Difference words
ago: 'ago',
'from now': 'from now',
 
// Date phrases
year: 'year',
years: 'years',
month: 'month',
months: 'months',
day: 'day',
days: 'days',
};
}
}
 
// Check if we've already ran this script.
if (window.commentsInLocalTimeWasRun) {
return;
}
 
window.commentsInLocalTimeWasRun = true;
 
const commentsInLocalTime = new CommentsInLocalTime();
 
commentsInLocalTime.run();
});