Merge pull request #25 from INN/21-add-pym_id-attribute

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

README.md

@@ -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.
@@ -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>
+```

pym-shortcode.php

@@ -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.
@@ -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
 	);

readme.txt

@@ -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 =