Adjust collapse and display templates' html. Was intended for plans I…

LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2022 AssemblyLine
+Copyright (c) 2023 AssemblyLine
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

docassemble/ALToolbox/data/questions/collapse_template_demo.yml

@@ -39,11 +39,20 @@ subquestion: |
   What is your favorite fruit? Everybody has a favorite fruit.
 
   ${ collapse_template(fruit_explanation, closed_icon="plus", open_icon="minus") }
+
   Don't you have a favorite fruit?
+
   ${ collapse_template(favorite_explanation) }
+
   You must have a favorite.
 fields:
   - Favorite fruit: favorite_fruit
+css: |
+  <style>
+    #about_favorites a {
+      text-decoration-style: double;
+    }
+  </style>
 ---
 mandatory: True
 question: |

docassemble/ALToolbox/data/questions/display_template_demo.yml

@@ -31,8 +31,8 @@ subquestion: |
   1. **copy** (default=False) 
       - It adds a copy button under the template for users to copy/share the template content.
       - This feature applies the **copy_button_html()** function to template content. See [copy button demo](${interview_url(i=user_info().package + ":copy_button_demo.yml")}).
-  1. **class_name** (default=None) 
-      - To style your template, include a class_name input in the call, and add your css rules either on the screen or to a .css file.  
+  1. **classname** (default="bg-light") 
+      - To style your template content, include a `classname` keyword argument when you call the function and add your css rules either on the screen or to a .css file.
 
   You can mix and match these features. The following screens will show you how. 
 
@@ -44,37 +44,42 @@ question: |
   Scrollable examples
 subquestion: |    
   ##### Srollable only
-  ${ display_template(my_template1) }<br>
+  ${ display_template(my_template1) }
 
   ##### Style only
-  ${ display_template(my_template2, scrollable=False, class_name="my_color")}
+  ${ display_template(my_template2, scrollable=False, classname="my_color") }
+
+  ##### Template with no subject
+  ${ display_template(template_no_subject) }
 ---
 id: collapse and scrollable examples
 continue button field: collapse_n_scrollable_examples
 question: |  
   Collase and scrollable examples
 subquestion: |
   ##### Collapse only with a style
-  ${ display_template(my_template1, scrollable=False, collapse=True, class_name="my_color") }
+  ${ display_template(my_template1, scrollable=False, collapse=True, classname="my_color") }
 
   ##### Collapse and scrollable, without the copy button
   ${ display_template(my_template2, collapse=True) }
 ---
 id: copy button examples
-continue button field: copy_button_examples
+event: copy_button_examples
 question: |
   Copy button examples
-fields:  
-  - html: <h5>Copy and scrollable</h5>
-  - note: |      
-      ${ display_template(my_template1, copy=True) }
-  - html: <h5>Copy and collapse but not scrollable</h5> 
-  - note: | 
-      _(Hover over the box to see the full template content. If this is annoying, keep the default value scrollable=True as shown in the very last example.)_<br><br>
-      ${ display_template(my_template1, scrollable=False, collapse=True, copy=True) }  
-  - html: <h5>Copy and collapse and scrollable</h5>
-  - note: |      
-      ${ display_template(my_template2, collapse=True, copy=True) }  
+subquestion: |
+  <h5>Copy and scrollable</h5>
+
+  ${ display_template(my_template1, copy=True) }
+
+  <h5>Copy and collapse but not scrollable</h5>
+
+  _(Hover over the box to see the full template content. If this is annoying, keep the default value scrollable=True as shown in the very last example.)_
+
+  ${ display_template(my_template1, scrollable=False, collapse=True, copy=True) }  
+  <h5>Copy and collapse and scrollable</h5>
+
+  ${ display_template(my_template2, collapse=True, copy=True) } 
 ---
 template: my_template1
 subject: |
@@ -94,4 +99,10 @@ content: |
 
   Est ad autem vitae, ius graeco delicata eu. Vim quod postea ad. Vero omnis iuvaret in ius. Eu noster volumus sed.
 
-  Qui eu dictas senserit. Ne affert doctus his. Eius dicta utinam ex pri, tota equidem vel at. Cu nec habemus definitiones, eos oratio impedit mediocrem ex, inermis necessitatibus duo et. Malis graeco dicunt ei mea. Ei idque cetero est.
+  Qui eu dictas senserit. Ne affert doctus his. Eius dicta utinam ex pri, tota equidem vel at. Cu nec habemus definitiones, eos oratio impedit mediocrem ex, inermis necessitatibus duo et. Malis graeco dicunt ei mea. Ei idque cetero est.
+---
+template: template_no_subject
+content: |
+  Qui eu dictas senserit. Ne affert doctus his. Eius dicta utinam ex pri, tota equidem vel at. Cu nec habemus definitiones, eos oratio impedit mediocrem ex, inermis necessitatibus duo et. Malis graeco dicunt ei mea. Ei idque cetero est.
+
+  Est ad autem vitae, ius graeco delicata eu. Vim quod postea ad. Vero omnis iuvaret in ius. Eu noster volumus sed.

docassemble/ALToolbox/data/static/collapse_template.css

@@ -1,3 +1,7 @@
+.al_collapse_template {
+  padding-bottom: 1rem;
+}
+
 a span.pdcaretopen {
     display: inline;
 }

docassemble/ALToolbox/data/static/display_template.css

@@ -1,5 +1,9 @@
+.al_display_template {
+  padding-bottom: 1rem;
+}
+
 .scrollable-panel{
-  height:200px;
+  max-height:200px;
   overflow-y:scroll;
   width:100%;
 }

docassemble/ALToolbox/data/static/styles.css

@@ -5,6 +5,7 @@
   background: lightcyan; 
   color: darkgreen; 
 }
-h5 {
+
+h5, .h5 {
   color: brown;
 }

docassemble/ALToolbox/display_template.py

@@ -1,9 +1,15 @@
 import re
 from .copy_button import *
+from base64 import b64encode
 
 
 def display_template(
-    template, scrollable=True, collapse=False, copy=False, class_name="bg-light"
+    template,
+    scrollable=True,
+    collapse=False,
+    copy=False,
+    classname="bg-light",
+    class_name=None  # depricated
 ) -> str:
     # 1. Initialize
     if scrollable:
@@ -14,14 +20,24 @@ def display_template(
         adjust_height = (
             f"onmouseover=\"this.style.height = (this.scrollHeight) + 'px';\""
         )
-
+
+    # Introducing `classname` to try to align with `collapse_template`
+    if not class_name:
+      class_name = classname
     class_name = class_name.strip()
+
+    container_classname = "al_display_template"
 
-    the_id = re.sub(r"[^A-Za-z0-9]", "", template.instanceName)
+    container_id = b64encode(str(template.instanceName).encode()).decode().replace('=', '')
+    contents_id = f"{ container_id }_contents"
+
+    subject_html = ''
+    if not template.subject == "":
+      subject_html = f'<div class="panel-heading"><h3 class="subject">{template.subject_as_html(trim=True)}</h3></div>'
 
     # 2. If copiable, call copy_button_html() to generate the template content along with a copy button
     if copy:
-        text = copy_button_html(
+        contents = copy_button_html(
             template,
             copy_template_block=True,
             scroll_class=scroll_class,
@@ -31,16 +47,21 @@ def display_template(
 
         # 2.1 If collapsible, add collapsible elements to the output
         if collapse:
-            return f'<a class="collapsed" data-bs-toggle="collapse" href="#{the_id}" role="button" aria-expanded="false" aria-controls="collapseExample"><span class="pdcaretopen"><i class="fas fa-caret-down"></i></span><span class="pdcaretclosed"><i class="fas fa-caret-right"></i></span> {template.subject_as_html(trim=True)}</a><div class="collapse" id="{the_id}">{text}</div>'
+            return f'<div id="{container_id}" class="{container_classname}"><a class="collapsed" data-bs-toggle="collapse" href="#{contents_id}" role="button" aria-expanded="false" aria-controls="collapseExample"><span class="toggle-icon pdcaretopen"><i class="fas fa-caret-down"></i></span><span class="toggle-icon pdcaretclosed"><i class="fas fa-caret-right"></i></span><span class="subject">{template.subject_as_html(trim=True)}</span></a><div class="collapse" id="{contents_id}">{contents}</div></div>'
 
         # 2.2 If not collapsible, simply return output from copy_button_html()
         else:
-            return text
+            return f"""
+<div id="{container_id}" class="{container_classname}">
+{subject_html}
+{contents}
+</div>
+"""
 
     # 3. If not copiable, generate the whole output
     else:
-        if not collapse:
-            return f'<div class="{scroll_class} card card-body {class_name} pb-1" id="{the_id}"><div class="panel-heading"><h3>{template.subject_as_html(trim=True)}</h3></div>{template.content_as_html()}</div>'
+        if collapse:
+            return f'<div id="{container_id}" class="{container_classname}"><a class="collapsed" data-bs-toggle="collapse" href="#{contents_id}" role="button" aria-expanded="false" aria-controls="collapseExample"><span class="toggle-icon pdcaretopen"><i class="fas fa-caret-down"></i></span><span class="toggle-icon pdcaretclosed"><i class="fas fa-caret-right"></i></span><span class="subject">{template.subject_as_html(trim=True)}</span></a><div class="collapse" id="{contents_id}"><div class="{scroll_class} card card-body {class_name} pb-1">{template.content_as_html()}</div></div></div>'
 
         else:
-            return f'<a class="collapsed" data-bs-toggle="collapse" href="#{the_id}" role="button" aria-expanded="false" aria-controls="collapseExample"><span class="pdcaretopen"><i class="fas fa-caret-down"></i></span><span class="pdcaretclosed"><i class="fas fa-caret-right"></i></span>{template.subject_as_html(trim=True)}</a><div class="collapse" id="{the_id}"><div class="{scroll_class} card card-body {class_name} pb-1">{template.content_as_html()}</div></div>'
+            return f'<div id="{container_id}" class="{container_classname} {scroll_class} card card-body {class_name} pb-1" id="{contents_id}">{subject_html}<div>{template.content_as_html()}</div></div>'