Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add a new attribute id="" for setting an explicit id on the iframe. #25

Merged
merged 3 commits into from
Jun 23, 2017
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 9 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
## All options:

```
[pym src="" pymsrc="" pymoptions=""]
[pym src="" pymsrc="" pymoptions="" id="" ]
```

`src` is the URL of the page that is to be embedded.
Expand All @@ -28,3 +28,11 @@ To do the same thing with this Pym shortcode, you would write:
```
[pym src="child.html" pymoptions=" xdomain: '\\*\.npr\.org' "]
```

`id` is optional; this should be a valid HTML element ID name. It will be used as the ID of your `pymParent` iframe on the parent page. You would want to use this if, for example, [your embedded page contained navigation to another page, requiring the second page to know the pymParent element ID](https://github.com/INN/pym-shortcode/issues/20).

For example, the shortcode `[pym src="http://blog.apps.npr.org/pym.js/examples/graphic/child.html" id="extremely_specific_id"]` results in the following output:

```html
<div id="extremely_specific_example"></div><script src="http://example.org/wp-content/plugins/pym-shortcode/js/pym.v1.min.js"></script><script>var pym_0 = new pym.Parent('extremely_specific_example', 'http://blog.apps.npr.org/pym.js/examples/graphic/child.html', {})</script>
```
9 changes: 7 additions & 2 deletions pym-shortcode.php
Original file line number Diff line number Diff line change
Expand Up @@ -30,12 +30,17 @@ function pym_shortcode( $atts, $context, $tag ) {

$pymsrc = empty( $atts['pymsrc'] ) ? plugins_url( '/js/pym.v1.min.js', __FILE__ ) : $atts['pymsrc'];
$pymoptions = empty( $atts['pymoptions'] ) ? '' : $atts['pymoptions'];
$id = empty( $atts['id'] ) ? '' : esc_attr( $atts['id'] );
$actual_id = empty( $id ) ? 'pym_' . $pym_id : $id;

$src = $atts['src'];

ob_start();

echo '<div id="pym_' . $pym_id . '"></div>';
printf(
'<div id="%1$s"></div>',
$actual_id
);

// If this is the first one on the page, output the pym src
// or if the pymsrc is set, output that.
Expand All @@ -51,7 +56,7 @@ function pym_shortcode( $atts, $context, $tag ) {
echo sprintf(
'var pym_%1$s = new pym.Parent(\'%2$s\', \'%3$s\', {%4$s})',
$pym_id,
"pym_$pym_id",
$actual_id,
$src,
$pymoptions
);
Expand Down
3 changes: 2 additions & 1 deletion readme.txt
Original file line number Diff line number Diff line change
Expand Up @@ -48,10 +48,11 @@ Mobile view of the WordPress post with the NPR embed using Pym Shortcode:

* Update to pym.js version 1.2.2: https://github.com/nprapps/pym.js/releases/tag/v1.2.2 (Changelog at https://github.com/nprapps/pym.js/blob/master/CHANGELOG )
* (we skipped pym.js version 1.2.1: https://github.com/nprapps/pym.js/releases/tag/v1.2.1 )
* Add `id=""` attribute to allow setting custom IDs on embeds. [#21](https://github.com/INN/pym-shortcode/issues/21)

= 1.2.0.2 =

* Fix encoding error on pym.v1.min.js, [thanks to lchheng](https://github.com/INN/pym-shortcode/pull/18
* Fix encoding error on pym.v1.min.js, [thanks to lchheng](https://github.com/INN/pym-shortcode/pull/18)

= 1.2.0.1 =

Expand Down