From 83f78a755e2b1f3e59becc30b7aea3f9ba57c3cd Mon Sep 17 00:00:00 2001 From: motackt <42635772+motackt@users.noreply.github.com> Date: Fri, 12 Jun 2020 05:04:34 +1000 Subject: [PATCH] [Timestamps] Update for New Dashboard (#1844) --- Extensions/timestamps.css | 37 ++++++++-- Extensions/timestamps.js | 150 ++++++++++++++++++++++++++++++++------ 2 files changed, 160 insertions(+), 27 deletions(-) diff --git a/Extensions/timestamps.css b/Extensions/timestamps.css index b504ef0b7..0acab2299 100644 --- a/Extensions/timestamps.css +++ b/Extensions/timestamps.css @@ -39,13 +39,40 @@ margin-left: 20px; } -.xtimestamp.xtimestamp_loading { +.xkit--react .xtimestamp, +.xkit--react .xtimestamp-in-search { + position: static; + color: var(--gray-65); + font-size: 14px; + line-height: 1em; + padding: 0 var(--post-padding); + margin-left: 0; + margin-bottom: var(--post-header-vertical-padding); +} + +.xkit--react .xtimestamp { + margin-top: calc(var(--post-header-vertical-padding) / -2); +} + +.xkit--react .xtimestamp.xtimestamp-reblog { + align-self: center; + flex-shrink: 9999; + padding: 0; + margin: 0; + margin-left: auto; +} - 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==); - background-repeat: no-repeat; - background-position: 0px 50%; - min-height: 4px; +.xtimestamp.xtimestamp-loading { + background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Cpath d='M.9.5a.4.4 2 0 1-.247.37.4.4 0 0 1-.436-.087A.4.4 0 0 1 .13.347.4.4 0 0 1 .5.1' fill='none' stroke='%23888' stroke-width='.12' stroke-linecap='round' stroke-linejoin='round'%3E%3CanimateTransform attributeName='transform' attributeType='XML' type='rotate' from='0 .5 .5' to='360 .5 .5' dur='1s' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E") center no-repeat; + min-height: 20px; + min-width: 20px; +} +.xtimestamp-in-search { + position: absolute; + top: 32px; + color: rgb(168,177,184); + font-size: 10px; } .reblog-list-item .xtimestamp { diff --git a/Extensions/timestamps.js b/Extensions/timestamps.js index ebacd00f8..c0b37a280 100644 --- a/Extensions/timestamps.js +++ b/Extensions/timestamps.js @@ -1,5 +1,5 @@ //* TITLE Timestamps **// -//* VERSION 2.10.2 **// +//* 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 **// @@ -61,7 +61,6 @@ XKit.extensions.timestamps = new Object({ }, check_quota: function() { - if (XKit.storage.quota("timestamps") <= 1024 || XKit.storage.size("timestamps") >= 153600) { XKit.storage.clear("timestamps"); for (let x of Object.keys(this.preferences)) { @@ -108,13 +107,6 @@ XKit.extensions.timestamps = new Object({ if (XKit.interface.where().search) { this.in_search = true; - XKit.tools.add_css(` - .xtimestamp-in-search { - position: absolute; - top: 32px; - color: rgb(168,177,184); - font-size: 10px; - }`, "timestamps"); } if (this.preferences.format.value === "") { @@ -122,23 +114,51 @@ XKit.extensions.timestamps = new Object({ } this.check_quota(); + + $(document).on("click", ".xkit-timestamp-failed-why", function() { + XKit.window.show("Timestamp loading failed.", "This might be caused by several reasons, such as the post being removed, becoming private, or the Tumblr server having a problem that it can't return the page required by XKit to load you the timestamp.", "error", "
OK
"); + }); + + if (XKit.page.react) { + XKit.css_map.getCssMap() + .then(() => { + this.posts_class = XKit.css_map.keyToCss("post"); + this.reblogs_class = XKit.css_map.keyToCss("reblog"); + this.reblog_headers_class = XKit.css_map.keyToCss("reblogHeader"); + this.blog_link_class = XKit.css_map.keyToCss("blogLink"); + + if (this.preferences.posts.value || (this.preferences.inbox.value && XKit.interface.where().inbox)) { + this.react_add_timestamps(); + XKit.post_listener.add("timestamps", this.react_add_timestamps); + } + + if (this.preferences.reblogs.value !== "off") { + this.react_add_reblog_timestamps(); + XKit.post_listener.add("timestamps", this.react_add_reblog_timestamps); + } + + if (this.preferences.only_on_hover.value) { + XKit.tools.add_css(`.xtimestamp { display: none; } ${this.posts_class.split(", ").map(x => x + ":hover .xtimestamp").join(", ")} { display: block; }`, "timestamps_on_hover"); + } + }); + + return; + } + 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); this.add_timestamps(); + XKit.post_listener.add("timestamps", this.add_timestamps); } if (this.preferences.reblogs.value !== "off") { - XKit.post_listener.add("timestamps", this.add_reblog_timestamps); this.add_reblog_timestamps(); + XKit.post_listener.add("timestamps", this.add_reblog_timestamps); } - $(document).on("click", ".xkit-timestamp-failed-why", function() { - XKit.window.show("Timestamp loading failed.", "This might be caused by several reasons, such as the post being removed, becoming private, or the Tumblr server having a problem that it can't return the page required by XKit to load you the timestamp.", "error", "
OK
"); - }); - if (this.preferences.only_on_hover.value) { - XKit.tools.add_css(" .xtimestamp {display: none; } .post:hover .xtimestamp {display: block; }", "timestamps_on_hover"); + XKit.tools.add_css(".xtimestamp { display: none; } .post:hover .xtimestamp { display: block; }", "timestamps_on_hover"); } }, @@ -168,10 +188,10 @@ XKit.extensions.timestamps = new Object({ var blog_name = post.attr('data-tumblelog-name'); if (XKit.extensions.timestamps.in_search && !$("#search_posts").hasClass("posts_view_list")) { - var in_search_html = '
 
'; + var in_search_html = '
 
'; post.find(".post-info-tumblelogs").prepend(in_search_html); } else { - var normal_html = '
 
'; + var normal_html = '
 
'; post.find(".post_content").prepend(normal_html); } @@ -195,9 +215,10 @@ XKit.extensions.timestamps = new Object({ if (!$link.length || !$link.attr("data-peepr")) { return; } + let {tumblelog, postId} = JSON.parse($link.attr("data-peepr")); - $this.find(".reblog-header").append(`
 
`); + $this.find(".reblog-header").append(`
 
`); let $timestamp = $(`.xkit_timestamp_${postId}`); XKit.extensions.timestamps.fetch_timestamp(postId, tumblelog, $timestamp); }); @@ -224,12 +245,95 @@ XKit.extensions.timestamps = new Object({ var timestamp = responseData.posts[0].timestamp; date_element.html(this.format_date(moment(new Date(timestamp * 1000)))); - date_element.removeClass("xtimestamp_loading"); + date_element.removeClass("xtimestamp-loading"); XKit.storage.set("timestamps", "xkit_timestamp_cache_" + post_id, timestamp); }) .catch(() => this.show_failed(date_element)); }, + react_add_timestamps: function() { + var $posts = $("[data-id]:not(.xkit_timestamps)"); + $posts.addClass("xkit_timestamps"); + + $posts.each(function() { + var $post = $(this); + + var post_id = $post.attr("data-id"); + + var xtimestamp_class = "xtimestamp"; + if (XKit.extensions.timestamps.in_search) { + xtimestamp_class = "xtimestamp-in-search"; + } + + var xtimestamp_html = `
 
`; + $(xtimestamp_html).insertAfter($post.find("header")); + + var note = $(".xkit_timestamp_" + post_id); + XKit.extensions.timestamps.react_fetch_timestamp(post_id, note); + }); + }, + + react_add_reblog_timestamps: function() { + const {reblogs_class, reblog_headers_class, preferences} = XKit.extensions.timestamps; + const $posts = $("[data-id]:not(.xkit_reblog_timestamps)"); + + $posts + .addClass("xkit_reblog_timestamps") + .each(async function() { + const $post = $(this); + const post_id = $post.attr("data-id"); + const {trail} = await XKit.interface.react.post_props(post_id); + var $reblogs = $post.find(reblogs_class); + + if (preferences.reblogs.value === "op") { + $reblogs = $reblogs.first(); + } + + $reblogs.each(function(i) { + if (trail[i].blog.active === false) { + return; + } + + const $reblog = $(this); + const {uuid} = trail[i].blog; + const {id} = trail[i].post; + + $reblog.find(reblog_headers_class).append(`
 
`); + const $xtimestamp = $(`.xkit_timestamp_${id}`); + + if (XKit.extensions.timestamps.fetch_from_cache(id, $xtimestamp) === true) { + return; + } + + XKit.tools.async_add_function(async ({uuid, id}) => { // eslint-disable-line no-shadow + /* globals tumblr */ + const {response: {timestamp}} = await tumblr.apiFetch(`/v2/blog/${uuid}/posts/${id}`); + return timestamp; + }, {uuid, id}).then(timestamp => { + $xtimestamp + .removeClass("xtimestamp-loading") + .html(XKit.extensions.timestamps.format_date(moment(new Date(timestamp * 1000)))); + + XKit.storage.set("timestamps", `xkit_timestamp_cache_${id}`, timestamp); + }).catch(() => { + XKit.extensions.timestamps.show_failed($xtimestamp); + }); + }); + }); + }, + + react_fetch_timestamp: async function(post_id, date_element) { + var {timestamp} = await XKit.interface.react.post_props(post_id); + + if (timestamp) { + date_element.html(this.format_date(moment(new Date(timestamp * 1000)))); + date_element.removeClass("xtimestamp-loading"); + XKit.storage.set("timestamps", "xkit_timestamp_cache_" + post_id, timestamp); + } else { + this.show_failed(date_element); + } + }, + fetch_from_cache: function(post_id, date_element) { var cached = XKit.storage.get("timestamps", "xkit_timestamp_cache_" + post_id, ""); if (cached === "") { @@ -245,14 +349,15 @@ XKit.extensions.timestamps = new Object({ if (!cached_date.isValid()) { return false; } + date_element.html(this.format_date(cached_date)); - date_element.removeClass("xtimestamp_loading"); + date_element.removeClass("xtimestamp-loading"); return true; }, show_failed: function(obj) { $(obj).html("failed to load timestamp
why?
"); - $(obj).removeClass('xtimestamp_loading'); + $(obj).removeClass("xtimestamp-loading"); }, cpanel: function() { @@ -275,6 +380,7 @@ XKit.extensions.timestamps = new Object({ $(".xkit-fan-timestamp").remove(); $(".with-xkit-timestamp").removeClass("with-xkit-timestamp"); $(".xkit_timestamps").removeClass("xkit_timestamps"); + $(".xkit_reblog_timestamps").removeClass("xkit_reblog_timestamps"); XKit.tools.remove_css("timestamps"); XKit.post_listener.remove("timestamps"); XKit.tools.remove_css("timestamps_on_hover");