Skip to content

Commit dc86a5b

Browse files
GiteaBotGiteaBot
authored
Merge branch 'main' into rmcontainer
2 parents 227647e + 9c6e6f4 commit dc86a5b

File tree

2 files changed

+49
-47
lines changed

2 files changed

+49
-47
lines changed

‎.stylelintrc.yaml

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ rules:
3030
"@stylistic/block-opening-brace-newline-after": null
3131
"@stylistic/block-opening-brace-newline-before": null
3232
"@stylistic/block-opening-brace-space-after": null
33-
"@stylistic/block-opening-brace-space-before": null
33+
"@stylistic/block-opening-brace-space-before": always
3434
"@stylistic/color-hex-case": lower
3535
"@stylistic/declaration-bang-space-after": never
3636
"@stylistic/declaration-bang-space-before": null
@@ -140,7 +140,7 @@ rules:
140140
function-disallowed-list: null
141141
function-linear-gradient-no-nonstandard-direction: true
142142
function-name-case: lower
143-
function-no-unknown: null
143+
function-no-unknown: true
144144
function-url-no-scheme-relative: null
145145
function-url-quotes: always
146146
function-url-scheme-allowed-list: null
@@ -168,7 +168,7 @@ rules:
168168
no-duplicate-selectors: true
169169
no-empty-source: true
170170
no-invalid-double-slash-comments: true
171-
no-invalid-position-at-import-rule: null
171+
no-invalid-position-at-import-rule: [true, ignoreAtRules: [tailwind]]
172172
no-irregular-whitespace: true
173173
no-unknown-animations: null
174174
no-unknown-custom-properties: null
@@ -181,6 +181,7 @@ rules:
181181
rule-empty-line-before: null
182182
rule-selector-property-disallowed-list: null
183183
scale-unlimited/declaration-strict-value: [[/color$/, font-weight], {ignoreValues: /^(inherit|transparent|unset|initial|currentcolor|none)$/, ignoreFunctions: false, disableFix: true, expandShorthand: true}]
184+
selector-anb-no-unmatchable: true
184185
selector-attribute-name-disallowed-list: null
185186
selector-attribute-operator-allowed-list: null
186187
selector-attribute-operator-disallowed-list: null

‎web_src/js/features/imagediff.js

Lines changed: 45 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -54,8 +54,8 @@ export function initImageDiff() {
5454
};
5555

5656
return {
57-
image1: $(image1),
58-
image2: $(image2),
57+
$image1: $(image1),
58+
$image2: $(image2),
5959
size1,
6060
size2,
6161
max,
@@ -124,18 +124,18 @@ export function initImageDiff() {
124124
factor = (diffContainerWidth - 24) / 2 / sizes.max.width;
125125
}
126126

127-
const widthChanged = sizes.image1.length !== 0 && sizes.image2.length !== 0 && sizes.image1[0].naturalWidth !== sizes.image2[0].naturalWidth;
128-
const heightChanged = sizes.image1.length !== 0 && sizes.image2.length !== 0 && sizes.image1[0].naturalHeight !== sizes.image2[0].naturalHeight;
129-
if (sizes.image1.length !== 0) {
130-
$container.find('.bounds-info-after .bounds-info-width').text(`${sizes.image1[0].naturalWidth}px`).addClass(widthChanged ? 'green' : '');
131-
$container.find('.bounds-info-after .bounds-info-height').text(`${sizes.image1[0].naturalHeight}px`).addClass(heightChanged ? 'green' : '');
127+
const widthChanged = sizes.$image1.length !== 0 && sizes.$image2.length !== 0 && sizes.$image1[0].naturalWidth !== sizes.$image2[0].naturalWidth;
128+
const heightChanged = sizes.$image1.length !== 0 && sizes.$image2.length !== 0 && sizes.$image1[0].naturalHeight !== sizes.$image2[0].naturalHeight;
129+
if (sizes.$image1.length !== 0) {
130+
$container.find('.bounds-info-after .bounds-info-width').text(`${sizes.$image1[0].naturalWidth}px`).addClass(widthChanged ? 'green' : '');
131+
$container.find('.bounds-info-after .bounds-info-height').text(`${sizes.$image1[0].naturalHeight}px`).addClass(heightChanged ? 'green' : '');
132132
}
133-
if (sizes.image2.length !== 0) {
134-
$container.find('.bounds-info-before .bounds-info-width').text(`${sizes.image2[0].naturalWidth}px`).addClass(widthChanged ? 'red' : '');
135-
$container.find('.bounds-info-before .bounds-info-height').text(`${sizes.image2[0].naturalHeight}px`).addClass(heightChanged ? 'red' : '');
133+
if (sizes.$image2.length !== 0) {
134+
$container.find('.bounds-info-before .bounds-info-width').text(`${sizes.$image2[0].naturalWidth}px`).addClass(widthChanged ? 'red' : '');
135+
$container.find('.bounds-info-before .bounds-info-height').text(`${sizes.$image2[0].naturalHeight}px`).addClass(heightChanged ? 'red' : '');
136136
}
137137

138-
const image1 = sizes.image1[0];
138+
const image1 = sizes.$image1[0];
139139
if (image1) {
140140
const container = image1.parentNode;
141141
image1.style.width = `${sizes.size1.width * factor}px`;
@@ -145,7 +145,7 @@ export function initImageDiff() {
145145
container.style.height = `${sizes.size1.height * factor + 2}px`;
146146
}
147147

148-
const image2 = sizes.image2[0];
148+
const image2 = sizes.$image2[0];
149149
if (image2) {
150150
const container = image2.parentNode;
151151
image2.style.width = `${sizes.size2.width * factor}px`;
@@ -162,7 +162,7 @@ export function initImageDiff() {
162162
factor = (diffContainerWidth - 12) / sizes.max.width;
163163
}
164164

165-
const image1 = sizes.image1[0];
165+
const image1 = sizes.$image1[0];
166166
if (image1) {
167167
const container = image1.parentNode;
168168
const swipeFrame = container.parentNode;
@@ -175,7 +175,7 @@ export function initImageDiff() {
175175
swipeFrame.style.width = `${sizes.max.width * factor + 2}px`;
176176
}
177177

178-
const image2 = sizes.image2[0];
178+
const image2 = sizes.$image2[0];
179179
if (image2) {
180180
const container = image2.parentNode;
181181
const swipeFrame = container.parentNode;
@@ -222,38 +222,39 @@ export function initImageDiff() {
222222
factor = (diffContainerWidth - 12) / sizes.max.width;
223223
}
224224

225-
sizes.image1.css({
226-
width: sizes.size1.width * factor,
227-
height: sizes.size1.height * factor,
228-
});
229-
sizes.image2.css({
230-
width: sizes.size2.width * factor,
231-
height: sizes.size2.height * factor,
232-
});
233-
sizes.image1.parent().css({
234-
margin: `${sizes.ratio[1] * factor}px ${sizes.ratio[0] * factor}px`,
235-
width: sizes.size1.width * factor + 2,
236-
height: sizes.size1.height * factor + 2,
237-
});
238-
sizes.image2.parent().css({
239-
margin: `${sizes.ratio[3] * factor}px ${sizes.ratio[2] * factor}px`,
240-
width: sizes.size2.width * factor + 2,
241-
height: sizes.size2.height * factor + 2,
242-
});
225+
const image1 = sizes.$image1[0];
226+
if (image1) {
227+
const container = image1.parentNode;
228+
image1.style.width = `${sizes.size1.width * factor}px`;
229+
image1.style.height = `${sizes.size1.height * factor}px`;
230+
container.style.margin = `${sizes.ratio[1] * factor}px ${sizes.ratio[0] * factor}px`;
231+
container.style.width = `${sizes.size1.width * factor + 2}px`;
232+
container.style.height = `${sizes.size1.height * factor + 2}px`;
233+
}
243234

244-
// some inner elements are `position: absolute`, so the container's height must be large enough
245-
// the "css(width, height)" is somewhat hacky and not easy to understand, it could be improved in the future
246-
sizes.image2.parent().parent().css({
247-
width: sizes.max.width * factor + 2,
248-
height: sizes.max.height * factor + 2,
249-
});
235+
const image2 = sizes.$image2[0];
236+
if (image2) {
237+
const container = image2.parentNode;
238+
const overlayFrame = container.parentNode;
239+
image2.style.width = `${sizes.size2.width * factor}px`;
240+
image2.style.height = `${sizes.size2.height * factor}px`;
241+
container.style.margin = `${sizes.ratio[3] * factor}px ${sizes.ratio[2] * factor}px`;
242+
container.style.width = `${sizes.size2.width * factor + 2}px`;
243+
container.style.height = `${sizes.size2.height * factor + 2}px`;
250244

251-
const $range = $container.find("input[type='range']");
252-
const onInput = () => sizes.image1.parent().css({
253-
opacity: $range.val() / 100,
254-
});
255-
$range.on('input', onInput);
256-
onInput();
245+
// some inner elements are `position: absolute`, so the container's height must be large enough
246+
overlayFrame.style.width = `${sizes.max.width * factor + 2}px`;
247+
overlayFrame.style.height = `${sizes.max.height * factor + 2}px`;
248+
}
249+
250+
const rangeInput = $container[0].querySelector('input[type="range"]');
251+
function updateOpacity() {
252+
if (sizes?.$image1?.[0]) {
253+
sizes.$image1[0].parentNode.style.opacity = `${rangeInput.value / 100}`;
254+
}
255+
}
256+
rangeInput?.addEventListener('input', updateOpacity);
257+
updateOpacity();
257258
}
258259
});
259260
}

0 commit comments

Comments
 (0)