erp5_run_my_doc: manage illustration and screenshot slide types

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

@@ -29,15 +29,28 @@ div[data-gadget-url$="slideeditor.gadget.html"] > .slide_list > section.drag {
 div[data-gadget-url$="slideeditor.gadget.html"] > .slide_list > section.over {
   border-style: dashed;
 }
+div[data-gadget-url$="slideeditor.gadget.html"] > .slide_list > section > img {
+  width: 8em;
+  height: 8em;
+  object-fit: cover;
+  position: relative;
+  top: -2em;
+  z-index: 1;
+  border-radius: 0.325em;
+}
 div[data-gadget-url$="slideeditor.gadget.html"] > .slide_list > section button {
   padding: 3pt;
   border: 1px solid rgba(0, 0, 0, 0.14);
   border-radius: 0.325em;
   background-color: #FFFFFF;
   width: 2em;
+  heigth: 2em;
+  min-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::before {
   float: left;

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

@@ -21,6 +21,8 @@
       data-i18n=Illustration
       data-i18n=Code
       data-i18n=Master
+      data-i18n=Image URL
+      data-i18n=Image Caption
     -->
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">

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

@@ -26,7 +26,9 @@
       'Screenshot',
       'Illustration',
       'Code',
-      'Master'
+      'Master',
+      'Image URL',
+      'Image Caption'
     ];
 
   ///////////////////////////////////////////////////
@@ -66,11 +68,14 @@
   function getSlideDictFromSlideElement(slide) {
     var h1,
       details,
+      img,
       result = {
         type: '',
         title_html: '',
         comment_html: '',
-        slide_html: ''
+        slide_html: '',
+        image_url: '',
+        image_caption: ''
       };
 
     // Clone the slide,
@@ -103,9 +108,17 @@
       slide.removeChild(details);
     }
 
+    // Get the screenshot or illustration
+    if (result.type === 'illustration' || result.type === 'screenshot') {
+      img = slide.querySelector(':scope > img');
+      if (img !== null) {
+        result.image_url = img.getAttribute("src");
+        result.image_caption = img.getAttribute("title");
+        slide.removeChild(img);
+      }
+    }
     // Finally, extract the slide
     result.slide_html = slide.innerHTML;
-
     return result;
   }
 
@@ -124,7 +137,8 @@
       slide_dict = getSlideDictFromSlideElement(slide),
       i,
       class_string,
-      key;
+      key,
+      img = '';
 
     // Hack: remove keys sent to erp5
     delete value_dict['default_type:int'];
@@ -142,10 +156,28 @@
       class_string += ' ' + slide.classList[i];
     }
     slide.className = class_string;
-    slide.innerHTML = '<h1>' + slide_dict.title_html + '</h1>' +
-                      '<details>' + slide_dict.comment_html + '</details>' +
-                      slide_dict.slide_html;
-
+    if (slide_dict.type === 'illustration' ||
+        slide_dict.type === 'screenshot') {
+      if (slide_dict.image_caption || slide_dict.image_url) {
+        img = domsugar('img', {
+          src: slide_dict.image_url,
+          type: "image/svg+xml",
+          title: slide_dict.image_caption,
+          alt: slide_dict.image_caption
+        });
+      }
+    }
+    slide.innerHTML = domsugar('select',
+      [
+        domsugar('h1',
+          [slide_dict.title_html]
+          ),
+        img,
+        domsugar('details', {
+          text: slide_dict.comment_html
+        }),
+        slide_dict.slide_html
+      ]).innerHTML;
     return slideListAsHTML(slide_list);
   }
 
@@ -207,7 +239,8 @@
   ///////////////////////////////////////////////////
   // Page view handling
   ///////////////////////////////////////////////////
-  function getCKEditorJSON(translation_dict, key, value, title_html, type) {
+  function getCKEditorJSON(translation_dict, key, value, title_html, type,
+                            image_url, image_caption) {
     var ck_editor_json = {
       erp5_document: {
         "_embedded": {
@@ -248,7 +281,7 @@
         "title": translation_dict["Chapter Title"],
         "type": "StringField",
         "editable": 1,
-        "required": 1,
+        "required": 0,
         "key": "title_html",
         "value": title_html
       };
@@ -268,12 +301,41 @@
         value: type
       };
 
-      ck_editor_json.form_definition.group_list = [
-        ["left", [
-          ["your_chapter_title"],
-          ["your_slide_type"]
-        ]]
-      ].concat(ck_editor_json.form_definition.group_list);
+      if (image_url !== null) {
+        ck_editor_json.erp5_document._embedded._view.your_image_url = {
+          "title": translation_dict["Image URL"],
+          "type": "StringField",
+          "editable": 1,
+          "required": 0,
+          "key": "image_url",
+          "value": image_url
+        };
+
+        ck_editor_json.erp5_document._embedded._view.your_image_caption = {
+          "title": translation_dict["Image Caption"],
+          "type": "StringField",
+          "editable": 1,
+          "required": 0,
+          "key": "image_caption",
+          "value": image_caption
+        };
+
+        ck_editor_json.form_definition.group_list = [
+          ["left", [
+            ["your_chapter_title"],
+            ["your_slide_type"],
+            ["your_image_url"],
+            ["your_image_caption"]
+          ]]
+        ].concat(ck_editor_json.form_definition.group_list);
+      } else {
+        ck_editor_json.form_definition.group_list = [
+          ["left", [
+            ["your_chapter_title"],
+            ["your_slide_type"]
+          ]]
+        ].concat(ck_editor_json.form_definition.group_list);
+      }
     }
 
     return ck_editor_json;
@@ -288,14 +350,29 @@
         getSlideFromList(slide_list, gadget.state.display_index)
       ),
       queue;
-
-    if (slide_dialog === DIALOG_SLIDE) {
+    if (slide_dialog === DIALOG_SLIDE && (
+        slide_dict.type === 'illustration' ||
+        slide_dict.type === 'screenshot'
+      )
+        ) {
+      render_dict = getCKEditorJSON(
+        translation_dict,
+        "slide_html",
+        slide_dict.slide_html,
+        slide_dict.title_html,
+        slide_dict.type,
+        slide_dict.image_url,
+        slide_dict.image_caption
+      );
+    } else if (slide_dialog === DIALOG_SLIDE) {
       render_dict = getCKEditorJSON(
         translation_dict,
         "slide_html",
         slide_dict.slide_html,
         slide_dict.title_html,
-        slide_dict.type
+        slide_dict.type,
+        null,
+        null
       );
     } else if (slide_dialog === DIALOG_COMMENT) {
       render_dict = getCKEditorJSON(
@@ -303,6 +380,8 @@
         "comment_html",
         slide_dict.comment_html,
         null,
+        null,
+        null,
         null
       );
     } else {
@@ -354,7 +433,8 @@
     var header_element,
       section_list = getSlideElementList(gadget.state.value),
       draggable_element_list = [],
-      i;
+      i,
+      content;
 
     // Clone listbox header structure to reuse the css
     header_element = domsugar('div', {'class': 'document_table'}, [
@@ -365,17 +445,31 @@
     ]);
 
     for (i = 0; i < section_list.length; i += 1) {
+      // 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}),
+          domsugar('img', {
+            src: getSlideDictFromSlideElement(section_list[i]).image_url,
+            draggable: false
+          })
+        ];
+      } else {
+        content = [
+          domsugar('button', {type: 'button', text: translation_dict.Edit,
+                   'class': 'display-slide ui-icon-pencil ui-btn-icon-left',
+                   'data-slide-index': i}),
+          domsugar('h1', {
+            html: getSlideDictFromSlideElement(section_list[i]).title_html
+          })
+        ];
+      }
       draggable_element_list.push(domsugar('section', {
         draggable: true,
         'data-slide-index': i
-      }, [
-        domsugar('button', {type: 'button', text: translation_dict.Edit,
-                 'class': 'display-slide ui-icon-pencil ui-btn-icon-left',
-                 'data-slide-index': i}),
-        domsugar('h1', {
-          html: getSlideDictFromSlideElement(section_list[i]).title_html
-        })
-      ]));
+      }, content));
     }
     // Add the "Add slide" button
     // div.appendChild(domsugar('section', {text: 'Add Slide'}));
@@ -564,6 +658,29 @@
       throw new Error('Unhandled display step: ' + display_step);
     })
 
+    .onEvent("change", function (evt) {
+      var gadget = this,
+        tag_name = evt.target.tagName,
+        queue;
+
+      // Always get content to ensure the possible displayed form
+      // is checked and content propagated to the gadget state value
+      queue = gadget.getContent();
+
+      if (tag_name !== 'SELECT') {
+        return queue;
+      }
+
+      if (evt.target.id === 'type') {
+        return queue
+          .push(function () {
+            return gadget.changeState({
+              type: evt.target.value
+            });
+          });
+      }
+    })
+
     .onEvent("click", function (evt) {
       // Only handle click on BUTTON and IMG element
       var gadget = this,

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

@@ -34,6 +34,15 @@ div[data-gadget-url$="slideeditor.gadget.html"] {
         // border: 2px solid #000000;
         border-style: dashed;
       }
+      & > img {
+        width: 8em;
+        height: 8em;
+        object-fit: cover;
+        position: relative;
+        top: -2em;
+        z-index: 1;
+        border-radius: 0.325em;
+      }
 
       // Spacing between every section
       margin-right: 2em;
@@ -48,9 +57,13 @@ div[data-gadget-url$="slideeditor.gadget.html"] {
         background-color: #FFFFFF;
 
         width: 2em;
+        heigth: 2em;
+        min-height: 2em;
         overflow: hidden;
         text-indent: -9999px;
         white-space: nowrap;
+        position: relative;
+        z-index: 2;
         &::before {
           float: left;
           text-indent: 0;