From 7a34c7eabe4712333e3a96754a836949ecfe4306 Mon Sep 17 00:00:00 2001
From: Vjacheslav Trushkin <cyberalien@gmail.com>
Date: Thu, 23 May 2013 11:55:04 +0300
Subject: [PATCH] [ticket/11563] Fix subPanels()

Fix subPanels() code
Modernize subPanels() with jQuery
Use HTML5 data attributes instead of including JS

PHPBB3-11563
---
 phpBB/styles/prosilver/template/forum_fn.js   | 56 ++++++++++++-------
 .../styles/prosilver/template/mcp_topic.html  | 23 +++-----
 .../prosilver/template/posting_editor.html    |  8 +--
 .../prosilver/template/posting_layout.html    |  7 ---
 4 files changed, 47 insertions(+), 47 deletions(-)

diff --git a/phpBB/styles/prosilver/template/forum_fn.js b/phpBB/styles/prosilver/template/forum_fn.js
index bb29f00490..d4a4f3e83d 100644
--- a/phpBB/styles/prosilver/template/forum_fn.js
+++ b/phpBB/styles/prosilver/template/forum_fn.js
@@ -106,32 +106,48 @@ function dE(n, s, type) {
 /**
 * Alternate display of subPanels
 */
-function subPanels(p) {
-	var i, e, t;
+jQuery(document).ready(function() {
+	jQuery('.sub-panels').each(function() {
 
-	if (typeof(p) === 'string') {
-		show_panel = p;
-	}
+		var panels = this.getAttribute('data-panels').split(','),
+			show_panel = this.getAttribute('data-show-panel');
 
-	for (i = 0; i < panels.length; i++) {
-		e = document.getElementById(panels[i]);
-		t = document.getElementById(panels[i] + '-tab');
+		if (panels.length) {
+			subPanels(show_panel);
+			jQuery('a[data-subpanel]', this).click(function () {
+				subPanels(this.getAttribute('data-subpanel'));
+				return false;
+			});
+		}
 
-		if (e) {
-			if (panels[i] === show_panel) {
-				e.style.display = 'block';
-				if (t) {
-					t.className = 'activetab';
-				}
-			} else {
-				e.style.display = 'none';
-				if (t) {
-					t.className = '';
+		function subPanels(p) {
+			var i, e, t;
+
+			if (typeof(p) === 'string') {
+				show_panel = p;
+			}
+
+			for (i = 0; i < panels.length; i++) {
+				e = document.getElementById(panels[i]);
+				t = document.getElementById(panels[i] + '-tab');
+
+				if (e) {
+					if (panels[i] === show_panel) {
+						e.style.display = 'block';
+						if (t) {
+							t.className = 'activetab';
+						}
+					} else {
+						e.style.display = 'none';
+						if (t) {
+							t.className = '';
+						}
+					}
 				}
 			}
 		}
-	}
-}
+	});
+});
 
 /**
 * Call print preview
diff --git a/phpBB/styles/prosilver/template/mcp_topic.html b/phpBB/styles/prosilver/template/mcp_topic.html
index 8dfee55cbf..130824b7b3 100644
--- a/phpBB/styles/prosilver/template/mcp_topic.html
+++ b/phpBB/styles/prosilver/template/mcp_topic.html
@@ -3,33 +3,24 @@
 <div class="tabs-container">
 <h2><a href="{U_VIEW_TOPIC}">{L_TOPIC}{L_COLON} {TOPIC_TITLE}</a></h2>
 
-<script type="text/javascript">
-// <![CDATA[
-var panels = new Array('display-panel', 'split-panel', 'merge-panel');
-
 <!-- IF S_MERGE_VIEW -->
-	var show_panel = 'merge-panel';
+	<!-- DEFINE $SHOW_PANEL = 'merge-panel' -->
 <!-- ELSEIF S_SPLIT_VIEW -->
-	var show_panel = 'split-panel';
+	<!-- DEFINE $SHOW_PANEL = 'split-panel' -->
 <!-- ELSE -->
-	var show_panel = 'display-panel';
+	<!-- DEFINE $SHOW_PANEL = 'display-panel' -->
 <!-- ENDIF -->
 
-onload_functions.push('subPanels()');
-
-// ]]>
-</script>
-
-<div id="minitabs">
+<div id="minitabs" class="sub-panels" data-show-panel="{$SHOW_PANEL}" data-panels="display-panel,split-panel,merge-panel">
 	<ul>
 		<li id="display-panel-tab"<!-- IF not S_MERGE_VIEW --> class="activetab"<!-- ENDIF -->>
-			<a href="#minitabs" onclick="subPanels('display-panel'); return false;"><span>{L_DISPLAY_OPTIONS}</span></a>
+			<a href="#minitabs" data-subpanel="display-panel"><span>{L_DISPLAY_OPTIONS}</span></a>
 		</li>
 		<li id="split-panel-tab">
-			<a href="#minitabs" onclick="subPanels('split-panel'); return false;"><span>{L_SPLIT_TOPIC}</span></a>
+			<a href="#minitabs" data-subpanel="split-panel"><span>{L_SPLIT_TOPIC}</span></a>
 		</li>
 		<li id="merge-panel-tab"<!-- IF S_MERGE_VIEW --> class="activetab"<!-- ENDIF -->>
-			<a href="#minitabs" onclick="subPanels('merge-panel'); return false;"><span>{L_MERGE_POSTS}</span></a>
+			<a href="#minitabs" data-subpanel="merge-panel"><span>{L_MERGE_POSTS}</span></a>
 		</li>
 	</ul>
 </div>
diff --git a/phpBB/styles/prosilver/template/posting_editor.html b/phpBB/styles/prosilver/template/posting_editor.html
index 3eac8fb03a..c381cfe0ed 100644
--- a/phpBB/styles/prosilver/template/posting_editor.html
+++ b/phpBB/styles/prosilver/template/posting_editor.html
@@ -193,11 +193,11 @@
 	<!-- ENDIF -->
 
 	<!-- IF not S_PRIVMSGS and not S_SHOW_DRAFTS and not $SIG_EDIT eq 1 -->
-		<div id="tabs">
+		<div id="tabs" class="sub-panels" data-show-panel="options-panel" data-panels="options-panel,attach-panel,poll-panel">
 			<ul>
-				<li id="options-panel-tab" class="activetab"><a href="#tabs" onclick="subPanels('options-panel'); return false;"><span>{L_OPTIONS}</span></a></li>
-				<!-- IF S_SHOW_ATTACH_BOX --><li id="attach-panel-tab"><a href="#tabs" onclick="subPanels('attach-panel'); return false;"><span>{L_ADD_ATTACHMENT}</span></a></li><!-- ENDIF -->
-				<!-- IF S_SHOW_POLL_BOX || S_POLL_DELETE --><li id="poll-panel-tab"><a href="#tabs" onclick="subPanels('poll-panel'); return false;"><span>{L_ADD_POLL}</span></a></li><!-- ENDIF -->
+				<li id="options-panel-tab" class="activetab"><a href="#tabs" data-subpanel="options-panel"><span>{L_OPTIONS}</span></a></li>
+				<!-- IF S_SHOW_ATTACH_BOX --><li id="attach-panel-tab"><a href="#tabs" data-subpanel="attach-panel"><span>{L_ADD_ATTACHMENT}</span></a></li><!-- ENDIF -->
+				<!-- IF S_SHOW_POLL_BOX || S_POLL_DELETE --><li id="poll-panel-tab"><a href="#tabs" data-subpanel="poll-panel"><span>{L_ADD_POLL}</span></a></li><!-- ENDIF -->
 			</ul>
 		</div>
 	<!-- ENDIF -->
diff --git a/phpBB/styles/prosilver/template/posting_layout.html b/phpBB/styles/prosilver/template/posting_layout.html
index 4e9954ef81..c0bd0225de 100644
--- a/phpBB/styles/prosilver/template/posting_layout.html
+++ b/phpBB/styles/prosilver/template/posting_layout.html
@@ -79,12 +79,5 @@
 <!-- IF S_DISPLAY_REVIEW --><!-- INCLUDE posting_topic_review.html --><!-- ENDIF -->
 
 </form>
-<!-- IF not S_PRIVMSGS -->
-<script type="text/javascript">
-// <![CDATA[
-	subPanels(show_panel);
-// ]]>
-</script>
-<!-- ENDIF -->
 
 <!-- INCLUDE overall_footer.html -->