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 { ...@@ -37910,7 +37910,7 @@ a {
.sorting-container { .sorting-container {
position: fixed; position: fixed;
width: 100%; width: 100%;
height: 100vh; height: 100%;
overflow: visible; overflow: visible;
} }
   
...@@ -37918,7 +37918,7 @@ a { ...@@ -37918,7 +37918,7 @@ a {
height: 100vh; height: 100vh;
-webkit-transform: translate(50%, 50%); -webkit-transform: translate(50%, 50%);
transform: translate(50%, 50%); transform: translate(50%, 50%);
top: 40%; top: 60%;
left: 50%; left: 50%;
} }
   
......
...@@ -2285,6 +2285,25 @@ __webpack_require__.r(__webpack_exports__); ...@@ -2285,6 +2285,25 @@ __webpack_require__.r(__webpack_exports__);
// //
// //
// //
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
   
$(document).keydown(function (event) { $(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')) { 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) { ...@@ -2312,11 +2331,19 @@ $(document).keydown(function (event) {
outmost: 0, outmost: 0,
center_x: 0, center_x: 0,
center_y: 0, center_y: 0,
export: false export: false,
debug: false
}; };
}, },
created: function created() { created: function created() {
var _this = this;
var self = this; var self = this;
window.addEventListener('keydown', function (e) {
if (e.keyCode == 66 && e.ctrlKey) {
_this.debugMode();
}
});
self.createtokens(); self.createtokens();
setTimeout(function () { setTimeout(function () {
self.createcircles(); self.createcircles();
...@@ -2415,6 +2442,9 @@ $(document).keydown(function (event) { ...@@ -2415,6 +2442,9 @@ $(document).keydown(function (event) {
distance: distance distance: distance
}; };
}, },
debugMode: function debugMode() {
this.debug = !this.debug;
},
createcircles: function createcircles() { createcircles: function createcircles() {
var previouselement = null; var previouselement = null;
var maincontainer = document.querySelector('.circle_container'); var maincontainer = document.querySelector('.circle_container');
...@@ -2449,7 +2479,7 @@ $(document).keydown(function (event) { ...@@ -2449,7 +2479,7 @@ $(document).keydown(function (event) {
}, },
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 + 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.getglobalcoordinates(document.querySelector('.round-sorting' + this.circles)).top;
...@@ -2458,6 +2488,13 @@ $(document).keydown(function (event) { ...@@ -2458,6 +2488,13 @@ $(document).keydown(function (event) {
this.bounds.bottom = this.getglobalcoordinates(document.querySelector('.round-sorting' + this.circles)).bottom; 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_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.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() { createtokens: function createtokens() {
this.tokens = this.availabletokens; this.tokens = this.availabletokens;
...@@ -13316,7 +13353,8 @@ var render = function() { ...@@ -13316,7 +13353,8 @@ var render = function() {
position: "absolute", position: "absolute",
margin: "0 auto", margin: "0 auto",
width: "100%" width: "100%"
} },
attrs: { id: "sorting-instructions" }
}, },
[ [
_vm._v( _vm._v(
...@@ -13328,6 +13366,7 @@ var render = function() { ...@@ -13328,6 +13366,7 @@ var render = function() {
), ),
_vm._v(" "), _vm._v(" "),
_c("sorting", { _c("sorting", {
ref: "sortingContainer",
attrs: { attrs: {
circles: _vm.circles, circles: _vm.circles,
availabletokens: _vm.study.available_tokens, availabletokens: _vm.study.available_tokens,
...@@ -15532,7 +15571,7 @@ var render = function() { ...@@ -15532,7 +15571,7 @@ var render = function() {
[ [
_c( _c(
"div", "div",
{ staticClass: "token-container" }, { staticClass: "token-container", attrs: { id: "token-container" } },
_vm._l(_vm.tokens, function(t) { _vm._l(_vm.tokens, function(t) {
return _c( return _c(
"div", "div",
...@@ -15564,6 +15603,96 @@ var render = function() { ...@@ -15564,6 +15603,96 @@ var render = function() {
}, },
domProps: { innerHTML: _vm._s(t.name) } 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() : _vm._e()
] ]
) )
...@@ -15571,7 +15700,12 @@ var render = function() { ...@@ -15571,7 +15700,12 @@ var render = function() {
0 0
), ),
_vm._v(" "), _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 */ " ...@@ -16531,7 +16665,8 @@ Vue.component('userpart', __webpack_require__(/*! ./components/userpart.vue */ "
Vue.config.devtools = true; Vue.config.devtools = true;
Vue.config.debug = true; Vue.config.debug = true;
Vue.config.silent = false; 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({ Vue.mixin({
data: function data() { data: function data() {
{ {
"/js/app.js": "/js/app.js?id=d1561504565d69cbb712", "/js/app.js": "/js/app.js?id=c99df190c917bd60704f",
"/css/app.css": "/css/app.css?id=8356d3fd742b14b4af1c", "/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",
"/js/vendor.js": "/js/vendor.js?id=e803732b0abd596f50d8" "/js/vendor.js": "/js/vendor.js?id=e803732b0abd596f50d8"
......
...@@ -39,6 +39,7 @@ Vue.component('v-select', vSelect) ...@@ -39,6 +39,7 @@ Vue.component('v-select', vSelect)
Vue.config.silent = false; Vue.config.silent = false;
Vue.use(Buefy) Vue.use(Buefy)
var bus = new Vue();
// Assign globally functions for getCookies and setCookies in JS // Assign globally functions for getCookies and setCookies in JS
......
...@@ -50,11 +50,11 @@ ...@@ -50,11 +50,11 @@
</div> </div>
</section> </section>
<section class="section" style="padding: 5px !important;" v-if="interview.currentpage == 1"> <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}} {{sortingdetails}}
</div> </div>
<sorting :circles="circles" :availabletokens="study.available_tokens" consult="false"></sorting> <sorting :circles="circles" :availabletokens="study.available_tokens" consult="false" ref="sortingContainer"></sorting>
</section> </section>
...@@ -128,6 +128,8 @@ ...@@ -128,6 +128,8 @@
} }
}); });
// record animation // record animation
$(document).ready(function () { $(document).ready(function () {
......
This diff is collapsed.
...@@ -40,14 +40,14 @@ a{ ...@@ -40,14 +40,14 @@ a{
.sorting-container{ .sorting-container{
position:fixed; position:fixed;
width: 100%; width: 100%;
height: 100vh; height: 100%;
overflow: visible; overflow: visible;
} }
.circle_container{ .circle_container{
height: 100vh; height: 100vh;
transform: translate(50%,50%); transform: translate(50%,50%);
top:40%; top:60%;
left:50%; 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