Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-01-20 22:42:53 -05:00
Code Issues Activity

Koenig - Output captions for image and embed cards

Browse source 
refs https://github.com/TryGhost/Ghost/issues/9311
- very basic implementation, still needs proper classes and default stylesheet implementation
- change image card output to a `<figure>` with optional `<figcaption>`
- add optional `<p>` caption output to the html card
This commit is contained in:
Kevin Ansfield 2018-03-14 18:21:30 +00:00
parent fcc09a0ae4
commit 7548ace32d
4 changed files with 60 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
core/server/lib/mobiledoc/cards/html.js
View file

@ -3,12 +3,18 @@
module.exports = {
name: 'html',
type: 'dom',
render(opts) {
let html = `<div class="kg-card-html">${opts.payload.html}</div>`;
render({payload, env: {dom}}) {
let caption = '';
if (payload.caption) {
caption = `<p>${payload.caption}</p>`;
}
let html = `<div class="kg-card-html">${payload.html}${caption}</div>`;
// use the SimpleDOM document to create a raw HTML section.
// avoids parsing/rendering of potentially broken or unsupported HTML
let element = opts.env.dom.createRawHTMLSection(html);
let element = dom.createRawHTMLSection(html);
return element;
}

20
core/server/lib/mobiledoc/cards/image.js
View file

@ -1,10 +1,22 @@
'use strict';
module.exports = {
name: 'image',
type: 'dom',
render(opts) {
var img = opts.env.dom.createElement('img');
render({payload, env: {dom}}) {
let figure = dom.createElement('figure');
let img = dom.createElement('img');
img.className = 'kg-card-image';
img.setAttribute('src', opts.payload.img);
return img;
img.setAttribute('src', payload.src);
figure.appendChild(img);
if (payload.caption) {
let figcaption = dom.createElement('figcaption');
figcaption.appendChild(dom.createTextNode(payload.caption));
figure.appendChild(figcaption);
}
return figure;
}
};

19
core/test/unit/lib/mobiledoc/cards/html_spec.js
View file

@ -17,6 +17,7 @@ describe('HTML card', function () {
var serializer = new SimpleDom.HTMLSerializer([]);
serializer.serialize(card.render(opts)).should.match('<div class="kg-card-html"><h1>HEADING</h1><p>PARAGRAPH</p></div>');
});
it('Plain content renders', function () {
opts = {
env: {
@ -30,7 +31,8 @@ describe('HTML card', function () {
var serializer = new SimpleDom.HTMLSerializer([]);
serializer.serialize(card.render(opts)).should.match('<div class="kg-card-html">CONTENT</div>');
});
it.skip('Invalid HTML returns', function () {
it('Invalid HTML returns', function () {
opts = {
env: {
dom: new SimpleDom.Document()
@ -43,4 +45,19 @@ describe('HTML card', function () {
var serializer = new SimpleDom.HTMLSerializer([]);
serializer.serialize(card.render(opts)).should.match('<div class="kg-card-html"><h1>HEADING<</div>');
});
it('Caption renders', function () {
opts = {
env: {
dom: new SimpleDom.Document()
},
payload: {
html: '<iframe src="http://vimeo.com"></iframe>',
caption: 'Embed caption test'
}
};
var serializer = new SimpleDom.HTMLSerializer([]);
serializer.serialize(card.render(opts)).should.match('<div class="kg-card-html"><iframe src="http://vimeo.com"></iframe><p>Embed caption test</p></div>');
});
});

19
core/test/unit/lib/mobiledoc/cards/image_spec.js
View file

@ -10,11 +10,26 @@ describe('Image card', function () {
dom: new SimpleDom.Document()
},
payload: {
img: 'https://www.ghost.org/image.png'
src: 'https://www.ghost.org/image.png'
}
};
var serializer = new SimpleDom.HTMLSerializer([]);
serializer.serialize(card.render(opts)).should.match('<img src="https://www.ghost.org/image.png"></img>');
serializer.serialize(card.render(opts)).should.match('<figure><img src="https://www.ghost.org/image.png"></img></figure>');
});
it('generates an image with caption', function () {
opts = {
env: {
dom: new SimpleDom.Document()
},
payload: {
src: 'https://www.ghost.org/image.png',
caption: 'Test caption'
}
};
var serializer = new SimpleDom.HTMLSerializer([]);
serializer.serialize(card.render(opts)).should.match('<figure><img src="https://www.ghost.org/image.png"></img><figcaption>Test caption</figcaption></figure>');
});
});