artin/miniPaint
1
0
Fork 0
mirror of https://github.com/viliusle/miniPaint.git synced 2026-02-06 13:26:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

dragable popup dialog

Browse Source
This commit is contained in:
viliusle 2020-12-02 00:39:20 +02:00
parent 5a872d7f37
commit fcf53cf71a
2 changed files with 47 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/css/popup.css
View File

@ -38,7 +38,7 @@
background-color: rgba(255, 255, 255, 0.3);
background-color: var(--header-background-color);
z-index: 0;
/*cursor:move;*/
cursor:move;
}
#popup #dialog_content {
overflow-y: auto;

46
src/js/libs/popup.js
View File

@ -89,6 +89,8 @@ class Dialog_class {
this.layer_active_small = document.createElement("canvas");
this.layer_active_small_ctx = this.layer_active_small.getContext("2d");
this.caller = null;
this.resize_clicked = {x: null, y: null}
this.element_offset = {x: null, y: null}
this.set_events();
}
@ -114,6 +116,11 @@ class Dialog_class {
this.className = config.className || '';
this.comment = config.comment || '';
//reset position
var target = document.querySelector('#popup');
target.style.top = null;
target.style.left = null;
this.show_action();
}
@ -155,6 +162,45 @@ class Dialog_class {
_this.hide(false);
}
}, false);
//register events
document.addEventListener('mousedown', function (event) {
if(event.target != document.querySelector('#popup h2'))
return;
event.preventDefault();
_this.resize_clicked.x = event.pageX;
_this.resize_clicked.y = event.pageY;s
var target = document.querySelector('#popup');
_this.element_offset.x = target.offsetTop;
_this.element_offset.y = target.offsetLeft;
}, false);
document.addEventListener('mousemove', function (event) {
event.preventDefault();
if(_this.resize_clicked.x != null){
var dx = _this.resize_clicked.x - event.pageX;
var dy = _this.resize_clicked.y - event.pageY;
var target = document.querySelector('#popup');
target.style.top = (_this.element_offset.x - dy) + "px";
target.style.left = (_this.element_offset.y - dx) + "px";
}
}, false);
document.addEventListener('mouseup', function (event) {
if(event.target != document.querySelector('#popup h2'))
return;
event.preventDefault();
_this.resize_clicked.x = null;
_this.resize_clicked.y = null;
}, false);
window.addEventListener('resize', function (event) {
var target = document.querySelector('#popup');
target.style.top = null;
target.style.left = null;
}, false);
}
onChangeEvent(e) {