offcanvas with diferent row types and a small example content

Author: libargutxi

src/cs_dynamicpages/controlpanels/dynamic_pages_control_panel/controlpanel.py

@@ -42,6 +42,13 @@ class IRowTypeFieldsSchema(Interface):
         default=False,
     )
 
+    row_type_icon = schema.TextLine(
+        title=_("Row type icon"),
+        description=_("Icon for the row type"),
+        required=True,
+        default="bricks",
+    )
+
 
 class IRowWidthSchema(Interface):
     row_width_label = schema.TextLine(
@@ -76,6 +83,7 @@ class IDynamicPagesControlPanel(Interface):
                     "IExtraClass.extra_class",
                 ],
                 "row_type_has_featured_add_button": False,
+                "row_type_icon": "fonts",
             },
             {
                 "row_type": "cs_dynamicpages-featured-view",
@@ -90,6 +98,7 @@ class IDynamicPagesControlPanel(Interface):
                     "ILinkInfo.link_url",
                 ],
                 "row_type_has_featured_add_button": False,
+                "row_type_icon": "card-image",
             },
             {
                 "row_type": "cs_dynamicpages-featured-overlay-view",
@@ -99,11 +108,11 @@ class IDynamicPagesControlPanel(Interface):
                     "IRowWidth.width",
                     "IExtraClass.extra_class",
                     "IRelatedImage.related_image",
-                    "IRelatedImage.image_position",
                     "ILinkInfo.link_text",
                     "ILinkInfo.link_url",
                 ],
                 "row_type_has_featured_add_button": False,
+                "row_type_icon": "image-fill",
             },
             {
                 "row_type": "cs_dynamicpages-horizontal-rule-view",
@@ -113,6 +122,7 @@ class IDynamicPagesControlPanel(Interface):
                     "IExtraClass.extra_class",
                 ],
                 "row_type_has_featured_add_button": False,
+                "row_type_icon": "hr",
             },
             {
                 "row_type": "cs_dynamicpages-spacer-view",
@@ -121,6 +131,7 @@ class IDynamicPagesControlPanel(Interface):
                     "IExtraClass.extra_class",
                 ],
                 "row_type_has_featured_add_button": False,
+                "row_type_icon": "arrows-vertical",
             },
             {
                 "row_type": "cs_dynamicpages-slider-view",
@@ -130,6 +141,7 @@ class IDynamicPagesControlPanel(Interface):
                     "IExtraClass.extra_class",
                 ],
                 "row_type_has_featured_add_button": True,
+                "row_type_icon": "images",
             },
             {
                 "row_type": "cs_dynamicpages-features-view",
@@ -139,6 +151,7 @@ class IDynamicPagesControlPanel(Interface):
                     "IExtraClass.extra_class",
                 ],
                 "row_type_has_featured_add_button": True,
+                "row_type_icon": "grid",
             },
             {
                 "row_type": "cs_dynamicpages-accordion-view",
@@ -148,6 +161,7 @@ class IDynamicPagesControlPanel(Interface):
                     "IExtraClass.extra_class",
                 ],
                 "row_type_has_featured_add_button": True,
+                "row_type_icon": "chevron-double-down",
             },
             {
                 "row_type": "cs_dynamicpages-query-columns-view",
@@ -163,6 +177,7 @@ class IDynamicPagesControlPanel(Interface):
                     "IRowColumns.columns",
                 ],
                 "row_type_has_featured_add_button": False,
+                "row_type_icon": "funnel",
             },
             {
                 "row_type": "cs_dynamicpages-text-view",
@@ -173,6 +188,7 @@ class IDynamicPagesControlPanel(Interface):
                     "IRichTextBehavior-text",
                 ],
                 "row_type_has_featured_add_button": False,
+                "row_type_icon": "body-text",
             },
         ],
     )

src/cs_dynamicpages/utils.py

@@ -1,5 +1,12 @@
 from cs_dynamicpages import logger
 from plone import api
+from zope.component import getSiteManager
+from zope.globalrequest import getRequest
+from zope.interface import Interface
+from cs_dynamicpages.content.dynamic_page_row import IDynamicPageRow
+from zope.interface import providedBy
+
+VIEW_PREFIX = "cs_dynamicpages-"
 
 
 def add_custom_view(view_name: str, shown_fields: list[str], has_button: bool = False):
@@ -48,3 +55,25 @@ def enable_behavior(behavior_dotted_name=str):
         print(
             f"Behavior '{behavior_dotted_name}' is already enabled on 'DynamicPageRow'."
         )
+
+def get_available_views_for_row():
+    items = []
+    sm = getSiteManager()
+
+    available_views = sm.adapters.lookupAll(
+        required=(IDynamicPageRow, providedBy(getRequest())),
+        provided=Interface,
+    )
+
+    values = api.portal.get_registry_record(
+            "cs_dynamicpages.dynamic_pages_control_panel.row_type_fields", default=[]
+        )
+
+    for item in available_views:
+        if item[0].startswith(VIEW_PREFIX):
+            for value in values:
+                item_dict = {"row_type": item[0], "each_row_type_fields": [], "row_type_has_featured_add_button": False, "row_type_icon": "bricks"}
+                if item[0] == value["row_type"] and value not in items:
+                    item_dict = value
+                    items.append(item_dict)
+    return items

src/cs_dynamicpages/views/configure.zcml

@@ -28,6 +28,14 @@
       title="Dynamic view"
       />
 
+  <browser:page
+      name="add-row-content"
+      for="cs_dynamicpages.content.dynamic_page_folder.IDynamicPageFolder"
+      class=".dynamic_page_folder_view.DynamicPageAddRowContentView"
+      permission="cmf.AddPortalContent"
+      layer="cs_dynamicpages.interfaces.IBrowserLayer"
+      />
+
   <browser:page
       name="dynamic-view"
       for="plone.app.contenttypes.interfaces.IFolder"

src/cs_dynamicpages/views/dynamic_page_folder_view.py

@@ -2,10 +2,13 @@
 from Products.Five.browser import BrowserView
 from zope.interface import implementer
 from zope.interface import Interface
-
-
+from plone import api
+from plone.protect.interfaces import IDisableCSRFProtection
+from uuid import uuid4
+from zope.interface import alsoProvides
 # from Products.Five.browser.pagetemplatefile import ViewPageTemplateFile
-
+from cs_dynamicpages.utils import get_available_views_for_row
+from cs_dynamicpages import _
 
 class IDynamicPageFolderView(Interface):
     """Marker Interface for IDynamicPageFolderView"""
@@ -20,3 +23,57 @@ class DynamicPageFolderView(BrowserView):
     def __call__(self):
         # Implement your own actions:
         return self.index()
+
+
+@implementer(IDynamicPageFolderView)
+class DynamicPageAddRowContentView(BrowserView):
+    # If you want to define a template here, please remove the template from
+    # the configure.zcml registration of this view.
+    # template = ViewPageTemplateFile('dynamic_page_folder_view.pt')
+
+    def __call__(self):
+        # Implement your own actions:
+        row_type = self.request.get("row_type")
+        if row_type:
+            random_id = uuid4()
+
+            alsoProvides(self.request, IDisableCSRFProtection)
+            api.content.create(
+                type="DynamicPageRow",
+                container=self.context,
+                row_type=row_type,
+                title="New Row",
+                id=str(random_id)
+                )
+            available_views = get_available_views_for_row()
+            for view in available_views:
+                if view["row_type"] == row_type:
+                    has_featured_button = view["row_type_has_featured_add_button"]
+                    if has_featured_button:
+                        created_elements_find = api.content.find(
+                        portal_type="DynamicPageRow",
+                        id=str(random_id)
+                        )
+                        created_element = created_elements_find[0].getObject()
+                        random_id_featured = uuid4()
+                        api.content.create(
+                            type="DynamicPageRowFeatured",
+                            container=created_element,
+                            title="New Featured",
+                            id=str(random_id_featured)
+                            )
+
+                        random_id_featured_2 = uuid4()
+                        api.content.create(
+                            type="DynamicPageRowFeatured",
+                            container=created_element,
+                            title="New Featured 2",
+                            id=str(random_id_featured_2)
+                            )
+            statusmessage = _("Row added successfully")
+            api.portal.show_message(
+                message=statusmessage,
+                request=self.request,
+                type="info"
+            )
+            return self.request.response.redirect(f"{self.context.absolute_url()}#{str(random_id)}")

src/cs_dynamicpages/views/dynamic_view.pt

@@ -306,7 +306,7 @@
                  tal:condition="view/dynamic_page_folder_element_url"
             >
               <a class="btn btn-primary btn-lg"
-                 href="${view/dynamic_page_folder_element_url}/++add++DynamicPageRow"
+              data-bs-toggle="offcanvas" data-bs-target="#addrow-offcanvasRight" aria-controls="offcanvasRight"
                  title="Add row"
                  i18n:attributes="title"
               ><svg xmlns="http://www.w3.org/2000/svg"
@@ -321,6 +321,24 @@
                   ></path>
                 </svg></a>
             </div>
+            <div tal:define="available_views_for_row view/available_views_for_row"
+                 class="offcanvas offcanvas-end" tabindex="-1" id="addrow-offcanvasRight" aria-labelledby="offcanvasRightLabel">
+              <div class="offcanvas-header">
+                <h5 class="offcanvas-title" id="offcanvasRightLabel">Add new row</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+              </div>
+              <div class="offcanvas-body">
+                <ul class="list-unstyled row">
+                  <li tal:repeat="item available_views_for_row" class="col-6 mb-2">
+                    <div class="p-5 bg-light rounded h-100 d-flex justify-content-center align-items-center">
+                      <a data-bs-toggle="tooltip" data-bs-title="${item/row_type}" href="${view/dynamic_page_folder_element_url}/add-row-content?row_type=${item/row_type}">
+                      <span tal:replace="structure python:icons.tag(item['row_type_icon'], tag_class='fs-1')"></span>
+                      </a>
+                    </div>
+                  </li>
+                </ul>
+              </div>
+            </div>
           </tal:condition>
           <!-- Delete Confirmation Modal -->
           <div class="modal fade"
@@ -361,9 +379,17 @@
               </div>
             </div>
           </div>
+          <script>
+            // Selecciona todos los elementos con el atributo data-bs-toggle="tooltip"
+            const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
+
+            // Crea una instancia de tooltip para cada elemento encontrado
+            const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl));
+          </script>
         </tal:condition-configuration>
       </main>
     </metal:main>
-  </body>
+
+</body>
 
 </html>

src/cs_dynamicpages/views/dynamic_view.py

@@ -5,10 +5,8 @@
 from zope.interface import alsoProvides
 from zope.interface import implementer
 from zope.interface import Interface
-
-
-# from Products.Five.browser.pagetemplatefile import ViewPageTemplateFile
-
+from cs_dynamicpages.utils import get_available_views_for_row
+from cs_dynamicpages.utils import VIEW_PREFIX
 
 class IDynamicView(Interface):
     """Marker Interface for IDynamicView"""
@@ -61,3 +59,6 @@ def dynamic_page_folder_element_url(self):
 
     def can_edit(self):
         return api.user.has_permission("Modify portal content", obj=self.context)
+
+    def available_views_for_row(self):
+        return get_available_views_for_row()