mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-04-01 02:41:39 -05:00
Added mobiledoc renderer for gallery card
no issue - basic renderer for working with Koenig's gallery card
This commit is contained in:
Kevin Ansfield
Rish
parent
4c0e2754ba
commit
402d26a23c
4 changed files with 200 additions and 2 deletions
96
core/server/lib/mobiledoc/cards/gallery.js
Normal file
96
core/server/lib/mobiledoc/cards/gallery.js
Normal file
|
|
@ -0,0 +1,96 @@
|
|||
const MAX_IMG_PER_ROW = 3;
|
||||
|
||||
/**
|
||||
* <figure class="kg-gallery-card kg-width-wide">
|
||||
* <div class="kg-gallery-container>
|
||||
* <div class="kg-gallery-row">
|
||||
* <div class="kg-gallery-image"><img width="" height=""></div>
|
||||
* <div class="kg-gallery-image"><img width="" height=""></div>
|
||||
* <div class="kg-gallery-image"><img width="" height=""></div>
|
||||
* </div>
|
||||
* <div class="kg-gallery-row">
|
||||
* <div class="kg-gallery-image"><img></div>
|
||||
* <div class="kg-gallery-image"><img></div>
|
||||
* </div>
|
||||
* </div>
|
||||
* <figcaption></figcaption>
|
||||
* </figure>
|
||||
*/
|
||||
|
||||
module.exports = {
|
||||
name: 'gallery',
|
||||
type: 'dom',
|
||||
render(opts) {
|
||||
let payload = opts.payload;
|
||||
// let version = opts.options.version;
|
||||
let dom = opts.env.dom;
|
||||
|
||||
if (!payload.images || payload.images.length === 0) {
|
||||
return '';
|
||||
}
|
||||
|
||||
let figure = dom.createElement('figure');
|
||||
figure.setAttribute('class', 'kg-gallery-card kg-width-wide');
|
||||
|
||||
let container = dom.createElement('div');
|
||||
container.setAttribute('class', 'kg-gallery-container');
|
||||
figure.appendChild(container);
|
||||
|
||||
let buildStructure = function buildStructure(images) {
|
||||
let rows = [];
|
||||
let noOfImages = images.length;
|
||||
|
||||
images.forEach((image, idx) => {
|
||||
let row = image.row;
|
||||
|
||||
if (noOfImages > 1 && (noOfImages % MAX_IMG_PER_ROW === 1) && (idx === (noOfImages - 2))) {
|
||||
row = row + 1;
|
||||
}
|
||||
if (!rows[row]) {
|
||||
rows[row] = [];
|
||||
}
|
||||
|
||||
rows[row].push(image);
|
||||
});
|
||||
|
||||
return rows;
|
||||
};
|
||||
|
||||
let rows = buildStructure(payload.images);
|
||||
|
||||
rows.forEach((row) => {
|
||||
let rowDiv = dom.createElement('div');
|
||||
rowDiv.setAttribute('class', 'kg-gallery-row');
|
||||
|
||||
row.forEach((image) => {
|
||||
let imgDiv = dom.createElement('div');
|
||||
imgDiv.setAttribute('class', 'kg-gallery-image');
|
||||
|
||||
let img = dom.createElement('img');
|
||||
img.setAttribute('src', image.src);
|
||||
img.setAttribute('width', image.width);
|
||||
img.setAttribute('height', image.height);
|
||||
|
||||
if (image.alt) {
|
||||
img.setAttribute('alt', image.alt);
|
||||
}
|
||||
if (image.title) {
|
||||
img.setAttribute('title', image.title);
|
||||
}
|
||||
|
||||
imgDiv.appendChild(img);
|
||||
rowDiv.appendChild(imgDiv);
|
||||
});
|
||||
|
||||
container.appendChild(rowDiv);
|
||||
});
|
||||
|
||||
if (payload.caption) {
|
||||
let figcaption = dom.createElement('figcaption');
|
||||
figcaption.appendChild(dom.createRawHTMLSection(payload.caption));
|
||||
figure.appendChild(figcaption);
|
||||
}
|
||||
|
||||
return figure;
|
||||
}
|
||||
};
|
||||
|
|
@ -5,5 +5,6 @@ module.exports = [
|
|||
require('./hr'),
|
||||
require('./html'),
|
||||
require('./image'),
|
||||
require('./markdown')
|
||||
require('./markdown'),
|
||||
require('./gallery')
|
||||
];
|
||||
|
|
|
|||
93
core/test/unit/lib/mobiledoc/cards/gallery_spec.js
Normal file
93
core/test/unit/lib/mobiledoc/cards/gallery_spec.js
Normal file
|
|
@ -0,0 +1,93 @@
|
|||
const should = require('should');
|
||||
const card = require('../../../../../server/lib/mobiledoc/cards/gallery');
|
||||
const SimpleDom = require('simple-dom');
|
||||
const serializer = new SimpleDom.HTMLSerializer(SimpleDom.voidMap);
|
||||
|
||||
describe('Gallery card', function () {
|
||||
it('renders a gallery', function () {
|
||||
let opts = {
|
||||
env: {
|
||||
dom: new SimpleDom.Document()
|
||||
},
|
||||
payload: {
|
||||
images: [
|
||||
{
|
||||
row: 0,
|
||||
fileName: 'NatGeo01.jpg',
|
||||
src: '/content/images/2018/08/NatGeo01-9.jpg',
|
||||
width: 3200,
|
||||
height: 1600
|
||||
},
|
||||
{
|
||||
row: 0,
|
||||
fileName: 'NatGeo02.jpg',
|
||||
src: '/content/images/2018/08/NatGeo02-10.jpg',
|
||||
width: 3200,
|
||||
height: 1600
|
||||
},
|
||||
{
|
||||
row: 0,
|
||||
fileName: 'NatGeo03.jpg',
|
||||
src: '/content/images/2018/08/NatGeo03-6.jpg',
|
||||
width: 3200,
|
||||
height: 1600
|
||||
},
|
||||
{
|
||||
row: 1,
|
||||
fileName: 'NatGeo04.jpg',
|
||||
src: '/content/images/2018/08/NatGeo04-7.jpg',
|
||||
alt: 'Alt test',
|
||||
width: 3200,
|
||||
height: 1600
|
||||
},
|
||||
{
|
||||
row: 1,
|
||||
fileName: 'NatGeo05.jpg',
|
||||
src: '/content/images/2018/08/NatGeo05-4.jpg',
|
||||
title: 'Title test',
|
||||
width: 3200,
|
||||
height: 1600
|
||||
},
|
||||
{
|
||||
row: 1,
|
||||
fileName: 'NatGeo06.jpg',
|
||||
src: '/content/images/2018/08/NatGeo06-6.jpg',
|
||||
width: 3200,
|
||||
height: 1600
|
||||
},
|
||||
{
|
||||
row: 2,
|
||||
fileName: 'NatGeo07.jpg',
|
||||
src: '/content/images/2018/08/NatGeo07-5.jpg',
|
||||
width: 3200,
|
||||
height: 1600
|
||||
},
|
||||
{
|
||||
row: 2,
|
||||
fileName: 'NatGeo09.jpg',
|
||||
src: '/content/images/2018/08/NatGeo09-8.jpg',
|
||||
width: 3200,
|
||||
height: 1600
|
||||
}
|
||||
],
|
||||
caption: 'Test caption'
|
||||
}
|
||||
};
|
||||
|
||||
serializer.serialize(card.render(opts)).should.eql('<figure class="kg-gallery-card kg-width-wide"><div class="kg-gallery-container"><div class="kg-gallery-row"><div class="kg-gallery-image"><img src="/content/images/2018/08/NatGeo01-9.jpg" width="3200" height="1600"></div><div class="kg-gallery-image"><img src="/content/images/2018/08/NatGeo02-10.jpg" width="3200" height="1600"></div><div class="kg-gallery-image"><img src="/content/images/2018/08/NatGeo03-6.jpg" width="3200" height="1600"></div></div><div class="kg-gallery-row"><div class="kg-gallery-image"><img src="/content/images/2018/08/NatGeo04-7.jpg" width="3200" height="1600" alt="Alt test"></div><div class="kg-gallery-image"><img src="/content/images/2018/08/NatGeo05-4.jpg" width="3200" height="1600" title="Title test"></div><div class="kg-gallery-image"><img src="/content/images/2018/08/NatGeo06-6.jpg" width="3200" height="1600"></div></div><div class="kg-gallery-row"><div class="kg-gallery-image"><img src="/content/images/2018/08/NatGeo07-5.jpg" width="3200" height="1600"></div><div class="kg-gallery-image"><img src="/content/images/2018/08/NatGeo09-8.jpg" width="3200" height="1600"></div></div></div><figcaption>Test caption</figcaption></figure>');
|
||||
});
|
||||
|
||||
it('renders nothing with no images', function () {
|
||||
let opts = {
|
||||
env: {
|
||||
dom: new SimpleDom.Document()
|
||||
},
|
||||
payload: {
|
||||
images: [],
|
||||
caption: 'Test caption'
|
||||
}
|
||||
};
|
||||
|
||||
serializer.serialize(card.render(opts)).should.eql('');
|
||||
});
|
||||
});
|
||||
|
|
@ -25,6 +25,13 @@ describe('Mobiledoc converter', function () {
|
|||
['embed', {
|
||||
html: '<h2>Embed card</h2>'
|
||||
}],
|
||||
['gallery', {
|
||||
images: [{
|
||||
src: '/test.png',
|
||||
width: 1000,
|
||||
height: 500
|
||||
}]
|
||||
}]
|
||||
],
|
||||
markups: [],
|
||||
sections: [
|
||||
|
|
@ -44,11 +51,12 @@ describe('Mobiledoc converter', function () {
|
|||
]],
|
||||
[10, 3],
|
||||
[10, 4],
|
||||
[10, 5],
|
||||
[1, 'p', []],
|
||||
]
|
||||
};
|
||||
|
||||
converter.render(mobiledoc, 2).should.eql('<p>One<br>Two</p><h1 id="markdowncard">Markdown card</h1>\n<p>Some markdown</p>\n<p>Three</p><hr><figure class="kg-image-card kg-width-wide"><img src="/content/images/2018/04/NatGeo06.jpg" class="kg-image"><figcaption>Birdies</figcaption></figure><p>Four</p><h2>HTML card</h2>\n<div><p>Some HTML</p></div><figure class="kg-embed-card"><h2>Embed card</h2></figure>');
|
||||
converter.render(mobiledoc, 2).should.eql('<p>One<br>Two</p><h1 id="markdowncard">Markdown card</h1>\n<p>Some markdown</p>\n<p>Three</p><hr><figure class="kg-image-card kg-width-wide"><img src="/content/images/2018/04/NatGeo06.jpg" class="kg-image"><figcaption>Birdies</figcaption></figure><p>Four</p><h2>HTML card</h2>\n<div><p>Some HTML</p></div><figure class="kg-embed-card"><h2>Embed card</h2></figure><figure class="kg-gallery-card kg-width-wide"><div class="kg-gallery-container"></div></figure>');
|
||||
});
|
||||
|
||||
it('removes final blank paragraph', function () {
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue