tracy panel: fixed selection & enhanced visual of copy command

nextras · Feb 11, 2019 · 1da3538 · 1da3538
1 parent b404bf1
commit 1da3538
Showing 1 changed file with 27 additions and 19 deletions.
diff --git a/src/Bridges/NetteTracy/ConnectionPanel.panel.phtml b/src/Bridges/NetteTracy/ConnectionPanel.panel.phtml
@@ -5,26 +5,35 @@ namespace Nextras\Dbal\Bridges\NetteTracy;
 ?>
 <style class="tracy-debug">
 	#tracy-debug .nextras-dbal-panel-sql { background: white !important; }
-	#tracy-debug .nextras-dbal-panel-sql .tracy-toggle, #tracy-debug .nextras-dbal-panel-sql a { color: #777 !important; }
-	#tracy-debug .nextras-dbal-panel-sql .nextras-dbal-rowscount { color: #777 !important; margin-right: 1em !important; }
-	#tracy-debug .nextras-dbal-panel-sql .tracy-toggle:hover { color: #fff !important; }
+	#tracy-debug .nextras-dbal-panel-sql > span, #tracy-debug .nextras-dbal-panel-sql > span > a { color: #777 !important; }
+	#tracy-debug .nextras-dbal-panel-sql > span > a:hover { color: #fff !important; }
+	#tracy-debug .nextras-dbal-panel-sql > span { margin-right: 1em !important; }
 	#tracy-debug .nextras-dbal-panel-sql .whitespace-explain { white-space: pre; !important; }
-	#tracy-debug .nextras-dbal-panel-time { text-align: right !important; white-space: nowrap; max-width: 70px; }
+	#tracy-debug .nextras-dbal-panel-time { text-align: right !important; white-space: nowrap !important; max-width: 70px !important; }
 </style>
 
 <script>
-	function nextrasDbalPanelCopySql(containerid) {
-		if (document.selection) { // IE
-			var range = document.body.createTextRange();
-			range.moveToElementText(document.getElementById(containerid));
-			range.select();
-		} else if (window.getSelection) {
-			var range = document.createRange();
-			range.selectNode(document.getElementById(containerid));
-			window.getSelection().removeAllRanges();
-			window.getSelection().addRange(range);
+	function nextrasDbalPanelCopySql(e, containerId) {
+		e.preventDefault();
+		const str = document.getElementById(containerId).textContent;
+		const el = document.createElement('textarea');
+		el.value = str;
+		el.setAttribute('readonly', '');
+		el.style.position = 'absolute';
+		el.style.left = '-9999px';
+		document.body.appendChild(el);
+		const selected =
+			document.getSelection().rangeCount > 0
+				? document.getSelection().getRangeAt(0)
+				: false;
+		el.select();
+		document.execCommand('copy');
+		document.body.removeChild(el);
+		if (selected) {
+			document.getSelection().removeAllRanges();
+			document.getSelection().addRange(selected);
 		}
-		document.execCommand("copy");
+		return false;
 	}
 </script>
 
@@ -43,14 +52,13 @@ namespace Nextras\Dbal\Bridges\NetteTracy;
 		<tr>
 		<td class="nextras-dbal-panel-time"><?php echo $elapsedTime ? sprintf('%0.2f', $elapsedTime * 1000) : '' ?></td>
 		<td class="nextras-dbal-panel-sql">
-			<span id="<?php echo $uniqRowId; ?>"><?php echo $sql ?></span>
-			<?php if ($explain !== null || $rowsCount !== null): ?><br><?php endif; ?>
+			<div id="<?php echo $uniqRowId; ?>"><?php echo $sql ?></div>
 			<?php if ($rowsCount !== null): ?>
 				<span class="nextras-dbal-rowscount"><?php echo $rowsCount === 1 ? $rowsCount . ' row' : $rowsCount . ' rows' ?></span>
 			<?php endif; ?>
-			<span class="nextras-dbal-rowscount"><a onclick="nextrasDbalPanelCopySql('<?php echo $uniqRowId; ?>')">copy</a></span>
+			<span><a href="" onclick="nextrasDbalPanelCopySql(event, '<?php echo $uniqRowId; ?>')">copy</a></span>
 			<?php if ($explain !== null): ?>
-				<a class="tracy-toggle tracy-collapsed" data-tracy-ref="^tr .nextras-dbal-explain">explain</a>
+				<span><a class="tracy-toggle tracy-collapsed" data-tracy-ref="^tr .nextras-dbal-explain">explain</a></span>
 				<table class="tracy-collapsed nextras-dbal-explain">
 					<tr>
 					<?php foreach ($explain[0] as $col => $foo): ?>