2019-02-25 18:04:49 +07:00
|
|
|
const createCard = require('../create-card');
|
|
|
|
|
|
|
|
module.exports = createCard({
|
2018-02-01 12:40:49 +01:00
|
|
|
name: 'image',
|
2017-03-15 07:07:33 +13:00
|
|
|
type: 'dom',
|
2018-03-15 09:50:25 +00:00
|
|
|
render(opts) {
|
|
|
|
let payload = opts.payload;
|
2018-05-04 14:59:39 +01:00
|
|
|
// let version = opts.options.version;
|
2018-03-15 09:50:25 +00:00
|
|
|
let dom = opts.env.dom;
|
2018-05-04 14:59:39 +01:00
|
|
|
|
2018-06-14 14:57:09 +01:00
|
|
|
if (!payload.src) {
|
|
|
|
return '';
|
|
|
|
}
|
|
|
|
|
2018-03-14 18:21:30 +00:00
|
|
|
let figure = dom.createElement('figure');
|
2018-08-31 11:05:27 +01:00
|
|
|
let figureClass = 'kg-card kg-image-card';
|
2018-07-23 12:23:02 +01:00
|
|
|
if (payload.cardWidth) {
|
|
|
|
figureClass = `${figureClass} kg-width-${payload.cardWidth}`;
|
|
|
|
}
|
|
|
|
figure.setAttribute('class', figureClass);
|
2018-03-14 18:21:30 +00:00
|
|
|
|
|
|
|
let img = dom.createElement('img');
|
|
|
|
img.setAttribute('src', payload.src);
|
2018-07-23 12:23:02 +01:00
|
|
|
img.setAttribute('class', 'kg-image');
|
2018-07-30 10:10:11 +01:00
|
|
|
if (payload.alt) {
|
|
|
|
img.setAttribute('alt', payload.alt);
|
|
|
|
}
|
2018-08-13 09:48:04 +01:00
|
|
|
if (payload.title) {
|
|
|
|
img.setAttribute('title', payload.title);
|
|
|
|
}
|
2018-05-04 14:59:39 +01:00
|
|
|
|
2018-03-14 18:21:30 +00:00
|
|
|
figure.appendChild(img);
|
|
|
|
|
|
|
|
if (payload.caption) {
|
|
|
|
let figcaption = dom.createElement('figcaption');
|
2018-08-08 14:29:20 +01:00
|
|
|
figcaption.appendChild(dom.createRawHTMLSection(payload.caption));
|
2018-03-14 18:21:30 +00:00
|
|
|
figure.appendChild(figcaption);
|
2019-02-25 10:14:45 +07:00
|
|
|
figure.setAttribute('class', `${figure.getAttribute('class')} kg-card-hascaption`);
|
2018-03-14 18:21:30 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
return figure;
|
2019-10-03 10:44:05 +01:00
|
|
|
},
|
|
|
|
|
|
|
|
absoluteToRelative(urlUtils, payload, options) {
|
|
|
|
payload.src = payload.src && urlUtils.absoluteToRelative(payload.src, options);
|
|
|
|
payload.caption = payload.caption && urlUtils.htmlAbsoluteToRelative(payload.caption, options);
|
|
|
|
return payload;
|
|
|
|
},
|
|
|
|
|
|
|
|
relativeToAbsolute(urlUtils, payload, options) {
|
|
|
|
payload.src = payload.src && urlUtils.relativeToAbsolute(payload.src, options);
|
|
|
|
payload.caption = payload.caption && urlUtils.htmlRelativeToAbsolute(payload.caption, options);
|
|
|
|
return payload;
|
2017-03-15 07:07:33 +13:00
|
|
|
}
|
2019-02-25 18:04:49 +07:00
|
|
|
});
|