diff --git a/Extensions/shorten_posts.css b/Extensions/shorten_posts.css
index f82aa1d27..88a70c919 100644
--- a/Extensions/shorten_posts.css
+++ b/Extensions/shorten_posts.css
@@ -36,4 +36,6 @@
background: rgba(255,255,255,0.95);
border-top: 1px solid rgba(0,0,0,0.22);
margin-left: 0;
+ z-index: 1;
+ margin-bottom: 0;
}
diff --git a/Extensions/shorten_posts.js b/Extensions/shorten_posts.js
index eafc7888d..8e79b10f1 100644
--- a/Extensions/shorten_posts.js
+++ b/Extensions/shorten_posts.js
@@ -1,7 +1,7 @@
//* TITLE Shorten Posts **//
-//* VERSION 0.2.4 **//
+//* VERSION 0.2.5 **//
//* DESCRIPTION Makes scrolling easier **//
-//* DETAILS This extension shortens long posts, so if you are interested, you can just click on Show Full Post button to see it all, or scroll down if you are not interested. Useful for screens where long posts take a lot of space, and making it hard to scroll down.
By default, this extension shortens text posts. You can toggle settings to choose which types of posts to shorten. (This will 'cut off' long, vertical posts.) **//
+//* DETAILS This extension shortens long posts, so if you are interested, you can just click on Show Full Post button to see it all, or scroll down if you are not interested. Useful for screens where long posts take a lot of space, and making it hard to scroll down. **//
//* DEVELOPER STUDIOXENIX **//
//* FRAME false **//
//* BETA false **//
@@ -17,163 +17,110 @@ XKit.extensions.shorten_posts = new Object({
height_default: 350,
preferences: {
- sep0: {
- text: "When to shorten posts",
- type: "separator"
- },
- text_too: {
- text: "Check and shorten text posts",
- default: true,
- value: true
- },
- photos_too: {
- text: "Check and shorten photo posts and photosets",
- default: false,
- value: false
- },
- audio_too: {
- text: "Check and shorten audio posts",
- default: false,
- value: false
- },
- asks_too: {
- text: "Check and shorten replies to asks",
- default: false,
- value: false
- },
- videos_too: {
- text: "Check and shorten video posts",
- default: false,
- value: false
- },
- chat_too: {
- text: "Check and shorten chat posts",
- default: false,
- value: false
- },
- links_too: {
- text: "Check and shorten link posts",
- default: false,
- value: false
- },
- quotes_too: {
- text: "Check and shorten quote posts",
- default: false,
- value: false
- },
height: {
text: "Maximum post height (what is this?)",
type: "text",
default: "350",
value: "350"
},
- sep1: {
- text: "Appearance and behaviour options",
- type: "separator"
+ threshold: {
+ text: 'Minimum hidden height (what is this?)',
+ type: "text",
+ default: "50",
+ value: "50"
},
display_tags: {
text: "Display the tags on shortened posts",
default: true,
value: true
- },
- embiggen_on_click: {
- text: "Embiggen photo posts when I click on the thumbnail",
- default: true,
- value: true
}
},
+ tagsCss: null,
+ wrapperCss: null,
+ avatarCss: null,
+ processing: false,
+
run: function() {
this.running = true;
XKit.extensions.shorten_posts.cpanel_check_height();
- if ($(".posts .post").length > 0) {
+ if ($("[data-id], .posts .post").length > 0) {
XKit.tools.init_css("shorten_posts");
- $(document).on("click", ".xkit-shorten-posts-embiggen", XKit.extensions.shorten_posts.embiggen);
- XKit.post_listener.add("shorten_posts", XKit.extensions.shorten_posts.check);
- XKit.extensions.shorten_posts.check();
+
+ if (XKit.page.react) {
+ XKit.css_map.getCssMap().then(map => {
+ this.tagsCss = XKit.css_map.keyToCss("tags");
+ this.wrapperCss = XKit.css_map.keyToCss("impressionLoggingWrapper");
+ this.avatarCss = XKit.css_map.keyToCss("stickyContainer");
+
+ XKit.tools.add_css(`${XKit.css_map.keyToCss("baseContainer")} { z-index: 99; }`, "shorten_posts");
+ XKit.post_listener.add("shorten_posts", XKit.extensions.shorten_posts.react_check);
+ XKit.extensions.shorten_posts.react_check();
+ });
+ } else {
+ $(document).on("click", ".xkit-shorten-posts-embiggen", XKit.extensions.shorten_posts.embiggen);
+ XKit.post_listener.add("shorten_posts", XKit.extensions.shorten_posts.check);
+ XKit.extensions.shorten_posts.check();
+ }
}
},
- check: function() {
+ react_check: async function() {
+ if (XKit.extensions.shorten_posts.processing === true) {
+ return;
+ }
+ XKit.extensions.shorten_posts.processing = true;
+ const $posts = await XKit.interface.react.get_posts(["xkit-shorten-posts-done", "xkit-shorten-posts-embiggened"]);
+ $posts
+ .addClass("xkit-shorten-posts-done")
+ .each(function() {
+ var $this = $(this);
+
+ if ($(this).hasClass("xblacklist_blacklisted_post")) { return; }
+
+ var height = $this.height();
+
+ if (height >= parseInt(XKit.extensions.shorten_posts.preferences.height.value, 10) + parseInt(XKit.extensions.shorten_posts.preferences.threshold.value, 10)) {
+ XKit.extensions.shorten_posts.react_short($(this), height);
+ }
+ });
+
+ XKit.extensions.shorten_posts.processing = false;
+ },
+
+ check: function() {
var shortened_count = 0;
$(".posts .post").not(".xkit-shorten-posts-done").not(".xkit-shorten-posts-embiggened").each(function() {
-
var m_height = $(this).height();
$(this).addClass("xkit-shorten-posts-done");
if ($(this).hasClass("xblacklist_blacklisted_post")) { return; }
- var dont_return = false;
- if (XKit.extensions.shorten_posts.preferences.text_too.value
- && $(this).hasClass("is_regular")) {
- dont_return = true;
- }
- if (XKit.extensions.shorten_posts.preferences.photos_too.value
- && ($(this).hasClass("is_photo") || $(this).hasClass("is_photoset"))) {
- dont_return = true;
- }
- if (XKit.extensions.shorten_posts.preferences.audio_too.value
- && $(this).hasClass("is_audio")) {
- dont_return = true;
- }
- if (XKit.extensions.shorten_posts.preferences.links_too.value
- && $(this).hasClass("is_link")) {
- dont_return = true;
- }
- if (XKit.extensions.shorten_posts.preferences.chat_too.value
- && $(this).hasClass("is_conversation")) {
- dont_return = true;
- }
- if (XKit.extensions.shorten_posts.preferences.quotes_too.value
- && $(this).hasClass("is_quote")) {
- dont_return = true;
- }
- if (XKit.extensions.shorten_posts.preferences.asks_too.value
- && $(this).hasClass("is_note")) {
- dont_return = true;
- }
- if (XKit.extensions.shorten_posts.preferences.videos_too.value
- && $(this).hasClass("is_video")) {
- dont_return = true;
- }
-
- if (!dont_return) {
- return;
- }
-
- if (m_height >= XKit.extensions.shorten_posts.preferences.height.value) {
+ if (m_height >= parseInt(XKit.extensions.shorten_posts.preferences.height.value, 10) + parseInt(XKit.extensions.shorten_posts.preferences.threshold.value, 10)) {
XKit.extensions.shorten_posts.short($(this), m_height);
shortened_count++;
}
-
});
if (shortened_count > 0) {
-
// Call Tumblr scroll helper update thingy.
XKit.tools.add_function(function() {
Tumblr.Events.trigger("DOMEventor:updateRect");
}, true, "");
}
-
},
embiggen: function(e) {
-
var obj = e.target;
- if ($(obj).hasClass("image_thumbnail") === true) {
- obj = $(obj).parentsUntil(".post").parent().find(".xkit-shorten-posts-embiggen");
- }
-
var m_height = $(obj).attr('data-old-height');
- var post_div = $(obj).parent();
+ var post_div = $(obj).parents(".xkit-shorten-posts-shortened");
var m_speed = 200 + (m_height / 2);
@@ -188,13 +135,54 @@ XKit.extensions.shorten_posts = new Object({
$(this).removeClass("xkit-shorten-posts-shortened");
$(this).removeClass("xkit-shorten-posts-shortened-show-tags");
$(this).addClass("xkit-shorten-posts-embiggened");
- $(this).css('height', 'auto');
+
+ if (XKit.page.react) {
+ const $article = $(this).find("article");
+ const $avatar = $(this).find(".xkit-shorten-posts-shortened-avatar");
+
+ $avatar.contents().prependTo($article);
+ $avatar.remove();
+ $article.removeClass("post_wrapper");
+ $(this).find(".post_tags").removeClass("post_tags");
+
+ $(this).find(XKit.extensions.shorten_posts.wrapperCss).css("height", "auto");
+ $(this).css("height", "auto");
+ } else {
+ $(this).css('height', 'auto');
+ }
});
},
- short: function(obj, m_height) {
+ react_short: function(obj, height) {
+ var $obj = $(obj);
+ if ($obj.hasClass("xblacklist_blacklisted_post")) { $obj.removeClass("xkit-shorten-posts-shortened-show-tags"); return; }
+
+ const $article = $obj.find("article");
+
+ const container_css = $article.attr("class");
+ const post_id = $obj.attr("data-id");
+
+ $obj.attr("data-old-height", height);
+ $obj.find(XKit.extensions.shorten_posts.wrapperCss).css("height", XKit.extensions.shorten_posts.preferences.height.value + "px");
+ $article.addClass("post_wrapper");
+
+ const $avatar_wrapper = $(`