mahjong/модули/мж.иср.экран.настройки.js

var скрытьНастройки = new Уведомитель();
var hideSettings = скрытьНастройки;

function создатьЭкранНастроек()
{
        var html =
`
<p>Настройки</p>
<div class="uk-container">
    <ul class="uk-child-width-expand" uk-tab>
        <li class="uk-active"><a>Раскладка</a></li>
        <li><a>Тема</a></li>
    </ul>
    <ul class="uk-switcher uk-margin">
        <li>
            <div id="мж-настройки-раскладки" class="uk-panel uk-panel-scrollable uk-width-1-3">
                <ul class="uk-list">
                    <li>Раскладка-1</li>
                    <li>Раскладка-2</li>
                    <li>Раскладка-3</li>
                    <li>Раскладка-4</li>
                    <li>Раскладка-5</li>
                    <li>Раскладка-6</li>
                    <li>Раскладка-7</li>
                    <li>Раскладка-8</li>
                    <li>Раскладка-9</li>
                    <li>Раскладка-10</li>
                    <li>Раскладка-11</li>
                    <li>Раскладка-12</li>
                </ul>
            </div>
        </li>
        <li>
            <div class="uk-child-width-1-2@s" uk-grid>
    <div>
        <div class="uk-card uk-card-default uk-card-small uk-card-body">
            <h3 class="uk-card-title">Small</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-large uk-card-body">
            <h3 class="uk-card-title">Large</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
    </div>
</div>
        </li>
    </ul>
</div>

<button id="мж-настройки-скрыть" class="uk-close-large" type="button" uk-close></button>
`;
    var css =
`
#мж-настройки
{
    background-color: white;
}
#мж-настройки-скрыть
{
    position: absolute;
    left: 1.5em;
    bottom: 1.5em;
}
#мж-настройки-раскладки
{
    height: 50%;
}
`;
    
    var экран = добавитьЭкран("мж-настройки", html, css);
    экран.hidden = true;
    var скрыть = эл("мж-настройки-скрыть").onclick = function(){
        скрытьНастройки.уведомить();
    };
}

function показатьЭкранНастроек()
{
    var экран = эл("мж-настройки");
    экран.hidden = false;
    экран.classList.add("uk-animation-fade", "uk-animation-fast");
}

function скрытьЭкранНастроек()
{
    var экран = эл("мж-настройки");
    экран.className = "";
    экран.hidden = true;
}

при(показатьНастройки, показатьЭкранНастроек);
при(скрытьНастройки, скрытьЭкранНастроек);

при(муром.режимПросмотра, создатьЭкранНастроек);