Merge pull request #187 from SuffolkLITLab/templates_html_2

Replicates, I believe, the original templates_html changes, plus more…

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,19 +1,31 @@
-a span.pdcaretopen {
+/* TODO: Abstract styles that are shared by both collapse and display templates */
+
+.al_collapse_template,
+.al_display_template {
+  padding-bottom: 1rem;
+}
+
+.al_collapse_template .collapse,
+.al_display_template .collapse {
+    margin-bottom: 1rem;
+}
+
+.al_collapse_template a span.pdcaretopen,
+.al_display_template a span.pdcaretopen {
     display: inline;
 }
 
-a span.pdcaretclosed {
+.al_collapse_template a span.pdcaretclosed,
+.al_display_template a span.pdcaretclosed {
     display: none;
 }
 
-a.collapsed .pdcaretopen {
+.al_collapse_template a.collapsed .pdcaretopen,
+.al_display_template a.collapsed .pdcaretopen {
     display: none;
 }
 
-a.collapsed .pdcaretclosed {
+.al_collapse_template a.collapsed .pdcaretclosed,
+.al_display_template a.collapsed .pdcaretclosed {
     display: inline;
-}
-
-.collapse {
-    margin-bottom: 1rem;
 }

docassemble/ALToolbox/data/static/display_template.css

@@ -1,22 +1,31 @@
-.scrollable-panel{
-  height:200px;
+.al_display_template.scrollable-panel,
+.al_display_template.not-scrollable,
+.al_display_template .scrollable-panel,
+.al_display_template .not-scrollable {
+  margin-bottom: 0.5rem;
+}
+
+.al_display_template.scrollable-panel,
+.al_display_template .scrollable-panel {
+  max-height:200px;
   overflow-y:scroll;
   width:100%;
 }
+
 /* For expansion of the copy_button_html() function*/
-textarea {
+.al_display_template textarea {
   width: 100%;
   /*The following rule takes effect only with the inline onmouseover event generated in 
   display_template() for a specific scenario */  
   overflow: hidden;
 }
+
+/* These should really start with `.al_display_template `, as they're in the display_template.css file, but I'm afraid I'll break things elsewhere. */
 .al_copy_block {
   display: block;  
   margin-top: 0.5rem;
 }
+
 .al_copy_button span {
   display: inline-block;
-}
-.scrollable-panel, .not-scrollable {
-  margin-bottom: 0.5rem;
-}
+}

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,  # deprecated
 ) -> str:
     # 1. Initialize
     if scrollable:
@@ -15,13 +21,25 @@ def display_template(
             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()
 
-    the_id = re.sub(r"[^A-Za-z0-9]", "", template.instanceName)
+    container_classname = "al_display_template"
+
+    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 +49,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>'

docassemble/ALToolbox/misc.py

@@ -1,5 +1,6 @@
 from typing import Optional, Union
 
+from base64 import b64encode
 from decimal import Decimal
 import docassemble.base.functions
 from docassemble.base.util import (
@@ -175,14 +176,26 @@ def collapse_template(
     """
     if not template.subject_as_html(trim=True) and not template.content_as_html():
         return ""
+
     if classname is None:
         classname = " bg-light"
     else:
         classname = " " + classname.strip()
-    the_id = re.sub(r"[^A-Za-z0-9]", "", template.instanceName)
+    container_classnames = "al_collapse_template"
+
+    container_id = (
+        b64encode(str(template.instanceName).encode()).decode().replace("=", "")
+    )
+    contents_id = f"{ container_id }_contents"
+
     return f"""\
-<a class="collapsed" data-bs-toggle="collapse" href="#{ the_id }" role="button" aria-expanded="false" aria-controls="{ the_id }"><span class="pdcaretopen">{ fa_icon(open_icon) }</span><span class="pdcaretclosed">{ fa_icon(closed_icon) }</span> { template.subject_as_html(trim=True) }</a>
-<div class="collapse" id="{ the_id }"><div class="card card-body pb-1{ classname }">{ template.content_as_html() }</div></div>\
+<div id="{ container_id }" class="{ container_classnames }">
+<a class="collapsed al_toggle" data-bs-toggle="collapse" href="#{ contents_id }" role="button" aria-expanded="false" aria-controls="{ contents_id }"><span class="toggle-icon pdcaretopen">{ fa_icon(open_icon) }</span><span class="toggle-icon pdcaretclosed">{ fa_icon(closed_icon) }</span>
+<span class="subject">{ template.subject_as_html(trim=True) }</span></a>
+<div class="collapse" id="{ contents_id }">
+<div class="card card-body pb-1{ classname }">{ template.content_as_html() }</div>
+</div>
+</div>\
 """
 
 

docassemble/__init__.py

@@ -1,5 +1,2 @@
-try:
-    __import__('pkg_resources').declare_namespace(__name__)
-except ImportError:
-    __path__ = __import__('pkgutil').extend_path(__path__, __name__)
+__import__('pkg_resources').declare_namespace(__name__)
 

setup.py

@@ -46,15 +46,15 @@ def find_package_data(where='.', package='', exclude=standard_exclude, exclude_d
 setup(name='docassemble.ALToolbox',
       version='0.8.2',
       description=('Collection of small utility functions, classes, and web components for Docassemble interviews'),
-      long_description='# ALToolbox\r\n\r\n[![PyPI version](https://badge.fury.io/py/docassemble-ALToolbox.svg)](https://badge.fury.io/py/docassemble-ALToolbox)\r\n\r\nThis repository is used to host small Python modules, widgets, and JavaScript web components js files that enhance Docassemble interviews. These modules were\r\nbuilt as part of the Suffolk University Law School LIT Lab\'s [Document Assembly Line project](https://suffolklitlab.org/docassemble-AssemblyLine-documentation/).\r\nThey are placed here\r\nrather than in https://github.com/SuffolkLitLab/docassemble-AssemblyLine because we believe these small components can easily be used\r\nby anyone, regardless of whether they use any other code from the Document Assembly Line project.\r\n\r\nIf you want to add a small fuction to this project, consider adding it to the existing misc.py to avoid creating too many module files.\r\n\r\n## Documentation\r\n\r\nRead the [documentation for the functions and components](https://suffolklitlab.org/docassemble-AssemblyLine-documentation/docs/framework/altoolbox) to learn\r\nhow to use these components in your own [Docassemble](https://github.com/jhpyle/docassemble) projects.\r\n\r\n## Suffolk LIT Lab Document Assembly Line\r\n\r\n<img src="https://user-images.githubusercontent.com/7645641/142245862-c2eb02ab-3090-4e97-9653-bb700bf4c54d.png" alt="drawing" width="300" alt="work together" style="align: center;"/>\r\n\r\nThe Assembly Line Project is a collection of volunteers, students, and institutions who joined together\r\nduring the COVID-19 pandemic to help increase access to the court system. Our vision is mobile-friendly,\r\neasy to use **guided** online forms that help empower litigants to access the court remotely.\r\n\r\nOur signature project is [CourtFormsOnline.org](https://courtformsonline.org).\r\n\r\nWe designed a step-by-step, assembly line style process for automating court forms on top of Docassemble\r\nand built several tools along the way that **you** can use in your home jurisdiction.\r\n\r\nThis package contains **runtime code** and **pre-written questions** to support authoring robust, \r\nconsistent, and attractive Docassemble interviews that help complete court forms.\r\n\r\nRead more on our [documentation page](https://suffolklitlab.org/docassemble-AssemblyLine-documentation/).\r\n\r\n\r\n# Related repositories\r\n\r\n* https://github.com/SuffolkLitLab/docassemble-AssemblyLine\r\n* https://github.com/SuffolkLitLab/docassemble-ALWeaver\r\n* https://github.com/SuffolkLitLab/docassemble-ALMassachusetts\r\n* https://github.com/SuffolkLitLab/docassemble-MassAccess\r\n* https://github.com/SuffolkLitLab/docassemble-ALThemeTemplate\r\n* https://github.com/SuffolkLitLab/EfileProxyServer\r\n\r\n## Contributors:\r\n* @plocket \r\n* @nonprofittechy\r\n* @purplesky2016\r\n* @brycestevenwilley\r\n',
+      long_description='# ALToolbox\r\n\r\n[![PyPI version](https://badge.fury.io/py/docassemble-ALToolbox.svg)](https://badge.fury.io/py/docassemble-ALToolbox)\r\n\r\nThis repository is used to host small Python modules, widgets, and JavaScript web components js files that enhance Docassemble interviews. These modules were\r\nbuilt as part of the Suffolk University Law School LIT Lab\'s [Document Assembly Line project](https://suffolklitlab.org/docassemble-AssemblyLine-documentation/).\r\nThey are placed here\r\nrather than in https://github.com/SuffolkLitLab/docassemble-AssemblyLine because we believe these small components can easily be used\r\nby anyone, regardless of whether they use any other code from the Document Assembly Line project.\r\n\r\nIf you want to add a small function to this project, consider adding it to the existing misc.py to avoid creating too many module files.\r\n\r\n## Documentation\r\n\r\nRead the [documentation for the functions and components](https://suffolklitlab.org/docassemble-AssemblyLine-documentation/docs/framework/altoolbox) to learn\r\nhow to use these components in your own [Docassemble](https://github.com/jhpyle/docassemble) projects.\r\n\r\n## Suffolk LIT Lab Document Assembly Line\r\n\r\n<img src="https://user-images.githubusercontent.com/7645641/142245862-c2eb02ab-3090-4e97-9653-bb700bf4c54d.png" alt="drawing of people working together on a website UI" width="300" style="align: center;"/>\r\n\r\nThe Assembly Line Project is a collection of volunteers, students, and institutions who joined together\r\nduring the COVID-19 pandemic to help increase access to the court system. Our vision is mobile-friendly,\r\neasy to use **guided** online forms that help empower litigants to access the court remotely.\r\n\r\nOur signature project is [CourtFormsOnline.org](https://courtformsonline.org).\r\n\r\nWe designed a step-by-step, assembly line style process for automating court forms on top of Docassemble\r\nand built several tools along the way that **you** can use in your home jurisdiction.\r\n\r\nThis package contains **runtime code** and **pre-written questions** to support authoring robust, \r\nconsistent, and attractive Docassemble interviews that help complete court forms.\r\n\r\nRead more on our [documentation page](https://suffolklitlab.org/docassemble-AssemblyLine-documentation/).\r\n\r\n\r\n## Related repositories\r\n\r\n* https://github.com/SuffolkLitLab/docassemble-AssemblyLine\r\n* https://github.com/SuffolkLitLab/docassemble-ALWeaver\r\n* https://github.com/SuffolkLitLab/docassemble-ALMassachusetts\r\n* https://github.com/SuffolkLitLab/docassemble-MassAccess\r\n* https://github.com/SuffolkLitLab/docassemble-ALThemeTemplate\r\n* https://github.com/SuffolkLitLab/EfileProxyServer\r\n\r\n## Contributors:\r\n* @plocket  \r\n* @nonprofittechy\r\n* @purplesky2016\r\n* @brycestevenwilley\r\n',
       long_description_content_type='text/markdown',
       author='AssemblyLine',
       author_email='[email protected]',
       license='The MIT License (MIT)',
       url='https://suffolklitlab.org/docassemble-AssemblyLine-documentation/docs/framework/altoolbox',
       packages=find_packages(),
       namespace_packages=['docassemble'],
-      install_requires=['holidays>=0.14.2', 'pandas>=1.4.2'],
+      install_requires=['holidays>=0.27.1', 'pandas>=1.5.3'],
       zip_safe=False,
       package_data=find_package_data(where='docassemble/ALToolbox/', package='docassemble.ALToolbox'),
      )