Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 26.05.2022, 13:29
Аспирант
Отправить личное сообщение для Volonter Посмотреть профиль Найти все сообщения от Volonter
 
Регистрация: 18.01.2011
Сообщений: 90

Скрыть\показать один слой по условию (код внутри)
Всем привет, вроде задача не сложная, а вот как красиво и элегантно оформить в коде - не соображу. Мне нужно, чтобы слой с контентом скрывался и отображался в зависимости от того, показаны или скрыты другие слои. По нажатию кнопок "создать" и "загрузить" посредством 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. Не могу понять, как вставлять код чтобы он запускался в теме? (зеленая стрелочка)
Ответить с цитированием
  #2 (permalink)  
Старый 26.05.2022, 14:02
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,085

Сообщение от Volonter
как вставлять код чтобы он запускался в теме?
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
[html run]
... минимальный код страницы с вашей проблемой
[/html]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
Ответить с цитированием
  #3 (permalink)  
Старый 26.05.2022, 14:24
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,085

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>
Ответить с цитированием
  #4 (permalink)  
Старый 26.05.2022, 14:26
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,085

Сообщение от Volonter
wrapper.style =
не делайте так, уничтожаются все стили по умолчанию или назначенные ранее.
меняйте конкретное свойство
wrapper.style.display  = 'none;'


а лучше совсем не трогать а менять class с данным правилом, типа
.show{display : ...}

Последний раз редактировалось рони, 26.05.2022 в 14:30.
Ответить с цитированием
  #5 (permalink)  
Старый 26.05.2022, 14:36
Аспирант
Отправить личное сообщение для Volonter Посмотреть профиль Найти все сообщения от Volonter
 
Регистрация: 18.01.2011
Сообщений: 90

рони,
Как всегда, супер! Спасибо огромное!
Цитата:
не делайте так, уничтожаются все стили по умолчанию или назначенные ранее.
меняйте конкретное свойство
про это знаю, просто по быстрому написал как есть, стили пока не так важно, главное основной результат увидеть.
Еще раз спасибо!
Цитата:
[html run]
понял, спасибо!

Последний раз редактировалось Volonter, 26.05.2022 в 14:39.
Ответить с цитированием
  #6 (permalink)  
Старый 26.05.2022, 14:40
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,085

Сообщение от Volonter
P.S. а как вы делаете чтобы код запускался?
читать пост #2
если никак))) то перейти по ссылке там и снова внимательно читать
Ответить с цитированием
  #7 (permalink)  
Старый 26.05.2022, 14:45
Аспирант
Отправить личное сообщение для Volonter Посмотреть профиль Найти все сообщения от Volonter
 
Регистрация: 18.01.2011
Сообщений: 90

Сообщение от рони Посмотреть сообщение
читать пост #2
если никак))) то перейти по ссылке там и снова внимательно читать
вы ответили раньше, чем я таки тот посто прочитал и исправил свой ответ))
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как найти исходный код AS3 внутри FLA файла? Gamestop Flash 7 12.01.2013 13:57
один setInterval внутри другого setInterval-а dadli Общие вопросы Javascript 5 20.03.2012 18:16
Как получит ссылку на элемент внутри которого запустили JS код? aRpi Events/DOM/Window 20 02.10.2011 13:36
Код внутри массива. Sundro Общие вопросы Javascript 9 21.07.2011 09:35
Не работает код внутри циклов DZHETIGAPA Events/DOM/Window 1 21.06.2011 01:03