Commit 57f17843 authored by ZeMKI's avatar ZeMKI
Browse files

new sorting debug mode + sorting optimization

* press ctrl+b to enable debug mode while sorting
* sorting optimization
parent 9cc53d7c
......@@ -37910,7 +37910,7 @@ a {
.sorting-container {
position: fixed;
width: 100%;
height: 100vh;
height: 100%;
overflow: visible;
}
 
......@@ -37918,7 +37918,7 @@ a {
height: 100vh;
-webkit-transform: translate(50%, 50%);
transform: translate(50%, 50%);
top: 40%;
top: 60%;
left: 50%;
}
 
......
......@@ -2285,6 +2285,25 @@ __webpack_require__.r(__webpack_exports__);
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
 
$(document).keydown(function (event) {
if (event.ctrlKey == true && (event.which == '61' || event.which == '107' || event.which == '173' || event.which == '109' || event.which == '187' || event.which == '189')) {
......@@ -2312,11 +2331,19 @@ $(document).keydown(function (event) {
outmost: 0,
center_x: 0,
center_y: 0,
export: false
export: false,
debug: false
};
},
created: function created() {
var _this = this;
var self = this;
window.addEventListener('keydown', function (e) {
if (e.keyCode == 66 && e.ctrlKey) {
_this.debugMode();
}
});
self.createtokens();
setTimeout(function () {
self.createcircles();
......@@ -2415,6 +2442,9 @@ $(document).keydown(function (event) {
distance: distance
};
},
debugMode: function debugMode() {
this.debug = !this.debug;
},
createcircles: function createcircles() {
var previouselement = null;
var maincontainer = document.querySelector('.circle_container');
......@@ -2449,7 +2479,7 @@ $(document).keydown(function (event) {
},
getbounds: function getbounds() {
// get the distance from the circle to the window bounds
this.offsetbounds_y = window.pageYOffset - document.querySelector('#navbarBasicExample').offsetHeight + 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.parentPos = document.querySelector('.sorting-container').getBoundingClientRect();
this.bounds.top = this.getglobalcoordinates(document.querySelector('.round-sorting' + this.circles)).top;
......@@ -2458,6 +2488,13 @@ $(document).keydown(function (event) {
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;
var d = document.getElementById('center');
d.style.position = "absolute";
d.style.backgroundColor = "red";
d.style.width = "3px";
d.style.height = "3px";
d.style.left = this.center_x + 'px';
d.style.top = this.center_y + 'px';
},
createtokens: function createtokens() {
this.tokens = this.availabletokens;
......@@ -13316,7 +13353,8 @@ var render = function() {
position: "absolute",
margin: "0 auto",
width: "100%"
}
},
attrs: { id: "sorting-instructions" }
},
[
_vm._v(
......@@ -13328,6 +13366,7 @@ var render = function() {
),
_vm._v(" "),
_c("sorting", {
ref: "sortingContainer",
attrs: {
circles: _vm.circles,
availabletokens: _vm.study.available_tokens,
......@@ -15532,7 +15571,7 @@ var render = function() {
[
_c(
"div",
{ staticClass: "token-container" },
{ staticClass: "token-container", attrs: { id: "token-container" } },
_vm._l(_vm.tokens, function(t) {
return _c(
"div",
......@@ -15564,6 +15603,96 @@ var render = function() {
},
domProps: { innerHTML: _vm._s(t.name) }
})
: _vm._e(),
_c("br"),
_vm._v(" "),
_vm.debug
? _c(
"div",
{
staticStyle: { display: "block", position: "relative" }
},
[
t.drag
? _c("div", {
staticClass: "tag is-dark ",
staticStyle: { display: "block" },
domProps: {
innerHTML: _vm._s(
"Circle " + t.valutation.circle
)
}
})
: _vm._e(),
_vm._v(" "),
t.drag
? _c("div", {
staticClass: "tag is-dark",
staticStyle: { display: "block" },
domProps: {
innerHTML: _vm._s(
"Distance from center " +
t.valutation.distance
)
}
})
: _vm._e(),
_vm._v(" "),
t.drag
? _c("div", {
staticClass: "tag is-dark ",
staticStyle: { display: "block" },
domProps: {
innerHTML: _vm._s(
"Position X" +
t.position.x +
" " +
t.position.x
)
}
})
: _vm._e(),
_vm._v(" "),
t.drag
? _c("div", {
staticClass: "tag is-dark ",
staticStyle: { display: "block" },
domProps: {
innerHTML: _vm._s(
"Position Y" +
t.position.x +
" " +
t.position.y
)
}
})
: _vm._e(),
_vm._v(" "),
t.drag && t.percentagePosition
? _c("div", {
staticClass: "tag is-dark ",
staticStyle: { display: "block" },
domProps: {
innerHTML: _vm._s(
"P position X" + t.percentagePosition.x
)
}
})
: _vm._e(),
_vm._v(" "),
t.drag && t.percentagePosition
? _c("div", {
staticClass: "tag is-dark ",
staticStyle: { display: "block" },
domProps: {
innerHTML: _vm._s(
"P position Y " + t.percentagePosition.y
)
}
})
: _vm._e()
]
)
: _vm._e()
]
)
......@@ -15571,7 +15700,12 @@ var render = function() {
0
),
_vm._v(" "),
_c("div", { staticClass: "circle_container is-unselectable" })
_c("div", { attrs: { id: "center" } }),
_vm._v(" "),
_c("div", {
staticClass: "circle_container is-unselectable",
staticStyle: { "margin-top": "-30px" }
})
]
)
])
......@@ -16531,7 +16665,8 @@ Vue.component('userpart', __webpack_require__(/*! ./components/userpart.vue */ "
Vue.config.devtools = true;
Vue.config.debug = true;
Vue.config.silent = false;
Vue.use(buefy__WEBPACK_IMPORTED_MODULE_0___default.a); // Assign globally functions for getCookies and setCookies in JS
Vue.use(buefy__WEBPACK_IMPORTED_MODULE_0___default.a);
var bus = new Vue(); // Assign globally functions for getCookies and setCookies in JS
 
Vue.mixin({
data: function data() {
{
"/js/app.js": "/js/app.js?id=d1561504565d69cbb712",
"/css/app.css": "/css/app.css?id=8356d3fd742b14b4af1c",
"/js/app.js": "/js/app.js?id=c99df190c917bd60704f",
"/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",
"/js/vendor.js": "/js/vendor.js?id=e803732b0abd596f50d8"
......
......@@ -39,6 +39,7 @@ Vue.component('v-select', vSelect)
Vue.config.silent = false;
Vue.use(Buefy)
var bus = new Vue();
// Assign globally functions for getCookies and setCookies in JS
......
......@@ -50,11 +50,11 @@
</div>
</section>
<section class="section" style="padding: 5px !important;" v-if="interview.currentpage == 1">
<div class="has-text-centered" style="position: absolute;margin: 0 auto;width: 100%;">
<div class="has-text-centered" style="position: absolute;margin: 0 auto;width: 100%;" id="sorting-instructions">
{{sortingdetails}}
</div>
<sorting :circles="circles" :availabletokens="study.available_tokens" consult="false"></sorting>
<sorting :circles="circles" :availabletokens="study.available_tokens" consult="false" ref="sortingContainer"></sorting>
</section>
......@@ -128,6 +128,8 @@
}
});
// record animation
$(document).ready(function () {
......
<template>
<section >
<div class="sorting-container" id="sortingc" style="scroll-behavior: unset;">
<div class="token-container" >
<div class="token sortingstart" v-for="t in tokens" :id="t.id" >
<img :src="t.image_path" style="width: 50px;height: 50px;position: absolute;z-index:10000;top:0;left:0;"/>
<span v-if="t.drag" class="tag is-dark " v-html="t.name" style="top:45px;position: relative;width: auto;height:17px;border-radius: 0;display:inline-block;left:-6.5px;"></span></div></div>
<div class="circle_container is-unselectable"></div>
</div>
<section>
<div class="sorting-container" id="sortingc" style="scroll-behavior: unset;">
<div class="token-container" id="token-container">
<div class="token sortingstart" v-for="t in tokens" :id="t.id">
<img :src="t.image_path"
style="width: 50px;height: 50px;position: absolute;z-index:10000;top:0;left:0;"/>
<span v-if="t.drag" class="tag is-dark " v-html="t.name"
style="top:45px;position: relative;width: auto;height:17px;border-radius: 0;display:inline-block;left:-6.5px;"></span><br>
<div style="display:block;position:relative;" v-if="debug">
<div v-if="t.drag" class="tag is-dark " style="display:block;" v-html="'Circle '+t.valutation.circle"></div>
<div v-if="t.drag" class="tag is-dark" style="display:block;"
v-html="'Distance from center '+t.valutation.distance"></div>
<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>
<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;"
v-html="'P position Y '+t.percentagePosition.y"
></div>
</div>
</div>
</div>
<div id="center"></div>
<div class="circle_container is-unselectable" style="margin-top:-30px;"></div>
</div>
</section>
</template>
</template>
<script>
<script>
import interact from 'interactjs'
$(document).keydown(function(event) {
if (event.ctrlKey==true && (event.which == '61' || event.which == '107' || event.which == '173' || event.which == '109' || event.which == '187' || event.which == '189' ) ) {
event.preventDefault();
}
// 107 Num Key +
// 109 Num Key -
// 173 Min Key hyphen/underscor Hey
// 61 Plus key +/= key
});
$(document).keydown(function (event) {
if (event.ctrlKey == true && (event.which == '61' || event.which == '107' || event.which == '173' || event.which == '109' || event.which == '187' || event.which == '189')) {
event.preventDefault();
}
// 107 Num Key +
// 109 Num Key -
// 173 Min Key hyphen/underscor Hey
// 61 Plus key +/= key
});
export default {
props: ['availabletokens', 'circles', 'ntokens', 'consult'],
data() {
return {
sortableOptions: {
chosenClass: 'is-selected'
},
tokens: [],
drag: false,
parentPos: "",
tokenvalues: "",
maxvalue: 100,
minvalue: 0,
bounds: {},
outmost: 0,
center_x: 0,
center_y: 0,
export: false,
debug:false
}
}
, created() {
let self = this;
window.addEventListener('keydown', (e) => {
if (e.keyCode == 66 && e.ctrlKey) {
this.debugMode();
}
});
self.createtokens();
export default {
props: ['availabletokens','circles','ntokens','consult'],
data() {
return {
sortableOptions: {
chosenClass: 'is-selected'
},
tokens:[],
drag: false,
parentPos: "",
tokenvalues: "",
maxvalue: 100,
minvalue: 0,
bounds: {},
outmost: 0,
center_x: 0,
center_y: 0,
export: false
}
}
,created(){
let self = this;
self.createtokens();
setTimeout(function(){
self.createcircles();
self.getbounds();
}, 50);
this.draggable();
},
methods:{
draggable: function(){
var parent =document.querySelector('.token-container');
var all =document.querySelector('.round-sorting'+this.outmost);
let self = this;
interact('.token',{
context: parent
})
.draggable({
inertia: false,
restrict: {
restriction: '.sorting-container',
endOnly: true,
elementRect: { top: 0, left: 1, bottom: 1, right: 1 }
},
autoScroll: false,
onmove: this.dragMoveListener,
onend: function (event) {
// self.drag = false;
var tokenContainer =document.querySelector('.token-container');
setTimeout(function () {
self.createcircles();
self.getbounds();
var dropzonePosition = $(tokenContainer).position(),
elementPosition = $(event.target).position(),
x = elementPosition.left - dropzonePosition.left,
y = elementPosition.top - dropzonePosition.top;
console.log(elementPosition);
let position = self.gettokenposition(self.getglobalcoordinates(event.target));
let idd = event.target.id;
}, 50);
this.draggable();
self.tokens[_.findIndex(self.tokens,function(o){
if(o.id == idd) return o;
})].valutation.distance = position.distance;
},
methods: {
draggable: function () {
var parent = document.querySelector('.token-container');
var all = document.querySelector('.round-sorting' + this.outmost);
let self = this;
interact('.token', {
context: parent
})
.draggable({
inertia: false,
restrict: {
restriction: '.sorting-container',
endOnly: true,
elementRect: {top: 0, left: 1, bottom: 1, right: 1}
},
autoScroll: false,
onmove: this.dragMoveListener,
onend: function (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);
let position = self.gettokenposition(self.getglobalcoordinates(event.target));
let idd = event.target.id;
self.tokens[_.findIndex(self.tokens, function (o) {
if (o.id == idd) return o;
})].valutation.distance = position.distance;
self.tokens[_.findIndex(self.tokens, function (o) {
if (o.id == idd) return o;
})].position = {x: x, y: y};
let s = (x / window.innerWidth) * 100;
let i = (y / window.innerHeight) * 100;
self.tokens[_.findIndex(self.tokens, function (o) {
if (o.id == idd) return o;
})].percentagePosition = {x: s, y: i};
}
});
},
dragMoveListener: function (event) {
this.drag = true;
var target = event.target,
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)';
let position = this.gettokenposition(this.getglobalcoordinates(event.target));
let idd = event.target.id;
this.tokens[_.findIndex(this.tokens, function (o) {
if (o.id == idd) return o;
})].valutation.circle = this.circles - position.circle;
this.$forceUpdate();
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
},
getglobalcoordinates: function (token) {
let 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;
relativePos.x = childrenPos.x;
relativePos.y = childrenPos.y;
return relativePos;
},
gettokenposition: function (position) {
let circle = this.circles;
let distance = 0;
// MATH -- FIND IF A POINT BELONGS INSIDE A CIRCLE
// (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)) {
distance = Math.hypot((position.top + 25) - (this.center_y), (position.left + 25) - (this.center_x));
circle = i;
}
}
return {circle: circle, distance: distance};
self.tokens[_.findIndex(self.tokens,function(o){
if(o.id == idd) return o;
})].position = {x: x, y: y};
},
debugMode: function(){
this.debug = !this.debug;
},
createcircles: function () {
let s = (x/window.innerWidth)*100;
let i = (y/window.innerHeight)*100;
let previouselement = null;
let maincontainer = document.querySelector('.circle_container');
for (var i = 1; i <= this.circles; i++) {
self.tokens[_.findIndex(self.tokens,function(o){
if(o.id == idd) return o;
})].percentagePosition = {x: s, y: i};
if (previouselement == null) {
var circle = document.createElement("div");
circle.className = 'round-sorting' + i;
previouselement = circle;
} else {
let current = document.createElement("div");
current.className = "round-sorting" + i;
current.appendChild(previouselement);
previouselement = current;
}
});
},
dragMoveListener: function(event){
this.drag = true;
var target = event.target,
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)';
let position = this.gettokenposition(this.getglobalcoordinates(event.target));
let idd = event.target.id;
this.tokens[_.findIndex(this.tokens,function(o){
if(o.id == idd) return o;
})].valutation.circle = this.circles - position.circle;
this.$forceUpdate();
target.setAttribute('data-x', x);</