From a6cc5e278ea52808706b19b5bc6d9532934439d9 Mon Sep 17 00:00:00 2001
From: dfyockey <git@diffengine.net>
Date: Fri, 18 Sep 2020 15:30:48 -0400
Subject: [PATCH] Improved data show/hide features.

- In a control change, toggling visibility of all data sections in the document except
the Application Data sections is now performed by clicking on any Application Data
heading.
- Clicking on any application title in a generated Html document now toggles the
visibility of all information for all other applictions in the document.
- Page positioning after a pertinent click using window.scrollBy() has been replaced by
use of element.scrollIntoView() to facilitate implemention of the aforementioned
control change.
---
 README.md | 25 ++++++++++++++++---------
 peds.xsl  | 50 ++++++++++++++++++++++++++++++++++++--------------
 2 files changed, 52 insertions(+), 23 deletions(-)

diff --git a/README.md b/README.md
index 6ed3651..1ee73f0 100644
--- a/README.md
+++ b/README.md
@@ -109,21 +109,28 @@
      
   5. Open the generated Html files to view the formatted PEDS data.
 
-  ## Tips
+  ## Viewing Options
+  
+  1. Click any Application Data heading in a generated Html file to hide
+     all data sections in the file *except* Application Data sections. Click
+     any Application Data heading again to show the hidden sections. This
+     feature can be useful in browsing through a large collection of
+     results to find applications of interest.
+     
+  2. Click any application title in a generated Html file to hide all
+     *other* information in the file except that for the clicked title.
+     Click the one remaining application title again to show the hidden
+     information for the other titles. This feature can be useful for
+     printing information for a single application to paper or PDF.
   
-  1. As of XSLT_PEDS version 1.1.0, you may click on any application title
-     in a generated Html file to hide all data sections in the file except
-     Application Data sections. Clicking any application title again will
-     show the hidden sections. This feature can be useful in browsing
-     through a large collection of results to find applications of interest.
+  ## Tips
 
-  2. Depending on the file manager used, you may be able to select
+  1. Depending on the file manager used, you may be able to select
      multiple generated Html files and hit "Enter" -- or open a context
      menu (i.e. "right-click menu") and click "Open" -- to open the files
      in a collection of (randomly-ordered) tabs.
 
-  3. The Html files are completely portable; i.e. you can move them to
+  2. The Html files are completely portable; i.e. you can move them to
      any folder, email them to someone, etc.
 
 ---
-
diff --git a/peds.xsl b/peds.xsl
index 2c69dc5..41fd5db 100644
--- a/peds.xsl
+++ b/peds.xsl
@@ -35,25 +35,45 @@
 
 			<script language="javascript">
 
-				function toggleDetails(mouseevent) {
-					var d, i, t;
-
-					// Align clicked application title to top of viewport
-					t = document.getElementById("trailer");
+				// Utility to align an element to the top of the viewport
+				function alignClickedTitleToTop(e) {
+					var t = document.getElementById("trailer");
 					t.style.height = screen.height;
 					t.style.display = "block";
-					window.scrollBy(0, (mouseevent.clientY - mouseevent.offsetY));
+					e.scrollIntoView(true);
 					t.style.display = "none";
+				}
 
-					// Show/hide applications' data blocks except Application Data
+				// Utility to show/hide an element
+				function toggleElement(e) {
+					if (e.style.display === "none") {
+						e.style.display = "block";
+					} else {
+						e.style.display = "none";
+					}
+				}
+
+				// Show/hide all applications' info, including title, except that having the clicked-on title
+				function toggleOtherApplications(mouseevent) {
+					var d, i;
+					d = document.querySelectorAll(".application");
+					for (i = 0; i &lt; d.length; i++) {
+						if (d[i] !== mouseevent.target.parentElement)
+							toggleElement(d[i]);
+					}
+
+					alignClickedTitleToTop(mouseevent.target);
+				}
+
+				// Show/hide applications' data blocks except Application Data
+				function toggleDetails(mouseevent) {
+					var d, i;
 					d = document.querySelectorAll(".details");
 					for (i = 0; i &lt; d.length; i++) {
-						if (d[i].style.display === "none") {
-							d[i].style.display = "block";
-						} else {
-							d[i].style.display = "none";
-						}
+						toggleElement(d[i]);
 					}
+
+					alignClickedTitleToTop(mouseevent.target.parentNode.parentNode.previousElementSibling);
 				}
 
 			</script>
@@ -139,6 +159,7 @@
 			<div class="content">
 				
 				<xsl:for-each select="uspat:PatentData">
+				  <div class="application">
 					<xsl:apply-templates select="uspat:PatentCaseMetadata"/>												<!-- Application Data			-->
 					<div class="details">
 						<xsl:apply-templates select="uspat:ProsecutionHistoryDataBag"/>											<!-- Transaction History		-->
@@ -149,6 +170,7 @@
 						<xsl:apply-templates select="uspat:PatentCaseMetadata/uspat:PriorityClaimBag"/>							<!-- Foreign Priority			-->
 						<xsl:apply-templates select="uspat:AssignmentDataBag"/>													<!-- Assignments				-->
 				    </div>
+				  </div>
 				</xsl:for-each>
 				
 				<hr />
@@ -180,10 +202,10 @@
 	</xsl:variable>
 
 	<hr />
-	<h2 class="doctitle" onclick="toggleDetails(event)"><xsl:value-of select="pat:InventionTitle"/></h2>
+	<h2 class="doctitle" onclick="toggleOtherApplications(event)"><xsl:value-of select="pat:InventionTitle"/></h2>
 	<table class="blocktbl">
 		<!-- AFAIK, values for the International Reg No and Reg Pub Date in this table apparently may only appear in design patents -->
-		<caption><h3>Application Data</h3></caption>
+		<caption onclick="toggleDetails(event)"><h3>Application Data</h3></caption>
 		<tr>
 			<td class="rj" width="25%">Application Number:</td><td width="25%"><xsl:value-of select="uscom:ApplicationNumberText"/></td>
 			<td class="rj" width="25%">Correspondence Address Customer Number:</td><td width="25%"><xsl:value-of select="uspat:PartyBag/com:CorrespondenceAddress/com:PartyIdentifier"/></td></tr>