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
id5d0760ad8e952
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.

Days
0
0
Hours
0
3
Minutes
3
1
Seconds
5
1

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;
}

Expand/Collapse All Scroll To Current Section Test

This is a test using the ew expand_all and collapse_all callbacks to automatically scroll to the section currently being viewed. The issue is that when expand/collapse all is clicked, large amounts of content is suddenly added to–or removed from–the page. This new page length will often re-flow the page, causing the user to loose their place in the currently viewed content.

The Idea is to implement the following:
1. Create ‘section headers’ that will automatically update when the users scrolls past them.

<h2 id="section-1" class="section">Section Title</h2>

2. Add some javascript that will saved the currently viewed section id to a variable.

 jQuery(document).ready(function () {
        jQuery(document).on("scroll", onScroll);
        var currSection = null;
 });

function onScroll(event){
        var scrollPos = jQuery(document).scrollTop();
        jQuery('.section').each(function () {
            var currElement = jQuery(this);
            if (currElement.position().top <= scrollPos && currElement.position().top + currElement.height() > scrollPos) {
               currSection = currElement.attr("id");
            }
        });
    }

3. After expand/collapse/set all is triggered, all call back will be created that will scroll the page automatically to the section header that was last viewed.

if(typeof currSection !== 'undefined' && jQuery('#' + currSection).length ){
   setTimeout(function(){
      scrollTarget = jQuery('#' + currSection).offset().top;
      if(typeof colomatoffset !== 'undefined'){
         scrollTarget = scrollTarget + colomatoffset
      }
      jQuery('html, body').animate({scrollTop:scrollTarget});
   }, 700);
}

Demonstration:

Scroll down a bit and then click the Expand All link placed in the header at the end of the menu. All ‘read more’ content should be expanded and then the page should scroll back to the section that was being viewed. The effect is more dramatic the further down the page is scrolled.

Section 1: Aaeton

Aaeton was a planet of the Aaeton system, in the Core Worlds region. During the Cold War between the Galactic Republic and the Sith Empire, an Imperial bioweapon activated on the planet. During the last days of the Republic, the government of Aaeton had authorization to allow its citizens to visit the generally off-limits neighboring world of Ragoon VI.

more
I’m from the planet Aaeton, only half-day’s journey from here. Young people from my planet often go on survival camping trips on Ragoon-6 when we reach fourteen years of age. We have a special allowance from the Senate because we gave the elders of Ragoon refuge when they handed the planet over to the Senate.
―Floria

Section 2: Aaghra

Aaghra was the first planet from the star Zug in the Zug system of the galaxy’s Core Worlds region, not far from Coruscant,[1] the most politically important planet in galactic history.[2] It was a moonless world of molten rock.[1]

more
Aaghra was first mentioned briefly in part one of the Planet Hoppers article Aargau: For All Your Banking Needs, which was written by Cory J. Herndon and published on the Wizards.com website in 2003.[1]

Section 3: Aar

Aar was a planet[3] in the Aar system[1] of the Nijune sector,[2] part of the Outer Rim Territories.[1] It was homeworld to the Aar’aa species, reptilian sentients often employed as enforcers by the Hutts, a species known for its many crime lords.[3]

more
Aar was first mentioned in the 1997 novel The Paradise Snare, written by A. C. Crispin, and was also mentioned eleven years later in the 2008 The Complete Star Wars Encyclopedia.

Section 4: Aargau

Aargau (pronounced /är-‘gou/)[5] was a planet in the Zug system of the Core Worlds region, not far from Coruscant and the Corellian Run. It was run by and served as the headquarters for the Bank of Aargau, which was part of the InterGalactic Banking Clan. Numerous other banks and corporations were also based on Aargau, including the Z-Gomot Ternbuell Guppat Corporation. Aargau was an exceptionally wealthy world, due both to its status as a financial center, as well as the planet’s vast reserves of rare and precious metals.

more
Aargau was a member of the Galactic Republic from its discovery until the end of that galactic power. After the fall of the Galactic Empire, it was considered a New Republic stronghold. The region of space occupied by the planet would later fall under the hegemony of first the Galactic Federation of Free Alliances, and then subsequently Darth Krayt’s Galactic Empire. Despite this, Aargau took a neutral approach to politics, which meant that warring factions were mutually welcome to conduct business on the planet. The planetary government imposed only three laws on citizens and visitors, called the Three Statutes of Aargau. These laws focused on the export of Aargau’s natural resources, the absolute ban on weapons for visitors—and, conversely, the requirement to bear arms for Aargauuns—as well as maintaining the integrity of the Bank of Aargau. Breaking any of these rules was punishable by immediate execution.

Section 5: Aargonar

Aargonar was a dusty, desert-climate planet located in the Borderland Regions of the Mid Rim.

more
Aargonar was an insignificant desert world with few population.[2] The terrain was reminiscent of Tatooine for Jedi Knight Anakin Skywalker, with rock arches and stone spires dotting the once watery-planet.[3] The planet had several moons, including Aargonar 3.[2]

The planet was known to house numerous Sarlacc.[2] It was also home to Hrumphs and Gouka dragons.[3]

Collapse-O-Matic and Easy Footnotes Test

This is a test of how collapse-o-matic and easy footnotes can work togher. We have modified the Easy Footnotes1 plugin to allow for filtering before and after the footnote content. The modified plugin is available at Github 2

The filters used as follows:


add_filter( 'before_footnote', 'pre_footnote', 1);
function pre_footnote($footnote_content) {
	$footnote_content .= 'content to place before the footnotes';
	return $footnote_content;
}

add_filter( 'after_footnote', 'post_footnote', 1 );
function post_footnote($footnote_content) {
	$footnote_content .= 'content to place after the footnoes';
	return $footnote_content;
}

Print-Pro-Matic Placeholder Attribute

The placeholder attribute is used to add the print-me data to the page when print trigger and target will be added dynamically, for example: via AJAX or a Modal Window.

[print-me target="#print_me" placeholder="true"/]

This will not add the trigger to the page, just the targeting info for when the trigger is later displayed.

collapse-o-matic with inline link

This is an example of a collapse element with an inline link.

[expand title="this is a test with a <a href='https://plugins.twinpictures.de'>link</a>"]here is some hidden content[/expand]

the key is to use double quotes to wrap the title attribute and single quotes for the html inside the double quotes.

this is a test with a link
here is some hidden content