me/mime-chat
Watch
1
0
Fork
You've already forked mime-chat
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

applying compatability changes from new-website to this

Browse source
This commit is contained in:
Andrew Gundersen 2022-02-11 11:18:58 -06:00
commit ead81883b2
13 changed files with 232 additions and 190 deletions
Download patch file Download diff file Expand all files Collapse all files

43
src/render/components/control/draggify.js
View file

@ -1,5 +1,5 @@
const saveLocation = "input_item_position";
const defaultPosition = { x: 15, y: window.innerHeight - 300 };
const defaultPosition = { x: 15, y: 400 };
//---Dragabble Helper Funcs--------------------------------------
@ -33,9 +33,10 @@ function calcPosition (elementPosition, elementLength, percent, short, win) {
return elementPosition
}
function draggify(elementId, margin) {
function draggify(elementId, parentId, margin) {
let element;
let parent;
/* only compatible with elements having equal width and height */
let elementLength;
@ -52,14 +53,11 @@ function draggify(elementId, margin) {
let xShort;
let yShort;
// Keep track of window size;
let winW = window.innerWidth;
let winH = window.innerHeight;
//---Reposition Anime-----------------------------------------------
// Move element to target smoothly.
const repositionAnime = (xChange, yChange) => {
const xStep = xChange / 6000;
const yStep = yChange / 6000;
@ -79,9 +77,8 @@ function draggify(elementId, margin) {
const onMouseMove = (e) => {
e.preventDefault();
const inputItemRect = element.getBoundingClientRect();
elementX.value = inputItemRect.left + e.movementX;
elementY.value = inputItemRect.top + e.movementY;
elementX.value = element.offsetLeft + e.movementX;
elementY.value = element.offsetTop + e.movementY;
}
// Add an event listener for dragging.
@ -102,6 +99,9 @@ function draggify(elementId, margin) {
let x = 0; // vector change
let y = 0;
const winW = parent.clientWidth;
const winH = parent.clientHeight;
if (elementX.value < 0) {
x = (elementX.value - margin)*-1
}
@ -138,12 +138,8 @@ function draggify(elementId, margin) {
// Update position of targetEl on windowResize.
const onWindowResize = (_e) => {
// Update window dimensions.
winW = window.innerWidth;
winH = window.innerHeight;
elementX.value = calcPosition(elementX.value, elementLength, percentX, xShort, winW);
elementY.value = calcPosition(elementY.value, elementLength, percentY, yShort, winH);
elementX.value = calcPosition(elementX.value, elementLength, percentX, xShort, parent.clientWidth);
elementY.value = calcPosition(elementY.value, elementLength, percentY, yShort, parent.clientHeight);
savePosition();
}
@ -160,27 +156,28 @@ function draggify(elementId, margin) {
Vue.onMounted(() => {
element = document.getElementById(elementId);
parent = document.getElementById(parentId);
elementLength = element.offsetWidth;
// Initialize the positional references.
percentX = elementX.value / window.innerWidth;
percentY = elementY.value / window.innerHeight;
percentX = elementX.value / parent.clientWidth;
percentY = elementY.value / parent.clientHeight;
xShort = calcSideProximity(elementX.value, elementLength, window.innerWidth);
yShort = calcSideProximity(elementX.value, elementLength, window.innerHeight);
xShort = calcSideProximity(elementX.value, elementLength, parent.clientWidth);
yShort = calcSideProximity(elementX.value, elementLength, parent.clientHeight);
// Then, we can listen for window resize (and mousedown).
element.addEventListener("mousedown", onMouseDown);
window.addEventListener('resize', onWindowResize)
parent.addEventListener('resize', onWindowResize)
});
// remove event listeners on component dismount.
Vue.onUnmounted(() => {
element.removeEventListener('mousedown', onMouseDown);
window.removeEventListener('resize', onWindowResize)
window.removeEventListener('mouseup', onMouseUp)
window.removeEventListener('mousemove', onMouseMove);
parent.removeEventListener('resize', onWindowResize)
parent.removeEventListener('mouseup', onMouseUp)
parent.removeEventListener('mousemove', onMouseMove);
});
// Try loading initPosition, otherwise set default values