[WIP] bootstrap5 + icons

.github/workflows/ci-tests.yml

@@ -15,11 +15,12 @@ jobs:
     strategy:
       matrix:
         py:
-          - "3.6"
-          - "3.7"
           - "3.8"
           - "3.9"
-          - "pypy-3.7"
+          - "3.10"
+          - "3.11"
+          - "3.12"
+          - "pypy-3.10"
         os:
           - "ubuntu-latest"
           - "windows-latest"
@@ -71,7 +72,7 @@ jobs:
     - name: Setup python
       uses: actions/setup-python@v2
       with:
-        python-version: 3.9
+        python-version: 3.11
         architecture: x64
     - name: Install requirements
       run: |
@@ -93,11 +94,11 @@ jobs:
     - name: Setup python
       uses: actions/setup-python@v2
       with:
-        python-version: 3.9
+        python-version: 3.11
         architecture: x64
     - run: |
         pip install tox
-        tox -e py39-cover,coverage
+        tox -e py311-cover,coverage
   docs:
     runs-on: ubuntu-latest
     name: Build the documentation
@@ -106,7 +107,7 @@ jobs:
     - name: Setup python
       uses: actions/setup-python@v2
       with:
-        python-version: 3.9
+        python-version: 3.11
         architecture: x64
     - run: |
         pip install tox
@@ -119,7 +120,7 @@ jobs:
     - name: Setup python
       uses: actions/setup-python@v2
       with:
-        python-version: 3.9
+        python-version: 3.11
         architecture: x64
     - run: |
         pip install tox

README.rst

@@ -35,8 +35,8 @@ use cases <https://deformdemo.pylonsproject.org/>`_ are supported out of the box
 
 Deform integrates with the `Pyramid web framework <https://trypyramid.com/>`_
 and several other web frameworks. Deform comes with `Chameleon templates
-<https://chameleon.readthedocs.io/en/latest/>`_ and `Bootstrap 3
-<https://getbootstrap.com/docs/3.3/>`_ styling. Under the hood, `Colander schemas
+<https://chameleon.readthedocs.io/en/latest/>`_ and `Bootstrap 5
+<https://getbootstrap.com/docs/5.3/>`_ styling. Under the hood, `Colander schemas
 <https://github.com/Pylons/colander>`_ are used for serialization and
 validation. The `Peppercorn <https://github.com/Pylons/peppercorn>`_ library
 maps HTTP form submissions to nested structure.

deform/field.py

@@ -235,7 +235,7 @@ def __init__(
                 focus == "on"
                 and not focused
                 and type(child.typ) in Field.focusable_input_types
-                and type(child.widget) != Field.hidden_type
+                and type(child.widget) is not Field.hidden_type
                 and not self.have_first_input
             ):
                 first_input_index = child_count
@@ -331,7 +331,6 @@ def set_default_renderer(cls, renderer):
 
     @classmethod
     def set_default_resource_registry(cls, registry):
-
         """Set the callable that will act as a default
         :term:`resource registry` for instances of the associated
         class when no ``resource_registry`` argument is provided to
@@ -407,7 +406,7 @@ def widget(self):
                 self.schema.typ.__class__
             )
             if widget_maker is None:
-                for (cls, wgt) in schema.default_widget_makers.items():
+                for cls, wgt in schema.default_widget_makers.items():
                     if isinstance(self.schema.typ, cls):
                         widget_maker = wgt
                         break

deform/static/css/form.css

@@ -40,30 +40,3 @@ form .deform-readonly-text {
 .upload-filename[readonly] {
     background-color: #fdfdfd;
 }
-
-
-/**
- * Accordion styling
- *
- * http://stackoverflow.com/a/18568997/315168
- */
-
-
-.deform-collapse-heading > a {
-    display: block; /* Make target area more touch friendly */
-    text-decoration: none;
-}
-
-
-.deform-collapse-heading > a:after {
-    /* symbol for "opening" panels */
-    font-family: 'Glyphicons Halflings';  /* essential for enabling glyphicon */
-    float: right;        /* adjust as needed */
-    content: "\e080";    /* adjust as needed, taken from bootstrap.css */
-
-}
-
-.deform-collapse-heading > a[aria-expanded="true"]:after {
-    /* symbol for "collapsed" panels */
-    content: "\e114";
-}

deform/static/css/typeahead.css

@@ -25,7 +25,7 @@
     border-radius: 4px !important;
 }
 
-.input-group-addon + .twitter-typeahead > .tt-query {
+.input-group-text + .twitter-typeahead > .tt-query {
     border-top-left-radius: 0!important;
     border-bottom-left-radius: 0!important;
 }
@@ -78,4 +78,4 @@
 
 .tt-suggestion p {
     margin: 0;
-}
+}

deform/static/scripts/deform.js

@@ -4,11 +4,11 @@
  * to include the call at the end of the page.
  */
 
-$(document).ready(function(){
+document.addEventListener("DOMContentLoaded", function() {
+    // Code to be executed when the DOM is ready
     deform.load();
 });
 
-
 var deform_loaded = false;
 
 var deform  = {
@@ -31,7 +31,7 @@ var deform  = {
     },
 
     processCallbacks: function () {
-        $(deform.callbacks).each(function(num, item) {
+        deform.callbacks.forEach(function(item) {
             var oid = item[0];
             var callback = item[1];
             callback(oid);

deform/templates/dateparts.pt

@@ -7,8 +7,8 @@
                   autofocus autofocus|field.autofocus">
   ${field.start_mapping()}
   <div class="row">
-    <div class="col-xs-4"><div class="input-group">
-      <span class="input-group-addon" i18n:translate="">Year</span>
+    <div class="col-md-4"><div class="input-group">
+      <span class="input-group-text" i18n:translate="">Year</span>
       <input type="number" name="year" value="${year}"
              class="span2 form-control ${css_class or ''}"
              tal:attributes="style style;
@@ -17,17 +17,17 @@
              maxlength="4"
              id="${oid}"/>
     </div></div>
-    <div class="col-xs-4"><div class="input-group">
-      <span class="input-group-addon" i18n:translate="">Month</span>
+    <div class="col-md-4"><div class="input-group">
+      <span class="input-group-text" i18n:translate="">Month</span>
       <input type="number" name="month" value="${month}"
              class="span2 form-control ${css_class or ''}"
              tal:attributes="style style;
                              month_attributes|field.widget.month_attributes|{};"
              maxlength="2"
              id="${oid}-month"/>
     </div></div>
-    <div class="col-xs-4"><div class="input-group">
-      <span class="input-group-addon" i18n:translate="">Day</span>
+    <div class="col-md-4"><div class="input-group">
+      <span class="input-group-text" i18n:translate="">Day</span>
       <input type="number" name="day" value="${day}"
              class="span2 form-control ${css_class or ''}"
              tal:attributes="style style;

deform/templates/datetimeinput.pt

@@ -7,17 +7,17 @@
                   type_name type_name|field.widget.type_name;">
   ${field.start_mapping()}
   <div class="row">
-    <div class="col-xs-6"><div class="input-group">
-      <span class="input-group-addon" i18n:translate="">Date</span>
+    <div class="col-md-6"><div class="input-group">
+      <span class="input-group-text" i18n:translate="">Date</span>
       <input type="date" name="date" value="${date}"
              class="span2 form-control ${css_class or ''} hasDatepicker"
              tal:attributes="style style;
                              autofocus autofocus;
                              date_attributes|field.widget.date_attributes|{}"
              id="${oid}-date"/>
     </div></div>
-    <div class="col-xs-6"><div class="input-group">
-      <span class="input-group-addon" i18n:translate="">Time</span>
+    <div class="col-md-6"><div class="input-group">
+      <span class="input-group-text" i18n:translate="">Time</span>
       <input type="time" name="time" value="${time}"
              class="span2 form-control ${css_class or ''} hasDatepicker"
              tal:attributes="style style;

deform/templates/form.pt

@@ -46,7 +46,7 @@
     <div tal:repeat="child field"
          tal:replace="structure child.render_template(item_template)"/>
 
-    <div class="form-group deform-form-buttons">
+    <div class="mb-3 deform-form-buttons">
       <tal:loop tal:repeat="button buttons">
         <button
               tal:define="btn_disposition repeat.button.start and 'btn-primary' or 'btn-default';"
@@ -86,7 +86,6 @@
          replaceTarget: true,
          success: function() {
            deform.processCallbacks();
-           deform.focusFirstInput(target);
          },
          beforeSerialize: function() { 
            // See http://bit.ly/1agBs9Z (hack to fix tinymce-related ajax bug)

deform/templates/mapping.pt

@@ -4,9 +4,9 @@
                      item_template item_template|field.widget.item_template"
          i18n:domain="deform">
 
-  <div class="panel panel-default" title="${description}">
-    <div class="panel-heading">${title}</div>
-    <div class="panel-body">
+  <div class="card mb-3" title="${description}">
+    <div class="card-header">${title}</div>
+    <div class="card-body">
 
       <div tal:condition="errormsg" 
            class="clearfix alert alert-danger">

deform/templates/mapping_accordion.pt

@@ -3,45 +3,46 @@
                      errormsg errormsg|field.errormsg;
                      open python:(field.widget.open or field.error) and True or False;
                      collapse_link_class python:open and '' or 'collapsed';
-                     collapse_body_class python:open and 'in' or '';
+                     collapse_body_class python:open and 'show' or '';
                      item_template item_template|field.widget.item_template"
          i18n:domain="deform">
 
-  <div class="panel panel-default" title="${description}">
-    <div class="panel-heading deform-collapse-heading">
+  <div class="accordion mb-3" title="${description}">
+    <div class="accordion-item">
+      <div class="accordion-header">
+        <button
+            class="accordion-button"
+            type="button"
+            data-bs-toggle="collapse"
+            data-bs-target="#collapse-${field.oid}"
+            tal:attributes="aria-expanded python:open and 'true' or None">
+            ${title}
+        </button>
+      </div>
 
-      <a
-          role="button"
-          data-toggle="collapse"
-          href="#collapse-${field.oid}"
-          tal:attributes="aria-expanded python:open and 'true' or None"
-          aria-controls="collapse-${field.oid}">
-          ${title}
-      </a>
-    </div>
+      <div id="collapse-${field.oid}" class="accordion-collapse deform-collapse-body collapse ${collapse_body_class}">
 
-    <div id="collapse-${field.oid}" class="panel-collapse deform-collapse-body collapse ${collapse_body_class}" role="tabpanel" aria-labelledby="heading-${field.oid}">
+        <div class="accordion-body">
 
-      <div class="panel-body">
+          <div tal:condition="errormsg"
+               class="clearfix alert alert-danger">
+            <p i18n:translate="">
+               There was a problem with this section
+            </p>
+            <p>${errormsg}</p>
+          </div>
 
-        <div tal:condition="errormsg"
-             class="clearfix alert alert-danger">
-          <p i18n:translate="">
-             There was a problem with this section
-          </p>
-          <p>${errormsg}</p>
-        </div>
+          <div tal:condition="description">
+            ${description}
+          </div>
 
-        <div tal:condition="description">
-          ${description}
-        </div>
+          ${field.start_mapping()}
+          <div tal:repeat="child field.children"
+               tal:replace="structure child.render_template(item_template)" >
+          </div>
+          ${field.end_mapping()}
 
-        ${field.start_mapping()}
-        <div tal:repeat="child field.children"
-             tal:replace="structure child.render_template(item_template)" >
         </div>
-        ${field.end_mapping()}
-
       </div>
     </div>
   </div>

deform/templates/mapping_item.pt

@@ -6,7 +6,7 @@
                  category category|field.widget.category;
                  structural hidden or category == 'structural';
                  required required|field.required;"
-     class="form-group ${field.error and error_class or ''} ${field.widget.item_css_class or ''} ${field.default_item_css_class()}"
+     class="mb-3 ${field.error and error_class or ''} ${field.widget.item_css_class or ''} ${field.default_item_css_class()}"
      title="${description}"
      id="item-${oid}"
      tal:omit-tag="structural"
@@ -24,10 +24,10 @@
                    input_append field.widget.input_append  | None"
        tal:omit-tag="not (input_prepend or input_append)"
        class="input-group">
-    <span class="input-group-addon"
+    <span class="input-group-text"
           tal:condition="input_prepend">${input_prepend}</span
     ><span tal:replace="structure field.serialize(cstruct).strip()"
-    /><span class="input-group-addon"
+    /><span class="input-group-text"
             tal:condition="input_append">${input_append}</span>
   </div>
 

deform/templates/readonly/mapping.pt

@@ -4,9 +4,9 @@
                      item_template item_template|field.widget.readonly_item_template"
          i18n:domain="deform">
 
-  <div class="panel panel-default" title="${description}">
-    <div class="panel-heading">${title}</div>
-    <div class="panel-body">
+  <div class="card mb-3" title="${description}">
+    <div class="card-header">${title}</div>
+    <div class="card-body">
 
       <div tal:condition="description">
         ${description}

deform/templates/readonly/mapping_item.pt

@@ -6,7 +6,7 @@
                  category category|field.widget.category;
                  structural hidden or category == 'structural';
                  required required|field.required;"
-     class="form-group ${field.error and error_class or ''} ${field.widget.item_css_class or ''}"
+     class="mb-3 ${field.error and error_class or ''} ${field.widget.item_css_class or ''}"
      title="${description}"
      id="item-${oid}"
      tal:omit-tag="structural"
@@ -24,10 +24,10 @@
                    input_append field.widget.input_append  | None"
        tal:omit-tag="not (input_prepend or input_append)"
        class="input-group">
-    <span class="input-group-addon"
+    <span class="input-group-text"
           tal:condition="input_prepend">${input_prepend}</span
     ><span tal:replace="structure field.serialize(cstruct, readonly=True).strip()"
-    /><span class="input-group-addon"
+    /><span class="input-group-text"
             tal:condition="input_append">${input_append}</span>
   </div>
 

deform/templates/readonly/select.pt

@@ -7,7 +7,7 @@
   <tal:if condition="isinstance(item, optgroup_class)">
     <tal:loop repeat="choice item.options">
       <p class="form-control-static"
-         id="${oid}-${repeat.item.index}-${repeat.choice.index}"
+         id="${oid}-${repeat.carousel-item.index}-${repeat.choice.index}"
          tal:define="(value, description) choice"
          tal:condition="(multiple and value in cstruct or value == cstruct)"
          >${description}</p>
@@ -17,7 +17,7 @@
   <tal:if condition="not isinstance(item, optgroup_class)">
     <tal:block define="(value, description) item">
       <p class="form-control-static"
-         id="${oid}-${repeat.item.index}"
+         id="${oid}-${repeat.carousel-item.index}"
          tal:condition="(multiple and value in cstruct or value == cstruct)"
          >${description}</p>
     </tal:block>