|
|
|
@ -20,19 +20,19 @@ function getDefaultSvgBoundsIfUndefined(text, src) {
|
|
|
|
if (img.width > 1 && img.width < MaxSize && img.height > 1 && img.height < MaxSize) {
|
|
|
|
if (img.width > 1 && img.width < MaxSize && img.height > 1 && img.height < MaxSize) {
|
|
|
|
return {
|
|
|
|
return {
|
|
|
|
width: img.width,
|
|
|
|
width: img.width,
|
|
|
|
height: img.height
|
|
|
|
height: img.height,
|
|
|
|
};
|
|
|
|
};
|
|
|
|
}
|
|
|
|
}
|
|
|
|
if (svg.hasAttribute('viewBox')) {
|
|
|
|
if (svg.hasAttribute('viewBox')) {
|
|
|
|
const viewBox = svg.viewBox.baseVal;
|
|
|
|
const viewBox = svg.viewBox.baseVal;
|
|
|
|
return {
|
|
|
|
return {
|
|
|
|
width: DefaultSize,
|
|
|
|
width: DefaultSize,
|
|
|
|
height: DefaultSize * viewBox.width / viewBox.height
|
|
|
|
height: DefaultSize * viewBox.width / viewBox.height,
|
|
|
|
};
|
|
|
|
};
|
|
|
|
}
|
|
|
|
}
|
|
|
|
return {
|
|
|
|
return {
|
|
|
|
width: DefaultSize,
|
|
|
|
width: DefaultSize,
|
|
|
|
height: DefaultSize
|
|
|
|
height: DefaultSize,
|
|
|
|
};
|
|
|
|
};
|
|
|
|
}
|
|
|
|
}
|
|
|
|
return null;
|
|
|
|
return null;
|
|
|
|
@ -42,15 +42,15 @@ export function initImageDiff() {
|
|
|
|
function createContext(image1, image2) {
|
|
|
|
function createContext(image1, image2) {
|
|
|
|
const size1 = {
|
|
|
|
const size1 = {
|
|
|
|
width: image1 && image1.width || 0,
|
|
|
|
width: image1 && image1.width || 0,
|
|
|
|
height: image1 && image1.height || 0
|
|
|
|
height: image1 && image1.height || 0,
|
|
|
|
};
|
|
|
|
};
|
|
|
|
const size2 = {
|
|
|
|
const size2 = {
|
|
|
|
width: image2 && image2.width || 0,
|
|
|
|
width: image2 && image2.width || 0,
|
|
|
|
height: image2 && image2.height || 0
|
|
|
|
height: image2 && image2.height || 0,
|
|
|
|
};
|
|
|
|
};
|
|
|
|
const max = {
|
|
|
|
const max = {
|
|
|
|
width: Math.max(size2.width, size1.width),
|
|
|
|
width: Math.max(size2.width, size1.width),
|
|
|
|
height: Math.max(size2.height, size1.height)
|
|
|
|
height: Math.max(size2.height, size1.height),
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
return {
|
|
|
|
return {
|
|
|
|
@ -63,8 +63,8 @@ export function initImageDiff() {
|
|
|
|
Math.floor(max.width - size1.width) / 2,
|
|
|
|
Math.floor(max.width - size1.width) / 2,
|
|
|
|
Math.floor(max.height - size1.height) / 2,
|
|
|
|
Math.floor(max.height - size1.height) / 2,
|
|
|
|
Math.floor(max.width - size2.width) / 2,
|
|
|
|
Math.floor(max.width - size2.width) / 2,
|
|
|
|
Math.floor(max.height - size2.height) / 2
|
|
|
|
Math.floor(max.height - size2.height) / 2,
|
|
|
|
]
|
|
|
|
],
|
|
|
|
};
|
|
|
|
};
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
@ -79,12 +79,12 @@ export function initImageDiff() {
|
|
|
|
path: this.getAttribute('data-path-after'),
|
|
|
|
path: this.getAttribute('data-path-after'),
|
|
|
|
mime: this.getAttribute('data-mime-after'),
|
|
|
|
mime: this.getAttribute('data-mime-after'),
|
|
|
|
$images: $container.find('img.image-after'), // matches 3 <img>
|
|
|
|
$images: $container.find('img.image-after'), // matches 3 <img>
|
|
|
|
$boundsInfo: $container.find('.bounds-info-after')
|
|
|
|
$boundsInfo: $container.find('.bounds-info-after'),
|
|
|
|
}, {
|
|
|
|
}, {
|
|
|
|
path: this.getAttribute('data-path-before'),
|
|
|
|
path: this.getAttribute('data-path-before'),
|
|
|
|
mime: this.getAttribute('data-mime-before'),
|
|
|
|
mime: this.getAttribute('data-mime-before'),
|
|
|
|
$images: $container.find('img.image-before'), // matches 3 <img>
|
|
|
|
$images: $container.find('img.image-before'), // matches 3 <img>
|
|
|
|
$boundsInfo: $container.find('.bounds-info-before')
|
|
|
|
$boundsInfo: $container.find('.bounds-info-before'),
|
|
|
|
}];
|
|
|
|
}];
|
|
|
|
|
|
|
|
|
|
|
|
await Promise.all(imageInfos.map(async (info) => {
|
|
|
|
await Promise.all(imageInfos.map(async (info) => {
|
|
|
|
@ -222,21 +222,21 @@ export function initImageDiff() {
|
|
|
|
|
|
|
|
|
|
|
|
sizes.image1.css({
|
|
|
|
sizes.image1.css({
|
|
|
|
width: sizes.size1.width * factor,
|
|
|
|
width: sizes.size1.width * factor,
|
|
|
|
height: sizes.size1.height * factor
|
|
|
|
height: sizes.size1.height * factor,
|
|
|
|
});
|
|
|
|
});
|
|
|
|
sizes.image2.css({
|
|
|
|
sizes.image2.css({
|
|
|
|
width: sizes.size2.width * factor,
|
|
|
|
width: sizes.size2.width * factor,
|
|
|
|
height: sizes.size2.height * factor
|
|
|
|
height: sizes.size2.height * factor,
|
|
|
|
});
|
|
|
|
});
|
|
|
|
sizes.image1.parent().css({
|
|
|
|
sizes.image1.parent().css({
|
|
|
|
margin: `${sizes.ratio[1] * factor}px ${sizes.ratio[0] * factor}px`,
|
|
|
|
margin: `${sizes.ratio[1] * factor}px ${sizes.ratio[0] * factor}px`,
|
|
|
|
width: sizes.size1.width * factor + 2,
|
|
|
|
width: sizes.size1.width * factor + 2,
|
|
|
|
height: sizes.size1.height * factor + 2
|
|
|
|
height: sizes.size1.height * factor + 2,
|
|
|
|
});
|
|
|
|
});
|
|
|
|
sizes.image2.parent().css({
|
|
|
|
sizes.image2.parent().css({
|
|
|
|
margin: `${sizes.ratio[3] * factor}px ${sizes.ratio[2] * factor}px`,
|
|
|
|
margin: `${sizes.ratio[3] * factor}px ${sizes.ratio[2] * factor}px`,
|
|
|
|
width: sizes.size2.width * factor + 2,
|
|
|
|
width: sizes.size2.width * factor + 2,
|
|
|
|
height: sizes.size2.height * factor + 2
|
|
|
|
height: sizes.size2.height * factor + 2,
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
// some inner elements are `position: absolute`, so the container's height must be large enough
|
|
|
|
// some inner elements are `position: absolute`, so the container's height must be large enough
|
|
|
|
@ -248,7 +248,7 @@ export function initImageDiff() {
|
|
|
|
|
|
|
|
|
|
|
|
const $range = $container.find("input[type='range']");
|
|
|
|
const $range = $container.find("input[type='range']");
|
|
|
|
const onInput = () => sizes.image1.parent().css({
|
|
|
|
const onInput = () => sizes.image1.parent().css({
|
|
|
|
opacity: $range.val() / 100
|
|
|
|
opacity: $range.val() / 100,
|
|
|
|
});
|
|
|
|
});
|
|
|
|
$range.on('input', onInput);
|
|
|
|
$range.on('input', onInput);
|
|
|
|
onInput();
|
|
|
|
onInput();
|
|
|
|
|
silverwind
10 months ago
committed by
GitHub