Collapse-Pro-Matic External Link with Find-Me Scrolling

This is a test Collapse-Pro-Matic’s ability to use external triggers to auto expand and scroll to other expands on the same page.
First we need quite a bit of text. Here is some from the Wiki entry for Star Wars:

Star Wars

Star Wars is an American epic space opera media franchise, centered on a film series created by George Lucas. It depicts the adventures of characters “a long time ago in a galaxy far, far away”.

The franchise began in 1977 with the release of the film Star Wars (later subtitled Episode IV: A New Hope in 1981[2][3]), which became a worldwide pop culture phenomenon. It was followed by the successful sequels The Empire Strikes Back (1980) and Return of the Jedi (1983); these three films constitute the original Star Wars trilogy. A prequel trilogy was released between 1999 and 2005, which received mixed reactions from both critics and fans. A sequel trilogy began in 2015 with the release of Star Wars: The Force Awakens and continued with the release of Star Wars: The Last Jedi (2017). The first eight films were nominated for Academy Awards (with wins going to the first two films released) and have been commercial successes, with a combined box office revenue of over US$8.5 billion,[4] making Star Wars the second highest-grossing film series.[5] Spin-off cinematic films include Rogue One (2016) and Solo: A Star Wars Story (2018).

Now we place a little expand element for R2D2 that we will reference below:

[expand title="R2D2" id="droid2d2"]...[/expand]
R2D2
R2-D2 (/ˌɑːrtuːˈdiːtuː/), or Artoo-Detoo[citation needed], is a fictional robot character in the Star Wars franchise created by George Lucas. A small astromech droid, R2-D2 is a major character and appears in nine out of the ten Star Wars films to date. Throughout the course of the films, R2 is a friend to Padmé Amidala, Anakin Skywalker, Leia Organa, Luke Skywalker, and Obi-Wan Kenobi in various points in the saga.
English actor Kenny Baker played R2-D2 in all three original Star Wars films, and received billing credit for the character in the prequel trilogy, where Baker’s role was reduced, as R2-D2 was portrayed mainly by radio controlled props and CGI models. In the sequel trilogy, Baker was credited as consultant for The Force Awakens; however, Jimmy Vee also co-performed the character in some scenes. Vee later took over the role beginning in The Last Jedi.[1] R2-D2’s sounds and vocal effects were created by Ben Burtt. R2-D2 was designed in artwork by Ralph McQuarrie, co-developed by John Stears and built by Tony Dyson.

Now we have another expand element with a link to R2D2 above using:

<a class="expandanchor" href="#droid2d2">R2-D2</a>
Astromech droid
An astromech droid is one of a series of “versatile utility robots generally used for the maintenance and repair of starships and related technology”. These small droids usually possess “a variety of tool-tipped appendages that are stowed in recessed compartments”. R2-D2 is an astromech droid introduced in 1977’s Star Wars and featured in all subsequent films.[14] The malfunctioning droid R5-D4 also makes a brief appearance in Star Wars.[15] U9-C4 is a timid droid sent on a mission with D-Squad, an all-droid special unit in Star Wars: The Clone Wars,[16] C1-10P is an oft-repaired, “outmoded” astromech who is one of the Star Wars Rebels regular characters,[17] and BB-8 is the astromech droid of X-wing fighter pilot Poe Dameron in The Force Awakens.

Custom Print Templates for Print-Pro-Matic

Note: This post assumes a basic understanding of WordPress templates and that a child-theme is being used.

To create a custom print template we first need to define a query var to trigger the template.
Add the following to the child-theme’s function.php file:

function printpromatic_query_var( $vars ) {
	$vars[] = 'print_view';
	return $vars;
}
add_filter( 'query_vars', 'printpromatic_query_var' );

Now WordPress will look for something like /?print_view=true at the end of any url.

Next step is to tell print-pro-matic to use the current page with the print_view query variable tacked on the back as the target url. Simply set the url attribute using the %print_view% placeholder as its value:

[print-me url="%print_view%"/]

Finally we need to check for this print_view query var and either a) use a custom print-only template file or b) modify the current page template to switch to a print-only view.

Redirect to Print-Only Template

If a print-only template exists simply redirect to this template file by adding the following code to the child-theme’s function.php file:

function printpromatic_print_template($original_template) {
    if ( get_query_var( 'print_view' ) ) {
		$new_template = locate_template( array( 'print-template.php' ) );
        return $new_template;
    }
	return $original_template;
}
add_filter( 'template_include', 'printpromatic_print_template' );

Modify the Existing Template

This method involves modifying the current page template to change what it displays based on the presence of the print_view query var.

In the page template being used, we need to check if the query_var is present:

$print_view = get_query_var( 'print_view' );

Now we need to simply wrap the existing template elements in an if statement:

//normal
if( empty($print_view) ){
   ...
}
//print only
else{
   ...
}

Archive-Pro-Matic Display Multiple Categories

As of version 1.1.2, multiple categories can be selected using the cat_id attribute. Simply provide a comma separated string of the category ID’s to include. Use a negative ID to omit multiple categories.

For example to include a yearly archive of posts with both the categories of ‘Archive-Pro-Matic’ (ID 55) and ‘collapse-pro-matic’ (ID 43) the shortcode would be:

[archives type="yearly" cat_id="55,43"]

Note: Currently the title of the archive page will display only the first category. A solution to display multiple titles is in the works. Multiple category titles will now display on the archive page.

Countdown Test – Local Computer Time

This is a test of a countdown that will launch at a specific time.
The time should not affected on the visitors local computer time.

weeks
2
3
days
0
5
hours
1
7
minutes
4
2
seconds
5
2

2001_Space_Odysey

Collapse-Pro-Matic Spacing

This is some text


Here is a headline

100-1 First thing
100-2 Second Thing
more
a. First Sub thing
b. Second sub thing
100-3 Third Thing
100-4 Forth Thing
100-5 Fifth Thing
more
I am bold.
Some info:
Here is some info that explains more about thing five.
100-6 Sixth Thing
100-7 Seventh Thing

Numbered List Items

<ul class="numbers">
    <li data-pos="2">one</li>
    <li data-pos="2">two
        <ul>
            <li data-pos="2">two.one</li>
            <li data-pos="2">two.two</li>
            <li data-pos="2">two.three</li>
        </ul>
    </li>
</ul>
  • one
  • two
    • two.one
    • two.two
    • two.three
  • three
    • three.one
    • three.two
      • three.two.one – this is a much longer piece of text that will wrap around and should display how the padding and offset of the numbering works with a longer text.
      • three.two.two
  • four

CSS:

ul.numbers {
    counter-reset: levelone;
    list-style: none;
}

ul.numbers > li {
    counter-increment: levelone;
}

ul.numbers > li[data-pos]:before {
    content: attr(data-pos) "." counters(levelone, ".") ". ";
}

ul.numbers ul {
    counter-reset: leveltwo;
    list-style: none;
}

ul.numbers ul > li {
    counter-increment: leveltwo;
}

ul.numbers ul > li[data-pos]:before {
    content: attr(data-pos) "." counters(levelone, ".") "." counters(leveltwo, ".") ". ";
}

ul.numbers ul ul {
    counter-reset: levelthree;
    list-style: none;
}

ul.numbers ul ul > li {
    counter-increment: levelthree;
}

ul.numbers ul ul > li[data-pos]:before {
    content: attr(data-pos) "." counters(levelone, ".") "." counters(leveltwo, ".") "." counters(levelthree, ".") ". ";
}

Collapse-O-Matic Numbers as ID Issue

This is a quick post to test the issue when using numbers as IDs as brought up in this thread:
https://wordpress.org/support/topic/multiple-titles-open-when-clicking-on-one/

To recreate this we will use two collapse elements with the ID’s of 1,2,3, 11, 12 and 13.

Trigger One
Content for ID one
Trigger Two
Content for ID two
Trigger Three
Content for ID three

Trigger Eleven
Content for ID eleven
Trigger Twelve
Content for ID twelve
Trigger Thirteen
Content for ID thirteen

The issue is the toggle selectors where using the following jQuery selector:

jQuery('[id^=target][id$='+id+']')

As of collapse-o-matic version 1.7.9 the selector is a more exact:

jQuery('#target-'+id)

T(-) Countdown Omitweeks Width Issue

This post investigates issues with the width of a countdown that has the weeks omitted. Since the width should auto-adjust based on the displayed time units.

c-3po

We’ll start with the c-3po style based on this issue on the WordPress Forums.

[tminus t="2018-04-11" omitweeks="true" style="c-3po"/]
days
5
0
hours
0
0
minutes
0
0
seconds
0
0
days
1
1
0
hours
0
0
minutes
0
0
seconds
0
0
weeks
1
5
days
0
5
hours
0
0
minutes
0
0
seconds
0
0
[tminus t="2018-04-11" omitweeks="true" style="c-3po-mini" minutes="mins." seconds="secs."/]
days
5
5
hours
0
0
mins.
0
0
secs.
0
0
days
1
1
3
hours
0
0
mins.
0
0
secs.
0
0
weeks
1
6
days
0
1
hours
0
0
mins.
0
0
secs.
0
0

sith

[tminus t="2018-04-11" omitweeks="true" style="sith"/]
days
5
0
hours
0
0
minutes
0
0
seconds
0
0
days
1
1
0
hours
0
0
minutes
0
0
seconds
0
0
weeks
1
5
days
0
5
hours
0
0
minutes
0
0
seconds
0
0

carbonlite

[tminus t="2018-04-11" omitweeks="true" style="carbonlite"/]
days
5
0
hours
0
0
minutes
0
0
seconds
0
0
days
1
1
0
hours
0
0
minutes
0
0
seconds
0
0
weeks
1
5
days
0
5
hours
0
0
minutes
0
0
seconds
0
0

cloud-city

[tminus t="2018-04-11" omitweeks="true" style="cloud-city"/]
days
5
0
hours
0
0
minutes
0
0
seconds
0
0
days
1
1
0
hours
0
0
minutes
0
0
seconds
0
0
weeks
1
5
days
0
5
hours
0
0
minutes
0
0
seconds
0
0

Jedi

[tminus t="2018-04-11" omitweeks="true"/]
days
5
0
hours
0
0
minutes
0
0
seconds
0
0
days
1
1
0
hours
0
0
minutes
0
0
seconds
0
0
weeks
1
5
days
0
5
hours
0
0
minutes
0
0
seconds
0
0

circle

[tminus t="2018-04-11" style="circle" omitweeks="true"/]
days
5
0
hours
0
0
minutes
0
0
seconds
0
0

Collapse Pro Matic – Scroll Target

Scroll to here on close

The above will be used as our ‘scroll target’ and was created using the following:

<h2 id="scroll2me">Scroll to here on close</h2>

The scrolltarget attribute allows any external element to be used as the location to scroll to for scroll-on-close triggers. The scrolltarget attribute accepts any jQuery selector by ID (#id_name), class (.class_name), or element tag (article).

For example:
scrolltarget="#my_id" would target a unique element that has an ID of my_id.

[expand title="R2D2 Wiki" ID="r2d2wiki" scrolltarget="#scroll2me"]
...
<span class="collapseomatic colomat-close scroll-to-trigger" id="bot-r2d2wiki">click here to close & scroll to target</span>
[/expand]
R2D2 Wiki
R2-D2 (phonetically spelled Artoo-Detoo, and called “R2” or “Artoo” for short) is a robot character in the Star Wars universe. An astromech droid (referred to in the novel as a ‘thermocapsulary dehousing assister’), R2-D2 is a major character in all six Star Wars films. Along with his protocol droid companion C-3PO, he joins or supports Anakin Skywalker, Luke Skywalker, Princess Leia, and Obi-Wan Kenobi in various points in the saga. R2-D2 was played by Kenny Baker. Along with Anakin Skywalker (Darth Vader), Obi-Wan Kenobi, and C-3PO, he is one of only four characters to appear in all six Star Wars films.
R2-D2 was designed by John Stears and Tony Dyson specially created by Australian firm Petric Engineering and English firm C&L Developments. Many scenes also made use of radio controlled and CGI versions of the character. Both the original props of R2-D2 and C-3PO used in filming are used as audio-animatronics in the queue area of Disneyland’s Star Tours ride.

Design

George Lucas’s creation of R2-D2 was influenced by Akira Kurosawa’s 1958 feature film The Hidden Fortress (USA release 1962), particularly Tahei and Matakishi, the two comic relief characters that serve as sidekicks to General Makabe. Lucas also drew inspiration from the robots Huey, Dewey, and Louie from Douglas Trumbull’s 1972 film Silent Running.
The name is said to derive from when Lucas was making one of his earlier films, American Graffiti. Sound editor Walter Murch states that he is responsible for the utterance which sparked the name for the droid. Murch asked for Reel 2, Dialog Track 2, in the abbreviated form “R-2-D-2”. Lucas, who was in the room and had dozed off while working on the script for Star Wars, momentarily woke when he heard the request and, after asking for clarification, stated that it was a “great name” before falling immediately back to sleep.[1] R2-D2 stands for Second Generation Robotic Droid Series-2, according to a Star Wars encyclopedia published after the release of the film Star Wars: A New Hope.

Original trilogy

In Star Wars Episode IV: A New Hope, both R2-D2 and C-3PO are introduced on board the Tantive IV, along with Princess Leia of Alderaan, when they are fired upon by an Imperial Star Destroyer. Leia jams inside an opening in R2-D2 an information disc containing the plans for the Death Star battle station, along with encoding a distress message on the droid’s holographic projector. The droids then escape in a pod that crashes on Tatooine near Kenobi’s desert abode.
R2-D2 and C-3PO are then abducted by Jawas and bought by Owen Lars, step-uncle of Luke Skywalker. While Luke cleans the sand out of R2-D2’s gears, he discovers a fragment of Leia’s message, and removes the droid’s restraining bolt to see more; once free of the bolt, R2 claims to have no knowledge of the message. That night, R2 leaves the farm to seek out Obi-Wan Kenobi. Soon, by way of fate, Luke is forced to leave Tatooine with Obi-Wan, Han Solo, and Chewbacca, and they attempt to deliver R2-D2 to the Rebel Alliance. Along the way, they are pulled in by the Death Star’s tractor beam, but eventually rescue Princess Leia and escape. R2-D2 delivers the plans to the Rebel Alliance, and becomes Luke’s astromech droid during the attack on the station. R2 is severely damaged during the battle, but is restored before the ceremony at the end of the film.
In Star Wars Episode V: The Empire Strikes Back, R2-D2 accompanies Luke to Dagobah, and later to Cloud City, where he helps to rescue and repair a heavily damaged C-3PO and to override city security computers. He also manages to fix the Millennium Falcon’s hyperdrive, resulting in a last-minute escape from Imperial forces.
In Star Wars Episode VI: Return of the Jedi, R2-D2 plays a critical role in the rescue of Han, Luke and Leia from Jabba the Hutt, and later joins the Rebel strike team on Endor. He is badly damaged during the fight between the Imperial troops and the Rebels, but is repaired in time for the celebration marking the second Death Star’s destruction.
R2-D2 is male, as far as by state of androids. In A New Hope, Obi-Wan Kenobi states in gender specific, “Plug-in, he should be able to interpret the entire Imperial network.”
Source: Wikipedia
click here to close & scroll to trigger