Skip to content

Commit

Permalink
Added mobiledoc renderer for gallery card
Browse files Browse the repository at this point in the history 
no issue
- basic renderer for working with Koenig's gallery card
  • Loading branch information
@kevinansfield @rishabhgrg
kevinansfield authored and rishabhgrg committed Aug 30, 2018
1 parent 4c0e275 commit 402d26a
Show file tree
Hide file tree
Showing 4 changed files with 200 additions and 2 deletions.
96 changes: 96 additions & 0 deletions core/server/lib/mobiledoc/cards/gallery.js
View 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;
}
};
3 changes: 2 additions & 1 deletion core/server/lib/mobiledoc/cards/index.js
View file
Expand Up @@ -5,5 +5,6 @@ module.exports = [
require('./hr'),
require('./html'),
require('./image'),
require('./markdown')
require('./markdown'),
require('./gallery')
];
93 changes: 93 additions & 0 deletions core/test/unit/lib/mobiledoc/cards/gallery_spec.js
View 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('');
});
});
10 changes: 9 additions & 1 deletion core/test/unit/lib/mobiledoc/converters/mobiledoc-converter_spec.js
View file
Expand Up @@ -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: [
Expand All @@ -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 () {
Expand Down

0 comments on commit 402d26a

Please sign in to comment.