Wikipedia

User:Mxn/CommentsInLocalTime/sandbox.js: Difference between revisions

Browse history interactively
← Previous editNext edit →
Content deleted Content added
No edit summary
No edit summary
Line 23:
/**
* Formats to display inline for each timestamp, keyed by a few common.
* cases.
*
* If a property ofis thisan object, isits set`type` toand a`options` string,may the timestamp isbe:
* formatted according to the documentation at
* <http://momentjs.com/docs/#/displaying/format/>.
*
* `type` | `options`
* If a property of this object is set to a function, it is called to
* -----------|----------
* retrieve the formatted timestamp string. See
* `relative` | `Intl.RelativeTimeFormat` options
* <http://momentjs.com/docs/#/displaying/> for the various things you can
* `absolute` | `Intl.AbsoluteTimeFormat` options
* do with the passed-in moment object.
* `iso8601` | —
*
* If a property is a function, it is called to retrieve the formatted
* timestamp string. The function must accept one argument, a `Date` object.
*/
formatsoutputFormats: {
/**
* Relative dates are helpful if the user doesn’t remember today’s date.
* Within a day, show a relative time that’s easy to relate to.
* The tooltip provides a more specific timestamp to distinguish
* comments in rapid succession.
*/
relative: {
day: function (then) { return then.fromNow(); },
numeric: "auto",
},
/**
* Absolute dates are helpful for more distant dates, so that the user
* Within a week, show a relative date and specific time, still helpful
* if the user doesn’t rememberhave today’sto date.do Don’tmath showin justtheir a relativehead.
* time, because a discussion may need more context than “Last Friday”
* on every comment.
*/
absolute: {
week: function (then) { return then.calendar(); },
dateStyle: "full",
timeStyle: "short",
/**
* The calendar() method uses an ambiguous “MM/DD/YYYY” format for
* faraway dates; spell things out for this international audience.
*/
other: function (then) {
var pref = mw.user.options.values.date;
return then.format(window.LocalComments.formatOptions[pref] || "LLL");
},
},
Line 62 ⟶ 59:
* Formats to display in each timestamp’s tooltip, one per line.
*
* If an element of this array is aan string,object theits timestamp`type` isand formatted`options` may be:
*
* according to the documentation at
* `type` | `options`
* <http://momentjs.com/docs/#/displaying/format/>.
* -----------|----------
* `relative` | `Intl.RelativeTimeFormat` options
* `absolute` | `Intl.AbsoluteTimeFormat` options
* `iso8601` | —
*
* If an element of this array is a function, it is called to retrieve the
* formatted timestamp string. SeeThe <http://momentjs.com/docs/#/displaying/>function must accept one argument, a
* `Date` object.
* for the various things you can do with the passed-in moment object.
*/
tooltipComponents: [
tooltipFormats: [
{
function (then) { return then.fromNow(); },
type: "LLLLrelative",
options: {
"YYYY-MM-DDTHH:mmZ",
numeric: "auto",
},
},
{
type: "absolute",
options: {
dateStyle: "full",
timeStyle: "short",
},
},
{
type: "iso8601",
},
],
Line 222 ⟶ 236:
// abbr[title], guiding the user to the tooltip.
timeElt.addClass("localcomments explain");
timeElt.attr("datetime",dateTime = then.toISOString());
}
$(dateNode).wrap(timeElt);
Line 229 ⟶ 243:
/**
* Returns athe formattedcoarsest stringrelative fordate thecomponent giventhat datefits within the object.time
* elapsed between the given date and the current date.
*
* @param {Date} then The date object tobefore formator after the current date.
* @returns {Object} An object indicating the date component’s value and
* @param {String} fmt A format string or function.
* unit compatible with `Intl.RelativeTimeFormat`.
* @returns {String} A formatted string.
*/
function formatDaterelativeDateComponent(then, fmt) {
if (fmt instanceof Function) {
return fmt(then);
} else {
}
}
/**
* Reformats a timestamp marked up with the <time> element.
*
* @param {Number} idx Unused.
* @param {Element} elt The <time> element.
*/
function formatTimestamp(idx, elt) {
var iso = $(elt).attr("datetime");
var then = new Date(Date.parse(iso));
var now = new Date();
var formats = LocalComments.formats;
var lang = mw.config.get("wgPageViewLanguage");
// Add a tooltip with multiple formats.
elt.title = $.map(LocalComments.tooltipFormats, function (fmt, idx) {
return formatDate(then, fmt);
}).join("\n");
// Register for periodic updates.
var value;
var unit;
Line 267 ⟶ 257:
value = seconds;
unit = "seconds";
var minutes = seconds / 60;
if (Math.abs(seconds) > 45) { // moment.relativeTimeThreshold("s")
Line 272 ⟶ 263:
unit = "minutes";
}
var hours = minutes / 60;
if (Math.abs(minutes) > 45) { // moment.relativeTimeThreshold("m")
Line 277 ⟶ 269:
unit = "hours";
}
var days = hours / 24;
if (Math.abs(hours) > 22) { // moment.relativeTimeThreshold("h")
Line 282 ⟶ 275:
unit = "days";
}
var weeks = days / 7;
if (Math.abs(days) > 7) {
Line 287 ⟶ 281:
unit = "weeks";
}
$(elt).attr("data-localcomments-unit", unit);
return {
// Replace the text.
value: Math.round(value),
unit: unit,
};
}
/**
* Returns a formatted string for the given date object.
*
* @param {Date} then The date object to format.
* @param {String} fmt A format string or function.
* @returns {String} A formatted string.
*/
function formatDate(then, fmt) {
if (fmt instanceof Function) {
return fmt(then);
}
var lang = mw.config.get("wgPageViewLanguage");
var format;
switch (fmt.type) {
case "absolute":
format = new Intl.DateTimeFormat(lang, fmt.options);
return format.format(then);
case "relative":
format = new Intl.RelativeTimeFormat(lang, fmt.options);
var component = relativeDateComponent(then);
return format.format(component.value, component.unit);
case "iso8601":
return then.toISOString();
}
}
/**
* Reformats a timestamp marked up with the <time> element.
*
* @param {Number} idx Unused.
* @param {Element} elt The <time> element.
*/
function formatTimestamp(idx, elt) {
var iso = $(elt).dateTime;
var then = new Date(Date.parse(iso));
// Add a tooltip with multiple formats.
elt.title = $.map(LocalComments.tooltipComponents, function (fmt, idx) {
return formatDate(then, fmt) || "";
}).join("\n");
// Replace the text.
var component = relativeDateComponent(then);
var text;
if (component.unit === "weeks") {
text = formatDate(then, {
format = new Intl.DateTimeFormat(lang, {dateStyle: "long", timeStyle: "short"});
type: "relative",
text = format.format(then);
options: LocalComments.outputFormats.relative,
});
} else {
text = formatDate(then, {
format = new Intl.RelativeTimeFormat(lang, {numeric: "auto"});
type: "absolute",
text = format.format(Math.round(value), unit);
options: LocalComments.outputFormats.absolute,
});
}
$(elt).textif (text); {
$(elt).text(text);
}
// Register for periodic updates.
$(elt).attr("data-localcomments-unit", component.unit);
}
Retrieved from "https://en.wikipedia.org/wiki/User:Mxn/CommentsInLocalTime/sandbox.js"