Commit fb8bb122 authored by Kent Nielsen's avatar Kent Nielsen
Browse files

Cleaning up

parent ce57fe2c
Pipeline #51383 passed with stage
in 41 seconds
......@@ -53,61 +53,42 @@ export default {
});
},
removeBlock(side, row, col) {
this[side][row].blocks.splice(col, 1);
if (this[side][row].blocks.length === 0)
this[side].splice(row, 1);
},
resizeHorizontalMouseMove(event){
const deltaX = this.mouseDragPos.x - event.x;
this.mouseDragPos.x = event.x;
const row = this.horizontalResizeObject.row;
const col = this.horizontalResizeObject.col;
//const gaps = this.layout[this.horizontalResizeObject.row].blocks.length -1
// Find index of select col in html document
let colIndex = col;
for (let i = 0; i < row; i++) {
const element = this.layout[i];
colIndex += element.blocks.length;
}
const leftCol = document.getElementsByClassName("col")[colIndex - 1];
const rigthCol = document.getElementsByClassName("col")[colIndex];
// Total flex allowed from layout
const totalFlex = this.layout[row].blocks[col -1].width + this.layout[row].blocks[col].width;
const contentWidth = leftCol.clientWidth + rigthCol.clientWidth + 40;
const totalFlex = this.layout[row].blocks[col -1].width + this.layout[row].blocks[col].width
const newLeftWidth = leftCol.clientWidth - deltaX
const newRightWidth = rigthCol.clientWidth + deltaX
var newFlexRight = contentWidth/newRightWidth;
var newFlexLeft = (newLeftWidth * parseFloat(newFlexRight))/newRightWidth;
const preAdjustedTotalFlex = newFlexRight+newFlexLeft
newFlexRight = (newFlexRight/preAdjustedTotalFlex)*totalFlex
newFlexLeft = (newFlexLeft/preAdjustedTotalFlex)*totalFlex
this.layout[row].blocks[col -1].width = newFlexLeft;
this.layout[row].blocks[col].width = newFlexRight
// Resized size
const newLeftWidth = leftCol.clientWidth - deltaX;
const newRightWidth = rigthCol.clientWidth + deltaX;
// Calculating new flexGrow value
// This is not normalized to 100"%"
let newFlexRight = contentWidth/newRightWidth;
let newFlexLeft = (newLeftWidth * parseFloat(newFlexRight))/newRightWidth;
// Normalizing flewGrow to 100"%"
const preAdjustedTotalFlex = newFlexRight+newFlexLeft;
newFlexRight = (newFlexRight/preAdjustedTotalFlex)*totalFlex;
newFlexLeft = (newFlexLeft/preAdjustedTotalFlex)*totalFlex;
/*
rigthCol.style.flexGrow = parseFloat(newFlexRight)
leftCol.style.flexGrow = parseFloat(newFlexLeft)
*/
/*
// Left and Right box to be resized
let leftCol = document.getElementById("left-col");
let rightCol = document.getElementById("right-col");
const contentWidth = leftCol.clientWidth + rightCol.clientWidth + 40;
var newRightWidth = rightCol.clientWidth + deltaX
var newLeftWidth = leftCol.clientWidth - deltaX
var flexright = contentWidth/newRightWidth;
var flexLeft = (newLeftWidth * parseFloat(flexright))/newRightWidth;
rightCol.style.flexGrow = parseFloat(flexright);
leftCol.style.flexGrow = parseFloat(flexLeft);
*/
// Storing new style.
this.layout[row].blocks[col -1].width = newFlexLeft;
this.layout[row].blocks[col].width = newFlexRight;
},
resizeVerticalMouseMove(event){
......@@ -129,18 +110,18 @@ export default {
resizeVertical(event, index){
if(event.offsetY > this.layout[index].height){
this.mouseDragPos.y = event.y
this.mouseDragPos.y = event.y;
this.verticalResizeObject.index = index;
document.addEventListener("mousemove", this.resizeVerticalMouseMove, false)
document.addEventListener("mouseup", this.eventRemover, false)
document.addEventListener("mousemove", this.resizeVerticalMouseMove, false);
document.addEventListener("mouseup", this.eventRemover, false);
document.getElementsByTagName("html")[0].classList.add("noselect");
}
},
eventRemover(){
document.removeEventListener("mousemove", this.resizeHorizontalMouseMove, false);
document.removeEventListener("mousemove", this.resizeVerticalMouseMove, false)
document.removeEventListener("mouseup", this.eventRemover, false)
document.removeEventListener("mousemove", this.resizeVerticalMouseMove, false);
document.removeEventListener("mouseup", this.eventRemover, false);
document.getElementsByTagName("html")[0].classList.remove("noselect");
}
},
......@@ -169,6 +150,7 @@ export default {
position: relative;
}
// Must be outside ".row" or else after affect children
.row::after{
content: " ";
background-color: rgb(0, 0, 0);
......@@ -183,12 +165,12 @@ export default {
flex-basis: 0; // a basis of 0px. very important!
background-color: $light-green-theme-color;
border-radius: 4px;
//overflow: hidden;
border: 2px solid $theme-color;
position: relative;
&:not(:first-child) {
margin-left: $gap / 2;
&::before{
content: " ";
background-color: rgb(0, 0, 0);
......@@ -199,13 +181,12 @@ export default {
cursor: w-resize;
}
}
&:not(:last-child) {
margin-right: $gap / 2;
}
}
.add-block {
width: 50px;
height: 50px;
......
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