From 7850a2f1cb405a068e055d5143fb4208bb917413 Mon Sep 17 00:00:00 2001
From: Gabriel Schulhof <gabriel.schulhof@intel.com>
Date: Thu, 13 Feb 2014 10:20:48 +0200
Subject: [PATCH] Panel: Do not store ID inside the widget

Fixes gh-6769
---
 js/widgets/panel.js            | 12 +++++++-----
 tests/unit/panel/index.html    |  4 ++++
 tests/unit/panel/panel_core.js | 28 ++++++++++++++++++++++++++++
 3 files changed, 39 insertions(+), 5 deletions(-)

diff --git a/js/widgets/panel.js b/js/widgets/panel.js
index 24458100e95..6dc6592080e 100644
--- a/js/widgets/panel.js
+++ b/js/widgets/panel.js
@@ -34,7 +34,6 @@ $.widget( "mobile.panel", {
 		positionFixed: false
 	},
 
-	_panelID: null,
 	_closeLink: null,
 	_parentPage: null,
 	_page: null,
@@ -49,7 +48,6 @@ $.widget( "mobile.panel", {
 
 		// expose some private props to other methods
 		$.extend( this, {
-			_panelID: el.attr( "id" ),
 			_closeLink: el.find( ":jqmData(rel='close')" ),
 			_parentPage: ( parentPage.length > 0 ) ? parentPage : false,
 			_page: this._getPage,
@@ -91,7 +89,7 @@ $.widget( "mobile.panel", {
 		var self = this,
 			target = self._parentPage ? self._parentPage.parent() : self.element.parent();
 
-		self._modal = $( "<div class='" + self.options.classes.modal + "' data-panelid='" + self._panelID + "'></div>" )
+		self._modal = $( "<div class='" + self.options.classes.modal + "'></div>" )
 			.on( "mousedown", function() {
 				self.close();
 			})
@@ -223,9 +221,13 @@ $.widget( "mobile.panel", {
 	},
 
 	_handleClick: function( e ) {
-		if (  e.currentTarget.href.split( "#" )[ 1 ] === this._panelID && this._panelID !== undefined ) {
+		var link,
+			panelId = this.element.attr( "id" );
+
+		if ( e.currentTarget.href.split( "#" )[ 1 ] === panelId && panelId !== undefined ) {
+
 			e.preventDefault();
-			var link = $( e.target );
+			link = $( e.target );
 			if ( link.hasClass( "ui-btn" ) ) {
 				link.addClass( $.mobile.activeBtnClass );
 				this.element.one( "panelopen panelclose", function() {
diff --git a/tests/unit/panel/index.html b/tests/unit/panel/index.html
index c8c65c2cd15..7ff5589b9cb 100644
--- a/tests/unit/panel/index.html
+++ b/tests/unit/panel/index.html
@@ -70,6 +70,9 @@
 		<div data-nstest-role="panel" id="panel-test-ignore-unrelated-link">
 			<a href="#" id="unrelated-link" data-nstest-ajax="false">Unrelated link</a>
 		</div>
+		<div data-nstest-role="panel" id="panel-test-id-change">
+			<p>Contents of a panel.</p>
+		</div>
 		<div data-nstest-role="header">
 			<h1>Panel Test</h1>
 		</div>
@@ -85,6 +88,7 @@ <h1 id="demo-links">Panels</h1>
 			<a href="#panel-test-destroy">Open Panel</a>
 			<a href="#panel-test-non-default-theme">Open Panel</a>
 			<a href="#panel-test-with-close">Open Panel</a>
+			<a href="#panel-test-id-change">Open Panel</a>
 		</div>
 	</div>
 
diff --git a/tests/unit/panel/panel_core.js b/tests/unit/panel/panel_core.js
index ea8c6fa0cd8..dd1daa4eaa4 100644
--- a/tests/unit/panel/panel_core.js
+++ b/tests/unit/panel/panel_core.js
@@ -326,4 +326,32 @@
 		]);
 	});
 
+	asyncTest( "Panel still opens after changing its ID", function() {
+		var eventNs = ".panelStillOpensAfterChangingItsId",
+			idTestPanel = $( "#panel-test-id-change" ),
+			idTestLink = $( "a[href='#panel-test-id-change']" );
+
+		expect( 1 );
+
+		idTestPanel.attr( "id", "something-else" );
+		idTestLink.attr( "href", "#something-else" );
+
+		$.testHelper.detailedEventCascade([
+			function() {
+				idTestLink.click();
+			},
+			{
+				panelopen: { src: idTestPanel, event: "panelopen" + eventNs + "1" }
+			},
+			function( result ) {
+				deepEqual( result.panelopen.timedOut, false, "Renamed panel has opened" );
+				idTestPanel.panel( "close" );
+			},
+			{
+				panelclose: { src: idTestPanel, event: "panelclose" + eventNs + "2" }
+			},
+			start
+		]);
+	});
+
 }( jQuery ));