22

✏️ Editing: dropdown.html

.dropdown .dropdown-toggle {
        background-color: #fff;
        border: none;
        outline: none;
        color: #858585;
        font-size: 13px;
        height: 32px;
        line-height: 1;
        transition: all 0.4s;
        font-family: 'Noto Sans', sans-serif;
        margin-right: 22px;
    }

.dropdown .dropdown-toggle:hover {
        background-color: #e7e7e7;
    }

.dropdown .dropdown-menu-content {
        background-color: #ffffff;
        box-shadow: 0 2px 14px 0 rgba(0, 0, 0, 0.24);
        border-width: 0px;
        border-radius: 0;
        padding: 11px 0 0;
        overflow-y: scroll;
        max-height: 365px;
        margin: 0;
    }

.dropdown .glyphicon {
        margin-left: 6px;
        top: 2px;
        transition: 0.3s all;
    }

.dropdown li {
        height: 35px;
        text-align: left;
        padding-left: 24px;
        font-size: 13px;
        color: #4d4d4e;
        line-height: 2.85;
        font-family: 'Noto Sans', sans-serif;
    }
    .dropdown li:last-child {
        margin-bottom: 14px;
    }

.dropdown li.active {
        font-weight: bold;
    }

.dropdown li:focus, .dropdown li:hover {
        color: #4d4d4e;
        background-color: rgba(56, 171, 99, 0.11);
    }

.dropdown .dropdown-menu-content > li:hover {
        cursor: pointer;
    }

.dropdown .dropdown-menu-container {
        max-height: 365px;
        overflow: hidden;
        width: 164px;
        padding: 0;
        border: 0;
        border-radius: 0;
        box-shadow: 0 2px 14px 0 rgba(0, 0, 0, 0.24);
        z-index: 5000000000;
    }

.dropdown.open .glyphicon {
        transform: rotate(180deg);
    }
</style>

<div class="dropdown">
    <button type="button" class="dropdown-toggle" data-toggle="dropdown"
            aria-haspopup="true" aria-expanded="false">
        <span class="dropdown-title">English</span>
        <span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span>
    </button>
    <div class="dropdown-menu dropdown-menu-container">
        <ul class="dropdown-menu-content"></ul>
    </div>
</div>

var currentLocaleName = Object.keys(items).find(function (key) {
            return items[key] === currentLocale;
        });

$('.dropdown-title').text(currentLocaleName);

$('.dropdown-menu-content')
            .append(Object.keys(items).sort().map(function (item) {
                return $('<li>').text(item);
            }))
            .on("click", function (e) {
                var nextLocaleName = e.target.innerText;
                if (nextLocaleName === currentLocaleName) {
                    e.stopPropagation();
                } else {
                    document.cookie = 'locale=' + items[nextLocaleName] + ';path=/';
                    {% if webshield -%}
                    location.reload(true);
                    {%- else -%}
                    insertParam('_captcha', true);  // reload and force visible captcha
                    $('.dropdown-title').text(nextLocaleName);
                    {%- endif %}
                }

});

$([].find.call($('.dropdown-menu li'), function (item) {
            return item.innerText === currentLocaleName;
        })).addClass('active');

function insertParam(key, value) {
            key = encodeURIComponent(key);
            value = encodeURIComponent(value);

var kvp = document.location.search.substr(1).split('&');
            if (kvp == '') {
                document.location.search = '?' + key + '=' + value;
            }
            else {

var i = kvp.length;
                var x;
                while (i--) {
                    x = kvp[i].split('=');

if (x[0] === key) {
                        x[1] = value;
                        kvp[i] = x.join('=');
                        break;
                    }
                }

if (i < 0) {
                    kvp[kvp.length] = [key, value].join('=');
                }

//this will reload the page, it's likely better to store this until finished
                document.location.search = kvp.join('&');
            }
        }
    })();
</script>

MR SKB