# Take a break! Theme component
**URL:** https://meta.discourse.org/t/take-a-break-theme-component/140248
**Category:** Theme component
**Created:** [January 31, 2020, 12:36am UTC](https://meta.discourse.org/t/take-a-break-theme-component/140248 "2020-01-31T00:36:11Z")
**Posts on this page:** 19
**Page:** 1
### Author:  [@Chaboi\_3000](https://meta.discourse.org/u/Chaboi_3000)
#### Post date: [January 31, 2020, 12:36am UTC](https://meta.discourse.org/t/take-a-break-theme-component/140248/1 "2020-01-31T00:36:12Z")
## What is it?
After a discussion about moderators about spending an extended amount of time on the screen, I decided it’ll be best to remind staff members(and non-staff!) to frequently take a break from the forums after looking at it for a long time. New update: It also works on non-staff and can be toggled on and off via theme settings.
> [@What are some of the hardest moments you had as a moderator?](https://meta.discourse.org/t/what-are-some-of-the-hardest-moments-you-had-as-a-moderator/117677/6):
>
> On the admin dashboard for moderators activity it would be nice to show days visited in the reference window, even better would be to disable mod powers for mod account on a schedule to force them to take time off. I’m sure it’s a similar story but mods will work themselves into the ground because they care, when they’re having a hard time they’re often not aware of it at the time because they were sucked in and too close.
## What does it do?
This theme component shows an alert message after the member is on the forums for `x amount of seconds`. So 30 minutes would be 1800 seconds until the message is shown. This component has 4 main settings that let you customize your message and change the time until the message is shown.
## Why?
It’s **PROVEN** to help you if you take a break from the screen. This is especially for moderators and admins who sometimes spend the night doing staff work! This component is a great reminder to take a break if you’re moderating or looking at the forums for too long. This component also helps for those who can’t stop replying, posting, etc. It’s always good to take a break!
## Preview
Here’s a quick preview video(Sorry the webpage took so long to load)
Since changing the settings in theme creator is currently broken, you can download this component on your instance and try changing the message and the time!
[https://github.com/Chaboi45/Take-a-break-component](https://github.com/Chaboi45/Take-a-break-component)
---
### Author:  [@Chaboi\_3000](https://meta.discourse.org/u/Chaboi_3000)
#### Post date: [January 31, 2020, 7:11am UTC](https://meta.discourse.org/t/take-a-break-theme-component/140248/2 "2020-01-31T07:11:00Z")
Should I change something? Critical feedbacks are welcome!
---
### Author:  [@tpetrov](https://meta.discourse.org/u/tpetrov)
#### Post date: [January 31, 2020, 8:34am UTC](https://meta.discourse.org/t/take-a-break-theme-component/140248/3 "2020-01-31T08:34:10Z")
Maybe there should be an option to show it to users, too (not only staff). As a regular user I would be fascinated to see that the forum admins care about users’ health 🙂
---
### Author:  [@j.jaffeux](https://meta.discourse.org/u/j.jaffeux)
#### Post date: [January 31, 2020, 10:56am UTC](https://meta.discourse.org/t/take-a-break-theme-component/140248/4 "2020-01-31T10:56:12Z")
Hi @Chaboi_3000,
neat idea, we talked of something similar with @sam recently.
My main criticism is the code, it should be vastly improved, I can provide guidance if you are willing to improve it.
Few ways to improve it:
- indentation
- intervals should be cleared [https://mdn.beonex.com/en/DOM/window.clearInterval.html](https://mdn.beonex.com/en/DOM/window.clearInterval.html)
- you should look at how we can write themes with javascripts files now (eg: [GitHub - discourse/discourse-group-timezones · GitHub](https://github.com/discourse/discourse-group-timezones))
- we don’t use var anymore, let/const
- equality in js should be checked with === and not ==
Let me know if you need more help, happy to review more.
* * *
I’m a little bit concerned we can’t disable it on per user basis, as I would never use this. But we don’t have per user setting in theme components ATM. So I don’t see any good/easy solution here.
Maybe a good solution would be to have a pair of groups/message, that would make it slightly more configurable.
---
### Author:  [@Chaboi\_3000](https://meta.discourse.org/u/Chaboi_3000)
#### Post date: [January 31, 2020, 11:41am UTC](https://meta.discourse.org/t/take-a-break-theme-component/140248/5 "2020-01-31T11:41:30Z")
> [@tpetrov](#):
>
> Maybe there should be an option to show it to users, too (not only staff). As a regular user I would be fascinated to see that the forum admins care about users’ health
Added an option for normal users. (Default is off for normal users)
> [@j.jaffeux](#):
>
> intervals should be cleared [window.clearInterval - MDN](https://mdn.beonex.com/en/DOM/window.clearInterval.html)
Fixed. Sorry about that.
> [@j.jaffeux](#):
>
> you should look at how we can write themes with javascripts files now (eg: [GitHub - discourse/discourse-group-timezones](https://github.com/discourse/discourse-group-timezones))
I haven’t checked discourse for a while. I’ll go over it tomorrow. I’ll also check on the other ones too. I’ll message you if I have trouble with any on them. Thanks 🙂
---
### Author:  [@Chaboi\_3000](https://meta.discourse.org/u/Chaboi_3000)
#### Post date: [January 31, 2020, 10:18pm UTC](https://meta.discourse.org/t/take-a-break-theme-component/140248/6 "2020-01-31T22:18:23Z")
> [@j.jaffeux](#):
>
> you should look at how we can write themes with javascripts files now (eg: [GitHub - discourse/discourse-group-timezones](https://github.com/discourse/discourse-group-timezones))
Is it reasonable to migrate this theme component to the new javascript files? If so, is there a guide on how to do this?
---
### Author:  [@Chaboi\_3000](https://meta.discourse.org/u/Chaboi_3000)
#### Post date: [February 1, 2020, 8:24am UTC](https://meta.discourse.org/t/take-a-break-theme-component/140248/7 "2020-02-01T08:24:17Z")
> [@j.jaffeux](#):
>
> indentation
> [@j.jaffeux](#):
>
> we don’t use var anymore, let/const
> [@j.jaffeux](#):
>
> equality in js should be checked with === and not ==
Fixed. I’m still wondering about the differences between javascript files and the standard html, css, and js.
---
### Author:  [@Chaboi\_3000](https://meta.discourse.org/u/Chaboi_3000)
#### Post date: [May 12, 2020, 9:02am UTC](https://meta.discourse.org/t/take-a-break-theme-component/140248/9 "2020-05-12T09:02:18Z")
Thanks. I’ll try adding some QOL features when I get some time 🙂
---
### Author:  [@Chaboi\_3000](https://meta.discourse.org/u/Chaboi_3000)
#### Post date: [September 28, 2020, 10:06am UTC](https://meta.discourse.org/t/take-a-break-theme-component/140248/11 "2020-09-28T10:06:49Z")
Impressive! I never knew it could be changed for different uses myself! It’s awesome to hear that it’s helping. Answering unanswered threads is definitely something that’s always encouraged anywhere regardless of what the forum is used for. Thanks for sharing! 🙂
---
### Author:  [@Pravi](https://meta.discourse.org/u/Pravi)
#### Post date: [September 29, 2020, 10:55am UTC](https://meta.discourse.org/t/take-a-break-theme-component/140248/13 "2020-09-29T10:55:31Z")
Does it interrupt the users while creating a new post??
Is it possible to serve ads via this component?
---
### Author:  [@Chaboi\_3000](https://meta.discourse.org/u/Chaboi_3000)
#### Post date: [September 29, 2020, 11:21am UTC](https://meta.discourse.org/t/take-a-break-theme-component/140248/14 "2020-09-29T11:21:32Z")
I haven’t set it to prevent it from popping up when a user is typing 😔 (Though it will not close the editor). You can definitely use this component for ads, but I recommend this solution as it is more optimized for advertising:
> [@Discourse Advertising Plugin (Ads)](https://meta.discourse.org/t/official-advertising-ad-plugin-for-discourse/33734):
>
> discourse2Summary Discourse Advertising allows the set up of advertisements on Discourseopen_bookInstall Guide This plugin is bundled with Discourse core. There is no need to install the plugin separately.warning AD-BLOCKERS If you are running an ad-blocker in your browser or through a vpn, the contents of your /admin/plugins page may be blanked out. Disabling your adblocker, using an incognito tab, or whitelisting your site should prevent this issue. Features Th…
---
### Author:  [@anon89147131](https://meta.discourse.org/u/anon89147131)
#### Post date: [September 29, 2020, 12:06pm UTC](https://meta.discourse.org/t/take-a-break-theme-component/140248/15 "2020-09-29T12:06:38Z")
Sorry for the bump but I have some suggestions, possibly make it configurable by the user in settings, be able to change the colour and instead of like the X have two buttons, one with a social media platform like YouTube that the user can change and one with it saying I’m fine or something that’s changeable by the admin
---
### Author:  [@Paracelsus](https://meta.discourse.org/u/Paracelsus)
#### Post date: [September 29, 2020, 12:31pm UTC](https://meta.discourse.org/t/take-a-break-theme-component/140248/16 "2020-09-29T12:31:50Z")
But it is possible at all to add HTML to the text? Would be really nice if so. (and maybe in that case an extra option for frequency… like show every “nth” day only).
---
### Author:  [@Chaboi\_3000](https://meta.discourse.org/u/Chaboi_3000)
#### Post date: [September 30, 2020, 11:49am UTC](https://meta.discourse.org/t/take-a-break-theme-component/140248/18 "2020-09-30T11:49:05Z")
You can definitely edit the source code and change the HTML to fit your needs.
---
### Author:  [@Pravi](https://meta.discourse.org/u/Pravi)
#### Post date: [October 7, 2020, 5:46pm UTC](https://meta.discourse.org/t/take-a-break-theme-component/140248/19 "2020-10-07T17:46:13Z")
I am already using the official ad plugin. I am asking if it’s possible to pop up ads when the site loads up just like in the below link. Does it run google Adsense code?
[https://www.edaboard.com](https://www.edaboard.com)
---
### Author:  [@Chaboi\_3000](https://meta.discourse.org/u/Chaboi_3000)
#### Post date: [October 7, 2020, 9:53pm UTC](https://meta.discourse.org/t/take-a-break-theme-component/140248/20 "2020-10-07T21:53:09Z")
By default it’s only meant to display normal text. If you burrow in the source code and change it, you can definitely display an AD.
---
### Author:  [@Chaboi\_3000](https://meta.discourse.org/u/Chaboi_3000)
#### Post date: [October 8, 2020, 5:50am UTC](https://meta.discourse.org/t/take-a-break-theme-component/140248/21 "2020-10-08T05:50:31Z")
@Pravi, if you want, you can fork the [repository](https://github.com/Chaboi45/Take-a-break-component) and take a look at the `head-tag.html` [file](https://github.com/Chaboi45/Take-a-break-component/blob/master/common/head_tag.html) in the component(This is where the popups and everything is done) and customize it to fit your preferences. The `showModal` is called [here.](https://github.com/Chaboi45/Take-a-break-component/blob/6628d1cee515ed32c0512149492e78976bec4790/common/head_tag.html#L28) You’d probably want to play around with the code 🙂
---
### Author:  [@Moin](https://meta.discourse.org/u/Moin)
#### Post date: [May 21, 2024, 11:29am UTC](https://meta.discourse.org/t/take-a-break-theme-component/140248/22 "2024-05-21T11:29:16Z")
The component is currently broken
> [@Read time/dwell time pop up](https://meta.discourse.org/t/read-time-dwell-time-pop-up/308441/5):
>
> I will see if I can fix it today. 👍
---
### Author:  [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [May 22, 2024, 6:23pm UTC](https://meta.discourse.org/t/take-a-break-theme-component/140248/23 "2024-05-22T18:23:57Z")
I made the PR 👍
[https://github.com/Chaboi45/Take-a-break-component/pull/4](https://github.com/Chaboi45/Take-a-break-component/pull/4)
* * *
It has been merged, thanks Chaboi! 👏
Note this is a simple update.
I’ve seen interesting suggestions/features that may be worth to implement:
- Observe the context to not popup the modal at the wrong time (such as writing)
- Frequency option
- Move the text from settings to locale