fixing picklists + headers + extra browse

mlibrary · Nov 29, 2023 · 5bc6186 · 5bc6186
1 parent 2e8bcf8
commit 5bc6186
Show file tree

Hide file tree

Showing 14 changed files with 327 additions and 87 deletions.
diff --git a/src/js/text/handlers/action-toggle-tree.js b/src/js/text/handlers/action-toggle-tree.js
@@ -0,0 +1,21 @@
+window.addEventListener('DOMContentLoaded', (event) => {
+
+  const toggleDetails = function(value) {
+    detailsEls.forEach((el) => {
+      el.open = value;
+    })
+  }
+
+  const detailsEls = document.querySelectorAll('details.tree');
+  const btnExpandAll = document.querySelector('button[data-action="expand-all"]');
+  const btnCollapseAll = document.querySelector('button[data-action="collapse-all"]');
+
+  btnExpandAll.addEventListener('click', () => {
+    toggleDetails(true);
+  })
+
+  btnCollapseAll.addEventListener('click', () => {
+    toggleDetails(false);
+  })
+
+});
diff --git a/src/js/text/main.js b/src/js/text/main.js
@@ -16,6 +16,7 @@ import "./handlers/action-bookbag-form.js";
 
 import "./handlers/action-copy-text.js";
 import "./handlers/action-item-download.js";
+import "./handlers/action-toggle-tree.js";
 import "./handlers/item-page-navigator.js";
 import "./viewers/viewer-mirador.js";
 // import "./viewers/viewer-plaintext.js";

diff --git a/styles/styles.css b/styles/styles.css
@@ -75,16 +75,119 @@ ul ul {
 }
 
 
-ul.list-bulleted, .text-block ul {
+ul.list-bulleted {
   list-style: initial;
   padding: revert;
 }
 
-ol.list-numbered, text-block ol {
+ol.list-numbered, text-block ol:not([class]) {
   list-style: decimal;
   padding: revert;
 }
 
+/* TREE */
+.list-tree{
+  --spacing : 1.5rem;
+  --radius  : 12px;
+}
+
+.list-tree li{
+  display      : block;
+  position     : relative;
+  padding: 1rem 0;
+  padding-left : calc(2 * var(--spacing) - var(--radius) - 2px);
+  margin-top: -4px;
+}
+
+.xxlist-tree li:last-child {
+  margin-top: -4px; /* magic! */
+}
+
+.list-tree ul{
+  margin-left  : calc(var(--radius) - var(--spacing));
+  padding-left : 0;
+}
+
+.list-tree ul li{
+  border-left : 2px solid #ddd;
+}
+
+.list-tree ul li:last-child{
+  border-color : transparent;
+}
+
+.list-tree ul li::before{
+  content      : '';
+  display      : block;
+  position     : absolute;
+  top          : calc(var(--spacing) / -2 + 1rem);
+  left         : -2px;
+  width        : calc(var(--spacing) + 2px);
+  height       : calc(var(--spacing) + 1px);
+  border       : solid #ddd;
+  border-width : 0 0 2px 2px;
+}
+
+.list-tree summary{
+  display : block;
+  cursor  : pointer;
+}
+
+.list-tree summary::marker,
+.list-tree summary::-webkit-details-marker{
+  display : none;
+}
+
+.list-tree summary:focus{
+  outline : none;
+}
+
+.list-tree summary:focus-visible{
+  outline : 1px dotted #000;
+}
+
+.list-tree li::after,
+.list-tree summary::before{
+  content       : '';
+  display       : block;
+  position      : absolute;
+  top           : calc(var(--spacing) / 2 - var(--radius) + 1rem);
+  left          : calc(var(--spacing) - var(--radius) - 1px);
+  width         : calc(2 * var(--radius));
+  height        : calc(2 * var(--radius));
+  border-radius : 50%;
+  background    : #ddd;
+}
+
+.list-tree summary::before{
+  z-index    : 1;
+  /* background : #696 url('expand-collapse.svg') 0 0; */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: "Material Icons";
+  font-size: 24px;
+  content: "\e5ce";
+  content: "\e409";
+  content: "\e145";
+  background: var(--color-teal-300);
+  color: white;
+}
+
+.list-tree details[open] > summary::before{
+  background-position : calc(-2 * var(--radius)) 0;
+  content: "\e5cf";
+  content: "\e15b";
+}
+
+.list-tree a, .list-tree details {
+  margin-left: 1rem;
+}
+
+.list-tree a {
+  display: block;
+}
+
 svg {
   display: inline-block;
   vertical-align: middle;
@@ -128,7 +231,7 @@ main {
 
 /** Details **/
 
-details > summary {
+details.panel > summary {
   list-style: none;
   cursor: pointer;
   padding: 0.25em 0.5em;
@@ -142,31 +245,31 @@ details.panel > summary {
   border-left: 2px solid transparent;
 }
 
-details[open] {
+details.panel[open] {
   padding: 0.25em 0.5em;
 }
 
-details[open] > summary:first-of-type {
+details.panel[open] > summary:first-of-type {
   font-weight: var(--semibold);
   color: var(--color-teal-400);
   border-left: 2px solid var(--color-teal-400);
   padding: 0.25em 0.5em;
 }
 
-details > summary::after {
+details.panel > summary::after {
   font-family: "Material Icons";
   font-size: 24px;
   content: "\e5cf";
   color: var(--color-teal-400);
 }
 
-details[open] > summary::after {
+details.panel[open] > summary::after {
   font-family: "Material Icons";
   content: "\e5ce";
   color: var(--color-teal-400);
 }
 /* Removes the default arrow on Chrome */
-details > summary::-webkit-details-marker {
+details.panel > summary::-webkit-details-marker {
   display: none;
 }
 

diff --git a/templates/text/browse.xml b/templates/text/browse.xml
@@ -34,6 +34,9 @@
   <BrowseStringForm><?BROWSE_STRING_FORM_XML?></BrowseStringForm>
   <BrowseLevels><?BROWSE_LEVELS_XML?></BrowseLevels>
 
+
+  <?CHUNK filename="uplift.panels.xml" optional="1"?>
+
    <Footer>
     <?CHUNK filename="footer.xml"?>
   </Footer>

diff --git a/templates/text/dlxsclassglobals.xml b/templates/text/dlxsclassglobals.xml
@@ -16,5 +16,6 @@
 <PrintOnDemandEnabled><?POD_ENABLED_XML?></PrintOnDemandEnabled>
 <SearchHistoryHref><?SEARCH_HISTORY_LINK_XML?></SearchHistoryHref>
 
+<?CHUNK filename="collection-idno.chnk" optional="1"?>
 <?CHUNK filename="rightsmap.en.xml"?>
 <?CHUNK filename="rightsmap-extra.en.xml" optional="1"?>
diff --git a/templates/text/picklist.xml b/templates/text/picklist.xml
@@ -9,8 +9,9 @@
         <Filename>../vendor/str.split.function.xsl</Filename>
         <Filename>../vendor/xslfunctions.xsl</Filename>
         <Filename>qui/components/*.xsl</Filename>
-        <Filename>qui/includes/qui.results-item.xsl</Filename>
-        <Filename>qui/includes/qui.scopedivs.xsl</Filename>
+        <Filename>qui/includes/qui.header-common.xsl</Filename>
+        <Filename>qui/includes/qui.header-reslist.xsl</Filename>
+        <!-- <Filename>qui/includes/qui.scopedivs.xsl</Filename> -->
         <Filename>qui/qui.picklist.xsl</Filename>
     </XslFallbackFileList>
 

diff --git a/templates/text/qbat/qbat.pageviewer.xsl b/templates/text/qbat/qbat.pageviewer.xsl
@@ -5,7 +5,7 @@
 
     <script>
       window.mUse = window.mUse || [];
-      window.mUse.push('sl-dropdown');
+      window.mUse.push('sl-dropdown', 'sl-menu', 'sl-menu-item', 'sl-dialog');
     </script>
 
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/dist/themes/light.css" />