[help] editing posts & pop-up

[viego]

FORUM URL: insidenewhogwarts.proboards.com/

Hello friends!

I've been attempting to make this work somehow but have come to believe it's not possible (or I'm just too noob for this). We are using the Eloquence theme by Punkii. I've mostly managed to code a bunch of stuff in and out to our taste and usage but I've truly stumped.

With the help of this thread we are able to edit those first posts in a thread. Great!
Except now the pop-up code for the participated threads doesn't work anymore. 

Is this a 'One or the other' kind of case since they use the same code? Ideally, I'd like for the people to be able to edit their first posts and have the participated threads pop out into their little pop-up window as they were originally designed to. The participated page has been added, since it was requested by some users but it's now an ugly page that I can't edit the CSS for because it changes all the CSS over the site. 

This is how the pop-up would look:



I've replaced 
<a href="$[participated_threads_link.href]" class="$[participated_threads_link.class] {if $[current_user.has_new_recent_threads]}alert {/if}tooltip" title="{if $[current_user.has_new_recent_threads]}<b>new</b> {/if}participated">
<i class="fas fa-bolt"></i>
</a>
with
<a href="$[participated_threads_link.href]">
<i class="fas fa-list-ul"></i>
</a>
If I can't have both then I understand but figured I'd ask before ultimately giving up

[Chris]

It's the use of the $[current_user.has_new_recent_threads] variable that is causing the issue so if you add back the class minus the {if} conditional then that should allow the underlying javascript code to locate the link via its base class and open it as a popup.

Something along the lines of: <a href="$[participated_threads_link.href]" class="$[participated_threads_link.class] tooltip" title="participated threads">
<i class="fas fa-list-ul"></i>
</a>


I do not have that theme to test so let me know.


Edit:

SPOILER: Click to show

UPDATE: I managed to get it working with the problem variable in the cityscape theme by escaping the opening square bracket.

SPOILER: Click to show

Nevermind:

see this post for a workaround

It was a truthy-ness of the string not the variable value that caused the conditional to pass

^{“Many of the truths that we cling to depend on our point of view” -Obi-Wan Kenobi}

Note (@socalso , @cmdynasty ):

I had to double-escape the first occurrence of the variable

$\\[current_user.has_new_recent_threads] 
instead of just 
$\[current_user.has_new_recent_threads]

to get that variable to properly work as well

Modified code: <div class="tooltip name{if $\\[current_user.has_new_recent_threads] || $[current_user.messages.new] > 0 || $[current_user.new_notifications] > 0} alert{/if}" title="TOGGLE USER MENU">
                   {if $[current_user.is_guest]}
                   guest
                   {else}
                   {if $[current_user.name]}$[current_user.name]{else}$[current_user.username]{/if}
                   {/if}
               </div>
               {if !$[current_user.is_guest]}
               <a href="/user/$[current_user.id]/avatar" class="nav-button tooltip" title="EDIT PROFILE">
                   <i class="fas fa-user-edit"></i>
               </a>
               <a href="/conversations" class="nav-button{if $[current_user.messages.new] > 0} alert{/if} tooltip" title="$[current_user.messages.new] MESSAGE{if $[current_user.messages.new] != 1}S{/if}">
                   <i class="fas fa-envelope"></i>
               </a>
                 
               <a href="/user/$[current_user.id]/notifications" class="nav-button{if $[current_user.new_notifications]} alert{/if} tooltip" title="$[current_user.new_notifications] NOTIFICATION{if $[current_user.new_notifications] != 1}S{/if}">
                   <i class="fas fa-bell"></i>
               </a>
              <a href="$[participated_threads_link.href]" class="$[participated_threads_link.class] nav-button{if $\[current_user.has_new_recent_threads]} alert{/if} tooltip" title="PARTICIPATED{if $\[current_user.has_new_recent_threads]} (NEW){/if}">
                   <i class="fas fa-exclamation-circle"></i>
               </a>

[viego]

Chris I love you!

This totally fixed both issues at once and made both work!
Thank you so much! <3

[Chris]

viego

A kludgy hack could be to replace all instances of

$[current_user.has_new_recent_threads]

with an equivalent

$[participated_threads_link.class] == "recent-threads-button new"

, that way you do not get the ill effects coming from the use of that variable but still can detect when new participated threads are available and have your template react appropriately (**caveat**)

<a href="$[participated_threads_link.href]" class="$[participated_threads_link.class] {if $[participated_threads_link.class] == "recent-threads-button new"}alert {/if}tooltip" title="{if $[participated_threads_link.class] == "recent-threads-button new"}(new) {/if}participated">
<i class="fas fa-bolt"></i>
</a>

[viego]

Oh, I hadn't even thought about the alert! Thank you for that as well!
Can confirm it all works as intended so far <3

[Chris]

After some more poking around I discovered that because the "Reply" button on the top-right of the quick reply box does not bear the .reply-button class (at least in the cityscape theme but probably also in other themes) then several things no longer work as it should when that button is clicked.

1. Normally if you start typing in the quick reply and decide to click that reply button to switch over to the full reply page then whatever you've already typed carries over to the full reply page but without that class on the button whatever you typed is lost.
2. Normally a list of posts on the current page is built for the summary display on the full reply page but without that class on the reply button that list never gets built, so you always get the list of posts from page 1 regardless from which page you clicked that reply button.
3. Normally individual posts that have been selected will be included in the full page as [multi]quotes when that button is pressed but with that class missing from the button that task never gets accomplished

If you encounter these shortcomings in your specific theme as well then place the .reply-button class back on the button so the underlying javascript can properly bind to the button(s).

SPOILER: Click to show

Underlying code that needs that class in order to properly bind:

bind_reply_buttons: function() {
       var o = this;
       $(".reply-button").each(function() {
           $(this).click(function(e) {
               if (!$(this).hasClass("guest-prompt")) {
                   var t = proboards.route("new_post", {
                       thread_id: proboards.data("thread_id")
                   })
                     , i = o.summary_setup(t);
                   if (0 < o.selected_posts.length) {
                       var n = o.selected_posts.join(",");
                       i.setAttribute("action", proboards.route("quote_posts", {
                           post_ids: n,
                           thread_id: proboards.data("thread_id")
                       }))
                   }
                   return $(i).targetBlank(e),
                   i.submit(),
                   !1
               }
           })
       })
   }

[viego]

I did notice the reply button didn’t work as it usually would, deleting the text you’ve put in and such. I didn’t pay it too much mind and made sure to copy paste just in case haha

But it’s definitely a feature that should just work as intended to! I’ll look at it in a little bit and I’ll come back to you here!

Thanks for being so awesome 😎❤️


EDIT:

Okay took me a good hot minute to figure out if I had to just put the class in CSS or something but you literally meant to add the reply-button into the c-thread class haha. It works, eureka!

[Chris]

Yes, precisely as shown in the posted image! 

Add the reply-button class as an additional class next to the existing c-thread (or whatever class is being used on your reply button in your particular theme) to regain those mentioned lost functionalities.