Using a theme component instead of an iframe to create a topic timer

Dev
1

It’s probably best to ditch the iframe altogether. For a fun personal challenge, I came up with a rough proof of concept that applies the timer via a theme component. Right now, it adds a timer to the first post of a topic and has a few control buttons. It currently looks like this:

timer
timer.png1578×644 26.4 KB

If this is something you’d want me to expand on, let me know. It’s an interesting customization to work on.

5 Likes
2

Thank you @tshenry for looking into this. The iframe solution was just the “quick and dirty” solution for us to get the timer functionality working. But YES, we are ABSOLUTELY interested in the custom timer that you were experimenting around with. Your solution looks way nicer and cleaner…but is something much beyond my scope in terms of my coding abilities. So again, yes, I am very interested in seeing what you come up with and being able to apply it to my forum.

1 Like
3

Alright sounds good, I’ll continue working on it and report back when I’ve got something that’s ready to show.

3 Likes
4

@tshenry In constructing this theme, I wonder if you are able to build in the ability for me to select which category or subcategories to apply this to? I would not want this theme applied across all posts on my forum, but rather only a select few categories.

For example, on our Forum I would want it the Timer Theme applied only to posts in the “Past Exam” category. Ideally, I’d love to be able to select exactly which posts in the “Past Exam” category for this to apply to since a Timer feature would be appropriate 99% of the time, but there are a few posts where having a Timer would be inappropriate. But this is something I could for sure work around by placing the 1% of posts where a Timer is inappropriate elsewhere (another Category), or even delete them.

1 Like
5

Funny you should mention this! I just added the ability to specify a tag as the determining factor for which topics the stopwatch will display. This keeps it from being applied to any “about” topics or whatever other topic in a given category you may not want the timer to show:

stopwatch-settings
stopwatch-settings.png1256×266 10.4 KB

Does this work for you alright or would a tag be problematic to use in your scenario?

While we’re at it, are there any other aspects about it that I should consider? It’s just about done, I’m just refining the code and trying to thoroughly test it. Should be ready either this weekend or sometime next week :slightly_smiling_face:

2 Likes
6

This is what it looks like at the moment by the way:

stopwatch
stopwatch.png1588×624 47.5 KB

2 Likes
7

I think this looks perfect! The tag indentifer is also a perfect solution to my question above. This is great work! Thank you.

1 Like
8

Alright, the theme component has been released! Please let me know if you find any issues with it or have any ideas on how it could be improved.

Also, for anyone interested in solving the original question on how to disable iframe scrolling, simply add this code to the </head> tab of a theme of your choice:

<script type="text/discourse-plugin" version="0.8.18">
   api.decorateCooked($elem => $elem.children('iframe').attr("scrolling", "no"));
</script>

(Shout-out to @vinothkannans for bringing to light the usefulness of decorateCooked() :grinning:)

3 Likes