Skip to content

Commit

Permalink
Integrate caption from description support from d3d11d0
Browse files Browse the repository at this point in the history
  • Loading branch information
@davisagli @thet
davisagli authored and thet committed Jun 20, 2019
1 parent 0809d45 commit d8d27de
Show file tree
Hide file tree
Showing 4 changed files with 57 additions and 11 deletions.
38 changes: 30 additions & 8 deletions mockup/patterns/tinymce/js/links.js
View file
Expand Up @@ -475,6 +475,7 @@ define([
externalImageText: this.options.text.externalImage,
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,
Expand All @@ -495,9 +496,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) {
Expand All @@ -517,6 +519,15 @@ define([
}
});
});

self.$captionFromDescription.change(function () {
if (this.checked) {
self.$caption.prop('disabled', true);
} else {
self.$caption.prop('disabled', false);
}
});

},

getLinkUrl: function() {
Expand Down Expand Up @@ -576,15 +587,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());
Expand Down Expand Up @@ -616,7 +633,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);
Expand Down Expand Up @@ -770,18 +787,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'));

self.$captionFromDescription.prop('checked', $(self.imgElm).hasClass('captioned'));
if (self.captionElm) {
self.$caption.val(self.captionElm.innerHTML);
if (self.$captionFromDescription.prop('checked')) {
self.$caption.prop('disabled', true);
}
}

linkType = self.dom.getAttrib(self.imgElm, 'data-linktype');
if (linkType) {
self.linkType = linkType;
Expand Down
5 changes: 3 additions & 2 deletions mockup/patterns/tinymce/pattern.js
View file
Expand Up @@ -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')
Expand Down Expand Up @@ -144,8 +144,9 @@ define([
imageAlign: _t('Align'),
scale: _t('Size'),
alt: _t('Alternative Text'),
captionFromDescription: _t('Show Image Caption from Image Description'),
caption: _t('Image Caption'),
externalImage: _t('External Image URL (can be relative within this site or absolute if it starts with http:// or https://)')
externalImage: _t('External Image URL (can be relative within this site or absolute if it starts with http:// or https://)'),
},
// URL generation options
loadingBaseUrl: '../../../node_modules/tinymce-builded/js/tinymce/',
Expand Down
8 changes: 7 additions & 1 deletion mockup/patterns/tinymce/templates/image.xml
View file
Expand Up @@ -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>
Expand Down
17 changes: 17 additions & 0 deletions mockup/tests/pattern-tinymce-test.js
View file
Expand Up @@ -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() {
Expand Down

0 comments on commit d8d27de

Please sign in to comment.