T(-) Countdown Gutenberg Test

This is a test for integrating T(-) Countdown with Gutenberg Blocks.
First, we need to tidy up how the Javascript is being used. Here is a basic countdown that uses a shortcode.

.Days.
0
0
Hours
0
0
Minutes
0
5
Seconds
0
0

T(-) Countdown 2.0 Style Tests

Jedi

Dealing with 2, 3 and 4 digits
[tminus t="+1366 days +10 sec" omityears="true" omitmonths="true" omitweeks="true" style="jedi"/]

Days
1
3
6
6
Hours
0
0
Minutes
0
0
Seconds
1
0

Darth

Days
1
3
6
6
Hours
0
0
Minutes
0
0
Seconds
1
0

Carbonite

Days
1
3
6
6
Hours
0
0
Minutes
0
0
Seconds
1
0

Carbonlite

Days
1
3
6
6
Hours
0
0
Minutes
0
0
Seconds
1
0

c-3po

Days
1
3
6
6
Hours
0
0
Minutes
0
0
Seconds
1
0

c-3po-mini

Days
1
3
6
6
Hours
0
0
Minutes
0
0
Seconds
1
0

carbonite-responsive

Days
1
3
6
6
Hours
0
0
Minutes
0
0
Seconds
1
0

circle

Days
1
3
6
6
Hours
0
0
Minutes
0
0
Seconds
1
0

cloud-city

Days
1
3
6
6
Hours
0
0
Minutes
0
0
Seconds
1
0

hoth

Days
1
3
6
6
Hours
0
0
Minutes
0
0
Seconds
1
0

naboo

Days
1
3
6
6
Hours
0
0
Minutes
0
0
Seconds
1
0

sith

Days
1
3
6
6
Hours
0
0
Minutes
0
0
Seconds
1
0

TIE-fighter

Days
1
3
6
6
Hours
0
0
Minutes
0
0
Seconds
1
0

T(-) Countdown Proper Time Unit Calculation

we should only have to calculate year, month and week time units once, as they will likely change only one time per viewing. Even so, we will need to properly calculate the amount of days, weeks and months remain, depending on how many time units are currently being displayed. We use a test of +410 days and 10 seconds from now to test how the change over works for the larger time units.

Test 1 – Showing Everything

This test should show everything: Years, Months, Weeks, Days… and the rest.
[tminus t="+410 days +10 sec" style="TIE-fighter"/]

Years
0
1
Months
0
1
Weeks
0
1
Days
0
6
Hours
0
0
Minutes
0
0
Seconds
1
0

Test 2 – No Weeks

This test should show everything: Years, Months, Weeks, Days… and the rest.
[tminus t="+396 days +10 sec" omitweeks="true" style="TIE-fighter"/]

Years
0
1
Months
0
0
Days
3
0
Hours
0
0
Minutes
0
0
Seconds
1
0

Test 3 – No Months

This test should show everything: Years, Months, Weeks, Days… and the rest.
[tminus t="+394 days +10 sec" omitmonths="true" style="TIE-fighter"/]

Years
0
1
Weeks
0
4
Days
0
0
Hours
0
0
Minutes
0
0
Seconds
1
0

Test 4 – No Months or Years

This test should show everything: Years, Months, Weeks, Days… and the rest.
[tminus t="+394 days +10 sec" omitmonths="true" omityears="true" style="TIE-fighter"/]

Weeks
5
6
Days
0
2
Hours
0
0
Minutes
0
0
Seconds
1
0

Test 5 – No Months or Weeks

This test should show: Years and days.
[tminus t="+366 days +10 sec" omitmonths="true" omitweeks="true" style="TIE-fighter"/]

Years
0
1
Days
0
0
0
Hours
0
0
Minutes
0
0
Seconds
1
0

Test 6 – Days Only

This test should show only days:
[tminus t="+45 days" omityears="true" omitmonths="true" omitweeks="true"/]

Days
4
5
Hours
0
0
Minutes
0
0
Seconds
0
0

T(-)Minus Countdown Years and Months

This is a quick test to try out the new years and month options added in version 2.3.20… this looks like it might end up being version 2.4.0 at this rate. Yup, it will be a major release.

Test 1 – Show it All

This test should show everything: Years, Months, Weeks, Days… and the rest.
[tminus t="+410 days +10 sec" style="c-3po"/]

Years
0
1
Months
0
1
Weeks
0
1
Days
0
6
Hours
0
0
Minutes
0
0
Seconds
1
0

Test 2 – Omit Years

This test will omit the years, resulting in expanded months.
[|tminus t="+410 days" omityears="true" style="c-3po"/]]

Months
1
3
Weeks
0
1
Days
0
6
Hours
0
0
Minutes
0
0
Seconds
0
0

Test 3 – Omit Months – Keep Years

This test will display the years, but convert months to weeks.
[tminus t="+410 days" omitmonths="true" style="c-3po"/]

Years
0
1
Weeks
0
6
Days
0
1
Hours
0
0
Minutes
0
0
Seconds
0
0

Test 4 – Omit Years and Months

The title, pretty much says it all. No years, no Months… just a whole lott’a weeks:
[tminus t="+410 days" omityears="true" omitmonths="true" style="c-3po"/]

Weeks
5
8
Days
0
4
Hours
0
0
Minutes
0
0
Seconds
0
0

Test 5 – Omit Years, Months and Weeks

Days for days…
[tminus t="+410 days" omityears="true" omitmonths="true" omitweeks="true" style="c-3po"/]

Days
4
1
0
Hours
0
0
Minutes
0
0
Seconds
0
0

Test 6 – Omit Weeks Only

No weeks, but the rest.
[tminus t="+410 days" omitweeks="true" style="c-3po"/]

Years
0
1
Months
0
1
Days
1
3
Hours
0
0
Minutes
0
0
Seconds
0
0

Test 7 – Omit Months and Weeks

No months, no weeks.
[tminus t="+410 days +10 secs" omitmonths="true" omitweeks="true" style="c-3po"/]

Years
0
1
Days
4
3
Hours
0
0
Minutes
0
0
Seconds
1
0

Test 8 – Omit Years and Weeks

No years, no weeks.
[tminus t="+410 days" omityears="true" omitweeks="true" style="c-3po"/]

Months
1
3
Days
1
3
Hours
0
0
Minutes
0
0
Seconds
0
0

Print-Pro-Matic wp_localize test

This is a test of print-pro-matic using wp_localize to pass js vars to the js file. it also passes print-only elements.

Like this one with the .printonly class listed in the shortcode

And here is the shortcode:
[print-me print_only=".printonly"/]

Actually, this should not be passed via shortcode, but rather only defined in the option page.
[print-me /]

Scroll Targets and URL Hash

This is a test where a scroll-to target will open an expand, however will then scroll back to the top of the page–or actually an element at the top of the page defined as:
<h2='top'>Scroll Target at Top<H2>

Scroll Target at Top

This is just some filler text to move the expand item a bit further down the screen. In fact, why not just throw in an image and save us all a heap of blibber blabber text. Here is a photo of a donkey stuck in a manhole cover. Silly donkey, you are not a man… you’re a donkey.

Donkey in a hole lot of trouble

Now we place an expand element with a defined ID and scrolltarget value:
[expand title="trigger text" id="monkey" scrolltarget="#top"/]

trigger text
This is some hidden text about a monkey in a bucket.

So navigating directly to
https://spacedonkey.de/3439/scroll-targets-and-url-hash/#monkey

will scroll down to the monkey element, open it, then scroll back up to the top element. This bouncing around is quite annoying.

Introducing: hash-trigger

This is a test where we introduce a new attribute called hash_trigger. This is an secondary id that will be use to expand but not scroll to a collapse element based on the url anchor hash. For example. We create an expand element like so:
[expand title="trigger text" id="smashing" hash_trigger="pumpkins"/]

trigger text
This is some hidden text that will expand but not scroll to

Now when we link directly to the page with the url anchor hash of #smashing it will scroll to and expand the element above as normal. However, if we use the url anchor hash of #pumpkins it will only expand the element and NOT scroll anywhere , providing:
1. there is no other element with an ID of pumpkins
2. there is no scroll-to attribute defined on this expand element.

Note: to assign the hash_trigger using the roll-your-own method, simply assign a data-hash-trigger attribute to the trigger element:

<div class="collapseomatic" id="smashing" title="trigger text" data-hash-trigger="pumpkins">trigger text</div>

Collapse Pro Matic – Adding 2nd Trigger in Excerpt

Collapse-Pro-Matic version 1.3.15 introduces a couple new features dealing with secondary triggers and excerpt filtering. The following demonstrates the new features by using a filter to add a second trigger with it’s own swaptitle to all excerpts.

The following code, when placed in the child-theme’s function.php file, will add an extra ‘…read more’ trigger to the end of all excerpts. The data-swaptitle attribute defines the swaptitle for this extra trigger.

 add_filter( 'colomat_excerpt', 'my_excerpt', 10, 2 );
 function my_excerpt( $id, $excerpt ) {
     $excerpt .= ' <span class="collapseomatic" id="extra1-'.$id.'" data-swaptitle=" ...read less"> ...read more</span>';
     return $excerpt;
 }

Then each shortcode that contains an excerpt will include the second trigger:

[expand title="I am a little tea-pot" excerpt="short and stout"]Here is my handle, here is my spout.[/expand]

And here is an example of the above in action:

I am a little tea-pot
short and stout
Here is my handle, here is my spout.

Next, what happens when there are multiple triggers with swaptitles? Let’s see.

[expand title="main trigger" swaptitle="main trigger swap" id="mankey"]this is the hidden text for this multi-target test[/expand]
<div id="extra1-mankey" class="collapseomatic" data-swaptitle="Trigger 2 Swap Titlte">Trigger 2</div>
<div id="extra2-mankey" class="collapseomatic" data-swaptitle="Trigger 3 Swap Titlte">Trigger 3</div>
main trigger
this is the hidden text for this multi-target test
Trigger 2
Trigger 3
MORE ⬇
hey dude

Guttenberg Collapse-O-Matic Image Embed

This is a little test of how to embed an image in a guttenberg expand shortcode block. The issue this aims to resolved can be found here.

since there is not an easy way to ‘insert’ an image inside a shortcode, the raw html will have to be placed. First we insert an image in a normal Gutenberg block:

Then we need to grab the html for that image by editing the block as html. The source for the above image is:

<img src="https://spacedonkey.de/wp-content/uploads/2015/06/The-Big-Lebowski-the-big-lebowski-31504499-540-720.jpg" alt="" class="wp-image-2398"/>

So we paste that in the shortcode block… so all togher it looks like:

[expand title="click to view image"] <img src="https://spacedonkey.de/wp-content/uploads/2015/06/The-Big-Lebowski-the-big-lebowski-31504499-540-720.jpg" alt="" class="wp-image-2398"/> [/expand]

And here is an example of the whole shebang in action:

click to view image

Countdown Timer with Offset

This is a countdown timer that actually counts down to 15:15. However, it should display that it is actually counting down to 16:15. so an offset of + 1 hours.

So how is this done?
As of T(-) Countdown Control version 1.8.9 the target can be filtered with an offset by adding the following to the child-theme functions.php file:

add_filter( 'countdown_offset', 'my_offset', 10, 2 );
function my_offset( $id, $target_time ) {
if($id == '3411'){
$target_time = $target_time + (1 * 60 * 60);
}
return $target_time;
}