erp5_core: use the html_viewer when the field is non editable

Stop using ck_editor in read_only to display HTML.

This allows to get rid of the ck_editor iframe, allowing a faster load and removing the iframe scroll.
The maximise button is no more needed in such case.

It also removes all ck_editor links handling: links can be open in another browser tab now.

This changes impacts both xhtml style and erp5js.

bt5/erp5_web_project_ui/PathTemplateItem/web_page_module/project_gadget_page_project_page_js.js

@@ -20,7 +20,7 @@ SimpleQuery, ComplexQuery, Query, domsugar*/
   function parseHTMLLinks(html, url) {
     var parser = new DOMParser(), i,
       oSerializer = new XMLSerializer(),
-      doc = parser.parseFromString(html, "text/html"),
+      doc = parser.parseFromString(html || '', "text/html"),
       link_list = doc.querySelectorAll("a");
     doc.querySelector("head").appendChild(domsugar('link', {
       href: "gadget_erp5_page_project.css",
@@ -266,7 +266,7 @@ SimpleQuery, ComplexQuery, Query, domsugar*/
           web_page_info = result_list[2];
           if (web_page_info) {
             editor = result_list[1];
-            editor.render({"editor": "fck_editor", "editable": false, "maximize": true,
+            editor.render({"editor": "fck_editor", "editable": false,
                            "value": web_page_info.content});
           }
           url_parameter_list = [

bt5/erp5_web_project_ui/PathTemplateItem/web_page_module/project_gadget_page_project_page_js.xml

@@ -240,7 +240,7 @@
                   </item>
                   <item>
                       <key> <string>serial</string> </key>
-                      <value> <string>982.41335.49696.64290</string> </value>
+                      <value> <string>989.31808.20170.12270</string> </value>
                   </item>
                   <item>
                       <key> <string>state</string> </key>
@@ -258,7 +258,7 @@
                           </tuple>
                           <state>
                             <tuple>
-                              <float>1584629384.78</float>
+                              <float>1611237159.42</float>
                               <string>UTC</string>
                             </tuple>
                           </state>

bt5/erp5_web_project_ui_test/PathTemplateItem/portal_tests/project_ui_zuite/testRenderjsProjectHomePage.zpt

@@ -70,8 +70,8 @@
  <td></td>
 </tr>
 <tr>
-  <td>waitForElementPresent</td>
-  <td>//button[text()="Maximize"]</td>
+  <td>assertElementPresent</td>
+  <td>//div[@data-gadget-url='${base_url}/web_site_module/project_management/gadget_editor.html']</td>
   <td></td>
 </tr>
 <tr>

product/ERP5/bootstrap/erp5_core/SkinTemplateItem/portal_skins/erp5_core/gadget_editor.js.js

@@ -8,6 +8,7 @@
     "monaco": {"url": "monaco-editor.gadget.html"},
     "onlyoffice": {"url": "onlyoffice.gadget.html"},
     "fck_editor": {"url": "ckeditor.gadget.html"},
+    "html_viewer": {"url": "gadget_html_viewer.html"},
     "svg_editor" : {"url": "method-draw/method-draw.gadget.html"},
     "minipaint": {"url": "minipaint.gadget.html"},
     "jquery-sheets": {"url": "jquery-sheets.gadget.html"},
@@ -64,6 +65,13 @@
           // as user may have modified the input value
           render_timestamp: new Date().getTime()
         };
+
+      if ((!state_dict.editable) &&
+          ((state_dict.editor === 'fck_editor') ||
+           (state_dict.content_type === 'text/html'))) {
+        state_dict.editor = 'html_viewer';
+        state_dict.maximize = undefined;
+      }
       return this.changeState(state_dict);
     })
 
@@ -86,7 +94,9 @@
           // for fck_editor fields, we want to be able to maximize also in non editable
           if ((gadget.state.maximize && gadget.state.editable) ||
               (gadget.state.maximize && gadget.state.editor === 'jsmd_editor') ||
-              (gadget.state.maximize && gadget.state.editor === 'fck_editor')) {
+              (gadget.state.maximize &&
+               (gadget.state.editor === 'fck_editor') &&
+               gadget.state.editable)) {
             element.appendChild(div_max);
             queue
               .push(function () {
@@ -111,7 +121,6 @@
 
         if ((gadget.state.editable &&
              (editor_dict.hasOwnProperty(gadget.state.editor))) ||
-            (!gadget.state.editable && gadget.state.editor === 'fck_editor') ||
             (!gadget.state.editable && gadget.state.editor === 'jsmd_editor') ||
             (!gadget.state.editable && gadget.state.editor === 'monaco') ||
             (gadget.state.editor === 'pdf')) {
@@ -132,6 +141,16 @@
                 }
               );
             });
+        } else if (!gadget.state.editable &&
+                   ((gadget.state.editor === 'fck_editor') ||
+                    (gadget.state.editor === 'html_viewer'))) {
+          queue
+            .push(function () {
+              return gadget.declareGadget(editor_dict.html_viewer.url, {
+                scope: 'editor',
+                element: div
+              });
+            });
         } else if (gadget.state.editable &&
             (gadget.state.editor === 'text_area')) {
           element.appendChild(document.createElement('textarea'));
@@ -145,7 +164,8 @@
 
       if ((gadget.state.editable &&
              (editor_dict.hasOwnProperty(gadget.state.editor))) ||
-            (!gadget.state.editable && gadget.state.editor === 'fck_editor') ||
+            (gadget.state.editor === 'fck_editor') ||
+            (gadget.state.editor === 'html_viewer') ||
             (!gadget.state.editable && gadget.state.editor === 'jsmd_editor') ||
             (!gadget.state.editable && gadget.state.editor === 'monaco') ||
             (gadget.state.editor === 'pdf')) {