Integrate caption from description support from d3d11d0

plone · Feb 17, 2020 · 3e64876 · 3e64876
1 parent 2e04172
commit 3e64876
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 10 deletions.
diff --git a/mockup/patterns/tinymce/js/links.js b/mockup/patterns/tinymce/js/links.js
@@ -483,6 +483,7 @@ define([
         externalImageText: this.options.text.externalImageText,
         altText: this.options.text.alt,
         imageAlignText: this.options.text.imageAlign,
+        captionFromDescriptionText: this.options.text.captionFromDescription,
         captionText: this.options.text.caption,
         scaleText: this.options.text.scale,
         imageScales: this.options.imageScales,
@@ -503,9 +504,10 @@ define([
       self.$subject = $('input[name="subject"]', self.modal.$modal);
 
       self.$alt = $('input[name="alt"]', self.modal.$modal);
-      self.$caption = $('textarea[name="caption"]', self.modal.$modal);
       self.$align = $('select[name="align"]', self.modal.$modal);
       self.$scale = $('select[name="scale"]', self.modal.$modal);
+      self.$captionFromDescription = $('input[name="captionFromDescription"]', self.modal.$modal);
+      self.$caption = $('textarea[name="caption"]', self.modal.$modal);
 
       /* load up all the link types */
       _.each(self.options.linkTypes, function(type) {
@@ -525,6 +527,15 @@ define([
           }
         });
       });
+
+      self.$captionFromDescription.change(function () {
+        if (this.checked) {
+          self.$caption.prop('disabled', true);
+        } else {
+          self.$caption.prop('disabled', false);
+        }
+      });
+
     },
 
     getLinkUrl: function() {
@@ -584,15 +595,21 @@ define([
     updateImage: function(src) {
       var self = this;
       var title = self.$title.val();
+      var captionFromDescription = self.$captionFromDescription.prop('checked')
 
       self.tiny.focus();
       self.tiny.selection.setRng(self.rng);
 
+      var cssclasses = ['image-richtext', self.$align.val()];
+      if (captionFromDescription) {
+        cssclasses.push('captioned');
+      }
+
       var data = $.extend(true, {}, {
         src: src,
         title: title ? title : null,
         alt: self.$alt.val(),
-        'class': self.$align.val() + ' image-richtext',
+        'class': cssclasses.join(' '),
         'data-linkType': self.linkType,
         'data-scale': self.$scale.val(),
       }, self.linkTypes[self.linkType].attributes());
@@ -624,7 +641,7 @@ define([
       var html_inner = self.dom.createHTML('img', data);
       var caption = self.$caption.val();
       var html_string;
-      if (caption) {
+      if (caption && ! captionFromDescription) {
         html_inner += '\n' + self.dom.createHTML('figcaption', {}, caption);
         //html_inner += '\n' + self.dom.createHTML('figcaption', { class: 'mceNonEditable' }, caption);
         html_string = self.dom.createHTML('figure', {}, html_inner);
@@ -778,18 +795,23 @@ define([
           caption = self.selectedElm;
         }
 
-        self.captionElm = caption;
-        if (self.captionElm) {
-          self.$caption.val(self.captionElm.innerHTML);
-        }
-
         self.imgElm = img;
         self.figureElm = figure;
+        self.captionElm = caption;
 
         if (self.imgElm) {
           var src = self.dom.getAttrib(self.imgElm, 'src');
           self.$title.val(self.dom.getAttrib(self.imgElm, 'title'));
           self.$alt.val(self.dom.getAttrib(self.imgElm, 'alt'));
+
+          if ($(self.imgElm).hasClass('captioned')) {
+            self.$captionFromDescription.prop('checked', true);
+            self.$caption.prop('disabled', true);
+          }
+          if (self.captionElm) {
+            self.$caption.val(self.captionElm.innerHTML);
+          }
+
           linkType = self.dom.getAttrib(self.imgElm, 'data-linktype');
           if (linkType) {
             self.linkType = linkType;

diff --git a/mockup/patterns/tinymce/pattern.js b/mockup/patterns/tinymce/pattern.js
@@ -3,7 +3,7 @@
  * Options:
  *    relatedItems(object): Related items pattern options. ({ attributes: ["UID", "Title", "Description", "getURL", "portal_type", "path", "ModificationDate"], batchSize: 20, basePath: "/", vocabularyUrl: null, width: 500, maximumSelectionSize: 1, placeholder: "Search for item on site..." })
  *    upload(object): Upload pattern options. ({ attributes: look at upload pattern for getting the options list })
- *    text(object): Translation strings ({ insertBtn: "Insert", cancelBtn: "Cancel", insertHeading: "Insert link", title: "Title", internal: "Internal", external: "External", email: "Email", anchor: "Anchor", subject: "Subject" image: "Image", imageAlign: "Align", scale: "Size", alt: "Alternative Text", caption: "Image Caption", externalImage: "External Image URI"})
+ *    text(object): Translation strings ({ insertBtn: "Insert", cancelBtn: "Cancel", insertHeading: "Insert link", title: "Title", internal: "Internal", external: "External", email: "Email", anchor: "Anchor", subject: "Subject" image: "Image", imageAlign: "Align", scale: "Size", alt: "Alternative Text", captionFromDescription: "Show Image Caption from Image Description", caption: "Image Caption", externalImage: "External Image URI"})
  *    imageScales(string): Image scale name/value object-array or JSON string for use in the image dialog.
  *    targetList(array): TODO ([ {text: "Open in this window / frame", value: ""}, {text: "Open in new window", value: "_blank"}, {text: "Open in parent window / frame", value: "_parent"}, {text: "Open in top frame (replaces all frames)", value: "_top"}])
  *    imageTypes(string): TODO ('Image')
@@ -151,6 +151,7 @@ define([
         externalImageText: _t('External Image URL (can be relative within this site or absolute if it starts with http:// or https://)'),
         upload: _t('Upload'),
         insertLinkHelp: _t('Specify the object to link to. It can be on this site already (Internal), an object you upload (Upload), from an external site (External), an email address (Email), or an anchor on this page (Anchor).'),
+        captionFromDescription: _t('Show Image Caption from Image Description'),
         caption: _t('Image Caption'),
       },
       // URL generation options

diff --git a/mockup/patterns/tinymce/templates/image.xml b/mockup/patterns/tinymce/templates/image.xml
@@ -60,7 +60,13 @@
         <label><%- altText %></label>
         <input type="text" name="alt" />
       </div>
-      <div class="form-group text">
+      <div class="form-group captionFromDescription">
+        <label>
+          <input type="checkbox" name="captionFromDescription" />
+          <%- captionFromDescriptionText %>
+        </label>
+      </div>
+      <div class="form-group caption">
         <label><%- captionText %></label>
         <textarea name="caption" />
       </div>

diff --git a/mockup/tests/pattern-tinymce-test.js b/mockup/tests/pattern-tinymce-test.js
@@ -376,6 +376,23 @@ define([
       expect(content).to.contain('<img');
       expect(content).to.contain('image-richtext'); // new image-richtext class.
 
+      // Use image captions from the image description.
+      pattern.addImageClicked();
+      pattern.imageModal.linkTypes.image.getEl().select2('data', {
+        UID: 'foobar',
+        portal_type: 'Document',
+        Title: 'Foobar',
+        path: '/foobar'
+      });
+      pattern.imageModal.$captionFromDescription.prop('checked', true);
+      pattern.imageModal.$button.click();
+      content = pattern.tiny.getContent();
+
+      expect(content).to.not.contain('<figure>');
+      expect(content).to.not.contain('<figcaption>');
+      expect(content).to.contain('<img');
+      expect(content).to.contain('image-richtext'); // new image-richtext class.
+      expect(content).to.contain('captioned'); // new image-richtext class.
     });
 
     it('test adds data attributes', function() {