Topic Preview Modal

[satonotdead]

@Damian_Boon

Whats the error your getting?

Thanks for asking; it was related to having disabled the ‘online presence’. Enabled it, and I get modals

Now the Theme Component is working, but only through the expand button. The row functionality issue seems to be related to the Horizon theme this time.

I wonder if a mobile/desktop switch can be added? I like what it adds to the mobile experience, where users tend to swipe and scroll all the time, but on desktop, I like the forum’s old-school behavior.

[Jagster (Jakke Flemming)]

I don’t understand this…

A topic with one post, but lenght of topics doesn’t matter. This I get when I open that topic:

But because I’ve red it already, I’m expecting this point:

Or very beginning, which one I never get:

Do I have wrong expectations, or do I miss something really obvious now? I used pure theme without other theme components, and I’m using iPad/iPhone (PWA, Safari and the Hub, same-same)

edit

I tried with more virgin account, and it got very first post as expected. So earlier situation matters only when opening a topic, that is already red.

[Don]

@Damian_Boon

adding support for nested views

Hello

I’ve added the nested view support. FEATURE: Adds nested view support - Pull Request #3 - VaperinaDEV/discourse-topic-preview-modal - GitHub

[Don]

Thanks @Jagster, here is the fix: FIX: Enhance topic-post visibility for scroll positioning · VaperinaDEV/discourse-topic-preview-modal@697868d · GitHub

[Don]

Hello

@satonotdead

Now the Theme Component is working, but only through the expand button. The row functionality issue seems to be related to the Horizon theme this time.

I cannot repro this issue unfortunately…

@satonotdead

I wonder if a mobile/desktop switch can be added?

I’ve added this: FEATURE: Adds enabled_on setting - Pull Request #4 - VaperinaDEV/discourse-topic-preview-modal - GitHub

[Damian_Boon]

Wow thanks so much Don

[joo (slower)]

I noticed an issue where the Topic Preview Modal doesn’t work properly on the Horizon theme when “topic card high context” is enabled. Is this intentional or a bug?

Also, as a feature request: would it be possible to add a setting to enable this component only for specific categories?

[joo (slower)]

Additionally, when opening a preview from the related/suggested topics section at the bottom of a topic page, clicking ‘Open full topic’ inside the modal fails to navigate to the target page.

[satonotdead]

@joo

I noticed an issue where the Topic Preview Modal doesn’t work properly on the Horizon theme when “topic card high context” is enabled. Is this intentional or a bug?

I can confirm it, the current workaround is chosing the button behavior (instead of row default one).

[Don]

@joo

“topic card high context”

Thanks, ah, that was the missing piece! I didn’t notice the issue because this setting was disabled… sorry @satonotdead

So the issue was that Horizon, in high context topic card mode, does not render the topic-list-item-before plugin outlet, so the theme component could not work.

I moved it to other plugin outlet, it works fine now.

@joo

opening a preview from the related/suggested topics section at the bottom of a topic page, clicking ‘Open full topic’ inside the modal fails to navigate to the target page

Thanks, I’ve fixed it.

@joo

Also, as a feature request: would it be possible to add a setting to enable this component only for specific categories?

Hmm, I’m thinking about this. How do you imagine this working? Should it work on /latest as well (checking the exact topic category) or only inside the selected category? Should suggested topics in that category also keep the modal?

---

FIX: Switch plugin outlet for theme compatibility & fix suggested topics navigation (#5)

---

> ./support --coffee

[Don]

Topic Preview Modal

Absolute legend now to figure out how to make this work with my setup @awesomerobot what does your theme depend on for the whole row click api.renderInOutlet("topic-list-before-link", TopicListItemClick);

Topic Preview Modal

For anyone using the Reddit-ish theme here is a fix i got to work. Reddit-ish theme compatibility Just a note for anyone using the Reddit-ish theme: the modal button itself works, but the default row trigger does not. The issue is that Reddit-ish replaces the standard topic-list row behaviour and handles clicks on the whole topic card itself. Because of that, the modal’s normal row-click handling does not work as intended. Changing the Topic Preview Modal setting to: Trigger style: button Pl…

Hey @Damian_Boon

I’ve fixed this issue here: FIX: Prevent parent topic navigation from bypassing preview modal · VaperinaDEV/discourse-topic-preview-modal@8902af9 · GitHub

The modal should work now with reddit-ish theme too.

[satonotdead]

@Don

Thanks, ah, that was the missing piece! I didn’t notice the issue because this setting was disabled… sorry @satonotdead

Now it is working boss, thanks!

[Don]

@Damian_Boon

any chance of adding swipe right to close on mobile into core

I thought about this quite a bit, and I’m not sure swipe-right would be the best solution here. It could easily conflict with native navigation gestures on mobile where horizontal swipes already have other meanings.

I ended up going with a slightly different approach instead. The modal footer can already be dragged down to close it, so I added a small grip to the footer to make that interaction more discoverable.

This way, even if you’re scrolled all the way down to the last post, you can simply drag the footer down to close the modal without having to scroll all the way back to the top or reach up to the top of the modal.

I think this feels a bit more natural for this type of modal.

FEATURE: Add mobile footer drag handle for modal dismissal (#6)

[Damian_Boon]

I have to disagree after using this for over a week now. It is so fluent to use the phone one handed and the way 90% of users just absorb content it is perfect and so easy to use the site. I also added an animated 3 second timer with the message at the top 5px above the modal which explains that this is the gesture to close. Test it for a bit and you’ll see how well it works without having to move your thumb far.

Also if that is what your sticking with will it be a toggle button to turn off or on?

[asa]

I tested it, but there is a difficulty: the same gesture is used in Safari on iOS to go back a page. This often causes the problem of navigating to the previous web page instead of closing the dialog.

[Damian_Boon]

Do you mean swiping right actually takes you back a page instead of closing the modal on iphone

[asa]

Yeah, I’ve recreated it here. I hope you can see what I mean.

[Damian_Boon]

Ahhh pain that is. I tested it on an older iPhone and it worked perfectly. Back to the drawing board

[Don]

Hello

I’ve been thinking about this a lot, and I added three configurable options:

• None: no additional dismiss gesture
• Grip: a visual grip is shown in the footer
• Gesture: the modal can be dismissed by swiping down when at the top, or swiping up when at the bottom. The native Back gesture/button also dismisses the modal on mobile.

I tried to make it work somewhat like Facebook’s comment modals.

The most interesting part is the native Back handling. Rather than navigating away from the underlying topic list, the modal consumes the Back action and closes itself, while keeping the user’s position in the list.

[Jagster (Jakke Flemming)]

Latest iPad: only swiping up closes the modal. If I swipe from left to right it doesn’t do anything inside modal and outside it acts as normal back and I find myself at the frontpage of the creator.