<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorator="layouts/layout">
<style>
.editors-wrapper{
display: flex;
flex-direction: row;
position: absolute;
top:0px;
height: 100%;
width: 100%;
padding-top: 1.813rem;
z-index: 1;
}
.doc, .xls{
height: 100%;
width: 100%;
position: relative;
}
#between-doc-xls{
cursor: pointer;
background-color: #f1f1f1;
display: flex;
flex-direction: row;
align-items: center;
justify-self: center;
}
</style>
<div layout:fragment="content">
<div class="editors-wrapper" id="editors-wrapper">
<div class="doc" id="doc-wrapper">
<div id="doc-placeholder" style="height:100%;"></div>
</div>
<div id="between-doc-xls">
<span class="badge bg-secondary btn">
<i class="fas fa-caret-left"></i>
<i class="fas fa-caret-right"></i>
</span>
</div>
<div class="xls" id="xls-wrapper">
<div id="xls-placeholder" style="height: 100%;"></div>
</div>
</div>
<script th:inline="javascript">
var startpos, diffpos = 0;
var range = 50;
var isEnable = false;
function onMouseDown(e){
startpos = event.clientX + diffpos;
isEnable=true;
return false;
}
function onMouseUp(e){
isEnable=false;
return false;
}
function onMouseMove(e){
if(isEnable){
pos = event.clientX;
diffpos = startpos-pos;
var w = window.innerWidth/2;
if(diffpos > -(w-range) && diffpos < (w-range)){
$('#doc-wrapper').width(w-diffpos);
$('#xls-wrapper').width(w-20+diffpos);
}
}
}
document.getElementById("between-doc-xls").onmousedown = onMouseDown;
document.onmouseup = onMouseUp;
document.onmousemove = onMouseMove;
</script>
</div>
</html>
References