erp5_run_my_doc: allow to delete a slide directly from the list

bt5/erp5_run_my_doc/SkinTemplateItem/portal_skins/erp5_run_my_doc/slideeditor.gadget.css.css

@@ -13,12 +13,8 @@ div[data-gadget-url$="slideeditor.gadget.html"] > .slide_list > section {
   background-color: #FFFFFF;
   border: 1px solid #000000;
   padding: 0.5em;
-  vertical-align: middle;
-  text-align: center;
   margin-right: 2em;
   margin-bottom: 2em;
-  display: flex;
-  flex-direction: column;
 }
 div[data-gadget-url$="slideeditor.gadget.html"] > .slide_list > section[data-slide-index] {
   cursor: move;
@@ -38,20 +34,27 @@ div[data-gadget-url$="slideeditor.gadget.html"] > .slide_list > section > img {
   z-index: 1;
   border-radius: 0.325em;
 }
+div[data-gadget-url$="slideeditor.gadget.html"] > .slide_list > section > h1 {
+  text-align: center;
+  padding-top: 2.5em;
+}
 div[data-gadget-url$="slideeditor.gadget.html"] > .slide_list > section button {
   padding: 3pt;
+  float: right;
   border: 1px solid rgba(0, 0, 0, 0.14);
   border-radius: 0.325em;
   background-color: #FFFFFF;
   width: 2em;
-  heigth: 2em;
-  min-height: 2em;
+  height: 2em;
   overflow: hidden;
   text-indent: -9999px;
   white-space: nowrap;
   position: relative;
   z-index: 2;
 }
+div[data-gadget-url$="slideeditor.gadget.html"] > .slide_list > section button:first-of-type {
+  float: left;
+}
 div[data-gadget-url$="slideeditor.gadget.html"] > .slide_list > section button::before {
   float: left;
   text-indent: 0;

bt5/erp5_run_my_doc/SkinTemplateItem/portal_skins/erp5_run_my_doc/slideeditor.gadget.js.js

@@ -439,7 +439,9 @@
       section_list = getSlideElementList(gadget.state.value),
       draggable_element_list = [],
       i,
-      content;
+      content,
+      edit_element,
+      delete_element;
 
     // Clone listbox header structure to reuse the css
     header_element = domsugar('div', {'class': 'document_table'}, [
@@ -450,12 +452,23 @@
     ]);
 
     for (i = 0; i < section_list.length; i += 1) {
+      edit_element = domsugar('button', {
+        type: 'button',
+        text: translation_dict.Edit,
+        'class': 'display-slide ui-icon-pencil ui-btn-icon-left',
+        'data-slide-index': i
+      });
+      delete_element = domsugar('button', {
+        type: 'button',
+        text: translation_dict.Delete,
+        'class': 'delete-slide ui-icon-trash-o ui-btn-icon-left',
+        'data-slide-index': i
+      });
       // If slide type is sreenshot/illustration, show image instead of title
       if (getSlideDictFromSlideElement(section_list[i]).image_url) {
         content = [
-          domsugar('button', {type: 'button', text: translation_dict.Edit,
-                   'class': 'display-slide ui-icon-pencil ui-btn-icon-left',
-                   'data-slide-index': i}),
+          edit_element,
+          delete_element,
           domsugar('img', {
             src: getSlideDictFromSlideElement(section_list[i]).image_url,
             draggable: false
@@ -463,9 +476,8 @@
         ];
       } else {
         content = [
-          domsugar('button', {type: 'button', text: translation_dict.Edit,
-                   'class': 'display-slide ui-icon-pencil ui-btn-icon-left',
-                   'data-slide-index': i}),
+          edit_element,
+          delete_element,
           domsugar('h1', {
             html: getSlideDictFromSlideElement(section_list[i]).title_html
           })
@@ -745,6 +757,23 @@
           });
       }
 
+      if (evt.target.className.indexOf("delete-slide") !== -1) {
+        return queue
+          .push(function () {
+            var slide_list = getSlideElementList(gadget.state.value);
+            slide_list.splice(parseInt(
+                evt.target.getAttribute('data-slide-index'),
+                10
+              ), 1);
+            return RSVP.all([
+              gadget.changeState({
+                value: slideListAsHTML(slide_list)
+              }),
+              gadget.notifyChange()
+            ]);
+          });
+      }
+
       if (evt.target.className.indexOf("dialog-comment") !== -1) {
         return queue
           .push(function () {

bt5/erp5_run_my_doc/SkinTemplateItem/portal_skins/erp5_run_my_doc/slideeditor.gadget.less.txt

@@ -23,8 +23,6 @@ div[data-gadget-url$="slideeditor.gadget.html"] {
       background-color:#FFFFFF;
       border: 1px solid #000000;
       padding: 0.5em;
-      vertical-align: middle;
-      text-align: center;
       // color:#000000;
 
       &.drag {
@@ -43,22 +41,28 @@ div[data-gadget-url$="slideeditor.gadget.html"] {
         z-index: 1;
         border-radius: 0.325em;
       }
+      & > h1 {
+        text-align: center;
+        padding-top: 2.5em;
+      }
 
       // Spacing between every section
       margin-right: 2em;
       margin-bottom: 2em;
 
-      display: flex;
-      flex-direction: column;
       button {
         padding: 3pt;
+        float: right;
+        &:first-of-type {
+          float: left;
+        }
+
         border: 1px solid rgba(0, 0, 0, 0.14);
         border-radius: 0.325em;
         background-color: #FFFFFF;
 
         width: 2em;
-        heigth: 2em;
-        min-height: 2em;
+        height: 2em;
         overflow: hidden;
         text-indent: -9999px;
         white-space: nowrap;

bt5/erp5_run_my_doc_renderjs_ui_test/PathTemplateItem/portal_tests/renderjs_ui_run_my_doc_zuite/testSlideshowEditorDeleteFromList.xml

+<?xml version="1.0"?>
+<ZopeData>
+  <record id="1" aka="AAAAAAAAAAE=">
+    <pickle>
+      <global name="ZopePageTemplate" module="Products.PageTemplates.ZopePageTemplate"/>
+    </pickle>
+    <pickle>
+      <dictionary>
+        <item>
+            <key> <string>_bind_names</string> </key>
+            <value>
+              <object>
+                <klass>
+                  <global name="NameAssignments" module="Shared.DC.Scripts.Bindings"/>
+                </klass>
+                <tuple/>
+                <state>
+                  <dictionary>
+                    <item>
+                        <key> <string>_asgns</string> </key>
+                        <value>
+                          <dictionary>
+                            <item>
+                                <key> <string>name_subpath</string> </key>
+                                <value> <string>traverse_subpath</string> </value>
+                            </item>
+                          </dictionary>
+                        </value>
+                    </item>
+                  </dictionary>
+                </state>
+              </object>
+            </value>
+        </item>
+        <item>
+            <key> <string>content_type</string> </key>
+            <value> <string>text/html</string> </value>
+        </item>
+        <item>
+            <key> <string>expand</string> </key>
+            <value> <int>0</int> </value>
+        </item>
+        <item>
+            <key> <string>id</string> </key>
+            <value> <string>testSlideshowEditorDeleteFromList</string> </value>
+        </item>
+        <item>
+            <key> <string>output_encoding</string> </key>
+            <value> <string>utf-8</string> </value>
+        </item>
+        <item>
+            <key> <string>title</string> </key>
+            <value> <unicode></unicode> </value>
+        </item>
+      </dictionary>
+    </pickle>
+  </record>
+</ZopeData>

bt5/erp5_run_my_doc_renderjs_ui_test/PathTemplateItem/portal_tests/renderjs_ui_run_my_doc_zuite/testSlideshowEditorDeleteFromList.zpt

+<html xmlns:tal="http://xml.zope.org/namespaces/tal"
+      xmlns:metal="http://xml.zope.org/namespaces/metal">
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+<title>Test RenderJS UI</title>
+</head>
+<body>
+<table cellpadding="1" cellspacing="1" border="1">
+<thead>
+<tr><td rowspan="1" colspan="3">Test RenderJS UI</td></tr>
+</thead><tbody>
+<tal:block metal:use-macro="here/Zuite_CommonTemplate/macros/init" />
+
+<!-- Initialize -->
+<tr>
+  <td>open</td>
+  <td>${base_url}/web_site_module/renderjs_runner/#/test_page_module</td>
+  <td></td>
+</tr>
+<tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/wait_for_app_loaded" />
+
+<tal:block tal:define="click_configuration python: {'text': 'Add'}">
+  <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/click_on_header_link" />
+</tal:block>
+<tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/wait_for_content_loaded" />
+
+<tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/submit_dialog" />
+<tal:block tal:define="notification_configuration python: {'class': 'success',
+                                                           'text': 'Object created.'}">
+  <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/wait_for_notification" />
+</tal:block>
+<tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/wait_for_content_loaded" />
+
+<!-- Go to test form -->
+<tal:block tal:define="click_configuration python: {'text': 'Edit Slideshow'}">
+  <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/click_on_panel_link" />
+</tal:block>
+<tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/wait_for_content_loaded" />
+
+<tr>
+  <td>assertTextPresent</td>
+  <td>0 Slides</td>
+  <td></td>
+</tr>
+
+<tr>
+  <td colspan="3"><b>Create first slide</b></td>
+</tr>
+<tr>
+  <td>click</td>
+  <td>//button[text()='New Slide']</td>
+  <td></td>
+</tr>
+<tr>
+  <td>waitForTextPresent</td>
+  <td>Slide 1</td>
+  <td></td>
+</tr>
+
+<tr>
+  <td colspan="3"><b>Set text content</b></td>
+</tr>
+<tal:block tal:define="text_content python: 'slide 1 text content'">
+  <tal:block metal:use-macro="container/Zuite_CommonTemplateForRenderjsUi/macros/type_ckeditor_text_content"/>
+</tal:block>
+
+<tr>
+  <td colspan="3"><b>Create second slide</b></td>
+</tr>
+<tr>
+  <td>click</td>
+  <td>//button[text()='New Slide']</td>
+  <td></td>
+</tr>
+<tr>
+  <td>waitForTextPresent</td>
+  <td>Slide 2</td>
+  <td></td>
+</tr>
+
+<tr>
+  <td colspan="3"><b>Set text content</b></td>
+</tr>
+<tal:block tal:define="text_content python: 'slide 2 text content'">
+  <tal:block metal:use-macro="container/Zuite_CommonTemplateForRenderjsUi/macros/type_ckeditor_text_content"/>
+</tal:block>
+
+<tr>
+  <td colspan="3"><b>Go back to the slide list</b></td>
+</tr>
+<tr>
+  <td>click</td>
+  <td>//button[text()='List']</td>
+  <td></td>
+</tr>
+<tr>
+  <td>waitForTextPresent</td>
+  <td>2 Slides</td>
+  <td></td>
+</tr>
+
+<tr>
+  <td colspan="3"><b>Delete slide 1</b></td>
+</tr>
+<tr>
+  <td>click</td>
+  <td>//button[text()='Delete' and @data-slide-index='0']</td>
+  <td></td>
+</tr>
+<tr>
+  <td>waitForTextPresent</td>
+  <td>1 Slides</td>
+  <td></td>
+</tr>
+
+<tr>
+  <td colspan="3"><b>Go back to the slide 2</b></td>
+</tr>
+<tr>
+  <td>click</td>
+  <td>//button[text()='Edit']</td>
+  <td></td>
+</tr>
+<tr>
+  <td>waitForTextPresent</td>
+  <td>Slide 1</td>
+  <td></td>
+</tr>
+<tr>
+  <td>waitForElementPresent</td>
+  <td>title_html</td>
+  <td></td>
+</tr>
+
+<tr>
+  <td colspan="3"><b>Check text content</b></td>
+</tr>
+<tal:block tal:define="text_content python: '<p>slide 2 text content</p>'">
+  <tal:block metal:use-macro="container/Zuite_CommonTemplateForRenderjsUi/macros/verify_ckeditor_text_content"/>
+</tal:block>
+
+
+</tbody></table>
+</body>
+</html>
\ No newline at end of file