erp5_web_js_style: calculate the web section related document list

52b7898c · Romain Courteaud · 3f358c43 · 52b7898c · 52b7898c · 52b7898c
Commit 52b7898c authored Jun 30, 2021 by Romain Courteaud
12 changed files
--- a/bt5/erp5_web_js_style/SkinTemplateItem/portal_skins/erp5_web_js_style_ui/WebSite_generateNavigationHTML.py
+++ b/bt5/erp5_web_js_style/SkinTemplateItem/portal_skins/erp5_web_js_style_ui/WebSite_generateNavigationHTML.py
 import cgi
 import re

-web_site = context
+web_section = context
+web_site = web_section.getWebSiteValue()

 def _(string_to_escape):
  return cgi.escape("%s" % string_to_escape, quote=False)
@@ -23,6 +24,14 @@ def generateSectionListHTML(result_list, section_list):
    result_list.append('</ul>')


+def generateDocumentListHTML(result_list, document_list):
+  if (document_list):
+    result_list.append('<aside id="document_list"><ul>')
+    for section in document_list:
+      result_list.append('<li><a href="%s">%s</a></li>' % (__(section['url']), _(section['translated_title'])))
+    result_list.append('</ul></aside>')
+
+
 # Language
 result_list = ['<nav id="language"><ul>']

@@ -46,7 +55,10 @@ result_list.append('</ul></nav>')
 # Sitemap
 result_list.append('<nav id="sitemap">')
 result_list.append('<a href="%s">%s</a>' % (__(web_site.absolute_url()), _(web_site.getTranslatedTitle())))
-generateSectionListHTML(result_list, web_site.WebSection_getSiteMapTree(depth=99))
+generateSectionListHTML(result_list, web_site.WebSection_getSiteMapTree(include_document=False, depth=99))
 result_list.append('</nav>')

+# Documents
+generateDocumentListHTML(result_list, web_section.WebSection_getSiteMapTree(include_subsection=False, exclude_default_document=True, depth=1))
+
 return ''.join(result_list)
--- a/bt5/erp5_web_js_style/SkinTemplateItem/portal_skins/erp5_web_js_style_ui/WebSite_generateNavigationHTML.xml
+++ b/bt5/erp5_web_js_style/SkinTemplateItem/portal_skins/erp5_web_js_style_ui/WebSite_generateNavigationHTML.xml
@@ -54,7 +54,7 @@
        </item>
        <item>
            <key> <string>id</string> </key>
-            <value> <string>WebSite_generateNavigationHTML</string> </value>
+            <value> <string>WebSection_generateNavigationHTML</string> </value>
        </item>
      </dictionary>
    </pickle>

--- a/bt5/erp5_web_js_style/SkinTemplateItem/portal_skins/erp5_web_js_style_ui/dialog_main.zpt
+++ b/bt5/erp5_web_js_style/SkinTemplateItem/portal_skins/erp5_web_js_style_ui/dialog_main.zpt
@@ -37,7 +37,7 @@
  </head>
  <body tal:attributes="data-nostyle-gadget-url no_style_gadget_url;
                        data-nostyle-css-url no_style_css_url">
-    <tal:block tal:content="structure python: web_site.WebSite_generateNavigationHTML()"></tal:block>
+    <tal:block tal:content="structure python: web_section.WebSection_generateNavigationHTML()"></tal:block>
    <main>

    <p tal:content="request/portal_status_message | nothing" id="portal_status_message"/>

--- a/bt5/erp5_web_js_style/SkinTemplateItem/portal_skins/erp5_web_js_style_ui/jsstyle.css.css
+++ b/bt5/erp5_web_js_style/SkinTemplateItem/portal_skins/erp5_web_js_style_ui/jsstyle.css.css
 body {
  display: grid;
-  grid-template-raws: repeat(3, 1fr);
+  grid-gap: 1em;
+  grid-template-areas: "header" "content" "sidebar" "footer";
+}
+@media only screen and (min-width: 50em) {
+  body {
+    grid-template-areas: "header  header  header" "content content sidebar" "footer  footer  footer";
+  }
 }
 body > nav#sitemap {
-  grid-row: 1;
+  grid-area: header;
  background-color: #DDD;
  display: flex;
  flex-wrap: wrap;
@@ -31,7 +37,7 @@ body > nav#sitemap a:not(:first-child) {
  padding: 0 1em;
 }
 body main {
-  grid-row: 2;
+  grid-area: content;
 }
 body main fieldset {
  border: none;
@@ -45,8 +51,12 @@ body main fieldset > div > label {
  font-weight: bold;
  min-width: 10%;
 }
+body > aside#document_list {
+  grid-area: sidebar;
+  background-color: #DDD;
+}
 body > nav#language {
-  grid-row: 3;
+  grid-area: footer;
  background-color: #DDD;
  display: flex;
  flex-wrap: wrap;

--- a/bt5/erp5_web_js_style/SkinTemplateItem/portal_skins/erp5_web_js_style_ui/jsstyle.js.js
+++ b/bt5/erp5_web_js_style/SkinTemplateItem/portal_skins/erp5_web_js_style_ui/jsstyle.js.js
@@ -109,6 +109,24 @@
    return sitemap;
  }

+  function parseDocumentListElement(document_list_element) {
+    var document_list = [],
+      li_list,
+      i;
+    if (document_list_element === null) {
+      return document_list;
+    }
+
+    li_list = document_list_element.querySelectorAll('a');
+    for (i = 0; i < li_list.length; i += 1) {
+      document_list.push({
+        href: li_list[i].href,
+        text: li_list[i].textContent
+      });
+    }
+    return document_list;
+  }
+
  function parseFormElement(form_element) {
    if (form_element !== null) {
      return form_element.outerHTML;
@@ -162,6 +180,9 @@
      sitemap: parseSitemapElement(
        body_element.querySelector('nav#sitemap')
      ),
+      document_list: parseDocumentListElement(
+        body_element.querySelector('aside#document_list')
+      ),
      form_html_content: parseFormElement(
        body_element.querySelector('form#main_form')
      ),

--- a/bt5/erp5_web_js_style/SkinTemplateItem/portal_skins/erp5_web_js_style_ui/jsstyle.less.bin
+++ b/bt5/erp5_web_js_style/SkinTemplateItem/portal_skins/erp5_web_js_style_ui/jsstyle.less.bin
@@ -30,16 +30,28 @@

 body {
  display: grid;
-  grid-template-raws: repeat(3, 1fr); 
+  grid-gap: 1em;
+  grid-template-areas:
+   "header"
+   "content"
+   "sidebar"
+   "footer";
+
+  @media only screen and (min-width: 50em) {
+    grid-template-areas:
+      "header  header  header"
+      "content content sidebar"
+      "footer  footer  footer";
+  }

  > nav#sitemap {
-    grid-row: 1;
+    grid-area: header;

    .flattenNav();
  }

  main {
-    grid-row: 2;
+    grid-area: content;

    fieldset {
      border: none;
@@ -55,8 +67,13 @@ body {
    }
  }

+  > aside#document_list {
+    grid-area: sidebar;
+    background-color: #DDD;
+  }
+
  > nav#language {
-    grid-row: 3;
+    grid-area: footer;

    .flattenNav();
  }

--- a/bt5/erp5_web_js_style/SkinTemplateItem/portal_skins/erp5_web_js_style_ui/view_main.zpt
+++ b/bt5/erp5_web_js_style/SkinTemplateItem/portal_skins/erp5_web_js_style_ui/view_main.zpt
@@ -36,7 +36,7 @@
  </head>
  <body tal:attributes="data-nostyle-gadget-url no_style_gadget_url;
                        data-nostyle-css-url no_style_css_url">
-    <tal:block tal:content="structure python: web_site.WebSite_generateNavigationHTML()"></tal:block>
+    <tal:block tal:content="structure python: web_section.WebSection_generateNavigationHTML()"></tal:block>
    <p tal:content="request/portal_status_message | nothing" id="portal_status_message"/>

    <main><tal:block metal:define-slot="main"/></main>

--- a/bt5/erp5_web_js_style_test/PathTemplateItem/portal_tests/js_style_zuite/testJsStyleDemoStyle.zpt
+++ b/bt5/erp5_web_js_style_test/PathTemplateItem/portal_tests/js_style_zuite/testJsStyleDemoStyle.zpt
@@ -67,6 +67,12 @@
  <td></td>
 </tr>

+<tr>
+  <td>assertElementPresent</td>
+  <td>//aside[@id='document_list']//a[text()='erp5_web_js_style_test_contentpage']</td>
+  <td></td>
+</tr>
+
 <tr>
  <td>assertElementNotPresent</td>
  <td>//div[@class='input']/span[@class='headline' and text()='Demo Style']</td>

--- a/bt5/erp5_web_js_style_test/PathTemplateItem/portal_tests/js_style_zuite/testJsStyleNoStyle.zpt
+++ b/bt5/erp5_web_js_style_test/PathTemplateItem/portal_tests/js_style_zuite/testJsStyleNoStyle.zpt
@@ -61,6 +61,12 @@
  <td></td>
 </tr>

+<tr>
+  <td>assertElementPresent</td>
+  <td>//aside[@id='document_list']//a[text()='erp5_web_js_style_test_contentpage']</td>
+  <td></td>
+</tr>
+
 <tr>
  <td>assertElementPresent</td>
  <td>//div[@class='input']/span[@class='headline' and text()='No Style']</td>

--- a/bt5/erp5_web_js_style_test/SkinTemplateItem/portal_skins/erp5_web_js_style_test/ERP5Site_createWebJSStyleZuiteTestData.py
+++ b/bt5/erp5_web_js_style_test/SkinTemplateItem/portal_skins/erp5_web_js_style_test/ERP5Site_createWebJSStyleZuiteTestData.py
@@ -198,8 +198,12 @@ web_site = module.newContent(
  id=web_site_id,
  skin_selection_name="Jsstyle",
  layout_configuration_form_id="WebSection_viewJsstylePreference",
+  site_map_document_parent=True,
+  criterion_property_list=('title',),
  **configuration_dict[configuration]
 )
+web_site.setCriterion('title', identity='erp5_web_js_style_test_contentpage')
+
 web_section = web_site.newContent(
  portal_type=web_section_portal_type,
  id='%s1' % web_section_id_prefix,

--- a/bt5/erp5_web_js_style_test/SkinTemplateItem/portal_skins/erp5_web_js_style_test/jsstyle_demo.html.html
+++ b/bt5/erp5_web_js_style_test/SkinTemplateItem/portal_skins/erp5_web_js_style_test/jsstyle_demo.html.html
@@ -13,6 +13,7 @@
    <p id="portal_status_message"></p>
    <nav id="language"></nav>
    <nav id="sitemap"></nav>
+    <aside id="document_list"></aside>
    <main></main>
  </body>
 </html>
\ No newline at end of file
--- a/bt5/erp5_web_js_style_test/SkinTemplateItem/portal_skins/erp5_web_js_style_test/jsstyle_demo.js.js
+++ b/bt5/erp5_web_js_style_test/SkinTemplateItem/portal_skins/erp5_web_js_style_test/jsstyle_demo.js.js
@@ -35,6 +35,7 @@
    })
    .declareMethod("render", function (html_content, parsed_content) {
      var state = {
+        document_list: JSON.stringify(parsed_content.document_list || []),
        language_list: JSON.stringify(parsed_content.language_list || []),
        sitemap: JSON.stringify(parsed_content.sitemap || {}),
        page_title: parsed_content.page_title || "",
@@ -49,6 +50,7 @@
    .onStateChange(function (modification_dict) {
      var gadget = this,
        language_list,
+        document_list,
        child_list,
        i;

@@ -97,6 +99,18 @@
        domsugar(gadget.element.querySelector('nav#language'),
                 [domsugar('ul', child_list)]);
      }
+      if (modification_dict.hasOwnProperty('document_list')) {
+        document_list = JSON.parse(gadget.state.document_list);
+        child_list = [];
+        for (i = 0; i < document_list.length; i += 1) {
+          child_list.push(domsugar('li', [domsugar('a', {
+            text: document_list[i].text,
+            href: document_list[i].href
+          })]));
+        }
+        domsugar(gadget.element.querySelector('aside#document_list'),
+                 [domsugar('ul', child_list)]);
+      }
      if (modification_dict.hasOwnProperty('sitemap')) {
        renderSitemap(JSON.parse(gadget.state.sitemap),
                      gadget.element.querySelector('nav#sitemap'));