Sunset to Sunset
This script was developed to help with closing down of a website from sunset on Friday to sunset on Saturday. It displays a banner leading up to the Sabbath notifying visitors of the site when it will not be available.
Features
- Automatically show a banner on the top of your site notifying visitors when your site will close.
- Show a message during the Sabbath hours letting visitors know why you are closed and when your site will be back online.
Installation
Whichever method you choose, either Download or CDN, it’s best to include all these files in the head so that they load right away. It’s not ideal to have render-blocking scripts in the head but the reason we recommend putting them in the head is to avoid the flash of the rendered page before the Sabbath message gets rendered. Feel free to submit a PR for improved installation methods.
Download
-
CSS
- style.css, minified
-
Javascript
- polyfills-legacy.min.js, legacy bundle for outdated browser support.
- sunset-to-sunset.min.js, minified
- sunset-to-sunset-legacy.min.js, minified for legacy browsers
<!DOCTYPE html>
<html lang="en">
<head>
<!-- ... -->
<!-- Sunset to Sunset javascript -->
<script type="module" src="YOUR/PATH/HERE/sunset-to-sunset.min.js" crossorigin></script>
<!-- Sunset to Sunset stylesheet -->
<link href="YOUR/PATH/HERE/style.css" rel="stylesheet" media="print" onload="this.media='all'">
<!-- Legacy bundle for outdated browser support. -->
<script type="nomodule" src="YOUR/PATH/HERE/polyfills-legacy.min.js"></script>
<!-- Sunset to Sunset javascript for legacy browsers -->
<script type="nomodule" src="YOUR/PATH/HERE/sunset-to-sunset-legacy.min.js"></script>
</head>
<body>
CDN
Link directly to the Sunset to Sunset files on unpkg.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- ... -->
<!-- Sunset to Sunset javascript -->
<script
type="module"
src="https://unpkg.com/sunset-to-sunset@1.0.7/dist/assets/sunset-to-sunset.min.js"
crossOrigin="true"
></script>
<!-- Sunset to Sunset stylesheet -->
<link
href="https://unpkg.com/sunset-to-sunset@1.0.7/dist/assets/style.css"
rel="stylesheet"
/>
<!-- Legacy bundle for outdated browser support. -->
<script
noModule
crossOrigin="true"
id="vite-legacy-polyfill"
src="https://unpkg.com/sunset-to-sunset@1.0.7/dist/assets/polyfills-legacy.min.js"
></script>
<!-- Sunset to Sunset javascript for legacy browsers -->
<script
noModule
crossOrigin="true"
id="vite-legacy-entry"
data-src="https://unpkg.com/sunset-to-sunset@1.0.7/dist/assets/sunset-to-sunset-legacy.min.js"
>
System.import(
document.getElementById('vite-legacy-entry').getAttribute('data-src'),
);
</script>
</head>
<body>
Support for Safari 10.1
Safari 10.1 supports modules, but does not support the nomodule
attribute - it will load <script nomodule>
anyway. If you need to support Safari 10.1 on your website you may use this snippet below:
<!-- Safari 10.1 `nomodule` fix script (https://gist.github.com/samthor/64b114e4a4f539915a95b91ffd340acc) -->
<!-- This can be omitted if you don't have many users of Safari 10.1 in your target audience. -->
<script>
!function(){var e=document,t=e.createElement("script");if(!("noModule"in t)&&"onbeforeload"in t){var n=!1;e.addEventListener("beforeload",function(e){if(e.target===t)n=!0;else if(!e.target.hasAttribute("nomodule")||!n)return;e.preventDefault()},!0),t.type="module",t.src=".",e.head.appendChild(t),t.remove()}}();
</script>
Usage
Sunset to sunset needs some initial configuration needed for it to work correctly for your location. It will work out of the box without configuration but it won't be for your location.
Custom Templates
Sunset to sunset has some built-in banner and message templates that will be shown at the appropriate times but sometimes you need to define your own wording. You can do that with <div>
s with the appropriate id
s added to to them.
Special Template Tags
You can add the following two tags to your custom templates to render the closing time and the opening times.
Closing Time
<span class="sts-closing-time"></span>
Opening Time
<span class="sts-opening-time"></span>
Formatting Times
There are three methods for setting the format on the calculated times in your custom templates:
- Token: Allows you to set what order each part of the date and time appear so it looks the same for everyone.
- Locale: Using whatever the user's browser's date/time format is set to.
- Default: Basically let the script decide for you.
Token
This is the most flexible formatting option as it allows you to define the order of the date/time parts and the formatting. To use the token
format include the special closing and opening time tags with a data-format-token
like the following:
<span class="sts-closing-time" data-format-token="cccc 'at' h:mm a ZZZZ"></span>
<!-- Output: Monday at 7:44 PM CDT -->
Note that you can add words in the token format by surrounding them with single quotes like in the example above.
Advanced formatting: The Luxon documentation has a full list of formatting tokens so that you can fine-tune your dates and times.
Locale
With this option you can't arrange the parts of the date and time but you can decide how they are formatted. To use the locale
format include the special closing and opening time tags with a data-format-locale
like the following:
<span class="sts-closing-time" data-format-locale='{
"weekday": "long",
"month": "long",
"hour": "numeric",
"minute": "numeric",
"timeZoneName": "short"
}'></span>
<!-- Output: September Monday, 7:44 PM CDT -->
Default
Include the special closing and opening time tags with no data-format-locale
or data-format-token
attributes and it will output the times with the token format of cccc, LLLL d 'at' h:mm a ZZZZ
:
<span class="sts-closing-time"></span>
<!-- Output: Monday, September 27 at 7:44 PM CDT -->
Banner Template
To define your custom banner template add the following snippet to your page, preferrably in the <head>
tag.
<div id="sts-banner-template">
<div class="sts-banner YOUR-CUSTOM-CLASSES-HERE">
Our store will be closing at
<span class="sts-closing-time"></span>
<span>and will re-open on</span>
<span class="sts-opening-time"></span>
</div>
</div>
The sts-banner
class provides some default styling for the banner that you could use as a starting point. Or you can remove it altogether and use your own custom styles. If you keep the sts-banner
class it will output something like what you see below:
Simple Message Template
If you want to just set a paragraph or two of text to appear during Sabbath then this is the template you'll want to use.
To define your custom message template add the following snippet to your page, preferrably in the <head>
tag:
<div id="sts-message-template">
<p>
Your message here
</p>
</div>
It will output something like what you see below:
If you supply no custom template then a default message will be set which looks like this:
Full Message Template
If you want to have full control over the appearance and layout of the message then you'll want to use the full message template. You will need to supply your own custom styling to add padding and centering of your message.
To define your custom message template add the following snippet to your page, preferrably in the <head>
tag:
<div id="sts-full-message-template">
<div class="your-custom-layout-class">
<div class="your-message-area">
<h1 class="your-message__heading">Sabbath</h1>
<p>Message here</p>
</div>
<div class="your-custom-time-area">
<p>
We will re-open on <strong><span class="sts-opening-time"></span>.</strong>
</p>
</div>
</div>
</div>
Defining the Settings
The settings are defined with an html template
element. The template must have an id
of sts-settings
and the data attribute data-settings
like below:
<template
id="sts-settings"
data-settings='{
"location": {
"lat": 35.7686615,
"long": -87.4871698
}
}'></template>
N.B.: the
data-settings
attribute must be valid JSON. Keys need to be quoted, for example"location":
. The attribute value uses single quotes ', but the JSON entities use double-quotes ".
Settings
You can pass an object of configuration options with the data-settings
attribute in the template above. The allowed values are as follows:
location
-
Type:
Object
-
Default:
{ "lat": 0, "long": 0 }
-
Description: An object defining the latitude and longitude of the location to calculate the sunset times. Both keys
lat
andlong
are expected to be of theNumber
type. -
Example:
"location": { "lat": 35.7686615, "long": -87.4871698 }
guardDuration
-
Type:
Object
-
Default:
{ "minutes": 30 }
-
Description: This allows you to set the duration of the guard before and after the Sabbath. Whatever time you set here will determine when your Sabbath message will come up and go down.
- It accepts any object of options that can have any of the following keys:
years
,quarters
(three months),months
,weeks
,days
,hours
,minutes
,seconds
, andmilliseconds
. It's recommended to the smaller units likehours
,minutes
, etc. though because otherwise you'll be calculating guard times that are into the next week.
- It accepts any object of options that can have any of the following keys:
-
Example: If the sun set on Friday at 8:00pm and on Saturday at 8:02pm this would calculate the closing guard time at 5:15pm on Friday and the opening time at 10:47pm on Saturday:
"guardDuration": { "hours": 2, "minutes": 45 }
bannerDuration
-
Type:
Object
-
Default:
{ "hours": 3 }
-
Description: This allows you to set the duration that the banner will be visible before the Sabbath message appears.
- It accepts any object of options that can have any of the following keys:
years
,quarters
(three months),months
,weeks
,days
,hours
,minutes
,seconds
, andmilliseconds
. Generally you will only need to usehours
andminutes
though.
- It accepts any object of options that can have any of the following keys:
-
Example: This would show the banner 3 hours and 3 minutes before the calculated closing guard time determined by the
guardDuration
option:"bannerDuration": { "hours": 3, "minutes": 30 }
simulateTime
-
Type:
Boolean | String
-
Default:
false
-
Description: This allows you to simulate the time to see how the plugin works at different times of the week and different times of the day. The accepted values are:
preparation-day
banner-up
during-sabbath
after-sabbath
-
Example: This would show the Sabbath message as it would appear during the Sabbath hours.
"simulateTime": "during-sabbath"
debug
-
Type:
Boolean
-
Default:
false
-
Description: When this is set to
true
it will output the calculated times to the console. N.B.: this will only show the calculated times if the current weekday is equal to the Friday or Saturday or if thesimulateTime
setting is notfalse
. This is done so that it doesn't need to calculate the sunset times unnessarily during the week. -
Example: This would output the calculated times to the console.
"debug": "true"