public/mailtrain
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Added support for resizing retina images.

Browse source 
Adding a class `retina` or naming an image with @2x resize the image to size 2x.
This commit is contained in:
Dominique Da Silva 2019-11-16 12:29:03 +00:00
parent c50881c098
commit fb1e6525f4
3 changed files with 16 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

2
public/grapejs/dist/js/grapesjs-mjml-custom.min.js vendored
View file

File diff suppressed because one or more lines are too long

4
routes/editorapi.js
View file

@ -44,7 +44,7 @@ jqueryFileUpload.on('begin', fileInfo => {
fileInfo.name = fileInfo.name fileInfo.name = fileInfo.name
.toLowerCase() .toLowerCase()
.replace(/ /g, '-') .replace(/ /g, '-')
.replace(/[^a-z0-9+-.]+/g, ''); .replace(/[^a-z0-9@+-.]+/g, '');
}); });
const listImages = (dir, dirURL, callback) => { const listImages = (dir, dirURL, callback) => {
@ -422,7 +422,7 @@ router.post('/upload', passport.csrfProtection, (req, res) => {
try { try {
JSON.parse(mockres._getData()).files.forEach(file => { JSON.parse(mockres._getData()).files.forEach(file => {
data.push({ data.push({
src: file.url src: decodeURIComponent(file.url)
}); });
}); });
res.json({ res.json({

14
views/grapejs/editor.hbs
View file

@ -255,6 +255,12 @@
return a1.host === a2.host; return a1.host === a2.host;
}; };
var isRetina = function(element) {
if (element.tagName === 'IMG' && element.src.indexOf('@2x') > -1) return true;
if (element.classList.contains('retina')) return true;
return element.parentNode && element.parentNode.tagName !== 'DIV' && isRetina(element.parentNode);
}
frame.onload = function() { frame.onload = function() {
var imgs = frameDoc.querySelectorAll('img'); var imgs = frameDoc.querySelectorAll('img');
@ -290,7 +296,13 @@
if (isLocalImage(decodeURIComponent(encodedSrc))) { if (isLocalImage(decodeURIComponent(encodedSrc))) {
img.onerror = function() { stats.failed++; }; img.onerror = function() { stats.failed++; };
img.onloadend = function() { stats.processed++; }; img.onloadend = function() { stats.processed++; };
img.src = '/editorapi/img?src=' + encodedSrc + '&method=resize&params=' + img.clientWidth + '%2C' + img.clientHeight; var w = img.clientWidth;
var h = img.clientHeight;
if (isRetina(img)) {
w = w * 2;
h = h * 2;
}
img.src = '/editorapi/img?src=' + encodedSrc + '&method=resize&params=' + w + '%2C' + h;
} else { } else {
stats.processed++; stats.processed++;
} }