electricdusk/pics
1
0
Fork 0
forked from Public/pics
Code Issues Pull Requests Projects Releases Wiki Activity

WIP: finally implement drag events.

Browse Source
This commit is contained in:
Aaron van Geffen 2020-11-23 12:35:42 +01:00
parent d4cc72304e
commit 9d95df81fe
2 changed files with 21 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
public/js/crop_editor.js
View File

@ -71,6 +71,7 @@ class CropEditor {
this.image_container.appendChild(this.crop_boundary); this.image_container.appendChild(this.crop_boundary);
this.original_image = document.createElement("img"); this.original_image = document.createElement("img");
this.original_image.draggable = false;
this.original_image.id = "original_image"; this.original_image.id = "original_image";
this.original_image.src = this.opt.original_image_src; this.original_image.src = this.opt.original_image_src;
this.image_container.appendChild(this.original_image); this.image_container.appendChild(this.original_image);
@ -134,6 +135,7 @@ class CropEditor {
this.container.style.display = ''; this.container.style.display = '';
this.setInputValues(); this.setInputValues();
this.positionBoundary(); this.positionBoundary();
this.addEvents();
} }
save() { save() {
@ -175,23 +177,33 @@ class CropEditor {
} }
addEvents(event) { addEvents(event) {
let drag_target = document.getElementById(opt.drag_target); let drag_target = this.image_container;
drag_target.addEventListener('dragstart', this.dragStart); drag_target.addEventListener('mousedown', this.dragStart);
drag_target.addEventListener('drag', this.drag); drag_target.addEventListener('mousemove', this.drag);
drag_target.addEventListener('dragend', this.dragEnd); drag_target.addEventListener('mouseup', this.dragEnd);
drag_target.addEventListener('mouseout', this.dragEnd);
this.original_image.addEventListener('mousedown', event => {return false});
} }
dragStart(event) { dragStart(event) {
console.log(event); this.isDragging = true;
event.preventDefault(); console.log(`Start @ x=${event.pageX}, y=${event.pageY}, which=${event.which}`);
} }
dragEnd(event) { dragEnd(event) {
console.log(event); if (!this.isDragging) {
return;
}
this.isDragging = false;
console.log(`End @ x=${event.pageX}, y=${event.pageY}, which=${event.which}`);
} }
drag(event) { drag(event) {
console.log(event); if (!this.isDragging) {
return;
}
console.log(`Drag @ x=${event.pageX}, y=${event.pageY}, which=${event.which}`);
} }
toggleCropButton() { toggleCropButton() {

2
templates/EditAssetForm.php
View File

@ -200,7 +200,7 @@ class EditAssetForm extends SubTemplate
original_image_src: "', $this->asset->getUrl(), '", original_image_src: "', $this->asset->getUrl(), '",
editor_container_parent_id: "asset_form", editor_container_parent_id: "asset_form",
thumbnail_select_id: "thumbnail_src", thumbnail_select_id: "thumbnail_src",
drag_target: "drag_target", drag_target: ".crop_image_container",
asset_id: ', $this->asset->getId(), ', asset_id: ', $this->asset->getId(), ',
after_save: function(data) { after_save: function(data) {
// Update thumbnail // Update thumbnail