Skip to content

Commit

Permalink
[Timestamps] Update for New Dashboard (new-xkit#1844)
Browse files Browse the repository at this point in the history
  • Loading branch information
@motackt
motackt authored Jun 11, 2020
1 parent 5fa8ef5 commit 83f78a7
Show file tree
Hide file tree
Showing 2 changed files with 160 additions and 27 deletions.
37 changes: 32 additions & 5 deletions Extensions/timestamps.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
150 changes: 128 additions & 22 deletions Extensions/timestamps.js
View file
Original file line number Diff line number Diff line change
@@ -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 **//
Expand Down Expand Up @@ -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)) {
Expand Down Expand Up @@ -108,37 +107,58 @@ 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 === "") {
this.preferences.format.value = "MMMM Do YYYY, h:mm:ss a";
}

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", "<div id=\"xkit-close-message\" class=\"xkit-button\">OK</div></div>");
});

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", "<div id=\"xkit-close-message\" class=\"xkit-button\">OK</div></div>");
});

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");
}
},

Expand Down Expand Up @@ -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 = '<div class="xkit_timestamp_' + post_id + ' xtimestamp-in-search xtimestamp_loading">&nbsp;</div>';
var in_search_html = '<div class="xkit_timestamp_' + post_id + ' xtimestamp-in-search xtimestamp-loading">&nbsp;</div>';
post.find(".post-info-tumblelogs").prepend(in_search_html);
} else {
var normal_html = '<div class="xkit_timestamp_' + post_id + ' xtimestamp xtimestamp_loading">&nbsp;</div>';
var normal_html = '<div class="xkit_timestamp_' + post_id + ' xtimestamp xtimestamp-loading">&nbsp;</div>';
post.find(".post_content").prepend(normal_html);
}

Expand All @@ -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(`<div class="xkit_timestamp_${postId} xtimestamp xtimestamp_loading">&nbsp;</div>`);
$this.find(".reblog-header").append(`<div class="xkit_timestamp_${postId} xtimestamp xtimestamp-loading">&nbsp;</div>`);
let $timestamp = $(`.xkit_timestamp_${postId}`);
XKit.extensions.timestamps.fetch_timestamp(postId, tumblelog, $timestamp);
});
Expand All @@ -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 = `<div class="xkit_timestamp_${post_id} ${xtimestamp_class} xtimestamp-loading">&nbsp;</div>`;
$(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(`<div class="xkit_timestamp_${id} xtimestamp xtimestamp-reblog xtimestamp-loading">&nbsp;</div>`);
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 === "") {
Expand All @@ -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 <div class=\"xkit-timestamp-failed-why\">why?</div>");
$(obj).removeClass('xtimestamp_loading');
$(obj).removeClass("xtimestamp-loading");
},

cpanel: function() {
Expand All @@ -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");
Expand Down

0 comments on commit 83f78a7

Please sign in to comment.