Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update Shorten Posts extension #1972

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Update Shorten Posts extension #1972

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
92fc782
shorten posts extension: update for react and remove options that are…
beccasafan Aug 22, 2020
3521623
add a threshold pref, discussed in discord
beccasafan Aug 25, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions Extensions/shorten_posts.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
254 changes: 126 additions & 128 deletions Extensions/shorten_posts.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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.<br><br>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 **//
Expand All @@ -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 (<a id=\"xkit-shorten-posts-height-help\" href=\"#\" onclick=\"return false\">what is this?</a>)",
type: "text",
default: "350",
value: "350"
},
sep1: {
text: "Appearance and behaviour options",
type: "separator"
threshold: {
text: 'Minimum hidden height (<a id="xkit-shorten-posts-threshold-help" href="#" onclick="return false;">what is this?</a>)',
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;

This comment was marked as off-topic.

Sign in to view

XKit.extensions.shorten_posts.cpanel_check_height();

if ($(".posts .post").length > 0) {
if ($("[data-id], .posts .post").length > 0) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this check should be removed entirely in case the user hard-loads onto a page without posts and then soft-loads onto a page with posts

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);

Expand All @@ -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 = $(`<div class="xkit-shorten-posts-shortened-avatar ${container_css}"></div>`);
$article.find(XKit.extensions.shorten_posts.avatarCss).appendTo($avatar_wrapper);
$article.before($avatar_wrapper);

$obj.addClass("xkit-shorten-posts-shortened");

$article.append("<div class=\"xkit-shorten-posts-embiggen xkit-shorten-posts-embiggen-for-post-" + post_id + "\" data-post-id=\"" + post_id + "\" data-old-height=\"" + height + "\">This post has been shortened. Click here to show the full post</div>");
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

all these escapes and string concatenation is a little rough, could this be a template string instead?

$article.on("click", ".xkit-shorten-posts-embiggen", XKit.extensions.shorten_posts.embiggen);

if (XKit.extensions.shorten_posts.preferences.display_tags.value === true) {
$obj.find(XKit.extensions.shorten_posts.tagsCss).addClass("post_tags");
$obj.addClass("xkit-shorten-posts-shortened-show-tags");
}
},

short: function(obj, m_height) {
if ($(obj).hasClass("xblacklist_blacklisted_post")) { $(obj).removeClass("xkit-shorten-posts-shortened-show-tags"); return; }

var post_id = $(obj).attr('data-post-id');
Expand All @@ -211,34 +199,43 @@ XKit.extensions.shorten_posts = new Object({
if (XKit.extensions.shorten_posts.preferences.embiggen_on_click.value === true) {
$(obj).find(".image_thumbnail").on("click", XKit.extensions.shorten_posts.embiggen);
}

},

destroy: function() {

this.running = false;
const $posts = $(XKit.page.react ? "[data-id]" : ".post");

// Remove all the stuff we've added.
$(".xkit-shorten-posts-embiggen").remove();

$(".post.xkit-shorten-posts-shortened").each(function() {
(XKit.page.react ? $posts.find(XKit.extensions.shorten_posts.wrapperCss) : $posts).each(function() {
$(this).css('height', 'auto');
});

$(".xkit-shorten-posts-embiggen").off("click", XKit.extensions.shorten_posts.embiggen);
$posts.removeClass("xkit-shorten-posts-shortened-show-tags xkit-shorten-posts-done xkit-shorten-posts-embiggened xkit-shorten-posts-shortened");

$(".post").removeClass("xkit-shorten-posts-shortened");
$(".post").removeClass("xkit-shorten-posts-embiggened");
$(".post").removeClass("xkit-shorten-posts-shortened-show-tags");
$(".post").removeClass("xkit-shorten-posts-done");
// Remove all the stuff we've added.
$(".xkit-shorten-posts-embiggen").remove();

XKit.tools.remove_css("shorten_posts");
if (XKit.page.react) {
$posts.find(".post_wrapper").removeClass("post_wrapper");
$posts.find(".post_tags").removeClass("post_tags");

// Call Tumblr scroll helper update thingy.
XKit.tools.add_function(function() {
Tumblr.Events.trigger("DOMEventor:updateRect");
}, true, "");
$posts.each(function() {
const $avatar = $(this).find(".xkit-shorten-posts-shortened-avatar");
$avatar.contents().prependTo($(this).find("article"));
$avatar.remove();
});

$posts.find("article").off("click", ".xkit-shorten-posts-embiggen", XKit.extensions.shorten_posts.embiggen);

} else {
$(document).off("click", ".xkit-shorten-posts-embiggen", XKit.extensions.shorten_posts.embiggen);
// Call Tumblr scroll helper update thingy.
XKit.tools.add_function(function() {
Tumblr.Events.trigger("DOMEventor:updateRect");
}, true, "");
}

XKit.post_listener.remove("shorten_posts");
XKit.tools.remove_css("shorten_posts");
},

cpanel_check_height: function() {
Expand All @@ -259,9 +256,10 @@ XKit.extensions.shorten_posts = new Object({
cpanel: function(div) {

$("#xkit-shorten-posts-height-help").click(function() {

XKit.window.show("Maximum post height", "XKit will shorten posts longer than the height entered here.<br/><br/>The minimum value you can enter is <b>200</b>, and the maximum is <b>" + XKit.extensions.shorten_posts.height_max + "</b>. If you enter a value bigger or smaller than these, XKit will return to it's default value, which is 350 pixels.", "info", "<div id=\"xkit-close-message\" class=\"xkit-button default\">OK</div>");

});
$("#xkit-shorten-posts-threshold-help").click(function() {
XKit.window.show("Minimum hidden height", "XKit will only shorten posts if there is at least the height entered here to be hidden.<br/><br/>This will avoid shortening posts that have little to expand.", "info", "<div id=\"xkit-close-message\" class=\"xkit-button default\">OK</div>");
});

}
Expand Down
14 changes: 11 additions & 3 deletions Extensions/xkit_patches.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
//* TITLE XKit Patches **//
//* VERSION 7.4.9 **//
//* VERSION 7.4.10 **//
//* DESCRIPTION Patches framework **//
//* DEVELOPER new-xkit **//

Expand Down Expand Up @@ -830,7 +830,11 @@ XKit.extensions.xkit_patches = new Object({
var exclusions = [".radar", ".new_post_buttons", ".post_micro"];

if (typeof without_tag !== "undefined") {
exclusions.push("." + without_tag);
if (!Array.isArray(without_tag)) {
without_tag = [without_tag];
}

without_tag.forEach(tag => exclusions.push("." + without_tag));
}

for (var i = 0; i < exclusions.length; i++) {
Expand Down Expand Up @@ -924,7 +928,11 @@ XKit.extensions.xkit_patches = new Object({
get_posts: async function(without_tag, can_edit) {
let selector = "[data-id]";
if (without_tag !== undefined) {
selector += `:not(.${without_tag})`;
if (!Array.isArray(without_tag)) {
without_tag = [without_tag];
}

selector += `:not(${without_tag.map(tag => "." + tag).join(",")})`;
}

var $posts = $(selector);
Expand Down