erp5_run_my_doc: display erp5 image url using embedded image

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

-/*global window, document, rJS, console, RSVP, domsugar*/
+/*global window, document, rJS, console, RSVP, domsugar, URL*/
 /*jslint nomen: true, maxlen:80, indent:2*/
 (function () {
   "use strict";
@@ -31,6 +31,16 @@
       'Image Caption'
     ];
 
+  function fixupERP5UrlCompatibility(jio_key, url) {
+    if (!jio_key) {
+      return url;
+    }
+    return new URL(
+      url,
+      new URL(jio_key + '/', window.location.href).href
+    ).href;
+  }
+
   ///////////////////////////////////////////////////
   // translation
   ///////////////////////////////////////////////////
@@ -465,7 +475,10 @@
           edit_element,
           delete_element,
           domsugar('img', {
-            src: getSlideDictFromSlideElement(section_list[i]).image_url,
+            src: fixupERP5UrlCompatibility(
+              gadget.state.jio_key,
+              getSlideDictFromSlideElement(section_list[i]).image_url
+            ),
             draggable: false
           })
         ];
@@ -597,6 +610,7 @@
 
     .declareMethod('render', function (options) {
       return this.changeState({
+        jio_key: options.jio_key,
         key: options.key,
         value: options.value || "",
         editable: options.editable === undefined ? true : options.editable

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

-/*global window, rJS, RSVP, domsugar, Reveal*/
+/*global window, rJS, RSVP, domsugar, Reveal, URL*/
 /*jslint nomen: true, maxlen:80, indent:2*/
-(function (window, rJS, RSVP, domsugar, Reveal) {
+(function (window, rJS, RSVP, domsugar, Reveal, URL) {
   "use strict";
 
+  function fixupERP5UrlCompatibility(jio_key, url) {
+    if (!jio_key) {
+      return url;
+    }
+    return new URL(
+      url,
+      new URL(jio_key + '/', window.location.href).href
+    ).href;
+  }
+
   function getSlideElementList(presentation_html) {
     // Convert to an Array so that array methods can be used to reorder slides
     return Array.prototype.slice.call(domsugar('div', {
@@ -23,7 +33,7 @@
     return fragment;
   }
 
-  function cleanupSlide(slide_element) {
+  function cleanupSlide(slide_element, jio_key) {
     var detail_list = Array.prototype.slice.call(
       slide_element.querySelectorAll(':scope > details')
     ),
@@ -50,15 +60,29 @@
         }
       }
     }
+
+    // Rewrite img url to support sub document ID
+    detail_list = Array.prototype.slice.call(
+      slide_element.querySelectorAll('img')
+    );
+    len = detail_list.length;
+    for (i = 0; i < len; i += 1) {
+      detail_list[i].src = fixupERP5UrlCompatibility(
+        jio_key,
+        detail_list[i].getAttribute('src')
+      )
+    }
+
+
     return slide_element;
   }
 
-  function cleanupPresentationFormat(presentation_html) {
+  function cleanupPresentationFormat(presentation_html, jio_key) {
     var slide_list = getSlideElementList(presentation_html),
       i,
       len = slide_list.length;
     for (i = 0; i < len; i += 1) {
-      cleanupSlide(slide_list[i]);
+      cleanupSlide(slide_list[i], jio_key);
     }
     return domsugar('div', {class: 'reveal'}, [
       domsugar('div', {class: 'slides'}, slide_list)
@@ -73,7 +97,8 @@
 
     .declareMethod('render', function (options) {
       return this.changeState({
-        value: options.value || ""
+        value: options.value || "",
+        jio_key: options.jio_key
       });
     })
 
@@ -82,7 +107,7 @@
       return new RSVP.Queue()
         .push(function () {
           domsugar(gadget.element, [
-            cleanupPresentationFormat(gadget.state.value)
+            cleanupPresentationFormat(gadget.state.value, gadget.state.jio_key)
           ]);
 
           return Reveal.initialize(gadget.element, {
@@ -112,4 +137,4 @@
     });
 
 
-}(window, rJS, RSVP, domsugar, Reveal));
\ No newline at end of file
+}(window, rJS, RSVP, domsugar, Reveal, URL));
\ No newline at end of file