An example of step-by-step development
The goal of this component is enabling the admin to pin one or more posts on top of the newsfeed, as requested here:: https://www.opensource-socialnetwork.org/discussion/view/6844
Changelog:
ready to use,
v7.3dev2: fixed wrong merging of extra 'wheres' to get*Posts queries
v7.3dev1: + option to un-/collapse pinned posts contributed by Dominik L.
v7.2dev4: + compatibility fix for Friends-Online component as reported by Dominik L.
v7.2dev3: + 'Pin' menu entries on any wall post
v7.2dev2: + 'Unpin' menu entries on Pinned Post's frontend panel
v7.2dev1: + option to hide/display comments
ready to use, but not recommended
v7.1dev4: + eight selectable background colors + language files
early releases NOT to be used in production environments
v7.1dev3: pinned posts being removed from original location + crash debug
v7.1dev2: pinned posts appear on top of the newsfeed
v7.1dev1: admin backend to save post ids + basic placement on top of newfeed
How to pin one or more posts:
Choose the post you want to pin, open its menu on the right and click 'Pin':
The page reloads and the result will look like this.
(With Greetings and Site Announcement installed, Pinned Posts will care about a meaningful ordering by the way.)
How to unpin one or more pinned posts:
Choose the post you want to unpin, open its menu on the right and click 'Unpin':
Collapsing pinned posts:
Since members may not be too delighted to find the same pinned posts again and again whenever they visit the newsfeed, they may collapse any post they don't want to see anymore...
to just one line ...
look great, but after update no pinned post for me
Cool, thanks! :)
Thanks. LocalStorage entry deleting working fine now.
(For some reason your button wrapper code is missing this time, but I merged it from your former codeshare)
And since you seemed to be a fan of javascript post-processing, I have added some more extra code to toggle the button text accordingly this way.... ;)
if (isCollapsed) {
$(this).find('.pinned-post-content').hide(); // Klappe den Beitrag ein
$(this).children(':first')[0].innerText = Ossn.Print('com:pinned:posts:toggle:mark:unread');
} else {
$(this).children(':first')[0].innerText = Ossn.Print('com:pinned:posts:toggle:mark:read');
}
Okay, I'll make this toggling stuff a configurable option with the next release.
Now the LocalStorage "pinned-post-NUMBER-collapsed" entry is deleted, when using the "unpin" button
The reason for the collasable posts:
Sometimes I pin very large posts and leave them for 2-5 days, depends on importance
When users open the site on mobile, they have to scroll down to see the newest posts - when they read the post, they can collaps it to save space :)
I managed that the existing entry gets deleted, when a new post is pinned - at least a little progress
You forgot to upload dev4? 🙈
The local storage is updated, when another post is pinned, so you always have the pinned-post-id and the "pinned-post-NUMBER-collapsed"
Yes, with my code the entries are not deleted, when post is unpinned, but I don't think this is a big issue with 2 entries
I'll spend some thoughts on how to delete the entries :)
@Dominik
7.2dev4 should fix the FriendsOnline issue
As for collapsing pinned posts:
First of all, thanks for spending some thoughts on my component and providing the code.
Personally, I can't really make friends with first pinning a post to achieve more focus and then collapsing it in the end ... but ok. ;)
The more important: I'm not really happy with the implementation yet, because
1. loading the collapsed posts brings us right back to the flickering (post appears for a short time, then gets hidden) I intentionally tried to avoid with 7.2 by using the hook instead of first collecting that bunch of html and inserting it later
2. there's no code to remove the local storage entry when a post gets unpinned. so after some time your browser will be stuffed up with a lot of orphans - and the memory is not unlimited, see https://stackoverflow.com/questions/13567509/what-happens-when-localstorage-is-full
And since there's no way to access local storage from php directly, you'll always end up with putting the complete html in place first, and then re-ordering it by script - which is an unnecessary overhead - my idea would be using real cookies instead, which could not only deleted by php if necessary, but offer the chance to access them inside the post_collectors
loop. This way you could add the right wrapper (collapsed/un-collapsed) already in advance and on loading there's no extra post-processing script needed.
To my opinion the 'FriendsOnline is double' issue should be addressed to the FriendsOnline component.
Long time ago the HTML-Sidebar component had a very similar issue when using a hook, which has been fixed by a javascript solution. Perhaps FriendsOnline can be fixed the same way.
I may find a temporary workaround to remove that friends-onlinge widget on screenswitdt > 992,
but in longer terms the implementation of the newfeed-middle-top hook should be changed to be unconditionally visible. Or another CSS-controlled hook may be added.
I tried something:
I changed the
PinnedPosts/plugins/default/PinnedPosts/posts_collector.php
Now posts are collapsable - was a wish of my users
Uses the local storage to save the post ID and if the pinned post (ID) changes, the localstorage gets updated and the post is enlarged again
Cannot post it here, because it seems to be too long for the comment section "cannot create comment" error
Shared it here:
Maybe you want to take it over for future releases