diff --git a/Extensions/timestamps.css b/Extensions/timestamps.css index b504ef0b7..e705d07bd 100644 --- a/Extensions/timestamps.css +++ b/Extensions/timestamps.css @@ -30,6 +30,8 @@ .xtimestamp { position: relative; + border-radius: 3px; + padding: 0 5px; top: -9px; color: rgb(168,177,184); text-align: left; @@ -39,6 +41,34 @@ margin-left: 20px; } +.xtimestamp-this-year { + padding: 0; +} + + .xtimestamp-1-year { + background-color: #EEE; +} + + .xtimestamp-2-year { + background-color: #DDD; + color: hsl(206, 10%, 50%); +} + + .xtimestamp-3-year { + background-color: #CCC; + color: hsl(206, 10%, 50%); +} + + .xtimestamp-4-year { + background-color: #BBB; + color: hsl(206, 10%, 50%); +} + + .xtimestamp-5plus-year { + background-color: #AAA; + color: hsl(206, 10%, 100%); +} + .xtimestamp.xtimestamp_loading { background-image: url(data:image/gif;base64,R0lGODlhDgAEALMKAOvt7////97i5L3Ey+Xn6vb3+PDy89PY26ixueLl5wAAAAAAAAAAAAAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh/wtYTVAgRGF0YVhNUDw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MzU0REE2MUM4NjVBMTFFMkE4N0FGRkVDQThGN0FCRDAiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MzU0REE2MUQ4NjVBMTFFMkE4N0FGRkVDQThGN0FCRDAiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDozRTRCNEE3NTg2NTUxMUUyQTg3QUZGRUNBOEY3QUJEMCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDozRTRCNEE3Njg2NTUxMUUyQTg3QUZGRUNBOEY3QUJEMCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PgH//v38+/r5+Pf29fTz8vHw7+7t7Ovq6ejn5uXk4+Lh4N/e3dzb2tnY19bV1NPS0dDPzs3My8rJyMfGxcTDwsHAv769vLu6ubi3trW0s7KxsK+urayrqqmop6alpKOioaCfnp2cm5qZmJeWlZSTkpGQj46NjIuKiYiHhoWEg4KBgH9+fXx7enl4d3Z1dHNycXBvbm1sa2ppaGdmZWRjYmFgX15dXFtaWVhXVlVUU1JRUE9OTUxLSklIR0ZFRENCQUA/Pj08Ozo5ODc2NTQzMjEwLy4tLCsqKSgnJiUkIyIhIB8eHRwbGhkYFxYVFBMSERAPDg0MCwoJCAcGBQQDAgEAACH5BAURAAoALAAAAAAOAAQAAAQfMI2RghHChAJAGQgyBMJxCAFAEAAokiaqshJlYRrnRQAh+QQFEQAKACwAAAAACQAEAAAEFdAIYVQaI4lzhBoIMmzdFw4SZWFJBAAh+QQFEQAKACwAAAAADgAEAAAEH7AAUJQRwqg0RgIEASjCcQjKgCADKJImqrISZWEa50UAIfkEBREACgAsBQAAAAkABAAABBWwAFCUEcIAQoASxyFs3RcKEmVhRgQAOw==); diff --git a/Extensions/timestamps.js b/Extensions/timestamps.js index b995e4a7a..07f8831a4 100644 --- a/Extensions/timestamps.js +++ b/Extensions/timestamps.js @@ -1,5 +1,5 @@ //* TITLE Timestamps **// -//* VERSION 2.10.1 **// +//* VERSION 2.11.0 **// //* DESCRIPTION See when a post has been made. **// //* DETAILS This extension lets you see when a post was made, in full date or relative time (eg: 5 minutes ago). It also works on asks, and you can format your timestamps. **// //* DEVELOPER New-XKit **// @@ -26,6 +26,16 @@ XKit.extensions.timestamps = new Object({ default: true, value: true }, + beside_header: { + text: "Show timestamps beside header", + default: false, + value: false + }, + show_age: { + text: "Show timestamps age", + default: true, + value: true + }, reblogs: { text: "Reblog timestamps", type: "combo", @@ -124,6 +134,9 @@ XKit.extensions.timestamps = new Object({ this.check_quota(); try { if (this.is_compatible()) { + if (this.preferences.beside_header.value) { + XKit.tools.add_css('.xtimestamp { display: inline-block; top: 0; margin: 0; }', "timestamps"); + } XKit.tools.add_css('#posts .post .post_content { padding-top: 0px; }', "timestamps"); if (this.preferences.posts.value || (this.preferences.inbox.value && XKit.interface.where().inbox)) { XKit.post_listener.add("timestamps", this.add_timestamps); @@ -184,7 +197,11 @@ XKit.extensions.timestamps = new Object({ post.find(".post-info-tumblelogs").prepend(in_search_html); } else { var normal_html = '
'; - post.find(".post_content").prepend(normal_html); + if (XKit.extensions.timestamps.preferences.beside_header.value) { + post.find(".post_wrapper .post_header").append(normal_html); + } else { + post.find(".post_content").prepend(normal_html); + } } var note = $(".xkit_timestamp_" + post_id); @@ -234,6 +251,9 @@ XKit.extensions.timestamps = new Object({ throw 404; } + var date = moment(new Date(responseData.posts[0].timestamp * 1000)); + XKit.extensions.timestamps.add_age(date, date_element); + var timestamp = responseData.posts[0].timestamp; date_element.html(this.format_date(moment(new Date(timestamp * 1000)))); date_element.removeClass("xtimestamp_loading"); @@ -242,6 +262,18 @@ XKit.extensions.timestamps = new Object({ .catch(() => this.show_failed(date_element)); }, + add_age: function(date, date_element) { + var this_year = moment().year(); + + if (date.year() == this_year) { + date_element.addClass("xtimestamp-this-year"); + } else if (date.year() <= this_year - 5) { + date_element.addClass("xtimestamp-5plus-year"); + } else { + date_element.addClass("xtimestamp-" + (this_year - date.year()) + "-year"); + } + }, + fetch_from_cache: function(post_id, date_element) { var cached = XKit.storage.get("timestamps", "xkit_timestamp_cache_" + post_id, ""); if (cached === "") { @@ -257,6 +289,7 @@ XKit.extensions.timestamps = new Object({ if (!cached_date.isValid()) { return false; } + this.add_age(moment(new Date(cached * 1000)), date_element); date_element.html(this.format_date(cached_date)); date_element.removeClass("xtimestamp_loading"); return true; @@ -278,7 +311,7 @@ XKit.extensions.timestamps = new Object({ if (this.preferences.only_relative.value) { return `${relative}`; } else { - return `${absolute} · ${relative}`; + return `${absolute}`; } },