Commit 17e6e2a1 authored by ZeMKI's avatar ZeMKI
Browse files

sorting javascript optimization

* quality of life optimization for sorting.vue
parent 1627287b
...@@ -2419,29 +2419,29 @@ $(document).keydown(function (event) { ...@@ -2419,29 +2419,29 @@ $(document).keydown(function (event) {
onend: function onend(event) { onend: function onend(event) {
// self.drag = false; // self.drag = false;
var tokenContainer = document.querySelector('.token-container'); var tokenContainer = document.querySelector('.token-container');
var dropzonePosition = $(tokenContainer).position(), var tokenContainerPosition = $(tokenContainer).position(),
elementPosition = $(event.target).position(), elementNewPosition = $(event.target).position(),
x = elementPosition.left - dropzonePosition.left, x = elementNewPosition.left - tokenContainerPosition.left,
y = elementPosition.top - dropzonePosition.top; y = elementNewPosition.top - tokenContainerPosition.top;
console.log(elementPosition); console.log(elementNewPosition);
var position = self.gettokenposition(self.getglobalcoordinates(event.target)); var position = self.getTokenCircleAndCenterDistance(self.getElementGlobalCoordinates(event.target));
var idd = event.target.id; var currentTokenId = event.target.id;
self.tokens[_.findIndex(self.tokens, function (o) { self.tokens[_.findIndex(self.tokens, function (o) {
if (o.id == idd) return o; if (o.id == currentTokenId) return o;
})].valutation.distance = position.distance; })].valutation.distance = position.distance;
self.tokens[_.findIndex(self.tokens, function (o) { self.tokens[_.findIndex(self.tokens, function (o) {
if (o.id == idd) return o; if (o.id == currentTokenId) return o;
})].position = { })].position = {
x: x, x: x,
y: y y: y
}; };
var s = x / window.innerWidth * 100; var percentagePositionx = x / window.innerWidth * 100;
var i = y / window.innerHeight * 100; var percentagePositiony = y / window.innerHeight * 100;
self.tokens[_.findIndex(self.tokens, function (o) { self.tokens[_.findIndex(self.tokens, function (o) {
if (o.id == idd) return o; if (o.id == currentTokenId) return o;
})].percentagePosition = { })].percentagePosition = {
x: s, x: percentagePositionx,
y: i y: percentagePositiony
}; };
} }
}); });
...@@ -2452,16 +2452,16 @@ $(document).keydown(function (event) { ...@@ -2452,16 +2452,16 @@ $(document).keydown(function (event) {
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx, x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy; y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
target.style.webkitTransform = target.style.transform = 'translate(' + x + 'px, ' + y + 'px)'; target.style.webkitTransform = target.style.transform = 'translate(' + x + 'px, ' + y + 'px)';
var position = this.gettokenposition(this.getglobalcoordinates(event.target)); var position = this.getTokenCircleAndCenterDistance(this.getElementGlobalCoordinates(event.target));
var idd = event.target.id; var currentTokenId = event.target.id;
this.tokens[_.findIndex(this.tokens, function (o) { this.tokens[_.findIndex(this.tokens, function (o) {
if (o.id == idd) return o; if (o.id == currentTokenId) return o;
})].valutation.circle = this.circles - position.circle; })].valutation.circle = this.circles - position.circle;
this.$forceUpdate(); this.$forceUpdate();
target.setAttribute('data-x', x); target.setAttribute('data-x', x);
target.setAttribute('data-y', y); target.setAttribute('data-y', y);
}, },
getglobalcoordinates: function getglobalcoordinates(token) { getElementGlobalCoordinates: function getElementGlobalCoordinates(token) {
var childrenPos = token.getBoundingClientRect(), var childrenPos = token.getBoundingClientRect(),
relativePos = {}; relativePos = {};
relativePos.top = childrenPos.top - this.parentPos.top, relativePos.right = childrenPos.right - this.parentPos.right, relativePos.bottom = childrenPos.bottom - this.parentPos.bottom, relativePos.left = childrenPos.left - this.parentPos.left; relativePos.top = childrenPos.top - this.parentPos.top, relativePos.right = childrenPos.right - this.parentPos.right, relativePos.bottom = childrenPos.bottom - this.parentPos.bottom, relativePos.left = childrenPos.left - this.parentPos.left;
...@@ -2469,7 +2469,7 @@ $(document).keydown(function (event) { ...@@ -2469,7 +2469,7 @@ $(document).keydown(function (event) {
relativePos.y = childrenPos.y; relativePos.y = childrenPos.y;
return relativePos; return relativePos;
}, },
gettokenposition: function gettokenposition(position) { getTokenCircleAndCenterDistance: function getTokenCircleAndCenterDistance(position) {
var circle = this.circles; var circle = this.circles;
var distance = 0; // MATH -- FIND IF A POINT BELONGS INSIDE A CIRCLE var distance = 0; // MATH -- FIND IF A POINT BELONGS INSIDE A CIRCLE
// (x - center_x)^2 + (y - center_y)^2 < radius^2 // (x - center_x)^2 + (y - center_y)^2 < radius^2
...@@ -2521,26 +2521,29 @@ $(document).keydown(function (event) { ...@@ -2521,26 +2521,29 @@ $(document).keydown(function (event) {
document.querySelector(".round-sorting" + i.toString()).style.height = (i / this.circles * 80).toString() + "vh"; document.querySelector(".round-sorting" + i.toString()).style.height = (i / this.circles * 80).toString() + "vh";
} }
}, },
calculateCircleCenter: function calculateCircleCenter() {
this.center_x = this.offsetbounds_x + document.querySelector(".round-sorting" + this.circles).offsetWidth / 2;
this.center_y = this.offsetbounds_y + document.querySelector(".round-sorting" + this.circles).offsetHeight / 2;
},
getbounds: function getbounds() { getbounds: function getbounds() {
// get the distance from the circle to the window bounds // get the distance from the circle to the window bounds
this.offsetbounds_y = window.pageYOffset - document.querySelector('#navbarBasicExample').offsetHeight + (window.pageYOffset - document.querySelector('#token-container').offsetHeight + 30) + document.querySelector('.round-sorting' + this.circles).getBoundingClientRect().top; this.offsetbounds_y = window.pageYOffset - document.querySelector('#navbarBasicExample').offsetHeight + (window.pageYOffset - document.querySelector('#token-container').offsetHeight + 30) + document.querySelector('.round-sorting' + this.circles).getBoundingClientRect().top;
this.offsetbounds_x = window.pageXOffset + document.querySelector('.round-sorting' + this.circles).getBoundingClientRect().left; this.offsetbounds_x = window.pageXOffset + document.querySelector('.round-sorting' + this.circles).getBoundingClientRect().left;
this.parentPos = document.querySelector('.sorting-container').getBoundingClientRect(); this.parentPos = document.querySelector('.sorting-container').getBoundingClientRect();
this.bounds.top = this.getglobalcoordinates(document.querySelector('.round-sorting' + this.circles)).top; this.bounds.top = this.getElementGlobalCoordinates(document.querySelector('.round-sorting' + this.circles)).top;
this.bounds.left = this.getglobalcoordinates(document.querySelector('.round-sorting' + this.circles)).left; this.bounds.left = this.getElementGlobalCoordinates(document.querySelector('.round-sorting' + this.circles)).left;
this.bounds.right = this.getglobalcoordinates(document.querySelector('.round-sorting' + this.circles)).right; this.bounds.right = this.getElementGlobalCoordinates(document.querySelector('.round-sorting' + this.circles)).right;
this.bounds.bottom = this.getglobalcoordinates(document.querySelector('.round-sorting' + this.circles)).bottom; this.bounds.bottom = this.getElementGlobalCoordinates(document.querySelector('.round-sorting' + this.circles)).bottom;
this.center_x = this.offsetbounds_x + document.querySelector(".round-sorting" + this.circles).offsetWidth / 2; this.calculateCircleCenter();
this.center_y = this.offsetbounds_y + document.querySelector(".round-sorting" + this.circles).offsetHeight / 2;
var self = this; var self = this;
setTimeout(function () { setTimeout(function () {
var d = document.getElementById('center'); var d = document.getElementById('center');
d.style.position = "absolute"; d.style.position = "absolute";
d.style.backgroundColor = "red"; d.style.backgroundColor = "red";
d.style.width = "3px"; d.style.width = "4px";
d.style.height = "3px"; d.style.height = "4px";
d.style.left = self.center_x + 'px'; d.style.left = self.center_x - 2 + 'px';
d.style.top = self.center_y + 'px'; d.style.top = self.center_y - 2 + 'px';
}, 100); }, 100);
}, },
createtokens: function createtokens() { createtokens: function createtokens() {
...@@ -15711,7 +15714,7 @@ var render = function() { ...@@ -15711,7 +15714,7 @@ var render = function() {
domProps: { domProps: {
innerHTML: _vm._s( innerHTML: _vm._s(
"Position Y" + "Position Y" +
t.position.x + t.position.y +
" " + " " +
t.position.y t.position.y
) )
{ {
"/js/app.js": "/js/app.js?id=b43fc7edbcbb73a1cc77", "/js/app.js": "/js/app.js?id=ae086bf49dbc84368c71",
"/css/app.css": "/css/app.css?id=33e8c8db759d1aed6c23", "/css/app.css": "/css/app.css?id=33e8c8db759d1aed6c23",
"/css/app_dompdf.css": "/css/app_dompdf.css?id=225174786ee9d00fe897", "/css/app_dompdf.css": "/css/app_dompdf.css?id=225174786ee9d00fe897",
"/js/manifest.js": "/js/manifest.js?id=844cdbfe9e6b6b56ae8f", "/js/manifest.js": "/js/manifest.js?id=844cdbfe9e6b6b56ae8f",
......
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
<div v-if="t.drag" class="tag is-dark " style="display:block;" <div v-if="t.drag" class="tag is-dark " style="display:block;"
v-html="'Position X'+t.position.x + ' ' + t.position.x"></div> v-html="'Position X'+t.position.x + ' ' + t.position.x"></div>
<div v-if="t.drag" class="tag is-dark " style="display:block;" <div v-if="t.drag" class="tag is-dark " style="display:block;"
v-html="'Position Y'+t.position.x + ' ' + t.position.y"></div> v-html="'Position Y'+t.position.y + ' ' + t.position.y"></div>
<div v-if="t.drag && t.percentagePosition" class="tag is-dark " style="display:block;" <div v-if="t.drag && t.percentagePosition" class="tag is-dark " style="display:block;"
v-html="'P position X'+t.percentagePosition.x"></div> v-html="'P position X'+t.percentagePosition.x"></div>
<div v-if="t.drag && t.percentagePosition" class="tag is-dark " style="display:block;" <div v-if="t.drag && t.percentagePosition" class="tag is-dark " style="display:block;"
...@@ -111,31 +111,31 @@ ...@@ -111,31 +111,31 @@
// self.drag = false; // self.drag = false;
var tokenContainer = document.querySelector('.token-container'); var tokenContainer = document.querySelector('.token-container');
var dropzonePosition = $(tokenContainer).position(), var tokenContainerPosition = $(tokenContainer).position(),
elementPosition = $(event.target).position(), elementNewPosition = $(event.target).position(),
x = elementPosition.left - dropzonePosition.left, x = elementNewPosition.left - tokenContainerPosition.left,
y = elementPosition.top - dropzonePosition.top; y = elementNewPosition.top - tokenContainerPosition.top;
console.log(elementPosition); console.log(elementNewPosition);
let position = self.gettokenposition(self.getglobalcoordinates(event.target)); let position = self.getTokenCircleAndCenterDistance(self.getElementGlobalCoordinates(event.target));
let idd = event.target.id; let currentTokenId = event.target.id;
self.tokens[_.findIndex(self.tokens, function (o) { self.tokens[_.findIndex(self.tokens, function (o) {
if (o.id == idd) return o; if (o.id == currentTokenId) return o;
})].valutation.distance = position.distance; })].valutation.distance = position.distance;
self.tokens[_.findIndex(self.tokens, function (o) { self.tokens[_.findIndex(self.tokens, function (o) {
if (o.id == idd) return o; if (o.id == currentTokenId) return o;
})].position = {x: x, y: y}; })].position = {x: x, y: y};
let s = (x / window.innerWidth) * 100; let percentagePositionx = (x / window.innerWidth) * 100;
let i = (y / window.innerHeight) * 100; let percentagePositiony = (y / window.innerHeight) * 100;
self.tokens[_.findIndex(self.tokens, function (o) { self.tokens[_.findIndex(self.tokens, function (o) {
if (o.id == idd) return o; if (o.id == currentTokenId) return o;
})].percentagePosition = {x: s, y: i}; })].percentagePosition = {x: percentagePositionx, y: percentagePositiony};
} }
...@@ -152,18 +152,18 @@ ...@@ -152,18 +152,18 @@
'translate(' + x + 'px, ' + y + 'px)'; 'translate(' + x + 'px, ' + y + 'px)';
let position = this.gettokenposition(this.getglobalcoordinates(event.target)); let position = this.getTokenCircleAndCenterDistance(this.getElementGlobalCoordinates(event.target));
let idd = event.target.id; let currentTokenId = event.target.id;
this.tokens[_.findIndex(this.tokens, function (o) { this.tokens[_.findIndex(this.tokens, function (o) {
if (o.id == idd) return o; if (o.id == currentTokenId) return o;
})].valutation.circle = this.circles - position.circle; })].valutation.circle = this.circles - position.circle;
this.$forceUpdate(); this.$forceUpdate();
target.setAttribute('data-x', x); target.setAttribute('data-x', x);
target.setAttribute('data-y', y); target.setAttribute('data-y', y);
}, },
getglobalcoordinates: function (token) { getElementGlobalCoordinates: function (token) {
let childrenPos = token.getBoundingClientRect(), let childrenPos = token.getBoundingClientRect(),
relativePos = {}; relativePos = {};
...@@ -176,7 +176,7 @@ ...@@ -176,7 +176,7 @@
return relativePos; return relativePos;
}, },
gettokenposition: function (position) { getTokenCircleAndCenterDistance: function (position) {
let circle = this.circles; let circle = this.circles;
let distance = 0; let distance = 0;
...@@ -185,7 +185,10 @@ ...@@ -185,7 +185,10 @@
// (x - center_x)^2 + (y - center_y)^2 < radius^2 // (x - center_x)^2 + (y - center_y)^2 < radius^2
for (var i = 0; i < this.circles; i++) { for (var i = 0; i < this.circles; i++) {
if ((Math.pow(((position.left + 25) - this.center_x), 2) + Math.pow(((position.top + 25) - this.center_y), 2)) < Math.pow((this.center_x - this.offsetbounds_x) * ((this.circles - i) / this.circles), 2)) { if ((Math.pow(((position.left + 25) - this.center_x), 2) +
Math.pow(((position.top + 25) - this.center_y), 2)) <
Math.pow((this.center_x - this.offsetbounds_x) * ((this.circles - i) / this.circles), 2))
{
distance = Math.hypot((position.top + 25) - (this.center_y), (position.left + 25) - (this.center_x)); distance = Math.hypot((position.top + 25) - (this.center_y), (position.left + 25) - (this.center_x));
circle = i; circle = i;
} }
...@@ -232,37 +235,38 @@ ...@@ -232,37 +235,38 @@
} }
}, },
getbounds: function () { calculateCircleCenter: function () {
this.center_x = this.offsetbounds_x + (document.querySelector(".round-sorting" + this.circles).offsetWidth / 2);
this.center_y = this.offsetbounds_y + (document.querySelector(".round-sorting" + this.circles).offsetHeight / 2);
}, getbounds: function () {
// get the distance from the circle to the window bounds // get the distance from the circle to the window bounds
this.offsetbounds_y = (window.pageYOffset - document.querySelector('#navbarBasicExample').offsetHeight) + (window.pageYOffset - document.querySelector('#token-container').offsetHeight + 30) + document.querySelector('.round-sorting' + this.circles).getBoundingClientRect().top; this.offsetbounds_y = (window.pageYOffset - document.querySelector('#navbarBasicExample').offsetHeight) + (window.pageYOffset - document.querySelector('#token-container').offsetHeight + 30) + document.querySelector('.round-sorting' + this.circles).getBoundingClientRect().top;
this.offsetbounds_x = window.pageXOffset + document.querySelector('.round-sorting' + this.circles).getBoundingClientRect().left; this.offsetbounds_x = window.pageXOffset + document.querySelector('.round-sorting' + this.circles).getBoundingClientRect().left;
this.parentPos = document.querySelector('.sorting-container').getBoundingClientRect(); this.parentPos = document.querySelector('.sorting-container').getBoundingClientRect();
this.bounds.top = this.getglobalcoordinates(document.querySelector('.round-sorting' + this.circles)).top; this.bounds.top = this.getElementGlobalCoordinates(document.querySelector('.round-sorting' + this.circles)).top;
this.bounds.left = this.getglobalcoordinates(document.querySelector('.round-sorting' + this.circles)).left; this.bounds.left = this.getElementGlobalCoordinates(document.querySelector('.round-sorting' + this.circles)).left;
this.bounds.right = this.getglobalcoordinates(document.querySelector('.round-sorting' + this.circles)).right; this.bounds.right = this.getElementGlobalCoordinates(document.querySelector('.round-sorting' + this.circles)).right;
this.bounds.bottom = this.getglobalcoordinates(document.querySelector('.round-sorting' + this.circles)).bottom; this.bounds.bottom = this.getElementGlobalCoordinates(document.querySelector('.round-sorting' + this.circles)).bottom;
this.center_x = this.offsetbounds_x + (document.querySelector(".round-sorting" + this.circles).offsetWidth / 2); this.calculateCircleCenter();
this.center_y = this.offsetbounds_y + (document.querySelector(".round-sorting" + this.circles).offsetHeight / 2);
let self = this; let self = this;
setTimeout(function(){ setTimeout(function () {
var d = document.getElementById('center'); var d = document.getElementById('center');
d.style.position = "absolute"; d.style.position = "absolute";
d.style.backgroundColor = "red"; d.style.backgroundColor = "red";
d.style.width = "3px"; d.style.width = "4px";
d.style.height = "3px"; d.style.height = "4px";
d.style.left = self.center_x + 'px'; d.style.left = (self.center_x - 2) + 'px';
d.style.top = self.center_y + 'px'; d.style.top = (self.center_y - 2)+ 'px';
}, 100); }, 100);
}, },
createtokens: function () { createtokens: function () {
this.tokens = this.availabletokens; this.tokens = this.availabletokens;
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment