Всем привет, вроде задача не сложная, а вот как красиво и элегантно оформить в коде - не соображу. Мне нужно, чтобы слой с контентом скрывался и отображался в зависимости от того, показаны или скрыты другие слои. По нажатию кнопок "создать" и "загрузить" посредством classList.toggle отображаются нужные слои, один меняет другой если нажата другая кнопка, а слой с контентом должен быть спрятан, если эти слои показаны. И отобразится, как только они убраны. Там в коде все понятно, в принципе.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TEST</title>
<link rel="shortcut icon" href="./images/favicon.ico" type="image/x-icon">
</head>
<style>
html,
body {
margin: 0;
padding: 0;
}
*,
*:before,
*:after {
-webkit-border-sizing: border-box;
-moz-border-sizing: border-box;
box-sizing: border-box;
}
body.vsfm_disable-scroll {
position: relative;
overflow: hidden;
font-family: "Helvetica Neue", "Segoe UI", helvetica, verdana, sans-serif !important;
}
.vsfm_overlay {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
background: rgba(0, 0, 0, .5);
}
.vsfm_modal {
display: flex;
flex-direction: column;
width: clamp(300px, 90%, 1780px);
height: clamp(300px, 70%, 800px);
margin: 0 auto;
background: #fff;
box-shadow: 0 16px 16px -10px rgba(34, 47, 62, .25), 0 0 40px 1px rgba(34, 47, 62, .25);
position: relative;
}
/* TOOLBAR */
.vsfm_modaltoolbar {
background: #FAFAFA;
padding: 6px 20px;
min-height: 48px;
display: flex;
justify-content: space-between;
align-items: center;
}
.vsfm_modaltoolbar-one,
.vsfm_modaltoolbar-second {
display: flex;
justify-content: space-between;
align-items: center;
}
.vsfm_control-btn {
display: flex;
align-items: center;
border-radius: 4px;
border-width: 1px;
border-style: solid;
border-color: transparent;
background: transparent;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding: 7px 18px 8px 18px;
font-family: "Helvetica Neue", "Segoe UI", helvetica, verdana, sans-serif !important;
color: #333;
font-size: .9rem;
cursor: pointer;
text-align: center;
box-sizing: border-box;
}
.vsfm_control-btn:hover {
background: #e4e3e3;
}
.vsfm_control-btn i {
font-size: 22px;
padding-right: 8px;
}
.vsfm_modal-dropdown-container {
display: block;
width: 100%;
max-height: 0;
overflow-y: auto;
}
.vsfm_modal-dropdown-container {
scrollbar-width: thin;
scrollbar-color: #ccc rgba(0, 0, 0, .1);
}
.vsfm_modal-dropdown-container::-webkit-scrollbar {
height: 12px;
width: 12px;
}
.vsfm_modal-dropdown-container::-webkit-scrollbar-track {
background: rgba(0, 0, 0, .1);
}
.vsfm_modal-dropdown-container::-webkit-scrollbar-thumb {
background-color: #ccc;
}
.dropshow {
width: 100%;
max-height: 100%;
padding: 10px;
}
.create-wrapper {
width: 100%;
background: #fff;
min-height: 120px;
display: flex;
flex-wrap: wrap;
flex-direction: row;
flex-grow: 1;
justify-content: center;
align-items: center;
padding: 0px;
}
/* WRAPPER */
#vsfm_wrapper {
flex-grow: 1;
position: relative;
width: 100%;
height: clamp(0px, 80%, 700px);
margin-top: 0px;
padding: 10px 20px;
box-sizing: border-box;
overflow-y: auto;
background: rgb(248, 206, 206);
}
#vsfm_wrapper {
scrollbar-width: thin;
scrollbar-color: #ccc rgba(0, 0, 0, .1);
}
#vsfm_wrapper::-webkit-scrollbar {
height: 12px;
width: 12px;
}
#vsfm_wrapper::-webkit-scrollbar-track {
background: rgba(0, 0, 0, .1);
}
#vsfm_wrapper::-webkit-scrollbar-thumb {
background-color: #ccc;
}
.dropzone {
align-items: center;
background: rgb(241, 244, 248);
border: 2px dashed rgb(182, 203, 247);
box-sizing: border-box;
display: flex;
flex-wrap: wrap;
flex-direction: row;
flex-grow: 1;
justify-content: center;
min-height: 120px;
padding: 10px;
margin-bottom: 20px;
}
</style>
<body class="vsfm_disable-scroll">
<div class="vsfm_overlay">
<div class="vsfm_modal">
<div class="vsfm_modaltoolbar">
<div class="vsfm_modaltoolbar-one">
<button class="vsfm_control-btn" data-command="create">
<i class="icon-create_new_folder"></i>
<span class="vsfm_control-btn-text">Создать</span>
</button>
<button class="vsfm_control-btn" data-command="upload">
<i class="icon-file_upload"></i>
<span class="vsfm_control-btn-text">Загрузить</span>
</button>
</div>
<div class="vsfm_modaltoolbar-second">
<button class="vsfm_control-btn" data-command="close" disabled>
<i class="icon-clear"></i>
<span class="vsfm_control-btn-text">Закрыть</span>
</button>
</div>
</div>
<div class="vsfm_modal-dropdown-container" data-drop="upload">
<div id="dropZone" class="dropzone"></div>
</div>
<div class="vsfm_modal-dropdown-container" data-drop="create">
<div class="create-wrapper">
<input type="text" placeholder="placeholder">
</div>
</div>
<div id="vsfm_wrapper">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima odit enim earum laudantium quam quidem ipsam deserunt perferendis esse quaerat, maxime fuga aliquid quis veniam eveniet recusandae exercitationem omnis magnam fugiat corporis
laboriosam impedit odio mollitia? Ipsa, explicabo! Eaque, quaerat hic quibusdam architecto commodi neque rerum nam aperiam labore iure inventore velit numquam impedit illum mollitia dignissimos temporibus quam recusandae dolorum explicabo
optio perspiciatis alias nostrum officiis? Facere fugit repudiandae tempora saepe voluptatum quam illo in, consectetur, laboriosam reprehenderit alias neque ad eum sunt repellat sit a quasi possimus natus quis cupiditate voluptates
dolorem vel? Suscipit pariatur vero mollitia.</p>
</div>
</div>
</div>
<script>
let button = document.querySelectorAll('[data-command]')
let wrapper = document.getElementById('vsfm_wrapper')
button.forEach(function(b) {
if (b.disabled) return
b.addEventListener('click', command, false)
})
function command() {
wrapper.style = 'display:none;'
let command = this.dataset.command;
let dropDiv = document.querySelectorAll('[data-drop]')
dropDiv.forEach(function(dd) {
if (dd.matches('[data-drop="' + command + '"]') && !dd.classList.contains('dropshow')) {
dd.classList.toggle('dropshow')
} else {
dd.classList.remove('dropshow')
}
})
}
</script>
</body>
</html>
P.S. Не могу понять, как вставлять код чтобы он запускался в теме? (зеленая стрелочка)