Skip to content
GitLab
Commit 17e6e2a1 authored by ZeMKI's avatar ZeMKI
Browse files

sorting javascript optimization 

* quality of life optimization for sorting.vue
parent 1627287b
Hide whitespace changes
Inline Side-by-side
public/js/app.js
View file @ 17e6e2a1
......@@ -2419,29 +2419,29 @@ $(document).keydown(function (event) {
onend: function onend(event) {
// self.drag = false;
var tokenContainer = document.querySelector('.token-container');
var dropzonePosition = $(tokenContainer).position(),
elementPosition = $(event.target).position(),
x = elementPosition.left - dropzonePosition.left,
y = elementPosition.top - dropzonePosition.top;
console.log(elementPosition);
var position = self.gettokenposition(self.getglobalcoordinates(event.target));
var idd = event.target.id;
var tokenContainerPosition = $(tokenContainer).position(),
elementNewPosition = $(event.target).position(),
x = elementNewPosition.left - tokenContainerPosition.left,
y = elementNewPosition.top - tokenContainerPosition.top;
console.log(elementNewPosition);
var position = self.getTokenCircleAndCenterDistance(self.getElementGlobalCoordinates(event.target));
var currentTokenId = event.target.id;
self.tokens[_.findIndex(self.tokens, function (o) {
if (o.id == idd) return o;
if (o.id == currentTokenId) return o;
})].valutation.distance = position.distance;
self.tokens[_.findIndex(self.tokens, function (o) {
if (o.id == idd) return o;
if (o.id == currentTokenId) return o;
})].position = {
x: x,
y: y
};
var s = x / window.innerWidth * 100;
var i = y / window.innerHeight * 100;
var percentagePositionx = x / window.innerWidth * 100;
var percentagePositiony = y / window.innerHeight * 100;
self.tokens[_.findIndex(self.tokens, function (o) {
if (o.id == idd) return o;
if (o.id == currentTokenId) return o;
})].percentagePosition = {
x: s,
y: i
x: percentagePositionx,
y: percentagePositiony
};
}
});
......@@ -2452,16 +2452,16 @@ $(document).keydown(function (event) {
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
target.style.webkitTransform = target.style.transform = 'translate(' + x + 'px, ' + y + 'px)';
var position = this.gettokenposition(this.getglobalcoordinates(event.target));
var idd = event.target.id;
var position = this.getTokenCircleAndCenterDistance(this.getElementGlobalCoordinates(event.target));
var currentTokenId = event.target.id;
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;
this.$forceUpdate();
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
},
getglobalcoordinates: function getglobalcoordinates(token) {
getElementGlobalCoordinates: function getElementGlobalCoordinates(token) {
var childrenPos = token.getBoundingClientRect(),
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;
......@@ -2469,7 +2469,7 @@ $(document).keydown(function (event) {
relativePos.y = childrenPos.y;
return relativePos;
},
gettokenposition: function gettokenposition(position) {
getTokenCircleAndCenterDistance: function getTokenCircleAndCenterDistance(position) {
var circle = this.circles;
var distance = 0; // MATH -- FIND IF A POINT BELONGS INSIDE A CIRCLE
// (x - center_x)^2 + (y - center_y)^2 < radius^2
......@@ -2521,26 +2521,29 @@ $(document).keydown(function (event) {
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() {
// 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_x = window.pageXOffset + document.querySelector('.round-sorting' + this.circles).getBoundingClientRect().left;
this.parentPos = document.querySelector('.sorting-container').getBoundingClientRect();
this.bounds.top = this.getglobalcoordinates(document.querySelector('.round-sorting' + this.circles)).top;
this.bounds.left = this.getglobalcoordinates(document.querySelector('.round-sorting' + this.circles)).left;
this.bounds.right = this.getglobalcoordinates(document.querySelector('.round-sorting' + this.circles)).right;
this.bounds.bottom = this.getglobalcoordinates(document.querySelector('.round-sorting' + this.circles)).bottom;
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;
this.bounds.top = this.getElementGlobalCoordinates(document.querySelector('.round-sorting' + this.circles)).top;
this.bounds.left = this.getElementGlobalCoordinates(document.querySelector('.round-sorting' + this.circles)).left;
this.bounds.right = this.getElementGlobalCoordinates(document.querySelector('.round-sorting' + this.circles)).right;
this.bounds.bottom = this.getElementGlobalCoordinates(document.querySelector('.round-sorting' + this.circles)).bottom;
this.calculateCircleCenter();
var self = this;
setTimeout(function () {
var d = document.getElementById('center');
d.style.position = "absolute";
d.style.backgroundColor = "red";
d.style.width = "3px";
d.style.height = "3px";
d.style.left = self.center_x + 'px';
d.style.top = self.center_y + 'px';
d.style.width = "4px";
d.style.height = "4px";
d.style.left = self.center_x - 2 + 'px';
d.style.top = self.center_y - 2 + 'px';
}, 100);
},
createtokens: function createtokens() {
......@@ -15711,7 +15714,7 @@ var render = function() {
domProps: {
innerHTML: _vm._s(
"Position Y" +
t.position.x +
t.position.y +
" " +
t.position.y
)
public/mix-manifest.json
View file @ 17e6e2a1
{
"/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_dompdf.css": "/css/app_dompdf.css?id=225174786ee9d00fe897",
"/js/manifest.js": "/js/manifest.js?id=844cdbfe9e6b6b56ae8f",
......
resources/js/components/sorting.vue
View file @ 17e6e2a1
......@@ -16,7 +16,7 @@
<div v-if="t.drag" class="tag is-dark " style="display:block;"
v-html="'Position X'+t.position.x + ' ' + t.position.x"></div>
<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;"
v-html="'P position X'+t.percentagePosition.x"></div>
<div v-if="t.drag && t.percentagePosition" class="tag is-dark " style="display:block;"
......@@ -111,31 +111,31 @@
// self.drag = false;
var tokenContainer = document.querySelector('.token-container');
var dropzonePosition = $(tokenContainer).position(),
elementPosition = $(event.target).position(),
x = elementPosition.left - dropzonePosition.left,
y = elementPosition.top - dropzonePosition.top;
console.log(elementPosition);
var tokenContainerPosition = $(tokenContainer).position(),
elementNewPosition = $(event.target).position(),
x = elementNewPosition.left - tokenContainerPosition.left,
y = elementNewPosition.top - tokenContainerPosition.top;
console.log(elementNewPosition);
let position = self.gettokenposition(self.getglobalcoordinates(event.target));
let idd = event.target.id;
let position = self.getTokenCircleAndCenterDistance(self.getElementGlobalCoordinates(event.target));
let currentTokenId = event.target.id;
self.tokens[_.findIndex(self.tokens, function (o) {
if (o.id == idd) return o;
if (o.id == currentTokenId) return o;
})].valutation.distance = position.distance;
self.tokens[_.findIndex(self.tokens, function (o) {
if (o.id == idd) return o;
if (o.id == currentTokenId) return o;
})].position = {x: x, y: y};
let s = (x / window.innerWidth) * 100;
let i = (y / window.innerHeight) * 100;
let percentagePositionx = (x / window.innerWidth) * 100;
let percentagePositiony = (y / window.innerHeight) * 100;
self.tokens[_.findIndex(self.tokens, function (o) {
if (o.id == idd) return o;
})].percentagePosition = {x: s, y: i};
if (o.id == currentTokenId) return o;
})].percentagePosition = {x: percentagePositionx, y: percentagePositiony};
}
......@@ -152,18 +152,18 @@
'translate(' + x + 'px, ' + y + 'px)';
let position = this.gettokenposition(this.getglobalcoordinates(event.target));
let idd = event.target.id;
let position = this.getTokenCircleAndCenterDistance(this.getElementGlobalCoordinates(event.target));
let currentTokenId = event.target.id;
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;
this.$forceUpdate();
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
},
getglobalcoordinates: function (token) {
getElementGlobalCoordinates: function (token) {
let childrenPos = token.getBoundingClientRect(),
relativePos = {};
......@@ -176,7 +176,7 @@
return relativePos;
},
gettokenposition: function (position) {
getTokenCircleAndCenterDistance: function (position) {
let circle = this.circles;
let distance = 0;
......@@ -185,7 +185,10 @@
// (x - center_x)^2 + (y - center_y)^2 < radius^2
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));
circle = i;
}
......@@ -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
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.parentPos = document.querySelector('.sorting-container').getBoundingClientRect();
this.bounds.top = this.getglobalcoordinates(document.querySelector('.round-sorting' + this.circles)).top;
this.bounds.left = this.getglobalcoordinates(document.querySelector('.round-sorting' + this.circles)).left;
this.bounds.right = this.getglobalcoordinates(document.querySelector('.round-sorting' + this.circles)).right;
this.bounds.bottom = this.getglobalcoordinates(document.querySelector('.round-sorting' + this.circles)).bottom;
this.bounds.top = this.getElementGlobalCoordinates(document.querySelector('.round-sorting' + this.circles)).top;
this.bounds.left = this.getElementGlobalCoordinates(document.querySelector('.round-sorting' + this.circles)).left;
this.bounds.right = this.getElementGlobalCoordinates(document.querySelector('.round-sorting' + this.circles)).right;
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.center_y = this.offsetbounds_y + (document.querySelector(".round-sorting" + this.circles).offsetHeight / 2);
this.calculateCircleCenter();
let self = this;
setTimeout(function(){
setTimeout(function () {
var d = document.getElementById('center');
d.style.position = "absolute";
d.style.backgroundColor = "red";
d.style.width = "3px";
d.style.height = "3px";
d.style.width = "4px";
d.style.height = "4px";
d.style.left = self.center_x + 'px';
d.style.top = self.center_y + 'px';
d.style.left = (self.center_x - 2) + 'px';
d.style.top = (self.center_y - 2)+ 'px';
}, 100);
},
createtokens: function () {
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