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 () {
......
This diff is collapsed.
......@@ -40,14 +40,14 @@ a{
.sorting-container{
position:fixed;
width: 100%;
height: 100vh;
height: 100%;
overflow: visible;
}
.circle_container{
height: 100vh;
transform: translate(50%,50%);
top:40%;
top:60%;
left:50%;
}
......
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