@recaptime-dev's working patches + fork for Phorge, a community fork of Phabricator. (Upstream dev and stable branches are at upstream/main and upstream/stable respectively.)
hq.recaptime.dev/wiki/Phorge
phorge
phabricator
Use CSS to resize the lightboxed image instead of Javascript
Summary: We can let the browser do the scaling with some simpler CSS rules.
Test Plan: Opened very large images in Safari, Firefox and Chrome and resized the browser. Observed smooth scaling and no issues with the image overlapping UI elements, etc.
Reviewers: btrahan, vrana
Reviewed By: btrahan
CC: aran
Maniphest Tasks: T1896
Differential Revision: https://secure.phabricator.com/D3802
+3
-38
+3
-1
webroot/rsrc/css/aphront/lightbox-attachment.css
+3
-1
webroot/rsrc/css/aphront/lightbox-attachment.css
-37
webroot/rsrc/js/application/core/behavior-lightbox-attachments.js
-37
webroot/rsrc/js/application/core/behavior-lightbox-attachments.js
···
4
4
* javelin-stratcom
5
5
* javelin-dom
6
6
* javelin-mask
7
-
* javelin-vector
8
7
* javelin-util
9
8
*/
10
9
···
233
232
return;
234
233
}
235
234
var img = JX.DOM.find(lightbox, 'img');
236
-
var d = JX.Vector.getDim(img);
237
-
JX.Stratcom.addData(img, { x : d.x, y : d.y } );
238
-
239
-
return resizeLightBox(e);
240
-
}
241
-
242
-
function resizeLightBox(e) {
243
-
if (!lightbox) {
244
-
return;
245
-
}
246
-
var img = JX.DOM.find(lightbox, 'img');
247
-
var v = JX.Vector.getViewport();
248
-
var d = JX.Stratcom.getData(img);
249
-
250
-
var w = d.x;
251
-
var h = d.y;
252
-
var scale = 0;
253
-
if (w > (v.x - x_margin)) {
254
-
scale = (v.x - x_margin) / w;
255
-
w = w * scale;
256
-
h = h * scale;
257
-
}
258
-
if (h > (v.y - y_margin)) {
259
-
scale = (v.y - y_margin) / h;
260
-
w = w * scale;
261
-
h = h * scale;
262
-
}
263
-
264
235
JX.DOM.alterClass(img, 'loading', false);
265
-
JX.$V(w, h).setDim(img);
266
-
JX.Vector.getViewport().setDim(lightbox);
267
236
}
268
237
269
238
JX.Stratcom.listen(
270
239
'click',
271
240
['lightboxable', 'tag:a'],
272
241
loadLightBox
273
-
);
274
-
275
-
JX.Stratcom.listen(
276
-
'resize',
277
-
null,
278
-
resizeLightBox
279
242
);
280
243
281
244
JX.Stratcom.listen(