Merge pull request #70 from joomla-projects/remove-inline-scripts/plu…

…gins/system/debug/debug.php Remove inline scripts/plugins/system/debug/debug.php
brianteeman · Feb 25, 2018 · 380a489 · 380a489
2 parents 2b8f269 + b0d510f
commit 380a489
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 45 deletions.
diff --git a/media/plg_system_debug/css/debug.css b/media/plg_system_debug/css/debug.css
@@ -48,6 +48,7 @@ div#system-debug {
 }
 
 #system-debug div.dbg-container {
+	display: none;
 	padding: 10px;
 }
 

diff --git a/media/plg_system_debug/js/debug.js b/media/plg_system_debug/js/debug.js
@@ -3,23 +3,39 @@
  * @license     GNU General Public License version 2 or later; see LICENSE.txt
  */
 
-Joomla = window.Joomla || {};
-
-(function( Joomla, document ) {
-	"use strict";
+(function (document) {
+  'use strict';
 
-	document.addEventListener('DOMContentLoaded', function() {
-		Joomla.toggleContainer = function(name)
-		{
-			var e = document.getElementById(name);
-			e.style.display = (e.style.display == 'none') ? 'block' : 'none';
-		};
+  // Selectors used by this script
+  var debugSectionTogglerSelector = '.dbg-header';
+  var toggleTargetAttribute = 'data-debug-toggle';
 
-		var sidebarWrapper = document.getElementById('sidebar-wrapper'),
-		    debugWrapper   = document.getElementById('system-debug');
-		if (sidebarWrapper && debugWrapper) {
-			debugWrapper.style.marginLeft = '60px';
-		}
-	});
+  /**
+   * Toggle an element by id
+   * @param id
+   */
+  var toggle = function (id) {
+    var element = document.getElementById(id);
+    if (element) {
+      element.style.display = (element.style.display === 'block') ? 'none' : 'block';
+    }
+  };
 
-}( Joomla, document ));
+  /**
+   * Register events
+   */
+  var registerEvents = function () {
+    var sectionTogglers = [].slice.call(document.querySelectorAll(debugSectionTogglerSelector));
+    sectionTogglers.forEach(function (toggler) {
+      toggler.addEventListener('click', function (event) {
+        event.preventDefault();
+        toggle(toggler.getAttribute(toggleTargetAttribute));
+      });
+    });
+  };
+
+  document.addEventListener('DOMContentLoaded', function () {
+    registerEvents();
+  });
+
+}(document));
diff --git a/plugins/system/debug/debug.php b/plugins/system/debug/debug.php
@@ -454,16 +454,9 @@ protected function display($item, array $errors = array())
 
 		$html = array();
 
-		$js = "Joomla.toggleContainer('dbg_container_" . $item . "');";
+		$html[] = '<div class="dbg-header' . $status . '" data-debug-toggle="dbg_container_' . $item . '"><a href="#"><h3>' . $title . '</h3></a></div>';
 
-		$class = 'dbg-header' . $status;
-
-		$html[] = '<div class="' . $class . '" onclick="' . $js . '"><a href="javascript:void(0);"><h3>' . $title . '</h3></a></div>';
-
-		// @todo set with js.. ?
-		$style = ' style="display: none;"';
-
-		$html[] = '<div ' . $style . ' class="dbg-container" id="dbg_container_' . $item . '">';
+		$html[] = '<div class="dbg-container" id="dbg_container_' . $item . '">';
 		$html[] = $this->$fncName();
 		$html[] = '</div>';
 
@@ -485,17 +478,8 @@ protected function displayCallback($name, $callable)
 		$title = Text::_('PLG_DEBUG_' . strtoupper($name));
 
 		$html = array();
-
-		$js = "Joomla.toggleContainer('dbg_container_" . $name . "');";
-
-		$class = 'dbg-header';
-
-		$html[] = '<div class="' . $class . '" onclick="' . $js . '"><a href="javascript:void(0);"><h3>' . $title . '</h3></a></div>';
-
-		// @todo set with js.. ?
-		$style = ' style="display: none;"';
-
-		$html[] = '<div ' . $style . ' class="dbg-container" id="dbg_container_' . $name . '">';
+		$html[] = '<div class="dbg-header" data-debug-toggle="dbg_container_' . $name . '"><a href="#"><h3>' . $title . '</h3></a></div>';
+		$html[] = '<div class="dbg-container" id="dbg_container_' . $name . '">';
 		$html[] = call_user_func($callable);
 		$html[] = '</div>';
 
@@ -553,14 +537,10 @@ protected function displaySession($key = '', $session = null, $id = 0)
 
 				if (!$display)
 				{
-					$js = "Joomla.toggleContainer('dbg_container_session" . $id . '_' . $sKey . "');";
-
-					$html[] = '<div class="dbg-header" onclick="' . $js . '"><a href="javascript:void(0);"><h3>' . $sKey . '</h3></a></div>';
-
-					// @todo set with js.. ?
-					$style = ' style="display: none;"';
-
-					$html[] = '<div ' . $style . ' class="dbg-container" id="dbg_container_session' . $id . '_' . $sKey . '">';
+					$html[] = '<div class="dbg-header" data-debug-toggle="dbg_container_session' . $id . '_' . $sKey . '">';
+					$html[] = '<a href="#"><h3>' . $sKey . '</h3></a>';
+					$html[] = '</div>';
+					$html[] = '<div class="dbg-container" id="dbg_container_session' . $id . '_' . $sKey . '">';
 					$id++;
 
 					// Recurse...
-Original file line number
+Diff line change
@@ Expand Up / @@ -48,6 +48,7 @@ div#system-debug { @@
     }
     #system-debug div.dbg-container {
+    	display: none;
     	padding: 10px;
     }
@@ Expand Down @@