From 896288ec6df805997377a137cd1597ff4ceacb55 Mon Sep 17 00:00:00 2001
From: Ben Keith <ben@benlk.com>
Date: Tue, 23 May 2017 10:33:41 -0400
Subject: [PATCH 1/2] Add a new attribute id="" for setting an explicit id on
 the iframe.

---
 pym-shortcode.php | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/pym-shortcode.php b/pym-shortcode.php
index c58839a..c581f10 100644
--- a/pym-shortcode.php
+++ b/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
 	);

From 62ab718c12fdbbd4d9b530d87b479bc76682ff13 Mon Sep 17 00:00:00 2001
From: Ben Keith <ben@benlk.com>
Date: Tue, 23 May 2017 11:27:03 -0400
Subject: [PATCH 2/2] Update README.md and readme.txt

---
 README.md  | 10 +++++++++-
 readme.txt |  4 +++-
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index b1aaf91..d42bafa 100644
--- a/README.md
+++ b/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>
+```
diff --git a/readme.txt b/readme.txt
index ef5cff5..0f95e83 100644
--- a/readme.txt
+++ b/readme.txt
@@ -44,9 +44,11 @@ Mobile view of the WordPress post with the NPR embed using Pym Shortcode:
 
 == Changelog ==
 
+* 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 =