26.05.2022, 13:29
|
|
Аспирант
|
|
Регистрация: 18.01.2011
Сообщений: 93
|
|
|
Скрыть\показать один слой по условию (код внутри)
Всем привет, вроде задача не сложная, а вот как красиво и элегантно оформить в коде - не соображу. Мне нужно, чтобы слой с контентом скрывался и отображался в зависимости от того, показаны или скрыты другие слои. По нажатию кнопок "создать" и "загрузить" посредством 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. Не могу понять, как вставлять код чтобы он запускался в теме? (зеленая стрелочка)
|
|
26.05.2022, 14:02
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
|
Сообщение от Volonter
|
|
как вставлять код чтобы он запускался в теме?
|
Пожалуйста, отформатируйте свой код!
Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
[html run]
... минимальный код страницы с вашей проблемой
[/html]
О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
|
26.05.2022, 14:24
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
Volonter,
<!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() {
let display = 'block';
let command = this.dataset.command;
let dropDiv = document.querySelectorAll('[data-drop]');
dropDiv.forEach(function(dd) {
let toggle = dd.dataset.drop == command && !dd.classList.contains('dropshow');
dd.classList.toggle('dropshow', toggle);
if (dd.classList.contains('dropshow')) display = 'none';
})
Object.assign(wrapper.style, {
display
})
}
</script>
</body>
</html>
|
|
26.05.2022, 14:26
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
|
Сообщение от Volonter
|
|
wrapper.style =
|
не делайте так, уничтожаются все стили по умолчанию или назначенные ранее.
меняйте конкретное свойство
wrapper.style.display = 'none;'
а лучше совсем не трогать а менять class с данным правилом, типа
.show{display : ...}
Последний раз редактировалось рони, 26.05.2022 в 14:30.
|
|
26.05.2022, 14:36
|
|
Аспирант
|
|
Регистрация: 18.01.2011
Сообщений: 93
|
|
рони,
Как всегда, супер! Спасибо огромное!
|
Цитата:
|
не делайте так, уничтожаются все стили по умолчанию или назначенные ранее.
меняйте конкретное свойство
|
про это знаю, просто по быстрому написал как есть, стили пока не так важно, главное основной результат увидеть.
Еще раз спасибо!
понял, спасибо!
Последний раз редактировалось Volonter, 26.05.2022 в 14:39.
|
|
26.05.2022, 14:40
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
|
Сообщение от Volonter
|
|
P.S. а как вы делаете чтобы код запускался?
|
читать пост #2
если никак))) то перейти по ссылке там и снова внимательно читать |
|
26.05.2022, 14:45
|
|
Аспирант
|
|
Регистрация: 18.01.2011
Сообщений: 93
|
|
Сообщение от рони
|
читать пост #2
если никак))) то перейти по ссылке там и снова внимательно читать
|
вы ответили раньше, чем я таки тот посто прочитал и исправил свой ответ)) |
|
|
|
