PubWriter Sandbox Tutorial

<div class="sandbox">

# Embed an audio file player

# Repeat the audio

1-START
<div class="panel panel-default">
<div class="panel-body">
<div class="example" data-date="2022-02-02 2:22 PM"></div>
  </div># Time Circles

## The Next Deadline

## Countdown to 2-22-22 22:22

Can I add this to my website?

***

### [BG30 Promo](https://mail.google.com/mail/u/0/?ui=2&view=btop&ver=6p2jpcn2e0dk&search=inbox&th=%23thread-f%3A1723577086971070210%7Cmsg-f%3A1723577086971070210&cvid=1)

***

## [SLO Life](https://mail.google.com/mail/u/0/?ui=2&view=btop&ver=6p2jpcn2e0dk&q=slolife&qs=true&qid=773EA863-5F45-4364-912C-E9B4158DDD8E&aqid=D5F20788-98A4-46D4-8A43-D5C3AB98A627&search=query&th=%23thread-f%3A1722866297461853253%7Cmsg-f%3A1722869987634205423&qt=ife.1.life.1.slo.1.slol.1.slolife.1.slolife%27s.1.slolifer.1.slolifers.1.slolives.1&cvid=2) (Doug Garland)

***

## Requirements:

1. BS5 CSS
2. BS5 JS
3. Jquery
4. Timecircle JS
5. Div

When the neccesary files have been included, it's very simple to set up TimeCircles on your page, simply target the element you wish to use with jQuery, and execute the TimeCircles function on it. This will create TimeCircles inside the targeted element, counting up from 0 (when the page was opened)
<div class="panel panel-default">
<div class="panel-body">
<div class="example"></div>
</div>

<div class="panel-footer code"><small class="codeType">Javascript</small></span><span style="color: #007700">$(</span><span style="color: #DD0000">".example"</span><span style="color: #007700">).</span><span style="color: #0000BB">TimeCircles</span><span style="color: #007700">(); </span><span style="color: #0000BB"></div>
</div>
<div class="alert alert-danger small-text">
<small>
<strong>Important note:</strong>
TimeCircles will automatically make it self the size of whatever element you place it in.
If you do not have a height set, it will attempt to determine a height based on the element's width.
For the best results however, it's recommended to set both the width and height.
</small>
</div>
<h3 id="ReferenceTime">Setting your reference time</h3>
<p>
Of course, you might not want to start counting up from 0. Perhaps you're counting down the time until a wedding, or alternatively counting how long you've been with your girlfriend (or whatever else really). Really, TimeCircles is most useful if you're using it with some reference time and/or date.

Setting up your reference date and time is also fairly simple.
The best way to do it is to simply include it in the html element you've set aside for TimeCircles.
Create an attribute called <code>data-date</code> and provide a value in the format of <code>yyyy-mm-dd hh:mm:ss</code>
</p>

<div class="panel-footer code"><small class="codeType">HTML</small><font color="0000FF"><<font color="0000FF">div</font> <font color="009900">class<font color="0000FF">=</font><font color="800080">"example"</font> data-date<font color="0000FF">=</font><font color="800080">"2014-01-01 00:00:00"</font></font>></font><font color="0000FF"></<font color="0000FF">div</font>></font></div>
</div>

<h3 id="StopWatch">Creating a stopwatch</h3>

It is also possible that you want to use TimeCircles to count down a specific amount of time, like 15 minutes. This works similarly as creating a reference time, however here the attribute <code>data-timer</code> is used, and the value is the time to count down from (<em>in seconds</em>).

<div class="panel-footer code"><small class="codeType">HTML</small><font color="0000FF"><<font color="0000FF">div</font> <font color="009900">class<font color="0000FF">=</font><font color="800080">"example"</font> data-timer<font color="0000FF">=</font><font color="800080">"900"</font></font>></font><font color="0000FF"></<font color="0000FF">div</font>></font></div>
</div>

<h2 id="Options">Options</h2>
                    <p>
                        It's nice that TimeCircles comes in yellow, green, blue, and red- but wouldn't it be even nicer if it came in the color theme of your own website?
                        Alternatively, wouldn't it be great if you could change other aspects of the way it looks? Perhaps change the language of the text to whatever you want?
                    </p>
                    <p>
                        To customize TimeCircles to fit precisely what you're looking for you can use the options. In this section we will look into what options are available and what each option means.
                    </p>
                    <h3 id="opt_start">start <small><code>(default: true)</code></small></h3>
                    <p>
                        This option determines whether or not TimeCircles should start immediately.
                        If for example you wish to create a stopwatch that starts when the users clicks a button, you'll want to set this to false.
                    </p>
                    <pre><small class="codeType">Javascript</small></span><span style="color: #007700">$(</span><span style="color: #DD0000">".example"</span><span style="color: #007700">).</span><span style="color: #0000BB">TimeCircles</span><span style="color: #007700">({</span><span style="color: #0000BB">start</span><span style="color: #007700">: </span><span style="color: #0000BB">false</span><span style="color: #007700">}); </span><span style="color: #0000BB"></pre>
                    <h3 id="opt_refresh_interval">refresh_interval <small><code>(default: 0.1)</code></small></h3>
                    <p>
                        This option determines how frequently TimeCircles is updated. The value is expressed in seconds, so 0.1 means one tenth of a second.
                    </p>
                    <pre><small class="codeType">Javascript</small></span><span style="color: #007700">$(</span><span style="color: #DD0000">".example"</span><span style="color: #007700">).</span><span style="color: #0000BB">TimeCircles</span><span style="color: #007700">({</span><span style="color: #0000BB">refresh_interval</span><span style="color: #007700">: </span><span style="color: #0000BB">1</span><span style="color: #007700">}); </span><span style="color: #0000BB"></pre>
                    <h3 id="opt_count_past_zero">count_past_zero <small><code>(default: true)</code></small></h3>
                    <p>
                        This option is only really useful for when counting down.
                        What it does is either give you the option to stop the timer,
                        or start counting up after you've hit the predefined date (or your stopwatch hits zero).
                    </p>
                    <pre><small class="codeType">Javascript</small></span><span style="color: #007700">$(</span><span style="color: #DD0000">".example"</span><span style="color: #007700">).</span><span style="color: #0000BB">TimeCircles</span><span style="color: #007700">({</span><span style="color: #0000BB">count_past_zero</span><span style="color: #007700">: </span><span style="color: #0000BB">false</span><span style="color: #007700">}); </span><span style="color: #0000BB"></pre>
                    <h3 id="opt_circle_bg_color">circle_bg_color <small><code>(default: "#60686F")</code></small></h3>
                    <p>
                        This option determines the color of the background circle.
                    </p>
                    <pre><small class="codeType">Javascript</small></span><span style="color: #007700">$(</span><span style="color: #DD0000">".example"</span><span style="color: #007700">).</span><span style="color: #0000BB">TimeCircles</span><span style="color: #007700">({</span><span style="color: #0000BB">circle_bg_color</span><span style="color: #007700">: </span><span style="color: #DD0000">"#000000"</span><span style="color: #007700">}); </span><span style="color: #0000BB"></pre>
                    <h3 id="opt_use_background">use_background <small><code>(default: true)</code></small></h3>
                    <p>
                        This options sets whether any background circle should be drawn at all.
                        Disabling this option could be used in isolation, or you could use a background of your own to place behind TimeCircles.
                    </p>
                    <pre><small class="codeType">Javascript</small></span><span style="color: #007700">$(</span><span style="color: #DD0000">".example"</span><span style="color: #007700">).</span><span style="color: #0000BB">TimeCircles</span><span style="color: #007700">({</span><span style="color: #0000BB">use_background</span><span style="color: #007700">: </span><span style="color: #0000BB">false</span><span style="color: #007700">}); </span><span style="color: #0000BB"></pre>
                    <h3 id="opt_fg_width">fg_width <small><code>(default: 0.1)</code></small></h3>
                    <p>
                        This option sets the width of the foreground circle. The width is set relative to the size of the circle as a whole.
                        A value of 0.1 means 10%, so if your TimeCircles are 100 pixels high, the foreground circle will be 10 percent of that (10 pixels).
                    </p>
                    <pre><small class="codeType">Javascript</small></span><span style="color: #007700">$(</span><span style="color: #DD0000">".example"</span><span style="color: #007700">).</span><span style="color: #0000BB">TimeCircles</span><span style="color: #007700">({</span><span style="color: #0000BB">fg_width</span><span style="color: #007700">: </span><span style="color: #0000BB">0.05</span><span style="color: #007700">}); </span><span style="color: #0000BB"></pre>
                    <h3 id="opt_bg_width">bg_width <small><code>(default: 1.2)</code></small></h3>
                    <p>
                        This option sets the width of the backgroundground circle. The width of the background is set relative to the width of the foreground.
                        A value of 1 means 100%, so a value of 1 would mean having a width equal to your foreground ring. Higher and you get wider, lower you get thinner.
                    </p>
                    <pre><small class="codeType">Javascript</small></span><span style="color: #007700">$(</span><span style="color: #DD0000">".example"</span><span style="color: #007700">).</span><span style="color: #0000BB">TimeCircles</span><span style="color: #007700">({</span><span style="color: #0000BB">bg_width</span><span style="color: #007700">: </span><span style="color: #0000BB">0.5</span><span style="color: #007700">}); </span><span style="color: #0000BB"></pre>
                    <h3 id="opt_time">time</h3>
                    <p>
                        The time option is actually a group of options that allows you to control the options of each time unit independently.
                        As such, within time each unit of time has its own sub-category. These categories are: Days, Hours, Minutes, and Seconds.
                        The options available within each category are as follows:
                    </p>
                    <ul>
                        <li><strong>show</strong>: Determines whether the time unit should be shown at all</li>
                        <li><strong>text</strong>: Determines the text shown below the time. Useful for use on non-English websites</li>
                        <li><strong>color</strong>: Determines the color of the foreground circle of the time unit</li>
                    </ul>
                    <pre><small class="codeType">Javascript</small></span><span style="color: #007700">$(</span><span style="color: #DD0000">".example"</span><span style="color: #007700">).</span><span style="color: #0000BB">TimeCircles</span><span style="color: #007700">({ </span><span style="color: #0000BB">time</span><span style="color: #007700">: {
    </span><span style="color: #0000BB">Days</span><span style="color: #007700">: { </span><span style="color: #0000BB">color</span><span style="color: #007700">: </span><span style="color: #DD0000">"#C0C8CF" </span><span style="color: #007700">},
    </span><span style="color: #0000BB">Hours</span><span style="color: #007700">: { </span><span style="color: #0000BB">color</span><span style="color: #007700">: </span><span style="color: #DD0000">"#C0C8CF" </span><span style="color: #007700">},
    </span><span style="color: #0000BB">Minutes</span><span style="color: #007700">: { </span><span style="color: #0000BB">color</span><span style="color: #007700">: </span><span style="color: #DD0000">"#C0C8CF" </span><span style="color: #007700">},
    </span><span style="color: #0000BB">Seconds</span><span style="color: #007700">: { </span><span style="color: #0000BB">color</span><span style="color: #007700">: </span><span style="color: #DD0000">"#C0C8CF" </span><span style="color: #007700">}
}}); </span><span style="color: #0000BB"></pre>
                    <h2 id="Functions">Functions</h2>
                    <p>
                        Functions will allow you to interact with your TimeCircles as they're running.
                        Generally speaking, this functionality is most often used by other developers who want their own javascript to interact with TimeCircles.
                        However, if you're not a developer yourself, there are still a few functions that are quite simple to use and shouldn't be too hard to tackle.
                    </p>
                    <p>
                        Before we go into what each function does however, it should be pointed out how these functions can be used.
                        Unlike quite a lot of other jQuery plugins, TimeCircles does not return a jQuery object after instantiating. Instead, it returns a TimeCircles object.
                        This means that function chaining will work slightly differently than it does for other jQuery plugins.
                        To find out more about how to chain other jQuery plugins and functions, have a look at the <code>end()</code> function.
                    </p>
                    <p>
                        TimeCircles functions themselves (with the exception of the <code>end()</code> function) will return the TimeCircles object.
                        This allows you to chain several functions into each other. IE: You could chain <code>start()</code> straight into <code>addEventListener(callback)</code>.
                    </p>
                    <h3 id="func_start_stop">start() and stop()</h3>
                    <p>
                        These are the most basic functions provided. They allow you to temporarily stop TimeCircles.
                        This is especially useful when you're using TimeCircles as a sort of stopwatch (ie: counting down a certain number of seconds).
                        If you're using TimeCircles to count down to a certain point in the future, obviously pausing TimeCircles isn't going to stop time itself.
                    </p>
                    <div class="panel panel-default">
                        <div class="panel-heading code"><small class="codeType">HTML</small><font color="0000FF"><<font color="0000FF">div</font> <font color="009900">class<font color="0000FF">=</font><font color="800080">"example stopwatch"</font> data-timer<font color="0000FF">=</font><font color="800080">"900"</font></font>></font><font color="0000FF"></<font color="0000FF">div</font>></font>
<font color="0000FF"><<font color="0000FF">button</font> <font color="009900">class<font color="0000FF">=</font><font color="800080">"btn btn-success start"</font></font>></font>Start<font color="0000FF"></<font color="0000FF">button</font>></font>
<font color="0000FF"><<font color="0000FF">button</font> <font color="009900">class<font color="0000FF">=</font><font color="800080">"btn btn-success start"</font></font>></font>Stop<font color="0000FF"></<font color="0000FF">button</font>></font></div>
                        <div class="panel-body">
                            <div class="example stopwatch" data-timer="900"></div>
                            <button class="btn btn-success btn-small start">Start</button>
                            <button class="btn btn-danger btn-small stop">Stop</button>
                        </div>
                        <div class="panel-footer code"><small class="codeType">Javascript</small></span><span style="color: #007700">$(</span><span style="color: #DD0000">".example"</span><span style="color: #007700">).</span><span style="color: #0000BB">TimeCircles</span><span style="color: #007700">();
$(</span><span style="color: #DD0000">".stop"</span><span style="color: #007700">).</span><span style="color: #0000BB">click</span><span style="color: #007700">(function(){ $(</span><span style="color: #DD0000">".example.stopwatch"</span><span style="color: #007700">).</span><span style="color: #0000BB">TimeCircles</span><span style="color: #007700">().</span><span style="color: #0000BB">stop</span><span style="color: #007700">(); });
$(</span><span style="color: #DD0000">".start"</span><span style="color: #007700">).</span><span style="color: #0000BB">click</span><span style="color: #007700">(function(){ $(</span><span style="color: #DD0000">".example.stopwatch"</span><span style="color: #007700">).</span><span style="color: #0000BB">TimeCircles</span><span style="color: #007700">().</span><span style="color: #0000BB">start</span><span style="color: #007700">(); }); </span><span style="color: #0000BB"></div>
                    </div>
                    <h3 id="func_destroy">destroy()</h3>
                    <p>
                        If for some reason, you need to get rid of your TimeCircles, or you want to allow users remove them at the click of a button; you can do that with destroy.
                    </p>
                    <pre><small class="codeType">Javascript</small></span><span style="color: #007700">$(</span><span style="color: #DD0000">".example"</span><span style="color: #007700">).</span><span style="color: #0000BB">TimeCircles</span><span style="color: #007700">().</span><span style="color: #0000BB">destroy</span><span style="color: #007700">(); </span><span style="color: #0000BB"></pre>
                    <h3 id="func_addListener">addListener <small><code>(callback)</code></small></h3>
                    <p>
                        The most powerful interactions with TimeCircles can be achieved using listeners.
                        Using listeners, you can make a ticking sound play every second, or you can make a sound whenever a minute passes.
                        You could even use it to trigger some alarm or whole other javascript when the timer hits zero.
                    </p>
                    <p>
                        To add a listener, use the <code>addEventListener(callback)</code> function.
                        Callback is a function you pass to the event listener. The callback will then be triggered for each event.
                        Three parameters are passed to your callback function, namely:
                    </p>
                    <ul>
                        <li><strong>unit</strong>: The time unit in string format. So, "Days"/"Hours"/"Minutes"/"Seconds".</li>
                        <li><strong>value</strong>: The new value of the time unit that changed. I.e.: 15.</li>
                        <li><strong>total</strong>: This is the total time left (or elapsed) since the zero point.</li>
                    </ul>
                    <h3 id="func_end">end()</h3>
                    <p>
                        To allow you to chain TimeCircles to other jQuery functions, you can use the <code>end()</code> function.
                        The end function returns the jQuery object and allows you to trigger jQuery function as desired.
                    </p>
                    <pre><small class="codeType">Javascript</small></span><span style="color: #007700">$(</span><span style="color: #DD0000">".example"</span><span style="color: #007700">).</span><span style="color: #0000BB">TimeCircles</span><span style="color: #007700">().</span><span style="color: #0000BB">end</span><span style="color: #007700">().</span><span style="color: #0000BB">fadeOut</span><span style="color: #007700">(); </span><span style="color: #0000BB"></pre>
                    <p> </p><p> </p><p> </p><p> </p>
                </div>
            </div>
        </div>
    </body>
</html>

2-FINISH