jaculabilis/danbooru
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add note key nudge function

Browse Source 
- Notes must be clicked in order to engage the nudge function for that note
-- This status is indicated by a green border around the note
-- Clicking the note or another note will turn off nudging for that note
- Also prevent notes from being nudged outside of the image borders
This commit is contained in:
BrokenEagle
2020-02-01 00:05:51 +00:00
parent dd425830ca
commit 9fbeb5ec3a
3 changed files with 85 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
app/javascript/src/javascripts/notes.js
View File

@@ -95,15 +95,16 @@ let Note = {
var $this = $(this);
var $note_box_inner = $(e.currentTarget);
const note_id = $note_box_inner.data("id");
if (e.type === "mouseover") {
Note.Body.show($note_box_inner.data("id"));
Note.Body.show(note_id);
if (Note.editing) {
$this.resizable("enable");
$this.draggable("enable");
}
$note_box.addClass("hovering");
} else if (e.type === "mouseout") {
Note.Body.hide($note_box_inner.data("id"));
Note.Body.hide(note_id);
if (Note.editing) {
$this.resizable("disable");
$this.draggable("disable");
@@ -114,12 +115,76 @@ let Note = {
e.stopPropagation();
}
);
$note_box.on(
"click.danbooru",
function (event) {
const note_id = $note_box.data("id");
$(".note-box").removeClass("movable");
if (note_id === Note.move_id) {
Note.move_id = null;
} else {
Note.move_id = note_id;
$note_box.addClass("movable");
}
}
);
},
find: function(id) {
return $("#note-container div.note-box[data-id=" + id + "]");
},
key_nudge: function(event) {
if (!Note.move_id) {
return;
}
const $note_box = Note.Box.find(Note.move_id);
if ($note_box.length === 0) {
return;
}
let computed_style = window.getComputedStyle($note_box[0]);
let current_top = parseFloat(computed_style.top);
let current_left = parseFloat(computed_style.left);
switch (event.originalEvent.key) {
case "ArrowUp":
current_top--;
break;
case "ArrowDown":
current_top++;
break;
case "ArrowLeft":
current_left--;
break;
case "ArrowRight":
current_left++;
break;
default:
// do nothing
}
let position = Note.Box.get_min_max_position($note_box, current_top, current_left);
$note_box.css(position);
$note_box.find(".note-box-inner-border").addClass("unsaved");
event.preventDefault();
},
get_min_max_position: function($note_box, current_top = null, current_left = null, current_height = null, current_width = null) {
const computed_style = window.getComputedStyle($note_box[0]);
current_top = (current_top === null ? parseFloat(computed_style.top) : current_top);
current_left = (current_left === null ? parseFloat(computed_style.left) : current_left);
current_height = current_height || $note_box.height();
current_width = current_width || $note_box.width();
const $image = $("#image");
const image_height = $image.height();
const image_width = $image.width();
current_top = Math.min(Math.max(current_top, 0), image_height - current_height - 2);
current_left = Math.min(Math.max(current_left, 0), image_width - current_width - 2);
return {
top: current_top,
left: current_left,
};
},
show_highlighted: function($note_box) {
var note_id = $note_box.data("id");
@@ -697,9 +762,9 @@ let Note = {
dragging: false,
editing: false,
base_font_size: null,
move_id: null,
timeouts: [],
pending: {},
add: function(container, id, x, y, w, h, original_body, sanitized_body) {
var $note_box = Note.Box.create(id);
var $note_body = Note.Body.create(id);
@@ -798,6 +863,7 @@ let Note = {
this.initialize_shortcuts();
this.initialize_highlight();
$(document).on("hashchange.danbooru.note", this.initialize_highlight);
Utility.keydown("up down left right", "nudge_note", Note.Box.key_nudge);
},
initialize_shortcuts: function() {