mirror of
https://github.com/NodeBB/NodeBB.git
synced 2025-11-01 19:46:01 +01:00
feat: closes #13001, allow keyboard to change cover position
This commit is contained in:
@@ -107,10 +107,10 @@
|
||||
"nodebb-plugin-ntfy": "1.7.7",
|
||||
"nodebb-plugin-spam-be-gone": "2.3.0",
|
||||
"nodebb-rewards-essentials": "1.0.0",
|
||||
"nodebb-theme-harmony": "1.2.93",
|
||||
"nodebb-theme-harmony": "1.2.94",
|
||||
"nodebb-theme-lavender": "7.1.17",
|
||||
"nodebb-theme-peace": "2.2.32",
|
||||
"nodebb-theme-persona": "13.3.61",
|
||||
"nodebb-theme-peace": "2.2.33",
|
||||
"nodebb-theme-persona": "13.3.62",
|
||||
"nodebb-widget-essentials": "7.0.31",
|
||||
"nodemailer": "6.9.16",
|
||||
"nprogress": "0.2.0",
|
||||
|
||||
@@ -117,16 +117,21 @@ blockquote {
|
||||
.hover-visible {
|
||||
visibility: hidden;
|
||||
}
|
||||
.hover-opacity-75 {
|
||||
opacity: 0;
|
||||
&:focus { opacity: 0.75 }
|
||||
}
|
||||
.hover-opacity-100 {
|
||||
opacity: 0;
|
||||
&:focus {opacity: 1; }
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.hover-d-block {
|
||||
display: block!important;
|
||||
}
|
||||
.hover-d-flex {
|
||||
display: flex!important;
|
||||
}
|
||||
.hover-visible {
|
||||
visibility: visible;
|
||||
}
|
||||
.hover-d-block { display: block!important; }
|
||||
.hover-d-flex { display: flex!important; }
|
||||
.hover-visible { visibility: visible; }
|
||||
.hover-opacity-100 { opacity: 1; }
|
||||
.hover-opacity-75 { opacity: 0.75; }
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -79,6 +79,39 @@
|
||||
imageDimensions = getBackgroundImageDimensions($el);
|
||||
}
|
||||
|
||||
$(window).on('keydown.dbg', (e) => {
|
||||
var pos = $el.css('background-position').match(/(-?\d+).*?\s(-?\d+)/) || [];
|
||||
var xPos = parseInt(pos[1]) || 0;
|
||||
var yPos = parseInt(pos[2]) || 0;
|
||||
// We must convert percentage back to pixels
|
||||
if (options.units == 'percent') {
|
||||
xPos = Math.round(xPos / -200 * imageDimensions.width);
|
||||
yPos = Math.round(yPos / -200 * imageDimensions.height);
|
||||
}
|
||||
|
||||
var x = 0, y = 0;
|
||||
if (e.which === 37) { // left
|
||||
x = -5
|
||||
} else if (e.which === 39) { // right
|
||||
x = 5
|
||||
} else if (e.which === 38) { // up
|
||||
y = -5
|
||||
} else if (e.which === 40) { // down
|
||||
y = +5
|
||||
}
|
||||
if (options.units === 'percent') {
|
||||
xPos = options.axis === 'y' ? xPos : limit(-imageDimensions.width/2, 0, xPos+x, options.bound);
|
||||
yPos = options.axis === 'x' ? yPos : limit(-imageDimensions.height/2, 0, yPos+y, options.bound);
|
||||
|
||||
// Convert pixels to percentage
|
||||
$el.css('background-position', xPos / imageDimensions.width * -200 + '% ' + yPos / imageDimensions.height * -200 + '%');
|
||||
} else {
|
||||
xPos = options.axis === 'y' ? xPos : limit($el.innerWidth()-imageDimensions.width, 0, xPos+x, options.bound);
|
||||
yPos = options.axis === 'x' ? yPos : limit($el.innerHeight()-imageDimensions.height, 0, yPos+y, options.bound);
|
||||
}
|
||||
return [37, 38, 39, 40].includes(e.which) ? false : undefined;
|
||||
});
|
||||
|
||||
$el.on('mousedown.dbg touchstart.dbg', function(e) {
|
||||
if (e.target !== $el[0]) {
|
||||
return;
|
||||
@@ -145,7 +178,7 @@
|
||||
Plugin.prototype.disable = function() {
|
||||
var $el = $(this.element);
|
||||
$el.off('mousedown.dbg touchstart.dbg');
|
||||
$window.off('mousemove.dbg touchmove.dbg mouseup.dbg touchend.dbg mouseleave.dbg');
|
||||
$window.off('mousemove.dbg touchmove.dbg mouseup.dbg touchend.dbg mouseleave.dbg keydown.dbg');
|
||||
}
|
||||
|
||||
$.fn.backgroundDraggable = function(options) {
|
||||
|
||||
Reference in New Issue
Block a user